/* Layout: one centered column (760px), sticky header with scrolling tabs; stories row, composer and feed on Home; profile grids and overlays for posts and stories. */
:root{
  --bg:#edf1f5;--surface:#ffffff;--ink:#13202c;--mute:#5d6b79;--line:#d8e0e8;--field:#f4f7fa;
  --accent:#0a6c8c;--accent-ink:#ffffff;--ok:#18794e;--warn:#b45f06;--bad:#c42b2b;
  --av0:#0a6c8c;--av1:#7a3e9d;--av2:#b3541e;--av3:#2f7d4f;--av4:#a02b5a;--av5:#4a5bb8;--av-ink:#ffffff;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d141b;--surface:#151f29;--ink:#e8eef4;--mute:#97a6b4;--line:#263543;--field:#0f1820;--accent:#49b8d9;--accent-ink:#06222c;--ok:#4cc38a;--warn:#f0a350;--bad:#f2777a;--av0:#49b8d9;--av1:#c39be0;--av2:#f0a06a;--av3:#6fd09a;--av4:#ee8ab5;--av5:#9aa8f2;--av-ink:#0d141b;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0d141b;--surface:#151f29;--ink:#e8eef4;--mute:#97a6b4;--line:#263543;--field:#0f1820;--accent:#49b8d9;--accent-ink:#06222c;--ok:#4cc38a;--warn:#f0a350;--bad:#f2777a;--av0:#49b8d9;--av1:#c39be0;--av2:#f0a06a;--av3:#6fd09a;--av4:#ee8ab5;--av5:#9aa8f2;--av-ink:#0d141b;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);padding-block:0 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
.wrap{max-width:760px;margin:0 auto}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line);margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:10px max(16px,env(safe-area-inset-left,0px))}
.bar{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo{font:800 20px var(--display);letter-spacing:-.02em}
.logo i{font-style:normal;color:var(--accent)}
nav{display:flex;gap:2px;overflow-x:auto;flex:1 1 280px;min-width:0}
nav button{background:none;border:0;color:var(--mute);font:600 14px var(--body);padding:7px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
nav button[aria-current="true"]{background:var(--ink);color:var(--surface)}
.badge{display:inline-block;margin-left:6px;min-width:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font:600 11px/18px var(--body);text-align:center}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;text-wrap:balance;margin:0}
h2{font-size:22px;margin:22px 0 12px}h3{font-size:16px}
.banner{margin:14px 0 0;padding:10px 12px;border:1px dashed var(--accent);border-radius:10px;font-size:13px;color:var(--mute)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
label{display:block;font-size:13px;font-weight:500;color:var(--mute)}
input,textarea,select{width:100%;font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin:4px 0 12px}
input[type=checkbox]{width:auto;margin:0 6px 0 0}
input[type=file]{padding:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{font:600 14px var(--body);background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;padding:9px 16px;cursor:pointer}
.btn.quiet{background:var(--field);color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--bad);color:#fff}
.btn.sm{padding:5px 10px;font-size:13px}
.btn:disabled{opacity:.55;cursor:default}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row>.grow{flex:1 1 140px;min-width:0}
.mute{color:var(--mute);font-size:13px}
.err{color:var(--bad);font-size:13px;min-height:19px;margin:0 0 6px}
.lnk{background:none;border:0;padding:0;font:600 inherit var(--body);color:var(--ink);cursor:pointer;text-align:left}
.lnk:hover{color:var(--accent)}
.av{display:inline-grid;place-items:center;flex:none;width:var(--s,36px);height:var(--s,36px);border-radius:50%;background:var(--av0);color:var(--av-ink);font:800 calc(var(--s,36px)*.42) var(--display)}
.stories{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:6px}
.story{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--mute);width:66px;flex:none}
.story span{max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ring{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:3px solid var(--line);background:none;padding:0;cursor:pointer;color:var(--accent);font:600 26px var(--body)}
.ring.new{border-color:var(--accent)}.ring.seen{border-color:var(--line)}
.ring.add{border-style:dashed;border-color:var(--accent)}
.ring:disabled{cursor:default}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
details.composer summary{cursor:pointer;font:600 15px var(--display)}
details.composer form{margin-top:12px}
.post img.photo{display:block;width:100%;max-height:520px;object-fit:contain;background:var(--field);border-radius:8px;margin:10px 0}
.acts{display:flex;gap:4px;align-items:center}
.ico{background:none;border:0;color:var(--ink);cursor:pointer;padding:5px;border-radius:8px;display:inline-flex;align-items:center;gap:5px;font:600 13px var(--body)}
.ico:hover{background:var(--field)}.ico.on{color:var(--bad)}.ico.sv.on{color:var(--accent)}
.cm-row{font-size:14px;margin-top:3px;overflow-wrap:anywhere}
.cm-row .x{background:none;border:0;color:var(--mute);cursor:pointer;margin-left:4px;font-size:15px}
.cmf{display:flex;gap:8px;margin-top:10px}.cmf input{margin:0;flex:1 1 auto;min-width:0}
.ocr{background:var(--field);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:12px}
.ocr pre{margin:8px 0 0;white-space:pre-wrap;font:13px/1.5 var(--mono);max-height:140px;overflow:auto;overflow-wrap:anywhere}
.chip{display:inline-block;margin:6px 6px 0 0;padding:2px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:500 12.5px var(--mono);cursor:pointer}
.chip:hover{border-color:var(--accent)}
.tag{font:600 11.5px var(--body);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:6px;border:1px solid currentColor}
.tag.pending,.tag.reading{color:var(--warn)}.tag.confirmed,.tag.completed,.tag.done{color:var(--ok)}.tag.cancelled,.tag.failed{color:var(--bad)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.cell{padding:0;border:0;background:var(--field);aspect-ratio:1;cursor:pointer;overflow:hidden;border-radius:4px}
.cell img{width:100%;height:100%;object-fit:cover;display:block}
.phead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.counts{display:flex;gap:22px;margin:8px 0}.counts b{display:block;font:800 20px var(--display);font-variant-numeric:tabular-nums}
.person{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}.person .grow{flex:1 1 auto;min-width:0}
.person .mute{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;color:var(--ink);font:inherit;cursor:pointer}
.note.unread{box-shadow:inset 3px 0 0 var(--accent);padding-left:10px}
.bubbles{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px;max-height:50vh;overflow-y:auto}
.bub{max-width:80%;padding:8px 12px;border-radius:14px;background:var(--field);border:1px solid var(--line);overflow-wrap:anywhere}
.bub.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-bottom:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.stat b{display:block;font:800 24px var(--display);font-variant-numeric:tabular-nums}
.sub{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);font-weight:600}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
td select{margin:0;width:auto}
.price{font:500 16px var(--mono);font-variant-numeric:tabular-nums}
.auth{max-width:400px;margin:7vh auto 0}
.auth h1{font-size:30px}
#ov[hidden]{display:none}
.ov-back{position:fixed;inset:0;z-index:20;background:color-mix(in srgb,var(--ink) 60%,transparent);overflow-y:auto;padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-left,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px))}
.ov-card{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.ov-card>.post{margin:0;border:0;padding:0}
.ov-x{margin-bottom:10px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:8px;font-size:14px;z-index:40;max-width:90vw}
footer{margin-top:28px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.adwin{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px}
.adstage{aspect-ratio:16/5;max-height:260px;width:100%;background:var(--field);display:grid;place-items:center}
.adstage img,.adstage video{width:100%;height:100%;object-fit:contain;display:block}
.adbar{display:flex;gap:8px;align-items:center;padding:8px 12px;flex-wrap:wrap}
.adbar .grow{flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adhid{margin-top:14px}
.adload{padding:12px;text-align:center}
.ff{margin:0 0 16px;padding:0;border:0;min-width:0}
fieldset.ff legend{padding:0;font-size:13px;font-weight:500;color:var(--mute)}
.ff>label,.ff>label span{font-size:13px;font-weight:500}
.ff input:not([type=checkbox]):not([type=radio]),.ff select,.ff textarea{margin:6px 0 4px}
.ff [aria-invalid="true"]{border-color:var(--bad)}
.help{font-size:12.5px;color:var(--mute)}
.ferr{color:var(--bad);font-size:13px}
.ferr:empty{display:none}
.req{color:var(--bad)}.optl{color:var(--mute);font-weight:400}
.opt-row{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);padding:4px 0;cursor:pointer}
.opt-row input{margin:0}
.fld{border-style:dashed}
.thumb{width:96px;height:30px;object-fit:cover;border-radius:4px;background:var(--field)}
.pvset{border:0;padding:0;margin:0;min-width:0}
@media (prefers-reduced-motion:no-preference){.btn,.chip,.ico{transition:background .15s,border-color .15s}}
/* ---- visual identity: persimmon and lagoon on cool paper, Unbounded display type ---- */
:root{--bg:#f3f4f8;--surface:#ffffff;--ink:#141726;--mute:#566074;--line:#dfe3ec;--field:#f1f3f8;--accent:#c93219;--accent-ink:#ffffff;--accent2:#0f7f82;--hi:#f7d046;--ok:#167a50;--warn:#a35a00;--bad:#c42b2b;--av0:#c93219;--av1:#0f7f82;--av2:#6b3fb0;--av3:#a8660a;--av4:#1f6b4a;--av5:#a1285c;--av-ink:#ffffff;--shadow:0 12px 32px -20px rgba(20,23,38,.55);
  --display:"Unbounded","Trebuchet MS",system-ui,sans-serif;--body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1017;--surface:#161923;--ink:#eef0f7;--mute:#9aa3b8;--line:#272c3b;--field:#0f121a;--accent:#ff8461;--accent-ink:#1b0a04;--accent2:#4fd1d3;--ok:#4cc38a;--warn:#f0a350;--bad:#f2777a;--av0:#ff8461;--av1:#4fd1d3;--av2:#b99bf0;--av3:#f2b64f;--av4:#6fd39b;--av5:#f08ab4;--av-ink:#12141c;--shadow:0 12px 32px -20px #000;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e1017;--surface:#161923;--ink:#eef0f7;--mute:#9aa3b8;--line:#272c3b;--field:#0f121a;--accent:#ff8461;--accent-ink:#1b0a04;--accent2:#4fd1d3;--ok:#4cc38a;--warn:#f0a350;--bad:#f2777a;--av0:#ff8461;--av1:#4fd1d3;--av2:#b99bf0;--av3:#f2b64f;--av4:#6fd39b;--av5:#f08ab4;--av-ink:#12141c;--shadow:0 12px 32px -20px #000;color-scheme:dark}
body{background-color:var(--bg);background-image:radial-gradient(52rem 26rem at 90% -8%,color-mix(in srgb,var(--accent) 11%,transparent),transparent),radial-gradient(40rem 22rem at -10% 0%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent);background-repeat:no-repeat;font-weight:500}
header{background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;gap:8px;font:800 18px var(--display);letter-spacing:-.04em}
.logo .mk{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 210deg,var(--accent),var(--hi),var(--accent2),var(--accent));display:inline-block;position:relative}
.logo .mk::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
nav button{border-radius:999px;font-weight:700;padding:7px 13px}
nav button:hover{background:var(--field);color:var(--ink)}
nav button[aria-current="true"]{background:var(--ink);color:var(--surface)}
h2{font-size:19px;letter-spacing:-.03em;margin:26px 0 14px}
h3{font-size:15px;letter-spacing:-.02em}
.panel{border-radius:18px;box-shadow:var(--shadow)}
.banner{border-style:solid;border-color:var(--line);background:color-mix(in srgb,var(--hi) 14%,var(--surface));color:var(--ink);font-weight:500}
.btn{border-radius:999px;font-weight:700;padding:10px 18px}
.btn.sm{padding:6px 12px}
.btn:not(:disabled):hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.quiet:not(:disabled):hover{filter:none;border-color:var(--accent)}
input,textarea,select{border-radius:12px;border-color:var(--line);transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);outline:none}
.tag{border-radius:999px;font-weight:700}
.chip{border-radius:999px}
.ring{border-radius:50%}
.ring.new{border:0;padding:3px;background:conic-gradient(from 200deg,var(--accent),var(--hi),var(--accent2),var(--accent))}
.ring .av{box-shadow:0 0 0 3px var(--surface)}
.ring.seen{border:3px solid var(--line)}
.ring.add{border:2px dashed var(--accent);color:var(--accent)}
.panel.post{overflow:hidden}
.post img.photo{max-width:none;width:calc(100% + 32px);margin:12px -16px;border-radius:0;max-height:560px;background:var(--field)}
.ov-card>.post img.photo{width:100%;margin:10px 0;border-radius:12px}
.ov-card{border-radius:20px;box-shadow:var(--shadow)}
.ico.on{color:var(--accent)}
.adwin{border-radius:18px;box-shadow:var(--shadow)}
.adbar .tag{background:var(--hi);color:#1b1500;border-color:transparent}
.stat{border-radius:16px;box-shadow:var(--shadow)}
.stat b{font-size:22px;letter-spacing:-.03em}
.bub{border-radius:18px}
.cell{border-radius:10px}
.note.unread{box-shadow:inset 3px 0 0 var(--accent)}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,56px);align-items:center;max-width:980px;margin:5vh auto 0}
.hero .auth{margin:0;max-width:none}
.hero-copy h1{font:800 clamp(30px,6.4vw,46px)/1.04 var(--display);letter-spacing:-.045em;margin:20px 0 14px;text-wrap:balance}
.hero-copy h1 em{font-style:normal;color:var(--accent)}
.hero-copy p{color:var(--mute);font-size:16px;max-width:44ch;margin:0 0 18px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills .tag{background:var(--surface);color:var(--ink);border-color:var(--line);text-transform:none;letter-spacing:0;font-size:13px;padding:4px 12px}
.hero-rings{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.sr{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,var(--accent),var(--hi),var(--accent2),var(--accent))}
.sr:nth-child(even){transform:translateY(12px)}
.sr .av{box-shadow:0 0 0 3px var(--bg)}
@media (max-width:760px){.hero{grid-template-columns:1fr;margin-top:3vh}.sr:nth-child(even){transform:none}}
@media (prefers-reduced-motion:no-preference){.hero-copy,.hero .auth{animation:rise .5s both}.hero .auth{animation-delay:.08s}@keyframes rise{from{opacity:0;transform:translateY(10px)}}}
/* ---- SoulSyndrome brand: navy and magenta from the logo, gold dot as the highlight ---- */
:root{--bg:#f3f5f8;--surface:#ffffff;--ink:#0f1b3a;--mute:#52607c;--line:#dde2ee;--field:#eff2f8;--accent:#d10f58;--accent-ink:#ffffff;--accent2:#0b2f66;--hi:#d4a73c;--av0:#d10f58;--av1:#0b2f66;--av2:#6b3fb0;--av3:#a8660a;--av4:#1f6b4a;--av5:#2a6fb5;--av-ink:#ffffff;--shadow:0 12px 32px -20px rgba(11,47,102,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1022;--surface:#121a33;--ink:#eef1fa;--mute:#9ba6c4;--line:#25304f;--field:#0d1429;--accent:#ff5c93;--accent-ink:#2a0014;--accent2:#7ea6ff;--hi:#e8c15a;--av0:#ff5c93;--av1:#7ea6ff;--av2:#b99bf0;--av3:#f2b64f;--av4:#6fd39b;--av5:#6cc0ff;--av-ink:#0a1022;--shadow:0 12px 32px -20px #000;color-scheme:dark}
:root:not([data-theme="light"]) .brandlogo{background:#f4f6f5;border-radius:10px;padding:4px 10px}}
:root[data-theme="dark"]{--bg:#0a1022;--surface:#121a33;--ink:#eef1fa;--mute:#9ba6c4;--line:#25304f;--field:#0d1429;--accent:#ff5c93;--accent-ink:#2a0014;--accent2:#7ea6ff;--hi:#e8c15a;--av0:#ff5c93;--av1:#7ea6ff;--av2:#b99bf0;--av3:#f2b64f;--av4:#6fd39b;--av5:#6cc0ff;--av-ink:#0a1022;--shadow:0 12px 32px -20px #000;color-scheme:dark}
:root[data-theme="dark"] .brandlogo{background:#f4f6f5;border-radius:10px;padding:4px 10px}
.brandlogo{display:block;height:38px;width:auto;max-width:100%}
.hero-copy .brandlogo{height:76px}
.bar .brandlogo{flex:none}
/* ---- flat 2D treatment: no shadows, blur, gradients or lift; depth comes from solid colour and borders ---- */
body{background-image:none}
header{backdrop-filter:none;background:var(--surface)}
.panel,.stat,.adwin,.ov-card{box-shadow:none;border-width:1.5px}
.btn:not(:disabled):hover,.btn.quiet:not(:disabled):hover{transform:none;filter:none}
.btn:not(.quiet):not(.danger):not(:disabled):hover{background:var(--accent2);color:var(--surface)}
input:focus,textarea:focus,select:focus{box-shadow:none;outline:2px solid var(--accent);outline-offset:0}
.ring.new{background:var(--accent)}
.sr{background:var(--accent)}
.sr:nth-child(2){background:var(--accent2)}.sr:nth-child(3){background:var(--hi)}.sr:nth-child(4){background:var(--accent)}
.banner{background:var(--field)}
.adbar .tag{background:var(--hi)}
@media (prefers-reduced-motion:no-preference){.hero-copy,.hero .auth{animation:none}}
/* ---- four interfaces over one app: Classic (top tabs), Studio (sidebar), Dock (bottom bar), Hub (launcher) ---- */
.uilab{font-size:12px;color:var(--mute);font-weight:600}
#uisel{width:auto;margin:0;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600}
.uipick{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:22px}
.uichip{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.uichip b{font:700 14px var(--display);letter-spacing:-.02em}.uichip span{font-size:12px;color:var(--mute)}
.uichip[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.uichip:hover{border-color:var(--accent2)}
/* Studio: dense sidebar workspace */
body[data-ui="studio"]{padding:0}
.shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;background:#0b2f66;color:#fff;padding:20px 16px 20px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:18px}
.side .brandlogo{background:#f4f6f5;border-radius:10px;padding:6px 10px;height:46px}
.side nav{flex-direction:column;overflow:visible;gap:2px;flex:none}
.side nav button{color:rgba(255,255,255,.8);text-align:left;border-radius:8px;display:flex;justify-content:space-between;align-items:center;padding:9px 12px}
.side nav button:hover{background:rgba(255,255,255,.12);color:#fff}
.side nav button[aria-current="true"]{background:#fff;color:#0b2f66}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sidefoot .lnk{color:#fff;font-weight:700}
.sidefoot .uilab{color:rgba(255,255,255,.7)}
.sidefoot .btn.quiet,.side #uisel{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.side #uisel option{color:#0f1b3a;background:#fff}
.main{min-width:0;padding:0 max(16px,env(safe-area-inset-right,0px)) 48px 28px}
.main .wrap{max-width:900px;margin:0}
body[data-ui="studio"] .panel,body[data-ui="studio"] .adwin,body[data-ui="studio"] .stat{border-radius:8px}
body[data-ui="studio"] .btn{border-radius:8px}
body[data-ui="studio"] h2{font-size:16px;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--ink);padding-bottom:8px;font-family:var(--body);font-weight:800}
@media (max-width:820px){.shell{display:block}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}.side nav{flex-direction:row;overflow-x:auto;flex:1 1 100%;order:3}.sidefoot{margin:0;flex-direction:row;flex-wrap:wrap;align-items:center;order:2}.main{padding-left:max(16px,env(safe-area-inset-left,0px))}}
/* Dock: phone-style bottom tab bar, softer and rounder */
body[data-ui="dock"]{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
body[data-ui="dock"] .wrap{max-width:560px}
body[data-ui="dock"] .panel,body[data-ui="dock"] .adwin,body[data-ui="dock"] .ov-card{border-radius:26px}
body[data-ui="dock"] .stat{border-radius:20px}
body[data-ui="dock"] h2{font-size:22px}
body[data-ui="dock"] .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.topbar .bar{max-width:560px}
.dockbar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;gap:2px;overflow:visible;flex:none;background:var(--surface);border-top:1.5px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.dockbar button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:14px;font-size:11.5px;font-weight:700;color:var(--mute)}
.dockbar button[aria-current="true"],nav.dockbar button[aria-current="true"]{background:none;color:var(--accent)}
.dockbar .dk{position:relative;display:inline-flex}
.dockbar .badge{position:absolute;top:-6px;right:-12px;margin:0}
#ov[data-kind="more"] .ov-back{display:flex;align-items:flex-end;padding-bottom:0}
#ov[data-kind="more"] .ov-card{width:100%;margin:auto auto 0;border-radius:26px 26px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.morelist{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.uirow{margin-top:14px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
/* Hub: launcher tiles, bold colour blocks */
body[data-ui="hub"] .wrap{max-width:880px}
body[data-ui="hub"] h2{font-size:30px;letter-spacing:-.04em}
nav .back{background:var(--ink);color:var(--surface);font-weight:700}
nav .crumb{font:800 15px var(--display);letter-spacing:-.03em;margin-left:6px;align-self:center}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px}
.tile{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:150px;text-align:left;padding:18px;border-radius:22px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.tile-t{font:800 20px var(--display);letter-spacing:-.03em}
.tile-d{font-size:13px;opacity:.88}
.tile-n{font:500 13px var(--mono);margin-top:6px}
.tile.t0,.tile.t5{background:var(--accent);color:var(--accent-ink)}
.tile.t1,.tile.t4{background:var(--accent2);color:var(--surface)}
.tile.t2,.tile.t7{background:var(--hi);color:#1b1500}
.tile:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.tile:focus-visible{outline-offset:3px}
.offer{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}.offer s{font-size:13px}
.adtop{max-width:880px;margin:0 auto;padding-bottom:12px}
body[data-ui="classic"] .adtop{max-width:760px}
body[data-ui="dock"] .adtop{max-width:560px}
body[data-ui="studio"] .adtop{max-width:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.dz{border:2px dashed var(--line);border-radius:14px;padding:16px;text-align:center;margin-bottom:12px;background:var(--field)}
.dz.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--field))}
.dz p{margin:0 0 10px}.dz .row{justify-content:center;margin-bottom:10px}
.adprev{border:1.5px solid var(--line);border-radius:14px;padding:10px;margin-bottom:12px}
.adprev video,.adprev img{width:100%;max-height:220px;object-fit:contain;background:var(--field);border-radius:10px;display:block;margin-bottom:8px}
table.vt{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.vt th,.vt td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.vt th{font-weight:600;color:var(--mute);white-space:nowrap}
.conn{min-width:220px}

/* service providers, nearest-first list and coordinate map */
.modes{gap:8px;margin:0 0 14px;flex-wrap:wrap}.modes .btn{flex:1 1 150px;justify-content:center}
.cmapwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cmap{width:min(100%,340px);height:auto;flex:0 0 auto}
.cm-bg{fill:var(--field);stroke:var(--line)}.cm-ring{fill:none;stroke:var(--line);stroke-dasharray:3 4}.cm-ax{stroke:var(--line)}
.cm-t{fill:var(--mute);font:700 12px var(--body)}.cm-t.sm{font-size:10px}.cm-n{fill:#fff;font:700 11px var(--body);pointer-events:none}
.cm-dot{cursor:pointer}.cm-dot circle{stroke:var(--surface);stroke-width:2}.cm-dot:hover circle,.cm-dot:focus circle,.cm-dot.on circle{stroke:var(--ink);stroke-width:3}.cm-dot:focus{outline:none}
.cm-me{fill:var(--accent);stroke:var(--surface);stroke-width:2}.cm-read{font:600 13px/1.5 var(--mono)}
.lst.hl{outline:2px solid var(--accent)}
.cm-dot.edge circle{stroke-dasharray:3 2;opacity:.8}

/* shorts */
.feedbar .btn{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:0;line-height:1.2;padding-block:9px}.feedbar small{font:500 11px var(--body);opacity:.8}
.vbox{position:relative;background:#000;border-radius:12px;overflow:hidden;margin:10px auto;max-width:380px;aspect-ratio:9/16;max-height:78vh}
.vbox video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.vplay{position:absolute;inset:0;background:none;border:0;cursor:pointer;padding:0}
.vbox.paused .vplay::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 6l10 6-10 6z'/%3E%3C/svg%3E") center/36px no-repeat}
.vmute{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(0,0,0,.62);color:#fff;border:0;border-radius:999px;padding:6px 12px;font:600 12px var(--body);cursor:pointer}

/* ===== colour themes (user choice) and appearance menu ===== */
:root[data-accent="ocean"]{--accent:#0a6c8c;--accent-ink:#fff;--accent2:#0b3a66;--av0:#0a6c8c;--av1:#0b3a66}
:root[data-accent="forest"]{--accent:#1f7a4d;--accent-ink:#fff;--accent2:#0f4d36;--av0:#1f7a4d;--av1:#0f4d36}
:root[data-accent="violet"]{--accent:#6b3fb0;--accent-ink:#fff;--accent2:#3b2a7a;--av0:#6b3fb0;--av1:#3b2a7a}
:root[data-accent="amber"]{--accent:#b45309;--accent-ink:#fff;--accent2:#7a3a06;--hi:#e0a82e;--av0:#b45309;--av1:#7a3a06}
:root[data-accent="graphite"]{--accent:#3b4658;--accent-ink:#fff;--accent2:#1d2535;--av0:#3b4658;--av1:#1d2535}
@media (prefers-color-scheme:dark){
:root[data-accent="ocean"]:not([data-theme="light"]){--accent:#49b8d9;--accent-ink:#06222c;--accent2:#7ec8e8;--av0:#49b8d9;--av1:#7ec8e8}
:root[data-accent="forest"]:not([data-theme="light"]){--accent:#5fd08f;--accent-ink:#06210f;--accent2:#8be0ad;--av0:#5fd08f;--av1:#8be0ad}
:root[data-accent="violet"]:not([data-theme="light"]){--accent:#b99bf0;--accent-ink:#1a0d36;--accent2:#d3bffa;--av0:#b99bf0;--av1:#d3bffa}
:root[data-accent="amber"]:not([data-theme="light"]){--accent:#f2b64f;--accent-ink:#2a1700;--accent2:#f7cf88;--hi:#f2b64f;--av0:#f2b64f;--av1:#f7cf88}
:root[data-accent="graphite"]:not([data-theme="light"]){--accent:#aeb8cc;--accent-ink:#10151f;--accent2:#d0d7e6;--av0:#aeb8cc;--av1:#d0d7e6}}
:root[data-accent="ocean"][data-theme="dark"]{--accent:#49b8d9;--accent-ink:#06222c;--accent2:#7ec8e8;--av0:#49b8d9;--av1:#7ec8e8}
:root[data-accent="forest"][data-theme="dark"]{--accent:#5fd08f;--accent-ink:#06210f;--accent2:#8be0ad;--av0:#5fd08f;--av1:#8be0ad}
:root[data-accent="violet"][data-theme="dark"]{--accent:#b99bf0;--accent-ink:#1a0d36;--accent2:#d3bffa;--av0:#b99bf0;--av1:#d3bffa}
:root[data-accent="amber"][data-theme="dark"]{--accent:#f2b64f;--accent-ink:#2a1700;--accent2:#f7cf88;--hi:#f2b64f;--av0:#f2b64f;--av1:#f7cf88}
:root[data-accent="graphite"][data-theme="dark"]{--accent:#aeb8cc;--accent-ink:#10151f;--accent2:#d0d7e6;--av0:#aeb8cc;--av1:#d0d7e6}
.appear{position:relative;display:inline-block}
.appear>summary{list-style:none;cursor:pointer;display:inline-flex}
.appear>summary::-webkit-details-marker{display:none}
.appearbox{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:min(290px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}
.applab{font-size:12px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px}
.appseg{display:flex;background:var(--field);border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:14px}
.appseg button{flex:1;font:inherit;font-weight:600;border:0;background:transparent;color:var(--mute);padding:7px 6px;border-radius:999px;cursor:pointer}
.appseg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.appsw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.appsw button{display:flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:13px;text-align:left;color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:10px;padding:7px 9px;cursor:pointer;min-width:0}
.appsw button[aria-pressed="true"]{border-color:var(--accent)}
.appsw i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.appear button:focus-visible,.appear summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body[data-ui="studio"] .appearbox{right:auto;left:0;top:auto;bottom:calc(100% + 8px)}
.uirow .appearbox,body[data-ui="auth"] .appearbox{position:static;margin-top:8px;width:auto;box-shadow:none}
.uirow .appear,body[data-ui="auth"] .appear{display:block}