:root {
  --brand:#1F3A5F; --accent:#19B7B3; --highlight:#3ED4CF;
  --bg:#F7F9FB; --card:#FFFFFF; --border:#E6ECF1;
  --text:#1B263B; --muted:#6B7C93; --ok:#22C55E; --warn:#F59E0B; --err:#EF4444;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0F172A; --card:#111827; --border:#374151; --text:#E5E7EB; --muted:#9CA3AF; }
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{width:min(1120px,94%);margin:0 auto}
.topbar{background:var(--brand);color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{flex:0 0 auto}
.brand-wordmark{color:#fff;text-decoration:none;font-weight:800;letter-spacing:0;font-size:1.08rem;white-space:nowrap}
.brand-wordmark:hover{color:var(--highlight)}
.menu{display:flex;gap:14px;flex-wrap:wrap;align-items:center;min-width:0}
.menu a{color:#dbe8ff;text-decoration:none;font-weight:600;white-space:nowrap}
.menu a:hover{color:var(--highlight)}
.menu-item{position:relative}
.menu .is-active{color:#fff}
.menu .submenu{display:none !important;position:absolute;top:100%;left:0;min-width:220px;background:#142846;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:6px;z-index:20;flex-direction:column;gap:2px}
.menu .submenu a{display:block;padding:8px 10px;border-radius:8px;white-space:nowrap}
.menu .submenu a:hover{background:rgba(255,255,255,.08)}
.menu .has-submenu:hover > .submenu,.menu .has-submenu:focus-within > .submenu{display:flex !important}
.menu-badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:#ef4444;color:#fff;font-size:.75rem;line-height:1.2;text-align:center;vertical-align:middle}
.menu-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:#ef4444;vertical-align:middle;margin-left:6px}
.userbox{font-size:.92rem;color:#dbe8ff;white-space:nowrap}.userbox a{color:#fff}

@media (max-width: 1100px){
  .topbar-inner{gap:10px}
  .menu{gap:10px}
  .menu a{font-size:.95rem}
  .userbox{font-size:.86rem}
}

@media (max-width: 860px){
  .topbar-inner{flex-wrap:wrap;align-items:center}
  .brand-wordmark{font-size:1rem}
  .menu{
    order:3;
    width:100%;
    gap:8px 12px;
    padding-top:6px;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .menu a{font-size:.93rem}
  .menu .has-submenu{width:100%}
  .menu .has-submenu > a{display:inline-block}
  .menu .has-submenu:hover > .submenu{display:none !important}
  .menu .submenu{
    position:static;
    min-width:unset;
    margin-top:4px;
    margin-left:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:8px;
    padding:6px;
  }
  .menu .has-submenu.is-open > .submenu{display:flex !important}
  .userbox{
    margin-left:auto;
    max-width:100%;
    white-space:normal;
    text-align:right;
    line-height:1.25;
  }
}

@media (max-width: 520px){
  .container{width:min(1120px,96%)}
  .topbar-inner{padding:8px 0}
  .brand-wordmark{font-size:.98rem}
  .menu{
    flex-wrap:wrap;
    padding-bottom:4px;
  }
  .userbox{width:100%;text-align:left;margin-left:0}
}
.page{padding:22px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
h1{margin:0 0 14px} h2{margin:0 0 8px;font-size:1.1rem} p{margin:0 0 8px;color:var(--muted)}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.input,.btn,select{border-radius:10px;border:1px solid var(--border);padding:10px 12px;font:inherit}
.input,select{width:100%;background:var(--card);color:var(--text)}
.btn{cursor:pointer;background:var(--accent);color:#042b2a;font-weight:700;text-decoration:none;display:inline-block}
.btn:hover{background:var(--highlight)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.alert{padding:10px 12px;border-radius:10px;margin:0 0 12px}
.alert.ok{background:rgba(34,197,94,.12);color:var(--ok)}
.alert.err{background:rgba(239,68,68,.12);color:var(--err)}
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:20px}
.login-card{width:min(460px,96%);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px}
.logo-center{display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.brand-login{min-height:58px;border-radius:10px;color:var(--brand);font-size:1.5rem;font-weight:800;letter-spacing:0;text-align:center}

.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;padding:18px;z-index:1000}
.modal[hidden]{display:none}
.modal-card{width:min(760px,96vw);background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.js-edit-row{cursor:pointer}
.js-edit-row:hover{background:rgba(25,183,179,.08)}