:root{
  --bg:#06070d; --bg2:#0b0d17; --panel:#10131f; --panel2:#151a2a; --line:#20263a; --line2:#2b3350;
  --text:#e9ecf5; --muted:#8d95ad; --faint:#5d6580;
  --violet:#8b6cff; --cyan:#34d6f5; --pink:#f472d0; --ok:#3ddc97; --warn:#ffb547; --bad:#ff6b81;
  --accent:linear-gradient(135deg,#8b6cff 0%,#34d6f5 100%);
  --r:16px; --r-sm:11px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:16px/1.55 var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}
#bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 600px at 15% -10%,rgba(139,108,255,.13),transparent 60%),
  radial-gradient(800px 600px at 110% 30%,rgba(52,214,245,.08),transparent 60%),
  radial-gradient(700px 500px at 40% 120%,rgba(244,114,208,.07),transparent 60%),var(--bg)}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:22px;height:22px;flex:none}
input,textarea,select{font:inherit;color:var(--text)}
.muted{color:var(--muted)} .err{color:var(--bad);min-height:1.4em;margin:.4rem 0 0;font-size:.92rem}
.hint{color:var(--muted);font-size:.95rem;margin:.2rem 0 1.2rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.8rem 1.2rem;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);font-weight:600;transition:transform .12s,filter .2s}
.btn:active{transform:scale(.97)} .btn svg{width:18px;height:18px}
.btn.primary{background:var(--accent);border:0;color:#fff;box-shadow:0 6px 24px rgba(108,92,255,.35)}
.btn.sm{padding:.5rem .9rem;font-size:.92rem}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:rgba(255,107,129,.35);background:transparent}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--muted);transition:background .2s,color .2s}
.icon-btn:hover{background:var(--panel2);color:var(--text)}

/* login */
.screen{position:fixed;inset:0;display:grid;place-items:center;padding:24px}
.login-card{width:min(380px,100%);text-align:center}
.login-card .orb{width:170px;height:170px;margin:0 auto -6px;display:block}
.login-card h1{font-size:2.2rem;margin:.2rem 0 0;letter-spacing:-.02em}
.login-card form{display:grid;gap:.7rem;margin-top:1.6rem}
.login-card input{padding:.95rem 1.1rem;border-radius:14px;background:var(--panel);border:1px solid var(--line2);outline:none}
.login-card input:focus{border-color:var(--violet)}
.ms-btn{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.6rem;text-decoration:none}
.ms-btn svg{width:20px;height:20px;flex:none}
#login-pw-toggle{margin:.4rem auto 0}
#login-ms-err:empty{display:none}

