* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Arial, sans-serif; background:#f6f7fb; color:#222; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#0f172a; color:#fff; }
.topbar h1 { margin:0; font-size:18px; }
.topbar small { opacity:.8; font-weight:400; }
.topbar .right { display:flex; gap:8px; align-items:center; }
.grid { display:grid; gap:16px; padding:16px; grid-template-columns: repeat(2, 1fr); }
.card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.span-2 { grid-column: span 2; }
.row { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
label { font-size:12px; color:#334155; }
input[type="text"], input[type="file"] { border:1px solid #e2e8f0; border-radius:8px; padding:10px; outline:none; }
input[type="text"]:focus { border-color:#6366f1; }
.preview { max-width:120px; max-height:120px; display:none; border-radius:8px; border:1px solid #e2e8f0; }
.actions { display:flex; gap:8px; }
.primary, .secondary, button { border:none; padding:10px 14px; border-radius:10px; cursor:pointer; }
.primary { background:#2563eb; color:#fff; }
.secondary { background:#e2e8f0; color:#111; }
.between { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.table-wrap { overflow:auto; border:1px solid #e2e8f0; border-radius:10px; }
table { width:100%; border-collapse:collapse; min-width:720px; }
thead th { background:#f1f5f9; font-size:12px; text-align:left; padding:10px; color:#334155; position:sticky; top:0; }
tbody td { padding:10px; border-top:1px solid #f1f5f9; vertical-align:middle; }
.badge { display:inline-block; padding:4px 8px; background:#f1f5f9; border-radius:999px; font-size:12px; }
.iconbtn { padding:6px 10px; border-radius:8px; }
.iconbtn.danger { background:#fee2e2; color:#991b1b; }
.iconbtn.warn { background:#fef3c7; color:#92400e; }
.iconbtn.ok { background:#dcfce7; color:#166534; }
.muted { color:#64748b; font-size:12px; }
#toast { position: fixed; bottom: 16px; right: 16px; background:#0f172a; color:#fff; padding:10px 14px; border-radius:10px; opacity:0; transform:translateY(8px); transition: all .2s; pointer-events:none; }
#toast.show { opacity:1; transform:translateY(0); }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } .span-2 { grid-column: span 1; } }
dialog { border:none; border-radius:12px; padding:0; }
dialog form { padding:16px; min-width:320px; }
menu { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }