:root{ --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc }
*{ box-sizing:border-box }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI; color:var(--ink); background:var(--bg) }
.container{ max-width:1040px; margin:0 auto; padding:16px }
.nav{ position:sticky; top:0; display:flex; gap:12px; align-items:center; padding:12px 16px; background:#fff; border-bottom:1px solid var(--line); }
.nav a{ color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:10px; border:1px solid transparent }
.nav a.active{ background:var(--ink); color:#fff }
.brand{ font-weight:800; margin-right:8px }
.card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 4px 14px rgba(2,6,23,.04); margin-bottom:16px }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.input, .select, .btn{ width:100%; padding:10px 12px; border-radius:12px; }
.input, .select{ border:1px solid #cbd5e1 }
.btn{ border:0; color:#fff; background:var(--ink); cursor:pointer }
.btn[disabled]{ opacity:.5; cursor:not-allowed }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:8px; background:#dcfce7; color:#166534; font-size:12px }
.aspect-video{ position:relative; padding-top:56.25%; background:#000; border-radius:16px; overflow:hidden }
.aspect-video > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.grid5{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px }
.thumb{ aspect-ratio:1/1; background:#e2e8f0; border-radius:12px; overflow:hidden; display:grid; place-items:center; color:#94a3b8 }
.small{ color:var(--muted); font-size:12px }
.table{ width:100%; border-collapse:collapse }
.table td, .table th{ padding:8px 10px; border-bottom:1px solid var(--line) }