:root{
  --bg:#071022;
  --bg2:#0b1421;
  --panel:#121b2e;
  --panel2:#0d162a;
  --muted:#94a3b8;
  --muted2:#64748b;
  --text:#e2e8f0;
  --border:#1e2d45;
  --border2:#243650;
  --green:#22c55e;
  --yellow:#f59e0b;
  --red:#ef4444;
  --blue:#60a5fa;
  --purple:#a78bfa;
  --orange:#fb923c;

  --stage-done:rgba(34,197,94,.15);
  --stage-blocked:rgba(239,68,68,.15);
  --stage-progress:rgba(245,158,11,.15);
  --stage-todo:rgba(100,116,139,.08);
  --stage-done-border:rgba(34,197,94,.4);
  --stage-blocked-border:rgba(239,68,68,.4);
  --stage-progress-border:rgba(245,158,11,.4);
  --stage-todo-border:rgba(100,116,139,.25);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  background-image:radial-gradient(ellipse at 20% 0%,rgba(96,165,250,.06) 0%,transparent 60%),
                  radial-gradient(ellipse at 80% 100%,rgba(34,197,94,.04) 0%,transparent 50%);
  color:var(--text);
  min-height:100vh;
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Header ─────────────────────────────────── */
.header{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 20px;border-bottom:1px solid var(--border);
  background:rgba(18,27,46,.85);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:100;
}
.header__title h1{margin:0 0 4px 0;font-size:18px;font-weight:700;letter-spacing:-0.3px}
.header__right{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ── KPI Strip ──────────────────────────────── */
.kpi-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  padding:14px 20px;
}
.kpi-card{
  background:var(--panel);border:1px solid var(--border2);
  border-radius:14px;padding:14px 16px;
  display:flex;flex-direction:column;gap:4px;
}
.kpi-card__num{font-size:26px;font-weight:700;line-height:1}
.kpi-card__label{font-size:11px;color:var(--muted);margin-top:4px}
.kpi-card.red .kpi-card__num{color:var(--red)}
.kpi-card.blue .kpi-card__num{color:var(--blue)}
.kpi-card.yellow .kpi-card__num{color:var(--yellow)}
.kpi-card.green .kpi-card__num{color:var(--green)}

/* ── Main Layout ───────────────────────────── */
.main{padding:0 20px 40px;display:flex;flex-direction:column;gap:14px}

/* ── Section Title ─────────────────────────── */
.section-title{
  font-size:13px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.8px;
  padding:10px 0 6px;border-bottom:1px solid var(--border);
  margin:0 0 10px;
}

/* ── Pipeline (Single Row 10 cols, horizontal scroll) ── */
.pipeline-wrap{overflow-x:auto;padding-bottom:4px;height:180px;overflow-y:hidden}
.pipeline{
  display:flex;flex-direction:column;
  min-width:0;
}
.pipeline-row{
  display:flex;flex-direction:row;gap:8px;
  overflow-x:auto;overflow-y:hidden;
  padding-bottom:4px;
}
@media(max-width:1100px){.pipeline-row{flex-wrap:nowrap}}

.pipeline-stage{
  background:var(--panel2);border:1px solid var(--border2);
  border-radius:12px;padding:10px;min-width:160px;
  display:flex;flex-direction:column;gap:8px;
}
.pipeline-stage--redline{
  border:1.5px solid rgba(239,68,68,.55);
  background:rgba(239,68,68,.06);
}
.pipeline-stage--redline .pipeline-stage__name{
  color:#fca5a5;
}
.pipeline-stage__head{
  display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px;
}
.pipeline-stage__name{
  font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;
}
.pipeline-stage__dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.pipeline-stage__dot.done{background:var(--green);box-shadow:0 0 6px var(--green)}
.pipeline-stage__dot.blocked{background:var(--red);box-shadow:0 0 6px var(--red);animation:pulse 2s infinite}
.pipeline-stage__dot.in_progress{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.pipeline-stage__dot.not_started{background:var(--muted2)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.pipeline-cards{display:flex;flex-direction:column;gap:6px}


/* ── Product Cards ────────────────────────────── */
.product-card{
  background:var(--panel2);border:1px solid var(--border2);
  border-radius:12px;padding:14px;min-width:200px;flex:1;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s;
}
.product-card--active{border-color:rgba(59,130,246,.3)}
.product-card--active:hover{border-color:var(--blue)}
.product-card--planned{border-color:rgba(239,68,68,.3);opacity:.85}
.product-card__head{display:flex;flex-direction:column;gap:2px}
.product-card__title{font-size:13px;font-weight:700;color:var(--text)}
.product-card__subtitle{font-size:10px;color:var(--muted2);font-style:italic}
.product-card__desc{font-size:10px;color:var(--muted);line-height:1.4;flex:1}
.product-card__kpi{display:flex;gap:10px;flex-wrap:wrap}
.product-card__kpi span{font-size:10px;color:var(--muted2)}
.product-card__kpi strong{font-size:12px;color:var(--text)}
.product-card__overlay-note{
  font-size:9px;color:var(--red);background:rgba(239,68,68,.1);
  border-radius:6px;padding:4px 6px;text-align:center;margin-top:4px;
}

/* ── Inbox Item ───────────────────────────────── */
.inbox-item{
  background:var(--panel2);border:1px solid var(--border2);
  border-radius:8px;padding:10px;margin-bottom:8px;
  display:flex;flex-direction:column;gap:4px;
}
.inbox-item__top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inbox-item__desc{font-size:11px;color:var(--text);line-height:1.3}
.inbox-item__meta{display:flex;gap:10px;font-size:10px;color:var(--muted2)}

/* ── Blocker Item ────────────────────────────── */
.blocker-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--border);
  font-size:11px;flex-wrap:wrap;
}

/* ── Deal Card in Pipeline (compact 3-line) ── */
.deal-card{
  background:var(--panel);border:1px solid var(--border2);
  border-radius:10px;padding:8px;min-width:220px;max-width:240px;
  cursor:pointer;transition:border-color .15s,transform .15s;
  flex-shrink:0;
}
.deal-card:hover{border-color:var(--blue);transform:translateY(-1px)}
.deal-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;margin-bottom:3px}
.deal-card__name{font-size:11px;font-weight:600;color:var(--text);line-height:1.2}
.deal-card__amount{font-size:9px;color:var(--muted);white-space:nowrap}
.deal-card__next{
  font-size:9px;color:var(--muted);margin-top:3px;
  border-top:1px dashed var(--border);padding-top:3px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.deal-card__next span{font-weight:600}
.deal-card__owner-due{
  font-size:9px;color:var(--muted2);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.deal-card__blocker{
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);
  border-radius:6px;padding:4px 6px;font-size:9px;color:#fca5a5;
  margin-top:4px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── Filter Bar ─────────────────────────── */
.filter-bar{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:10px 0;
}
.filter-bar .input,.filter-bar .select{
  background:var(--panel2);border:1px solid var(--border2);
  color:var(--text);padding:7px 10px;border-radius:10px;outline:none;font-size:13px;
}
.filter-bar .input:focus,.filter-bar .select:focus{border-color:var(--blue)}
.filter-bar .btn{
  background:var(--panel2);border:1px solid var(--border2);
  color:var(--text);padding:7px 14px;border-radius:10px;
  cursor:pointer;font-size:13px;transition:border-color .2s;
}
.filter-bar .btn:hover{border-color:var(--blue)}

/* ── Deal Table ─────────────────────────────── */
.table-wrap{
  background:var(--panel);border:1px solid var(--border2);
  border-radius:14px;overflow:hidden;
}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  padding:10px 12px;text-align:left;font-size:11px;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
  background:var(--panel2);border-bottom:1px solid var(--border2);
  white-space:nowrap;
}
.table td{padding:10px 12px;border-bottom:1px solid rgba(36,49,79,.5);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tr:hover{background:rgba(96,165,250,.05);cursor:pointer}
.table .num{font-variant-numeric:tabular-nums}

/* ── Badges ─────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:999px;border:1px solid;
  font-size:11px;font-weight:500;white-space:nowrap;
}
.badge--green{border-color:rgba(34,197,94,.4);color:#bbf7d0;background:rgba(34,197,94,.08)}
.badge--yellow{border-color:rgba(245,158,11,.4);color:#fde68a;background:rgba(245,158,11,.08)}
.badge--red{border-color:rgba(239,68,68,.4);color:#fca5a5;background:rgba(239,68,68,.08)}
.badge--blue{border-color:rgba(96,165,250,.4);color:#93c5fd;background:rgba(96,165,250,.08)}
.badge--neutral{border-color:rgba(100,116,139,.4);color:#cbd5e1;background:rgba(100,116,139,.08)}
.badge--purple{border-color:rgba(167,139,250,.4);color:#c4b5fd;background:rgba(167,139,250,.08)}

/* ── Andy Inbox ────────────────────────── */
.panel--andy{border-color:rgba(245,158,11,.3)}


/* ── Deal Detail ────────────────────────────── */
.detail-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:14px 0 10px;
}
.detail-header h2{margin:0;font-size:20px;font-weight:700}
.detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}}

