
/* ============================================================
   STEP 8 — PropertyOS Spatial
   Liquid Glass materials, wallet folder cover, OS layer
   ============================================================ */
:root{
  --spring:cubic-bezier(.34,1.4,.64,1);
  --spring-soft:cubic-bezier(.22,1.2,.36,1);
  --wallet-tint:#2b3170;
  --lg-rim:rgba(255,255,255,.55);
  --lg-rim-soft:rgba(255,255,255,.2);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --spring:linear(0,.11 3%,.39 8%,.74 15%,.96 23%,1.04 31%,1.05 38%,1.02 48%,.99 62%,1.003 80%,1);
    --spring-soft:linear(0,.2 5%,.56 12%,.86 21%,1.02 31%,1.03 40%,1 55%,.998 75%,1);
  }
}
:root[data-theme="dark"]{--lg-rim:rgba(255,255,255,.22);--lg-rim-soft:rgba(255,255,255,.08)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--lg-rim:rgba(255,255,255,.22);--lg-rim-soft:rgba(255,255,255,.08)}}

/* ---------- Fonts (Apple system families) ---------- */
:root[data-font="rounded"]{--font:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif}
:root[data-font="serif"]{--font:ui-serif,"New York",Georgia,"Times New Roman",serif}
:root[data-font="mono"]{--font:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* ---------- Wallpapers (live behind the glass) ---------- */
html{background:var(--bg)}
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);background:var(--wallpaper,none)}
html[data-wallpaper]:not([data-wallpaper="none"])::before{opacity:1}
html[data-wallpaper]:not([data-wallpaper="none"]) body{background:transparent!important}
:root{
  --wp-aurora:radial-gradient(60% 52% at 12% 8%,rgba(10,132,255,.30),transparent 62%),radial-gradient(50% 46% at 88% 14%,rgba(175,82,222,.26),transparent 64%),radial-gradient(56% 50% at 62% 100%,rgba(48,209,88,.16),transparent 62%);
  --wp-dusk:radial-gradient(60% 50% at 14% 6%,rgba(255,159,10,.28),transparent 62%),radial-gradient(52% 48% at 90% 22%,rgba(255,55,95,.24),transparent 64%),radial-gradient(60% 52% at 50% 104%,rgba(94,92,230,.26),transparent 62%);
  --wp-ocean:radial-gradient(60% 52% at 10% 10%,rgba(100,210,255,.30),transparent 62%),radial-gradient(52% 46% at 92% 16%,rgba(10,132,255,.26),transparent 64%),radial-gradient(56% 50% at 55% 104%,rgba(48,176,199,.24),transparent 62%);
  --wp-graphite:radial-gradient(60% 50% at 14% 6%,rgba(150,155,170,.22),transparent 62%),radial-gradient(52% 48% at 92% 18%,rgba(90,95,110,.22),transparent 64%),radial-gradient(60% 52% at 50% 104%,rgba(120,125,140,.18),transparent 62%);
  --wp-sunrise:radial-gradient(60% 50% at 12% 8%,rgba(255,214,10,.30),transparent 62%),radial-gradient(52% 48% at 90% 18%,rgba(255,149,0,.24),transparent 64%),radial-gradient(60% 52% at 55% 104%,rgba(255,105,180,.20),transparent 62%);
}
html[data-wallpaper="aurora"]{--wallpaper:var(--wp-aurora)}
html[data-wallpaper="dusk"]{--wallpaper:var(--wp-dusk)}
html[data-wallpaper="ocean"]{--wallpaper:var(--wp-ocean)}
html[data-wallpaper="graphite"]{--wallpaper:var(--wp-graphite)}
html[data-wallpaper="sunrise"]{--wallpaper:var(--wp-sunrise)}

/* ---------- Liquid Glass material ---------- */
html[data-visual-surface="liquid"] :is(.group,.stat,.dash-metric,.dash-panel,.sfv-shell,.hx-card,.module-card,.qa button,.custom-panel,.property-card,.card){
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,transparent),color-mix(in srgb,var(--surface) 66%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--lg-rim) 40%,var(--sep))!important;
  box-shadow:inset 0 1px 0 var(--lg-rim),inset 0 0 0 1px var(--lg-rim-soft),0 10px 30px rgba(8,20,48,calc(.04 + .1 * var(--shadow-strength,.5)))!important;
}
html[data-visual-surface="liquid"] :is(.system-bar,.os-dock,.sidebar,.bar,.tabbar){
  background:color-mix(in srgb,var(--surface) 62%,transparent)!important;
  backdrop-filter:blur(calc(var(--visual-blur,14px) + 6px)) saturate(185%);-webkit-backdrop-filter:blur(calc(var(--visual-blur,14px) + 6px)) saturate(185%);
  box-shadow:inset 0 1px 0 var(--lg-rim),0 12px 36px rgba(0,0,0,.14)!important;
}
html[data-visual-surface="liquid"] :is(.group,.stat,.dash-panel,.hx-card,.module-card,.property-card){position:relative}
html[data-visual-surface="liquid"] .row{border-color:color-mix(in srgb,var(--sep) 70%,transparent)}
html[data-visual-effects="off"] :is(.system-bar,.os-dock,.sidebar,.bar,.tabbar){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-visual-effects="off"] html::before,html[data-visual-effects="off"]::before{opacity:0}
@media(prefers-reduced-transparency:reduce){
  html[data-visual-surface="liquid"] :is(.system-bar,.os-dock,.sidebar,.bar,.tabbar){backdrop-filter:none!important;background:var(--surface)!important}
}

/* ---------- Focus mode & widgets ---------- */
html[data-focus="on"] .sidebar,html[data-focus="on"] .os-dock-wrap,html[data-focus="on"] .tabbar{display:none!important}
html[data-focus="on"] .app{grid-template-columns:1fr!important}
html[data-focus="on"] .main{margin-left:0!important}
html[data-focus="on"] .content{max-width:1080px;margin-inline:auto}
#overview.active{display:flex;flex-direction:column}
#overview>*{flex:none;min-width:0}
#overview>.date{order:-3}#overview>.large-title{order:-2}
html[data-hide-w~="stats"] [data-widget="stats"],html[data-hide-w~="quick"] [data-widget="quick"],html[data-hide-w~="stage"] [data-widget="stage"],
html[data-hide-w~="universe"] [data-widget="universe"],html[data-hide-w~="dashboard"] [data-widget="dashboard"],html[data-hide-w~="pulse"] [data-widget="pulse"],
html[data-hide-w~="trends"] [data-widget="trends"],html[data-hide-w~="operations"] [data-widget="operations"],html[data-hide-w~="activity"] [data-widget="activity"],
html[data-hide-w~="attention"] [data-widget="attention"],html[data-hide-w~="payments"] [data-widget="payments"]{display:none!important}

/* ---------- Hide balances (privacy) ---------- */
html[data-hide-balance="on"] :is(.wallet-balance-amount,.pass-amount,.back-amount,.hx-amt,.money,.stat .v,.stat b,.dash-metric b,.dash-metric strong,.sfv-shell [data-money],.qa small,.pass-pill+*,[data-sensitive]){
  filter:blur(9px);user-select:none;transition:filter .3s var(--ease)
}
html[data-hide-balance="on"] :is(.wallet-balance-amount,.pass-amount):hover{filter:blur(0)}

/* ---------- Wallet scene + folder cover ---------- */
.wallet-scene{position:relative;display:flex;flex-direction:column;max-width:560px;margin:0 auto;z-index:2}
.wallet-fan{width:100%}
.wallet-folder{
  --wf-top:var(--wallet-tint);--wf-bot:color-mix(in srgb,var(--wallet-tint) 52%,#04060f);
  position:relative;z-index:70;margin-top:-172px;padding:30px 26px 24px;border-radius:0 30px 30px 30px;
  background:linear-gradient(180deg,var(--wf-top) 0%,var(--wf-bot) 100%);color:#fff;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(175,190,255,.16),0 -18px 34px rgba(5,7,26,.5),0 28px 54px rgba(0,0,0,.42);
  transition:margin-top .85s var(--spring-soft),transform .5s var(--spring),box-shadow .4s;
  -webkit-tap-highlight-color:transparent;
}
.wallet-folder:hover{transform:translateY(-3px)}
.wallet-folder:active{transform:translateY(1px) scale(.992)}
.wallet-folder:focus-visible{outline:3px solid color-mix(in srgb,var(--blue-fill) 70%,#fff);outline-offset:4px}
.wallet-fan.is-open + .wallet-folder{margin-top:26px}
.wallet-folder::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 38%,transparent 70%,rgba(255,255,255,.05))}
.wf-tab{position:absolute;left:0;top:-27px;height:28px;min-width:38%;padding:0 20px 0 14px;border-radius:16px 16px 0 0;background:var(--wf-top);display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.34)}
.wf-tab .ic{width:15px;height:15px}
.wf-tab::after{content:"";position:absolute;left:100%;bottom:0;width:18px;height:18px;background:radial-gradient(circle at 100% 0,transparent 17px,var(--wf-top) 17.5px)}
.wallet-folder .wallet-balance{margin:0;text-align:left}
.wallet-folder .wallet-balance-label{color:rgba(206,216,255,.78)}
.wallet-folder .wallet-balance-hint{color:rgba(225,232,255,.66);font-size:12px}
.wallet-folder .wallet-balance-amount{font-size:clamp(34px,7.4vw,54px);text-shadow:none}
.wf-chev{position:absolute;right:20px;top:26px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);transition:transform .6s var(--spring)}
.wf-chev .ic{width:16px;height:16px}
.wallet-fan.is-open + .wallet-folder .wf-chev{transform:rotate(180deg)}
/* Cover styles */
html[data-wallet-cover="leather"] .wallet-folder{--wf-top:#7b4b29;--wf-bot:#3a2212;
  background:repeating-linear-gradient(35deg,rgba(255,255,255,.025) 0 2px,transparent 2px 5px),linear-gradient(180deg,var(--wf-top),var(--wf-bot))}
html[data-wallet-cover="leather"] .wallet-folder::before{content:"";position:absolute;inset:9px;border-radius:22px 22px 22px 22px;border:1.5px dashed rgba(255,226,186,.38);pointer-events:none}
html[data-wallet-cover="leather"] .wallet-folder .wallet-balance-label,html[data-wallet-cover="leather"] .wallet-folder .wallet-balance-hint{color:rgba(255,232,200,.78)}
html[data-wallet-cover="glass"] .wallet-folder{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border-radius:30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.2),0 24px 50px rgba(0,0,0,.35)}
html[data-wallet-cover="glass"] .wf-tab{background:rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:14px 14px 0 0}
html[data-wallet-cover="glass"] .wf-tab::after{display:none}
html[data-wallet-cover="none"] .wallet-folder{order:-1;margin-top:0;background:none;box-shadow:none;padding:4px 0 22px;cursor:default;border-radius:0}
html[data-wallet-cover="none"] .wallet-folder::after,html[data-wallet-cover="none"] .wf-tab,html[data-wallet-cover="none"] .wf-chev{display:none}
html[data-wallet-cover="none"] .wallet-folder .wallet-balance{text-align:center}
html[data-wallet-cover="none"] .wallet-fan.is-open + .wallet-folder{margin-top:0}

