From 2c87e7ec95328989cc97b806e462b7fb85ecd44f Mon Sep 17 00:00:00 2001
From: Lars Gebhardt-Kusche <lars@kusche.berlin>
Date: Fri, 19 Jun 2026 00:58:20 +0200
Subject: [PATCH] dssad

---
 .../assets/apps/user-self-management/app.css  | 213 +-----------
 .../assets/apps/user-self-management/app.js   | 104 +++---
 public/assets/desktop/desktop.css             | 309 ++++++++++++++++++
 3 files changed, 362 insertions(+), 264 deletions(-)

diff --git a/public/assets/apps/user-self-management/app.css b/public/assets/apps/user-self-management/app.css
index b1e0596d..686c543b 100644
--- a/public/assets/apps/user-self-management/app.css
+++ b/public/assets/apps/user-self-management/app.css
@@ -9,25 +9,6 @@
     box-sizing: border-box;
 }
 
-#user-self-management-app .usm-shell {
-    min-height: 100%;
-    background:
-        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.98)),
-        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 36%);
-}
-
-#user-self-management-app .usm-frame {
-    display: grid;
-    grid-template-columns: 240px minmax(0, 1fr);
-    min-height: 100%;
-}
-
-#user-self-management-app .usm-nav {
-    padding: 22px 16px;
-    border-right: 1px solid rgba(148, 163, 184, 0.25);
-    background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%);
-}
-
 #user-self-management-app .usm-brand {
     margin-bottom: 18px;
 }
@@ -49,55 +30,8 @@
     color: #475569;
 }
 
-#user-self-management-app .usm-nav-list {
-    display: grid;
-    gap: 8px;
-}
-
-#user-self-management-app .usm-nav-button {
-    width: 100%;
-    padding: 12px 14px;
-    border: 1px solid rgba(148, 163, 184, 0.25);
-    border-radius: 14px;
-    background: rgba(255, 255, 255, 0.82);
-    color: inherit;
-    text-align: left;
-    font: inherit;
-    cursor: pointer;
-}
-
 #user-self-management-app .usm-nav-button.is-active {
-    background: #0f172a;
-    color: #f8fafc;
-    border-color: #0f172a;
-}
-
-#user-self-management-app .usm-main {
-    padding: 24px;
-}
-
-#user-self-management-app .usm-panel {
-    display: grid;
-    gap: 18px;
-    max-width: 1080px;
-    margin: 0 auto;
-}
-
-#user-self-management-app .usm-hero,
-#user-self-management-app .usm-card,
-#user-self-management-app .usm-actions {
-    padding: 22px;
-    border-radius: 20px;
-    border: 1px solid rgba(148, 163, 184, 0.24);
-    background: rgba(255, 255, 255, 0.92);
-    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
-}
-
-#user-self-management-app .usm-hero {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 18px;
+    color: #0f172a;
 }
 
 #user-self-management-app .usm-kicker {
@@ -115,83 +49,6 @@
     line-height: 1.1;
 }
 
-#user-self-management-app .usm-pill-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-#user-self-management-app .usm-pill {
-    display: inline-flex;
-    align-items: center;
-    min-height: 30px;
-    padding: 0 12px;
-    border-radius: 999px;
-    background: #e2e8f0;
-    font-size: 12px;
-    font-weight: 700;
-    color: #334155;
-}
-
-#user-self-management-app .usm-grid,
-#user-self-management-app .usm-choice-grid,
-#user-self-management-app .usm-list {
-    display: grid;
-    gap: 16px;
-}
-
-#user-self-management-app .usm-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-#user-self-management-app .usm-choice-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-#user-self-management-app .usm-field {
-    display: grid;
-    gap: 8px;
-}
-
-#user-self-management-app .usm-label {
-    font-size: 13px;
-    font-weight: 700;
-    color: #334155;
-}
-
-#user-self-management-app .usm-input,
-#user-self-management-app .usm-textarea {
-    width: 100%;
-    min-height: 42px;
-    padding: 10px 12px;
-    border: 1px solid #cbd5e1;
-    border-radius: 12px;
-    background: #fff;
-    color: inherit;
-    font: inherit;
-}
-
-#user-self-management-app .usm-textarea {
-    min-height: 112px;
-    resize: vertical;
-}
-
-#user-self-management-app .usm-input:focus,
-#user-self-management-app .usm-textarea:focus {
-    outline: 2px solid rgba(37, 99, 235, 0.18);
-    border-color: #3b82f6;
-}
-
-#user-self-management-app .usm-choice {
-    display: grid;
-    gap: 8px;
-    padding: 16px;
-    border: 1px solid #cbd5e1;
-    border-radius: 16px;
-    background: #fff;
-    cursor: pointer;
-}
-
 #user-self-management-app .usm-choice.is-active {
     border-color: #2563eb;
     box-shadow: inset 0 0 0 1px #2563eb;
