/* ---------- tokens ---------- */
:root{
  --bg:#E6EBEA; --panel:#FBFCFB; --panel-2:#F0F4F3; --panel-3:#E7EDEB;
  --line:#C7D3D0; --line-soft:#DCE4E2;
  --ink:#131C1A; --ink-2:#4E5C58; --ink-3:#7C8A86;
  --accent:#0A6B62; --accent-2:#0E8A7E; --accent-wash:#D6E9E5;
  --live:#B0500D; --live-wash:#F7E3D2;
  --over:#A32A24; --over-wash:#F5DEDC;
  --done:#37704A; --cancel:#8A918F;
  --on-accent:#FFFFFF; --on-live:#FFFFFF;
  --p0:#0A6B62; --p1:#2E5E8A; --p2:#8A5A17; --p3:#6B3F7A; --p4:#356B3E; --p5:#8A3A46;
  --shadow:0 1px 2px rgba(19,28,26,.06), 0 8px 24px -12px rgba(19,28,26,.22);
  --shadow-lg:0 2px 6px rgba(19,28,26,.08), 0 28px 60px -22px rgba(19,28,26,.38);
  --radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C1110; --panel:#141A19; --panel-2:#1B2423; --panel-3:#212B2A;
    --line:#2C3836; --line-soft:#212B29;
    --ink:#E4EBE9; --ink-2:#A3B1AD; --ink-3:#75837F;
    --accent:#45CEBB; --accent-2:#6FE0D0; --accent-wash:#122F2B;
    --live:#F1953F; --live-wash:#34210E;
    --over:#EF6F69; --over-wash:#381B1A;
    --done:#6CC98B; --cancel:#6E7A77;
    --on-accent:#07201D; --on-live:#241202;
    --p0:#45CEBB; --p1:#83B7E8; --p2:#E0AE63; --p3:#C79BD6; --p4:#83CD97; --p5:#E68D99;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 28px 60px -22px rgba(0,0,0,.85);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1110; --panel:#141A19; --panel-2:#1B2423; --panel-3:#212B2A;
  --line:#2C3836; --line-soft:#212B29;
  --ink:#E4EBE9; --ink-2:#A3B1AD; --ink-3:#75837F;
  --accent:#45CEBB; --accent-2:#6FE0D0; --accent-wash:#122F2B;
  --live:#F1953F; --live-wash:#34210E;
  --over:#EF6F69; --over-wash:#381B1A;
  --done:#6CC98B; --cancel:#6E7A77;
  --on-accent:#07201D; --on-live:#241202;
  --p0:#45CEBB; --p1:#83B7E8; --p2:#E0AE63; --p3:#C79BD6; --p4:#83CD97; --p5:#E68D99;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 28px 60px -22px rgba(0,0,0,.85);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%; overflow-x:hidden;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0; text-wrap:balance}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::selection{background:var(--accent-wash); color:var(--ink)}

.lbl{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- chrome ---------- */
.bar{
  position:sticky; top:0; z-index:40; background:var(--panel);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:10px 18px;
}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand .mk{
  width:28px; height:28px; border-radius:7px; background:var(--ink);
  display:grid; place-items:center; flex:none;
}
.brand .mk i{
  display:block; width:12px; height:12px; border-radius:50%;
  border:1.5px solid var(--panel); position:relative;
}
.brand .mk i::after{
  content:""; position:absolute; left:50%; top:2px; width:1.5px; height:4.5px;
  background:var(--panel); transform-origin:bottom center; transform:translateX(-50%) rotate(48deg);
}
.brand h1{font-size:16px; font-weight:700; letter-spacing:-.015em}
.brand span{display:block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}

.datenav{display:flex; align-items:center; gap:2px; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:3px}
.datenav .d{padding:4px 12px; text-align:center; min-width:172px}
.datenav .d b{display:block; font-size:13px; font-weight:600; letter-spacing:-.01em}
.datenav .d em{display:block; font-style:normal; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.datenav .d input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}

.btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:6px 12px; border-radius:8px; font-size:13px; font-weight:500;
  transition:background .13s ease, border-color .13s ease, transform .08s ease;
}
.btn:hover{background:var(--panel-3); border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-2)}
.btn.ghost:hover{background:var(--panel-2); color:var(--ink)}
.btn.solid{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.btn.solid:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.live{background:var(--live); border-color:var(--live); color:var(--on-live); font-weight:600}
.btn.sm{padding:4px 9px; font-size:12px; border-radius:7px}
.btn.danger{color:var(--over); border-color:var(--line)}
.btn.danger:hover{background:var(--over-wash); border-color:var(--over)}
.btn[disabled]{opacity:.4; pointer-events:none}
.btn svg{width:14px; height:14px; flex:none}

/* ---------- layout ---------- */
.wrap{max-width:1400px; margin:0 auto; padding:16px 18px 60px}
.grid{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:16px; align-items:start}
@media (max-width:1180px){ .grid{grid-template-columns:minmax(0,1fr) 322px} }
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.phead{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line-soft)}
.phead h2{font-size:12.5px; font-weight:600; letter-spacing:.02em}
.phead .lbl{margin-left:auto}

