:root{--bg:#f4f7f6;--card:#ffffff;--ink:#0f1f1c;--mut:#5b6b67;--line:#dde5e2;--acc:#0f766e;--acc2:#14b8a6;--warn:#b45309;--bad:#b91c1c;--alt:#94a3b8;--route:#0f766e;--shadow:0 8px 28px rgba(15,40,35,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1220;--card:#121a2b;--ink:#e6eef5;--mut:#93a4b8;--line:#22304a;--acc:#2dd4bf;--acc2:#5eead4;--warn:#f59e0b;--bad:#f87171;--alt:#64748b;--route:#2dd4bf;--shadow:0 8px 28px rgba(0,0,0,.5)}}
:root[data-theme="dark"]{--bg:#0b1220;--card:#121a2b;--ink:#e6eef5;--mut:#93a4b8;--line:#22304a;--acc:#2dd4bf;--acc2:#5eead4;--warn:#f59e0b;--bad:#f87171;--alt:#64748b;--route:#2dd4bf;--shadow:0 8px 28px rgba(0,0,0,.5)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Helvetica,Arial,sans-serif;overflow:hidden}
#map{position:fixed;inset:0}
.card{background:var(--card);color:var(--ink);border-radius:16px;box-shadow:var(--shadow)}
#panel{position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;width:min(380px,calc(100vw - 20px));z-index:5;padding:10px 12px;max-height:calc(100vh - 20px);overflow:auto}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{display:flex;align-items:center;gap:7px;font-size:17px}.brand img{border-radius:7px}
.beta{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.tools{display:flex;gap:5px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 10px;font-weight:700;font-size:13px;cursor:pointer;min-height:32px}
.link{border:0;background:none;color:var(--acc);font-weight:700;cursor:pointer;padding:6px 2px;font-size:13.5px}
.row{display:flex;align-items:center}.gap{gap:12px;flex-wrap:wrap;margin:2px 0 6px}
.stop{position:relative;display:flex;align-items:center;gap:6px;margin-top:8px}
.stop .dot{width:22px;height:22px;border-radius:50%;flex:0 0 22px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--acc)}
.stop .dot.s{background:#16a34a}.stop .dot.e{background:#dc2626}
.stop input{flex:1;min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:var(--bg);color:var(--ink)}
.stop input:focus{outline:2px solid var(--acc2);outline-offset:0}
.stop .x{border:0;background:none;color:var(--mut);font-size:18px;cursor:pointer;width:28px}
.sugg{position:absolute;left:28px;right:0;top:44px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:20;max-height:300px;overflow:auto}
.sugg button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);padding:9px 11px;cursor:pointer;border-bottom:1px solid var(--line)}
.sugg button:hover,.sugg button:focus{background:var(--bg)}
.sugg small{display:block;color:var(--mut);font-size:12px}
.sugg .note{padding:9px 11px;color:var(--warn);font-size:13px}
.seg{display:flex;background:var(--bg);border-radius:999px;padding:3px;margin:4px 0 8px;border:1px solid var(--line)}
.seg button{flex:1;border:0;background:none;color:var(--mut);padding:8px;border-radius:999px;font-weight:700;cursor:pointer;font-size:14px}
.seg button.on{background:var(--acc);color:#fff}
:root[data-theme="dark"] .seg button.on{color:#06201d}
.opts{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:13.5px;margin-bottom:8px}
.opts select{padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.go{width:100%;border:0;border-radius:12px;background:var(--acc);color:#fff;padding:12px;font-size:16px;font-weight:800;cursor:pointer}
.go:disabled{opacity:.6}
.go.small{width:auto;padding:10px 16px;font-size:15px}
#msg{font-size:13px;color:var(--mut);margin-top:6px;min-height:1px}
#msg.err{color:var(--bad)}
#sheet{position:fixed;left:10px;right:10px;bottom:calc(28px + env(safe-area-inset-bottom));z-index:6;height:48vh;max-height:48vh;display:flex;flex-direction:column;padding:6px 12px 10px}
@media (min-width:900px){#sheet{left:auto;right:10px;top:10px;bottom:34px;width:400px;max-height:none}}
.hidden{display:none!important}
.grab{width:42px;height:5px;border-radius:9px;background:var(--line);margin:2px auto 6px;cursor:pointer}
#alts{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.alt{flex:0 0 auto;border:1px solid var(--line);border-radius:12px;padding:7px 10px;background:var(--bg);color:var(--ink);cursor:pointer;text-align:left;min-width:120px}
.alt.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.alt b{font-size:16px}.alt small{display:block;color:var(--mut)}
.tabs{flex:0 0 auto;display:flex;gap:2px;border-bottom:1px solid var(--line);margin:6px 0 4px;overflow-x:auto}
.tabs button{border:0;background:none;color:var(--mut);padding:8px 9px;font-weight:700;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;font-size:13.5px}
.tabs button.on{color:var(--acc);border-bottom-color:var(--acc)}
#tabBody{overflow:auto;flex:1;font-size:14px;min-height:60px}
.li{display:flex;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.li .ic{width:26px;text-align:center;font-size:17px;flex:0 0 26px}
.li .mt{color:var(--mut);font-size:12.5px}
.li .rt{margin-left:auto;text-align:right;white-space:nowrap;font-weight:700}
.note{color:var(--mut);font-size:12.5px;padding:6px 2px}
.warn{color:var(--warn)}
.tot{display:flex;justify-content:space-between;font-weight:800;padding:8px 2px;font-size:15px}
.grp h4{margin:10px 0 2px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.navbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--line);margin-top:6px}
.voice{font-size:13.5px}
#navHud{position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;z-index:7;background:var(--acc);color:#fff;border-radius:16px;padding:12px 14px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}
:root[data-theme="dark"] #navHud{color:#06201d}
#hudIcon{font-size:34px;width:44px;text-align:center}
#hudText{font-size:18px;font-weight:800}#hudSub{font-size:13px;opacity:.9}
#navHud .chip{margin-left:auto}
#attrib{position:fixed;right:6px;bottom:calc(4px + env(safe-area-inset-bottom));z-index:4;font-size:11px;background:color-mix(in srgb,var(--card) 85%,transparent);color:var(--mut);padding:2px 7px;border-radius:7px;max-width:calc(100vw - 12px)}
#attrib a{color:var(--mut)}
.share input{width:100%;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font-size:13px}
.maplibregl-ctrl-top-right{top:calc(env(safe-area-inset-top))}
@media (max-width:899px){.maplibregl-ctrl-top-right{display:none}.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{display:none}#attrib{font-size:10.5px}}
/* drive view (2D/3D) — 30 Oct 2026 */
#hudIcon{font-size:34px;width:64px;height:64px;flex:0 0 64px;display:grid;place-items:center}
#hudIcon svg{display:block}
.hudMain{min-width:0;flex:1}
#hudDist{font-size:30px;font-weight:900;line-height:1.05;letter-spacing:-.5px}
#hudText{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#hudSub:empty{display:none}
.fab{width:48px;height:48px;border-radius:50%;border:0;background:var(--card);color:var(--ink);box-shadow:var(--shadow);font:800 15px/1 inherit;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.fab.wide{width:auto;border-radius:999px;padding:0 18px;font-size:15px}
#navCtl{position:fixed;right:12px;top:max(calc(env(safe-area-inset-top) + 175px),36vh);z-index:7;display:flex;flex-direction:column;gap:10px}
#btnView{font-size:16px;letter-spacing:.5px;background:var(--acc);color:#fff}
#btnRecenter{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));z-index:8;height:46px;background:#2563eb;color:#fff}
#navSpeed{position:fixed;left:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:7;width:62px;height:62px;border-radius:50%;background:var(--card);color:var(--ink);border:4px solid #334155;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
#navSpeed b{font-size:22px;font-weight:900}#navSpeed small{font-size:10px;color:var(--mut);margin-top:2px}
#navStrip{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:7;background:var(--card);color:var(--ink);border-radius:16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:6px;padding:8px 8px 8px 14px;min-height:64px}
#navStrip .eta{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
#navStrip .eta b{font-size:20px;font-weight:900;white-space:nowrap}#navStrip .eta small{font-size:11.5px;color:var(--mut)}
#navStrip .eta:first-child b{color:var(--acc)}
#navStrip .fab{box-shadow:none;background:var(--bg);width:44px;height:44px}
.navmode #panel{display:none}
.navmode:not(.navsheet) #sheet{display:none!important}
.navmode #sheet{bottom:calc(84px + env(safe-area-inset-bottom));height:40vh;max-height:40vh}
.navmode #attrib{bottom:calc(80px + env(safe-area-inset-bottom));right:auto;left:84px;font-size:10px;opacity:.8;white-space:nowrap;padding:1px 6px}
.navmode #attrib span,.navmode #attrib .pv-foot,.navmode #attrib a[href="privacy.html"]{display:none}
.navmode .maplibregl-ctrl-top-right,.navmode .maplibregl-ctrl-bottom-left{display:none}
.puck{width:46px;height:46px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
@media (min-width:900px){#navStrip{left:auto;width:440px}.navmode #sheet{top:auto;height:50vh}}
/* night drive: after Maghrib or system dark */
html.night #navStrip,html.night .fab,html.night #navSpeed{background:#121a2b;color:#e6eef5}
html.night #navStrip .fab{background:#0b1220}
html.night #navSpeed{border-color:#64748b}
html.night #navSpeed small,html.night #navStrip .eta small{color:#93a4b8}
html.night #navStrip .eta:first-child b{color:#2dd4bf}
html.night #btnView{background:#0f766e;color:#fff}
:root.night #navHud,:root.night[data-theme] #navHud{background:#0f3d38;color:#fff}
/* prayer chip, reminders banner, qibla finder — 30 Oct 2026 */
#chipRow{position:fixed;left:10px;bottom:calc(36px + env(safe-area-inset-bottom));z-index:5;display:flex;gap:6px;max-width:calc(100vw - 84px)}
.pchip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 11px;font:700 13.5px/1.2 inherit;box-shadow:var(--shadow);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:34px}
#prayChip{flex:0 1 auto;min-width:0}#mosqueChip{flex:0 0 auto}
#mosqueCard{position:fixed;left:10px;bottom:calc(82px + env(safe-area-inset-bottom));z-index:8;width:min(400px,calc(100vw - 20px));max-height:52vh;overflow:auto;padding:4px 12px 8px}
.mqi{display:flex;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}.mqi .ic{font-size:17px}.mqn{flex:1;min-width:0}.mqn .mt{color:var(--mut);font-size:12.5px}
.mqb{display:flex;gap:6px;align-items:center;flex:0 0 auto}.mqb .go.small{padding:7px 12px;font-size:13.5px}
.navbar{flex-wrap:wrap}#optVoiceKind,#optVoiceStyle{padding:5px 6px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:13px;max-width:150px}
.pchip.soon{border-color:var(--acc);color:var(--acc)}
.pchip.arr{background:#fef3c7;color:#78350f;border-color:#d97706}
#btnQibla{position:fixed;right:12px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:5;font-size:22px}
@media (max-width:899px){#sheet:not(.hidden)~#chipRow,#sheet:not(.hidden)~#btnQibla{bottom:calc(48vh + 38px + env(safe-area-inset-bottom))}#sheet:not(.hidden)~#mosqueCard{bottom:calc(48vh + 84px + env(safe-area-inset-bottom));max-height:40vh}}
@media (min-width:900px){#chipRow{bottom:calc(40px + env(safe-area-inset-bottom))}#sheet:not(.hidden)~#btnQibla{right:422px}}
.navmode #btnQibla,.navmode.navsheet #chipRow{display:none}
.navmode #chipRow,.navmode #sheet:not(.hidden)~#chipRow{left:auto;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100vw - 100px)}
.navmode .pchip{font-size:12.5px;padding:6px 10px}
.navmode #mosqueCard{bottom:calc(132px + env(safe-area-inset-bottom))}
#prayBanner{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top));z-index:9;width:min(520px,calc(100vw - 20px));background:#0f3d38;color:#fff;border-radius:14px;box-shadow:var(--shadow);padding:10px 10px 10px 14px;display:flex;gap:8px;align-items:center;font-weight:700}
.navmode #prayBanner{top:calc(150px + env(safe-area-inset-top))}
#prayBanner .pbt{flex:1;min-width:0}
#prayBanner .chip{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.35)}
#sheet.ponly #alts,#sheet.ponly .tabs,#sheet.ponly .navbar{display:none}
.pextras h4,.pmq h4,#mosqueCard h4,.qhead b{margin:10px 0 4px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prow{display:flex;align-items:baseline;gap:8px;padding:6px 8px;border-radius:9px}
.prow b{margin-left:auto;font-variant-numeric:tabular-nums}
.prow small{color:var(--mut)}
.prow.past{opacity:.55}
.prow.next{background:color-mix(in srgb,var(--acc) 14%,transparent);box-shadow:inset 3px 0 0 var(--acc)}
.prow.next span,.prow.next b{color:var(--acc);font-weight:800}
.prem select{padding:5px 7px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.qibla{border-top:1px solid var(--line);margin-top:10px;padding-top:4px}
.qhead{display:flex;align-items:center;justify-content:space-between}
.qstats{display:flex;gap:10px}
.qstats>div{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column}
.qstats b{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}.qstats small{color:var(--mut);font-size:12px}
.qwrap{display:flex;justify-content:center;padding:6px 0;color:var(--ink)}
.qdial .qrot{transition:transform .12s linear;transform-origin:0 0}
.qdial .qidx{fill:var(--mut)}
.qibla.facing .qidx{fill:#16a34a}
.qibla.facing .qwrap{color:#16a34a}
.qstate{text-align:center;font-weight:800;font-size:15px;min-height:22px}
.qstate.ok{color:#16a34a;font-size:18px}
.qstate.warn{font-weight:600;font-size:13px}
.qbtns{justify-content:center}
/* day / night theme for the whole app — 30 Oct 2026. Contrast: text on --acc buttons is dark in night mode (white on #2dd4bf fails AA). */
body,.card,.pchip,.fab,.chip,.seg,.stop input,#navStrip,#navSpeed,#mosqueCard,.qstats>div{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
:root[data-theme="dark"] .go,:root[data-theme="dark"] #btnView,:root[data-theme="dark"] .mqb .go.small{color:#06201d}
:root[data-theme="dark"] .stop .dot:not(.s):not(.e){color:#06201d}
:root.night[data-theme="dark"] #btnView{color:#fff}
.qibla.facing .qidx{fill:#15803d}.qibla.facing .qwrap,.qstate.ok{color:#15803d}
:root[data-theme="dark"] .qibla.facing .qidx{fill:#4ade80}:root[data-theme="dark"] .qibla.facing .qwrap,:root[data-theme="dark"] .qstate.ok{color:#4ade80}
:root[data-theme="dark"] .qdial rect[fill="#111"]{stroke:#d4a017;stroke-width:1.2}
:root[data-theme="dark"] .pchip.arr{background:#451a03;color:#fde68a;border-color:#b45309}
:root{color-scheme:light}:root[data-theme="dark"]{color-scheme:dark}
/* road reports — 30 Oct 2026: one big thumb button bottom-right in the drive view, 2x4 grid, prompts */
#btnReport{position:fixed;right:12px;bottom:calc(132px + env(safe-area-inset-bottom));z-index:8;width:64px;height:64px;background:#ea580c;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:26px;line-height:1}
#btnReport small{font-size:11px;font-weight:800}
#rpGrid{position:fixed;left:8px;right:8px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:12;padding:10px}
@media (min-width:900px){#rpGrid{left:auto;width:460px}}
.rpg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rpb{min-height:68px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:800 16px/1.15 inherit;display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;text-align:left}
.rpb span{font-size:28px;flex:0 0 auto}
.rpb.rpx{color:var(--mut)}
.rpnote{display:flex;gap:8px;margin-top:8px}.rpnote input{flex:1;min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:var(--bg);color:var(--ink)}
#rpAsk{position:fixed;left:8px;right:8px;top:calc(150px + env(safe-area-inset-top));z-index:11;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (min-width:900px){#rpAsk{left:auto;width:460px}}
#rpAsk .rpq{flex:1 1 100%;font-weight:800;font-size:16px}
#rpAsk .go.small,#rpAsk .chip.big{flex:1;min-height:52px;font-size:16px}
#rpToast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(150px + env(safe-area-inset-bottom));z-index:13;background:#111827;color:#fff;border-radius:999px;padding:10px 16px;font-weight:700;max-width:calc(100vw - 24px);box-shadow:var(--shadow);text-align:center}
.rpm{width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid #ea580c;display:grid;place-items:center;font-size:18px;box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:pointer}
.rpm-accident,.rpm-closure{border-color:#dc2626}.rpm-flood{border-color:#2563eb}.rpm-note{border-color:#64748b}
/* change destination / add stop — 30 Oct 2026 */
#destSheet{position:fixed;left:8px;right:8px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:12;padding:10px 12px;max-height:70vh;overflow:auto}
@media (min-width:900px){#destSheet{left:auto;width:440px}}
body:not(.navmode) #destSheet{bottom:calc(20px + env(safe-area-inset-bottom))}
.dseg{flex:1;margin:0}.dseg button{padding:12px 8px;font-size:15px}
#dsQ{width:100%;padding:14px 12px;border:1px solid var(--line);border-radius:12px;font-size:17px;background:var(--bg);color:var(--ink);margin:8px 0}
.dkeep{display:flex;gap:8px;align-items:center;font-size:15px;padding:6px 2px;min-height:40px}
.dres{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);padding:12px 4px;font-size:16px;cursor:pointer;min-height:52px}
.dres small{display:block;color:var(--mut);font-size:13px}
.lpop{display:flex;flex-direction:column;gap:8px;padding-top:6px;color:#0f1f1c}.lpop .go.small,.lpop .chip.big{min-height:48px;font-size:15px;width:100%}
/* traffic + settings — 30 Oct 2026 */
#settings{margin-top:8px;font-size:14px}#settings summary{cursor:pointer;font-weight:700;color:var(--acc);padding:6px 0;min-height:32px}
.set{display:flex;gap:8px;align-items:flex-start;padding:6px 0;min-height:36px}.set input{margin-top:3px;flex:0 0 auto}
#shareNotice{position:fixed;left:8px;right:8px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:14;padding:12px 14px;font-size:14px}
@media (min-width:900px){#shareNotice{left:auto;width:460px}}
#shareNotice p{margin:0 0 10px}#shareNotice .go.small,#shareNotice .chip.big{flex:1;min-height:48px;font-size:15px}
.alt small.tf{font-weight:700}.tf-free{color:#15803d}.tf-moderate{color:var(--warn)}.tf-heavy{color:var(--bad)}
:root[data-theme="dark"] .tf-free{color:#4ade80}
/* device memory — 30 Oct 2026 */
.srow{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}.srow>button:first-child{flex:1;min-width:0;border-bottom:0!important}
.svb{display:flex;align-items:center;gap:2px;padding:0 4px;flex:0 0 auto}
.svb button,.sugg .svb button{display:grid!important;place-items:center;width:34px!important;height:34px;padding:0!important;border:1px solid var(--line)!important;border-radius:9px;background:var(--card);color:var(--ink);font-size:15px;cursor:pointer}
.svrow{display:flex;justify-content:center;padding-top:4px}
.svchips{display:flex;flex-wrap:wrap;gap:6px;padding:8px}
.svc,.sugg .svc{display:inline-flex!important;width:auto!important;align-items:center;gap:6px;border:1px solid var(--line)!important;border-radius:999px;background:var(--bg);color:var(--ink);padding:8px 12px!important;font-size:14px;font-weight:600;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:40px}
#resumeCard{position:fixed;left:8px;right:8px;bottom:calc(30px + env(safe-area-inset-bottom));z-index:14;padding:12px 14px}
@media (min-width:900px){#resumeCard{left:auto;width:420px}}
#resumeCard p{margin:0 0 10px;font-weight:700;font-size:16px}#resumeCard .go.small,#resumeCard .chip.big{flex:1;min-height:50px;font-size:16px}
#devPanel{position:fixed;left:8px;right:8px;top:calc(10px + env(safe-area-inset-top));bottom:calc(10px + env(safe-area-inset-bottom));z-index:15;padding:10px 14px;overflow:auto}
@media (min-width:900px){#devPanel{left:auto;width:440px}}
#devPanel h4{margin:14px 0 4px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.dvr{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}.dvn{flex:1;min-width:0}.dvn small{display:block;color:var(--mut)}
#devPanel textarea{width:100%;margin:6px 0;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:12px/1.3 ui-monospace,monospace}
.dvdel{margin:18px 0 6px}.chip.danger{color:var(--bad);border-color:var(--bad);min-height:46px;width:100%}
/* public-release copy: info buttons, short voice help — 30 Oct 2026 */
.info{border:0;background:none;color:var(--mut);font-size:15px;padding:0 4px;cursor:pointer;min-width:28px;min-height:28px;vertical-align:middle}
#voiceHint details summary{cursor:pointer;color:var(--acc);font-weight:700}
.walink{display:inline-block;color:#0b6e63;font-weight:800;text-decoration:none;padding:8px 0}:root[data-theme="dark"] .walink{color:#25D366}