/* Helpdesk Panic — design proposal v2 (prototype, 2026-10-08).
   Only active when the page is opened with ?theme=v2 (dark) or ?theme=v2light (light); see applyThemeFromUrl in app.js.
   Colour carries meaning: one colour per skill, one per kind of action, priorities and SLA as in a service desk tool.
   Monospace for IDs, times and findings. */

html.hdp-v2{
  --v2-bg:#0b0f15;--v2-panel:#121923;--v2-panel2:#17202c;--v2-line:#243041;--v2-text:#e6ebf2;--v2-muted:#8a97a8;
  --v2-head:#0f1621;--v2-headtext:#e6ebf2;
  --sk-network:#14b8a6;--sk-endpoint:#3b82f6;--sk-infra:#f59e0b;--sk-identity:#a855f7;--sk-apps:#ec4899;--sk-security:#ef4444;
  --act-investigate:#3b82f6;--act-fix:#f97316;--act-verify:#22c55e;
  --mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --v2-ok:#22c55e;--v2-warn:#f59e0b;--v2-bad:#ef4444;
}
html.hdp-v2.theme-light{
  --v2-bg:#eef1f5;--v2-panel:#ffffff;--v2-panel2:#f6f8fb;--v2-line:#d6dce5;--v2-text:#152033;--v2-muted:#5d6878;
  --v2-head:#1e2a3b;--v2-headtext:#ffffff;
  --v2-ok:#15803d;--v2-warn:#b45309;--v2-bad:#b91c1c;
}

/* Base surfaces */
html.hdp-v2,html.hdp-v2 body{background:var(--v2-bg)!important;color:var(--v2-text)}
html.hdp-v2 .card,html.hdp-v2 .player,html.hdp-v2 .queueitem,html.hdp-v2 .action,html.hdp-v2 .evidence,
html.hdp-v2 #incidentOwnership,html.hdp-v2 .identitybar,html.hdp-v2 .modal-card{background:var(--v2-panel)!important;border-color:var(--v2-line)!important;box-shadow:none}
html.hdp-v2 .muted,html.hdp-v2 .tickettitle p,html.hdp-v2 .queueitem p,html.hdp-v2 .player small{color:var(--v2-muted)!important}
html.hdp-v2 .eyebrow{color:var(--v2-muted);letter-spacing:.14em}
html.hdp-v2 button{background:var(--v2-panel2);border-color:var(--v2-line);color:var(--v2-text)}
html.hdp-v2 button.primary{background:var(--act-investigate);border-color:var(--act-investigate);color:#fff}
html.hdp-v2 .badge,html.hdp-v2 .statuspill{background:var(--v2-panel2);border-color:var(--v2-line);color:var(--v2-text)}

/* Top bar like a service desk tool */
html.hdp-v2 header.brandbar{background:var(--v2-head);margin:-18px -16px 14px;padding:12px 16px;border-bottom:3px solid var(--act-investigate)}
html.hdp-v2 header.brandbar .eyebrow,html.hdp-v2 header.brandbar h1{color:var(--v2-headtext)}
html.hdp-v2 header.brandbar button,html.hdp-v2 header.brandbar .statuspill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--v2-headtext)}
html.hdp-v2 #leaveShiftBtn{background:#b91c1c!important;border-color:#b91c1c!important;color:#fff!important}

/* HUD */
html.hdp-v2 #hudWrap{background:linear-gradient(var(--v2-bg) 85%,transparent)}
html.hdp-v2 #pressureBar{background:var(--v2-panel)!important;border-color:var(--v2-line)!important}
html.hdp-v2 #pressureBar .hdp-hud{background:var(--v2-panel2)}
html.hdp-v2 #pressureBar .hdp-hud small{color:var(--v2-muted)}
html.hdp-v2 #pressureBar .hdp-track{background:var(--v2-line)}
html.hdp-v2 #ticketStrip{background:var(--v2-panel)!important;border-color:var(--v2-line)!important;border-left:4px solid var(--act-investigate)!important}
html.hdp-v2 #ticketStrip strong,html.hdp-v2 #ticketNo{font-family:var(--mono);letter-spacing:-.02em}
html.hdp-v2 #ticketStrip .hdp-strip-title{color:var(--v2-text)}