.wallet-hide{display:flex;align-items:center;justify-content:center;gap:10px;width:min(100%,420px);margin:22px auto 0;padding:13px 18px;border-radius:999px;color:#dfe6ff;font-weight:600;font-size:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(190,200,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);position:relative;z-index:3;transition:background .25s,transform .4s var(--spring)}
.wallet-hide:hover{background:rgba(255,255,255,.12)}
.wallet-hide:active{transform:scale(.97)}
.wallet-hide .ic{width:19px;height:19px}
.wallet-actions{display:flex;justify-content:center;gap:clamp(14px,5vw,30px);margin:22px auto 4px;position:relative;z-index:3}
.wallet-action{display:grid;justify-items:center;gap:8px;color:#cfd8ff;font-size:11.5px;font-weight:600;letter-spacing:.01em}
.wallet-action span.circle{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#eef2ff;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.26),rgba(255,255,255,.06));
  border:1px solid rgba(190,200,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px rgba(4,8,30,.45);transition:transform .5s var(--spring),box-shadow .3s,background .3s}
.wallet-action:hover span.circle{transform:translateY(-4px) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 32px rgba(40,90,255,.4)}
.wallet-action:active span.circle{transform:scale(.92)}
.wallet-action .ic{width:22px;height:22px}
.wallet-fan .pass-wrap{--tilt:0deg}
.wallet-fan .pass-wrap .glare{position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:0;z-index:5;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.75),transparent 58%);transition:opacity .35s}
.wallet-fan .pass-wrap:hover .glare{opacity:.9}
@media(max-width:560px){.wallet-folder{padding:28px 18px 20px;margin-top:-168px}.wf-chev{right:14px}.wallet-action span.circle{width:52px;height:52px}}

/* ---------- OS chrome: dock (magnify, auto-hide) ---------- */
.dock-item .dock-glyph{transform-origin:50% 100%;transition:transform .35s var(--spring),box-shadow .2s;will-change:transform}
.dock-item[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--blue-fill);box-shadow:0 0 8px var(--blue-fill)}
html[data-dock="off"] .os-dock-wrap{display:none}
html[data-dock="auto"] .os-dock-wrap{transform:translate(-50%,calc(100% + 24px));transition:transform .55s var(--spring-soft)}
html[data-dock="auto"] .os-dock-wrap.peek,html[data-dock="auto"] .os-dock-wrap:focus-within{transform:translate(-50%,0)}
.dock-hotzone{position:fixed;left:20%;right:20%;bottom:0;height:14px;z-index:79;display:none}
html[data-dock="auto"] .dock-hotzone{display:block}
@media(max-width:859px){.dock-hotzone{display:none!important}}

/* ---------- Page transitions (View Transitions API) ---------- */
.system-bar{view-transition-name:pos-sysbar}.os-dock-wrap{view-transition-name:pos-dock}.sidebar{view-transition-name:pos-sidebar}
::view-transition-group(pos-sysbar),::view-transition-group(pos-dock),::view-transition-group(pos-sidebar){animation-duration:0s}
::view-transition-old(root){animation:pos-vt-out .22s var(--ease) both}
::view-transition-new(root){animation:pos-vt-in .42s var(--spring-soft) both}
@keyframes pos-vt-out{to{opacity:0;transform:scale(.985) translateY(-6px)}}
@keyframes pos-vt-in{from{opacity:0;transform:scale(1.012) translateY(14px)}}
html[data-visual-motion="off"]::view-transition-old(root),html[data-visual-motion="off"]::view-transition-new(root){animation:none}

/* ---------- System bar additions ---------- */
.system-brand .brand-co{font-weight:500;color:var(--label-2);font-size:11px;margin-left:2px}
.system-icon.sys-btn{position:relative;display:grid;place-items:center;width:30px;height:26px;border-radius:8px;transition:background .2s,transform .4s var(--spring)}
.system-icon.sys-btn:hover{background:var(--fill)}
.system-icon.sys-btn:active{transform:scale(.9)}
.system-icon.sys-btn .ic{width:17px;height:17px}
.sys-badge{position:absolute;top:-3px;right:-2px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--red-fill);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.sys-badge[hidden]{display:none}

/* ---------- Floating OS panels (Control Center, Notifications) ---------- */
.os-panel{position:fixed;z-index:2500;top:calc(var(--systembar-h) + 10px);right:clamp(8px,2vw,22px);width:min(392px,calc(100vw - 16px));max-height:calc(100dvh - var(--systembar-h) - 24px);overflow:auto;
  border-radius:26px;padding:14px;color:var(--label);
  background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%);
  border:1px solid color-mix(in srgb,var(--lg-rim) 45%,var(--sep));box-shadow:inset 0 1px 0 var(--lg-rim),0 30px 80px rgba(0,0,0,.32);
  transform-origin:calc(100% - 28px) 0;animation:os-panel-in .5s var(--spring) both;overscroll-behavior:contain}