/* ---------- rail ---------- */
.railwrap{overflow:hidden}
.railscroll{overflow-y:auto; max-height:min(74vh,1000px); position:relative; scrollbar-width:thin}
.rail{display:grid; grid-template-columns:54px minmax(0,1fr); position:relative}
.hours{position:relative}
.hour{height:56px; position:relative}
.hour>span{
  position:absolute; top:-7px; right:9px; font-size:10.5px; color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.hour:first-child>span{top:1px}
.canvas{position:relative; border-left:1px solid var(--line)}
.canvas .ln{position:absolute; left:0; right:0; height:1px; background:var(--line-soft)}
.canvas .ln.half{background:transparent; border-top:1px dashed var(--line-soft); opacity:.65; height:0}
.canvas .band{position:absolute; left:0; right:0; background:var(--panel-2); opacity:.55}

.nowline{position:absolute; left:0; right:0; height:0; border-top:1.5px solid var(--live); z-index:6; pointer-events:none}
.nowline::before{content:""; position:absolute; left:-4px; top:-4px; width:7px; height:7px; border-radius:50%; background:var(--live)}
.nowline b{
  position:absolute; right:4px; top:-9px; background:var(--live); color:var(--on-live);
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600; letter-spacing:.06em;
  padding:1px 5px; border-radius:4px;
}

.blk{
  position:absolute; border-radius:7px; padding:4px 8px 4px 10px; overflow:hidden; cursor:grab;
  background:var(--panel-2); border:1px solid var(--line); box-shadow:0 1px 1px rgba(0,0,0,.05);
  touch-action:none; user-select:none; z-index:2;
  transition:box-shadow .13s ease, border-color .13s ease;
}
.blk::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--pc,var(--accent))}
.blk:hover{border-color:var(--ink-3); z-index:5; box-shadow:var(--shadow)}
.blk.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-wash), var(--shadow); z-index:5}
.blk.dragging{cursor:grabbing; z-index:20; box-shadow:var(--shadow-lg)}
.blk .t{font-size:12px; font-weight:600; line-height:1.25; letter-spacing:-.005em; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.blk .m{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-2); font-variant-numeric:tabular-nums; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.blk .grip{position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize}
.blk .grip::after{content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:20px; height:2px; border-radius:2px; background:var(--ink-3); opacity:0}
.blk:hover .grip::after{opacity:.45}
.blk.unplanned{border-style:dashed}
.blk.running{background:var(--live-wash); border-color:var(--live)}
.blk.running::before{background:var(--live)}
.blk.done{background:var(--panel-2)}
.blk.done .t{color:var(--ink-2)}
.blk.cancelled{opacity:.5}
.blk.cancelled .t{text-decoration:line-through; text-decoration-thickness:1px}
.blk.short{padding-top:1px}
.blk.short .m{display:none}
.blk.tiny .t{font-size:11px}

.raillegend{
  display:flex; gap:6px 16px; flex-wrap:wrap; padding:9px 14px;
  border-top:1px solid var(--line-soft); background:var(--panel-2);
  border-radius:0 0 var(--radius) var(--radius);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.02em; color:var(--ink-3);
}
.raillegend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.raillegend .tip{margin-left:auto}

/* ---------- side panels ---------- */
.side{display:flex; flex-direction:column; gap:16px}
.now{padding:14px}
.now .idle{color:var(--ink-3); font-size:13px; padding:6px 0 2px}
.now .ttl{font-size:16px; font-weight:700; letter-spacing:-.015em; margin:2px 0 8px; text-wrap:balance}
.bigclock{font-family:"IBM Plex Mono",monospace; font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.now.on{border-color:var(--live)}
.now.on .bigclock{color:var(--live)}
.pulse{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--live); margin-right:7px; vertical-align:2px; animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .pulse{animation:none} }

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); margin:12px 0}
.stat{background:var(--panel); padding:9px 4px 8px; text-align:center}
.stat b{display:block; font-family:"IBM Plex Mono",monospace; font-size:17px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.stat.neg b{color:var(--over)}
.stat .lbl{margin-top:2px}

.meter{height:7px; border-radius:4px; background:var(--panel-3); overflow:hidden; display:flex}
.meter i{display:block; height:100%}
.meter i.sp{background:var(--accent)}
.meter i.ov{background:var(--over)}

.totals{padding:14px}
.daybar{height:20px; border-radius:5px; background:var(--panel-3); position:relative; overflow:hidden; margin:10px 0 6px; border:1px solid var(--line-soft)}
.daybar i{position:absolute; top:0; bottom:0; background:var(--accent); opacity:.75}
.daybar i.u{background:var(--live)}
.daybar i.c{background:var(--cancel); opacity:.4}
.daybar .nw{position:absolute; top:0; bottom:0; width:1.5px; background:var(--ink)}
.dayticks{display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--ink-3)}

