/* ============ Final v34 — matte-black presenter shell (loaded last) ============
   Screen index on the left, the phone in the centre, controls on the right. Geist type.
   Scope: the page around the phone only. Nothing inside .screen changes.
   Colour tone after meltkit.com: #0B0B0B page, near-white text, 60% white secondary. */

body{
  --k-bg:#0B0B0B; --k-panel:#121212; --k-raise:#191919; --k-hover:#1F1F1F; --k-on:#F4F4F4;
  --k-line:rgba(255,255,255,.07); --k-line-2:rgba(255,255,255,.12);
  --k-text:#EFEFEF; --k-dim:rgba(255,255,255,.6); --k-faint:rgba(255,255,255,.36);
  --k-font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --k-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--k-bg);background-image:none;
}
.topbar,.panel,.panel-l,.caption,.ns-ov{font-family:var(--k-font);color:var(--k-text);letter-spacing:-.01em;color-scheme:dark}
.topbar :focus-visible,.panel :focus-visible,.panel-l :focus-visible,.ns-ov :focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}
.panel,.panel-l #scrIndex,.ns-box{scrollbar-width:thin;scrollbar-color:#2A2A2A transparent}

/* ---------- top bar ---------- */
.topbar{max-width:none;height:56px;padding:0 14px 0 18px}
.tb-brand{gap:10px}
.tb-brand .frh-appicon{box-shadow:none}
.tb-titles{flex-direction:row;align-items:baseline;gap:10px}
.tb-titles strong{font-size:14px;font-weight:500;letter-spacing:-.015em}
.tb-titles span{font-size:13px;color:var(--k-faint)}
.tb-ver{font:500 11px/1 var(--k-mono);letter-spacing:0;color:var(--k-dim);padding:4px 7px;border-radius:6px;border:1px solid var(--k-line-2)}
.tb-right{gap:8px}
.tb-chip,.tb-chip.tb-new,button.tb-chip.tb-new{height:32px;padding:0 13px;gap:0;border-radius:99px;background:transparent;border:1px solid var(--k-line-2);color:var(--k-dim);font:500 13px var(--k-font);letter-spacing:-.01em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tb-chip.tb-new b{color:var(--k-text);font-weight:500;margin-right:5px;font-variant-numeric:tabular-nums}
.tb-chip.tb-new:hover{background:var(--k-hover);color:var(--k-text);border-color:rgba(255,255,255,.18)}
.tb-meta{font-size:12.5px;color:var(--k-faint);margin:0 6px}
.tb-btn{height:32px;padding:0 14px;gap:7px;border-radius:99px;border:0;background:var(--k-on);color:#0B0B0B;font:500 13px var(--k-font);letter-spacing:-.01em}
.tb-btn:hover{background:#fff;border:0}

/* ---------- three columns ---------- */
.stage{display:grid;grid-template-columns:292px minmax(0,1fr) 356px;gap:12px;max-width:none;height:calc(100vh - 56px);margin:0;padding:0 12px 12px;align-items:stretch;overflow:hidden}
.panel-l,.panel{min-height:0;height:100%}
.panel-l{display:flex;flex-direction:column}
.panel{overflow:auto;gap:10px;padding:0;overscroll-behavior:contain}
.panel>.card,.panel-l>.card{background:var(--k-panel);border:1px solid var(--k-line);border-radius:18px;box-shadow:none;padding:16px}
.panel .card-h,.panel-l .card-h{gap:10px;margin-bottom:12px}
.panel .card-ic{display:none}
.panel .card-h h2,.panel-l .card-h h2{font-size:14px;font-weight:500;letter-spacing:-.015em}
.panel .card-h p,.panel-l .card-h p{font-size:12.5px;color:var(--k-faint);margin-top:3px}
.panel .card-h .live{background:rgba(52,199,89,.12);color:#7BE09A;font-weight:500;font-size:11.5px;align-self:flex-start}
.panel .card-h .live i{background:#34C759}

/* ---------- centre: the phone on its canvas ---------- */
.device-col{position:relative;top:auto;height:100%;justify-content:center;background:#1B1B1B;border:1px solid var(--k-line);border-radius:18px;overflow:hidden}
.device-col::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(42% 40% at 50% 44%,rgba(255,255,255,.055),rgba(255,255,255,0) 72%)}
.device-fit{z-index:1}
/* v36: clip the screen to its rounded shape. Blurred bars (backdrop-filter) inside the scaled phone escaped
   overflow:hidden + border-radius and showed square corners. */
.screen{clip-path:inset(0 round 56px)}
.iphone{box-shadow:0 0 0 1px rgba(255,255,255,.05),0 40px 80px -36px rgba(0,0,0,.95),0 12px 30px -18px rgba(0,0,0,.8)}
.caption{position:relative;z-index:1;margin-top:18px;min-height:0;max-width:480px}
.cap-top{gap:10px;font-size:13.5px;font-weight:500;color:var(--k-text)}
/* v37: More / Less / Hide for the note */
.cap-ctl{display:inline-flex;gap:4px;margin-left:2px}
.cap-ctl button{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:99px;border:1px solid var(--k-line-2);background:transparent;color:var(--k-dim);font:500 11.5px var(--k-font);letter-spacing:-.005em;cursor:pointer;transition:background .2s,color .2s}
.cap-ctl button:hover{background:var(--k-hover);color:var(--k-text)}
#caption.clamp .cap-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.1em}
#caption.hide .cap-note{display:none}
.cap-num{font:500 11px/1 var(--k-mono);color:var(--k-dim);background:var(--k-raise);border:1px solid var(--k-line);border-radius:6px;padding:4px 7px}
.cap-note{margin-top:7px;font-size:13px;line-height:1.55;color:var(--k-dim);letter-spacing:-.005em}

/* ---------- left: jump to any screen ---------- */
.panel-l>.scr-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 6px 6px}
.scr-card .card-h{padding:0 10px}
.scr-find{display:flex;align-items:center;gap:8px;height:36px;margin:0 6px 10px;padding:0 8px 0 10px;border-radius:10px;background:var(--k-raise);border:1px solid var(--k-line);color:var(--k-faint);cursor:text;transition:border-color .2s}
.scr-find:focus-within{border-color:rgba(255,255,255,.2)}
.scr-find input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--k-text);font:400 13px var(--k-font);letter-spacing:-.01em}
.scr-find input:focus-visible{outline:0}
.scr-find input::placeholder{color:var(--k-faint)}
.scr-find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.scr-find kbd{font:500 11px/1 var(--k-mono);color:var(--k-faint);border:1px solid var(--k-line-2);border-radius:5px;padding:3px 6px}
.scr-find:focus-within kbd{visibility:hidden}
.panel-l #scrIndex{flex:1;min-height:0;overflow:auto;padding:0 4px 6px 6px;overscroll-behavior:contain}
.panel-l .scr-group+.scr-group{margin-top:10px}
.panel-l .scr-group h3{position:sticky;top:0;z-index:1;margin:0 0 2px;padding:7px 8px 6px;background:var(--k-panel);font:500 10.5px/1.2 var(--k-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--k-faint)}
.panel-l .scr-items{display:flex;flex-direction:column;gap:1px}
.panel-l .scr-item{gap:10px;min-height:32px;padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--k-dim);font:400 13px/1.3 var(--k-font);letter-spacing:-.01em}
.panel-l .scr-item .n{min-width:20px;font:400 11px/1 var(--k-mono);letter-spacing:0;color:var(--k-faint)}
.panel-l .scr-item .e{width:5px;height:5px;background:#E5484D}
.panel-l .scr-item:hover{background:var(--k-hover);color:var(--k-text)}
.panel-l .scr-item.on{background:var(--k-on);color:#0B0B0B;font-weight:500}
.panel-l .scr-item.on .n{color:rgba(0,0,0,.42)}
.panel-l .scr-item.on .e{background:#D71F32}
.panel-l .scr-item[hidden],.panel-l .scr-group[hidden]{display:none}
.scr-none{display:none;margin:28px 0;text-align:center;font-size:13px;color:var(--k-faint)}
#scrIndex.empty .scr-none{display:block}

/* ---------- right: patient's phone ---------- */
.inbox-to{color:var(--k-faint);font-size:12px}
.inbox-to b{color:var(--k-text);font-weight:500}
.thread{border-radius:12px;border:1px solid var(--k-line);background:#0D0D0D radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.2px) 0 0/14px 14px}
.thread-empty{color:var(--k-faint)}
.thread-empty .te-ic{background:var(--k-raise);color:var(--k-dim);box-shadow:none;border:1px solid var(--k-line)}
.thread-empty b{color:var(--k-text);font-weight:500}
.thread-day{background:var(--k-raise);color:var(--k-faint);font-weight:500}
.msg{background:#1A1A1A;border:1px solid var(--k-line);box-shadow:none}
.msg-meta{color:var(--k-faint)}
.msg-from{color:var(--k-text);font-weight:500}
.ch-tag{font:500 10px var(--k-mono);letter-spacing:.04em}
.ch-tag.wa{background:rgba(52,199,89,.14);color:#7BE09A}
.ch-tag.sms{background:rgba(110,150,255,.14);color:#A9C0FF}
.msg-body{color:var(--k-dim)}
.msg-body strong{color:var(--k-text);font-weight:500}
.msg-foot{color:var(--k-faint)}
.msg-code{background:#101010;border-color:var(--k-line-2)}
.msg-code b{color:var(--k-text);font-family:var(--k-mono);font-weight:500;letter-spacing:.2em}
.msg-exp{color:var(--k-faint)}
.msg-exp .bar{background:#2A2A2A}
.msg-exp .bar i{background:var(--k-on)}
.mbtn{background:var(--k-raise);border-color:var(--k-line-2);color:var(--k-text);font-weight:500;font-family:var(--k-font)}
.mbtn:hover{background:var(--k-hover)}
.mbtn.primary{background:var(--k-on);border-color:var(--k-on);color:#0B0B0B}
.mbtn.primary:hover{background:#fff}
.msg.dim .msg-code b{color:var(--k-faint)}
.msg-state{background:#232323;color:var(--k-faint);font-weight:500}
.msg-state.used{background:rgba(52,199,89,.14);color:#7BE09A}
.msg-state.expired{background:rgba(255,178,62,.12);color:#F5C36B}
.msg.sys{background:rgba(255,178,62,.1);color:#F5C36B;font-weight:500}
.msg.sys.bad{background:rgba(229,72,77,.12);color:#FF8F92}
.msg.pending{background:#1A1A1A}
.msg.pending i{background:#555}

/* ---------- right: scenarios ---------- */
.scn-row{border-top-color:var(--k-line)}
.scn-lbl{font-size:13px;font-weight:500}
.scn-lbl small{color:var(--k-faint);font-size:11.5px;font-weight:400;margin-top:2px}
.seg{background:var(--k-bg);border:1px solid var(--k-line);border-radius:9px;padding:2px}
.seg button{height:26px;padding:0 9px;border-radius:7px;color:var(--k-faint);font:500 12px var(--k-font);letter-spacing:-.01em}
.seg button:hover{color:var(--k-text)}
.seg button.on{background:#2A2A2A;color:var(--k-text);box-shadow:none}
.seg button.on.bad{color:#FF8F92}
.scn-actions button{border:1px solid var(--k-line);background:var(--k-raise);color:var(--k-dim);font:500 12.5px var(--k-font);letter-spacing:-.01em}
.scn-actions button:hover{background:var(--k-hover);border-color:var(--k-line-2);color:var(--k-text)}
.scn-tip{color:var(--k-faint)}
.scn-tip svg{color:var(--k-faint)}

/* ---------- right: dev-spec tally ---------- */
.fin-tally div{background:var(--k-raise);border:1px solid var(--k-line)}
.fin-tally b{font-size:18px;font-weight:500;color:var(--k-text);font-variant-numeric:tabular-nums}
.fin-tally span{font:500 9.5px var(--k-mono);color:var(--k-faint);letter-spacing:.05em}
.fin-link{height:34px;border-radius:99px;background:var(--k-on);color:#0B0B0B;font:500 13px var(--k-font);letter-spacing:-.01em}
.fin-link:hover{background:#fff}

/* ---------- drawers: designs count, new screens ---------- */
.ns-ov{background:rgba(0,0,0,.55)}
.ns-box{background:var(--k-panel);border:1px solid var(--k-line);border-radius:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.ns-h{background:var(--k-panel);border-bottom-color:var(--k-line)}
.ns-h b{font-size:18px;font-weight:500;letter-spacing:-.02em}
.ns-h span{color:var(--k-faint)}
.ns-x{background:var(--k-raise);border-color:var(--k-line-2);color:var(--k-text)}
.ns-box h4{font:500 10.5px var(--k-mono);letter-spacing:.06em;color:var(--k-faint)}
.ns-row{background:var(--k-raise);border-color:var(--k-line);color:var(--k-text);font-family:var(--k-font);font-weight:400}
.ns-row small{color:var(--k-faint)}
.ns-row em{background:#262626;color:var(--k-dim);font-weight:500}
.ns-row:hover{border-color:rgba(255,255,255,.2);background:var(--k-hover)}
.ns-row.on{border-color:var(--k-on);background:var(--k-hover)}
.ns-row.off{color:var(--k-faint)}
.v24-sum div{background:var(--k-raise);color:var(--k-dim);border:1px solid var(--k-line)}
.v24-sum b{color:var(--k-text);font-weight:500}
.v24-sum .v24-dim{background:none;border:1px dashed var(--k-line-2)}
.v24-sum .v24-dim b{color:var(--k-faint)}
.v24-more summary{color:var(--k-dim);font-weight:500}

/* ---------- smaller screens ---------- */
@media (max-width:1280px){
  .stage{grid-template-columns:256px minmax(0,1fr) 320px}
}
@media (max-width:1060px){
  .stage{grid-template-columns:228px minmax(0,1fr) 292px;gap:10px;padding:0 10px 10px}
  .tb-meta,.tb-titles span{display:none}
  .seg button{padding:0 7px}
}
@media (max-width:880px){
  .stage{display:flex;flex-direction:column;height:auto;overflow:visible;padding:0 12px 32px}
  .device-col{order:1;padding:24px 0 20px}
  .panel{order:2;overflow:visible;height:auto;max-width:none}
  .panel-l{order:3;height:72vh}
  .tb-chip{display:none}
}