:root {
  --bg: #0b1020;
  --panel: #131a2a;
  --line: #27314d;
  --text: #edf2ff;
  --muted: #a9b4cf;
  --accent: #7cc7ff;
  --good: #92f0b8;
  --warn: #ffd166;
  --bad: #ff8e8e;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, Arial, sans-serif; background:linear-gradient(180deg,#09101d,#0f1730); color:var(--text); }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration: underline; }
.container { max-width: 1180px; margin:0 auto; padding: 0 18px; }
.site-header { border-bottom:1px solid var(--line); background:rgba(10,15,29,.8); position:sticky; top:0; backdrop-filter: blur(10px); z-index:10; }
.nav-wrap { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; gap:16px; }
.brand { font-weight:800; color:var(--text); }
.nav-links { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.button-link, button, .btn { background:var(--accent); border:none; color:#06111d; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; display:inline-block; }
.btn.secondary { background:transparent; color:var(--text); border:1px solid var(--line); }
.btn.good { background:var(--good); }
.btn.warn { background:var(--warn); }
.main-content { padding: 26px 18px 48px; }
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { background:rgba(19,26,42,.9); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.card h1, .card h2, .card h3 { margin-top:0; }
.stat-label { color:var(--muted); font-size:.9rem; }
.stat-value { font-size:2rem; font-weight:800; margin-top:6px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; }
th, td { border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; }
th { color:var(--muted); font-size:.9rem; }
.num { text-align:right; }
form { display:grid; gap:12px; }
.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
label { display:grid; gap:6px; color:var(--muted); font-size:.95rem; }
input, select, textarea { width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:#0d1529; color:var(--text); }
.flash { padding:12px 14px; border-radius:12px; margin-bottom:14px; }
.flash.success { background:rgba(146,240,184,.12); border:1px solid rgba(146,240,184,.35); }
.flash.error { background:rgba(255,142,142,.12); border:1px solid rgba(255,142,142,.35); }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:.8rem; font-weight:700; }
.badge.finalized, .badge.active { background:rgba(146,240,184,.15); color:var(--good); }
.badge.draft, .badge.pending { background:rgba(255,209,102,.15); color:var(--warn); }
.badge.not_started, .badge.archived { background:rgba(169,180,207,.12); color:var(--muted); }
.commentary { line-height:1.65; color:#e7ecff; }
.hero { margin-bottom:18px; }
.small { color:var(--muted); font-size:.92rem; }
.muted { color: var(--muted); }
.avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; background:#0d1529; border:1px solid var(--line); }
.avatar-lg { width:84px; height:84px; border-radius:50%; object-fit:cover; background:#0d1529; border:1px solid var(--line); }
.stack { display:grid; gap:10px; }
.flex { display:flex; gap:14px; align-items:center; }
.justify-between { justify-content:space-between; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.code-pill { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; display:inline-block; padding:4px 8px; border-radius:8px; background:#0d1529; border:1px solid var(--line); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .nav-wrap { align-items:flex-start; flex-direction:column; }
}