@@ -212,17 +69,6 @@
     color: #475569;
 }
 
-#user-self-management-app .usm-item {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: start;
-    gap: 12px;
-    padding: 14px 16px;
-    border: 1px solid #dbe2ea;
-    border-radius: 16px;
-    background: #fff;
-}
-
 #user-self-management-app .usm-item input {
     margin-top: 4px;
 }
@@ -238,33 +84,6 @@
     color: #1d4ed8;
 }
 
-#user-self-management-app .usm-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-}
-
-#user-self-management-app .usm-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 42px;
-    padding: 0 18px;
-    border: 0;
-    border-radius: 999px;
-    background: #2563eb;
-    color: #f8fafc;
-    font: inherit;
-    font-weight: 700;
-    cursor: pointer;
-}
-
-#user-self-management-app .usm-button:disabled {
-    cursor: default;
-    opacity: 0.6;
-}
-
 #user-self-management-app .usm-message {
     font-size: 13px;
     color: #334155;
@@ -277,33 +96,3 @@
 #user-self-management-app .usm-message.is-success {
     color: #047857;
 }
-
-#user-self-management-app .usm-loading,
-#user-self-management-app .usm-error-state {
-    display: grid;
-    place-items: center;
-    min-height: 320px;
-    padding: 24px;
-}
-
-@media (max-width: 900px) {
-    #user-self-management-app .usm-frame {
-        grid-template-columns: 1fr;
-    }
-
-    #user-self-management-app .usm-nav {
-        border-right: 0;
-        border-bottom: 1px solid rgba(148, 163, 184, 0.25);
-    }
-
-    #user-self-management-app .usm-grid,
-    #user-self-management-app .usm-choice-grid {
-        grid-template-columns: 1fr;
-    }
-
-    #user-self-management-app .usm-hero,
-    #user-self-management-app .usm-actions {
-        grid-template-columns: 1fr;
-        display: grid;
-    }
-}
diff --git a/public/assets/apps/user-self-management/app.js b/public/assets/apps/user-self-management/app.js
index c9289719..a77bc9b9 100644
--- a/public/assets/apps/user-self-management/app.js
+++ b/public/assets/apps/user-self-management/app.js
@@ -43,7 +43,7 @@
 
         return `
             <button
-                class="usm-choice${isActive ? ' is-active' : ''}"
+                class="window-app-choice usm-choice${isActive ? ' is-active' : ''}"
                 type="button"
                 data-action="select-skin"
                 data-skin-id="${escapeHtml(skin.skin_id)}"
@@ -70,7 +70,7 @@
         const checked = state.draft.apps.enabled_ids.includes(app.app_id);
 
         return `
-            <label class="usm-item">
+            <label class="window-app-item usm-item">
                 <input
                     type="checkbox"
                     data-action="toggle-app"
@@ -78,7 +78,7 @@
                     ${checked ? 'checked' : ''}
                     ${app.required ? 'disabled' : ''}
                 >
-                <span class="usm-item-main">
+                <span class="window-app-item-main usm-item-main">
                     <strong>${escapeHtml(app.title)}</strong>
                     <p>${escapeHtml(app.summary || '')}</p>
                     <span class="usm-item-meta">${app.required ? 'Pflicht-App' : 'Optional sichtbar'}</span>
