.app-theme.kit-demo{--shell-rail-w:244px;--shell-pad:40px;--shell-header-h:56px;--nav-item-h:36px;--nav-radius:min(var(--radius-control), 10px);--motion-feedback:.15s;--motion-enter:.2s}.app-theme.kit-demo .app-frame{grid-template-columns:var(--shell-rail-w) minmax(0, 1fr);max-width:none;min-height:100dvh;display:grid}.app-theme.kit-demo .app-frame[data-sidebar-collapsed=true]{grid-template-columns:72px minmax(0,1fr)}.app-theme.kit-demo .workspace-rail{background:var(--section);border-right:1px solid var(--border);height:100dvh;color:var(--text);scrollbar-width:thin;scrollbar-color:transparent transparent;flex-direction:column;gap:20px;padding:16px 12px;display:flex;position:sticky;top:0;overflow-y:auto}.app-theme.kit-demo .workspace-rail:is(:hover,:focus-within){scrollbar-color:var(--border-strong) transparent}.app-theme.kit-demo .shell-rail-heading{justify-content:space-between;align-items:center;gap:8px;min-height:40px;padding-inline:8px;display:flex}.app-theme.kit-demo .app-brand{letter-spacing:-.03em;color:var(--text);gap:9px;font-size:17px;text-decoration:none}.app-theme.kit-demo :is(.shell-navigation-trigger,.shell-collapse-trigger){border:1px solid var(--border);border-radius:var(--radius-control);min-width:40px;min-height:40px;color:var(--text);cursor:pointer;background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:6px;display:inline-flex}.app-theme.kit-demo .shell-collapse-trigger{min-width:34px;min-height:34px;color:var(--muted);border-color:#0000}.app-theme.kit-demo .workspace-switcher{border-bottom:0;padding:0;position:relative}.app-theme.kit-demo .workspace-switcher-button{border:1px solid var(--border);border-radius:var(--radius-control);width:100%;min-height:40px;color:var(--text);font:500 14px/1.3 var(--font-sans);cursor:pointer;text-align:start;background:0 0;align-items:center;gap:10px;padding:6px 8px;display:flex}.app-theme.kit-demo .workspace-switcher-button:hover{background:var(--hover-fill);border-color:var(--border-strong)}.app-theme.kit-demo .workspace-switcher-initial,.app-theme.kit-demo .user-menu-initial{background:color-mix(in srgb, var(--accent) 22%, var(--raised));width:24px;height:24px;color:var(--accent-text,var(--accent));border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:600;display:inline-flex}.app-theme.kit-demo :is(.workspace-switcher-name,.user-menu-name){text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.app-theme.kit-demo :is(.workspace-switcher-chevron,.user-menu-chevron){color:var(--muted);flex-shrink:0}.app-theme.kit-demo .primary-navigation{gap:18px;display:grid}.app-theme.kit-demo .nav-group{gap:2px;display:grid}.app-theme.kit-demo .nav-group-label{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px;padding-inline:10px;font-size:11px;font-weight:600}.app-theme.kit-demo summary.nav-group-label{border-radius:var(--nav-radius);cursor:pointer;justify-content:space-between;align-items:center;min-height:28px;margin:0;list-style:none;display:flex}.app-theme.kit-demo summary.nav-group-label::-webkit-details-marker{display:none}.app-theme.kit-demo summary.nav-group-label:hover{background:var(--hover-fill);color:var(--text)}.app-theme.kit-demo summary.nav-group-label svg{transition:transform var(--motion-feedback) ease}.app-theme.kit-demo details[open]>summary.nav-group-label svg{transform:rotate(180deg)}.app-theme.kit-demo [data-sidebar-collapsed=true] .nav-group-label{display:none}.app-theme.kit-demo .app-rail-promo{border:1px solid var(--border);border-radius:var(--radius-card,16px);background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--raised);gap:6px;padding:14px;display:grid}.app-theme.kit-demo .app-rail-promo p{margin:0}.app-theme.kit-demo .app-rail-promo-title{color:var(--accent-text,var(--accent));font-size:14px;font-weight:600}.app-theme.kit-demo .app-rail-promo-body{color:var(--text);font-size:13px;line-height:1.45}.app-theme.kit-demo .app-rail-promo a{border:1px solid var(--border-strong);border-radius:var(--nav-radius);background:var(--page);min-height:36px;color:var(--text);justify-content:center;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex}.app-theme.kit-demo .app-rail-promo a:hover{background:var(--hover-fill)}.app-theme.kit-demo [data-sidebar-collapsed=true] .app-rail-promo{display:none}.app-theme.kit-demo .user-menu-avatar{object-fit:cover;border-radius:50%;flex-shrink:0;width:28px;height:28px}.app-theme.kit-demo .user-menu-text{flex:auto;min-width:0;line-height:1.25;display:grid}.app-theme.kit-demo .user-menu-email{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.app-theme.kit-demo [data-sidebar-collapsed=true] .user-menu-text{display:none}.app-theme.kit-demo .user-menu form{margin:0}.app-theme.kit-demo .nav-item{min-height:var(--nav-item-h);border-radius:var(--nav-radius);color:var(--muted);border:0;align-items:center;gap:10px;padding:6px 10px;font-size:14px;font-weight:400;text-decoration:none;display:flex}.app-theme.kit-demo .nav-item .app-nav-icon{opacity:.85;width:16px;height:16px}.app-theme.kit-demo .nav-item:hover{background:var(--hover-fill);color:var(--text)}.app-theme.kit-demo .nav-item-active,.app-theme.kit-demo .nav-item-active:hover{background:color-mix(in srgb, var(--text) 9%, transparent);color:var(--text);font-weight:500}.app-theme.kit-demo .nav-item-active .app-nav-icon{color:var(--accent-text,var(--accent));opacity:1}.app-theme.kit-demo .app-rail-footer{border-top:1px solid var(--border);color:var(--muted);gap:0;margin-top:auto;padding-top:12px;font-size:13px;display:grid}.app-theme.kit-demo .app-rail-footer a{border-radius:var(--nav-radius);min-height:32px;color:var(--muted);align-items:center;gap:10px;padding:4px 10px;text-decoration:none;display:flex}.app-theme.kit-demo .app-rail-footer a .app-nav-icon{width:15px;height:15px}.app-theme.kit-demo .app-rail-footer a[aria-current=page]{background:color-mix(in srgb, var(--text) 9%, transparent);color:var(--text)}.app-theme.kit-demo .app-rail-footer a[aria-current=page] .app-nav-icon{color:var(--accent-text,var(--accent))}.app-theme.kit-demo .app-rail-account{flex-shrink:0;position:relative}.app-theme.kit-demo .user-menu-button{border-radius:var(--nav-radius);width:100%;min-height:40px;color:var(--text);font:400 14px/1.3 var(--font-sans);cursor:pointer;text-align:start;background:0 0;border:0;align-items:center;gap:10px;padding:6px 8px;display:flex}.app-theme.kit-demo .user-menu-button:hover{background:var(--hover-fill)}.app-theme.kit-demo [aria-expanded=true] :is(.workspace-switcher-chevron,.user-menu-chevron){transform:rotate(180deg)}.app-theme.kit-demo .main-panel{min-width:0;padding:0 var(--shell-pad) 64px}.app-theme.kit-demo .main-header{z-index:15;min-height:var(--shell-header-h);max-width:none;margin:0 calc(var(--shell-pad) * -1) 32px;padding:0 var(--shell-pad);border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--page) 86%, transparent);-webkit-backdrop-filter:saturate(1.4)blur(12px);color:var(--text);justify-content:space-between;align-items:center;gap:16px;font-size:14px;font-weight:500;display:flex;position:sticky;top:0}.app-theme.kit-demo .main-header-actions{flex-wrap:nowrap;align-items:center;gap:8px;display:flex}.app-theme.kit-demo .main-header-actions>a:last-child{border-radius:var(--nav-radius);color:var(--muted);padding:6px 8px;font-size:13px;font-weight:400;text-decoration:none}.app-theme.kit-demo .main-header-actions>a:last-child:hover{background:var(--hover-fill);color:var(--text)}.app-theme.kit-demo .notification-bell-button{border-color:#0000;width:34px;height:34px}.app-theme.kit-demo .notification-bell-button:hover{border-color:var(--border);background:var(--hover-fill)}.app-theme.kit-demo .account-content{max-width:1120px;margin:0 auto}.app-theme.kit-demo .account-content>*+*{margin-top:0}.app-theme.kit-demo h1{letter-spacing:-.03em;font-size:clamp(26px,2.4vw,34px)}.app-theme.kit-demo .account-content .auth-card{width:min(100%,640px);margin-inline:auto}.app-theme.kit-demo .account-content .auth-card.settings-wide{width:min(100%,920px)}.app-theme.kit-demo .account-content .auth-card h1{margin:0}.app-theme.kit-demo .settings-layout{grid-template-columns:200px minmax(0,1fr);grid-template-areas:"heading heading""nav panel";align-items:start;gap:24px 40px;display:grid}.app-theme.kit-demo .settings-heading{grid-area:heading}.app-theme.kit-demo .settings-heading h1{margin:0}.app-theme.kit-demo .settings-sections-nav{top:calc(var(--shell-header-h) + 24px);grid-area:nav;position:sticky}.app-theme.kit-demo .settings-sections-nav [role=tablist]{gap:2px;display:grid}.app-theme.kit-demo .settings-sections-nav [role=tab]{border-radius:var(--nav-radius);min-height:34px;color:var(--muted);font:400 14px/1.3 var(--font-sans);text-align:start;white-space:nowrap;cursor:pointer;background:0 0;border:0;align-items:center;padding:6px 10px;display:flex}.app-theme.kit-demo .settings-sections-nav [role=tab]:hover{background:var(--hover-fill);color:var(--text)}.app-theme.kit-demo .settings-sections-nav [role=tab][aria-selected=true]{background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--accent-text,var(--accent));font-weight:500}.app-theme.kit-demo .settings-panel{grid-area:panel;gap:16px;min-width:0;display:grid}.app-theme.kit-demo .settings-panel-heading{border-bottom:1px solid var(--border);gap:6px;margin-bottom:4px;padding-bottom:20px;display:grid}.app-theme.kit-demo .settings-panel-heading :is(h2,p){margin:0}.app-theme.kit-demo .settings-panel-heading p{color:var(--muted);font-size:14px;line-height:1.6}@media (max-width:900px){.app-theme.kit-demo .settings-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading""nav""panel";gap:16px}.app-theme.kit-demo .settings-sections-nav{margin-inline:calc(var(--shell-pad,16px) * -1);scrollbar-width:none;position:static;overflow-x:auto}.app-theme.kit-demo .settings-sections-nav [role=tablist]{width:max-content;padding-inline:var(--shell-pad,16px);gap:6px;display:flex}.app-theme.kit-demo .settings-sections-nav [role=tab]{border:1px solid var(--border);border-radius:999px;min-height:36px;padding:6px 14px;font-size:13px}}.app-theme.kit-demo [data-sidebar-collapsed=true] .workspace-rail{padding-inline:12px}.app-theme.kit-demo [data-sidebar-collapsed=true] .shell-rail-heading{justify-content:center;padding-inline:0}.app-theme.kit-demo [data-sidebar-collapsed=true] .shell-rail-heading .app-brand,.app-theme.kit-demo [data-sidebar-collapsed=true] :is(.nav-label,.workspace-switcher-name,.workspace-switcher-chevron,.user-menu-name,.user-menu-chevron){display:none}.app-theme.kit-demo [data-sidebar-collapsed=true] :is(.nav-item,.app-rail-footer a,.user-menu-button,.workspace-switcher-button){justify-content:center;padding-inline:8px}.shell-rail-hint{z-index:100;border:1px solid var(--border-strong);border-radius:var(--radius-control);background:var(--raised);color:var(--text);font:500 14px/1.4 var(--font-sans);white-space:nowrap;pointer-events:none;padding:8px 12px;position:fixed;translate:0 4px;box-shadow:0 12px 32px #00000047}.app-theme.kit-demo .app-frame[data-shell-mode=compact]{display:block}.app-theme.kit-demo .shell-compact-header{z-index:20;min-height:56px;padding:8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));background:var(--section);border-block-end:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;display:flex;position:sticky;top:0}.app-theme.kit-demo .app-frame[data-shell-mode=compact] .main-panel{--shell-pad:16px}.app-theme.kit-demo .app-frame[data-shell-mode=compact] .main-header{-webkit-backdrop-filter:none;background:0 0;flex-flow:row;min-height:48px;margin-bottom:20px;position:static}.app-theme.kit-demo .app-frame[data-shell-mode=compact] .main-header-actions>a:last-child{display:none}.app-theme.kit-demo .shell-navigation-drawer{border:0;border-right:1px solid var(--border);background:var(--raised);width:min(320px,88vw);max-width:none;height:100dvh;max-height:none;color:var(--text);overscroll-behavior:contain;margin:0;padding:0;overflow-y:auto}.app-theme.kit-demo .shell-navigation-drawer::backdrop{background:#0000008c}.app-theme.kit-demo .shell-navigation-drawer[open]{flex-direction:column;display:flex}@media (prefers-reduced-motion:no-preference){.app-theme.kit-demo .shell-navigation-drawer[open]{animation:.22s cubic-bezier(.16,1,.3,1) both kit-demo-drawer-in}}@keyframes kit-demo-drawer-in{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:none}}.app-theme.kit-demo .shell-drawer-header{z-index:2;padding:max(12px, env(safe-area-inset-top)) 16px 8px;background:var(--raised);justify-content:space-between;align-items:center;font-size:14px;font-weight:500;display:flex;position:sticky;top:0}.app-theme.kit-demo .shell-drawer-content{min-width:0;padding:8px 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;flex:1;gap:20px;display:flex}.app-theme.kit-demo .shell-drawer-content :is(.nav-item,.app-rail-footer a,.user-menu-button){min-height:44px}@media (max-width:760px){.app-theme.kit-demo .app-frame[data-shell-ready=false]{display:block}.app-theme.kit-demo .app-frame[data-shell-ready=false] .workspace-rail{border-right:0;border-bottom:1px solid var(--border);height:auto;position:static}.app-theme.kit-demo .main-panel{--shell-pad:16px}.app-theme.kit-demo .account-content .auth-card{padding:20px 16px}}.app-theme.kit-demo :is(.button,.nav-item,.app-rail-footer a,.user-menu-button,.workspace-switcher-button,.notification-bell-button,.shell-navigation-trigger,.shell-collapse-trigger){transition:background-color var(--motion-feedback) var(--ease), border-color var(--motion-feedback) var(--ease), color var(--motion-feedback) var(--ease)}.app-theme.kit-demo :is(.user-menu-chevron,.workspace-switcher-chevron){transition:transform var(--motion-enter) var(--ease)}@media (hover:hover){.app-theme.kit-demo :is(.app-rail-footer a,.shell-navigation-trigger,.shell-collapse-trigger):hover{background:var(--hover-fill);color:var(--text)}}@media (prefers-reduced-motion:reduce){.app-theme.kit-demo *,.app-theme.kit-demo :before,.app-theme.kit-demo :after{transition:none!important;animation:none!important}}
