/* ===== Shared layout + component overrides (skin-agnostic) ===== */
.phone,.desk{background:var(--page)}
.pad{padding:0 20px}.gap4{height:4px}.gap6{height:6px}.gap10{height:10px}.gap12{height:12px}.gap14{height:14px}.gap18{height:18px}
.chip,.pill,.tab,.seg>div,.vsel,.ddi{font:var(--label-font);text-transform:var(--label-tt);letter-spacing:var(--label-ls)}
.ctl .hd>span:first-child,.disc .dh>span:first-child{font:var(--hd-font);text-transform:var(--hd-tt);letter-spacing:var(--hd-ls)}
.glass{background:var(--glass);border-color:var(--glass-line)}
.fs{width:40px;height:40px;border-radius:var(--r-btn);display:grid;place-items:center}
.cap{text-shadow:var(--cap-shadow)}
.transport .pp{border:var(--play-border)}
.mpp{width:44px;height:44px;border-radius:var(--r-play);display:grid;place-items:center;background:var(--play-bg);color:var(--play-ink);border:var(--play-border);flex:none}
.logo{font:var(--logo-font);text-transform:var(--logo-tt);letter-spacing:var(--logo-ls)}
.sectionh h3{font:var(--h3-font);text-transform:var(--h3-tt);letter-spacing:var(--h3-ls)}
.toggle.sm{width:38px;height:22px}.toggle.sm:after{width:16px;height:16px}.toggle.sm.on:after{left:19px}
.stagewrap{padding:0 var(--stage-inset)}
.phone .cap{font:var(--cap-font)}
/* Listening dock (collapsed) */
.dock{position:absolute;left:0;right:0;bottom:0;padding:7px 12px 28px;background:var(--dock-bg);border-top:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:0 -12px 34px rgba(0,0,0,.28);z-index:30;backdrop-filter:blur(20px)}
.grab{width:40px;height:5px;border-radius:3px;background:var(--muted);opacity:.45;margin:0 auto 7px}
.readouts{display:flex;align-items:stretch;gap:6px}
.readouts .open{width:48px;flex:none;border-radius:var(--r-btn);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.readouts .ro{flex:1;min-width:0;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--surface-2);padding:8px 8px 8px;display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:50px}
.ro i{font:var(--label-font);font-size:10px;font-style:normal;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:4px;white-space:nowrap}
.ro b{font:700 15px/1 var(--num);color:var(--ink);white-space:nowrap}
.ro .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.ro.hot{border-color:var(--accent);background:var(--accent-soft)}
/* Sheet (expanded dock) */
.sheet{position:absolute;left:0;right:0;bottom:0;top:var(--sheet-top,210px);background:var(--sheet-bg);border-radius:24px 24px 0 0;padding:7px 18px 30px;box-shadow:0 -20px 50px rgba(0,0,0,.4);z-index:30;border-top:1px solid var(--line);overflow:hidden;backdrop-filter:blur(24px)}
.sheethd{display:flex;justify-content:space-between;align-items:center;padding:0 0 8px}.sheethd b{font:var(--h3-font);letter-spacing:var(--h3-ls);text-transform:var(--h3-tt)}
.sheetnow{display:flex;align-items:center;gap:4px;padding:5px 5px 5px 12px;border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:10px;background:var(--surface-2)}
.sheetnow .tx{flex:1;min-width:0}.sheetnow b{display:block;font:600 12.5px/1.2 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sheetnow span{display:block;font:500 11px/1.2 var(--num);color:var(--muted);margin-top:3px}
.vtabs2{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:var(--r-tabs);background:var(--surface-2);border:1px solid var(--line)}
.vtab{border-radius:calc(var(--r-tabs) - 4px);padding:8px 8px 9px;display:flex;flex-direction:column;gap:4px;color:var(--muted);min-height:50px;justify-content:center}
.vtab b{font:var(--label-font);display:flex;align-items:center;gap:5px;color:inherit}
.vtab span{font:500 10.5px/1.2 var(--num);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtab.on{background:var(--tab-on);color:var(--tab-on-ink);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.sheetbody{position:absolute;left:18px;right:18px;top:var(--body-top,200px);bottom:0;overflow:hidden}
.sheetbody .inner{padding-bottom:40px}
.sheetbody.scrolled .inner{margin-top:var(--scroll,-232px)}
.sheetbody.scrolled:before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:linear-gradient(var(--sheet-bg),transparent);z-index:2}
.sheetbody:after{content:"";position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(transparent,var(--sheet-bg))}
.dim{position:absolute;inset:0;background:rgba(0,0,0,.42);z-index:25}
.dd{position:absolute;left:20px;width:260px;background:var(--sheet-bg);border:1px solid var(--line);border-radius:var(--r-card);padding:6px;z-index:35;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.ddi{height:44px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:calc(var(--r-card) - 6px);color:var(--ink)}.ddi.on{background:var(--accent-soft);color:var(--accent)}
.ddi small{margin-left:auto;font:500 11px/1 var(--ui);color:var(--muted);text-transform:none;letter-spacing:0}
.fadeb{position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(transparent,var(--bg));z-index:10}
/* Home */
.feat{position:relative;border-radius:var(--r-card);overflow:hidden;height:236px;box-shadow:var(--stage-shadow)}
.feat>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.8))}
.feat .ft{position:absolute;left:16px;right:16px;bottom:68px;z-index:2;color:#fff}.feat .ft b{display:block;font:600 16px/1.2 var(--ui);margin:8px 0 4px}.feat .ft span{font:500 11.5px/1.2 var(--ui);opacity:.85}
.feat .badge{background:rgba(255,255,255,.22);color:#fff}
.feat .fa{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;gap:6px;align-items:center}
.feat .fa .mpp{margin-left:auto;width:48px;height:48px}
.mini{color:var(--mini-ink);--ink:var(--mini-ink);--muted:var(--mini-muted)}
.mini .ibtn{color:var(--mini-ink)}
/* Desktop */
.dhead{height:68px;display:flex;align-items:center;gap:36px;padding:0 32px;border-bottom:1px solid var(--line)}
.dnav{display:flex;gap:6px}.dnav span{height:38px;padding:0 14px;display:flex;align-items:center;border-radius:var(--r-pill);font:var(--label-font);font-size:14px;text-transform:var(--label-tt);letter-spacing:var(--label-ls);color:var(--muted)}.dnav span.on{color:var(--tab-on-ink);background:var(--tab-on)}
.dsearch{margin-left:auto;width:320px;height:40px;border:1px solid var(--line);border-radius:var(--r-pill);display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--muted);font:500 13.5px/1 var(--ui);background:var(--surface-2)}
.dgrid{display:grid;grid-template-columns:600px 1fr 380px;gap:24px;padding:24px 32px;height:832px}
.dpanel{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-card);padding:16px 18px;overflow:hidden;position:relative}
.dpanel.set{background:var(--sheet-bg)}
.desk .titlerow h1{font-size:calc(1em + 0px)}
.desk .cap{font:var(--cap-font);font-size:27px;left:40px;right:40px}
.desk .dcolstage .stage{border-radius:max(var(--r-stage),0px)}
/* Spoken name */
.field{height:50px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:600 16px/1 var(--ui)}
.field.focus{border:2px solid var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field.locked{background:var(--surface-2);color:var(--muted)}
.field .cnt{font:600 12px/1 var(--num);color:var(--muted);display:flex;gap:5px;align-items:center}
.caret{display:inline-block;width:2px;height:19px;background:var(--accent);margin-left:2px;vertical-align:-3px}
.lockedsel{background:var(--surface-2);color:var(--muted)}
.tip{display:flex;gap:10px;padding:12px;border-radius:var(--r-card);background:var(--accent-soft);border:1px solid var(--line);font:500 12px/1.4 var(--ui);color:var(--ink);margin-top:10px}.tip .ic{color:var(--accent);margin-top:1px}
.att{display:flex;align-items:center;gap:10px;font:600 12.5px/1 var(--ui);color:var(--muted)}
.att .dots{display:flex;gap:5px}.att .dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--accent)}.att .dots i.on{background:var(--accent)}
.bigbtn{height:50px;border-radius:var(--r-btn);background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;gap:8px;font:var(--label-font);font-size:14px;text-transform:var(--label-tt);letter-spacing:var(--label-ls)}
.bigbtn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.hd2{font:var(--hd-font);text-transform:var(--hd-tt);letter-spacing:var(--hd-ls);margin:8px 0 8px}
.pcard{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface)}
.pcard b{display:block;font:600 15px/1.2 var(--ui)}.pcard span{display:block;font:500 11.5px/1.2 var(--num);color:var(--muted);margin-top:4px}
.wave{display:flex;align-items:center;gap:3px;height:30px;margin-top:4px}.wave i{width:3px;border-radius:2px;background:var(--accent)}
.okhead{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-card);background:var(--accent-soft);border:1px solid var(--accent);margin:4px 0 6px}
.okhead>.ic{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.okhead b{display:block;font:700 14px/1.2 var(--ui)}.okhead span{display:block;font:500 12px/1.3 var(--ui);color:var(--muted)}
/* Help guide (proposed) */
.gmark{display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);flex:none}
.ghead{display:flex;align-items:center;gap:10px;padding:2px 0 12px;border-bottom:1px solid var(--line)}
.ghead b{display:block;font:var(--h3-font);text-transform:var(--h3-tt);letter-spacing:var(--h3-ls)}.ghead span{display:block;font:500 11px/1.2 var(--ui);color:var(--muted);margin-top:3px}
.ghead .prop{font:700 9.5px/1.15 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px dashed var(--accent);border-radius:6px;padding:4px 6px;width:86px;text-align:center;margin:0}
.gscroll{position:absolute;left:18px;right:18px;top:78px;bottom:110px;overflow:hidden;padding-top:12px}
.bub.me{margin-left:auto;max-width:78%;width:max-content;padding:10px 14px;border-radius:18px 18px 4px 18px;background:var(--tab-on);color:var(--tab-on-ink);font:500 13px/1.35 var(--ui);border:1px solid var(--line)}
.ans{display:flex;gap:10px;margin-top:12px}.ans p{font:500 13.5px/1.45 var(--ui);color:var(--ink)}
.srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.srcs span{display:flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);font:600 11px/1 var(--ui);color:var(--muted)}
.apply{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.apply span{height:38px;padding:0 14px;border-radius:var(--r-pill);display:flex;align-items:center;gap:6px;background:var(--accent);color:var(--accent-ink);font:var(--label-font);text-transform:var(--label-tt);letter-spacing:var(--label-ls)}
.apply span.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.qq{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:16px}.qq:before{content:"Suggested questions";font:600 10.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.qq span{padding:9px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font:600 12.5px/1.2 var(--ui);color:var(--ink)}
.gfoot{position:absolute;left:18px;right:18px;bottom:24px}
.ginput{height:52px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 16px;font:500 13px/1 var(--ui);color:var(--muted)}
.gpanel{background:var(--sheet-bg)}
.gpanel .gscroll{padding-top:4px}
.pill.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.fsx .pp,.feat .mpp{background:var(--fs-play-bg);color:var(--fs-play-ink);border:0}
.cap{background:var(--cap-scrim);padding:14px 10px}
.gpanel .gscroll{top:84px;bottom:84px}
.gscroll:after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(transparent,var(--sheet-bg))}
.gpanel .ghead b{font-size:min(20px,1em)}
.gpanel .ghead .prop{width:78px}
.dd{width:310px}.ddi span,.ddi small{white-space:nowrap}