@@ -91,14 +91,14 @@
         const checked = state.draft.widgets.active_ids.includes(widget.widget_id);
 
         return `
-            <label class="usm-item">
+            <label class="window-app-item usm-item">
                 <input
                     type="checkbox"
                     data-action="toggle-widget"
                     data-widget-id="${escapeHtml(widget.widget_id)}"
                     ${checked ? 'checked' : ''}
                 >
-                <span class="usm-item-main">
+                <span class="window-app-item-main usm-item-main">
                     <strong>${escapeHtml(widget.title)}</strong>
                     <p>${escapeHtml(widget.summary || '')}</p>
                     <span class="usm-item-meta">${widget.default_enabled ? 'Standardbereich' : 'Optionaler Bereich'}</span>
@@ -108,7 +108,7 @@
     }).join('');
 
     const renderProfileFields = (state) => `
-        <div class="usm-grid">
+        <div class="window-app-grid usm-grid">
             ${renderField('name', 'Name', state.draft.profile.name)}
             ${renderField('email', 'E-Mail', state.draft.profile.email, 'email')}
             ${renderField('phone', 'Telefon', state.draft.profile.phone, 'tel')}
@@ -118,18 +118,18 @@
             ${renderField('city', 'Ort', state.draft.profile.city)}
             ${renderField('website', 'Website', state.draft.profile.website, 'url')}
         </div>
-        <div class="usm-field">
-            <label class="usm-label" for="usm-notes">Notizen</label>
-            <textarea id="usm-notes" class="usm-textarea" data-field="profile.notes">${escapeHtml(state.draft.profile.notes || '')}</textarea>
+        <div class="window-app-field usm-field">
+            <label class="window-app-label usm-label" for="usm-notes">Notizen</label>
+            <textarea id="usm-notes" class="window-app-textarea usm-textarea" data-field="profile.notes">${escapeHtml(state.draft.profile.notes || '')}</textarea>
         </div>
     `;
 
     const renderField = (fieldId, label, value, type = 'text') => `
-        <div class="usm-field">
-            <label class="usm-label" for="usm-${escapeHtml(fieldId)}">${escapeHtml(label)}</label>
+        <div class="window-app-field usm-field">
+            <label class="window-app-label usm-label" for="usm-${escapeHtml(fieldId)}">${escapeHtml(label)}</label>
             <input
                 id="usm-${escapeHtml(fieldId)}"
-                class="usm-input"
+                class="window-app-input usm-input"
                 type="${escapeHtml(type)}"
                 data-field="profile.${escapeHtml(fieldId)}"
                 value="${escapeHtml(value || '')}"
