:root { --bg:#0b1020; --card:#121a33; --text:#e9ecf5; --muted:#aeb6d3; --border:#243055; --danger:#ff5a6a; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
a{ color:inherit; opacity:.9; }
a:hover{ opacity:1; }
.container{ max-width: 1050px; margin: 24px auto; padding: 0 16px; }

.topbar{ border-bottom:1px solid var(--border); background: rgba(0,0,0,.15); position: sticky; top:0; backdrop-filter: blur(8px); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand{ font-weight:800; text-decoration:none; }
.nav a{ margin-left:12px; text-decoration:none; }
.inline{ display:inline; margin-left: 8px; }
.linklike{ background:none; border:none; color:var(--text); cursor:pointer; opacity:.85; }
.linklike:hover{ opacity:1; text-decoration:underline; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.grid > .card{ grid-column: span 12; }
@media(min-width: 900px){ .grid > .card{ grid-column: span 6; } .grid > .card:nth-child(3){ grid-column: span 12; } }

h1{ margin: 0 0 10px; font-size: 26px; }
h2{ margin: 0 0 10px; font-size: 18px; color: var(--text); opacity: .95; }
.muted{ color:var(--muted); }
.alert{ background: rgba(255,90,106,.12); border:1px solid rgba(255,90,106,.35); padding:10px; border-radius:12px; }

.form{ display:grid; gap: 10px; }
input, select, textarea, button{
  border-radius: 12px; border:1px solid var(--border); padding: 10px 12px;
  background: rgba(0,0,0,.18); color: var(--text);
}
button{ cursor:pointer; font-weight: 650; }
button:hover{ filter: brightness(1.05); }
.btn{ display:inline-block; padding: 9px 12px; border-radius: 12px; border:1px solid var(--border); text-decoration:none; }
.danger{ border-color: rgba(255,90,106,.55); background: rgba(255,90,106,.12); }
.mt{ margin-top: 12px; }

.row-between{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }

.table{ display:grid; gap: 6px; margin-top: 10px; }
.row{ display:grid; grid-template-columns: 2fr 1.2fr 1fr 1fr; gap: 10px; padding: 10px; border:1px solid var(--border); border-radius: 14px; }
.row.head{ opacity:.9; font-weight: 700; background: rgba(255,255,255,.03); }
.chips{ display:flex; flex-wrap:wrap; gap: 8px; margin: 10px 0; }
.chip{ border:1px solid var(--border); padding:6px 10px; border-radius: 999px; background: rgba(255,255,255,.03); }
.actions{ display:flex; align-items:center; gap: 10px; }