/* ── Stage Board (Detail) ───────────────────── */
.stage-board{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
@media(max-width:900px){.stage-board{grid-template-columns:1fr}}
.stage-card{
  border-radius:14px;padding:12px;
  border:1px solid var(--border2);
}
.stage-card.done{background:var(--stage-done);border-color:var(--stage-done-border)}
.stage-card.blocked{background:var(--stage-blocked);border-color:var(--stage-blocked-border)}
.stage-card.in_progress{background:var(--stage-progress);border-color:var(--stage-progress-border)}
.stage-card.not_started{background:var(--stage-todo);border-color:var(--stage-todo-border)}
.stage-card__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:8px;
}
.stage-card__head h3{margin:0;font-size:13px;font-weight:600}
.stage-card__body{font-size:11px;color:var(--muted);line-height:1.5}

/* ── Gate Board ─────────────────────────────── */
.gate-board{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
}
@media(max-width:900px){.gate-board{grid-template-columns:repeat(3,1fr)}}
.gate-item{
  background:var(--panel2);border:1px solid var(--border2);
  border-radius:10px;padding:10px 8px;text-align:center;
}
.gate-item.done{border-color:rgba(34,197,94,.4)}
.gate-item.blocked{border-color:rgba(239,68,68,.4)}
.gate-item.in_progress{border-color:rgba(245,158,11,.4)}
.gate-item__icon{font-size:16px;margin-bottom:4px}
.gate-item__name{font-size:10px;color:var(--muted);margin-bottom:4px}
.gate-item__status{
  font-size:11px;font-weight:600;
  color:var(--green);
}
.gate-item.blocked .gate-item__status{color:var(--red)}
.gate-item.in_progress .gate-item__status{color:var(--yellow)}
.gate-item.not_started .gate-item__status{color:var(--muted2)}

