:root{
  --bg:#07111f;--panel:#0d1b2b;--panel2:#112238;--line:#22344c;
  --text:#f8fafc;--muted:#93a4b8;--accent:#38bdf8;--accent2:#0ea5e9;
  --ok:#34d399;--warn:#f59e0b;--danger:#f87171;--shadow:0 18px 50px rgba(0,0,0,.24)
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:
    radial-gradient(circle at 20% 0%,rgba(14,165,233,.13),transparent 35rem),
    linear-gradient(180deg,#07111f,#091522 45%,#07111f);
  color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh
}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
.shell{width:min(100%,850px);margin:0 auto;padding:18px 16px 110px}
.brandbar,.workhead,.cardhead,.tickettitle,.sectionhead{
  display:flex;align-items:center;justify-content:space-between;gap:14px
}
.brandbar{padding:6px 2px 18px}
.brandbar h1,.workhead h2,.tickettitle h2,.sectionhead h2{margin:2px 0 0}
h1{font-size:1.35rem} h2{font-size:1.35rem} h3{font-size:1rem}
p{line-height:1.45}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#7dd3fc}
.muted{color:var(--muted);font-size:.9rem}
.hidden{display:none!important}
.view{display:grid;gap:14px}
.card{
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,34,56,.96),rgba(11,25,41,.96));
  border-radius:18px;padding:17px;box-shadow:var(--shadow)
}
.card.compact{margin-top:14px;padding:14px}
.hero{padding:22px}
label{display:grid;gap:7px;margin:14px 0}
label>span{font-size:.82rem;font-weight:700;color:#cbd5e1}
input,select{
  width:100%;border:1px solid #2a405c;background:#081524;color:var(--text);
  border-radius:12px;padding:12px 13px;outline:none
}
input:focus,select:focus{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.12)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
button{
  border:1px solid #29415e;background:#142840;color:white;border-radius:11px;padding:10px 13px;font-weight:750
}
button.primary{width:100%;background:linear-gradient(180deg,#0ea5e9,#0284c7);border-color:#38bdf8}
button.ghost{background:transparent}
.statuspill,.badge{
  display:inline-flex;align-items:center;gap:6px;border:1px solid #31506f;border-radius:999px;
  padding:5px 9px;font-size:.75rem;font-weight:800;color:#dbeafe;background:#10233a
}
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0}
.skill{border:1px solid var(--line);border-radius:12px;padding:10px;background:#091827;display:flex;justify-content:space-between}
.stack{display:grid;gap:10px}
.player,.queueitem,.action,.evidence{
  border:1px solid var(--line);border-radius:14px;background:rgba(8,21,36,.84);padding:12px
}
.player{display:flex;justify-content:space-between;gap:10px;align-items:center}
.player small{display:block;color:var(--muted);margin-top:3px}
.player p{margin:5px 0 0}
.working{color:#7dd3fc}
.queueitem{display:grid;grid-template-columns:7px 1fr auto;gap:12px;align-items:center}
.queueitem h3{margin:0 0 4px}.queueitem p{margin:0;color:var(--muted);font-size:.86rem}
.queueprio{height:100%;min-height:44px;border-radius:999px;background:#f59e0b}
.emptyqueue{padding:24px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}
.workhead{margin-bottom:12px}
.metricmini{
  min-width:64px;text-align:center;border:1px solid var(--line);border-radius:14px;padding:8px;background:#0b1b2c
}
.metricmini span{font-size:1.25rem;font-weight:900;display:block}.metricmini small{color:var(--muted)}
.bottomnav{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:1200;
  width:min(100%,850px);padding:9px max(12px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;background:rgba(7,17,31,.96);
  border-top:1px solid var(--line);backdrop-filter:blur(14px)
}
.navitem{padding:10px 5px;background:transparent;border-color:transparent;color:#8fa4ba;font-size:.82rem}
.navitem.active{color:white;background:#10253c;border-color:#2a4564}
.workpage{padding-top:5px}
.sectionhead{margin:5px 0 12px}
.tickettitle{margin-bottom:12px}
.tickettitle p{margin:4px 0 0;color:var(--muted)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0 10px}
.tab{background:#0a1827}.tab.active{background:#173451;border-color:#3a6085}
.action{display:flex;justify-content:space-between;align-items:center;gap:12px}
.action strong{display:block}.action p{margin:3px 0;color:var(--muted);font-size:.78rem}
.action .meta{font-size:.76rem;color:#8fb0cc}
.action-done{opacity:.68}
.evidence small{color:#7dd3fc}.evidence p{margin:7px 0 0}
.evidence-head{display:flex;justify-content:space-between;gap:10px}.evidence-head span{font-size:.75rem;color:var(--muted)}
.taskcard{margin:12px 0}
.progress,.hdp-mini-progress{height:7px;border-radius:999px;background:#20334b;overflow:hidden;margin:10px 0}
#progressBar{height:100%;width:0;background:#38bdf8}
.toast{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:3000;
  width:min(92vw,520px);padding:12px 14px;border-radius:12px;background:#020617;
  border:1px solid #334155;box-shadow:var(--shadow);text-align:center
}
@media(max-width:620px){
  .shell{padding-left:11px;padding-right:11px}
  .twocol{grid-template-columns:1fr}
  .queueitem{grid-template-columns:6px 1fr}
  .queueitem>button{grid-column:2;width:100%}
  .action{align-items:flex-start;flex-direction:column}
  .action button{width:100%}
  .brandbar{align-items:flex-start}
}

.countdownbox{
  margin:12px 0;padding:12px 13px;border:1px solid #31506f;border-radius:13px;
  background:#091827;display:flex;align-items:center;justify-content:space-between;gap:12px
}
.countdownbox strong{font-size:1.15rem}

.identitybar{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:14px;padding:11px 13px;background:rgba(8,21,36,.82)}
.identitybar small{display:block;color:var(--muted);margin-top:3px}.identity-actions{display:flex;gap:8px;flex-wrap:wrap}
.career-summary{padding:14px}.career-summary h3{margin:3px 0}.career-skills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.career-skill{border:1px solid var(--line);border-radius:11px;padding:9px;background:#091827}.career-skill span{display:block;color:var(--muted);font-size:.76rem}.career-skill strong{display:block;margin-top:2px}
.modal{position:fixed;inset:0;z-index:4000;background:rgba(2,6,23,.78);display:grid;place-items:center;padding:16px;backdrop-filter:blur(8px)}
.modal-card{width:min(100%,560px);max-height:92vh;overflow:auto;border:1px solid var(--line);border-radius:18px;padding:18px;background:#0b1b2c;box-shadow:var(--shadow)}
.career-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.career-buttons .ghost{grid-column:1/-1}
.action-result{margin-top:10px;padding:10px 11px;border:1px solid #31506f;border-radius:11px;background:#081827}
.action-result small{display:block;color:#7dd3fc;font-weight:800}.action-result p{margin:5px 0 0!important;color:#dbeafe!important;font-size:.9rem!important}
.action-result.external{border-style:dashed}.action-main{flex:1;min-width:0}.action-owner{margin-top:4px;color:var(--muted);font-size:.76rem}
.presence-offline{color:#fca5a5}.presence-online{color:#86efac}.lead-warning{color:#fde68a;font-weight:800}.external-assist{border-style:dashed}.assist-eta{font-variant-numeric:tabular-nums}
@media(max-width:620px){.identitybar{align-items:flex-start;flex-direction:column}.career-skills{grid-template-columns:1fr}.career-buttons{grid-template-columns:1fr}}

.public-name-note{display:block;color:var(--muted);font-size:.78rem;font-weight:500;line-height:1.35;margin-top:2px}