:root{
  --bg: #080B14;
  --bg-soft: #0D1220;
  --surface: #121A2E;
  --surface-2: #17203A;
  --line: rgba(148,163,209,0.14);
  --line-strong: rgba(148,163,209,0.28);
  --text: #E9ECF7;
  --text-dim: #8B93B4;
  --text-faint: #565F81;
  --violet: #7C5CFF;
  --cyan: #2FE0D4;
  --amber: #FFB454;
  --danger: #FF6B6B;
  --ok: #7CF7B4;
  --accent: var(--amber);
  --radius: 14px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --font: 'Inter', sans-serif;
  --display: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}
*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; min-height:100%; }
body{
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(255,180,84,0.08), transparent 55%),
    radial-gradient(800px 400px at 100% 0, rgba(124,92,255,0.08), transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--cyan); }
.hidden{ display:none !important; }
h1,h2{ font-family:var(--display); letter-spacing:-0.01em; }

.layout{
  display:grid;
  grid-template-columns:260px 1fr;
  grid-template-rows:auto 1fr;
  min-height:100vh;
}
.topbar{ display:none; }
.side-backdrop{ display:none; }
.side{
  grid-row:1 / -1;
  background: rgba(13,18,32,0.92);
  border-right:1px solid var(--line);
  padding:1rem 0.75rem 2rem;
  position:sticky; top:0; height:100vh; overflow:auto;
  z-index:40;
}
.table-scroll{ width:100%; }
.side-actions{
  padding:1rem 0.5rem 0;
  display:flex; flex-direction:column; gap:0.5rem;
}
.side-actions .btn-ghost{
  width:100%; text-align:center; text-decoration:none;
}
body.drawer-lock{ overflow:hidden; }
.side .brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  color:var(--text); padding:0.35rem 0.5rem 1rem; text-decoration:none; letter-spacing:0.04em;
}
.side .brand .mark{
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,var(--amber),#ff8a5b);
  box-shadow:0 0 12px rgba(255,180,84,0.55);
}
.side .brand span{ color:var(--text-faint); font-weight:400; font-size:0.75rem; }
.side .tenant-pick{ padding:0 0.5rem 1rem; border-bottom:1px solid var(--line); margin-bottom:0.75rem; }
.side .tenant-pick label{
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-faint); font-family:var(--mono);
}
.side select{
  width:100%; margin-top:0.35rem; font-family:var(--mono); font-size:0.75rem;
  background:var(--surface); color:var(--text); border:1px solid var(--line-strong);
  padding:0.45rem; border-radius:8px;
}
.side nav ul{ list-style:none; margin:0; padding:0; }
.side nav li a{
  display:block; padding:0.4rem 0.55rem; color:var(--text-dim); text-decoration:none;
  font-size:0.88rem; border-radius:8px; transition: background .2s, color .2s;
}
.side nav li a:hover, .side nav li.active a{ background:var(--surface); color:var(--text); }
.side nav .section{
  font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-faint); padding:0.85rem 0.5rem 0.3rem; font-family:var(--mono);
}
main{ padding:1.5rem 2rem 3rem; max-width:1120px; }
h1{ font-size:1.55rem; margin:0 0 0.4rem; font-weight:700; }
.lead{ color:var(--text-dim); margin:0 0 1.25rem; font-size:0.95rem; }
.toolbar{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; align-items:center; }

.btn-primary, .btn-ghost, .btn-danger{
  font-family:var(--display); font-size:0.85rem; font-weight:600;
  padding:0.55rem 0.95rem; border-radius:10px; cursor:pointer; border:1px solid transparent;
}
.btn-primary{
  background:linear-gradient(135deg,var(--amber),#ff8a5b); color:#1a1206; border:none;
}
.btn-primary:hover{ box-shadow:0 8px 24px -8px rgba(255,180,84,0.55); }
.btn-ghost{
  background:var(--surface); color:var(--text); border-color:var(--line-strong);
}
.btn-ghost:hover{ border-color:var(--amber); }
.btn-danger{
  background:rgba(255,107,107,0.12); color:var(--danger);
  border-color:rgba(255,107,107,0.35);
}

table.data{
  width:100%; border-collapse:collapse; font-size:0.84rem;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
table.data th, table.data td{
  border-bottom:1px solid var(--line); padding:0.5rem 0.65rem; text-align:left; vertical-align:top;
}
table.data th{
  background:var(--surface-2); font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--text-faint); font-family:var(--mono);
}
table.data tr.inactive{ opacity:0.5; }
table.data code{ font-family:var(--mono); font-size:0.76rem; word-break:break-all; color:var(--cyan); }
.muted{ color:var(--text-dim); }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:1rem 0 1.25rem; }
.card-stat{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px;
}
.card-stat .n{ font-family:var(--display); font-size:1.4rem; font-weight:700; }
.card-stat .l{ color:var(--text-faint); font-size:0.72rem; margin-top:4px; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.06em; }

pre.raw, .raw{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:12px;
  padding:14px; font-family:var(--mono); font-size:12px; color:#9be8c9;
  overflow:auto; white-space:pre-wrap;
}

