/* ======================================================================================================
   BETA VIEW - optional OS-style skin ("Windows 11" and "iOS" flavours). Applies only when <html data-view>
   is set. Nothing here changes behaviour: it restyles the same elements and adds a dock + launcher.
   ====================================================================================================== */
.osdock,.oslaunch,.osflyout{display:none}
html[data-view]{--r:12px;--r2:8px;transition:background-color .4s}
/* ---------------- wallpapers (behind everything, softly animated) */
html[data-view] body{background:var(--wall-base,#cfd8f3)}
html[data-view] body::before{content:"";position:fixed;inset:-10%;z-index:-2;pointer-events:none;background:var(--wall);filter:saturate(1.15);animation:osDrift 40s ease-in-out infinite alternate}
@keyframes osDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,1.5%,0) scale(1.06)}}
html[data-view][data-wall=bloom]{--wall-base:#dfe9fb;--wall:radial-gradient(60% 55% at 15% 20%,#8ab4ff 0,transparent 60%),radial-gradient(55% 60% at 85% 15%,#c9a7ff 0,transparent 62%),radial-gradient(60% 60% at 70% 90%,#7ee0d0 0,transparent 60%),radial-gradient(50% 50% at 10% 90%,#ffb8d4 0,transparent 60%)}
html[data-view][data-wall=aurora]{--wall-base:#dff6ef;--wall:radial-gradient(60% 55% at 20% 15%,#6ee7b7 0,transparent 60%),radial-gradient(55% 60% at 90% 25%,#60a5fa 0,transparent 62%),radial-gradient(60% 60% at 60% 95%,#a78bfa 0,transparent 60%),radial-gradient(40% 40% at 5% 85%,#fde68a 0,transparent 60%)}
html[data-view][data-wall=dusk]{--wall-base:#fde7e0;--wall:radial-gradient(60% 55% at 15% 20%,#fda4af 0,transparent 60%),radial-gradient(55% 60% at 85% 20%,#fdba74 0,transparent 62%),radial-gradient(60% 60% at 70% 95%,#c4b5fd 0,transparent 60%),radial-gradient(45% 45% at 5% 90%,#93c5fd 0,transparent 60%)}
html[data-view][data-wall=graphite]{--wall-base:#e6e8ee;--wall:radial-gradient(60% 55% at 20% 20%,#cbd5e1 0,transparent 60%),radial-gradient(55% 60% at 85% 15%,#e2e8f0 0,transparent 62%),radial-gradient(60% 60% at 60% 95%,#94a3b8 0,transparent 60%)}
html[data-view][data-theme=dark][data-wall=bloom],html[data-view][data-theme=dark][data-wall=aurora],html[data-view][data-theme=dark][data-wall=dusk],html[data-view][data-theme=dark][data-wall=graphite]{--wall-base:#0a0e1a}
html[data-view][data-theme=dark][data-wall=bloom]{--wall:radial-gradient(60% 55% at 15% 20%,#1d3a8a 0,transparent 60%),radial-gradient(55% 60% at 85% 15%,#5b21b6 0,transparent 62%),radial-gradient(60% 60% at 70% 90%,#0f766e 0,transparent 60%),radial-gradient(50% 50% at 10% 90%,#9d174d 0,transparent 60%)}
html[data-view][data-theme=dark][data-wall=aurora]{--wall:radial-gradient(60% 55% at 20% 15%,#065f46 0,transparent 60%),radial-gradient(55% 60% at 90% 25%,#1e3a8a 0,transparent 62%),radial-gradient(60% 60% at 60% 95%,#4c1d95 0,transparent 60%)}
html[data-view][data-theme=dark][data-wall=dusk]{--wall:radial-gradient(60% 55% at 15% 20%,#881337 0,transparent 60%),radial-gradient(55% 60% at 85% 20%,#9a3412 0,transparent 62%),radial-gradient(60% 60% at 70% 95%,#4c1d95 0,transparent 60%)}
html[data-view][data-theme=dark][data-wall=graphite]{--wall:radial-gradient(60% 55% at 20% 20%,#1f2937 0,transparent 60%),radial-gradient(55% 60% at 85% 15%,#374151 0,transparent 62%)}
@media (prefers-color-scheme:dark){
  html[data-view]:not([data-theme=light]):not([data-theme=dark]){--wall-base:#0a0e1a}
  html[data-view][data-wall=bloom]:not([data-theme=light]):not([data-theme=dark]){--wall:radial-gradient(60% 55% at 15% 20%,#1d3a8a 0,transparent 60%),radial-gradient(55% 60% at 85% 15%,#5b21b6 0,transparent 62%),radial-gradient(60% 60% at 70% 90%,#0f766e 0,transparent 60%),radial-gradient(50% 50% at 10% 90%,#9d174d 0,transparent 60%)}
  html[data-view][data-wall=aurora]:not([data-theme=light]):not([data-theme=dark]){--wall:radial-gradient(60% 55% at 20% 15%,#065f46 0,transparent 60%),radial-gradient(55% 60% at 90% 25%,#1e3a8a 0,transparent 62%),radial-gradient(60% 60% at 60% 95%,#4c1d95 0,transparent 60%)}
  html[data-view][data-wall=dusk]:not([data-theme=light]):not([data-theme=dark]){--wall:radial-gradient(60% 55% at 15% 20%,#881337 0,transparent 60%),radial-gradient(55% 60% at 85% 20%,#9a3412 0,transparent 62%),radial-gradient(60% 60% at 70% 95%,#4c1d95 0,transparent 60%)}
  html[data-view][data-wall=graphite]:not([data-theme=light]):not([data-theme=dark]){--wall:radial-gradient(60% 55% at 20% 20%,#1f2937 0,transparent 60%),radial-gradient(55% 60% at 85% 15%,#374151 0,transparent 62%)}
}
/* ---------------- material: acrylic / frosted glass */
html[data-view]{--mat:rgba(255,255,255,.62);--mat2:rgba(255,255,255,.48);--mat-line:rgba(255,255,255,.65);--mat-edge:rgba(20,30,70,.10);--mat-blur:blur(28px) saturate(1.8);--panel:rgba(255,255,255,.66);--panel2:rgba(255,255,255,.5);--line:rgba(30,40,80,.12);--top:rgba(255,255,255,.55);--side:rgba(255,255,255,.5);--bg:transparent;
  --sh:0 1px 1px rgba(20,30,70,.04),0 6px 22px rgba(20,30,70,.08);--sh2:0 2px 4px rgba(20,30,70,.06),0 18px 48px rgba(20,30,70,.18)}
html[data-view][data-theme=dark]{--mat:rgba(32,36,52,.62);--mat2:rgba(32,36,52,.5);--mat-line:rgba(255,255,255,.10);--mat-edge:rgba(0,0,0,.4);--panel:rgba(34,38,56,.62);--panel2:rgba(26,30,46,.55);--line:rgba(255,255,255,.10);--top:rgba(24,28,44,.58);--side:rgba(24,28,44,.55)}
@media (prefers-color-scheme:dark){html[data-view]:not([data-theme=light]):not([data-theme=dark]){--mat:rgba(32,36,52,.62);--mat2:rgba(32,36,52,.5);--mat-line:rgba(255,255,255,.10);--mat-edge:rgba(0,0,0,.4);--panel:rgba(34,38,56,.62);--panel2:rgba(26,30,46,.55);--line:rgba(255,255,255,.10);--top:rgba(24,28,44,.58);--side:rgba(24,28,44,.55)}}
/* flavour accents + shapes */
html[data-view=win]{--pri:#0067c0;--pri2:#005a9e;--pri-soft:rgba(0,103,192,.12);--grad:linear-gradient(135deg,#0078d4,#2b88d8);--ring:0 0 0 2px rgba(0,103,192,.55);--r:8px;--r2:6px;--ac:#0067c0;--rad:8px;--radc:8px;--radb:5px;font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif}
html[data-view=win][data-theme=dark]{--pri:#60cdff;--pri2:#9ee0ff;--pri-soft:rgba(96,205,255,.16);--grad:linear-gradient(135deg,#0f6cbd,#3a96dd);--ring:0 0 0 2px rgba(96,205,255,.6)}
html[data-view=ios]{--pri:#007aff;--pri2:#0a6be0;--pri-soft:rgba(0,122,255,.12);--grad:linear-gradient(180deg,#2e8bff,#007aff);--ring:0 0 0 4px rgba(0,122,255,.28);--r:22px;--r2:14px;--ac:#007aff;--rad:22px;--radc:20px;--radb:999px;--ok:#30b24f;--bad:#ff3b30;--warn:#ff9500;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,sans-serif}
html[data-view=ios][data-theme=dark]{--pri:#0a84ff;--pri2:#5eb0ff;--pri-soft:rgba(10,132,255,.2);--grad:linear-gradient(180deg,#3d97ff,#0a84ff)}
@media (prefers-color-scheme:dark){html[data-view=win]:not([data-theme=light]):not([data-theme=dark]){--pri:#60cdff;--pri2:#9ee0ff;--pri-soft:rgba(96,205,255,.16)}html[data-view=ios]:not([data-theme=light]):not([data-theme=dark]){--pri:#0a84ff;--pri2:#5eb0ff;--pri-soft:rgba(10,132,255,.2)}}
html[data-view] body{font-family:inherit;letter-spacing:-.005em}
/* ---------------- shell: floating glass top bar + sidebar */
html[data-view] .shell{grid-template-columns:276px 1fr;grid-template-rows:auto 1fr;gap:10px;padding:10px 10px 0;height:100vh}
html[data-view] .shell.nonav{grid-template-columns:0 1fr}
html[data-view] .top{grid-column:1/3;border:1px solid var(--mat-line);border-radius:var(--rad);background:var(--mat);backdrop-filter:var(--mat-blur);-webkit-backdrop-filter:var(--mat-blur);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.35);height:54px;padding:0 12px}
html[data-view=ios] .top{border-radius:26px}
html[data-view] .side{border:1px solid var(--mat-line);border-radius:var(--rad);background:var(--mat);backdrop-filter:var(--mat-blur);-webkit-backdrop-filter:var(--mat-blur);box-shadow:var(--sh);margin-bottom:96px;padding-top:10px}
html[data-view=ios] .side{border-radius:26px}
html[data-view] .side .foot{background:transparent;border-top-color:var(--line)}
html[data-view] .main{padding:14px 16px 120px;border-radius:var(--rad)}
html[data-view] .main::-webkit-scrollbar{width:10px}html[data-view] .main::-webkit-scrollbar-thumb{background:rgba(120,130,160,.35);border-radius:99px;border:3px solid transparent;background-clip:content-box}
/* sidebar items */
html[data-view=win] .side a{border-radius:6px;padding:8px 12px}html[data-view=win] .side a:hover{background:rgba(120,130,160,.16);transform:none}
html[data-view=win] .side a.on{background:rgba(120,130,160,.2);color:var(--ink);box-shadow:none;font-weight:600}html[data-view=win] .side a.on::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--pri)}
html[data-view=ios] .side a{border-radius:14px;padding:9px 14px}html[data-view=ios] .side a:hover{background:rgba(120,130,160,.14);transform:none}html[data-view=ios] .side a.on{background:var(--pri);color:#fff;box-shadow:0 6px 16px rgba(0,122,255,.35)}
html[data-view] .grp>.gh{letter-spacing:.3px;text-transform:none;font-size:13px;font-weight:600;border-radius:var(--radc)}
/* buttons */
html[data-view] .btn{border-radius:var(--radb);border-color:var(--line);background:var(--mat2);backdrop-filter:blur(10px);box-shadow:none;transition:background .2s,transform .15s,box-shadow .2s}
html[data-view] .btn:hover{background:var(--mat);box-shadow:0 2px 10px rgba(20,30,70,.12);transform:none;border-color:var(--line)}
html[data-view] .btn:active{transform:scale(.97)}
html[data-view] .btn.pri{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(0,80,200,.28)}html[data-view] .btn.pri:hover{filter:brightness(1.08);box-shadow:0 4px 14px rgba(0,80,200,.38)}
html[data-view=win] .btn{padding:6px 14px}html[data-view=ios] .btn{padding:9px 18px;font-weight:600}
html[data-view=ios] .btn.sm{padding:5px 13px}
/* inputs */
html[data-view] input[type=text],html[data-view] input[type=number],html[data-view] input[type=date],html[data-view] input[type=time],html[data-view] input[type=month],html[data-view] input[type=password],html[data-view] input[type=email],html[data-view] input[type=search],html[data-view] select,html[data-view] textarea{background:var(--mat2);border:1px solid var(--line);backdrop-filter:blur(8px)}
html[data-view=win] input,html[data-view=win] select,html[data-view=win] textarea{border-radius:5px;border-bottom:1px solid rgba(120,130,160,.55)}
html[data-view=win] input:focus,html[data-view=win] select:focus,html[data-view=win] textarea:focus{border-bottom:2px solid var(--pri);box-shadow:none;background:var(--mat)}
html[data-view=ios] input,html[data-view=ios] select,html[data-view=ios] textarea{border-radius:14px;padding:10px 14px;border-color:transparent;background:rgba(120,130,160,.14)}
html[data-view=ios] input:focus,html[data-view=ios] select:focus,html[data-view=ios] textarea:focus{box-shadow:var(--ring);background:var(--mat)}
/* windows (cards, KPI, tiles, tables) */
html[data-view] .card,html[data-view] .kpi,html[data-view] .tile,html[data-view] .trk-card,html[data-view] .trk-kpi,html[data-view] .lv-k,html[data-view] .orgcard,html[data-view] .orgscroll{background:var(--mat);backdrop-filter:var(--mat-blur);-webkit-backdrop-filter:var(--mat-blur);border:1px solid var(--mat-line);border-radius:var(--radc);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.25)}
html[data-view] .card:hover{box-shadow:var(--sh2)}
html[data-view] .card>h2:first-child{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin:-4px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
html[data-view=win] .card>h2:first-child::before{content:"";width:3px;height:16px;border-radius:3px;background:var(--pri)}
html[data-view=ios] .card>h2:first-child{border:0;font-size:17px;font-weight:700;padding-bottom:4px}
html[data-view] .tile:hover,html[data-view] .trk-card:hover,html[data-view] a.lv-k:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--pri)}
html[data-view] .tile .ti{border-radius:var(--radc)}
html[data-view=ios] .tile .ti{border-radius:14px}
html[data-view] table{border-collapse:separate;border-spacing:0}html[data-view] th{background:transparent;color:var(--mut);font-weight:600;font-size:12px;border-bottom:1px solid var(--line)}
html[data-view] tbody tr{transition:background .15s}html[data-view] tbody tr:hover{background:var(--pri-soft)}
html[data-view=ios] td,html[data-view=ios] th{border-bottom-color:rgba(120,130,160,.16)}
html[data-view] .pill{border-radius:99px;font-weight:600}
html[data-view] .hero{border-radius:var(--rad);box-shadow:var(--sh2)}html[data-view=ios] .hero{border-radius:30px}
html[data-view] .page-h h1{font-size:26px;font-weight:700;letter-spacing:-.02em}html[data-view=ios] .page-h h1{font-size:30px;font-weight:800;letter-spacing:-.03em}
/* menus, modals, toasts */
html[data-view] .menu{background:var(--mat);backdrop-filter:var(--mat-blur);-webkit-backdrop-filter:var(--mat-blur);border:1px solid var(--mat-line);border-radius:var(--radc);box-shadow:var(--sh2)}
html[data-view] .menu button:hover,html[data-view] .menu a:hover{background:var(--pri-soft)}
html[data-view] .ov{background:rgba(10,14,30,.35);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
html[data-view] .modal{background:var(--mat);backdrop-filter:var(--mat-blur);-webkit-backdrop-filter:var(--mat-blur);border:1px solid var(--mat-line);border-radius:var(--radc);box-shadow:0 30px 90px rgba(10,20,60,.35);animation:osSheet .38s cubic-bezier(.2,.9,.25,1.1)}
html[data-view=ios] .modal{border-radius:28px}
html[data-view=win] .modal>header{background:rgba(120,130,160,.08);border-radius:8px 8px 0 0}
@keyframes osSheet{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
html[data-view] .toast{background:var(--mat);color:var(--ink);backdrop-filter:var(--mat-blur);border:1px solid var(--mat-line);border-radius:var(--radc)}
html[data-view] .seg,html[data-view] .lv-seg2,html[data-view] .cmdk{background:var(--mat2);border-color:var(--line);backdrop-filter:blur(10px)}
html[data-view=ios] .seg,html[data-view=ios] .lv-seg2{border-radius:14px}html[data-view=ios] .seg i{border-radius:11px}
html[data-view] .lv-seg2 button.on{background:var(--grad)}
/* page transition */
html[data-view] #view{animation:osPage .42s cubic-bezier(.2,.8,.2,1)}
@keyframes osPage{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}
/* ---------------- dock (iOS) / taskbar (Windows 11) */
html[data-view] .osdock{display:flex;position:fixed;z-index:40;left:50%;bottom:12px;transform:translateX(-50%);align-items:center;gap:6px;padding:7px 10px;background:var(--mat);backdrop-filter:var(--mat-blur);-webkit-backdrop-filter:var(--mat-blur);border:1px solid var(--mat-line);border-radius:var(--rad);box-shadow:var(--sh2),inset 0 1px 0 rgba(255,255,255,.3);max-width:calc(100vw - 16px)}
html[data-view=ios] .osdock{border-radius:30px;padding:9px 12px;gap:10px}
.osdock .di{position:relative;width:46px;height:46px;border-radius:12px;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .22s cubic-bezier(.3,1.5,.5,1),background .2s}
.osdock .di .ic{width:23px;height:23px}
html[data-view=win] .osdock .di:hover{background:rgba(120,130,160,.2);transform:translateY(-2px)}
html[data-view=ios] .osdock .di{width:52px;height:52px;border-radius:15px;background:linear-gradient(145deg,var(--c1,#4f8cff),var(--c2,#7b5cff));color:#fff;box-shadow:0 6px 14px rgba(20,30,90,.28)}
html[data-view=ios] .osdock .di:hover{transform:translateY(-8px) scale(1.18)}
.osdock .di.on::after{content:"";position:absolute;bottom:2px;left:50%;width:16px;height:3px;margin-left:-8px;border-radius:3px;background:var(--pri)}
html[data-view=ios] .osdock .di.on::after{bottom:-6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ink);opacity:.7}
.osdock .di .lb{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ink);color:var(--bg,#fff);padding:3px 9px;border-radius:8px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.osdock .di:hover .lb{opacity:1;transform:translateX(-50%)}
html[data-theme=dark] .osdock .di .lb{background:#fff;color:#111}
.osdock .di .bd{position:absolute;top:2px;right:2px;min-width:17px;height:17px;border-radius:99px;background:#ff3b30;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.osdock .sep{width:1px;height:28px;background:var(--line);margin:0 2px}
.osdock .tray{display:none;flex-direction:column;align-items:flex-end;padding:0 8px 0 10px;font-size:12px;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}
html[data-view=win] .osdock .tray{display:flex}
html[data-view=win] .osdock .di.start{color:var(--pri)}
/* ---------------- launcher (Start menu / app library) */
html[data-view] .oslaunch{display:flex;position:fixed;inset:0;z-index:70;align-items:flex-end;justify-content:center;padding:0 12px 84px;background:rgba(10,14,30,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .22s}
html[data-view] .oslaunch.open{opacity:1;pointer-events:auto}
.oslaunch .pane{width:min(760px,100%);max-height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--mat);backdrop-filter:var(--mat-blur);-webkit-backdrop-filter:var(--mat-blur);border:1px solid var(--mat-line);border-radius:var(--rad);box-shadow:0 30px 90px rgba(10,20,60,.4);transform:translateY(30px) scale(.97);transition:transform .32s cubic-bezier(.2,.9,.3,1.1);overflow:hidden}
html[data-view=ios] .oslaunch .pane{border-radius:34px}
.oslaunch.open .pane{transform:none}
.oslaunch .ossb{padding:16px 18px 8px}.oslaunch .ossb input{width:100%}
.oslaunch .osgl{overflow:auto;padding:4px 18px 18px}
.oslaunch .osgt{font-size:12px;font-weight:700;color:var(--mut);margin:14px 4px 8px;text-transform:uppercase;letter-spacing:.06em}
.oslaunch .osga{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.oslaunch .osap{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border-radius:14px;color:var(--ink);text-align:center;font-size:12px;line-height:1.25;transition:background .15s,transform .2s;text-decoration:none!important}
.oslaunch .osap:hover,.oslaunch .osap.sel{background:var(--pri-soft);transform:translateY(-2px)}
.oslaunch .osap .osico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,var(--c1,#4f8cff),var(--c2,#7b5cff));box-shadow:0 6px 14px rgba(20,30,90,.25)}
html[data-view=ios] .oslaunch .osap .osico{border-radius:14px}.oslaunch .osap .osico .ic{width:23px;height:23px}
.oslaunch .osft{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.oslaunch .osft .grow{flex:1}
/* ---------------- view flyout (quick settings) */
.osflyout.open{display:block;position:fixed;z-index:80;right:16px;top:74px;width:320px;background:var(--panel);backdrop-filter:var(--mat-blur,blur(28px));-webkit-backdrop-filter:var(--mat-blur,blur(28px));border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(10,20,60,.35);padding:14px;animation:osSheet .28s cubic-bezier(.2,.9,.25,1.1)}
html[data-view=ios] .osflyout.open{border-radius:26px}
.osflyout h3{margin:0 0 8px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.osflyout .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.osflyout .opt{border:1px solid var(--line);background:var(--panel2);border-radius:14px;padding:10px 6px;cursor:pointer;text-align:center;font-size:12px;color:var(--ink);transition:transform .15s,border-color .15s}
.osflyout .opt:hover{transform:translateY(-2px);border-color:var(--pri)}.osflyout .opt.on{border-color:var(--pri);box-shadow:var(--ring);font-weight:700}
.osflyout .opt .pv{height:38px;border-radius:9px;margin-bottom:6px;border:1px solid var(--line)}
.osflyout .walls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
.osflyout .wl{height:44px;border-radius:12px;border:2px solid transparent;cursor:pointer}.osflyout .wl.on{border-color:var(--pri);box-shadow:var(--ring)}
.osflyout .note{font-size:11.5px;color:var(--mut);margin-top:8px}
.viewbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer;font-size:12.5px;font-weight:600;transition:border-color .2s,box-shadow .2s}
.viewbtn:hover{border-color:var(--pri);box-shadow:var(--ring)}.viewbtn .bt{font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:1px 6px;border-radius:99px;background:var(--grad);color:#fff}
/* ---------------- login in beta view */
html[data-view] .auth{background:transparent}html[data-view] .auth .aurora{opacity:.0}
html[data-view] .auth .brandpane{color:var(--ink)}html[data-view] .auth .brandpane::after{display:none}html[data-view] .auth .big em{background:var(--grad);-webkit-background-clip:text;background-clip:text}
html[data-view] .auth .by a,html[data-view] .auth .by{color:var(--ink)}html[data-view] .auth .feats .ic{background:var(--pri-soft);color:var(--pri)}
html[data-view] .auth .formpane{background:transparent}
html[data-view] .auth .box{background:var(--mat);backdrop-filter:var(--mat-blur);-webkit-backdrop-filter:var(--mat-blur);border:1px solid var(--mat-line);border-radius:calc(var(--rad) + 8px);padding:28px 28px 22px;box-shadow:var(--sh2)}
/* ---------------- phones: iOS-style tab bar, bigger touch targets */
@media(max-width:900px){
  html[data-view] .shell{grid-template-columns:1fr;padding:8px 8px 0;gap:8px}html[data-view] .top{grid-column:1}
  html[data-view] .side{position:fixed;left:8px;top:70px;bottom:92px;width:min(300px,86vw);z-index:50;margin:0}
  html[data-view] .osdock{left:8px;right:8px;bottom:8px;transform:none;justify-content:space-around;border-radius:26px;gap:0;padding:6px}
  .osdock .di{width:auto;flex:1;height:50px}html[data-view=ios] .osdock .di{width:auto;flex:1;background:transparent;color:var(--ink);box-shadow:none}html[data-view=ios] .osdock .di.on{color:var(--pri)}
  html[data-view] .osdock .tray,.osdock .sep{display:none}
  html[data-view] .main{padding:10px 6px 110px}
  html[data-view] .cmdk span:not(.ic),html[data-view] .cmdk kbd{display:none}.cmdk{min-width:0;width:38px;padding:0;justify-content:center}
  .osflyout.open{left:10px;right:10px;width:auto;top:70px}
}
@media (prefers-reduced-motion:reduce){html[data-view] body::before,html[data-view] #view,.osdock .di,.oslaunch .pane{animation:none!important;transition:none!important}}
html[data-view] .side .foot{background:var(--mat);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:0 0 var(--rad) var(--rad)}
.osdock .di .lb{color:#fff!important;background:rgba(20,24,40,.92)!important}html[data-theme=dark] .osdock .di .lb{background:rgba(250,250,255,.95)!important;color:#111!important}
/* phone width: keep the top bar inside the screen (icon-only View button) */
@media (max-width:560px){.viewbtn{padding:0 9px;gap:0;height:36px}.viewbtn span:not(.ic){display:none}.top .who .tx,.topbar .who .tx{display:none}}
/* phone: top bar must never widen the page (audited) */
@media(max-width:900px){html[data-view] .shell{grid-template-columns:minmax(0,1fr)}html[data-view] .main{min-width:0}html[data-view] .top{min-width:0;overflow:hidden;gap:5px;padding:0 8px}}
@media(max-width:560px){html[data-view] .top>*{flex:none}html[data-view] .top .brandmark{flex:1 1 0;min-width:0;overflow:hidden}html[data-view] .top .grow{display:none}html[data-view] .osdock .di .lb{max-width:100%;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:380px){html[data-view] .top .brandmark{display:none}html[data-view] .top .grow{display:block;flex:1}}
@media(max-width:900px){html[data-view] .side{transform:translateX(calc(-100% - 24px));visibility:hidden;transition:transform .28s,visibility 0s .28s}html[data-view] .side.open{transform:none;visibility:visible;transition:transform .28s}}
@media(max-width:560px){html[data-view] .seg button.on{color:var(--pri);background:var(--pri-soft);box-shadow:none}}