/* Numeroloji Hub UI. Layout: an app frame on a soft turquoise atmosphere; desktop = icon rail + panel, phone = full-bleed
   panel + bottom tab bar (safe areas respected). Rule of this file: text is NEVER cut (no ellipsis, no line clamp); long
   values wrap. Every color is a token; light and dark both designed. */
:root{
  --atm-base:#E8F4F3; --atm-1:#BDEFE8; --atm-2:#C4E4F2; --atm-3:#FFE4D1;
  --frame:rgba(255,255,255,.58); --frame-edge:rgba(255,255,255,.95);
  --panel:#FBFEFE; --surface:#FFFFFF; --surface-2:#EFF7F6; --line:#DCEAE9;
  --ink:#0A2A2D; --ink-2:#36575A; --muted:#557174;
  --accent:#12A5A0; --accent-ink:#0A6F6C; --accent-soft:#D5F3F0; --accent-glow:#63E2D8;
  --pill:#0A2A2D; --pill-fg:#E8FBF9;
  --ok:#126B45; --ok-soft:#DDF3E8; --warn:#8A5200; --warn-soft:#FBEBD3; --crit:#B8304C; --crit-soft:#FADDE3;
  --shadow:0 30px 80px -30px rgba(10,60,62,.28), 0 2px 6px rgba(10,60,62,.05);
  --card-shadow:0 18px 40px -24px rgba(10,60,62,.25);
  --scrim:rgba(10,42,45,.32);
  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-body:'Onest','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;
  --r-frame:32px; --r-panel:26px; --r-card:20px; --tap:44px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --atm-base:#041517; --atm-1:#0B4A48; --atm-2:#0A3049; --atm-3:#3A261B;
  --frame:rgba(8,34,37,.55); --frame-edge:rgba(120,230,220,.10);
  --panel:#071D20; --surface:#0C282B; --surface-2:#103236; --line:#1A4145;
  --ink:#E2F6F4; --ink-2:#B3D4D1; --muted:#8FB3B0;
  --accent:#2DD0C6; --accent-ink:#5DE4DA; --accent-soft:#0F3E3E; --accent-glow:#2DD0C6;
  --pill:#2DD0C6; --pill-fg:#032321;
  --ok:#4FCB91; --ok-soft:#0E3527; --warn:#E6AA4D; --warn-soft:#3A2A10; --crit:#F2819A; --crit-soft:#3E1520;
  --shadow:0 30px 80px -30px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.3); --card-shadow:0 18px 40px -24px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.5); color-scheme:dark }}
:root[data-theme="dark"]{
  --atm-base:#041517; --atm-1:#0B4A48; --atm-2:#0A3049; --atm-3:#3A261B;
  --frame:rgba(8,34,37,.55); --frame-edge:rgba(120,230,220,.10);
  --panel:#071D20; --surface:#0C282B; --surface-2:#103236; --line:#1A4145;
  --ink:#E2F6F4; --ink-2:#B3D4D1; --muted:#8FB3B0;
  --accent:#2DD0C6; --accent-ink:#5DE4DA; --accent-soft:#0F3E3E; --accent-glow:#2DD0C6;
  --pill:#2DD0C6; --pill-fg:#032321;
  --ok:#4FCB91; --ok-soft:#0E3527; --warn:#E6AA4D; --warn-soft:#3A2A10; --crit:#F2819A; --crit-soft:#3E1520;
  --shadow:0 30px 80px -30px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.3); --card-shadow:0 18px 40px -24px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.5); color-scheme:dark }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; height:100%}
body{margin:0; min-height:100%; background:var(--atm-base); color:var(--ink); font-family:var(--font-body); font-size:15.5px;
  line-height:1.55; -webkit-tap-highlight-color:transparent; overflow-wrap:anywhere; transition:background-color .3s}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