.flash{
  padding:0.7rem 0.9rem; border-radius:10px; margin-bottom:1rem; font-size:0.9rem;
  border:1px solid var(--line);
}
.flash.ok{ background:rgba(124,247,180,0.1); border-color:rgba(124,247,180,0.3); color:var(--ok); }
.flash.err{ background:rgba(255,107,107,0.1); border-color:rgba(255,107,107,0.35); color:var(--danger); }

.pill{
  display:inline-block; padding:0.15rem 0.5rem; border-radius:999px; font-size:0.72rem;
  font-family:var(--mono); background:var(--surface-2); border:1px solid var(--line);
}
.pill.ok{ background:rgba(124,247,180,0.1); color:var(--ok); border-color:rgba(124,247,180,0.3); }
.pill.no{ background:rgba(255,107,107,0.1); color:var(--danger); border-color:rgba(255,107,107,0.35); }

.login-wrap{
  min-height:100vh; display:grid; place-items:center; padding:2rem;
}
.login-box{
  width:min(420px,100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,0.7);
}
.login-box .flag{
  display:inline-block; font-family:var(--mono); font-size:11px; color:var(--amber);
  background:rgba(255,180,84,0.12); border:1px solid rgba(255,180,84,0.35);
  padding:4px 10px; border-radius:6px; letter-spacing:0.05em; margin-bottom:14px;
}
.login-box h1{ margin:0 0 0.35rem; font-size:1.6rem; }
.login-box label{
  display:block; margin:0.85rem 0 0.35rem; font-size:0.78rem; color:var(--text-dim);
  font-family:var(--mono); letter-spacing:0.04em; text-transform:uppercase;
}
.login-box input, .modal-body input, .modal-body textarea, .modal-body select,
main input, main textarea, main select{
  width:100%; padding:0.55rem 0.7rem; border-radius:10px;
  border:1px solid var(--line-strong); background:var(--bg-soft); color:var(--text);
  font-family:var(--font); font-size:0.92rem;
}
.modal-body label{ display:block; margin:0.65rem 0 0.3rem; font-size:0.8rem; color:var(--text-dim); }
.modal-body textarea{ min-height:90px; font-family:var(--mono); font-size:0.8rem; }
.login-box .btn-primary{ width:100%; margin-top:1.1rem; justify-content:center; }

.modal{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
}
.modal-backdrop{ position:absolute; inset:0; background:rgba(8,11,20,0.72); backdrop-filter:blur(6px); }
.modal-box{
  position:relative; width:min(560px,92vw); max-height:88vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:0;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.1rem; border-bottom:1px solid var(--line);
}
.modal-head h2{ margin:0; font-size:1.1rem; }
.modal-body{ padding:1rem 1.1rem; }
.modal-foot{
  display:flex; justify-content:flex-end; gap:0.5rem;
  padding:0.85rem 1.1rem; border-top:1px solid var(--line);
}

@media (max-width:900px){
  .layout{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
  }
  .topbar{
    display:flex;
    align-items:center;
    gap:0.65rem;
    position:sticky; top:0; z-index:50;
    height:56px; padding:0 0.75rem;
    background:rgba(8,11,20,0.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .menu-btn{
    width:40px; height:40px; flex:none;
    display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; cursor:pointer;
  }
  .menu-btn span{
    display:block; width:16px; height:2px; border-radius:2px; background:var(--text);
    transition: transform .2s var(--ease), opacity .2s;
  }
  .layout.drawer-open .menu-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .layout.drawer-open .menu-btn span:nth-child(2){ opacity:0; }
  .layout.drawer-open .menu-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .topbar-title{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
  .topbar-title strong{ font-family:var(--display); font-size:0.82rem; letter-spacing:0.06em; }
  .topbar-title span{ color:var(--text-dim); font-size:0.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tenant-mobile{
    max-width:38vw; font-family:var(--mono); font-size:0.7rem;
    background:var(--surface); color:var(--text); border:1px solid var(--line-strong);
    border-radius:8px; padding:0.35rem 0.4rem;
  }
  .side-backdrop{
    display:block; position:fixed; inset:0; z-index:35;
    background:rgba(8,11,20,0.55); backdrop-filter:blur(2px);
  }
  .side-backdrop[hidden]{ display:none !important; }
  .side{
    position:fixed; top:0; left:0; bottom:0;
    width:min(300px, 86vw); height:100vh;
    border-right:1px solid var(--line);
    transform:translateX(-105%);
    transition: transform .28s var(--ease);
    box-shadow:none;
  }
  .layout.drawer-open .side{
    transform:translateX(0);
    box-shadow:24px 0 48px -24px rgba(0,0,0,0.65);
  }
  main{ padding:1rem 0.9rem 2.5rem; min-width:0; }
  h1{ font-size:1.25rem; }
  .toolbar{ gap:0.4rem; }
  .btn-primary, .btn-ghost, .btn-danger{ padding:0.5rem 0.75rem; font-size:0.8rem; }
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .table-scroll{
    width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin:0 -0.15rem; border-radius:12px;
  }
  table.data{ min-width:560px; }
  .modal-box{ width:min(560px,96vw); max-height:90vh; }
  .login-wrap{ padding:1.25rem; align-items:flex-start; padding-top:12vh; }
  .login-box{ padding:22px 18px; }
}