/* Ticket header with service desk fields */
html.hdp-v2 .tickettitle{background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:12px;padding:12px 14px;border-top:4px solid var(--prio-color,#64748b)}
html.hdp-v2 #ticketMeta{display:grid!important}
#ticketMeta{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--v2-line,#243041);font-size:.82rem}
#ticketMeta div{min-width:0}#ticketMeta dt{color:var(--v2-muted,#8a97a8);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#ticketMeta dd{margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
#ticketMeta dd.mono{font-family:var(--mono,monospace)}

/* Priorities: solid service desk colours */
html.hdp-v2 .badge.hdp-p1{background:#dc2626;border-color:#dc2626;color:#fff}
html.hdp-v2 .badge.hdp-p2{background:#ea580c;border-color:#ea580c;color:#fff}
html.hdp-v2 .badge.hdp-p3{background:#2563eb;border-color:#2563eb;color:#fff}
html.hdp-v2 .badge.hdp-p4{background:#64748b;border-color:#64748b;color:#fff}
html.hdp-v2 .hdp-sla{font-family:var(--mono)}

/* Tabs coloured by kind of action */
html.hdp-v2 .tab{background:var(--v2-panel);border-color:var(--v2-line);color:var(--v2-muted)}
html.hdp-v2 .tab[data-tab="investigate"].active{background:var(--act-investigate);border-color:var(--act-investigate);color:#fff}
html.hdp-v2 .tab[data-tab="fix"].active{background:var(--act-fix);border-color:var(--act-fix);color:#fff}
html.hdp-v2 .tab[data-tab="verify"].active{background:var(--act-verify);border-color:var(--act-verify);color:#fff}

/* Actions: skill colour on the left edge and as a chip; the main button in the colour of the action kind */
html.hdp-v2 #actionPanel .action{border-left:4px solid var(--skill,var(--v2-line))!important}
html.hdp-v2 #actionPanel .hdp-skillchip{color:var(--skill)!important;font-weight:800}
html.hdp-v2 #actionPanel[data-kind="investigate"] .hdp-actbtns button:not(.hdp-self):not(:disabled){background:var(--act-investigate);border-color:var(--act-investigate);color:#fff}
html.hdp-v2 #actionPanel[data-kind="fix"] .hdp-actbtns button:not(.hdp-self):not(:disabled){background:var(--act-fix);border-color:var(--act-fix);color:#fff}
html.hdp-v2 #actionPanel[data-kind="verify"] .hdp-actbtns button:not(.hdp-self):not(:disabled){background:var(--act-verify);border-color:var(--act-verify);color:#fff}
html.hdp-v2 #actionPanel .action.hdp-lead{border-left-color:#22c55e!important;background:color-mix(in srgb,#22c55e 10%,var(--v2-panel))!important}
html.hdp-v2 .action.skill-Network{--skill:var(--sk-network)}html.hdp-v2 .action.skill-Endpoint{--skill:var(--sk-endpoint)}
html.hdp-v2 .action.skill-Infrastructure{--skill:var(--sk-infra)}html.hdp-v2 .action.skill-Identity{--skill:var(--sk-identity)}
html.hdp-v2 .action.skill-Applications{--skill:var(--sk-apps)}html.hdp-v2 .action.skill-Security{--skill:var(--sk-security)}
html.hdp-v2 .action-result{background:var(--v2-panel2)!important;border-color:var(--v2-line)!important}
html.hdp-v2 .action .action-result p,html.hdp-v2 .evidence p{font-family:var(--mono);font-size:.82rem!important;color:var(--v2-text)!important}
html.hdp-v2 .action-result small,html.hdp-v2 .evidence small{color:var(--v2-muted)!important}
html.hdp-v2 .hdp-group-head.other{color:var(--act-fix)}

/* Queue as a ticket list */
html.hdp-v2 .queueitem{border-radius:10px!important}
html.hdp-v2 .queueitem h3{font-size:.95rem}

/* Bottom navigation */
html.hdp-v2 .bottomnav{background:var(--v2-head)!important;border-top-color:transparent}
html.hdp-v2 .navitem{color:rgba(255,255,255,.65);background:transparent;border-color:transparent}
html.hdp-v2 .navitem.active{color:#fff;background:rgba(255,255,255,.12);border-color:transparent}

/* Light theme fixes for the dark-only injected styles */
html.hdp-v2.theme-light #pressureBar *{color:var(--v2-text)}
html.hdp-v2.theme-light .hdp-sla.ok{color:#047857}html.hdp-v2.theme-light .hdp-sla.warn{color:#b45309}html.hdp-v2.theme-light .hdp-sla.bad{color:#b91c1c}
html.hdp-v2.theme-light .action-result small,html.hdp-v2.theme-light #actionPanel .action .meta{color:var(--v2-muted)!important}
html.hdp-v2.theme-light #actionPanel .action.hdp-lead strong{color:#166534!important}
html.hdp-v2.theme-light #actionPanel .action .hdp-actbtns button.hdp-self{background:#fff1f2!important;border-color:#fda4af!important;color:#9f1239!important}
html.hdp-v2.theme-light .hdp-chip{color:var(--v2-text);border-color:var(--v2-line)}
html.hdp-v2.theme-light .hdp-chip.guess{color:#92400e;border-color:#f59e0b}html.hdp-v2.theme-light .hdp-chip.lowrisk{color:#9f1239;border-color:#fda4af}
html.hdp-v2.theme-light .hdp-area{color:#1d4ed8}
html.hdp-v2.theme-light .hdp-legend{color:var(--v2-muted)}
html.hdp-v2.theme-light #ticketCorrelation,html.hdp-v2.theme-light .action-result{color:var(--v2-text)}
html.hdp-v2.theme-light #incidentOwnership strong{color:var(--v2-text)}
html.hdp-v2.theme-light .hdp-ext-item{background:#eff6ff;border-color:#93c5fd;color:var(--v2-text)}
html.hdp-v2.theme-light .toast{background:#1e2a3b;color:#fff;border-color:#1e2a3b}
html.hdp-v2.theme-light #ticketStrip .badge{color:#fff}
html.hdp-v2.theme-light #ticketFamily,html.hdp-v2.theme-light #ticketCorrelation,html.hdp-v2.theme-light #ticketCorrelation *{color:var(--v2-text)!important}
html.hdp-v2.theme-light #ticketCorrelation{background:#fffbeb!important;border-color:#fcd34d!important}
html.hdp-v2.theme-light .hdp-calltile{background:#ecfdf5;border-color:#22c55e;color:var(--v2-text)}
html.hdp-v2.theme-light .hdp-calltile.manager{background:#fef2f2;border-color:#ef4444}
html.hdp-v2.theme-light .hdp-tile-sub{color:var(--v2-muted)}
html.hdp-v2 .queueitem .hdp-ctx{color:var(--v2-muted)}
/* Forms (join screen, lobby) */
html.hdp-v2 label>span{color:var(--v2-muted)}
html.hdp-v2 input,html.hdp-v2 select{background:var(--v2-panel2);border-color:var(--v2-line);color:var(--v2-text)}
html.hdp-v2.theme-light input::placeholder{color:#94a3b8}
html.hdp-v2.theme-light .public-name-note{color:var(--v2-muted)}
html.hdp-v2.theme-light #shiftSummaryCard .career-skill,html.hdp-v2.theme-light .career-skill,html.hdp-v2.theme-light .countdownbox,html.hdp-v2.theme-light .metricmini,html.hdp-v2.theme-light .skill{background:var(--v2-panel2);border-color:var(--v2-line);color:var(--v2-text)}
html.hdp-v2.theme-light .hdp-rating{color:var(--v2-text)}
html.hdp-v2.theme-light .hdp-callsheet{background:#fff!important;border-color:#22c55e!important}
html.hdp-v2.theme-light #callModal.manager .hdp-callsheet{background:#fff!important;border-color:#ef4444!important}
html.hdp-v2.theme-light .hdp-quote{color:var(--v2-text)}html.hdp-v2.theme-light .hdp-caller small{color:var(--v2-muted)}
html.hdp-v2.theme-light .hdp-choices button{background:var(--v2-panel2);color:var(--v2-text);border-color:var(--v2-line)}
html.hdp-v2.theme-light .hdp-call-result.good{color:#166534}html.hdp-v2.theme-light .hdp-call-result.bad{color:#991b1b}
html.hdp-v2.theme-light #takeoverBanner{color:#fff}

/* 0.9.29 Join + lobby: code boxes first, then the name; lobby with role chips, the team and one big Ready button. */
body:not(.hdp-in-workbench) header.brandbar h1,body:not(.hdp-in-workbench) #soundBtn{display:none}
body:not(.hdp-in-workbench) header.brandbar{align-items:center}
html.hdp-v2 .identitybar{padding:8px 12px}
.identitybar strong{font-size:.92rem}.identitybar small{font-size:.78rem}
.identity-actions button{min-height:40px}
.join-card{display:grid;gap:18px}
.join-head h2{margin:0 0 6px;font-size:1.5rem;line-height:1.2}.join-head p{margin:0}
.join-field{display:grid;gap:8px}
.join-field>.eyebrow{font-size:.7rem;letter-spacing:.1em;font-weight:800;color:var(--v2-muted,#91a4b8)}
.join-field input{font-size:16px}
.code-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.code-boxes .code-box{height:58px;margin:0;padding:0;text-align:center;font-family:var(--mono,ui-monospace,monospace);font-size:24px;font-weight:600;text-transform:uppercase;border-radius:10px;border:1px solid var(--v2-line,#20384f);background:var(--v2-panel2,#071522);color:var(--v2-text,#e6f0fa);caret-color:var(--act-investigate,#3b82f6)}
.code-boxes .code-box:focus{outline:none;border:2px solid var(--act-investigate,#3b82f6)}
.join-card .big,.lobby-foot .big{width:100%;min-height:54px;border-radius:14px;font-size:1rem}
.join-langnote{text-align:center;margin-top:-8px}
.lobby-roles{display:grid;gap:8px;margin:12px 0 4px}
.lobby-roles>.eyebrow,.lobby-team .eyebrow{font-size:.7rem;letter-spacing:.1em;font-weight:800;color:var(--v2-muted,#91a4b8)}
.role-chips{display:flex;flex-wrap:wrap;gap:8px}
.role-chips button{min-height:40px;padding:0 14px;border-radius:20px;font-weight:600;border:1px solid var(--v2-line,#20384f);background:transparent}
html.hdp-v2 .role-chips button{background:transparent}
.role-chips button[aria-checked="true"],html.hdp-v2 .role-chips button[aria-checked="true"]{border:2px solid var(--act-investigate,#3b82f6);background:#13283f;color:#cfe2ff}
html.hdp-v2.theme-light .role-chips button[aria-checked="true"]{background:#e8f0fd;color:#152033}
.lobby-list{display:grid}
.lobby-player{display:flex;align-items:center;gap:10px;min-height:48px;border-top:1px solid var(--v2-line,#20384f)}
.lobby-player:first-child{border-top:0}
.lobby-player .avatar{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;background:#23415f;color:#e6ebf2}
.lobby-player.me .avatar{background:#3a2e5f}
.lp-name{flex:1;min-width:0}.lp-name strong{font-size:.95rem}.lp-name small{display:block;color:var(--v2-muted,#91a4b8);font-size:.78rem}.lp-name strong+small{display:inline}
.lp-ready{font-size:.8rem;color:var(--v2-muted,#91a4b8);white-space:nowrap}.lp-ready.ok{color:var(--v2-ok,#22c55e);font-weight:700}
html.hdp-v2.theme-light .lp-ready.ok{color:#15803d}
.lobby-status{margin:10px 0 0;font-size:.85rem}
.lobby-foot{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--v2-bg,#06111d) 30%)}
#readyBtn.done{background:transparent!important;border:2px solid var(--v2-ok,#22c55e)!important;color:var(--v2-ok,#22c55e)!important}
html.hdp-v2.theme-light #readyBtn.done{color:#15803d!important;border-color:#15803d!important}
.lp-name strong+small{display:block}.lp-you{font-size:.78rem;color:var(--v2-muted,#91a4b8)}
#lobbyView #hostBadge{display:none}
#lobbyView .skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
#lobbyView .skill{display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0;padding:6px 10px;font-size:.8rem;border-radius:9px}
#lobbyView .skill span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lobbyView .skill b{flex:none}
#lobbyView,#setupView{min-width:0;overflow-x:hidden}
.identitybar{flex-direction:row!important;align-items:center!important;flex-wrap:nowrap}
.identitybar>div:first-child{min-width:0}
.identity-actions{flex:none}
.role-chips button{font-size:.88rem}
#lobbyView .skills{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){#lobbyView .skills{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 0.9.31 training ticket strip */
.training-strip{margin:0 0 10px;padding:8px 12px;border-radius:10px;font-size:.85rem;font-weight:600;background:rgba(245,158,11,.12);border:1px solid #f59e0b;color:var(--v2-text,#e6f0fa)}
/* 0.9.32 "Why?" per action */
#actionPanel .action .hdp-why-btn{width:26px!important;min-width:26px;height:26px;padding:0!important;border-radius:50%!important;font-size:.8rem!important;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center;background:transparent!important;border:1px solid var(--v2-line,#20384f)!important;color:var(--v2-muted,#91a4b8)!important;flex:none}
#actionPanel .action .hdp-why-btn[aria-expanded="true"]{border-color:#3b82f6!important;color:#3b82f6!important}
#actionPanel .action .hdp-why-btn::after{content:"";position:absolute;inset:-9px}
#actionPanel .action .hdp-why-btn{position:relative}
#actionPanel .hdp-why{margin:6px 0 0;padding:8px 10px;border-radius:8px;font-size:.84rem;line-height:1.4;background:rgba(59,130,246,.08);border-left:3px solid #3b82f6;color:var(--v2-text,#e6f0fa)}

/* 0.9.33 result screen: the shift report replaces the setup screen until it is closed. */
#setupView.hdp-result-mode>.join-card,#setupView.hdp-result-mode>#careerSummary,#setupView.hdp-result-mode>#identityBar{display:none!important}
/* The phone shell has 11 px side padding: the top bar must not reach past it (it caused a sideways scroll). */
@media(max-width:620px){html.hdp-v2 header.brandbar{margin-left:-11px;margin-right:-11px}}
.hdp-result{display:grid;gap:14px;max-width:640px;margin:0 auto 16px;width:100%;box-sizing:border-box}
.hdp-result h2{margin:2px 0 0;font-size:1.5rem}
.res-hero{display:grid;justify-items:center;gap:6px;text-align:center;padding:18px 12px;border-radius:14px;border:1px solid var(--v2-line,#243041);background:var(--v2-panel2,#17202c)}
.res-hero.win{border-color:color-mix(in srgb,var(--v2-ok,#22c55e) 55%,transparent);background:color-mix(in srgb,var(--v2-ok,#22c55e) 9%,var(--v2-panel2,#17202c))}
.res-hero.loss{border-color:color-mix(in srgb,var(--v2-bad,#ef4444) 55%,transparent);background:color-mix(in srgb,var(--v2-bad,#ef4444) 9%,var(--v2-panel2,#17202c))}
.res-stars{display:flex;gap:4px}
.res-stars svg{fill:none;stroke:var(--v2-muted,#8a97a8);stroke-width:1.6;stroke-linejoin:round}
.res-stars svg.on{fill:#f5b301;stroke:#f5b301}
.res-label{font-size:1.6rem;line-height:1.1}
.res-win{font-weight:600;color:var(--v2-muted,#8a97a8)}
.res-bands{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px}
.res-band{font-size:.82rem;padding:4px 10px;border-radius:999px;border:1px solid var(--v2-line,#243041);background:var(--v2-panel,#121923);color:var(--v2-muted,#8a97a8)}
.res-band b{color:var(--v2-text,#e6ebf2);font-weight:600}
.res-band.b-CONTROLLED b,.res-band.b-TRUSTED b,.res-band.b-SATISFIED b{color:var(--v2-ok,#22c55e)}
.res-band.b-BUSY b,.res-band.b-STRAINED b,.res-band.b-CONCERNED b{color:var(--v2-warn,#f59e0b)}
.res-band.b-PANIC b,.res-band.b-CRITICAL b,.res-band.b-FRUSTRATED b,.res-band.b-LOST_CONFIDENCE b{color:var(--v2-bad,#ef4444)}
.res-gate{color:var(--v2-warn,#f59e0b)!important}
.res-xp{display:grid;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--v2-line,#243041);background:var(--v2-panel2,#17202c)}
.res-xp-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.res-xp-top strong{font-family:var(--mono);font-size:1.5rem;color:var(--act-investigate,#3b82f6)}
.res-xp.neg .res-xp-top strong{color:var(--v2-bad,#ef4444)}
.res-skills{display:flex;flex-wrap:wrap;gap:6px}
.res-skill{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;padding:4px 10px;border-radius:999px;background:var(--v2-panel,#121923);border:1px solid var(--v2-line,#243041)}
.res-skill i{width:8px;height:8px;border-radius:50%;background:var(--sk,#8a97a8)}
.res-skill b{font-family:var(--mono)}
.res-skill.sk-Network{--sk:var(--sk-network)}.res-skill.sk-Endpoint{--sk:var(--sk-endpoint)}.res-skill.sk-Infrastructure{--sk:var(--sk-infra)}
.res-skill.sk-Identity{--sk:var(--sk-identity)}.res-skill.sk-Applications{--sk:var(--sk-apps)}.res-skill.sk-Security{--sk:var(--sk-security)}
.res-xp-parts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.85rem;color:var(--v2-muted,#8a97a8)}
.res-xp-parts b{font-family:var(--mono);color:var(--v2-text,#e6ebf2)}
.res-xp-parts .neg b{color:var(--v2-bad,#ef4444)}
.res-ups{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.res-ups li{padding:8px 10px;border-radius:10px;font-weight:600;font-size:.92rem}
.res-ups li.up{background:color-mix(in srgb,var(--v2-ok,#22c55e) 14%,transparent);color:var(--v2-ok,#22c55e)}
.res-ups li.train{background:color-mix(in srgb,var(--act-investigate,#3b82f6) 14%,transparent);color:var(--act-investigate,#3b82f6)}
.res-guest{margin:0;padding:10px 12px;border-radius:12px;border:1px dashed var(--v2-line,#243041);color:var(--v2-muted,#8a97a8);font-size:.9rem}
.res-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.res-kpi{display:grid;gap:2px;padding:12px 10px;border-radius:12px;border:1px solid var(--v2-line,#243041);background:var(--v2-panel2,#17202c);min-width:0}
.res-kpi span{font-size:.78rem;color:var(--v2-muted,#8a97a8)}
.res-kpi strong{font-family:var(--mono);font-size:1.35rem}
.res-kpi small{font-size:.75rem;color:var(--v2-muted,#8a97a8)}
.res-kpi.ok strong{color:var(--v2-ok,#22c55e)}.res-kpi.warn strong{color:var(--v2-warn,#f59e0b)}.res-kpi.bad strong{color:var(--v2-bad,#ef4444)}
.res-root{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--v2-ok,#22c55e) 9%,var(--v2-panel2,#17202c));border:1px solid color-mix(in srgb,var(--v2-ok,#22c55e) 40%,transparent)}
.res-root p{margin:4px 0 0;font-weight:600}
.res-meters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.res-meter{display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:var(--v2-panel2,#17202c);border:1px solid var(--v2-line,#243041)}
.res-meter>div:first-child{display:flex;justify-content:space-between;gap:6px;font-size:.82rem;color:var(--v2-muted,#8a97a8)}
.res-meter b{font-family:var(--mono);color:var(--v2-text,#e6ebf2)}
.res-bar{height:6px;border-radius:999px;background:var(--v2-line,#243041);overflow:hidden}
.res-bar i{display:block;height:100%;border-radius:inherit;background:var(--v2-muted,#8a97a8)}
.res-meter.ok .res-bar i{background:var(--v2-ok,#22c55e)}.res-meter.warn .res-bar i{background:var(--v2-warn,#f59e0b)}.res-meter.bad .res-bar i{background:var(--v2-bad,#ef4444)}
.res-details{border:1px solid var(--v2-line,#243041);border-radius:12px;background:var(--v2-panel2,#17202c)}
.res-details summary{cursor:pointer;padding:12px;font-weight:600;min-height:20px}
.res-rows{list-style:none;margin:0;padding:0 12px 8px}
.res-rows li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--v2-line,#243041);font-size:.92rem}
.res-rows li span{color:var(--v2-muted,#8a97a8)}
.res-rows li b{font-family:var(--mono)}
.res-rows li.ok b{color:var(--v2-ok,#22c55e)}.res-rows li.warn b{color:var(--v2-warn,#f59e0b)}.res-rows li.bad b{color:var(--v2-bad,#ef4444)}
.res-tip{padding:12px;border-radius:12px;border:1px solid var(--v2-line,#243041);background:var(--v2-panel2,#17202c)}
.res-tip p{margin:4px 0 0}
.res-actions{display:grid;gap:8px}
.res-actions .big{width:100%;min-height:54px;border-radius:14px;font-size:1rem}
@media(max-width:420px){.res-kpi strong{font-size:1.15rem}.res-label{font-size:1.4rem}}

/* 0.9.34: where the lobby skill levels come from */
#lobbyView .skills-note{display:block;margin-top:8px;font-size:.8rem;line-height:1.4}
/* 0.9.38: "How to play" in the lobby (open the first time, then folded). */
.how-card summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.how-card summary::-webkit-details-marker{display:none}
.how-card summary:after{content:"▾";color:var(--v2-muted,#9AA6B6);transition:transform .15s}
.how-card[open] summary:after{transform:rotate(180deg)}
.how-list{margin:12px 0 4px;padding:0;list-style:none;counter-reset:how;display:grid;gap:10px}
.how-list li{counter-increment:how;display:grid;grid-template-columns:28px 1fr;gap:2px 10px;align-items:start}
.how-list li:before{content:counter(how);grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand-orange,#FF8A1F);color:#14100A;font-weight:800;font-size:13px}
.how-list strong{font-size:.95rem}
.how-list span{color:var(--v2-muted,#9AA6B6);font-size:.88rem;line-height:1.45}
.how-more{display:inline-block;margin-top:10px;font-weight:700;font-size:.9rem;color:var(--brand-orange,#FF8A1F)}
/* 0.9.57: light theme for the task bar with the timer (it kept its dark background, so the task name was unreadable). */
html.hdp-v2.theme-light #stickyTaskBar{background:rgba(255,255,255,.97);border-color:var(--v2-line,#d6dce5);color:var(--v2-text,#152033);box-shadow:0 4px 14px rgba(15,23,42,.08)}
html.hdp-v2.theme-light #stickyTaskBar strong{color:var(--v2-text,#152033)}
html.hdp-v2.theme-light #stickyTaskBar small,html.hdp-v2.theme-light #stickyTaskBar .muted{color:var(--v2-muted,#5d6878)}
html.hdp-v2.theme-light #stickyTaskBar .hdp-mini-progress{background:#e2e8f0}
html.hdp-v2.theme-light #stickyTaskBar button{background:var(--v2-panel2,#f6f8fb);color:var(--v2-text,#152033);border-color:var(--v2-line,#d6dce5)}
html.hdp-v2.theme-light #stickyTaskBar button.primary{background:var(--v2-accent,#3b82f6);color:#fff;border-color:var(--v2-accent,#3b82f6)}
html.hdp-v2.theme-light .hdp-calltile.closed{background:#f1f5f9;border-color:#cbd5e1}