.os-panel[hidden]{display:none}
@keyframes os-panel-in{from{opacity:0;transform:scale(.88) translateY(-10px)}to{opacity:1;transform:none}}
.os-panel.is-closing{animation:os-panel-out .18s var(--ease) both}
@keyframes os-panel-out{to{opacity:0;transform:scale(.95) translateY(-6px)}}
.os-panel h2{font-size:13px;font-weight:700;letter-spacing:-.01em;margin:2px 4px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.os-panel h2 small{font-weight:500;color:var(--label-2);font-size:11px}
.os-scrim{position:fixed;inset:0;z-index:2400;background:transparent}
.cc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cc-tile{position:relative;display:grid;gap:8px;align-content:start;padding:13px;border-radius:20px;background:color-mix(in srgb,var(--surface-2) 78%,transparent);border:1px solid var(--sep);box-shadow:inset 0 1px 0 var(--lg-rim-soft);min-width:0}
.cc-tile.wide{grid-column:1/-1}
.cc-tile>b{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px}
.cc-tile>b .ic{width:15px;height:15px;color:var(--blue)}
.cc-seg{display:flex;gap:3px;padding:3px;border-radius:12px;background:var(--fill)}
.cc-seg button{flex:1;padding:6px 4px;border-radius:9px;font-size:11.5px;font-weight:600;color:var(--label-2);transition:background .25s,color .25s,transform .35s var(--spring)}
.cc-seg button[aria-pressed="true"]{background:var(--surface);color:var(--label);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.cc-seg button:active{transform:scale(.94)}
.cc-toggle{display:flex;align-items:center;gap:10px;padding:12px;border-radius:20px;text-align:left;background:color-mix(in srgb,var(--surface-2) 78%,transparent);border:1px solid var(--sep);box-shadow:inset 0 1px 0 var(--lg-rim-soft);transition:background .3s,transform .4s var(--spring);min-width:0}
.cc-toggle:active{transform:scale(.95)}
.cc-toggle .cc-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--fill-strong);color:var(--label);transition:background .3s,color .3s}
.cc-toggle .cc-ic .ic{width:18px;height:18px}
.cc-toggle b{display:block;font-size:12px;font-weight:700;line-height:1.2}
.cc-toggle small{display:block;color:var(--label-2);font-size:10.5px;margin-top:1px}
.cc-toggle[aria-pressed="true"] .cc-ic{background:var(--blue-fill);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--blue-fill) 60%,transparent)}
.cc-swatches{display:flex;gap:9px;flex-wrap:wrap}
.cc-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.2);transition:transform .4s var(--spring)}
.cc-swatch:hover{transform:scale(1.15)}
.cc-swatch[aria-pressed="true"]{border-color:var(--label)}
.cc-wps{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.cc-wp{aspect-ratio:1;border-radius:11px;border:2px solid transparent;background-size:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .4s var(--spring)}
.cc-wp:hover{transform:scale(1.08)}
.cc-wp[aria-pressed="true"]{border-color:var(--blue-fill)}
.cc-range{display:grid;gap:5px}
.cc-range label{display:flex;justify-content:space-between;font-size:11px;color:var(--label-2);font-weight:600}
.cc-range input{width:100%;accent-color:var(--blue-fill)}
.cc-foot{display:flex;gap:8px;margin-top:10px}
.cc-foot .btn{flex:1;justify-content:center}
.np-list{display:grid;gap:8px;margin-top:2px}
.np-item{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:11px;border-radius:18px;background:color-mix(in srgb,var(--surface-2) 78%,transparent);border:1px solid var(--sep);animation:np-in .5s var(--spring) both}
@keyframes np-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.np-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff}
.np-ic .ic{width:18px;height:18px}
.np-ic.red{background:var(--red-fill)}.np-ic.orange{background:var(--orange-fill)}.np-ic.blue{background:var(--blue-fill)}.np-ic.green{background:var(--green-fill)}
.np-item b{display:block;font-size:12.5px;font-weight:700;line-height:1.25}
.np-item small{display:block;color:var(--label-2);font-size:11px;margin-top:1px}
.np-empty{padding:30px 10px;text-align:center;color:var(--label-2);font-size:13px}
.np-empty .ic{width:30px;height:30px;margin:0 auto 8px;color:var(--green-fill)}
.np-actions{display:flex;gap:6px}
.np-actions .btn{padding:6px 10px;font-size:11.5px}
.np-x{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--label-2);font-size:15px;line-height:1}
.np-x:hover{background:var(--fill)}
@media(max-width:560px){.os-panel{top:calc(var(--systembar-h) + 6px);right:6px;border-radius:22px}}

/* ---------- Shortcuts dialog + command palette extras ---------- */
.kb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin-top:6px}
.kb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 4px;border-bottom:1px solid var(--sep);font-size:12.5px}
.kb-row kbd{font:inherit;font-size:11px;font-weight:700;padding:3px 7px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
@media(max-width:560px){.kb-grid{grid-template-columns:1fr}}
.command-result-kind{font-size:10px;font-weight:700;color:var(--label-2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;white-space:nowrap}

/* ---------- Customization Studio (Step 8) ---------- */
.cz-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 16px;padding:5px;border-radius:16px;background:var(--fill);width:fit-content;max-width:100%}
.cz-tabs button{padding:8px 14px;border-radius:12px;font-size:13px;font-weight:600;color:var(--label-2);transition:background .25s,color .25s,transform .4s var(--spring)}
.cz-tabs button[aria-selected="true"]{background:var(--surface);color:var(--label);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.cz-tabs button:active{transform:scale(.95)}
.cz-pane[hidden]{display:none}
.cz-pane{animation:np-in .5s var(--spring) both}
.cz-swatches{display:flex;gap:10px;flex-wrap:wrap;padding:6px 2px}
.cz-wp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;padding:4px 0}
.cz-wp{display:grid;gap:6px;text-align:left;font-size:12px;font-weight:600;padding:6px;border-radius:16px;border:2px solid transparent;background:var(--fill);transition:transform .4s var(--spring),border-color .2s}
.cz-wp:hover{transform:translateY(-3px)}
.cz-wp[aria-pressed="true"]{border-color:var(--blue-fill)}
.cz-wp i{display:block;height:58px;border-radius:11px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cz-widget{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--sep)}
.cz-widget:last-child{border-bottom:0}
.cz-widget .nm{flex:1;font-size:14px;font-weight:600}
.cz-widget .mv{display:flex;gap:4px}
.cz-widget .mv button{width:30px;height:30px;border-radius:9px;background:var(--fill);font-size:13px;display:grid;place-items:center}
.cz-widget .mv button:disabled{opacity:.35;cursor:default}
.cz-bar{position:sticky;bottom:calc(var(--dock-h) + 22px);z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding:12px 14px;border-radius:20px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--lg-rim) 40%,var(--sep));box-shadow:inset 0 1px 0 var(--lg-rim),0 16px 40px rgba(0,0,0,.2)}
.cz-bar .grow{flex:1;min-width:140px}
@media(max-width:859px){.cz-bar{bottom:calc(76px + env(safe-area-inset-bottom))}}

/* ---------- Hierarchy of motion preference ---------- */
html[data-visual-motion="off"] .wallet-folder,html[data-visual-motion="off"] .wallet-action span.circle,html[data-visual-motion="off"] .os-panel{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.wallet-folder,.wallet-action span.circle,.os-panel,.np-item,.cz-pane{transition:none!important;animation:none!important}}

/* ---------- Phone system bar & performance trims ---------- */
@media(max-width:700px){
  .system-date,.system-clock,.system-divider,.system-command-trigger kbd,.os-window-manager-trigger{display:none!important}
  .system-command-trigger>span:nth-child(2){display:none}
  .system-command-trigger{padding:0 9px}
  .system-workspace{max-width:34vw}
  .system-right{gap:4px}
}
/* small chips over imagery do not need their own blur layer */
:is(.sp-card-flip,.universe-node,.pass-logo,.pass-pill,.sp-card-brand,.spatial-status,.sp-card-index){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ---------- Target sizes (WCAG 2.2: at least 24px) ---------- */
.link,.section-head>button,.dash-panel-head>button,.dash-panel-head>a,.section-head>a,.dash-list-head button{min-height:28px;display:inline-flex;align-items:center;padding-block:4px}
.toolbar select,.filters select,#reports select,#ledger select{min-height:32px}

@media(max-width:700px){.brand-co{display:none}}


/* ============================================================
   iOS-inspired refinement — Liquid Glass, pill toggles, top-bar fix
   ============================================================ */

/* Correct top-bar stacking: single source of truth for offset */
:root{
  --top-inset:calc(var(--systembar-h) + env(safe-area-inset-top,0px));
}
.system-bar{
  height:var(--top-inset)!important;
  padding-top:env(safe-area-inset-top,0px)!important;
  align-items:flex-end!important;
  padding-bottom:0!important;
}
.system-bar .system-left,
.system-bar .system-right{align-self:stretch;display:flex;align-items:center}
.app{padding-top:var(--top-inset)!important}
.sidebar{top:var(--top-inset)!important;height:calc(100dvh - var(--top-inset))!important}
.bar{top:var(--top-inset)!important;height:56px!important;padding:0 clamp(16px,3vw,32px)!important}
.bar-title{
  position:absolute;inset:0;height:100%!important;
  display:grid;place-items:center;
  font-size:15px;font-weight:650;letter-spacing:-.02em;
}
.content{padding-top:8px!important}
@media(max-width:859px){
  .bar{height:52px!important}
}

/* iOS-inspired · refined Liquid Glass surfaces */
:root[data-design="ios-inspired"] :is(.group,.stat,.dash-metric,.dash-panel,.sfv-shell,.hx-card,.module-card,.qa button,.custom-panel,.property-card,.cc-tile,.cc-toggle,.os-panel){
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface) 78%,transparent) 0%,
      color-mix(in srgb,var(--surface) 58%,transparent) 100%);
  border:1px solid color-mix(in srgb,var(--lg-rim, rgba(255,255,255,.5)) 42%,var(--sep));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--lg-rim) 65%,transparent),
    inset 0 -1px 0 rgba(0,0,0,.03),
    0 12px 40px rgba(12,32,72,.08);
  backdrop-filter:blur(24px) saturate(190%);
  -webkit-backdrop-filter:blur(24px) saturate(190%);
}
:root[data-design="ios-inspired"] :is(.system-bar,.os-dock,.sidebar,.bar,.tabbar){
  background:color-mix(in srgb,var(--surface) 62%,transparent)!important;
  backdrop-filter:blur(30px) saturate(200%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(200%)!important;
}

/* iOS-inspired · pill-shaped Control Center toggles */
.cc-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.cc-tile{
  grid-column:auto!important;
  border-radius:26px!important;
  padding:14px!important;
}
.cc-tile.wide{grid-column:1/-1!important}
.cc-toggle{
  position:relative;
  display:inline-flex!important;
  align-items:center!important;
  gap:11px!important;
  padding:7px 20px 7px 7px!important;
  border-radius:999px!important;
  min-width:0;
  overflow:hidden;
  background:color-mix(in srgb,var(--surface-2) 66%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--lg-rim) 40%,var(--sep))!important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--lg-rim) 60%,transparent),
    0 2px 10px rgba(0,0,0,.05)!important;
  backdrop-filter:blur(22px) saturate(185%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(185%)!important;
  transition:background .32s var(--ease),border-color .32s,box-shadow .4s var(--ease),transform .45s var(--spring)!important;
}
.cc-toggle::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-60%);
  transition:opacity .25s,transform .8s var(--ease);
}
.cc-toggle:hover::after{opacity:1;transform:translateX(0)}
.cc-toggle:active{transform:scale(.972)}
.cc-toggle .cc-ic{
  width:36px!important;height:36px!important;
  border-radius:50%!important;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--label) 9%,transparent)!important;
  color:var(--label)!important;
  transition:background .32s,color .32s,box-shadow .35s,transform .45s var(--spring)!important;
  flex:none;
}
.cc-toggle .cc-ic .ic{width:18px!important;height:18px!important}
.cc-toggle b{font-size:13px!important;font-weight:650!important;line-height:1.15}
.cc-toggle small{font-size:10.5px!important;color:var(--label-2)!important;line-height:1.2;margin-top:1px}
.cc-toggle[aria-pressed="true"]{
  background:color-mix(in srgb,var(--blue-fill) 16%,var(--surface-2))!important;
  border-color:color-mix(in srgb,var(--blue-fill) 48%,transparent)!important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--lg-rim) 55%,transparent),
    0 6px 24px color-mix(in srgb,var(--blue-fill) 26%,transparent)!important;
}
.cc-toggle[aria-pressed="true"] .cc-ic{
  background:linear-gradient(150deg,color-mix(in srgb,var(--blue-fill) 92%,#fff 8%),var(--blue-fill))!important;
  color:#fff!important;
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--blue-fill) 15%,transparent),
    0 6px 18px color-mix(in srgb,var(--blue-fill) 50%,transparent)!important;
  transform:scale(1.02);
}
.cc-toggle:focus-visible{outline:2px solid var(--blue-fill);outline-offset:3px}