/* ---------- ledger ---------- */
.ledger .rows{max-height:min(46vh,520px); overflow-y:auto; scrollbar-width:thin}
.grp{padding:8px 14px 3px; display:flex; align-items:center; gap:8px; position:sticky; top:0; background:var(--panel); z-index:2}
.grp .lbl{flex:none}
.grp hr{flex:1; border:0; border-top:1px solid var(--line-soft); margin:0}
.row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:8px 14px; cursor:pointer; border-left:2px solid transparent; position:relative}
.row:hover{background:var(--panel-2)}
.row.sel{background:var(--accent-wash); border-left-color:var(--accent)}
.row .slot{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.row .name{font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.005em}
.row.cancelled .name{text-decoration:line-through; color:var(--ink-3)}
.row .rt{font-family:"IBM Plex Mono",monospace; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink-2)}
.row .rt.neg{color:var(--over)}
.row .sub{grid-column:2/4; display:flex; align-items:center; gap:8px; margin-top:1px}
.row .sub .meter{flex:1; height:4px}
.empty{padding:22px 14px; text-align:center; color:var(--ink-3); font-size:13px}

.chip{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:1px 7px 1px 4px; border-radius:20px; white-space:nowrap;
  color:var(--pc,var(--accent)); background:color-mix(in srgb, var(--pc,var(--accent)) 13%, transparent);
}
.chip .av{width:15px; height:15px; border-radius:50%; display:grid; place-items:center; font-size:8.5px; font-weight:700; color:var(--panel); background:var(--pc,var(--accent)); font-family:"IBM Plex Mono",monospace}
.pill{font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:4px; background:var(--panel-3); color:var(--ink-2)}
.pill.running{background:var(--live); color:var(--on-live)}
.pill.paused{background:var(--live-wash); color:var(--live)}
.pill.done{background:color-mix(in srgb, var(--done) 16%, transparent); color:var(--done)}
.pill.cancelled{background:var(--panel-3); color:var(--cancel)}
.pill.over{background:var(--over-wash); color:var(--over)}

