/* ===== LOGIN ===== */
.admin-login-body{ min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-wrap{ position:relative; width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 50% 50% at 30% 20%, rgba(230,57,80,.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(47,232,212,.14), transparent 60%);
}
.login-card{
  position:relative; z-index:2; width:min(420px, 92vw); padding:44px 36px; border:1px solid rgba(255,255,255,.12);
  background:rgba(18,10,28,.85); backdrop-filter:blur(16px);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.login-brand{ display:flex; align-items:center; gap:12px; font-family:var(--f-tech); letter-spacing:.15em; font-size:.9rem; }
.login-brand img{ width:38px; }
.login-sub{ color:var(--ash-dim); font-size:.85rem; margin:14px 0 26px; line-height:1.7; }
#login-form label{ display:block; font-family:var(--f-tech); font-size:.68rem; letter-spacing:.12em; color:var(--ash-dim); text-transform:uppercase; margin-bottom:16px; }
#login-form input{
  display:block; width:100%; margin-top:8px; padding:12px 14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.15); color:var(--ash); font-family:var(--f-body); font-size:.95rem;
  transition:border-color .25s ease;
}
#login-form input:focus{ outline:none; border-color:var(--circuit); }
.btn.full{ width:100%; justify-content:center; margin-top:6px; }
.login-error{ background:rgba(230,57,80,.14); border:1px solid rgba(230,57,80,.4); color:#ff8a9a; padding:10px 12px; font-size:.8rem; margin-bottom:16px; }
.login-hint{ font-size:.72rem; color:var(--ash-faint); margin-top:22px; line-height:1.6; }
.login-hint code{ color:var(--horn); }
.login-back{ display:inline-block; margin-top:18px; font-size:.78rem; color:var(--ash-dim); }
.login-back:hover{ color:var(--circuit); }

/* ===== DASHBOARD SHELL ===== */
.admin-shell{ display:flex; min-height:100vh; }
.admin-side{
  width:250px; flex-shrink:0; background:var(--void-2); border-right:1px solid rgba(255,255,255,.08);
  padding:24px 18px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh;
}
.admin-side .brand{ display:flex; align-items:center; gap:10px; font-family:var(--f-tech); font-size:.8rem; letter-spacing:.1em; margin-bottom:28px; padding:0 6px; }
.admin-side .brand img{ width:30px; }
.side-link{
  display:flex; align-items:center; gap:12px; padding:12px 14px; font-family:var(--f-tech); font-size:.78rem;
  letter-spacing:.06em; color:var(--ash-dim); border-left:2px solid transparent; transition:all .2s ease;
}
.side-link:hover{ color:var(--ash); background:rgba(255,255,255,.03); }
.side-link.active{ color:var(--circuit); border-left-color:var(--circuit); background:rgba(47,232,212,.06); }
.side-foot{ margin-top:auto; font-size:.7rem; color:var(--ash-faint); padding:0 6px; }
.side-logout{ margin-top:14px; }

.admin-main{ flex:1; padding:34px clamp(20px,4vw,48px); min-width:0; }
.admin-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:16px; }
.admin-top h1{ font-family:var(--f-display); font-size:1.7rem; }
.admin-user-chip{ display:flex; align-items:center; gap:10px; font-family:var(--f-tech); font-size:.75rem; color:var(--ash-dim); }
.admin-user-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--circuit); }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:34px; }
.kpi-card{ padding:20px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.kpi-card .l{ font-family:var(--f-tech); font-size:.65rem; letter-spacing:.12em; color:var(--ash-dim); text-transform:uppercase; }
.kpi-card .n{ font-family:var(--f-tech); font-size:1.7rem; font-weight:700; margin-top:8px; }
.kpi-card .d{ font-size:.72rem; margin-top:4px; }
.kpi-card .d.up{ color:var(--circuit); }
.kpi-card .d.down{ color:var(--ember); }

.panel{ border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.015); padding:24px; margin-bottom:24px; }
.panel h3{ font-family:var(--f-display); font-size:1.1rem; margin-bottom:16px; }
.panel-sub{ font-size:.78rem; color:var(--ash-faint); margin-bottom:18px; }

.chart-bars{ display:flex; align-items:flex-end; gap:8px; height:160px; margin-top:10px; }
.chart-bars .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; }
.chart-bars .bar{ width:100%; background:var(--seam-grad); border-radius:2px 2px 0 0; transition:height .6s ease; }
.chart-bars .lbl{ font-size:.6rem; color:var(--ash-faint); font-family:var(--f-tech); }

table.admin-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
table.admin-table th{ text-align:left; font-family:var(--f-tech); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ash-dim); padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.1); }
table.admin-table td{ padding:12px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--ash-dim); }
table.admin-table tr:hover td{ color:var(--ash); background:rgba(255,255,255,.02); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-family:var(--f-tech); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ash-dim); }
.form-field input, .form-field textarea{
  padding:11px 13px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.14);
  color:var(--ash); font-family:var(--f-body); font-size:.88rem;
}
.form-field textarea{ resize:vertical; min-height:80px; }
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--circuit); }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

.toast{
  position:fixed; bottom:24px; right:24px; z-index:2000; padding:14px 20px; background:var(--void-3);
  border:1px solid var(--circuit); font-family:var(--f-tech); font-size:.78rem; letter-spacing:.06em;
  transform:translateY(120%); transition:transform .35s ease; max-width:320px;
}
.toast.show{ transform:translateY(0); }

.account-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border:1px solid rgba(255,255,255,.08); margin-bottom:8px; }
.account-row .r-role{ font-family:var(--f-tech); font-size:.62rem; color:var(--horn); letter-spacing:.1em; text-transform:uppercase; }
.danger-btn{ background:none; border:1px solid var(--ember); color:var(--ember); padding:7px 14px; font-family:var(--f-tech); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.danger-btn:hover{ background:var(--ember); color:var(--void); }

.admin-toggle{ display:none; }
@media (max-width:920px){
  .admin-side{ position:fixed; left:0; top:0; height:100vh; z-index:400; transform:translateX(-100%); transition:transform .3s ease; }
  .admin-side.open{ transform:translateX(0); }
  .admin-toggle{ display:inline-flex; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}