/* ── Blockers ───────────────────────────────── */
.blocker{
  background:var(--panel2);border:1px solid rgba(239,68,68,.25);
  border-radius:12px;padding:11px;margin-bottom:8px;
}
.blocker:last-child{margin-bottom:0}
.blocker__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:5px;
}
.blocker__code{font-size:12px;font-weight:700;color:var(--text)}
.blocker__meta{font-size:10px;color:var(--muted);white-space:nowrap}
.blocker__desc{font-size:11px;color:#fca5a5;line-height:1.5}
.blocker__due{font-size:10px;color:var(--yellow);margin-top:4px}

/* ── KV Table ───────────────────────────────── */
.kv{display:grid;grid-template-columns:200px 1fr;gap:0;font-size:13px}
.kv>div{padding:7px 0;border-bottom:1px dashed rgba(36,49,79,.6)}
.kv>div:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{color:var(--text)}

/* ── Events Timeline ────────────────────────── */
.event-item{
  display:flex;gap:10px;padding:8px 0;
  border-bottom:1px solid rgba(36,49,79,.5);
}
.event-item:last-child{border-bottom:none}
.event-item__time{font-size:11px;color:var(--muted2);width:70px;flex-shrink:0;padding-top:2px}
.event-item__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.event-item__dot.red{background:var(--red)}
.event-item__dot.yellow{background:var(--yellow)}
.event-item__dot.green{background:var(--green)}
.event-item__dot.blue{background:var(--blue)}
.event-item__body{flex:1}
.event-item__title{font-size:12px;font-weight:600;color:var(--text)}
.event-item__note{font-size:11px;color:var(--muted);margin-top:2px}

/* ── Panel ──────────────────────────────────── */
.panel{
  background:var(--panel);border:1px solid var(--border2);
  border-radius:14px;padding:14px;
}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:10px;
}
.panel__head h2{margin:0;font-size:15px;font-weight:600}

/* ── Risk Checks ────────────────────────────── */
.risk-check{
  display:flex;align-items:center;gap:10px;
  background:var(--panel2);border:1px solid var(--border2);
  border-radius:10px;padding:10px 12px;margin-bottom:6px;
}
.risk-check__icon{font-size:16px}
.risk-check__label{flex:1;font-size:12px;color:var(--muted)}
.risk-check__value{font-size:12px;font-weight:600}

/* ── Hint / Footer ─────────────────────────── */
.hint{margin-top:10px;font-size:11px;color:var(--muted2)}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.small{font-size:11px}