h1,h2,h3{text-wrap:balance; overflow-wrap:break-word}
.num,.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* atmosphere */
.atmos{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.8}
.b1{width:46vw; height:46vw; left:-10vw; top:-12vw; background:var(--atm-1); animation:drift 28s ease-in-out infinite alternate}
.b2{width:40vw; height:40vw; right:-8vw; bottom:-14vw; background:var(--atm-2); animation:drift 34s ease-in-out infinite alternate-reverse}
.b3{width:26vw; height:26vw; right:12vw; top:-6vw; background:var(--atm-3); opacity:.5; animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(4vw,3vw,0) scale(1.08)}}

/* boot + login */
.boot{position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:grid; place-content:center; justify-items:center; gap:14px; padding:24px}
.boot-mark,.mark i{display:grid; grid-template-columns:repeat(3,7px); gap:5px}
.boot-mark i{width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.35}
.boot-mark i:nth-child(1),.boot-mark i:nth-child(5),.boot-mark i:nth-child(9){opacity:1}
.boot-text{color:var(--muted); margin:0}
.login{position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b))}
.login-card{width:min(420px,100%); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--shadow); padding:28px 24px; display:flex; flex-direction:column; gap:16px}
.login-card h1{font-family:var(--font-display); font-weight:600; font-size:30px; line-height:1.1; letter-spacing:-.02em; margin:4px 0 0}
.login-card p{margin:0; color:var(--ink-2)}
.hint{font-size:13.5px; color:var(--muted); background:var(--surface-2); border-radius:12px; padding:10px 12px}

/* frame */
.shell{position:relative; z-index:1; max-width:1360px; margin:0 auto; padding:18px 18px 22px; display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px}
.rail{position:sticky; top:18px; align-self:start; height:calc(100vh - 36px); height:calc(100dvh - 36px); display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:12px 0; border-radius:var(--r-frame); background:var(--frame); border:1px solid var(--frame-edge); -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2)}
.rail .grow{flex:1}
.rbtn{position:relative; width:var(--tap); height:var(--tap); border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); transition:transform .2s, background-color .2s}
.rbtn:hover{transform:translateY(-1px); color:var(--ink)}
.rbtn[aria-current="page"]{background:var(--accent-soft); color:var(--accent-ink); border-color:transparent}
.rbtn.primary{background:var(--pill); color:var(--pill-fg); border-color:transparent}
.rbtn svg{width:20px; height:20px}
.tip{position:absolute; left:54px; top:50%; transform:translate(-4px,-50%); white-space:nowrap; background:var(--pill); color:var(--pill-fg); font-size:12.5px; font-weight:500; padding:5px 10px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:5}
.rbtn:hover .tip,.rbtn:focus-visible .tip{opacity:1; transform:translate(0,-50%)}
.mark{width:var(--tap); height:var(--tap); border-radius:50%; background:var(--pill); display:grid; place-items:center}
.mark i{grid-template-columns:repeat(3,5px); gap:3px}
.mark b{width:5px; height:5px; border-radius:50%; background:var(--pill-fg); opacity:.45}
.mark b.on{opacity:1; background:var(--accent-glow)}

.panel{min-width:0; background:var(--panel); border-radius:var(--r-panel); box-shadow:var(--shadow); padding:18px 28px 36px; min-height:calc(100vh - 36px); min-height:calc(100dvh - 36px)}
.top{position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0 12px; background:var(--panel); border-bottom:1px solid transparent}
.top.scrolled{border-bottom-color:var(--line)}
.top .title{flex:1 1 160px; min-width:0}
.top .title b{display:block; font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.01em; line-height:1.2}
.top .title span{display:block; font-size:12.5px; color:var(--muted)}
.person-chip{display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); padding:6px 14px 6px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--line); text-align:left}
.person-chip .av{width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-weight:600; font-size:13px; flex:none}
.person-chip span{font-size:14px; line-height:1.2}
.theme{display:inline-flex; padding:3px; border-radius:999px; background:var(--surface); border:1px solid var(--line)}
.theme button{width:38px; height:36px; border:0; border-radius:999px; background:transparent; color:var(--muted); display:grid; place-items:center}
.theme button svg{width:17px; height:17px}
.theme button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-ink)}