/* iOS-inspired · segmented pill inside Control Center */
.cc-seg{
  border-radius:999px!important;
  padding:4px!important;
  background:color-mix(in srgb,var(--label) 7%,transparent)!important;
}
.cc-seg button{
  border-radius:999px!important;
  padding:7px 8px!important;
  font-weight:650!important;
}
.cc-seg button[aria-pressed="true"]{
  background:var(--surface)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 3px 10px rgba(0,0,0,.13)!important;
}

/* iOS-inspired · swatches rounded into squircle */
.cc-swatch{border-radius:12px!important}
.cc-wp{border-radius:16px!important}

/* iOS-inspired · os-panel sizing: match pill aesthetic */
.os-panel{
  border-radius:32px!important;
  padding:18px!important;
  box-shadow:
    inset 0 1px 0 var(--lg-rim, rgba(255,255,255,.5)),
    0 34px 90px rgba(0,0,0,.35)!important;
}

/* iOS-inspired · subtle concentric radius for nested elements */
:root[data-design="ios-inspired"] .group .row:first-child{border-top-left-radius:17px;border-top-right-radius:17px}
:root[data-design="ios-inspired"] .group .row:last-child{border-bottom-left-radius:17px;border-bottom-right-radius:17px}

/* Sound Studio layout */
.cz-sound-grid{display:grid;gap:8px;margin-top:6px}
.cz-sound-row{
  display:grid;
  grid-template-columns:minmax(120px,1.4fr) minmax(140px,2fr) auto;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:16px;
  background:color-mix(in srgb,var(--surface-2) 72%,transparent);
  border:1px solid var(--sep);
  transition:border-color .2s,background .2s;
}
.cz-sound-row:hover{border-color:color-mix(in srgb,var(--blue-fill) 32%,var(--sep))}
.cz-sound-row.has-custom{
  border-color:color-mix(in srgb,var(--green-fill) 45%,var(--sep));
  background:color-mix(in srgb,var(--green-fill) 6%,var(--surface-2));
}
.cz-sound-row b{font-size:13px;font-weight:650}
.cz-sound-row small{display:block;color:var(--label-2);font-size:11px;margin-top:2px}
.cz-sound-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cz-sound-actions .btn{padding:6px 10px;font-size:11.5px;min-height:30px}
.cz-sound-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--green-fill) 18%,transparent);
  color:var(--green);
}
.cz-music-panel{display:grid;gap:12px}
.cz-music-player{
  display:flex;align-items:center;gap:12px;padding:14px;
  border-radius:18px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--blue-fill) 8%,var(--surface-2)),var(--surface-2));
  border:1px solid color-mix(in srgb,var(--blue-fill) 20%,var(--sep));
}
.cz-music-art{
  width:56px;height:56px;flex:none;border-radius:16px;
  display:grid;place-items:center;color:#fff;font-size:22px;
  background:linear-gradient(140deg,#5b8cff,#9a7cff 55%,#ff6bb5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px rgba(90,110,255,.32);
}
.cz-music-art .ic{width:26px;height:26px}
.cz-music-meta{flex:1;min-width:0}
.cz-music-meta b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-music-meta small{display:block;color:var(--label-2);font-size:11px;margin-top:2px}
.cz-music-controls{display:flex;gap:6px;flex:none}
.cz-music-controls button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--sep)}
.cz-music-controls button:hover{background:var(--fill)}
.cz-music-controls .ic{width:18px;height:18px}
.cz-music-volume{display:grid;gap:6px;padding:10px 4px}
.cz-music-volume label{display:flex;justify-content:space-between;font-size:11.5px;color:var(--label-2);font-weight:600}
.cz-music-volume input{width:100%;accent-color:var(--blue-fill)}
.cz-music-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:600px){
  .cz-sound-row{grid-template-columns:1fr;gap:8px}
  .cz-sound-actions{justify-content:flex-start}
}


/* PropertyOS responsive system refresh: mobile-first iOS-inspired / desktop macOS-inspired */
:root{
  --bg:#f5f5fa;--surface:#fff;--surface-2:#f8f8fc;
  --label:#202127;--label-2:#686a75;--label-3:#9294a0;
  --sep:rgba(60,60,72,.11);--line:rgba(60,60,72,.16);
  --blue-fill:#0a84ff;--blue:#0878e8;--green-fill:#30d158;
  --radius:18px;--radius-lg:24px;--radius-xl:30px;
  --shadow-card:0 3px 16px rgba(28,38,66,.055);--shadow-pop:0 18px 48px rgba(20,28,48,.16);
  --ui-motion:180ms;
}
:root[data-theme="dark"]{
  --bg:#111114;--surface:#1d1d21;--surface-2:#26262b;--label:#f5f5f7;
  --label-2:#b3b3bd;--label-3:#777781;--sep:rgba(255,255,255,.10);--line:rgba(255,255,255,.14);
  --shadow-card:0 4px 18px rgba(0,0,0,.16);--shadow-pop:0 18px 48px rgba(0,0,0,.34);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111114;--surface:#1d1d21;--surface-2:#26262b;--label:#f5f5f7;--label-2:#b3b3bd;--label-3:#777781;--sep:rgba(255,255,255,.10);--line:rgba(255,255,255,.14);--shadow-card:0 4px 18px rgba(0,0,0,.16);--shadow-pop:0 18px 48px rgba(0,0,0,.34)}}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top-inset,32px) + 66px)}
body{background:var(--bg);letter-spacing:-.01em}
/* Desktop: calm macOS window/workspace hierarchy; no expensive blur on every card */
@media(min-width:860px) and (orientation:landscape){
  .app{grid-template-columns:252px minmax(0,1fr)}
  .sidebar{padding:22px 14px 16px;gap:20px;background:var(--surface);border-right:1px solid var(--sep);box-shadow:none}
  .brand{padding:0 8px 16px;border-bottom:1px solid var(--sep)}
  .nav-title{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--label-3);font-weight:750}
  .nav-item{min-height:39px;border-radius:11px;padding:0 11px;transition:background var(--ui-motion) ease,color var(--ui-motion) ease}
  .nav-item[aria-current="page"],.nav-item.active{background:color-mix(in srgb,var(--blue-fill) 11%,var(--surface));color:var(--blue-fill)}
  .main{min-width:0;background:var(--bg)}
  .bar{background:color-mix(in srgb,var(--surface) 94%,transparent)!important;border-bottom:1px solid var(--sep);box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .content{width:100%;max-width:1680px;margin:0 auto;padding:22px clamp(22px,3vw,48px) 48px!important}
  .page{animation:none!important}
  .large-title{font-size:clamp(30px,2.2vw,40px);letter-spacing:-.045em}
  .group,.stat,.dash-metric,.dash-panel,.sfv-shell,.hx-card,.module-card,.custom-panel,.property-card,.intro-settings{box-shadow:var(--shadow-card)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .system-bar{background:var(--surface)!important;border-bottom:1px solid var(--sep);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
/* Shared surface language: consistent across every module */
:where(.group,.stat,.dash-metric,.dash-panel,.sfv-shell,.hx-card,.module-card,.custom-panel,.property-card,.intro-settings,.spatial-stage,.wallet-page-hero,.mv-card,.tenant-orbit-card,.sheet,.command-dialog){border-radius:var(--radius-lg)}
:where(.group,.stat,.dash-metric,.dash-panel,.sfv-shell,.hx-card,.module-card,.custom-panel,.property-card,.intro-settings){box-shadow:var(--shadow-card)}
:where(.btn,.icon-btn,.system-icon,.nav-item,.qa button,.spatial-launch-card,.tab,.toolbar select,.filters select,input,select,textarea){transition-duration:var(--ui-motion)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:12px}
:where(input,select,textarea,button){touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--blue-fill) 50%,transparent);outline-offset:2px}
.table-wrap,.group.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:separate;border-spacing:0}
img,svg,canvas,video{max-width:100%}
/* Reduce large glass effects that cause GPU/compositing load on phones */
:where(.system-bar,.os-dock,.sidebar,.bar,.tabbar,.os-panel,.cc-toggle,.group,.stat,.dash-metric,.dash-panel,.sfv-shell,.hx-card,.module-card,.qa button,.custom-panel,.property-card){backdrop-filter:none;-webkit-backdrop-filter:none}
:where(.system-bar,.bar,.tabbar){background:color-mix(in srgb,var(--surface) 96%,transparent)!important}
:where(.stat,.dash-metric,.dash-panel,.sfv-shell,.hx-card,.module-card,.custom-panel,.property-card,.intro-settings){border:1px solid var(--sep)}
/* Portrait and narrow touch layouts: native-feeling mobile navigation and controls */
@media(max-width:859px), (orientation:portrait) and (max-width:1100px){
  :root{--radius:17px;--radius-lg:21px;--radius-xl:26px}
  body{font-size:15px;overflow-x:hidden}
  .system-bar{height:calc(42px + env(safe-area-inset-top))!important;padding:env(safe-area-inset-top) 12px 0!important;align-items:center!important}
  .system-bar .system-left,.system-bar .system-right{min-width:0;align-items:center}
  .system-brand .apple-tile{width:28px;height:28px}
  .brand-word,.brand-co,.system-live,.system-date,.system-clock,.system-divider{display:none!important}
  .system-workspace{display:block;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  .system-right{gap:5px!important}
  .system-icon{min-width:34px;min-height:34px;border-radius:999px!important;justify-content:center}
  .system-command-trigger{padding:0 10px!important}
  .system-command-trigger>span:nth-child(2),.system-command-trigger kbd,.os-window-manager-trigger span:nth-child(2){display:none!important}
  .app{padding-top:calc(42px + env(safe-area-inset-top))!important;grid-template-columns:minmax(0,1fr)!important}
  .sidebar{display:none!important}
  .bar{height:54px!important;padding:0 15px!important;background:color-mix(in srgb,var(--bg) 92%,transparent)!important;border-bottom:1px solid var(--sep);box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .bar-title{font-size:14px!important;font-weight:700!important}
  .bar-actions .btn{min-height:38px;border-radius:999px;padding:0 13px}
  .content{padding:14px 14px calc(100px + env(safe-area-inset-bottom))!important;max-width:100%;}
  .large-title{font-size:clamp(27px,7vw,34px)!important;line-height:1.08;letter-spacing:-.045em;margin:4px 0 16px}
  .date{font-size:12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .stat{min-width:0;padding:14px!important;border-radius:19px!important}
  .stat .value,.stat strong{overflow-wrap:anywhere}
  .qa{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .qa button{min-width:0;min-height:86px;padding:11px 7px!important;border-radius:18px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;font-size:11px;line-height:1.25}
  .qa .tile{width:34px;height:34px;border-radius:12px!important}
  .section-head{gap:10px;align-items:center}
  .section-head h2,.dash-panel-head h3,.sfv-panel-head h3{font-size:16px}
  .group,.dash-panel,.module-card,.custom-panel,.intro-settings{padding:14px!important}
  .dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .dash-metric{padding:12px!important;min-width:0}
  .dash-grid,.sfv-grid,.pd-section-grid{grid-template-columns:minmax(0,1fr)!important}
  .sfv-collection-panel,.sfv-calendar-panel{grid-column:auto!important}
  .sfv-money-dates{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .module-grid,.property-grid{grid-template-columns:minmax(0,1fr)!important}
  .inline-form{grid-template-columns:minmax(0,1fr)!important}
  .inline-form textarea,.inline-form .full{grid-column:auto!important}
  .toolbar{align-items:stretch;gap:8px}
  .toolbar .search{max-width:none;flex-basis:100%;height:44px}
  .toolbar select,.filters select,#reports select,#ledger select{min-height:42px;max-width:100%}
  .form .row{min-height:54px;padding-inline:12px}
  .form input,.form select,.form textarea{min-height:44px}
  .btn,.btn-sm,.icon-btn,.link{min-height:40px}
  .tabbar{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:7px 8px calc(6px + env(safe-area-inset-bottom))!important;background:color-mix(in srgb,var(--surface) 96%,transparent)!important;border-top:1px solid var(--sep);box-shadow:0 -5px 20px rgba(15,25,45,.06)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .tab{min-height:49px;border-radius:15px!important;font-size:10px;gap:3px}
  .tab .ic{width:20px;height:20px}
  .toast{max-width:calc(100vw - 28px);bottom:calc(78px + env(safe-area-inset-bottom))!important}
  .sheet{max-height:calc(100dvh - 20px - env(safe-area-inset-top));overflow:auto;overscroll-behavior:contain}
  .command-overlay{padding:calc(50px + env(safe-area-inset-top)) 10px 12px}
  .command-dialog{max-height:calc(100dvh - 64px - env(safe-area-inset-top));overflow:auto}
  .os-panel{max-width:calc(100vw - 16px);max-height:calc(100dvh - 64px - env(safe-area-inset-top));overflow:auto;border-radius:24px!important}
  .cz-bar{left:10px;right:10px;max-width:none}
  .intro-settings{padding:15px!important}
  .intro-setting-row{gap:10px}
  .intro-setting-copy b{font-size:13px}
  .intro-setting-copy small{font-size:11px}
  .spatial-stage{min-height:0!important}
  .spatial-deck{min-height:260px!important}
  .tenant-constellation{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .table{min-width:620px}
}
@media(max-width:430px){
  .content{padding-inline:11px!important}
  .system-workspace{max-width:30vw}
  .qa{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .qa button{min-height:78px;flex-direction:row;justify-content:flex-start;text-align:left;padding:10px!important}
  .stats{gap:7px!important}
  .stat{padding:12px!important}
  .sfv-money-dates{grid-template-columns:minmax(0,1fr)!important}
  .tenant-constellation{grid-template-columns:minmax(0,1fr)!important}
  .intro-setting-row{align-items:flex-start}
  .intro-pill-switch{margin-top:2px}
}
/* Landscape tablets: retain sidebar navigation when there is enough horizontal room */
@media(min-width:860px) and (orientation:landscape) and (max-height:700px){
  .sidebar{gap:12px;padding-top:14px;padding-bottom:10px}
  .sidebar nav{overflow:auto;min-height:0}
  .nav-title{margin-top:12px!important}
  .brand{padding-bottom:10px}
  .profile{margin-top:auto}
  .content{padding-top:16px!important}
}
/* Keep transitions compositor-friendly; avoid blanket will-change */
@media(hover:hover) and (pointer:fine){.nav-item:hover,.btn:hover,.icon-btn:hover,.system-icon:hover{transform:translateY(-1px)}}
@media(hover:none),(pointer:coarse){.nav-item:hover,.btn:hover,.icon-btn:hover,.system-icon:hover,.spatial-launch-card:hover{transform:none!important;filter:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
html[data-performance-mode="on"] :where(.spatial-orb-art,.spatial-orb-ring,.spatial-orb-core,.sp-card-flip,.universe-node){animation:none!important;filter:none!important}
html[data-performance-mode="on"] [data-perf-offscreen] :is(.spatial-card,.spatial-card-inner,.wallet-folder,.wallet-action span.circle,.tenant-orbit-card,.mv-card,.spatial-orb-art,.spatial-orb-ring){animation-play-state:paused!important;transition:none!important}