/* layout */
#app{position:fixed;inset:0;display:flex}
#rail{width:270px;flex:none;display:flex;flex-direction:column;gap:2px;padding:18px 12px 14px;border-right:1px solid var(--line);background:rgba(10,12,22,.6);backdrop-filter:blur(20px)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.25rem;padding:4px 12px 18px;letter-spacing:-.01em}
.brand-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--violet)}
.nav-btn{display:flex;align-items:center;gap:.8rem;padding:.7rem 12px;border-radius:12px;color:var(--muted);font-weight:550;position:relative;text-align:left}
.nav-btn:hover{background:var(--panel);color:var(--text)}
.nav-btn.active{background:var(--panel2);color:var(--text)}
.nav-btn.me{margin-top:auto}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#fff;flex:none}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--pink);color:#fff;font-size:.72rem;display:grid;place-items:center;margin-left:auto}
.rail-section{margin-top:18px;display:flex;flex-direction:column;min-height:0;flex:1}
.rail-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 12px;color:var(--faint);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.conv-list{overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding-top:4px}
.conv-item{display:flex;align-items:center;padding:.55rem 12px;border-radius:10px;color:var(--muted);font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;width:100%}
.conv-item span{overflow:hidden;text-overflow:ellipsis}
.conv-item:hover{background:var(--panel);color:var(--text)}
.conv-item.active{background:var(--panel2);color:var(--text)}
#main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.view{position:absolute;inset:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:8px;padding:calc(10px + var(--safe-t)) 16px 10px;min-height:62px}
.topbar-title{flex:1;font-weight:650;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pad{padding:4px 20px 120px;overflow-y:auto;flex:1;max-width:860px;width:100%;margin:0 auto}
.mobile-only{display:none}

/* chat */
#scroller{flex:1;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
#welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4vh 20px 20px}
#welcome h2{font-size:clamp(1.6rem,4vw,2.3rem);margin:.4rem 0 .2rem;letter-spacing:-.02em;font-weight:700}
.orb-wrap{display:grid;place-items:center;border-radius:50%;position:relative}
.orb-wrap.big{width:min(280px,62vw);height:min(280px,62vw)}
.orb-wrap.big:active{transform:scale(.97)}
.orb-wrap.mini{width:46px;height:46px;flex:none}
.orb-wrap.huge{width:min(420px,78vw);height:min(420px,78vw)}
.orb{width:100%;height:100%;display:block}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.4rem;max-width:640px}
.chip{padding:.6rem 1rem;border-radius:999px;background:var(--panel);border:1px solid var(--line2);color:var(--text);font-size:.93rem;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--violet);background:var(--panel2)}
#messages{max-width:820px;margin:0 auto;padding:8px 20px 24px;display:flex;flex-direction:column;gap:22px}
.msg{display:flex;flex-direction:column;gap:6px;animation:rise .25s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.user{align-items:flex-end}
.msg.user .bubble{background:var(--panel2);border:1px solid var(--line2);padding:.7rem 1rem;border-radius:18px 18px 6px 18px;max-width:85%;white-space:pre-wrap;word-wrap:break-word}
.msg.assistant .bubble{max-width:100%;word-wrap:break-word}
.att{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:.3rem .7rem;border-radius:999px}
.att svg{width:16px;height:16px}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p{margin:.55em 0}.md ul,.md ol{margin:.5em 0;padding-left:1.4em}.md li{margin:.25em 0}
.md h1,.md h2,.md h3{font-size:1.08em;margin:1.1em 0 .4em;letter-spacing:-.01em}
.md a{color:var(--cyan);text-decoration:none}.md a:hover{text-decoration:underline}
.md code{background:var(--panel2);padding:.1em .35em;border-radius:6px;font-size:.9em}
.md pre{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;overflow-x:auto}
.md pre code{background:none;padding:0}
.md table{border-collapse:collapse;display:block;overflow-x:auto;margin:.7em 0;font-size:.94em}
.md th,.md td{border-bottom:1px solid var(--line2);padding:.45em .8em;text-align:left;white-space:nowrap}
.md th{color:var(--muted);font-weight:600}
.md blockquote{margin:.6em 0;padding-left:1em;border-left:3px solid var(--violet);color:var(--muted)}
.cite{display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;padding:0 .3em;margin:0 1px;border-radius:6px;background:rgba(139,108,255,.18);color:#c9bcff;font-size:.72em;font-weight:700;vertical-align:.25em;cursor:pointer;text-decoration:none!important}
.status{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.93rem}
.status .dots{display:inline-flex;gap:4px}
.status .dots i{width:6px;height:6px;border-radius:50%;background:var(--violet);animation:bounce 1.1s infinite}
.status .dots i:nth-child(2){animation-delay:.15s;background:#6f8dff}.status .dots i:nth-child(3){animation-delay:.3s;background:var(--cyan)}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}
.status .detail{color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.thinking{font-size:.88rem;color:var(--faint);border-left:2px solid var(--line2);padding-left:.8rem;max-height:6.5em;overflow:hidden;white-space:pre-wrap;mask-image:linear-gradient(transparent,#000 40%)}
.sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cards{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.send-card{background:var(--panel);border:1px solid rgba(155,124,255,.35);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;max-width:560px}
.send-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem}.send-head svg{width:18px;height:18px;flex:none;color:var(--violet)}
.send-subj{font-size:.9rem;color:var(--muted)}
.send-body{width:100%;resize:vertical;font:inherit;line-height:1.5;padding:.6rem .75rem;border-radius:11px;background:var(--bg2);border:1px solid var(--line2);color:inherit;outline:none}.send-body:focus{border-color:var(--violet)}.send-body:disabled{opacity:.75}
.send-foot{display:flex;justify-content:flex-end;gap:8px;align-items:center}
.file-card{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:10px 12px;max-width:560px}
.file-ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:.8rem;color:#fff;flex:none;background:#555}
.file-card.word .file-ic{background:#2b5797}.file-card.excel .file-ic{background:#1e7145}.file-card.powerpoint .file-ic{background:#c43e1c}.file-card.pdf .file-ic{background:#b30b00}
.file-meta{flex:1;min-width:0}.file-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src{display:inline-flex;align-items:center;gap:.4rem;max-width:280px;padding:.35rem .7rem;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:.82rem;color:var(--muted);text-decoration:none}
.src:hover{border-color:var(--line2);color:var(--text)}
.src b{color:#c9bcff;font-weight:700}
.src span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src svg{width:15px;height:15px}
.msg-actions{display:flex;gap:2px;opacity:.0;transition:opacity .2s}
.msg:hover .msg-actions,.msg:last-child .msg-actions{opacity:1}
.msg-actions .icon-btn{width:34px;height:34px}
.msg-actions svg{width:17px;height:17px}

/* composer */
#composer{padding:8px 16px calc(12px + var(--safe-b));max-width:860px;width:100%;margin:0 auto}
.composer-box{display:flex;align-items:flex-end;gap:4px;padding:6px 6px 6px 6px;border-radius:26px;background:rgba(21,26,42,.85);border:1px solid var(--line2);backdrop-filter:blur(16px);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.composer-box:focus-within{border-color:rgba(139,108,255,.6)}
#input{flex:1;resize:none;border:0;outline:0;background:transparent;padding:.62rem .4rem;max-height:200px;line-height:1.45}
#input::placeholder{color:var(--faint)}
.pill-toggle{display:inline-flex;align-items:center;gap:.3rem;height:42px;padding:0 .7rem;border-radius:21px;color:var(--faint);font-size:.85rem;font-weight:600}
.pill-toggle svg{width:19px;height:19px}
.pill-toggle[aria-pressed=true]{color:#d9cfff;background:rgba(139,108,255,.2)}
.send-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;flex:none}
.send-btn.stop{background:var(--panel2);border:1px solid var(--line2)}
#attach-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 6px 8px}
.att.pending{border-color:var(--line2)} .att .x{margin-left:.2rem;color:var(--faint)}
.att.busy::after{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--violet);border-top-color:transparent;animation:spin .8s linear infinite}
.att.failed{color:var(--bad);border-color:rgba(255,107,129,.4)}
@keyframes spin{to{transform:rotate(360deg)}}

/* tasks & skills */
.section-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:1.6rem 0 .7rem}
.stack{display:flex;flex-direction:column;gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.briefing-card{margin-bottom:14px;border-color:rgba(155,124,255,.35);background:linear-gradient(135deg,rgba(155,124,255,.12),rgba(80,200,255,.06)),var(--panel)}
.card.unseen{border-color:rgba(244,114,208,.45);box-shadow:0 0 0 1px rgba(244,114,208,.15) inset}
.card-row{display:flex;align-items:center;gap:12px}
.card-title{font-weight:650;flex:1;min-width:0}
.card-sub{color:var(--muted);font-size:.88rem}
.card .md{margin-top:.6rem;font-size:.96rem}
.card details summary{cursor:pointer;color:var(--muted);font-size:.9rem;margin-top:.4rem;list-style:none}
.empty{color:var(--faint);font-size:.95rem;padding:.6rem 0}
.switch{position:relative;width:46px;height:28px;border-radius:14px;background:var(--line2);flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-checked=true]{background:var(--violet)}
.switch[aria-checked=true]::after{transform:translateX(18px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.skill{display:flex;flex-direction:column;gap:.5rem;text-align:left;padding:18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);transition:transform .15s,border-color .2s,background .2s}
.skill:hover{border-color:rgba(139,108,255,.5);background:var(--panel2);transform:translateY(-2px)}
.skill .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(139,108,255,.25),rgba(52,214,245,.15));color:#d6ccff}
.skill b{font-size:1.02rem} .skill span{color:var(--muted);font-size:.9rem;line-height:1.4}
.pill{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.76rem;font-weight:650}
.pill.ok{background:rgba(61,220,151,.13);color:var(--ok)} .pill.bad{background:rgba(255,107,129,.13);color:var(--bad)} .pill.run{background:rgba(52,214,245,.13);color:var(--cyan)}

/* sheet */
#sheet-backdrop{position:fixed;inset:0;background:rgba(3,4,8,.6);backdrop-filter:blur(3px);z-index:40;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));max-height:86vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:22px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}}
.sheet-grip{display:none}
.sheet h3{margin:0 0 .3rem;font-size:1.25rem}
.sheet label{display:block;font-size:.88rem;color:var(--muted);margin:1rem 0 .4rem}
.sheet input,.sheet textarea,.sheet select{width:100%;padding:.8rem 1rem;border-radius:12px;background:var(--bg2);border:1px solid var(--line2);outline:none}
.sheet textarea{min-height:96px;resize:vertical}
.sheet input:focus,.sheet textarea:focus,.sheet select:focus{border-color:var(--violet)}
.sheet .actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.4rem;flex-wrap:wrap}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line2);color:var(--muted);font-size:.9rem}
.seg button.on{background:rgba(139,108,255,.2);border-color:var(--violet);color:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mem-item{display:flex;gap:10px;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid var(--line)}
.mem-item p{margin:0;flex:1;font-size:.94rem}

/* phone drawers: #rail from the left, #drawer (conversations) from the right */
#drawer,.edge-tab,#edge-scrim{display:none}
.drawer-head{display:flex;gap:6px;margin-bottom:8px}
.drawer-head input{flex:1;min-width:0;padding:.6rem .9rem;border-radius:12px;background:var(--panel);border:1px solid var(--line2);outline:none}

/* voice */
#voice{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:calc(30px + var(--safe-t)) 24px calc(30px + var(--safe-b));
  background:radial-gradient(circle at 50% 42%,rgba(60,40,140,.35),transparent 55%),rgba(4,5,10,.97);animation:fade .25s}
.voice-close{position:absolute;top:calc(14px + var(--safe-t));right:14px;width:50px;height:50px;border-radius:50%;background:var(--panel)}
.voice-state{font-size:1.05rem;color:var(--muted);letter-spacing:.02em;min-height:1.6em}
.voice-caption{max-width:640px;text-align:center;min-height:7em}
.voice-caption .you{color:var(--muted);font-size:1rem;margin:0 0 .6rem}
.voice-caption .lilly{font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.45;margin:0;max-height:9em;overflow:hidden}
.voice-hint{color:var(--faint);font-size:.85rem}

#toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:.7rem 1.1rem;border-radius:14px;z-index:60;box-shadow:0 12px 40px rgba(0,0,0,.4);max-width:calc(100vw - 32px);animation:rise .2s}

/* mobile */
@media (max-width:820px){
  .mobile-only{display:inline-grid}
  #rail,#drawer{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;z-index:33;width:min(300px,84vw);background:rgba(13,15,27,.74);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
    padding:calc(16px + var(--safe-t)) 12px calc(14px + var(--safe-b));transition:transform .28s cubic-bezier(.2,.8,.2,1);touch-action:pan-y;will-change:transform}
  #rail{left:0;transform:translateX(-102%);border-right:1px solid var(--line2)}
  #rail .rail-section{display:none}
  #drawer{right:0;transform:translateX(102%);border-left:1px solid var(--line2)}
  #drawer .conv-list{flex:1}
  body.open-left #rail,body.open-right #drawer{transform:none;box-shadow:0 0 60px rgba(0,0,0,.55)}
  #rail.dragging,#drawer.dragging{transition:none}
  #edge-scrim{display:block;position:fixed;inset:0;z-index:32;background:rgba(3,4,8,.3);opacity:0;pointer-events:none;transition:opacity .28s}
  body.open-left #edge-scrim,body.open-right #edge-scrim{opacity:1;pointer-events:auto}
  /* the tab: a wide invisible touch target around a thin glowing sliver */
  .edge-tab{display:block;position:fixed;top:50%;z-index:31;width:24px;height:84px;margin-top:-42px;padding:0;touch-action:none;transition:opacity .2s}
  .edge-tab::before{content:"";position:absolute;top:16px;bottom:16px;width:5px;background:rgba(185,168,255,.32);box-shadow:0 0 12px rgba(155,124,255,.35)}
  .edge-tab.left{left:0}.edge-tab.left::before{left:0;border-radius:0 4px 4px 0}
  .edge-tab.right{right:0}.edge-tab.right::before{right:0;border-radius:4px 0 0 4px}
  .edge-tab:active::before{background:rgba(185,168,255,.6)}
  .edge-tab.dot::after{content:"";position:absolute;left:3px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}
  body.open-left .edge-tab,body.open-right .edge-tab,body:has(#voice:not([hidden])) .edge-tab{opacity:0;pointer-events:none}
  #main{padding-bottom:0}
  /* iOS doesn't shrink fixed layouts for the keyboard; app.js sizes #app to the visible viewport */
  #app{bottom:auto;height:var(--app-h,100dvh)}
  #composer{padding:6px 10px calc(10px + var(--safe-b))}
  .composer-box{padding:8px;border-radius:30px;gap:6px;overflow:hidden}
  #input{padding:.75rem .3rem;font-size:17px}
  .orb-wrap.mini,.send-btn{width:50px;height:50px}
  .pad{padding:4px 16px 40px}
  .topbar{padding-left:10px;padding-right:10px}
  #messages{padding:8px 16px 16px}
  .sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:90vh;border-radius:22px 22px 0 0;padding:10px 18px calc(22px + var(--safe-b));animation:up .25s ease-out}
  @keyframes up{from{transform:translateY(40px);opacity:0}}
  .sheet-grip{display:block;width:44px;height:5px;border-radius:3px;background:var(--line2);margin:0 auto 14px}
  .pill-toggle span{display:none}
  #toast{bottom:calc(110px + var(--safe-b))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- mobile account avatar ---------- */
.me-mini{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:.78rem;font-weight:700;flex:none;display:none;place-items:center}
@media (max-width:820px){.me-mini.mobile-only{display:grid}}

/* ---------- WORLD ---------- */
#view-world{background:#04050a}
#globe{position:absolute;inset:0}
#globe .cesium-widget-credits,.cesium-credit-logoContainer,.cesium-credit-expand-link{display:none!important}
#globe-credits .cesium-credit-textContainer::before{content:'Globe: CesiumJS · '}
#globe-credits{position:absolute;left:12px;bottom:76px;font-size:.66rem;color:var(--faint);max-width:50%;pointer-events:none;z-index:2}
#globe-credits a{color:var(--faint)}
.layer-bar{position:absolute;top:calc(12px + var(--safe-t));left:12px;right:380px;display:flex;gap:6px;flex-wrap:wrap;z-index:3}
.layer-pill{padding:.42rem .8rem;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--muted);background:rgba(12,15,26,.72);border:1px solid var(--line2);backdrop-filter:blur(12px)}
.layer-pill.on{color:#fff;background:rgba(139,108,255,.35);border-color:rgba(160,140,255,.7)}
#globe-hint{position:absolute;top:calc(64px + var(--safe-t));left:50%;transform:translateX(-50%);background:rgba(12,15,26,.8);border:1px solid var(--line2);padding:.4rem .9rem;border-radius:999px;font-size:.85rem;color:var(--muted);z-index:3;backdrop-filter:blur(10px)}
#world-panel{position:absolute;top:calc(12px + var(--safe-t));right:12px;bottom:84px;width:350px;z-index:4;display:flex;flex-direction:column;
  background:rgba(10,12,22,.78);border:1px solid var(--line2);border-radius:20px;backdrop-filter:blur(18px);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.wtabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--line)}
.wtab{flex:1;padding:.5rem;border-radius:11px;font-size:.88rem;font-weight:600;color:var(--muted)}
.wtab.on{background:var(--panel2);color:var(--text)}
#world-panel-body{padding:14px;overflow-y:auto;flex:1}
#world-panel-body h4{margin:.2rem 0 .3rem;font-size:1.05rem}
#world-panel-body p{margin:.3rem 0}
#world-panel-body a{color:var(--cyan);text-decoration:none}
#world-panel-body .btn{margin-top:.6rem}
.trip-form{display:flex;flex-wrap:wrap;gap:6px}
#trip-form #trip-flight{flex:1 1 100%}
.trip-form input{flex:1;min-width:0;padding:.6rem .8rem;border-radius:11px;background:var(--bg2);border:1px solid var(--line2);outline:none}
.trip-form input[type=date]{flex:0 0 auto;width:9.4rem}
.trip-form input:focus{border-color:var(--violet)}
.trip{cursor:pointer;padding:12px 14px}
.trip .icon-btn{width:32px;height:32px}
.route{display:flex;align-items:center;gap:10px;margin:.5rem 0 .2rem;font-size:1.1rem}
.route-line{flex:1;height:4px;border-radius:2px;background:var(--line2);position:relative;overflow:hidden}
.route-line i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ff8ad8,#8b6cff);border-radius:2px}
.trip-status{margin-top:.5rem;font-size:.9rem;color:var(--muted)}
.trip-status.air{color:#9ff0c9}
.trip-delay{margin-top:.4rem;font-size:.85rem;color:var(--warn)}
.hint.small,.small{font-size:.8rem}
.ham-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.ham-grid div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.5rem;text-align:center}
.ham-grid b{display:block;font-size:1.15rem}.ham-grid b.small{font-size:.8rem;line-height:1.7}
.ham-grid span{font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.ham-table{width:100%;border-collapse:collapse;font-size:.88rem;margin:.4rem 0}
.ham-table th{color:var(--faint);font-weight:600;text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding:.3rem .2rem}
.ham-table td{padding:.32rem .2rem;border-top:1px solid var(--line)}
.cond{font-weight:650}.cond.good{color:var(--ok)}.cond.fair{color:var(--warn)}.cond.poor{color:var(--bad)}
#tickers{position:absolute;left:0;right:0;bottom:0;z-index:5;background:rgba(6,8,14,.9);border-top:1px solid var(--line);backdrop-filter:blur(14px)}
.ticker{display:flex;align-items:center;height:36px;overflow:hidden}
.ticker+.ticker{border-top:1px solid var(--line)}
.tk-label{flex:none;width:78px;padding-left:12px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.tk-view{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.tk-track{display:inline-flex;white-space:nowrap;animation:tick 60s linear infinite;will-change:transform}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:.4rem;padding:0 1.4rem;font-size:.9rem;color:var(--text);text-decoration:none}
.tk b{color:var(--muted);font-weight:600}
.tk i{font-style:normal;font-weight:650;font-size:.85rem}.tk i.up{color:var(--ok)}.tk i.down{color:var(--bad)}
.tk i.tk-src{color:var(--faint);font-weight:500;font-size:.78rem}
a.tk:hover{color:#fff}
@media (max-width:820px){
  .layer-bar{right:56px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .layer-bar::-webkit-scrollbar{display:none}
  .layer-pill{flex:none}
  .world-me{position:absolute;top:calc(12px + var(--safe-t));right:12px;z-index:4}
  #world-panel{top:auto;left:8px;right:8px;width:auto;bottom:calc(80px + var(--safe-b));max-height:52%;border-radius:18px}
  #tickers{padding-bottom:var(--safe-b)}
  #world-panel.collapsed{max-height:52px}
  #world-panel.collapsed #world-panel-body{display:none}
  .panel-toggle{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:40px;height:5px;border-radius:3px;background:var(--line2);padding:0}
  .wtabs{padding-top:14px}
  #globe-credits{bottom:calc(72px + var(--safe-b))}
  .tk-label{width:62px;font-size:.62rem}
}

/* ---------- KINGDOM ---------- */
#kingdom-body{max-width:760px}
.k-verse{position:relative;padding:34px 30px 26px;border-radius:24px;margin:6px 0 18px;overflow:hidden;
  background:radial-gradient(600px 300px at 15% 0%,rgba(139,108,255,.28),transparent 70%),radial-gradient(500px 300px at 100% 100%,rgba(52,214,245,.14),transparent 70%),var(--panel);
  border:1px solid rgba(160,140,255,.28)}
.k-date{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.k-date b{color:#d9cfff}
.k-verse blockquote{margin:.9rem 0 1rem;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;font-size:clamp(1.3rem,3.2vw,1.75rem);line-height:1.5;color:#f4f1ff}
.k-verse sup{font-family:var(--font);font-size:.5em;color:var(--violet);margin:0 .2em 0 .1em;font-weight:700}
.k-ref{font-weight:700;font-size:1.05rem;color:#d9cfff}.k-ref span{font-weight:600;font-size:.75rem;color:var(--faint);margin-left:.3rem;letter-spacing:.06em}
.k-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:1.1rem}
.k-tomorrow{margin:1rem 0 0;font-size:.82rem;color:var(--faint)}
.k-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 22px;color:var(--text);text-decoration:none}
.k-titw{margin-bottom:6px;padding-bottom:14px}
.k-titw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.k-titw h3{font-family:"Iowan Old Style",Palatino,Georgia,serif;font-size:1.4rem;margin:.3rem 0 .6rem;font-weight:600}
.k-titw-frame{display:block;width:100%;height:min(1400px,82vh);border:0;border-radius:12px;background:#fff}
.k-scripture{font-style:italic;color:#cbbcff!important;border-left:3px solid var(--violet);padding-left:.9rem}
.k-kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.k-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.k-link{transition:border-color .2s,transform .15s}
.k-link:hover{border-color:rgba(139,108,255,.5);transform:translateY(-2px)}
.k-link h4{margin:.35rem 0 .4rem;font-size:1.05rem}
.k-link p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.k-open{display:inline-block;margin-top:.7rem;font-size:.85rem;color:var(--cyan)}
.k-attrib{font-size:.72rem;color:var(--faint);margin:1.6rem 0 0;line-height:1.5}
.k-skel{height:220px;border-radius:24px;background:linear-gradient(90deg,var(--panel),var(--panel2),var(--panel));background-size:200% 100%;animation:shimmer 1.2s infinite;margin:6px 0 16px}
.k-skel.short{height:120px}
@keyframes shimmer{to{background-position:-200% 0}}

/* ham: listen live */
.listen-list{display:flex;flex-direction:column;gap:6px;margin:.3rem 0 .5rem}
.listen{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none;background:rgba(125,249,255,.04)}
.listen:hover{border-color:#7df9ff66;background:rgba(125,249,255,.09)}
.listen svg{width:18px;height:18px;flex:none;color:#7df9ff}
.listen span{display:flex;flex-direction:column;min-width:0}
.listen b{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listen i{font-style:normal;font-size:.76rem;color:var(--muted)}
.ham-table tr[data-spot]{cursor:pointer}
.ham-table tr[data-spot]:hover td{background:rgba(255,255,255,.04)}
.listen-ico svg{width:14px;height:14px;color:#7df9ff;opacity:.7}
.k-titw-head .btn{text-decoration:none;flex:none}

/* ---------- ADMIN ---------- */
.adm{max-width:980px}
.adm .wtabs{border:0;padding:0;margin:0 0 16px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.adm .wtabs::-webkit-scrollbar{display:none}
.adm .wtab{flex:none;padding:.55rem .95rem;border:1px solid var(--line);background:var(--panel)}
.adm .wtab.on{border-color:var(--line2);background:var(--panel2)}
.adm-banner{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;padding:14px 16px;border-radius:var(--r);font-weight:650;border:1px solid}
.adm-banner.ok{background:rgba(61,220,151,.08);border-color:rgba(61,220,151,.3);color:var(--ok)}
.adm-banner.bad{background:rgba(255,107,129,.1);border-color:rgba(255,107,129,.4);color:var(--bad)}
.adm-banner .muted{font-weight:500}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 4px}
.adm-stats div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.adm-stats b{display:block;font-size:1.45rem;letter-spacing:-.01em}
.adm-stats span{color:var(--muted);font-size:.84rem}
.adm-health{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:8px}
.adm-svc{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:.93rem}
.adm-svc i{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);flex:none}
.adm-svc span{flex:1;min-width:0}
.adm-svc em{font-style:normal;color:var(--faint);font-size:.84rem;text-align:right}
.adm-svc.down{border-color:rgba(255,107,129,.45)}
.adm-svc.down i{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.adm-svc.down em{color:var(--bad)}
.adm-add{display:grid;grid-template-columns:1fr 1.4fr auto auto;gap:8px}
.adm-add input,.adm-add select,.adm-line input,.adm-line select,.adm-form textarea,.adm-form select,.adm-form input{padding:.65rem .85rem;border-radius:11px;background:var(--bg2);border:1px solid var(--line2);outline:none;min-width:0}
.adm-add input:focus,.adm-line input:focus,.adm-form textarea:focus,.adm-form input:focus{border-color:var(--violet)}
.adm-msg{min-height:1.3em;margin:.5rem 0 0;font-size:.9rem;color:var(--ok)}
.adm-msg.bad{color:var(--bad)}
.adm-person.off{opacity:.6}
.adm-person .avatar{width:38px;height:38px}
.adm-person-meta{text-align:right;font-size:.82rem;color:var(--muted);line-height:1.4}
.adm-person-meta span{color:var(--faint)}
.adm-manage{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.adm-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-line>span{width:130px;color:var(--muted);font-size:.88rem}
.adm-line em{font-style:normal;font-size:.9rem}
.adm-line input{flex:1;min-width:180px}
.adm-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.adm-chart{display:flex;align-items:flex-end;gap:3px;height:170px;padding:10px 4px 22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
.adm-chart div{flex:1 0 12px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.adm-chart i{width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:var(--accent);min-height:3px}
.adm-chart span{position:absolute;bottom:-18px;font-size:.62rem;color:var(--faint);white-space:nowrap}
.adm-chart div:not(:nth-child(3n+1)) span{display:none}
.adm-table{width:100%;border-collapse:collapse;font-size:.92rem}
.adm-table th{text-align:left;color:var(--faint);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid var(--line2)}
.adm-table td{padding:9px 8px;border-bottom:1px solid var(--line)}
.adm-log{display:flex;flex-direction:column}
.adm-ev{display:grid;grid-template-columns:118px 150px 1fr auto;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:.9rem;align-items:baseline}
.adm-ev time{color:var(--faint);font-size:.82rem}
.adm-ev em{font-style:normal;color:var(--faint);font-size:.8rem;white-space:nowrap}
.adm-ev.bad span{color:var(--bad)}
.adm-upload{cursor:pointer;margin-bottom:6px}
.adm-doc-ic{width:22px;height:22px;color:var(--muted);flex:none}
.adm-form{display:flex;flex-direction:column;gap:20px}
.adm-form label{display:flex;flex-direction:column;gap:6px}
.adm-form label span{color:var(--muted);font-size:.88rem}
.adm-form textarea{resize:vertical;line-height:1.5;font:inherit}
@media (max-width:820px){
  .adm-add{grid-template-columns:1fr}
  .adm-ev{grid-template-columns:1fr auto;gap:2px 10px}
  .adm-ev span{grid-column:1/-1}
  .adm-line>span{width:100%}
  .adm-person-meta{display:none}
  .adm-table th:nth-child(3),.adm-table td:nth-child(3),.adm-table th:nth-child(4),.adm-table td:nth-child(4){display:none}
}
.ms-row{flex-wrap:wrap;gap:10px;margin-bottom:6px}
.ms-row .btn{text-decoration:none}

/* ---------- Scan to PDF ---------- */
#scan{position:fixed;inset:0;z-index:55;background:#07080d;display:flex;flex-direction:column;padding:var(--safe-t) 0 var(--safe-b);color:var(--text)}
#scan[hidden]{display:none}
body.scanning .edge-tab{display:none}
.scan-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px}
.scan-title{font-weight:600}
.scan-main{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 18px}
.scan-stage{position:relative;display:inline-block;line-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.scan-stage img{max-width:calc(100vw - 36px);max-height:calc(100dvh - 300px - var(--safe-t) - var(--safe-b));border-radius:6px;-webkit-touch-callout:none}
.scan-stage.review img{background:#fff;opacity:.35;transition:opacity .2s}.scan-stage.review img.ready{opacity:1}
.scan-quad{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.scan-quad polygon{fill:rgba(124,92,255,.16);stroke:#9b7cff;stroke-width:.006;vector-effect:non-scaling-stroke;stroke-width:2}
.scan-handle{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #fff;background:rgba(124,92,255,.55);box-shadow:0 2px 10px rgba(0,0,0,.5);touch-action:none;cursor:grab}
.scan-handle::after{content:"";position:absolute;inset:-14px}
.scan-handle.on{background:#9b7cff;transform:scale(1.15)}
.scan-tools{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 14px}
.scan-hint{margin:0;color:var(--muted);font-size:.9rem}
.scan-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.scan-filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%}
.scan-strip{display:flex;gap:10px;overflow-x:auto;padding:10px 14px 12px;align-items:center}
.scan-thumb{position:relative;flex:none}
.scan-thumb img{height:64px;width:auto;max-width:60px;object-fit:cover;border-radius:6px;border:2px solid transparent;background:#fff;display:block}
.scan-thumb.on img{border-color:#9b7cff}
.scan-move{position:absolute;left:0;right:0;bottom:-2px;display:flex;justify-content:space-between}
.scan-move button{width:22px;height:22px;border-radius:50%;border:0;background:#9b7cff;color:#fff;font-weight:700;line-height:1;padding:0}
.scan-add{flex:none;width:48px;height:64px;border-radius:8px;border:1.5px dashed var(--line2);background:none;color:var(--muted);font-size:1.5rem}
.scan-add.lib{font-size:1.1rem}
.scan-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:320px;color:var(--muted)}
.scan-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line2);border-top-color:#9b7cff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.file-badge{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem}
@media (max-width:640px){.grid{grid-template-columns:1fr 1fr;gap:10px}.grid .skill{padding:12px}.grid .skill span{font-size:.8rem;line-height:1.35}.grid .skill .ic{width:38px;height:38px}}
.mem-auto{color:var(--faint);font-size:.8rem}
a.btn{text-decoration:none}

/* ---------- meeting recorder ---------- */
#recorder{position:fixed;inset:0;z-index:55;background:#07080d;display:flex;flex-direction:column;padding:var(--safe-t) 0 var(--safe-b);color:var(--text)}
#recorder[hidden]{display:none}
.rec-main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 18px}
.rec-title{width:min(520px,100%);text-align:center;font-size:1.05rem;padding:.6rem .8rem;border-radius:12px;background:var(--bg2);border:1px solid var(--line2);color:inherit}
.rec-orb-wrap{height:130px;display:grid;place-items:center}
.rec-orb{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8fb1,#e0306a 55%,#7a1238);box-shadow:0 0 50px rgba(255,60,120,.55);transition:transform .08s linear}
.rec-status{display:flex;gap:12px;align-items:baseline}.rec-status span{font-variant-numeric:tabular-nums;font-size:1.3rem}.rec-status em{color:var(--muted);font-size:.85rem}
.rec-hint{margin:0;color:var(--muted);font-size:.85rem;text-align:center;max-width:420px}
.rec-text{flex:1;min-height:0;width:min(640px,100%);overflow-y:auto;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);line-height:1.55;color:#d9dcef;font-size:.95rem}
.rec-text:empty::before{content:"The transcript appears here as you talk, about every 30 seconds.";color:var(--faint)}
.audio-card{background:var(--panel);border:1px solid rgba(155,124,255,.35);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;max-width:560px}.audio-card audio{width:100%}
.file-ic svg{width:22px;height:22px}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ct-field{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:var(--muted)}
.ct-field input{padding:.5rem .65rem;border-radius:10px;background:var(--bg2);border:1px solid var(--line2);color:var(--text);font:inherit;font-size:.92rem;min-width:0}
@media (max-width:480px){.ct-grid{grid-template-columns:1fr}}
.mc-card{border-radius:18px;padding:22px 22px 18px;background:linear-gradient(135deg,#1f2a44,#2e3a59 60%,#3b2f6b);color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.mc-co{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#c9cfe6}
.mc-name{font-size:1.6rem;font-weight:700;margin-top:14px}.mc-title{color:#d8dcf0;margin-top:2px}
.mc-lines{margin-top:14px;display:flex;flex-direction:column;gap:3px;font-size:.92rem;color:#eef0fa}
.mc-qr{display:block;width:min(260px,70vw);margin:12px auto 0;border-radius:14px;background:#fff;padding:8px}

/* ---------- ham radio (Tools) ---------- */
.ham-card{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.ham-freq{display:flex;align-items:baseline;justify-content:center;gap:8px}
.ham-freq input{width:min(260px,70vw);text-align:center;font-size:2.4rem;font-weight:700;font-variant-numeric:tabular-nums;background:none;border:0;border-bottom:1px solid var(--line2);color:var(--text);outline:none}
.ham-freq span{color:var(--muted)}
.ham-modes{justify-content:center}
.ham-step,.ham-bands{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ham-bands .chip{margin:0;padding:.3rem .7rem;font-size:.85rem}.ham-bands .chip.on{border-color:var(--violet);background:rgba(155,124,255,.18)}
.ham-meter{display:flex;align-items:center;gap:10px}.ham-meter span{min-width:120px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem}
.ham-meter-track{flex:1;height:10px;border-radius:6px;background:var(--bg2);overflow:hidden;border:1px solid var(--line)}
#ham-smeter{height:100%;width:2%;background:linear-gradient(90deg,#22c55e,#eab308 65%,#ef4444);transition:width .15s}
.ham-row{display:flex;gap:12px;align-items:center}.ham-row input[type=range]{flex:1}
.ham-rx{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}.ham-rx select{font-size:.92rem}

/* EchoLink */
.el-ptt { display:block; width:100%; margin:14px 0 6px; padding:28px 0; border-radius:18px; border:2px solid var(--line, #2a3550); background:var(--card-2, #17203a); color:inherit; font-size:18px; font-weight:700; letter-spacing:.04em; touch-action:none; user-select:none; -webkit-user-select:none; }
.el-ptt.tx { background:#b3261e; border-color:#e5484d; color:#fff; }
.el-ptt.rx { border-color:#30a46c; box-shadow:0 0 0 3px rgba(48,164,108,.35) inset; }
.el-info { white-space:pre-wrap; font-size:12px; max-height:140px; overflow:auto; opacity:.8; }
.el-q { width:100%; margin:8px 0; }

/* back-to-Lilly orb on Earth and Devotional */
.home-orb{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;width:58px;height:58px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;filter:drop-shadow(0 6px 18px rgba(80,120,255,.45));transition:transform .15s}
.home-orb:active{transform:scale(.92)}
#view-world .home-orb{top:calc(56px + var(--safe-t, 0px));bottom:auto;right:5px;width:64px;height:64px}   /* under the profile initials */
@media (min-width:821px){#view-world .home-orb{top:14px;right:374px}}   /* computer: top right of the globe, beside the flights panel */

/* one-time notifications offer */
.notify-offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:10px 16px 0;padding:12px 14px;border-radius:14px;background:rgba(110,140,255,.12);border:1px solid rgba(110,140,255,.35);font-size:14px}
.notify-offer span{flex:1 1 220px}
/* standard signature form + live preview (rendered on white, as in email) */
.sig-form{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:8px}
.sig-field{display:flex;flex-direction:column;gap:3px;font-size:12px;opacity:.95}
.sig-field.wide{grid-column:1/-1}
.sig-field input{width:100%}
.sig-render{margin-top:10px;padding:10px;border-radius:10px;background:#fff;color:#000;overflow-x:auto}
@media (max-width:520px){.sig-form{grid-template-columns:1fr}}
.adm-slow td{color:#ffb86b}

/* live GPU */
.gpu-status{padding:8px 12px;border-radius:10px;font-size:13px;margin:4px 0 10px;background:rgba(48,164,108,.14);border:1px solid rgba(48,164,108,.4)}
.gpu-status.warn{background:rgba(255,170,60,.14);border-color:rgba(255,170,60,.5)}
.gpu-status.down{background:rgba(229,72,77,.14);border-color:rgba(229,72,77,.5)}
.gpu-g{display:grid;grid-template-columns:80px 1fr 70px;align-items:center;gap:10px;font-size:13px;margin:6px 0}
.gpu-g b{text-align:right;font-variant-numeric:tabular-nums}
.gpu-track{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.gpu-track i{display:block;height:100%;background:linear-gradient(90deg,#4f7cff,#8f6bff);transition:width .4s}
.gpu-track i.hot{background:linear-gradient(90deg,#ff9a3c,#e5484d)}
.gpu-meta{font-size:12px;opacity:.75;margin:6px 0 8px}
.gpu-spark{display:flex;align-items:flex-end;gap:2px;height:40px;margin:6px 0}
.gpu-spark i{flex:1;background:rgba(110,140,255,.55);border-radius:2px 2px 0 0;min-width:2px}
.gpu-slots{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:6px}
.gpu-slots span{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.1)}
.gpu-slots span.on{background:#30a46c;box-shadow:0 0 8px rgba(48,164,108,.7)}
.gpu-slots em{font-style:normal;opacity:.75;margin-left:6px}

/* Get set up */
#setup{width:min(460px,100%);margin:18px auto 0;text-align:left}
.setup-card{padding:14px 16px;border-radius:16px;background:rgba(110,140,255,.08);border:1px solid rgba(110,140,255,.28)}
.setup-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.setup-head b{flex:1}
.setup-step{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.06)}
.setup-step.done{opacity:.55}
.setup-dot{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid rgba(110,140,255,.6);display:grid;place-items:center;font-size:12px;color:#fff}
.setup-step.done .setup-dot{background:#30a46c;border-color:#30a46c}
.setup-text{flex:1;min-width:0;font-size:14px}
/* scan-to-PDF in the composer is for phones and tablets (a camera in hand); computers use Tools > Scan to PDF */
@media (hover:hover) and (pointer:fine){#scan-btn{display:none}}

/* composer: send is always present; dimmed until there's text */
.send-btn.empty{opacity:.35}
@media (max-width:520px){#think-btn span{display:none}#think-btn{padding:0 10px}}
/* the typing box shrinks first (a textarea's built-in ~20-character minimum pushed send and the orb off narrow phones) */
#input{min-width:0;width:0;flex:1 1 0}
.composer-box > :not(#input){flex:none}
@media (max-width:400px){
  .composer-box{gap:2px;padding:6px}
  .composer-box .icon-btn,.composer-box .pill-toggle{width:36px;height:40px;padding:0}
  .orb-wrap.mini,.send-btn{width:44px;height:44px}
}

/* the right drawer shows the current screen's pane (chat: conversations; Earth: layers, flights, details; Devotional: menu) */
.dpane{display:none;flex-direction:column;min-height:0;flex:1}
body[data-view=chat] .dpane[data-pane=chat],body[data-view=world] .dpane[data-pane=world],body[data-view=kingdom] .dpane[data-pane=kingdom]{display:flex}
@media (max-width:820px){
  body:not([data-view=chat]):not([data-view=world]):not([data-view=kingdom]) .edge-tab.right{display:none}
  #drawer-world,#drawer-kingdom{overflow-y:auto;padding:calc(14px + var(--safe-t)) 14px calc(20px + var(--safe-b))}
  .dpane-h{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:14px 4px 8px}
  .dpane-h:first-child{margin-top:4px}
  #drawer-world .layer-bar{position:static;display:flex;flex-wrap:wrap;gap:6px;overflow:visible;right:auto;left:auto;top:auto}
  #drawer-world #world-panel{position:static;width:auto;max-height:none;bottom:auto;top:auto;left:auto;right:auto;border-radius:16px;margin-top:4px;flex:none}
  #drawer-world #world-panel.collapsed{max-height:none}
  #drawer-world .panel-toggle{display:none}
  .k-menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border-radius:12px;text-align:left;font-size:15px;color:inherit}
  .k-menu-item:active,.k-menu-item:hover{background:rgba(255,255,255,.06)}
  .k-menu-item svg{width:20px;height:20px;opacity:.8}
}

/* devotional menu, commentary, music */
.k-menu{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
@media (max-width:820px){.k-menu{display:none}}
.k-commentary{font-size:15px;line-height:1.6}
.k-commentary p{margin:.45rem 0}
.k-music{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.35);display:grid;place-items:center;margin-top:8px}
.k-music iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#k-verse,#k-commentary,#k-music,#k-titw,#k-more{scroll-margin-top:70px}
@media (max-width:820px){
  #drawer-world #world-panel{width:100%;box-sizing:border-box;overflow:hidden}
  #drawer-world .wtabs{display:flex}
  #drawer-world .wtabs .wtab{flex:1;min-width:0}
  #drawer-world .trip-form{flex-wrap:wrap}
  #drawer-world .trip-form input{flex:1 1 100%;min-width:0}
  #drawer-world #world-panel-body{padding:12px}
}

/* company mark in the sidebar (the PEC swoosh; a faint glow keeps its navy edge visible on the dark rail) */
.brand-mark{height:29px;width:auto;filter:drop-shadow(0 0 6px rgba(160,180,255,.35))}
.brand{letter-spacing:.06em;font-weight:800}

/* worship audio player */
.k-player{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line2)}
.k-play{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent);box-shadow:0 0 18px rgba(139,108,255,.45)}
.k-tri{width:0;height:0;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.k-stop{width:14px;height:14px;border-radius:3px;background:#fff}
.k-pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.k-pinfo select{max-width:100%;width:auto}
.k-pstate{font-size:12px;opacity:.7}
.k-vic{width:18px;height:18px;opacity:.7;flex:none}
#k-vol{width:90px;flex:none}
@media (max-width:420px){#k-vol{width:64px}}

/* VFO tuning knob */
.ham-vfo{display:flex;align-items:center;gap:18px;margin:12px 0}
.ham-knob{width:132px;height:132px;flex:none;border-radius:50%;touch-action:none;cursor:grab;outline:none;
  background:radial-gradient(circle at 35% 30%,#3a4160,#141827 70%);box-shadow:0 8px 24px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.12);display:grid;place-items:center}
.ham-knob:focus-visible{box-shadow:0 0 0 3px rgba(139,108,255,.6),0 8px 24px rgba(0,0,0,.5)}
.ham-knob.turning{cursor:grabbing}
.ham-dial{width:104px;height:104px;border-radius:50%;position:relative;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.10) 0 2deg,transparent 2deg 10deg),radial-gradient(circle at 40% 35%,#2b3150,#0f1220)}
.ham-dial i{position:absolute;top:12px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#8f6bff;box-shadow:0 0 10px #8f6bff,inset 0 1px 2px rgba(0,0,0,.6)}
.ham-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ham-steps .ham-step{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
@media (max-width:420px){.ham-knob{width:116px;height:116px}.ham-dial{width:92px;height:92px}}
/* computers: the globe fills the area left of the flights panel, so it sits centered in what you can see */
@media (min-width:821px){#globe{right:374px}}

/* ================= Ham radio front panel (HF-1) =================
   Modeled on the classic modern HF rig face: dark textured faceplate with screws, a deep-set cyan dot-matrix
   display, a big knurled main tuning knob beside it, rubber keys with status LEDs, a small AF GAIN knob. */
#ham-radio.card{background:none;border:0;padding:0;box-shadow:none}
.rig{position:relative;border-radius:16px;padding:16px 18px 12px;color:#c9ced8;user-select:none;-webkit-user-select:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#34373d 0%,#24272c 45%,#1b1d21 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.08) inset,0 -2px 0 rgba(0,0,0,.6) inset,0 0 0 1px #0c0d10}
.rig .screw{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9aa0aa,#4a4e56 60%,#2a2c31);box-shadow:0 1px 1px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.4)}
.rig .screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:1.5px;background:#26282d;transform:rotate(35deg)}
.rig .screw.tl{top:8px;left:8px}.rig .screw.tr{top:8px;right:8px}.rig .screw.bl{bottom:8px;left:8px}.rig .screw.br{bottom:8px;right:8px}
.rig-top{display:flex;align-items:baseline;gap:10px;padding:0 10px 10px}
.rig-brand{font:800 18px/1 'Arial Black',Arial,sans-serif;letter-spacing:.18em;color:#e8ebf0;text-shadow:0 1px 0 #000}
.rig-model{font:700 10px/1 Arial,sans-serif;letter-spacing:.22em;color:#8d939e;flex:1}
.rig-tx{display:flex;align-items:center;gap:5px;font:700 10px Arial,sans-serif;letter-spacing:.15em;color:#8d939e}

/* the LED */
.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#1c1c1c);box-shadow:inset 0 0 1px #000}
.led.on{background:radial-gradient(circle at 35% 30%,#fff3b0,#ffb300 55%,#a86a00);box-shadow:0 0 8px #ffb300}
.led.rx{background:radial-gradient(circle at 35% 30%,#d6ffd6,#2ee66b 55%,#0f7a33);box-shadow:0 0 9px #2ee66b}

/* dot-matrix display: black glass with an unlit dot grid; lit text in cyan, broken into dots, glowing; deeply inset */
.lcd{position:relative;border-radius:8px;color:#5ff2ff;
  background:radial-gradient(circle,rgba(90,240,255,.07) 38%,transparent 42%) 0 0/3px 3px,linear-gradient(180deg,#010607,#03100f);
  box-shadow:inset 0 6px 14px rgba(0,0,0,.95),inset 0 0 0 2px #000,inset 0 0 22px rgba(0,180,200,.08),0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.8)}
.dm{font-family:'DejaVu Sans Mono','Menlo','Consolas',monospace;font-weight:700;color:#5ff2ff;text-shadow:0 0 6px rgba(80,235,255,.75),0 0 14px rgba(80,235,255,.35);
  -webkit-mask-image:radial-gradient(circle,#000 58%,transparent 64%);-webkit-mask-size:2.5px 2.5px;mask-image:radial-gradient(circle,#000 58%,transparent 64%);mask-size:2.5px 2.5px}
.rig-main{display:flex;gap:16px;align-items:center}
.rig-lcd{flex:1;min-width:0;padding:10px 14px 8px;border:3px solid #0a0b0d;outline:1px solid #3a3d44}
.lcd-row{display:flex;align-items:center;gap:10px}
.lcd-row.bottom{justify-content:space-between;margin-top:2px}
.dm.tag{font-size:12px;letter-spacing:.08em}
.dm.tag.hi{padding:0 5px;border:1px solid rgba(95,242,255,.6);border-radius:3px}
.rxname{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;max-width:55%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lcd-freq{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;margin:4px 0 2px}
.lcd-freq input{all:unset;width:100%;text-align:right;font-size:46px;line-height:1.05;letter-spacing:.04em;caret-color:#5ff2ff}
.lcd-freq .unit{font-size:13px}
.lcd-meter{display:flex;align-items:center;gap:8px;margin-top:4px}
.segs{flex:1;display:grid;grid-template-columns:repeat(15,1fr);gap:3px;height:12px}
.segs i{background:rgba(95,242,255,.10);border-radius:1px}
.segs i.on{background:#5ff2ff;box-shadow:0 0 6px rgba(95,242,255,.8)}
.segs i.over.on{background:#b8fbff}
.lcd-scale{display:grid;grid-template-columns:9fr 6fr;font-size:9px;margin:2px 0 0 18px;opacity:.85}
.lcd-scale{display:flex;justify-content:space-between;padding-right:2px}

/* main tuning knob: knurled rubber ring + brushed metal face, finger dimple; the sheen stays still (it's the light) */
.ham-knob{position:relative;width:150px;height:150px;flex:none;border-radius:50%;touch-action:none;cursor:grab;outline:none;
  background:radial-gradient(circle,#0b0c0e 62%,#2a2d33 64%,#111215 70%);box-shadow:0 10px 22px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.08) inset}
.ham-knob:focus-visible{box-shadow:0 0 0 3px rgba(95,242,255,.5),0 10px 22px rgba(0,0,0,.75)}
.ham-knob.turning{cursor:grabbing}
.ham-dial{position:absolute;inset:8px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#1a1b1e 0 3deg,#3a3c42 3deg 4.5deg,#1a1b1e 4.5deg 6deg);
  box-shadow:inset 0 0 0 1px #000,0 2px 4px rgba(0,0,0,.8)}
.ham-face{position:absolute;inset:22px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 20deg,#6f7480,#c8ccd4,#7a7f8a,#3e424a,#9aa0aa,#e2e5ea,#80858f,#43474f,#6f7480);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4),inset 0 -3px 6px rgba(0,0,0,.6),0 0 0 2px #15161a}
.ham-sheen{position:absolute;inset:22px;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),radial-gradient(circle at 35% 25%,rgba(255,255,255,.35),transparent 55%)}
.ham-dimple-rot{position:absolute;inset:22px;border-radius:50%;pointer-events:none}
.ham-dimple-rot i{position:absolute;top:12%;left:50%;width:24px;height:24px;margin-left:-12px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#2b2e34,#5a5f69 70%,#8b909a);box-shadow:inset 0 3px 5px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.35)}

/* small readouts with − / + keys */
.rig-readouts{display:flex;gap:14px;margin:14px 0 4px;flex-wrap:wrap}
.rd{flex:1 1 200px;display:flex;flex-direction:column;gap:4px;min-width:0}
.rd-label{font:700 9px Arial,sans-serif;letter-spacing:.24em;color:#8d939e;padding-left:6px}
.rd-body{display:flex;align-items:center;gap:8px}
.rd-screen{flex:1;min-width:0;height:44px;border:2px solid #0a0b0d;outline:1px solid #3a3d44;cursor:pointer;display:grid;place-items:center}
.rd-screen .dm{font-size:20px;letter-spacing:.06em;white-space:nowrap}

/* photoreal keys: molded plastic/rubber with a lit LED */
.rk,.key{position:relative;border-radius:9px;color:#d7dbe2;cursor:pointer;
  background:linear-gradient(180deg,#5b5f68 0%,#3a3d44 45%,#2b2e34 100%);
  box-shadow:0 4px 0 #101114,0 6px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,0,0,.35);
  transition:transform .05s,box-shadow .05s}
.rk:active,.key:active{transform:translateY(3px);box-shadow:0 1px 0 #101114,0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.rk{width:46px;height:44px;flex:none;font:400 26px/1 Arial,sans-serif;display:grid;place-items:center}
.rk span{margin-top:-2px;text-shadow:0 1px 0 #000}
.rig-keys{display:flex;align-items:flex-end;gap:10px;margin:16px 0 6px;flex-wrap:wrap}
.key{min-width:62px;height:42px;padding:6px 10px 0;font:700 12px Arial,sans-serif;letter-spacing:.12em;display:flex;flex-direction:column;align-items:center;gap:5px}
.key .led{width:16px;height:4px;border-radius:2px}
.key.power{min-width:76px}
.key.power.live span{color:#e9ffe9}
.rig-gap{flex:1}
.af{display:flex;flex-direction:column;align-items:center;gap:4px}
.af-knob{width:54px;height:54px;border-radius:50%;cursor:ns-resize;touch-action:none;outline:none;
  background:repeating-conic-gradient(#1a1b1e 0 5deg,#34363b 5deg 8deg);box-shadow:0 5px 10px rgba(0,0,0,.7),inset 0 0 0 1px #000;display:grid;place-items:center}
.af-knob:focus-visible{box-shadow:0 0 0 3px rgba(95,242,255,.5)}
.af-rot{width:38px;height:38px;border-radius:50%;position:relative;
  background:conic-gradient(from 30deg,#6f7480,#cfd3da,#6a6f79,#3e424a,#a3a8b1,#6f7480);box-shadow:inset 0 2px 2px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.6)}
.af-rot i{position:absolute;top:3px;left:50%;width:3px;height:11px;margin-left:-1.5px;border-radius:2px;background:#f2f4f7;box-shadow:0 0 3px rgba(255,255,255,.6)}
.rig-status{margin:8px 6px 4px;font:11px/1.4 Arial,sans-serif;color:#7d838e;text-shadow:0 1px 0 #000}

/* drop-down list from a readout */
.rig-pop{position:absolute;z-index:20;width:190px;max-height:260px;overflow-y:auto;padding:6px;border:2px solid #0a0b0d;outline:1px solid #3a3d44;
  box-shadow:inset 0 6px 14px rgba(0,0,0,.95),0 12px 28px rgba(0,0,0,.7)}
.rig-pop button{display:block;width:100%;text-align:left;padding:7px 8px;border-radius:5px;background:none;border:0;cursor:pointer}
.rig-pop button .dm{font-size:15px}
.rig-pop button.on{background:rgba(95,242,255,.14)}
.rig-pop button:hover{background:rgba(95,242,255,.08)}

@media (max-width:520px){
  .rig{padding:14px 12px 10px}
  .rig-main{gap:10px}
  .ham-knob{width:104px;height:104px}
  .ham-dial{inset:6px}.ham-face,.ham-sheen,.ham-dimple-rot{inset:16px}
  .ham-dimple-rot i{width:17px;height:17px;margin-left:-8.5px}
  .rig-lcd{padding:8px 9px 6px}
  .lcd-freq input{font-size:30px}
  .dm.tag{font-size:10px}
  .rd{flex-basis:100%}
  .key{min-width:52px;padding:6px 6px 0}
  .rig-keys{gap:8px}
}
/* small display text stays solid (dots break it apart at that size); large text keeps the dot matrix, finer and brighter */
.dm.tag,.lcd-scale,.lcd-scale span,.lcd-freq .unit,.rxname{-webkit-mask-image:none;mask-image:none;text-shadow:0 0 5px rgba(80,235,255,.55)}
.lcd-freq input,.rd-screen .dm,.rig-pop .dm{-webkit-mask-size:2px 2px;mask-size:2px 2px;color:#7ff6ff}
.rd-screen .dm{font-size:23px}
.dm.tag{font-size:11px;font-weight:700;opacity:.95}
.lcd-scale{font-size:10px}
@media (max-width:520px){
  .rig-gap{flex-basis:100%;height:0}
  .rig-keys .af{order:3;margin-left:auto;flex-direction:row;gap:8px}
  .rig-keys .key.power{order:2}
  .rd-screen .dm{font-size:20px}
}

/* Tools: camera-in-hand tools only on phones and tablets */
@media (hover:hover) and (pointer:fine){.skill.phone-tool{display:none}}

/* ===== HF-1 v2: segment displays and a concentric, detailed main knob ===== */
@font-face{font-family:'DSEG7';src:url('/vendor/fonts/DSEG7Classic-Bold.woff2') format('woff2');font-display:block}
@font-face{font-family:'DSEG14';src:url('/vendor/fonts/DSEG14Classic-Bold.woff2') format('woff2');font-display:block}
/* glass: deep black with a faint blue cast, no dot grid */
.lcd{background:radial-gradient(ellipse at 50% 0%,rgba(40,90,110,.18),transparent 70%),linear-gradient(180deg,#020708,#041113)}
.seg7box{position:relative;flex:1;display:grid;justify-items:end}
.seg7box > *{grid-area:1/1}
.seg7box .ghost,.lcd-freq input.seg7{font:700 44px/1.1 'DSEG7',monospace;letter-spacing:.02em;text-align:right;-webkit-mask-image:none;mask-image:none}
.seg7box .ghost{color:rgba(95,242,255,.09);pointer-events:none;text-shadow:none}
.lcd-freq input.seg7{all:unset;font:700 44px/1.1 'DSEG7',monospace;width:100%;text-align:right;color:#6ff5ff;caret-color:#6ff5ff;
  text-shadow:0 0 6px rgba(90,240,255,.8),0 0 18px rgba(90,240,255,.35)}
.seg14{display:grid;justify-items:center}
.seg14 > *{grid-area:1/1;font:700 20px/1 'DSEG14',monospace;letter-spacing:.06em;white-space:pre}
.seg14 .ghost{color:rgba(95,242,255,.08)}
.seg14 .lit{color:#6ff5ff;text-shadow:0 0 6px rgba(90,240,255,.8),0 0 16px rgba(90,240,255,.3)}
.rig-pop .dm{-webkit-mask-image:none;mask-image:none;font:700 15px 'DSEG14',monospace;letter-spacing:.05em}
.segs{height:14px;gap:4px}
.segs i{background:rgba(95,242,255,.09);border-radius:1.5px;transform:skewX(-8deg)}
.segs i.on{background:#6ff5ff;box-shadow:0 0 7px rgba(90,240,255,.9)}
.segs i.over.on{background:#ff6b6b;box-shadow:0 0 7px rgba(255,90,90,.9)}

/* main knob: every layer centered on the same axis (the old fixed size pushed the ring to the upper left) */
.rig-main{gap:26px}
.ham-knob{display:block;width:150px;height:150px;margin:6px;background:none;box-shadow:none}
.ham-knob > *{position:absolute;border-radius:50%;width:auto;height:auto}
.ham-ticks{inset:-14px;pointer-events:none;
  background:repeating-conic-gradient(from -1deg,rgba(220,226,235,.75) 0 2deg,transparent 2deg 30deg),repeating-conic-gradient(from -.5deg,rgba(200,206,216,.35) 0 1deg,transparent 1deg 10deg);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 62%,#000 63%,#000 70%,transparent 71%)}
.ham-skirt{inset:0;background:radial-gradient(circle at 50% 40%,#2c2f35,#0c0d0f 72%);box-shadow:0 14px 26px rgba(0,0,0,.8),0 0 0 1px #050506,inset 0 2px 1px rgba(255,255,255,.08)}
.ham-dial{inset:7px;background:repeating-conic-gradient(from 0deg,#17181b 0 3deg,#3d4047 3deg 4.2deg,#17181b 4.2deg 6deg);
  box-shadow:inset 0 0 0 1px #000,inset 0 3px 4px rgba(255,255,255,.12),inset 0 -4px 6px rgba(0,0,0,.6)}
.ham-face{inset:21px;background:conic-gradient(from 20deg,#6f7480,#d0d4db,#7a7f8a,#3e424a,#9aa0aa,#e6e9ee,#80858f,#43474f,#6f7480);
  box-shadow:0 0 0 2px #0e0f12,0 0 0 3px rgba(255,255,255,.12),inset 0 2px 3px rgba(255,255,255,.45),inset 0 -3px 6px rgba(0,0,0,.6)}
.ham-sheen{inset:21px;background:repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),radial-gradient(circle at 50% 30%,rgba(255,255,255,.28),transparent 60%)}
.ham-hub{inset:62px;background:radial-gradient(circle at 50% 35%,#c9cdd4,#6c717b 70%);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -1px 2px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.45);pointer-events:none}
.ham-dimple-rot{inset:21px}
.ham-dimple-rot i{top:9%}
@media (max-width:520px){
  .rig-main{gap:18px}
  .ham-knob{width:104px;height:104px;margin:10px 4px 10px 10px}
  .ham-ticks{inset:-10px}
  .ham-dial{inset:5px}.ham-face,.ham-sheen,.ham-dimple-rot{inset:15px}.ham-hub{inset:43px}
  .seg7box .ghost,.lcd-freq input.seg7{font-size:27px}
  .seg14 > *{font-size:17px}
}
/* the typed frequency sits exactly over its ghost segments ('all:unset' had cleared its grid placement) */
.lcd-freq input.seg7{grid-area:1/1;display:block}
.seg14 .ghost{display:none}
/* bottom row: AF GAIN knob centered on the keys' line (its label hangs below), with more room before POWER */
.rig-keys{align-items:center;margin-bottom:22px}
.rig-keys .af{position:relative;margin-right:26px}
.rig-keys .af .rd-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:0;white-space:nowrap}
@media (max-width:520px){
  .rig-keys .af{flex-direction:column;margin-right:14px}
  .rig-keys .af .rd-label{position:absolute}
}
/* faceplate name centered; the model line sits on the same center line as "PEC"; RX light stays at the right */
.rig-top{position:relative;justify-content:center;align-items:center}
.rig-model{flex:none}
.rig-brand{line-height:1}
.rig-tx{position:absolute;right:10px;top:50%;transform:translateY(-70%)}
/* cyan down-arrow on each readout: tap the screen for the full list */
.rd-screen{position:relative}
.rd-caret{position:absolute;right:12px;top:50%;width:0;height:0;margin-top:-3px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #6ff5ff;
  filter:drop-shadow(0 0 4px rgba(90,240,255,.85));transition:transform .15s}
.rd-screen:has(+ .rig-pop) .rd-caret,.rd-screen.open .rd-caret{transform:rotate(180deg)}
/* bottom row: mode keys | receiver readout (centered) | AF GAIN | POWER */
.rig-keys{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px}
.mode-keys{display:flex;gap:10px}
.rx-rd{justify-self:center;width:min(260px,100%);flex:none}
.rx-rd .rd-screen{width:100%;padding-right:26px}
.rx-rd .rd-label{text-align:center;padding:0}
.rig-keys .rig-gap{display:none}
@media (max-width:520px){
  .rig-keys{grid-template-columns:1fr auto auto;row-gap:16px}
  .mode-keys{grid-column:1/-1;gap:8px}
  .rx-rd{grid-column:1/-1;width:100%}
  .rig-keys .key.power{grid-column:1;justify-self:start}
  .rig-keys .af{grid-column:3}
}
/* the receiver screen sits on the keys' center line; its label floats just above it */
.rx-rd{position:relative}
.rx-rd .rd-label{position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px}
.rx-rd .rd-screen{height:42px}
/* the receiver list uses readable text (station names are long for segment characters) */
.rig-pop.wide{width:min(320px,calc(100% - 12px))}
.rig-pop.wide .dm{font:600 14px/1.3 'DejaVu Sans Mono',Menlo,Consolas,monospace;letter-spacing:.02em;text-shadow:0 0 5px rgba(80,235,255,.5)}

/* ===== DX spots: a pull-out log sheet under the radio ===== */
@font-face{font-family:'Caveat';src:url('/vendor/fonts/caveat-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Caveat';src:url('/vendor/fonts/caveat-700.woff2') format('woff2');font-weight:700;font-display:swap}
.spot-drawer{position:relative;margin:-10px 34px 22px;display:flex;flex-direction:column;align-items:center}
.paper-wrap{width:100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.spot-drawer.open .paper-wrap{grid-template-rows:1fr}
.paper-wrap > .paper{min-height:0;overflow:hidden}
.paper{position:relative;color:#1d2a52;font-family:'Caveat',cursive;border-radius:0 0 4px 4px;
  /* notepad: cream stock, blue rules every 30px, red margin line, a soft curl shadow */
  background:
    linear-gradient(90deg,transparent 52px,rgba(214,60,60,.55) 52px,rgba(214,60,60,.55) 54px,transparent 54px),
    repeating-linear-gradient(180deg,transparent 0 29px,rgba(70,110,190,.35) 29px 30px),
    radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.5),transparent 60%),
    linear-gradient(180deg,#f7f1df,#efe6cc);
  box-shadow:0 12px 26px rgba(0,0,0,.45),inset 0 8px 10px -6px rgba(0,0,0,.35)}
.spot-drawer.open .paper{padding:14px 18px 10px 64px}
.paper-head{display:flex;justify-content:space-between;align-items:baseline;height:30px;font-size:24px;line-height:30px}
.paper-head b{font-weight:700;letter-spacing:.02em}
.paper-head span{font-size:19px;opacity:.8}
.paper-log{width:100%;border-collapse:collapse;font-size:21px;line-height:30px}
.paper-log th{font-weight:700;text-align:left;font-size:19px;height:30px;color:#2c3d78;border-bottom:1.5px solid rgba(29,42,82,.55)}
.paper-log td{height:60px;vertical-align:top;padding:0 8px 0 0;border:0}
.paper-log td small{display:block;font-size:17px;line-height:30px;opacity:.75}
.paper-log tr{cursor:pointer}
.paper-log tbody tr td:first-child b{display:inline-block;transform:rotate(var(--tilt,0deg))}
.paper-log tr:hover td{background:rgba(255,236,120,.35)}
.paper-ear{font-size:22px;color:#b33;width:24px}
.paper-note{margin:0;height:30px;line-height:30px;font-size:19px;opacity:.75}
.spot-tab{position:relative;z-index:2;margin-top:-1px;padding:6px 26px 9px;border-radius:0 0 12px 12px;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:linear-gradient(180deg,#24272c,#17191c);box-shadow:0 6px 12px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.06),0 0 0 1px #0c0d10;color:#8d939e;cursor:pointer}
.spot-tab span{font:700 9px Arial,sans-serif;letter-spacing:.24em}
.spot-tab i{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid #6ff5ff;filter:drop-shadow(0 0 4px rgba(90,240,255,.85));transition:transform .3s}
.spot-drawer.open .spot-tab i{transform:rotate(180deg)}
@media (max-width:520px){
  .spot-drawer{margin:-10px 14px 20px}
  .spot-drawer.open .paper{padding:12px 10px 8px 40px}
  .paper{background:
    linear-gradient(90deg,transparent 30px,rgba(214,60,60,.55) 30px,rgba(214,60,60,.55) 32px,transparent 32px),
    repeating-linear-gradient(180deg,transparent 0 29px,rgba(70,110,190,.35) 29px 30px),linear-gradient(180deg,#f7f1df,#efe6cc)}
  .paper-log{font-size:19px}.paper-log th:nth-child(3),.paper-log td:nth-child(3){display:none}
}
/* everything sits on the ruled lines: no top padding, each line exactly 30px */
.spot-drawer.open .paper{padding-top:0;padding-bottom:0}
.paper-head{padding-top:2px}
.paper-log th{height:29px}
/* close button on the log sheet, beside "Heard by" */
.paper-x-cell{text-align:right;padding:0}
.paper-x{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;vertical-align:middle;cursor:pointer;
  font:700 18px/1 Arial,sans-serif;color:#fbe9e9;background:radial-gradient(circle at 35% 30%,#b23a3a,#7a1414 70%);
  box-shadow:0 2px 3px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.paper-x:hover{background:radial-gradient(circle at 35% 30%,#c44444,#8a1717 70%)}
.paper-x:active{transform:translateY(1px)}
@media (max-width:520px){.paper-log th:nth-child(5),.paper-log td:nth-child(5){display:table-cell}}

/* ===== HF-1 on phones: holds together at any width and with Android/Samsung larger text ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:520px){
  .rig{padding:14px 10px 10px}
  .rig-top{flex-wrap:wrap;justify-content:center;row-gap:2px;padding:0 34px 10px}
  .rig-brand{font-size:min(18px,4.8vw)}
  .rig-model{font-size:min(10px,2.6vw);letter-spacing:.16em;white-space:nowrap}
  .rig-tx{right:4px;font-size:min(10px,2.6vw)}
  .rig-main{gap:12px}
  .ham-knob{width:min(104px,26vw);height:min(104px,26vw);margin:min(10px,2.6vw) 2px min(10px,2.6vw) min(10px,2.6vw)}
  .ham-ticks{inset:max(-10px,-2.6vw)}
  .ham-dial{inset:5px}.ham-face,.ham-sheen,.ham-dimple-rot{inset:15%}.ham-hub{inset:41%}
  .rig-lcd{min-width:0;padding:7px 8px 6px}
  .lcd-row{gap:6px;flex-wrap:nowrap;min-width:0}
  .dm.tag{font-size:min(11px,2.8vw);white-space:nowrap}
  .lcd-freq{gap:4px;min-width:0}
  .seg7box{min-width:0;overflow:hidden}
  .seg7box .ghost,.lcd-freq input.seg7{font-size:min(27px,7vw)}
  .lcd-freq .unit{font-size:min(12px,3vw)}
  .lcd-scale{font-size:min(10px,2.5vw);margin-left:12px}
  .rd-body{gap:6px}
  .rk{width:min(46px,12vw);height:44px;font-size:min(26px,6.5vw)}
  .rd-screen{min-width:0;overflow:hidden;padding:0 22px 0 8px}
  .seg14 > *{font-size:min(17px,4.4vw)}
  .rig-keys{column-gap:8px;row-gap:28px}
  .mode-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
  .mode-keys .key{min-width:0;width:100%;padding:6px 2px 0;font-size:min(12px,3.1vw);letter-spacing:.08em}
  .rig-keys .key.power{min-width:min(76px,20vw);font-size:min(12px,3.1vw)}
  .rd-label{font-size:min(9px,2.4vw);letter-spacing:.2em}
  .rig-status{font-size:min(11px,2.9vw)}
  .spot-tab span{font-size:min(9px,2.4vw)}
}
.seg7box{overflow:visible}
.lcd-freq input.seg7{width:auto;min-width:100%;field-sizing:content}

/* ===== EL-1 EchoLink unit (companion to the HF-1) ===== */
#el-card.card{background:none;border:0;padding:0;box-shadow:none;margin-top:6px}
.el-rig .rig-top{padding-bottom:12px}
.el-leds{gap:6px}
.led.tx{background:radial-gradient(circle at 35% 30%,#ffd0d0,#ff3b3b 55%,#8a0f0f);box-shadow:0 0 10px #ff3b3b}
.el-lcd{padding:10px 14px;border:3px solid #0a0b0d;outline:1px solid #3a3d44;display:flex;flex-direction:column;gap:6px}
.el-line{display:flex;align-items:center;gap:12px}
.el-line .seg14{justify-items:start;flex:1}
.el-line .seg14 > *{font-size:24px}
.el-msg{white-space:normal;line-height:1.4}
.el-info{margin:0;max-height:110px;overflow:auto;font-size:11px;white-space:pre-wrap;-webkit-mask-image:none;mask-image:none}
.el-form{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.el-formrow{display:flex;gap:12px;align-items:center}
.el-input{all:unset;box-sizing:border-box;flex:1;min-width:0;height:44px;padding:0 14px;border-radius:8px;border:2px solid #0a0b0d;outline:1px solid #3a3d44;
  font:700 18px 'DSEG14',monospace;letter-spacing:.06em;color:#6ff5ff;text-shadow:0 0 6px rgba(90,240,255,.7);text-transform:uppercase}
.el-input::placeholder{color:rgba(111,245,255,.25);text-shadow:none}
.el-search{margin-top:14px}
.el-search .el-input{width:100%;font:600 14px 'DejaVu Sans Mono',Menlo,monospace;text-transform:none}
.el-list{margin-top:8px;max-height:260px;overflow-y:auto;padding:6px;border:2px solid #0a0b0d;outline:1px solid #3a3d44}
.el-row{display:grid;grid-template-columns:auto 1fr auto;column-gap:10px;width:100%;text-align:left;padding:8px;border-radius:6px;color:#6ff5ff;
  font:600 14px/1.35 'DejaVu Sans Mono',Menlo,monospace;text-shadow:0 0 5px rgba(80,235,255,.45);background:none;border:0;cursor:pointer}
.el-row:hover{background:rgba(95,242,255,.08)}
.el-row small{grid-column:1/-1;font-size:12px;opacity:.7}
.el-node{opacity:.7}
.el-st{font-size:11px;padding:1px 6px;border-radius:3px;border:1px solid currentColor}
.el-st.busy{color:#ffb86b}
.el-empty{color:#6ff5ff;opacity:.7;font:13px 'DejaVu Sans Mono',monospace;margin:8px}
.el-keys{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 6px}
.el-keys .key{min-width:84px}
.el-keys .key:disabled{opacity:.55;cursor:default}
.el-ptt{width:118px;height:118px;flex:none;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#e8ebf0;cursor:pointer;touch-action:none;user-select:none;
  background:radial-gradient(circle at 40% 30%,#5d616a,#2d3036 60%,#1b1d21);box-shadow:0 7px 0 #0e0f12,0 10px 18px rgba(0,0,0,.65),inset 0 2px 1px rgba(255,255,255,.25),0 0 0 4px #121316,0 0 0 5px #3a3d44}
.el-ptt span{font:800 24px/1 Arial,sans-serif;letter-spacing:.14em}
.el-ptt small{font:600 10px Arial,sans-serif;letter-spacing:.08em;opacity:.7}
.el-ptt:disabled{opacity:.5;cursor:default}
.el-ptt.tx{background:radial-gradient(circle at 40% 30%,#ff7a7a,#c41f1f 60%,#7a0d0d);transform:translateY(5px);box-shadow:0 2px 0 #0e0f12,0 4px 10px rgba(0,0,0,.6),0 0 22px rgba(255,59,59,.65),0 0 0 4px #121316,0 0 0 5px #3a3d44}
.el-ptt.rx{box-shadow:0 7px 0 #0e0f12,0 10px 18px rgba(0,0,0,.65),0 0 0 4px #121316,0 0 0 5px #2ee66b,0 0 16px rgba(46,230,107,.5)}
@media (max-width:520px){
  .el-line .seg14 > *{font-size:min(20px,5.2vw)}
  .el-ptt{width:min(104px,27vw);height:min(104px,27vw)}
  .el-keys .key{min-width:min(76px,20vw);font-size:min(12px,3.1vw)}
  .el-input{font-size:min(16px,4.2vw)}
}
.rig-status a{color:#9aa3b0;text-decoration:underline;text-decoration-color:rgba(154,163,176,.4);text-underline-offset:2px}
.rig-status a:hover{color:#c9ced8}
/* Ham radio conditions: four compact tiles in one row */
#ham-info .ham-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#ham-info .ham-grid div{padding:.35rem .25rem;border-radius:10px}
#ham-info .ham-grid b{font-size:1rem;line-height:1.25}
#ham-info .ham-grid span{display:block;font-size:.6rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Earth layers: pull-down panel from a tab at the top of the globe ===== */
#view-world .layer-bar{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;overflow:visible;right:auto;left:auto;top:auto}
.layer-pull{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:6;width:min(560px,calc(100% - 120px));display:flex;flex-direction:column;align-items:center}
@media (min-width:821px){.layer-pull{left:calc((100% - 374px) / 2);width:min(560px,calc(100% - 520px))}}
.lp-wrap{width:100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.layer-pull.open .lp-wrap{grid-template-rows:1fr}
.lp-wrap > .lp-panel{min-height:0;overflow:hidden}
.lp-panel{border-radius:0 0 14px 14px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),linear-gradient(180deg,#2b2e33,#1b1d21);
  box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 1px #0c0d10,inset 0 -1px 0 rgba(255,255,255,.06)}
.layer-pull.open .lp-panel{padding:calc(14px + var(--safe-t)) 14px 14px}
.lp-tab{position:relative;margin-top:-1px;padding:calc(6px + var(--safe-t)) 26px 9px;border-radius:0 0 12px 12px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:#8d939e;
  background:linear-gradient(180deg,#24272c,#17191c);box-shadow:0 6px 12px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.06),0 0 0 1px #0c0d10}
.layer-pull.open .lp-tab{padding-top:6px}
.lp-tab span{font:700 9px Arial,sans-serif;letter-spacing:.24em}
.lp-tab i{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid #6ff5ff;filter:drop-shadow(0 0 4px rgba(90,240,255,.85));transition:transform .3s}
.layer-pull.open .lp-tab i{transform:rotate(180deg)}
.layer-key{position:relative;height:46px;min-width:0;padding:7px 6px 0;border-radius:9px;color:#d7dbe2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;
  font:700 11px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#5b5f68 0%,#3a3d44 45%,#2b2e34 100%);
  box-shadow:0 4px 0 #101114,0 6px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,0,0,.35);transition:transform .05s,box-shadow .05s}
.layer-key:active{transform:translateY(3px);box-shadow:0 1px 0 #101114,0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.layer-key span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.layer-key .led{width:18px;height:4px;border-radius:2px}
.layer-key.on .led{background:radial-gradient(circle at 35% 30%,#d6ffd6,#2ee66b 55%,#0f7a33);box-shadow:0 0 9px #2ee66b}
@media (max-width:820px){
  .layer-pull{width:calc(100% - 110px)}
  #view-world .layer-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .layer-key{font-size:min(11px,2.9vw)}
}
/* layers in Lilly's own style (not the radio's hardware): frosted glass, small rectangular toggles; "on" looks pressed in and highlighted */
.lp-panel{background:rgba(13,15,27,.82);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 12px 30px rgba(0,0,0,.5);border:1px solid var(--line2);border-top:0}
.layer-pull.open .lp-panel{padding:calc(10px + var(--safe-t)) 10px 10px}
.lp-tab{background:rgba(13,15,27,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line2);border-top:0;
  box-shadow:0 6px 14px rgba(0,0,0,.4);color:var(--muted)}
#view-world .layer-bar{gap:6px}
.layer-key{height:32px;padding:0 10px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font:500 12.5px/1 var(--font, system-ui),sans-serif;letter-spacing:0;text-transform:none;color:var(--muted);
  background:rgba(255,255,255,.035);border:1px solid var(--line2);box-shadow:none;transition:background .15s,border-color .15s,box-shadow .15s,color .15s}
.layer-key:hover{background:rgba(255,255,255,.06);color:var(--text, #e8eaf2)}
.layer-key.on,.layer-key:active{transform:none;color:#e6dcff;background:rgba(139,108,255,.16);border-color:rgba(139,108,255,.55);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55),inset 0 0 0 1px rgba(139,108,255,.15)}
@media (max-width:820px){#view-world .layer-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.layer-key{font-size:12px;padding:0 6px}}
.layer-pull:not(.open) .lp-panel{border:0;box-shadow:none}
/* traffic camera snapshot in Details */
.cam-img{display:block;width:100%;border-radius:10px;margin:8px 0 6px;background:#000;border:1px solid var(--line2)}
/* satellite <-> road map blend, under the layer toggles */
.map-blend{display:flex;align-items:center;gap:10px;margin-top:10px;padding:2px 4px;font-size:12px;color:var(--muted)}
.map-blend input{flex:1;accent-color:#8b6cff}

/* live traffic camera card in chat */
.cam-card{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.03);max-width:460px}
.cam-card-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;cursor:pointer}
.cam-card-meta{padding:8px 12px 10px}