/* generic */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap); padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:500; font-size:14.5px; text-align:center; transition:transform .15s}
.btn:active{transform:scale(.98)}
.btn.dark{background:var(--pill); color:var(--pill-fg); border-color:transparent}
.btn.accent{background:var(--accent); color:#032321; border-color:transparent}
.btn.danger{color:var(--crit); border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.btn.small{min-height:36px; padding:6px 13px; font-size:13.5px}
.btn svg{width:17px; height:17px; flex:none}
.btn[disabled]{opacity:.55; cursor:default}
.row-gap{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.lede{color:var(--ink-2); font-size:16px; margin:0; max-width:62ch}
.view{display:flex; flex-direction:column; gap:22px; padding-top:10px}
.view h1{font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4vw,48px); line-height:1.06; letter-spacing:-.025em; margin:6px 0 8px}
.view h1 .soft{color:var(--muted); font-weight:500}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 12px}
.sec-h h2{font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-.015em; margin:0}
.sec-h span{font-size:13px; color:var(--muted)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:18px; min-width:0}
.card.soft{background:var(--surface-2); border-color:transparent}
.card h3{font-family:var(--font-display); font-weight:600; font-size:17px; margin:0 0 6px}
.grid{display:grid; gap:12px; align-items:start}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{display:flex; flex-direction:column; gap:3px; min-width:0}
.stat .v{font-family:var(--font-display); font-weight:600; font-size:28px; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.stat .k{font-size:13.5px; color:var(--ink-2)}
.stat .s{font-size:12.5px; color:var(--muted)}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; padding:3px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); line-height:1.4}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.pill.ok{background:var(--ok-soft); color:var(--ok)} .pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.crit{background:var(--crit-soft); color:var(--crit)} .pill.acc{background:var(--accent-soft); color:var(--accent-ink)}
.pill.plain::before{display:none}
.list{display:flex; flex-direction:column}
.li{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--line); min-width:0}
.li:first-child{border-top:0}
.li .main{min-width:0; flex:1}
.li .main b{display:block; font-weight:600}
.li .main small{display:block; color:var(--muted); font-size:13px}
.li.tap{cursor:pointer}
.empty{border:1px dashed var(--line); border-radius:var(--r-card); padding:22px; text-align:center; color:var(--muted)}
.empty b{display:block; color:var(--ink); font-family:var(--font-display); font-size:17px; margin-bottom:4px}
.tabs{display:flex; flex-wrap:wrap; gap:6px}
.tabs button{min-height:38px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:14px}
.tabs.jump{scroll-margin-top:80px}
.tabs button[aria-selected="true"]{background:var(--pill); color:var(--pill-fg); border-color:transparent}
.bar{height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:var(--accent)}
.src{display:inline-flex; font-family:var(--font-mono); font-size:12px; padding:2px 8px; border-radius:6px; background:var(--accent-soft); color:var(--accent-ink); line-height:1.5}
.note-line{font-size:13px; color:var(--muted)}
.toast{position:fixed; z-index:60; left:50%; bottom:calc(24px + var(--safe-b)); transform:translate(-50%,20px); opacity:0; background:var(--pill); color:var(--pill-fg); padding:11px 18px; border-radius:14px; font-size:14px; transition:opacity .25s, transform .25s; pointer-events:none; width:max-content; max-width:calc(100vw - 32px); text-align:center}
.toast.on{opacity:1; transform:translate(-50%,0)}
.offline{position:fixed; z-index:61; top:calc(8px + var(--safe-t)); left:50%; transform:translateX(-50%); background:var(--warn-soft); color:var(--warn); border-radius:999px; padding:6px 14px; font-size:13px; max-width:calc(100vw - 32px); text-align:center}