@@ -140,11 +140,11 @@
     const sectionContent = (state) => {
         if (state.activeSection === 'desktop') {
             return `
-                <section class="usm-card">
-                    <p class="usm-kicker">Desktop Type</p>
+                <section class="window-app-card usm-card">
+                    <p class="window-app-kicker usm-kicker">Desktop Type</p>
                     <h2>Skin-Auswahl</h2>
-                    <p class="usm-copy">Die direkte Skin-Umschaltung liegt jetzt im Setup. Die Auswahl wird pro Benutzer gespeichert.</p>
-                    <div class="usm-choice-grid">
+                    <p class="window-app-copy usm-copy">Die direkte Skin-Umschaltung liegt jetzt im Setup. Die Auswahl wird pro Benutzer gespeichert.</p>
+                    <div class="window-app-choice-grid usm-choice-grid">
                         ${renderSkinChoices(state)}
                     </div>
                 </section>
@@ -153,10 +153,10 @@
 
         if (state.activeSection === 'profile') {
             return `
-                <section class="usm-card">
-                    <p class="usm-kicker">Benutzerdaten</p>
+                <section class="window-app-card usm-card">
+                    <p class="window-app-kicker usm-kicker">Benutzerdaten</p>
                     <h2>Persoenliches Profil</h2>
-                    <p class="usm-copy">Diese Daten werden zunaechst lokal gespeichert und spaeter an LDAP oder Keycloak angebunden.</p>
+                    <p class="window-app-copy usm-copy">Diese Daten werden zunaechst lokal gespeichert und spaeter an LDAP oder Keycloak angebunden.</p>
                     ${renderProfileFields(state)}
                 </section>
             `;
@@ -164,11 +164,11 @@
 
         if (state.activeSection === 'apps') {
             return `
-                <section class="usm-card">
-                    <p class="usm-kicker">App-Auswahl</p>
+                <section class="window-app-card usm-card">
+                    <p class="window-app-kicker usm-kicker">App-Auswahl</p>
                     <h2>Sichtbare Desktop-Apps</h2>
-                    <p class="usm-copy">Aenderungen an der App-Auswahl werden nach dem Speichern mit einem Desktop-Reload sauber uebernommen.</p>
-                    <div class="usm-list">
+                    <p class="window-app-copy usm-copy">Aenderungen an der App-Auswahl werden nach dem Speichern mit einem Desktop-Reload sauber uebernommen.</p>
+                    <div class="window-app-list usm-list">
                         ${renderAppItems(state)}
                     </div>
                 </section>
@@ -176,11 +176,11 @@
         }
 
         return `
-            <section class="usm-card">
-                <p class="usm-kicker">Infobereich</p>
+            <section class="window-app-card usm-card">
+                <p class="window-app-kicker usm-kicker">Infobereich</p>
                 <h2>Rechter Desktopbereich</h2>
-                <p class="usm-copy">Diese Inhalte liegen aktuell im rechten Infobereich des Desktops und werden hier benutzerbezogen ein- oder ausgeblendet.</p>
-                <div class="usm-list">
+                <p class="window-app-copy usm-copy">Diese Inhalte liegen aktuell im rechten Infobereich des Desktops und werden hier benutzerbezogen ein- oder ausgeblendet.</p>
+                <div class="window-app-list usm-list">
                     ${renderWidgetItems(state)}
                 </div>
             </section>
@@ -189,59 +189,59 @@
 
     const renderApp = (root, state) => {
         if (state.loading) {
-            root.innerHTML = '<div class="usm-loading"><p class="usm-copy">Einstellungen werden geladen.</p></div>';
+            root.innerHTML = '<div class="window-app-loading usm-loading"><p class="window-app-copy usm-copy">Einstellungen werden geladen.</p></div>';
             return;
         }
 
         if (state.error && !state.bootstrap) {
-            root.innerHTML = `<div class="usm-error-state"><p class="usm-message is-error">${escapeHtml(state.error)}</p></div>`;
+            root.innerHTML = `<div class="window-app-error-state usm-error-state"><p class="window-app-message usm-message is-error">${escapeHtml(state.error)}</p></div>`;
             return;
         }
 
         root.innerHTML = `
-            <div class="usm-shell">
-                <div class="usm-frame">
-                    <aside class="usm-nav">
-                        <div class="usm-brand">
-                            <p class="usm-kicker">Setup</p>
+            <div class="window-app-shell usm-shell">
+                <div class="window-app-frame usm-frame">
+                    <aside class="window-app-sidebar usm-nav">
+                        <div class="window-app-brand usm-brand">
+                            <p class="window-app-kicker usm-kicker">Setup</p>
                             <h1>User Self Management</h1>
-                            <p>Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und den rechten Infobereich.</p>
+                            <p class="window-app-copy">Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und den rechten Infobereich.</p>
                         </div>
-                        <div class="usm-nav-list">
+                        <div class="window-app-nav-list usm-nav-list">
                             ${SECTIONS.map((section) => `
                                 <button
-                                    class="usm-nav-button${state.activeSection === section.id ? ' is-active' : ''}"
+                                    class="window-app-nav-button usm-nav-button${state.activeSection === section.id ? ' is-active' : ''}"
                                     type="button"
                                     data-action="open-section"
                                     data-section-id="${escapeHtml(section.id)}"
                                 >
                                     <strong>${escapeHtml(section.label)}</strong>
-                                    <span class="usm-meta">${escapeHtml(summarizeSection(section.id))}</span>
+                                    <span class="window-app-meta usm-meta">${escapeHtml(summarizeSection(section.id))}</span>
                                 </button>
                             `).join('')}
                         </div>
                     </aside>
-                    <main class="usm-main">
-                        <div class="usm-panel">
-                            <section class="usm-hero">
+                    <main class="window-app-main usm-main">
+                        <div class="window-app-panel usm-panel">
+                            <section class="window-app-hero usm-hero">
                                 <div>
-                                    <p class="usm-kicker">Desktop Setup</p>
-                                    <h2 class="usm-title">${escapeHtml(sectionTitle(state.activeSection))}</h2>
-                                    <p class="usm-copy">${escapeHtml(summarizeSection(state.activeSection))}</p>
+                                    <p class="window-app-kicker usm-kicker">Desktop Setup</p>
+                                    <h2 class="window-app-title usm-title">${escapeHtml(sectionTitle(state.activeSection))}</h2>
+                                    <p class="window-app-copy usm-copy">${escapeHtml(summarizeSection(state.activeSection))}</p>
                                 </div>
-                                <div class="usm-pill-row">
-                                    <span class="usm-pill">LDAP: geplant</span>
-                                    <span class="usm-pill">Keycloak: geplant</span>
-                                    <span class="usm-pill">Scope: ${escapeHtml(state.bootstrap.meta.storage_scope || 'guest')}</span>
+                                <div class="window-app-pill-row usm-pill-row">
+                                    <span class="window-app-pill usm-pill">LDAP: geplant</span>
+                                    <span class="window-app-pill usm-pill">Keycloak: geplant</span>
+                                    <span class="window-app-pill usm-pill">Scope: ${escapeHtml(state.bootstrap.meta.storage_scope || 'guest')}</span>
                                 </div>
                             </section>
                             ${sectionContent(state)}
-                            <section class="usm-actions">
+                            <section class="window-app-actions usm-actions">
                                 <div>
-                                    <p class="usm-note">Skin- und App-Aenderungen koennen einen Reload ausloesen, damit Fenster, Icons und Menue sauber synchron bleiben.</p>
-                                    <p class="usm-message${state.error ? ' is-error' : state.success ? ' is-success' : ''}">${escapeHtml(state.error || state.success || '')}</p>
+                                    <p class="window-app-note usm-note">Skin- und App-Aenderungen koennen einen Reload ausloesen, damit Fenster, Icons und Menue sauber synchron bleiben.</p>
+                                    <p class="window-app-message usm-message${state.error ? ' is-error' : state.success ? ' is-success' : ''}">${escapeHtml(state.error || state.success || '')}</p>
                                 </div>
-                                <button class="usm-button" type="button" data-action="save-settings" ${state.saving ? 'disabled' : ''}>
+                                <button class="window-app-button usm-button" type="button" data-action="save-settings" ${state.saving ? 'disabled' : ''}>
                                     ${state.saving ? 'Speichert ...' : 'Aenderungen speichern'}
                                 </button>
                             </section>
diff --git a/public/assets/desktop/desktop.css b/public/assets/desktop/desktop.css
index cf4b5eea..8a069c66 100644
--- a/public/assets/desktop/desktop.css
+++ b/public/assets/desktop/desktop.css
@@ -514,6 +514,295 @@ h1 {
     color: #991b1b;
 }
 
+.window-app-shell {
+    min-height: 100%;
+    color: #0f172a;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98)),
+        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 36%);
+}
+
+.window-app-frame {
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    min-height: 100%;
+}
+
+.window-app-sidebar {
+    padding: 22px 16px;
+    border-right: 1px solid rgba(148, 163, 184, 0.24);
+    background:
+        linear-gradient(180deg, rgba(219, 234, 254, 0.96), rgba(239, 246, 255, 0.94)),
+        linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
+}
+
+.window-app-brand {
+    margin-bottom: 18px;
+}
+
+.window-app-brand h1 {
+    margin: 0 0 8px;
+    font-size: 24px;
+    line-height: 1.1;
+}
+
+.window-app-copy,
+.window-app-meta,
+.window-app-note,
+.window-app-status,
+.window-app-brand p {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #475569;
+}
+
+.window-app-nav-list {
+    display: grid;
+    gap: 8px;
+}
+
+.window-app-nav-button {
+    width: 100%;
+    padding: 12px 14px;
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.84);
+    color: inherit;
+    text-align: left;
+    font: inherit;
+    cursor: pointer;
+    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
+    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
+}
+
+.window-app-nav-button:hover {
+    transform: translateY(-1px);
+    border-color: rgba(59, 130, 246, 0.28);
+    background: rgba(255, 255, 255, 0.96);
+}
+
+.window-app-nav-button.is-active {
+    border-color: rgba(37, 99, 235, 0.3);
+    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
+    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18), 0 8px 18px rgba(37, 99, 235, 0.08);
+    color: #0f172a;
+}
+
+.window-app-main {
+    padding: 24px;
+}
+
+.window-app-panel {
+    display: grid;
+    gap: 18px;
+    max-width: 1080px;
+    margin: 0 auto;
+}
+
+.window-app-hero,
+.window-app-card,
+.window-app-actions {
+    padding: 22px;
+    border-radius: 20px;
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
+}
+
+.window-app-hero {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 18px;
+}
+
+.window-app-kicker {
+    margin: 0 0 10px;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #2563eb;
+}
+
+.window-app-title {
+    margin: 0 0 8px;
+    font-size: 32px;
+    line-height: 1.1;
+}
+
+.window-app-pill-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.window-app-pill {
+    display: inline-flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 0 12px;
+    border-radius: 999px;
+    background: #e2e8f0;
+    font-size: 12px;
+    font-weight: 700;
+    color: #334155;
+}
+
+.window-app-grid,
+.window-app-choice-grid,
+.window-app-list {
+    display: grid;
+    gap: 16px;
+}
+
+.window-app-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.window-app-choice-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.window-app-field {
+    display: grid;
+    gap: 8px;
+}
+
+.window-app-label {
+    font-size: 13px;
+    font-weight: 700;
+    color: #334155;
+}
+
+.window-app-input,
+.window-app-textarea {
+    width: 100%;
+    min-height: 42px;
+    padding: 10px 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: 12px;
+    background: #fff;
+    color: inherit;
+    font: inherit;
+}
+
+.window-app-textarea {
+    min-height: 112px;
+    resize: vertical;
+}
+
+.window-app-input:focus,
+.window-app-textarea:focus {
+    outline: 2px solid rgba(37, 99, 235, 0.18);
+    border-color: #3b82f6;
+}
+
+.window-app-choice {
+    display: grid;
+    gap: 8px;
+    padding: 16px;
+    border: 1px solid #cbd5e1;
+    border-radius: 16px;
+    background: #fff;
+    cursor: pointer;
+}
+
+.window-app-choice.is-active {
+    border-color: #2563eb;
+    box-shadow: inset 0 0 0 1px #2563eb;
+    background: #eff6ff;
+}
+
+.window-app-choice strong,
+.window-app-item-main strong {
+    display: block;
+    margin: 0 0 4px;
+    font-size: 15px;
+}
+
+.window-app-choice p,
+.window-app-item-main p {
+    margin: 0;
+    font-size: 13px;
+    color: #475569;
+}
+
+.window-app-item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: 12px;
+    padding: 14px 16px;
+    border: 1px solid #dbe2ea;
+    border-radius: 16px;
+    background: #fff;
+}
+
+.window-app-item input {
+    margin-top: 4px;
+}
+
+.window-app-item-main {
+    min-width: 0;
+}
+
+.window-app-item-meta {
+    margin-top: 8px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #1d4ed8;
+}
+
+.window-app-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.window-app-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 42px;
+    padding: 0 18px;
+    border: 0;
+    border-radius: 999px;
+    background: #2563eb;
+    color: #f8fafc;
+    font: inherit;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.window-app-button:disabled {
+    cursor: default;
+    opacity: 0.6;
+}
+
+.window-app-message {
+    font-size: 13px;
+    color: #334155;
+}
+
+.window-app-message.is-error {
+    color: #b91c1c;
+}
+
+.window-app-message.is-success {
+    color: #047857;
+}
+
+.window-app-loading,
+.window-app-error-state {
+    display: grid;
+    place-items: center;
+    min-height: 320px;
+    padding: 24px;
+}
+
 .window-embed-fallback {
     position: absolute;
     inset: auto 16px 16px 16px;
@@ -933,4 +1222,24 @@ h1 {
         left: auto !important;
         top: auto !important;
     }
+
+    .window-app-frame {
+        grid-template-columns: 1fr;
+    }
+
+    .window-app-sidebar {
+        border-right: 0;
+        border-bottom: 1px solid rgba(148, 163, 184, 0.25);
+    }
+
+    .window-app-grid,
+    .window-app-choice-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .window-app-hero,
+    .window-app-actions {
+        display: grid;
+        grid-template-columns: 1fr;
+    }
 }