:root { --bg:#0f0f10; --card:#17181b; --text:#f5f5f5; --muted:#b9bcc5; --line:#2a2c33; }
*{ 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; text-decoration:none; }
.container{ width:min(980px, calc(100% - 24px)); margin:24px auto; }
.topbar{ position:sticky; top:0; background:rgba(15,15,16,.92); border-bottom:1px solid var(--line); backdrop-filter: blur(8px); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; width:min(980px, calc(100% - 24px)); margin:0 auto; }
.brand{ font-weight:700; letter-spacing:.2px; }
.topbar__nav a{ margin-left:12px; color:var(--muted); }
.topbar__nav a:hover{ color:var(--text); }
.hero{ padding:16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg, rgba(23,24,27,.95), rgba(23,24,27,.6)); }
.muted{ color:var(--muted); }
.searchrow{ display:flex; gap:10px; margin-top:14px; }
input, textarea{ width:100%; padding:12px; border-radius:12px; border:1px solid var(--line); background:#0b0c0e; color:var(--text); }
button{ padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#1f222a; color:var(--text); cursor:pointer; }
button:hover{ filter:brightness(1.08); }
.notice{ margin-top:14px; padding:12px; border-radius:12px; border:1px dashed var(--line); color:var(--muted); }
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:12px; }
@media (max-width: 820px){ .cards{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 520px){ .cards{ grid-template-columns: 1fr;} .searchrow{ flex-direction:column; } }
.card{ border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--card); margin-top:16px; }
.card__title{ font-weight:700; margin-bottom:6px; }
.card__text{ color:var(--muted); }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:16px; }
.grid2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (max-width: 640px){ .grid2{ grid-template-columns: 1fr; } .grid{ grid-template-columns: 1fr; } }
label{ display:block; margin:10px 0 6px; color:var(--muted); font-size:14px; }
.alert{ padding:10px 12px; border:1px solid #5b2b2b; background:#2a1414; border-radius:12px; margin:12px 0; }
.table{ border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:14px; }
.row{ display:grid; grid-template-columns: 70px 1.4fr 1fr 1fr 170px; gap:10px; padding:10px 12px; border-top:1px solid var(--line); }
.row.head{ background:#101114; font-weight:700; border-top:none; }