/* forms */
.form{display:flex; flex-direction:column; gap:14px}
.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld label{font-size:12.5px; font-family:var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.fld input,.fld select,.fld textarea{width:100%; min-height:var(--tap); border:1px solid var(--line); background:var(--surface-2); border-radius:14px; padding:11px 14px; font-size:16px}
.fld textarea{min-height:140px; resize:vertical; line-height:1.5}
.fld small{color:var(--muted); font-size:12.5px}
.err{color:var(--crit); font-size:14px; margin:0}
.pw{position:relative}
.pw button{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--muted); min-height:36px; padding:0 10px; font-size:13px}

/* hero + dial */
.hero{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:20px; align-items:center}
.dialwrap{position:relative; justify-self:center; width:min(290px,100%)}
.dial{width:100%; height:auto; display:block; overflow:visible}
.dial .ticks{transform-origin:150px 150px; animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dial .tick{stroke:var(--muted); stroke-width:1; opacity:.45}
.dial .tick.major{stroke:var(--accent-ink); opacity:.9; stroke-width:1.5}
.dial .seg{fill:none; stroke-width:26}
.dial .segnum{font-family:var(--font-display); font-weight:600; font-size:19px; fill:var(--ink); text-anchor:middle; dominant-baseline:central}
.dial .house{font-family:var(--font-mono); font-size:12px; fill:var(--muted); text-anchor:middle; dominant-baseline:central}
.dial .core{fill:var(--surface); stroke:var(--line)}
.dial .big{font-family:var(--font-display); font-weight:600; font-size:40px; fill:var(--ink); text-anchor:middle; letter-spacing:-.02em}
.dial .lbl{font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; fill:var(--muted); text-anchor:middle}
.dial .who{font-family:var(--font-body); font-size:12.5px; fill:var(--accent-ink); text-anchor:middle}

/* results */
.items{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.item{background:var(--surface-2); border-radius:16px; padding:13px 14px; display:flex; flex-direction:column; gap:4px; min-width:0}
.item .k{font-size:13px; color:var(--ink-2)}
.item .v{font-family:var(--font-display); font-weight:600; font-size:21px; line-height:1.25; letter-spacing:-.01em}
.item .steps{font-size:12.5px; color:var(--muted)}
.item .how{align-self:flex-start; border:0; background:transparent; color:var(--accent-ink); font-size:12.5px; padding:4px 0; min-height:32px}
.grid9{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px}
.grid9 div{background:var(--surface-2); border-radius:12px; padding:8px 0 6px; text-align:center}
.grid9 small{display:block; font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.grid9 b{font-family:var(--font-display); font-weight:600; font-size:22px}
.grid9 .star b{color:var(--accent-ink)}

/* charts */
.chart{width:100%; height:auto; display:block}
.chart text{fill:var(--ink-2); font-family:var(--font-body); font-size:12px}
.chart .axis{stroke:var(--line)}
.chart .grid-l{stroke:var(--line); stroke-dasharray:2 4}
.chart .bar-f{fill:var(--accent)}
.chart .bar-z{fill:var(--crit)}
.chart .area{fill:color-mix(in srgb,var(--accent) 22%,transparent); stroke:var(--accent); stroke-width:2}
.chart .seg-a{fill:color-mix(in srgb,var(--accent) 70%,var(--surface))}
.chart .seg-b{fill:color-mix(in srgb,var(--accent) 35%,var(--surface))}
.chart .now{stroke:var(--crit); stroke-width:2}
.chart .heat{stroke:var(--surface); stroke-width:2}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink-2)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.legend .la{background:color-mix(in srgb,var(--accent) 70%,var(--surface))}
.legend .lb{background:color-mix(in srgb,var(--accent) 35%,var(--surface))}

/* sheet (forms, details, chat on phone) */
.scrim{position:fixed; inset:0; z-index:40; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .25s}
.scrim.on{opacity:1; pointer-events:auto}
.sheet{position:fixed; z-index:41; right:18px; top:18px; bottom:18px; width:min(460px,calc(100vw - 36px)); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--shadow);
  display:flex; flex-direction:column; transform:translateX(calc(100% + 40px)); visibility:hidden; transition:transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s .35s}
.sheet.on{transform:none; visibility:visible; transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sheet header{display:flex; align-items:center; gap:10px; padding:16px 16px 12px 20px; border-bottom:1px solid var(--line)}
.sheet header .t{flex:1; min-width:0}
.sheet header b{display:block; font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.25}
.sheet header small{display:block; color:var(--muted); font-size:12.5px}
.sheet .body{flex:1; overflow-y:auto; padding:16px 20px 20px; display:flex; flex-direction:column; gap:14px; overscroll-behavior:contain}
.sheet .foot{padding:12px 16px calc(12px + var(--safe-b)); border-top:1px solid var(--line)}
.icon-btn{width:var(--tap); height:var(--tap); border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; flex:none; color:var(--ink-2)}
.icon-btn svg{width:18px; height:18px}

/* chat */
.msgs{display:flex; flex-direction:column; gap:10px}
.m{max-width:88%; padding:10px 14px; border-radius:18px; font-size:15px; line-height:1.5; white-space:pre-wrap}
.m.me{align-self:flex-end; background:var(--pill); color:var(--pill-fg); border-bottom-right-radius:6px}
.m.ai{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px}
.m .st{display:block; margin-top:4px; font-family:var(--font-mono); font-size:12px; opacity:.85}
.composer{display:flex; gap:8px; align-items:flex-end}
.composer textarea{flex:1; min-width:0; min-height:var(--tap); max-height:160px; border:1px solid var(--line); background:var(--surface-2); border-radius:18px; padding:11px 14px; font-size:16px; resize:none}
.status-dot{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted)}
.status-dot::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--muted)}
.status-dot.on::before{background:var(--ok)} .status-dot.off::before{background:var(--crit)}