/* ---------- drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(8,14,13,.42); z-index:60; opacity:0; pointer-events:none; transition:opacity .18s ease}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); z-index:70;
  background:var(--panel); border-left:1px solid var(--line); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; transform:translateX(102%); transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.drawer.on{transform:none}
@media (prefers-reduced-motion:reduce){ .drawer{transition:none} .scrim{transition:none} }
.drawer header{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line-soft)}
.drawer header h2{font-size:14px; font-weight:700; letter-spacing:-.01em; margin-right:auto}
.dbody{overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:16px; flex:1; scrollbar-width:thin}
.dbody>*{flex:0 0 auto}
.sec{display:flex; flex-direction:column; gap:8px}
.sec>*{flex:0 0 auto}
.sec>.lbl{display:flex; align-items:center; gap:8px}
.sec>.lbl::after{content:""; flex:1; border-top:1px solid var(--line-soft)}
.f{display:flex; flex-direction:column; gap:4px}
.f>label{font-size:11.5px; color:var(--ink-2); font-weight:500}
.inp{
  background:var(--panel-2); border:1px solid var(--line); border-radius:7px;
  padding:7px 9px; font-size:13px; width:100%; transition:border-color .13s ease;
}
.inp:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 2px var(--accent-wash)}
textarea.inp{resize:vertical; min-height:56px; font-family:inherit}
.two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.three{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px}
.btnrow{display:flex; gap:6px; flex-wrap:wrap}
.readout{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:8px; overflow:hidden}
.readout div{background:var(--panel-2); padding:8px 6px; text-align:center}
.readout b{display:block; font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
.readout .neg b{color:var(--over)}
.sess{display:flex; flex-direction:column; gap:0; border:1px solid var(--line-soft); border-radius:8px; overflow:hidden}
.sess div{display:flex; align-items:center; gap:8px; padding:6px 9px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-variant-numeric:tabular-nums; background:var(--panel-2)}
.sess div+div{border-top:1px solid var(--line-soft)}
.sess div span:last-child{margin-left:auto; color:var(--ink-2)}
.sess div.open{background:var(--live-wash); color:var(--live)}
.hint{font-size:11.5px; color:var(--ink-3); line-height:1.5}
.hint code{font-family:"IBM Plex Mono",monospace; font-size:11px; background:var(--panel-2); padding:1px 4px; border-radius:3px}
a.btn{text-decoration:none}

/* ---------- modal ---------- */
.modal{
  position:fixed; z-index:80; left:50%; top:50%; transform:translate(-50%,-48%) scale(.98);
  width:min(480px,calc(100% - 28px)); max-height:82vh; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.modal.on{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.modal header{display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line-soft)}
.modal header h2{font-size:14px; font-weight:700; margin-right:auto}
.mbody{padding:15px; overflow-y:auto; display:flex; flex-direction:column; gap:12px}
.mbody>*{flex:0 0 auto}
.person{display:grid; grid-template-columns:auto 1fr 1fr auto; gap:7px; align-items:center}
.person .av{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--panel); background:var(--pc); font-family:"IBM Plex Mono",monospace}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:100;
  background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:8px; font-size:13px; font-weight:500;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; max-width:90vw;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

.banner{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; background:var(--accent-wash); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; font-size:12.5px; color:var(--ink-2)}
.banner b{color:var(--ink)}
.banner>span{flex:1 1 220px; min-width:0}
.banner .btn{flex:none; margin-left:auto}
@media (max-width:760px){ .banner .btn{margin-left:0; width:100%; justify-content:center} }
@media (pointer:coarse){
  .blk{touch-action:auto; cursor:pointer}
  .blk .grip{display:none}
  .btn{padding:9px 13px}
  .btn.sm{padding:7px 11px}
  .row{padding:11px 14px}
  .inp{padding:9px 10px; font-size:16px}
  .datenav .btn.ghost.sm{padding:7px 12px}
}
@media (max-width:920px){
  .btn .txt{display:none}
  .btn{padding:9px 11px}
  .btn.solid .txt{display:inline}
  .brand span{display:none}
}
@media (max-width:760px){
  .wrap{padding:12px 11px calc(50px + env(safe-area-inset-bottom))}
  .bar{position:static; padding:9px 11px; gap:8px; row-gap:9px}
  .brand h1{font-size:15px}
  .brand{margin-right:auto}
  .brand span{display:none}
  .datenav{order:9; flex:1 1 100%}
  .datenav .d{flex:1; min-width:0}
  .datenav .d b{font-size:12.5px}
  .btn .txt{display:none}
  .btn{padding:9px 11px}
  .btn.solid .txt{display:inline}
  .railscroll{max-height:min(62vh,720px)}
  .rail{grid-template-columns:44px minmax(0,1fr)}
  .hour>span{right:6px; font-size:10px}
  .raillegend .tip{margin-left:0; flex-basis:100%}
  .side{gap:12px}
  .grid{gap:12px}
  .drawer{width:100%; border-left:0}
  .modal{width:calc(100% - 20px); max-height:88vh}
  .bigclock{font-size:30px}
}
@media (max-width:400px){
  .stat b, .readout b{font-size:14px}
  .lbl{font-size:9.5px; letter-spacing:.1em}
}

