:root{
  --bg:#0d0f12; --card:#12151a; --muted:#9aa4b2; --text:#e8edf3; --grid:#1b2027;
  --accent:#5eead4; --rose:#f43f5e; --amber:#f59e0b; --today:#ef4444;
  --b1:#60a5fa; --b2:#34d399; --b3:#a78bfa; --b4:#f472b6; --b5:#22d3ee;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:
  radial-gradient(1200px 600px at 10% -20%, #1a2332 0%, transparent 55%),
  radial-gradient(800px 400px at 110% 10%, #13202a 0%, transparent 60%),
  var(--bg);
  color:var(--text);font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;letter-spacing:.1px}
.shell{max-width:1100px;margin:0 auto;padding:28px 18px 24px}
h1{margin:0;font-size:clamp(22px,4vw,32px);font-weight:800}
.subtitle{color:var(--muted);font-size:14px;margin-top:6px}

/* Toolbar */
.toolbar{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--card);color:var(--text);border:1px solid var(--grid);cursor:pointer;user-select:none;transition:.2s}
.chip:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.chip[data-active="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(94,234,212,.15) inset}
.chip .dot{width:10px;height:10px;border-radius:50%}
.search{margin-left:auto;position:relative}
.search input{background:var(--card);color:var(--text);border:1px solid var(--grid);border-radius:10px;padding:10px 12px 10px 36px;outline:none;width:220px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.6}

/* Mini Gantt (overview) */
.mini{margin-top:18px;border:1px solid var(--grid);border-radius:16px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0))}
.mini-head{display:flex;justify-content:space-between;align-items:center;padding:8px 18px;border-bottom:1px solid var(--grid)}
.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.legend .swatch{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:6px}

.overview{position:relative}
.overview-row{display:flex;height:42px}
.overview-block {
  flex: 1;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  text-align: center;        /* just in case the span becomes wider */
}
.overview-block span{position:static;font-size:11px;font-weight:800;color:#001014;background:#ffffffdd;padding:0 6px;border-radius:6px}
.overview .b1{background:var(--b1)}
.overview .b2{background:var(--b2)}
.overview .b3{background:var(--b3)}
.overview .b4{background:var(--b4)}
.overview .b5{background:var(--b5)}

/* Today arrow on overview */
.today{position:absolute;top:0;bottom:0;width:0;pointer-events:none}
.today .line{position:absolute;top:0;bottom:0;width:2px;background:var(--today);left:-1px;box-shadow:0 0 0 2px rgba(239,68,68,.08)}
.today .arrow{position:absolute;top:-8px;left:-7px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid var(--today)}
/* Red caption UNDER the overview */
.today-caption{padding:8px 12px;color:#fff;font-weight:800;font-size:12px;background:linear-gradient(90deg, color-mix(in oklab,var(--today) 45%, transparent), transparent 70%);}

/* Vertical timeline */
.vertical{margin-top:18px;display:flex;flex-direction:column;gap:18px}
.tri{border:1px solid var(--grid);border-radius:16px;background:rgba(255,255,255,.02);padding:14px}
.tri h2{margin:0 0 8px;font-size:16px;color:var(--muted);font-weight:800}
.block{border:1px solid var(--grid);border-radius:14px;background:var(--card);padding:14px;margin-top:10px}
.block h3{margin:0 0 10px;font-size:14px;font-weight:900;display:flex;align-items:center;gap:8px}
.pill{font-size:11px;padding:4px 8px;border-radius:999px;background:white;color:#0b0f14;font-weight:800}
.weeks{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:12px}
.week{border:1px solid var(--grid);border-radius:12px;padding:10px;min-height:110px;transition:.18s;cursor:pointer}
.week:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.wk{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:2px}
.badge{width:14px;height:18px;border-radius:6px;background: transparent;display:inline-flex;align-items:center;justify-content:center;color: inherit;font-weight:900}
.subject{margin-top:6px;font-weight:800;font-size:13px;line-height:1.25}
.detail{margin-top:8px;font-size:12px;color:var(--muted)}
.milestone{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#0a1116;background:var(--amber);border-radius:999px;padding:3px 8px}
.milestone.rose{background:var(--rose);color:white}

/* Current-week highlight */
.week.current{outline:2px solid var(--today);box-shadow:0 8px 22px rgba(239,68,68,.15);background:color-mix(in oklab, var(--today) 10%, var(--card));}
.week.current .wk{color:var(--today)}

footer{color:var(--muted);font-size:12px;text-align:center;padding:16px 10px 28px}

@media print{.search,.toolbar,.legend{display:none}}



/* Minimal scoped styles for Chatbot + License */
.header-row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.header-actions{margin-left:auto; display:flex; align-items:stretch; gap:12px}

.btn-premium{
  --_bg1: rgba(255,255,255,.06);
  --_bg2: rgba(255,255,255,.02);
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:14px; text-decoration:none;
  background:linear-gradient(135deg, var(--_bg1), var(--_bg2));
  border:1px solid color-mix(in oklab, var(--accent, #5eead4) 35%, var(--grid, #1b2027));
  color:var(--text, #e8edf3);
  font-weight:900; letter-spacing:.2px;
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 2px color-mix(in oklab, var(--accent, #5eead4) 18%, transparent) inset;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-premium:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.40), 0 0 0 3px color-mix(in oklab, var(--accent, #5eead4) 22%, transparent) inset}

/* Chatbot button */
.btn-chat .ico{width:16px;height:16px;display:inline-block}
.btn-chat .label{font-size:13px}

/* License badge */
.license-card{min-width:240px; display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px}
.license-card .l1{font-weight:900; font-size:13px}
.license-card .l2{font-weight:600; font-size:12px; color:var(--muted, #9aa4b2)}
.license-card .l3{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; font-size:11px; padding:4px 8px; border-radius:999px;
  color:#0b0f14; background:var(--status-bg, #22c55e);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--status-bg, #22c55e) 25%, #000) inset;
}
.license-card .ico{width:14px;height:14px;display:inline-block}

/* Status themes */
.license-card[data-status="valid"]{--status-bg:#22c55e}
.license-card[data-status="invalid"]{--status-bg:#ef4444}
.license-card[data-status="trial"]{--status-bg:#f59e0b}