:root{
  --bg-1:#140505;
  --bg-2:#210a0a;
  --panel:#1d0c0c;
  --panel-2:#2a1212;
  --border:#3c1919;
  --text:#f2e9e9;
  --muted:#b08d8d;
  --accent:#f87171;
  --accent-2:#dc2626;
  --danger:#f0554a;
  --warn:#f2b134;
  --call:#2ecc71;
  --put:#f0554a;
  --wait:#b08d8d;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(180,20,20,.28), transparent 55%),
    radial-gradient(circle at 100% 30%, rgba(120,10,10,.18), transparent 50%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  background-attachment:fixed;
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:var(--accent);text-decoration:none}

/* ---------------------------------------------------------------
   Top bar + off-canvas nav drawer.
   Always the same behaviour on every screen size (no breakpoint
   guessing): a fixed top bar with a hamburger button, and a sidebar
   that slides in as an overlay when tapped. Simple and reliable.
--------------------------------------------------------------- */
.layout{flex:1;min-height:0}

.mobile-topbar{
  display:flex;
  position:fixed;
  top:0; left:0; right:0;
  height:56px;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom:1px solid var(--border);
  align-items:center;
  gap:12px;
  padding:0 16px;
  z-index:220;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.mobile-brand{font-weight:700;font-size:15px;color:var(--text);letter-spacing:.02em}
.hamburger-btn{
  width:36px;height:36px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;padding:0;
  flex-shrink:0;
}
.hamburger-btn span{display:block;width:18px;height:2px;background:var(--accent);border-radius:2px}

.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(5,7,12,.65);
  backdrop-filter:blur(2px);
  z-index:250;
}
.sidebar-overlay.open{display:block}

.sidebar{
  position:fixed;
  top:0; left:0; bottom:0;
  width:260px;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border-right:1px solid var(--border);
  z-index:300;
  transform:translateX(-100%);
  transition:transform .22s ease;
  overflow-y:auto;
  padding:70px 0 20px;
  box-shadow:6px 0 30px rgba(0,0,0,.4);
}
.sidebar.open{transform:translateX(0)}
.sidebar h2{padding:0 18px 14px;font-size:16px;color:var(--accent);border-bottom:1px solid var(--border);margin:0 0 8px}
.sidebar nav{display:flex;flex-direction:column}
.sidebar nav a{
  display:block;
  padding:12px 18px;
  color:var(--muted);
  font-size:14px;
  border-left:3px solid transparent;
}
.sidebar nav a:hover,.sidebar nav a.active{color:var(--text);background:rgba(248,113,113,.1);border-left-color:var(--accent)}

.main{width:100%;padding:76px 18px 20px;overflow-x:hidden}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.topbar h1{font-size:22px;margin:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.card{
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.card .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.card .value{font-size:28px;font-weight:700;margin-top:8px}

table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:12px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.25)}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13.5px}
th{color:var(--muted);font-weight:600;background:var(--panel-2);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}

.badge{padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.badge.call{background:rgba(46,204,113,.15);color:var(--call)}
.badge.put{background:rgba(240,85,74,.15);color:var(--put)}
.badge.wait{background:rgba(143,151,172,.18);color:var(--wait)}
.badge.active{background:rgba(46,204,113,.15);color:var(--call)}
.badge.revoked,.badge.blocked{background:rgba(240,85,74,.15);color:var(--danger)}

.btn{
  display:inline-block;padding:10px 18px;border-radius:9px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;font-weight:700;border:none;cursor:pointer;font-size:14px;
  box-shadow:0 4px 14px rgba(220,38,38,.35);
}
.btn.secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn.danger{background:linear-gradient(135deg,#f0554a,#c0392b);color:#fff;box-shadow:0 4px 14px rgba(240,85,74,.25)}

form.auth{max-width:380px;margin:60px auto;background:linear-gradient(160deg, var(--panel-2), var(--panel));border:1px solid var(--border);padding:28px;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
form.auth h1{font-size:20px;margin-top:0;color:var(--accent)}

label{display:block;font-size:12.5px;color:var(--muted);margin-top:14px;letter-spacing:.01em}
input,select{
  width:100%;padding:11px 12px;margin-top:5px;border-radius:9px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  font-size:14px;
}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(248,113,113,.18)}
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23b08d8d'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5H5.5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
  padding-right:36px;
}
input::placeholder{color:#6b4a4a}

.alert{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.alert.error{background:rgba(240,85,74,.12);border:1px solid var(--danger);color:#ffb3ac}
.alert.success{background:rgba(46,204,113,.12);border:1px solid var(--call);color:var(--call)}

.app-footer{padding:14px 20px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--border);text-align:center;background:var(--panel)}
.demo-tag{background:var(--warn);color:#000;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;margin-left:8px}

/* ---- Branded user login screen ---- */
.brand-login{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:48px 20px 30px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(180,20,20,.35), transparent 60%),
    linear-gradient(180deg,#1a0606 0%,#0d0303 100%);
}
.brand-login .logo-circle{
  width:130px;height:130px;
  border-radius:50%;
  background:var(--panel-2);
  border:3px solid #b91c1c;
  box-shadow:0 0 30px rgba(220,38,38,.45);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  margin-bottom:20px;
}
.brand-login .logo-circle img{width:100%;height:100%;object-fit:cover}
.brand-login .logo-fallback{font-size:42px}
.brand-login h1{
  font-size:32px;
  margin:6px 0 4px;
  letter-spacing:.03em;
  color:#fff;
}
.brand-login h1 .accent{color:#ef4444}
.brand-login .tagline{
  color:#c9a8a8;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:34px;
}
.brand-login .key-panel{
  width:100%;
  max-width:380px;
  background:rgba(20,8,8,.6);
  border:1px solid rgba(220,38,38,.4);
  border-radius:18px;
  padding:26px 22px;
  box-shadow:0 0 40px rgba(0,0,0,.4);
}
.brand-login .key-label{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#c9a8a8;
  margin-bottom:12px;
}
.brand-login input[name="access_key"]{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(220,38,38,.5);
  border-radius:30px;
  padding:14px 18px;
  text-align:center;
  font-size:15px;
  letter-spacing:.08em;
  color:#f2c9c9;
  text-transform:uppercase;
}
.brand-login input[name="access_key"]::placeholder{color:#8a5c5c}
.brand-login .btn-activate{
  margin-top:18px;
  width:100%;
  padding:14px;
  border:none;
  border-radius:30px;
  background:linear-gradient(90deg,#dc2626,#f87171);
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.05em;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(220,38,38,.4);
}
.brand-login .no-key{
  margin:20px 0 14px;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#8a5c5c;
}
.brand-login .btn-telegram{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:13px;
  border-radius:30px;
  border:1px solid #2b7fd6;
  background:rgba(43,127,214,.08);
  color:#5cb3ff;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
}
.brand-login .alert{max-width:380px;margin-bottom:16px}

@media (min-width:900px){
  .main{max-width:1100px;margin:0 auto}
}