:root {
  color-scheme: dark;
  --bg: #050608; --panel: #0c111a; --panel-2: #111827; --panel-3: #151d2b;
  --line: #253044; --text: #f5f7fb; --muted: #9aa8bd; --muted-2: #708097;
  --blue: #75a7ff; --green: #65e2ad; --amber: #ffd166; --red: #ff6b7a; --purple: #b794f4;
  --radius-lg: 28px; --radius-md: 18px; --shadow: 0 28px 90px rgba(0,0,0,.45);
}
* { box-sizing: border-box; } html, body { min-height: 100%; }
body { margin: 0; background: radial-gradient(circle at 18% -10%, #24314d 0, #050608 42%, #020304 100%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; } button { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 292px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; background: rgba(8,12,19,.97); border-right: 1px solid var(--line); padding: 28px 22px; display: flex; flex-direction: column; }
.brand-block { display: flex; gap: 14px; align-items: center; margin-bottom: 34px; }
.brand-mark { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg,#e8f0ff,#75a7ff); color:#07101d; font-weight:900; letter-spacing:-.06em; }
.brand-title { font-weight: 850; font-size: 23px; letter-spacing: -.05em; }.brand-subtitle { color: var(--muted); font-size: 12px; margin-top: 2px; }
.nav-list { display: grid; gap: 9px; }.nav-item { width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color:#cbd5e1; padding:13px 15px; border-radius:15px; font-weight:720; }
.nav-item.active { background:#111a2a; color:white; border-color:rgba(117,167,255,.25); }
.sidebar-stats { margin-top:auto; display:grid; gap:12px; }.stat-card { background:#0d1420; border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:15px; }.stat-card strong { display:block; font-size:30px; letter-spacing:-.05em; }.stat-card span { color:var(--muted); font-size:12px; }
.main { padding:30px; min-width:0; }.topbar { display:flex; justify-content:space-between; gap:24px; align-items:start; margin-bottom:24px; }.eyebrow { color:var(--blue); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:900; margin:0 0 7px; }
h1 { margin:0; font-size:clamp(34px,4vw,56px); line-height:.95; letter-spacing:-.07em; } h2 { margin:0; letter-spacing:-.04em; }.page-note { color:var(--muted); margin:12px 0 0; }.top-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.input { background:#0d1420; color:var(--text); border:1px solid var(--line); border-radius:14px; padding:12px 13px; outline:none; min-width:0; }.input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(117,167,255,.12); }.select { min-width:210px; }
.primary-button,.ghost-button,.icon-button { border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px 15px; font-weight:820; }.primary-button { background:#e8f0ff; color:#07101d; border-color:#e8f0ff; }.ghost-button { background:#101827; color:#e9eefb; }.icon-button { background:transparent; color:var(--muted); border-color:transparent; font-size:26px; padding:2px 8px; }.full-width { width:100%; }
.view { display:none; }.active-view { display:block; }.review-layout { display:grid; grid-template-columns:minmax(420px,.98fr) minmax(360px,.72fr); gap:18px; align-items:start; }
.card-list-panel,.detail-panel,.table-card,.policy-card { background:rgba(12,17,26,.94); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); box-shadow:var(--shadow); }.card-list-panel,.table-card,.policy-card { padding:22px; }.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; }.section-heading span,.muted { color:var(--muted); }
.review-cards { display:grid; gap:14px; }.growth-card { background:linear-gradient(180deg,#121927,#0d1420); border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:18px; transition:border .15s, transform .15s; }.growth-card:hover { border-color:rgba(117,167,255,.42); transform:translateY(-1px); }.growth-card.selected { border-color:rgba(117,167,255,.72); box-shadow:0 0 0 1px rgba(117,167,255,.16); }.card-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }.card-title { font-size:20px; font-weight:850; letter-spacing:-.04em; }.card-product { color:var(--muted); font-size:13px; margin-top:4px; }.recommendation { color:var(--green); font-weight:900; font-size:13px; white-space:nowrap; }.card-summary { color:#d7deeb; line-height:1.45; font-size:14px; margin:12px 0 14px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }.chip { font-size:12px; padding:6px 9px; border-radius:999px; background:#172033; color:#d7e0f3; border:1px solid rgba(255,255,255,.08); }.chip.high,.chip.urgent { color:#ffe09a; border-color:rgba(255,209,102,.35); background:rgba(255,209,102,.1); }.chip.low { color:#bac7d8; }
.detail-panel { padding:24px; position:sticky; top:30px; }.detail-panel.empty { min-height:320px; display:grid; place-items:center; color:var(--muted); }.detail-head { display:flex; justify-content:space-between; gap:16px; align-items:start; }.detail-title { font-size:30px; line-height:1.05; font-weight:900; letter-spacing:-.06em; margin-bottom:8px; }.detail-meta { color:var(--muted); margin-bottom:18px; }.detail-block { border-top:1px solid rgba(255,255,255,.08); padding:15px 0; }.detail-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.15em; font-weight:900; margin-bottom:8px; }.detail-block p { margin:0; color:#d7deeb; line-height:1.5; }.decision-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }.decision-button { border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px; background:#121b2a; color:#e8eef9; font-weight:850; }.decision-button.primary { background:#e8f0ff; color:#07101d; }.decision-button.danger { color:#ffd2d8; border-color:rgba(255,107,122,.22); }
.board-help { color:var(--muted); margin:0 0 14px; background:rgba(12,17,26,.76); border:1px solid rgba(255,255,255,.08); padding:12px 15px; border-radius:16px; width:max-content; max-width:100%; }.kanban-board { display:grid; grid-template-columns:repeat(8,minmax(260px,1fr)); gap:14px; overflow-x:auto; padding-bottom:16px; }.kanban-column { background:rgba(12,17,26,.86); border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:14px; min-height:620px; }.kanban-column:hover { border-color:rgba(117,167,255,.26); }.column-head { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; }.column-title { font-weight:900; letter-spacing:-.03em; }.column-desc { color:var(--muted-2); font-size:12px; margin-top:4px; }.column-count { background:#172033; border-radius:999px; padding:4px 9px; color:var(--muted); font-size:12px; height:fit-content; }.kanban-card { background:#111827; border:1px solid rgba(255,255,255,.08); border-radius:17px; padding:13px; margin-bottom:10px; }.kanban-card:hover { border-color:rgba(117,167,255,.36); }.kanban-card strong { display:block; line-height:1.2; letter-spacing:-.025em; }.kanban-card p { color:var(--muted); margin:7px 0 10px; font-size:12px; line-height:1.35; }.kanban-actions { display:flex; gap:6px; flex-wrap:wrap; }.tiny-button { border:1px solid rgba(255,255,255,.1); background:#151d2b; color:#e8eef9; border-radius:10px; padding:6px 8px; font-size:11px; font-weight:760; }.empty-state.slim { padding:14px; font-size:12px; }
.compact-list,.history-list { display:grid; gap:10px; }.compact-row,.history-row { background:#101827; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px; display:flex; justify-content:space-between; gap:18px; }.compact-row p,.history-row p { margin:4px 0 0; color:var(--muted); font-size:13px; }.status-pill { text-transform:capitalize; color:#dbe7ff; background:#172033; border:1px solid rgba(117,167,255,.22); padding:5px 8px; border-radius:999px; font-size:12px; height:fit-content; }.policy-card { max-width:840px; }.policy-card h2 { font-size:36px; margin-bottom:12px; }.policy-card p:not(.eyebrow) { color:#d7deeb; line-height:1.6; }
.modal { border:0; background:transparent; padding:0; width:min(820px,calc(100vw - 30px)); }.modal::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }.modal-card { background:#0c111a; border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:var(--shadow); display:grid; gap:14px; }.modal-card label,.login-form label { display:grid; gap:7px; color:#cbd5e1; font-weight:720; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } textarea { resize:vertical; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:0; margin:4px 0 0; }.empty-state { color:var(--muted); padding:26px; text-align:center; border:1px dashed var(--line); border-radius:18px; }
.login-body { min-height:100vh; display:grid; place-items:center; }.login-shell { width:min(520px,calc(100vw - 30px)); }.login-panel { background:rgba(12,17,26,.96); border:1px solid rgba(255,255,255,.09); border-radius:30px; padding:32px; box-shadow:var(--shadow); }.login-form { display:grid; gap:14px; margin-top:24px; }.form-message { min-height:20px; color:var(--amber); margin:0; }
@media (max-width:1120px) { .app-shell { grid-template-columns:1fr; }.sidebar { position:relative; height:auto; }.review-layout { grid-template-columns:1fr; }.detail-panel { position:static; }.topbar { flex-direction:column; }.top-actions { justify-content:flex-start; } }
@media (max-width:720px) { .main { padding:18px; }.form-grid,.decision-grid { grid-template-columns:1fr; }.sidebar { padding:22px 18px; } }