/* bottom tab bar (phones) */
.tabbar{display:none}
.more-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.more-grid button{display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:88px; padding:14px; border-radius:18px; border:1px solid var(--line); background:var(--surface); text-align:left}
.more-grid svg{width:22px; height:22px; color:var(--accent-ink)}

@media (max-width:1060px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body{font-size:15.5px}
  .shell{display:block; padding:0}
  .rail{display:none}
  .panel{border-radius:0; box-shadow:none; min-height:100vh; min-height:100dvh; padding:calc(4px + var(--safe-t)) 16px calc(96px + var(--safe-b))}
  .top{padding-top:calc(8px + var(--safe-t)); margin-top:calc(-4px - var(--safe-t))}
  .top .title b{font-size:19px}
  .top .btn{display:none}
  .top .theme{display:none}
  .tabs.jump{flex-wrap:wrap}
  .g2,.g3,.g4,.items{grid-template-columns:minmax(0,1fr)}
  .stats-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .grid9{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dialwrap{width:min(240px,74%)}
  .sheet{left:0; right:0; top:auto; bottom:0; width:auto; max-height:92vh; max-height:92dvh; border-radius:26px 26px 0 0; transform:translateY(105%)}
  .sheet.on{transform:none}
  .tabbar{display:flex; position:fixed; z-index:30; left:10px; right:10px; bottom:calc(10px + var(--safe-b)); background:var(--frame);
    -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3); border:1px solid var(--frame-edge); border-radius:24px; padding:6px; box-shadow:var(--shadow)}
  .tabbar button{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; border:0; background:transparent; color:var(--muted); font-size:12px; padding:7px 2px 6px; border-radius:18px; min-height:54px; line-height:1.2}
  .tabbar button svg{width:22px; height:22px}
  .tabbar button[aria-current="page"]{background:var(--accent-soft); color:var(--accent-ink)}
  .toast{bottom:calc(100px + var(--safe-b))}
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }