/* Mandatory app shell: top bar, user avatar and settings drawer. */
.ui-app-topbar { position:sticky; z-index:30; top:0; min-height:var(--ui-topbar-height); display:grid; grid-template-columns:auto minmax(220px,820px) auto; align-items:center; gap:var(--ui-space-6); padding:0 var(--ui-space-6); border-bottom:var(--ui-border-width) solid var(--ui-border); background:color-mix(in srgb,var(--ui-surface) 92%,transparent); backdrop-filter:blur(var(--ui-topbar-blur)); }
.ui-app-menu,.ui-settings-trigger { width:var(--ui-control); height:var(--ui-control); display:grid; place-items:center; border:0; border-radius:var(--ui-radius); color:var(--ui-text-secondary); background:transparent; cursor:pointer; transition:color var(--ui-fast),background var(--ui-fast),transform var(--ui-fast); }.ui-app-menu:hover,.ui-settings-trigger:hover { color:var(--ui-text); background:var(--ui-surface-subtle); }.ui-app-menu:active,.ui-settings-trigger:active { transform:scale(.94); }
.ui-app-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.ui-chevron-icon,.ui-back-icon { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ui-app-search { position:relative; width:100%; }.ui-app-search .ui-app-icon { position:absolute; top:50%; left:var(--ui-space-4); translate:0 -50%; color:var(--ui-muted); }.ui-app-search input { width:100%; min-height:var(--ui-control-lg); padding:0 var(--ui-space-4) 0 var(--ui-space-10); border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-pill); color:var(--ui-text); background:var(--ui-surface-subtle); outline:0; font-size:calc(18px * var(--ui-scale)); transition:border-color var(--ui-fast),box-shadow var(--ui-fast),background var(--ui-fast); }.ui-app-search input::placeholder { color:var(--ui-muted); }.ui-app-search input:focus { border-color:var(--ui-brand); box-shadow:var(--ui-focus); background:var(--ui-surface); }
.ui-app-actions { display:flex; align-items:center; gap:var(--ui-space-3); }.ui-user-area { position:relative; }.ui-user-avatar { width:40px; height:40px; display:grid; place-items:center; overflow:hidden; padding:0; border:0; border-radius:50%; color:var(--ui-on-brand); background:linear-gradient(145deg,var(--ui-brand),var(--ui-accent)); box-shadow:var(--ui-shadow-sm); cursor:pointer; font-size:calc(14px * var(--ui-scale)); font-weight:800; transition:transform var(--ui-fast),box-shadow var(--ui-fast); }.ui-user-avatar img { width:100%; height:100%; display:block; object-fit:cover; }.ui-user-avatar:hover { transform:translateY(-1px) scale(1.03); box-shadow:var(--ui-shadow-lg); }.ui-user-avatar:active { transform:scale(.95); }.ui-user-menu { position:absolute; z-index:45; top:calc(100% + var(--ui-space-3)); right:0; width:220px; padding:var(--ui-space-2); border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-radius); color:var(--ui-text); background:var(--ui-surface-elevated); box-shadow:var(--ui-shadow-lg); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.97); transform-origin:top right; transition:opacity var(--ui-fast),transform var(--ui-motion),visibility var(--ui-motion); }.ui-user-menu.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }.ui-user-summary { padding:var(--ui-space-3); border-bottom:var(--ui-border-width) solid var(--ui-border); }.ui-user-summary b,.ui-user-summary small { display:block; }.ui-user-summary b { color:var(--ui-ink); font-size:calc(14px * var(--ui-scale)); }.ui-user-summary small { margin-top:2px; color:var(--ui-muted); font-size:calc(12px * var(--ui-scale)); }.ui-user-menu button { width:100%; min-height:var(--ui-control-sm); margin-top:var(--ui-space-1); padding:0 var(--ui-space-3); border:0; border-radius:var(--ui-radius-sm); color:var(--ui-text-secondary); background:transparent; cursor:pointer; text-align:left; transition:background var(--ui-fast),color var(--ui-fast),transform var(--ui-fast); }.ui-user-menu button:hover { color:var(--ui-text); background:var(--ui-surface-subtle); transform:translateX(2px); }.ui-user-menu .ui-user-danger { color:var(--ui-danger); }
.ui-settings-scrim { position:fixed; z-index:50; inset:0; visibility:hidden; opacity:0; background:rgba(0,0,0,.42); transition:opacity var(--ui-motion) var(--ui-ease-out),visibility var(--ui-motion); }.ui-settings-drawer { position:fixed; z-index:60; top:0; right:0; bottom:0; width:min(520px,100vw); display:flex; flex-direction:column; border-left:var(--ui-border-width) solid var(--ui-border); color:var(--ui-text); background:var(--ui-surface-elevated); box-shadow:-8px 0 18px color-mix(in srgb,var(--ui-ink) var(--ui-shadow-alpha),transparent),-30px 0 64px color-mix(in srgb,var(--ui-ink) var(--ui-shadow-lg-alpha),transparent); translate:105% 0; transition:translate var(--ui-slow); }.ui-settings-open .ui-settings-scrim { visibility:visible; opacity:1; }.ui-settings-open .ui-settings-drawer { translate:0 0; }
.ui-settings-head { min-height:var(--ui-topbar-height); display:flex; align-items:center; justify-content:space-between; gap:var(--ui-space-4); padding:0 var(--ui-space-6); border-bottom:var(--ui-border-width) solid var(--ui-border); }.ui-settings-title { margin:0; color:var(--ui-ink); font-size:calc(20px * var(--ui-scale)); letter-spacing:-.03em; }.ui-settings-close { width:var(--ui-control); height:var(--ui-control); display:grid; place-items:center; border:0; border-radius:var(--ui-radius); color:var(--ui-text-secondary); background:transparent; cursor:pointer; }.ui-settings-close:hover { color:var(--ui-text); background:var(--ui-surface-subtle); }
.ui-settings-body { flex:1; overflow:auto; padding:var(--ui-space-6); }.ui-settings-page[hidden] { display:none; }.ui-setting-list { display:grid; gap:var(--ui-space-2); }.ui-setting-link { width:100%; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:var(--ui-space-3); padding:var(--ui-space-4); border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-radius); color:var(--ui-text); background:var(--ui-surface); cursor:pointer; text-align:left; transition:transform var(--ui-fast),border-color var(--ui-fast),background var(--ui-fast); }.ui-setting-link:hover { border-color:var(--ui-border-strong); background:var(--ui-surface-subtle); transform:translateY(-1px); }.ui-setting-link strong,.ui-setting-link small { display:block; }.ui-setting-link strong { font-size:calc(14px * var(--ui-scale)); }.ui-setting-link small { margin-top:2px; color:var(--ui-muted); font-size:calc(12px * var(--ui-scale)); }.ui-chevron { color:var(--ui-muted); font-size:22px; }
.ui-settings-back { display:inline-flex; align-items:center; gap:var(--ui-space-2); margin:0 0 var(--ui-space-5); padding:0; border:0; color:var(--ui-brand); background:transparent; cursor:pointer; font-size:calc(14px * var(--ui-scale)); font-weight:720; }.ui-settings-section { padding-bottom:var(--ui-space-6); margin-bottom:var(--ui-space-6); border-bottom:var(--ui-border-width) solid var(--ui-border); }.ui-settings-section:last-child { margin-bottom:0; border-bottom:0; }.ui-settings-label { display:block; margin-bottom:var(--ui-space-2); color:var(--ui-ink); font-size:calc(14px * var(--ui-scale)); font-weight:760; }.ui-settings-help { margin:0 0 var(--ui-space-4); color:var(--ui-muted); font-size:calc(12px * var(--ui-scale)); line-height:1.6; }
.ui-preset-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--ui-space-3); }.ui-preset { position:relative; min-height:62px; display:flex; align-items:center; gap:var(--ui-space-3); overflow:hidden; padding:var(--ui-space-3); border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-radius); color:var(--ui-text); background:var(--ui-surface); cursor:pointer; text-align:left; transition:transform var(--ui-fast),border-color var(--ui-fast),box-shadow var(--ui-fast); }.ui-preset:hover { transform:translateY(-1px); border-color:var(--ui-border-strong); }.ui-preset.is-active { border-color:var(--ui-brand); box-shadow:var(--ui-focus); }.ui-preset-swatch { width:30px; height:30px; flex:none; border-radius:50%; background:linear-gradient(135deg,var(--preset-a) 0 50%,var(--preset-b) 50%); }.ui-preset b,.ui-preset small { display:block; }.ui-preset b { font-size:calc(13px * var(--ui-scale)); }.ui-preset small { margin-top:2px; color:var(--ui-muted); font-size:calc(11px * var(--ui-scale)); }
.ui-segmented { display:grid; grid-template-columns:1fr 1fr; gap:var(--ui-space-1); padding:var(--ui-space-1); border-radius:var(--ui-radius); background:var(--ui-surface-subtle); }.ui-segment { min-height:var(--ui-control-sm); border:0; border-radius:var(--ui-radius-sm); color:var(--ui-text-secondary); background:transparent; cursor:pointer; transition:background var(--ui-fast),color var(--ui-fast),box-shadow var(--ui-fast),transform var(--ui-fast); }.ui-segment.is-active { color:var(--ui-text); background:var(--ui-surface); box-shadow:var(--ui-shadow-sm); }.ui-segment:active { transform:scale(.97); }
.ui-color-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--ui-space-3); }.ui-color-field { display:flex; align-items:center; gap:var(--ui-space-3); min-width:0; padding:var(--ui-space-2); border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-radius-sm); background:var(--ui-surface); }.ui-color-field input { width:30px; height:30px; flex:none; padding:0; border:0; border-radius:50%; overflow:hidden; background:transparent; cursor:pointer; }.ui-color-field input::-webkit-color-swatch-wrapper { padding:0; }.ui-color-field input::-webkit-color-swatch { border:0; border-radius:50%; }.ui-color-field span { overflow:hidden; color:var(--ui-text-secondary); text-overflow:ellipsis; white-space:nowrap; font-size:calc(12px * var(--ui-scale)); }
.ui-font-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ui-space-2); }.ui-font-choice { min-height:var(--ui-control); border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-radius-sm); color:var(--ui-text-secondary); background:var(--ui-surface); cursor:pointer; font-size:calc(12px * var(--ui-scale)); transition:border-color var(--ui-fast),background var(--ui-fast),color var(--ui-fast),transform var(--ui-fast); }.ui-font-choice.is-active { border-color:var(--ui-brand); color:var(--ui-brand); background:var(--ui-brand-soft); font-weight:700; }.ui-font-choice:active { transform:scale(.97); }
.ui-setting-range { margin-top:var(--ui-space-5); }.ui-setting-range-head { display:flex; justify-content:space-between; gap:var(--ui-space-3); margin-bottom:var(--ui-space-2); color:var(--ui-text-secondary); font-size:calc(12px * var(--ui-scale)); }.ui-setting-range-value { min-width:72px; color:var(--ui-muted); text-align:right; font-variant-numeric:tabular-nums; }.ui-settings-note { color:var(--ui-muted); font-size:calc(12px * var(--ui-scale)); line-height:1.6; }.ui-settings-toast { position:fixed; z-index:70; right:var(--ui-space-6); bottom:var(--ui-space-6); padding:var(--ui-space-3) var(--ui-space-4); border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-radius); color:var(--ui-text); background:var(--ui-surface-elevated); box-shadow:var(--ui-shadow-lg); opacity:0; translate:0 18px; pointer-events:none; transition:opacity var(--ui-motion),translate var(--ui-motion); font-size:calc(14px * var(--ui-scale)); }.ui-settings-toast.is-visible { opacity:1; translate:0 0; }
.ui-login-backdrop { position:fixed; z-index:80; inset:0; display:grid; place-items:center; padding:var(--ui-space-4); visibility:hidden; opacity:0; background:rgba(0,0,0,.46); transition:opacity var(--ui-motion),visibility var(--ui-motion); }.ui-login-backdrop.is-open { visibility:visible; opacity:1; }.ui-login-dialog { width:min(420px,100%); padding:var(--ui-space-6); border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-radius-lg); color:var(--ui-text); background:var(--ui-surface-elevated); box-shadow:var(--ui-shadow-lg); transform:translateY(12px) scale(.98); transition:transform var(--ui-motion); }.ui-login-backdrop.is-open .ui-login-dialog { transform:translateY(0) scale(1); }.ui-login-dialog h2 { margin:0 0 var(--ui-space-2); color:var(--ui-ink); font-size:calc(22px * var(--ui-scale)); }.ui-login-dialog p { margin:0 0 var(--ui-space-5); color:var(--ui-muted); font-size:calc(13px * var(--ui-scale)); }.ui-login-fields { display:grid; gap:var(--ui-space-3); }.ui-login-actions { display:flex; justify-content:flex-end; gap:var(--ui-space-2); margin-top:var(--ui-space-5); }.ui-login-error { min-height:20px; margin:var(--ui-space-2) 0 0; color:var(--ui-danger); font-size:calc(12px * var(--ui-scale)); }
@media(max-width:700px) { .ui-app-topbar { grid-template-columns:auto minmax(0,1fr) auto; gap:var(--ui-space-2); padding-inline:var(--ui-space-3); }.ui-app-search input { min-height:var(--ui-control); font-size:calc(14px * var(--ui-scale)); }.ui-app-actions { gap:var(--ui-space-1); }.ui-user-avatar { width:36px; height:36px; }.ui-settings-body { padding:var(--ui-space-4); }.ui-settings-head { padding-inline:var(--ui-space-4); } }
.ui-app-menu,.ui-settings-trigger,.ui-user-avatar,.ui-settings-close,.ui-setting-link,.ui-preset,.ui-segment,.ui-font-choice,.ui-settings-back,.ui-user-menu button { transition-timing-function:var(--ui-ease-out); }.ui-settings-drawer { transition-timing-function:var(--ui-ease-out); }.ui-setting-link:active,.ui-preset:active { transform:translateY(0) scale(var(--ui-press-scale)); }.ui-settings-back:hover { color:var(--ui-brand-hover); transform:translateX(-2px); }.ui-settings-back { transition:color var(--ui-fast) var(--ui-ease-out),transform var(--ui-fast) var(--ui-ease-out); }