:root {
  --bg: #0f1115;
  --panel: #161a22;
  --panel-2: #1c2230;
  --text: #e6e9ef;
  --muted: #8b93a7;
  --accent: #5eead4;
  --accent-2: #38bdf8;
  --danger: #f87171;
  --warn: #fbbf24;
  --ok: #34d399;
  --border: #232a39;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1.25rem;
  background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; letter-spacing: 0.5px; color: var(--accent); }
.topbar nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.topbar .who { color: var(--muted); margin-left: 1rem; }
.inline { display: inline; }
button.link { background: none; border: none; color: var(--accent-2); cursor: pointer; padding: 0; font: inherit; }
main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.25rem; }
h1 { margin: 0 0 1rem; font-size: 1.4rem; }
h2 { margin: 1.5rem 0 0.5rem; font-size: 1.1rem; color: var(--muted); }
.row { display: flex; align-items: center; gap: 0.75rem; }
.row.between { justify-content: space-between; }
.row.gap { gap: 0.75rem; flex-wrap: wrap; }
.filterbar { margin: 0.5rem 0; padding: 0.5rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.filterbar label { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.topbar nav { flex-wrap: wrap; }
.topbar nav a { white-space: nowrap; }
details.card summary { cursor: pointer; padding: 0.25rem 0; }

/* checklist copy-buttons */
.copy-row { margin: 0.75rem 0; }
.copy-wrap { display: flex; gap: 0.5rem; align-items: stretch; }
.copy-wrap input, .copy-wrap textarea {
  flex: 1; padding: 0.5rem 0.7rem; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.copy-btn { white-space: nowrap; }

/* status dot */
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.status-dot[data-state="reserved"] { background: var(--accent-2); box-shadow: 0 0 0 0 rgba(56,189,248,0.7); animation: pulse 1.6s infinite; }
.status-dot[data-state="used"]     { background: var(--ok); }
.status-dot[data-state="error"]    { background: var(--danger); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56,189,248,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(56,189,248,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}

/* Wizard pipeline */
.pipeline { display: flex; align-items: stretch; gap: 0.25rem; margin: 0.75rem 0; overflow-x: auto; padding-bottom: 0.5rem; }
.pipeline .stage { display: flex; flex-direction: column; align-items: center; min-width: 110px; flex: 1; gap: 0.4rem; }
.stage-circle { display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--panel-2); color: var(--muted); font-weight: 600; }
.stage.done    .stage-circle { background: var(--ok);     border-color: var(--ok);     color: #0a1e16; }
.stage.current .stage-circle { background: var(--accent); border-color: var(--accent); color: #00131c; animation: pulse 1.6s infinite; box-shadow: 0 0 0 0 rgba(94,234,212,0.7); }
.stage.pending .stage-circle { background: var(--panel-2); border-color: var(--border); color: var(--muted); }
.stage-meta   { text-align: center; }
.stage-name   { font-size: 12px; color: var(--text); }
.stage.pending .stage-name { color: var(--muted); }
.stage-ts     { color: var(--muted); }
.stage-delta  { color: var(--accent-2); }
.pipeline .connector { flex: 1; height: 2px; background: var(--border); align-self: center; margin-top: -1.5rem; min-width: 16px; }
.pipeline .connector.done { background: var(--ok); }

/* Stage distribution bars */
.stage-bars { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0 1rem; }
.stage-bar  { position: relative; display: grid; grid-template-columns: 24px 1fr 48px; align-items: center;
  gap: 0.5rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5rem 0.75rem; overflow: hidden; }
.stage-bar .stage-num { color: var(--muted); font-size: 12px; }
.stage-bar .stage-label { color: var(--text); position: relative; z-index: 1; }
.stage-bar .stage-count { color: var(--muted); text-align: right; position: relative; z-index: 1; }
.stage-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: rgba(94,234,212,0.10); border-right: 1px solid rgba(94,234,212,0.30); pointer-events: none; }

/* Wizard card tightening */
.wizard-card h2 { margin: 0; }
.wizard-card .pill { white-space: nowrap; }

/* Capacity bars */
.capacity-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.capacity-row { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.75rem; }
.capacity-bar { background: var(--panel-2); border: 1px solid var(--border); height: 8px; border-radius: 999px; overflow: hidden; }
.capacity-fill { height: 100%; background: var(--accent); transition: width 0.4s; }
.capacity-fill.warn { background: var(--warn); }
.capacity-fill.full { background: var(--danger); }

/* Timeline list */
.timeline { list-style: none; padding-left: 0; }
.timeline li { padding: 0.15rem 0; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; }
.kanban-col { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 150px; }
.kanban-head { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); font-size: 13px; }
.kanban-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 12px; }
.kanban-body { display: flex; flex-direction: column; gap: 0.35rem; min-height: 60px; }
.kanban-card { display: block; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; color: var(--text); text-decoration: none; }
.kanban-card:hover { border-color: var(--accent); text-decoration: none; }
.kanban-card-title { font-weight: 600; font-size: 13px; word-break: break-word; }
.kanban-card-meta { font-size: 11px; color: var(--muted); margin-top: 0.2rem; }
.actions { display: flex; gap: 0.5rem; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; }
.card.narrow { max-width: 360px; margin: 4rem auto; }
.card form label { display: block; margin: 0.6rem 0; color: var(--muted); }
.card form label.check { display: flex; align-items: center; gap: 0.4rem; color: var(--text); }
.card form input[type="text"], .card form input[type="password"], .card form input[type="number"], .card form input:not([type]),
.card form select, .card form textarea {
  display: block; width: 100%; margin-top: 0.25rem; padding: 0.55rem 0.7rem;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; font: inherit;
}
.card form input:focus, .card form select:focus, .card form textarea:focus { outline: 2px solid var(--accent); }
button, .button {
  display: inline-block; padding: 0.5rem 0.9rem; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: #00131c; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.button.ghost { background: transparent; color: var(--accent); }
button:hover, .button:hover { filter: brightness(1.1); text-decoration: none; }
button.danger, .danger button { background: var(--danger); border-color: var(--danger); color: #1a0606; }
form.danger { margin-top: 1.5rem; }
.error { color: var(--danger); background: rgba(248,113,113,0.1); padding: 0.6rem 0.8rem; border-radius: 6px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.small { font-size: 12px; }
table.data { width: 100%; border-collapse: collapse; margin-top: 0.5rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
table.data th, table.data td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; }
table.data th { background: var(--panel-2); color: var(--muted); font-weight: 600; }
table.data tr:last-child td { border-bottom: none; }
.pill { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-open { background: rgba(52,211,153,0.18); color: var(--ok); }
.pill-full { background: rgba(251,191,36,0.18); color: var(--warn); }
.pill-disabled { background: rgba(139,147,167,0.18); color: var(--muted); }
.pill-error { background: rgba(248,113,113,0.18); color: var(--danger); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 0.75rem; margin: 1rem 0 1.5rem; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.kpi span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi strong { display: block; font-size: 1.6rem; margin-top: 0.3rem; }
code { background: var(--panel-2); padding: 1px 6px; border-radius: 4px; }