:root{
  --bg:#F5F6F8;
  --panel:#FFFFFF;
  --ink:#16202C;
  --ink-soft:#5B6675;
  --line:#E2E6EC;
  --brand:#1F4FD8;
  --brand-ink:#FFFFFF;
  --brand-soft:#E8EEFC;
  --danger:#C62828;
  --danger-soft:#FDECEC;
  --ok:#1B7F4C;
  --ok-soft:#E6F4EC;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F141A; --panel:#171E26; --ink:#E7ECF2; --ink-soft:#97A3B3; --line:#2A3440;
    --brand:#6E95FF; --brand-ink:#0B1220; --brand-soft:#1B2740;
    --danger:#FF7B7B; --danger-soft:#3A1E22; --ok:#5FD39A; --ok-soft:#173327;
    --shadow:none; color-scheme:dark;
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1{ font-size:1.5rem; font-weight:650; letter-spacing:-0.01em; }
h2{ font-size:1.05rem; font-weight:650; }
.muted{ color:var(--ink-soft); }
.small{ font-size:0.85rem; }
[hidden]{ display:none !important; }

/* ---------- Buttons & inputs ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font:inherit; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:background .15s, border-color .15s;
}
.btn:hover{ border-color:var(--ink-soft); text-decoration:none; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.btn-primary:hover{ filter:brightness(1.07); border-color:var(--brand); }
.btn-danger{ color:var(--danger); }
.btn-danger:hover{ background:var(--danger-soft); border-color:var(--danger); }
.btn-sm{ padding:5px 10px; font-size:0.85rem; }
.btn-block{ width:100%; }
.btn svg{ width:18px; height:18px; flex-shrink:0; }

input, select{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font:inherit;
}
input:focus, select:focus, .btn:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; }
.field{ margin-bottom:14px; }

.alert{ padding:10px 14px; border-radius:8px; font-size:0.9rem; margin-bottom:14px; }
.alert-error{ background:var(--danger-soft); color:var(--danger); }
.alert-ok{ background:var(--ok-soft); color:var(--ok); }
.alert-info{ background:var(--brand-soft); color:var(--ink); }

/* ---------- Auth pages ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.auth-card{
  width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:32px 28px; box-shadow:var(--shadow);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand-mark{
  width:32px; height:32px; border-radius:8px; background:var(--brand); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:800; letter-spacing:-0.02em;
}
.auth-card .brand{ margin-bottom:24px; }
.auth-card h1{ margin-bottom:6px; }
#subtitle{ margin-bottom:22px; }
.tabs{ display:flex; gap:4px; background:var(--bg); padding:4px; border-radius:9px; margin-bottom:20px; }
.tabs button{
  flex:1; padding:8px; border:none; border-radius:7px; background:none; color:var(--ink-soft);
  font:inherit; font-weight:600; cursor:pointer;
}
.tabs button[aria-selected="true"]{ background:var(--panel); color:var(--ink); box-shadow:var(--shadow); }
.divider{ display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:0.8rem; margin:18px 0; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.link-btn{ background:none; border:none; color:var(--brand); font:inherit; font-size:0.85rem; cursor:pointer; padding:0; }
.link-btn:hover{ text-decoration:underline; }
.row-between{ display:flex; justify-content:space-between; align-items:center; gap:12px; }

/* ---------- App shell ---------- */
.topbar{ background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.topbar-inner{ max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:24px; }
.nav{ display:flex; gap:4px; }
.nav a{ padding:7px 12px; border-radius:7px; color:var(--ink-soft); font-weight:600; }
.nav a:hover{ background:var(--bg); text-decoration:none; color:var(--ink); }
.nav a.active{ background:var(--brand-soft); color:var(--brand); }
.user-menu{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.avatar{
  width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; overflow:hidden; flex-shrink:0;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.badge{ display:inline-block; padding:2px 8px; border-radius:99px; font-size:0.75rem; font-weight:700; background:var(--bg); color:var(--ink-soft); border:1px solid var(--line); }
.badge-super{ background:var(--brand-soft); color:var(--brand); border-color:transparent; }
.badge-owner{ background:var(--ok-soft); color:var(--ok); border-color:transparent; }

main{ max-width:1100px; margin:0 auto; padding:28px 20px 60px; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-head p{ margin-top:4px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card + .card{ margin-top:18px; }
.card-head{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.card-body{ padding:18px 20px; }

.site-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.site-card{ padding:20px; display:flex; flex-direction:column; gap:10px; color:inherit; transition:border-color .15s; }
.site-card:hover{ border-color:var(--brand); text-decoration:none; }
.site-card h2{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }

.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ text-align:left; padding:12px 20px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table th{ font-size:0.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:700; }
.table tr:last-child td{ border-bottom:none; }
.person{ display:flex; align-items:center; gap:10px; min-width:0; }
.person div{ min-width:0; }
.person .email{ overflow:hidden; text-overflow:ellipsis; }
.actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.table select{ width:auto; padding:6px 10px; }

.inline-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.inline-form .field{ margin:0; flex:1 1 220px; }
.inline-form .field.narrow{ flex:0 0 140px; }

.copy-box{ display:flex; gap:8px; margin-top:12px; }
.copy-box input{ font-family:ui-monospace, Consolas, monospace; font-size:0.82rem; }

.empty{ padding:36px 20px; text-align:center; color:var(--ink-soft); }
.activity li{ list-style:none; padding:10px 20px; border-bottom:1px solid var(--line); font-size:0.9rem; display:flex; justify-content:space-between; gap:16px; }
.activity li:last-child{ border-bottom:none; }

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:50;
  background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:8px; font-weight:600; box-shadow:var(--shadow);
}

@media (max-width:720px){
  .topbar-inner{ flex-wrap:wrap; gap:12px; padding:12px 16px; }
  .user-menu .who{ display:none; }
  main{ padding:20px 16px 48px; }
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{ border-bottom:1px solid var(--line); padding:8px 0; }
  .table td{ border:none; padding:6px 16px; }
  .actions{ justify-content:flex-start; }
}