:root{
  --bg: #0b1220; --panel:#111a2b; --text:#e8eefc; --muted:#9fb0d3; --brand:#6aa6ff;
  --ok:#1fc28a; --warn:#ffc861; --err:#ff6b6b; --radius:14px; --shadow:0 10px 24px rgba(0,0,0,.35)
}
:root.light{ --bg:#f7f9fc; --panel:#fff; --text:#0b1220; --muted:#586686; --brand:#2b6cff }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial}
.topbar{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:10px 16px;background:var(--panel);box-shadow:var(--shadow);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:28px;height:28px}
.brand__title{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:6px}
.nav__btn{background:transparent;border:1px solid transparent;color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
.nav__btn[aria-current="page"], .nav__btn:hover{border-color:var(--brand)}
.user{display:flex;align-items:center;gap:8px}
.user__email{font-size:.9rem;color:var(--muted)}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:var(--panel);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.h2{margin:0 0 12px}
.form{display:grid;gap:12px;max-width:360px}
.form label{display:grid;gap:6px}
.form input, .form select{padding:10px;border-radius:10px;border:1px solid #24314b;background:#0d1729;color:var(--text)}
:root.light .form input, :root.light .form select{background:#fff;border-color:#dfe5f2;color:#0b1220}
.form__hint{color:var(--muted);font-size:.85rem}
.btn{appearance:none;border:0;border-radius:12px;padding:10px 14px;background:var(--brand);color:white;cursor:pointer;font-weight:600}
.btn--ghost{background:transparent;border:1px solid #2a3a5e}
.btn:disabled{opacity:.6;cursor:not-allowed}
.error{color:var(--err)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #1b2740}
.table th{color:var(--muted);text-align:left;font-weight:600}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.8rem;border:1px solid #2a3a5e}
.badge--ok{border-color:var(--ok);color:var(--ok)}
.badge--warn{border-color:var(--warn);color:var(--warn)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--panel);border-radius:16px;min-width:320px;max-width:640px;width:100%;box-shadow:var(--shadow)}
.modal__header,.modal__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #1b2740}
.modal__footer{border-top:1px solid #1b2740;border-bottom:0}
.modal__body{padding:16px}