:root{
  --bg:#0e1116;
  --bg-2:#151a22;
  --card:#171d26;
  --card-2:#1c2431;
  --line:#26303f;
  --line-2:#323f52;
  --txt:#e7edf5;
  --txt-2:#a7b4c6;
  --txt-3:#728096;
  --accent:#4d8dff;
  --green:#2fbf71;
  --blue:#3b82f6;
  --amber:#f0a020;
  --grey:#7b8698;
  --red:#ef4444;
  --orange:#f97316;
  --yellow:#eab308;
  --radius:12px;
  --shadow:0 6px 24px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 70% -10%, #18202c 0%, var(--bg) 55%) fixed;
  color:var(--txt);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 64px}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;
  background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px;color:#cfe0ff}

/* ---------- state boxes ---------- */
.state-box{max-width:560px;margin:16vh auto;text-align:center;padding:34px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.state-box h2{margin-bottom:10px;font-size:20px}
.error{border-color:#5a2a2a;background:linear-gradient(180deg,#241a1a,#1a1414)}
.error h2{color:#ffb4b4}
.error-detail{color:#ffd0d0;font-weight:600;word-break:break-word}
.hint{color:var(--txt-3);font-size:13.5px;margin-top:14px}
.spinner{width:38px;height:38px;margin:0 auto 16px;border-radius:50%;
  border:3px solid var(--line-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading p{color:var(--txt-2)}

/* ---------- header ---------- */
.hdr{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.hdr h1{font-size:26px;line-height:1.15}
.hdr-sub-sep{color:var(--txt-3);font-weight:400;margin:0 2px}
.subtitle{color:var(--accent);font-weight:600;margin:6px 0 8px;font-size:15px}
.meta-line{color:var(--txt-2);font-size:13.5px;margin:0}
.meta-label{color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em;font-size:11px;margin-right:5px}
.meta-val{font-weight:600;color:var(--txt)}
.meta-sep{margin:0 10px;color:var(--txt-3)}
.verdicts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:520px}
.vbadge{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.vbadge .vk{color:inherit;opacity:.72;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}
.vbadge.on-track{color:#7ff0b0;background:rgba(47,191,113,.12);border-color:rgba(47,191,113,.4)}
.vbadge.at-risk{color:#ffd88a;background:rgba(240,160,32,.13);border-color:rgba(240,160,32,.42)}
.vbadge.not-started{color:#ffb1b1;background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.42)}
.vbadge.neutral{color:var(--txt-2);background:var(--card-2);border-color:var(--line-2)}
.badge-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.schedule-note{margin:0 0 20px;padding:11px 14px;border-radius:10px;font-size:13.5px;
  color:#ffd88a;background:rgba(240,160,32,.08);border:1px solid rgba(240,160,32,.28)}

/* ---------- summary ---------- */
.summary{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow);margin-bottom:26px}
.summary-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.count-chip{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--line)}
.count-chip .cn{font-size:22px;font-weight:700;line-height:1}
.count-chip .cl{font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.05em}
.count-chip.is-done .cn{color:var(--green)}
.count-chip.is-in_progress .cn{color:var(--blue)}
.count-chip.is-at_risk .cn{color:var(--amber)}
.count-chip.is-todo .cn{color:var(--grey)}
.count-chip.is-blocked .cn{color:var(--red)}
.count-chip.is-open .cn{color:var(--orange)}
.count-chip.is-watch .cn{color:var(--yellow)}
.summary-bar-wrap{display:flex;flex-direction:column;gap:8px}
.bar-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--txt-2)}
.bar-pct{font-size:22px;font-weight:700;color:var(--txt)}
.bar{height:14px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.bar-fill{height:100%;border-radius:999px;
  background:linear-gradient(90deg,#2fbf71,#3b82f6);transition:width .6s cubic-bezier(.2,.7,.3,1)}
.bar-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--txt-3);margin-top:2px}
.bar-legend span{display:inline-flex;align-items:center;gap:6px}

/* ---------- section titles ---------- */
.sec-title{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 14px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--txt-2)}
.sec-note{color:var(--txt-3);font-weight:400;letter-spacing:0;text-transform:none;font-size:13px}
.dot{width:9px;height:9px;border-radius:50%}
.dot-crit{background:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.15)}

/* ---------- critical strip ---------- */
.critical{margin-bottom:28px}
.crit-strip{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.crit-node{position:relative;display:flex;flex-direction:column;gap:3px;min-width:150px;
  padding:12px 14px;border-radius:10px;background:var(--card);
  border:1px solid rgba(249,115,22,.42);border-left:3px solid var(--orange);box-shadow:var(--shadow)}
.crit-node .cid{font-weight:700;font-size:12px;color:var(--orange);letter-spacing:.04em}
.crit-node .ctitle{font-size:13px;font-weight:600;color:var(--txt);line-height:1.3}
.crit-node .cmeta{font-size:11px;color:var(--txt-3);margin-top:3px}
.crit-arrow{align-self:center;color:var(--txt-3);font-size:16px;padding:0 1px}

/* ---------- phase board ---------- */
.phases{margin-bottom:30px}
.phase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.phase-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.phase-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.phase-id{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.05em}
.phase-name{font-size:15px;font-weight:650;margin:2px 0 3px}
.phase-sum{font-size:12.5px;color:var(--txt-3);line-height:1.4}
.phase-ring{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--txt);
  background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--bg-2) 0);position:relative}
.phase-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card)}
.phase-ring span{position:relative;z-index:1}
.phase-tasks{display:flex;flex-direction:column;gap:7px}
.ptask{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border-radius:8px;
  background:var(--bg-2);border:1px solid var(--line)}
.ptask .pid{font-size:11px;font-weight:700;color:var(--txt-3);flex:none;padding-top:1px;min-width:26px}
.ptask .pt-t{font-size:12.5px;line-height:1.35;flex:1}
.ptask .chip{align-self:flex-start}

/* ---------- status chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:650;letter-spacing:.02em;white-space:nowrap;
  border:1px solid transparent;text-transform:lowercase}
.chip .bul{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip.done{color:var(--green);background:rgba(47,191,113,.12);border-color:rgba(47,191,113,.35)}
.chip.in_progress{color:var(--blue);background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35)}
.chip.at_risk{color:var(--amber);background:rgba(240,160,32,.13);border-color:rgba(240,160,32,.38)}
.chip.todo{color:#9aa6b6;background:rgba(123,134,152,.14);border-color:rgba(123,134,152,.4)}
.chip.blocked{color:var(--red);background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.4)}
.chip.open{color:var(--orange);background:rgba(249,115,22,.13);border-color:rgba(249,115,22,.4)}
.chip.watch{color:var(--yellow);background:rgba(234,179,8,.13);border-color:rgba(234,179,8,.4)}

/* ---------- task table ---------- */
.tasks{margin-bottom:30px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow)}
.task-table{border-collapse:collapse;width:100%;min-width:820px}
.task-table th{position:sticky;top:0;text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--txt-3);background:var(--card-2);padding:12px 14px;
  border-bottom:1px solid var(--line-2);z-index:1}
.task-table td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
.task-table tbody tr:last-child td{border-bottom:none}
.task-table tbody tr:hover{background:rgba(255,255,255,.025)}
.c-id{width:52px}.c-task{min-width:230px}.c-phase{width:58px}.c-owner{width:96px}
.c-status{width:112px}.c-evidence{min-width:260px}
.tid{font-weight:700;color:var(--accent);font-family:ui-monospace,Menlo,monospace;font-size:12px}
.ttitle{font-weight:600;color:var(--txt)}
.tcrit{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:var(--orange);
  border:1px solid rgba(249,115,22,.5);border-radius:4px;padding:0 4px;vertical-align:middle}
.tphase{font-weight:600;color:var(--txt-2);font-size:12px}
.towner{color:var(--txt-2);font-size:12.5px}
.tevid{color:var(--txt-3);font-size:12px;line-height:1.45}
.tevid .sev{font-weight:700;color:#ffd0a0}
.sev-chip{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:5px;font-size:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sev-high{color:#ffb1b1;background:rgba(239,68,68,.18)}
.sev-med{color:#ffd88a;background:rgba(240,160,32,.18)}
.sev-low{color:#ffe89a;background:rgba(234,179,8,.16)}
.sev-cosmetic{color:#c9d3e2;background:rgba(255,255,255,.08)}
.dep-note{color:var(--txt-3);font-size:11px;display:block;margin-top:3px}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding-top:16px;color:var(--txt-3);font-size:12.5px}
.ftr code{color:#cfe0ff}
.ftr-note{margin:6px 0 0;font-size:12px;color:var(--txt-3)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .summary{grid-template-columns:1fr}
  .hdr{flex-direction:column}
  .verdicts{justify-content:flex-start}
  .wrap{padding:20px 14px 48px}
  .hdr h1{font-size:22px}
}
@media (max-width:520px){
  .task-table{min-width:640px}
  .crit-node{min-width:130px}
}