/* ================= sign-in, join and shell additions ================= */
.gate{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:grid; place-items:center; padding:24px 16px; overflow-y:auto;
}
.gate[hidden]{display:none}
.card{
  width:min(420px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.card .mark{display:flex; align-items:center; gap:11px; margin-bottom:2px}
.card .mark .mk{width:34px; height:34px; border-radius:9px; background:var(--ink); display:grid; place-items:center}
.card .mark .mk i{display:block; width:15px; height:15px; border-radius:50%; border:1.6px solid var(--panel); position:relative}
.card .mark .mk i::after{content:""; position:absolute; left:50%; top:2px; width:1.6px; height:5.5px; background:var(--panel); transform-origin:bottom center; transform:translateX(-50%) rotate(48deg)}
.card h1{font-size:19px; font-weight:700; letter-spacing:-.02em}
.card .lede{font-size:13px; color:var(--ink-2); line-height:1.5}
.card .btn{justify-content:center}
.card .btn.solid{padding:10px 14px; font-size:14px}
.tabs{display:flex; gap:2px; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:3px}
.tabs button{flex:1; border:0; background:transparent; padding:7px 10px; border-radius:7px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.err{font-size:12.5px; color:var(--over); background:var(--over-wash); border:1px solid var(--over); border-radius:7px; padding:7px 10px}
.err[hidden]{display:none}
.gate .foot{font-size:11.5px; color:var(--ink-3); text-align:center; line-height:1.5}

.wspick{display:flex; align-items:center; gap:6px}
.wspick select{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:6px 9px; font-size:13px; max-width:190px;
}
.who{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2)}
.who .av{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--panel); background:var(--pc,var(--accent)); font-family:"IBM Plex Mono",monospace}
.offline{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90;
  background:var(--over); color:#fff; padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600;
}
.offline[hidden]{display:none}
.readonly{opacity:.55; pointer-events:none}
.calbox{
  display:flex; gap:6px; align-items:center; background:var(--panel-2);
  border:1px solid var(--line); border-radius:8px; padding:6px 8px;
}
.calbox code{flex:1; font-family:"IBM Plex Mono",monospace; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
@media (max-width:760px){
  .wspick select{max-width:120px}
  .who span.nm{display:none}
}

/* ================= voice ================= */
.btn.mic{position:relative}
.btn.mic.on{background:var(--live); border-color:var(--live); color:var(--on-live)}
.btn.mic.on svg{animation:micpulse 1.4s ease-in-out infinite}
@keyframes micpulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){ .btn.mic.on svg{animation:none} }

.vpanel{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:95;
  width:min(560px, calc(100% - 24px));
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
}
.vpanel[hidden]{display:none}
.vhead{display:flex; align-items:center; gap:10px}
.vhead .lbl{margin-right:auto}
.vdot{width:9px; height:9px; border-radius:50%; background:var(--ink-3); flex:none}
.vdot.live{background:var(--live); animation:micpulse 1.2s ease-in-out infinite}
.vdot.ok{background:var(--done)}
.vdot.bad{background:var(--over)}
.vheard{
  font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.35; min-height:24px;
  text-wrap:balance;
}
.vheard .ph{color:var(--ink-3); font-weight:400; font-size:14px; letter-spacing:0}
.vdid{font-size:12.5px; color:var(--ink-2)}
.vdid b{color:var(--ink)}
.vdid.bad{color:var(--over)}
.vbar{display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.vbar .inp{flex:1; min-width:160px}
.vex{display:flex; gap:6px; flex-wrap:wrap}
.vex button{
  background:var(--panel-2); border:1px solid var(--line-soft); border-radius:20px;
  padding:4px 10px; font-size:11.5px; color:var(--ink-2); cursor:pointer;
  font-family:"IBM Plex Mono",monospace;
}
.vex button:hover{border-color:var(--ink-3); color:var(--ink)}
.dictate{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:7px; background:var(--panel);
  color:var(--ink-2);
}
.dictate:hover{color:var(--ink); border-color:var(--ink-3)}
.dictate.on{background:var(--live); border-color:var(--live); color:var(--on-live)}
.dictate svg{width:13px; height:13px}
.fieldwrap{position:relative}
.fieldwrap .inp{padding-right:40px}
.fieldwrap textarea.inp{padding-right:40px}
.fieldwrap .dictate.ta{top:8px; transform:none}

/* ================= profile ================= */
.who{cursor:pointer; border-radius:20px; padding:3px 4px 3px 3px}
.who:hover{background:var(--panel-2)}
.pcard{display:flex; gap:12px; align-items:center}
.pcard .big{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-size:16px; font-weight:700; color:var(--panel); background:var(--pc,var(--accent));
  font-family:"IBM Plex Mono",monospace; flex:none;
}
.pcard b{font-size:15px; letter-spacing:-.01em}
.pcard .slot{display:block}
.switchrow{display:flex; align-items:center; gap:10px; padding:7px 0}
.switchrow span{flex:1; font-size:12.5px}
.switchrow input{width:17px; height:17px; accent-color:var(--accent)}
.person{cursor:pointer; border-radius:9px; padding:4px; margin:-4px}
.person:hover{background:var(--panel-2)}
.tag{
  font-size:10.5px; font-family:"IBM Plex Mono",monospace; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}