/* ─────────────────────────────────────────────────────────────────────────────
   UnitV Pro — Admin Panel v2  |  Figtree + Syne  |  Dark / Gold
───────────────────────────────────────────────────────────────────────────── */

:root {
  --bg-deep:    #060810;
  --bg-base:    #0b0e17;
  --bg-surface: #10141f;
  --bg-raised:  #161b28;
  --bg-input:   #1a2033;
  --border:     rgba(255,255,255,0.07);
  --border-md:  rgba(255,255,255,0.12);
  --border-hi:  rgba(255,255,255,0.18);

  --tx-hi:  #ffffff;
  --tx-mid: rgba(255,255,255,0.72);
  --tx-low: rgba(255,255,255,0.42);
  --tx-dim: rgba(255,255,255,0.25);

  --gold:        #f5a623;
  --gold-glow:   rgba(245,166,35,0.22);
  --gold-hover:  #ffbe55;
  --emerald:     #34d399;
  --emerald-dim: rgba(52,211,153,0.14);
  --rose:        #fb7185;
  --rose-dim:    rgba(251,113,133,0.14);
  --sky:         #38bdf8;
  --sky-dim:     rgba(56,189,248,0.14);
  --violet:      #a78bfa;
  --violet-dim:  rgba(167,139,250,0.15);
  --cyan:        #22d3ee;
  --cyan-dim:    rgba(34,211,238,0.13);
  --lime:        #a3e635;

  --sb-w:    260px;
  --sb-rail: 68px;
  --sb-anim: 270ms cubic-bezier(.4,0,.2,1);

  --r:    14px;
  --r-sm: 9px;
  --r-xs: 6px;
  --sh:    0 8px 32px rgba(0,0,0,0.55);
  --sh-sm: 0 2px 12px rgba(0,0,0,0.4);

  --font: 'Figtree', system-ui, sans-serif;
  --font-display: 'Syne', var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.6;
  background: var(--bg-deep);
  color: var(--tx-hi);
  -webkit-font-smoothing: antialiased;
}
body.app-body {
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 80% 60% at 0%   0%,   rgba(167,139,250,0.10), transparent 50%),
    radial-gradient(ellipse 60% 50% at 100% 0%,   rgba(245,166,35,0.09),  transparent 50%),
    radial-gradient(ellipse 50% 40% at 90%  100%, rgba(34,211,238,0.07),  transparent 45%);
}

/* ══ Shell ══════════════════════════════════════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; }

/* ══ SIDEBAR ════════════════════════════════════════════════════════════════ */
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sb-w);
  display: flex;
  flex-direction: column;
  background: linear-gradient(175deg, #121827 0%, #0b0e17 60%, #090c14 100%);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 48px rgba(0,0,0,0.4);
  z-index: 200;
  transition: width var(--sb-anim);
  overflow: hidden;
}

/* Brand */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.375rem 1rem 1.25rem 1.125rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--tx-hi);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  min-height: 68px;
}
.sb-brand__mark {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold) 0%, #c97b0c 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 0.875rem;
  color: #0a0600;
  box-shadow: 0 4px 18px rgba(245,166,35,0.38);
  letter-spacing: -0.02em;
}
.sb-brand__text {
  display: flex; flex-direction: column; line-height: 1.2;
  opacity: 1; transition: opacity var(--sb-anim), transform var(--sb-anim);
}
.sb-brand__text strong {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.025em;
}
.sb-brand__text span {
  font-size: 0.69rem; font-weight: 500; color: var(--tx-low);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* Toggle button */
.sb-toggle {
  position: absolute;
  top: 20px; right: -14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--border-md);
  color: var(--tx-mid);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  box-shadow: var(--sh-sm);
}
.sb-toggle:hover { background: var(--gold); color: #0a0600; border-color: var(--gold); }
.sb-toggle i { font-size: 0.8rem; transition: transform var(--sb-anim); }

/* Nav */
.sb-nav {
  flex: 1; padding: 0.875rem 0.625rem;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--border-md) transparent;
}
.sb-section { margin-bottom: 0.125rem; }
.sb-section__label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tx-dim);
  padding: 0.875rem 0.875rem 0.325rem;
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--sb-anim), max-height var(--sb-anim), padding var(--sb-anim);
  max-height: 40px; opacity: 1;
}
.sb-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.575rem 0.875rem;
  border-radius: var(--r-sm);
  color: var(--tx-mid); text-decoration: none;
  font-size: 0.875rem; font-weight: 500;
  white-space: nowrap; position: relative;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 2px;
}
.sb-link:hover { background: rgba(255,255,255,0.055); color: var(--tx-hi); }
.sb-link.is-active {
  background: linear-gradient(90deg, rgba(245,166,35,0.16) 0%, rgba(245,166,35,0.05) 100%);
  color: var(--gold);
}
.sb-link.is-active::before {
  content: '';
  position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--gold); box-shadow: 0 0 10px var(--gold-glow);
}
.sb-link__icon {
  flex-shrink: 0; width: 22px;
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  margin-left: -2px;
}
.sb-link__label {
  flex: 1; overflow: hidden;
  opacity: 1; transform: translateX(0);
  transition: opacity var(--sb-anim), transform var(--sb-anim);
}
/* Tooltip */
.sb-link__tip {
  position: absolute; left: calc(var(--sb-rail) + 4px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--bg-raised); color: var(--tx-hi);
  font-size: 0.78rem; font-weight: 600;
  padding: 0.32rem 0.7rem; border-radius: var(--r-xs);
  border: 1px solid var(--border-md); box-shadow: var(--sh-sm);
  pointer-events: none; opacity: 0; white-space: nowrap; z-index: 300;
  transition: opacity 0.15s, transform 0.15s;
}

/* Footer */
.sb-footer {
  padding: 0.875rem 0.625rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0; white-space: nowrap; overflow: hidden;
}
.sb-footer__hint {
  font-size: 0.7rem; color: var(--tx-dim);
  padding: 0 0.25rem 0.65rem; line-height: 1.45;
  opacity: 1; max-height: 60px;
  transition: opacity var(--sb-anim), max-height var(--sb-anim), padding var(--sb-anim);
}
.sb-logout {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.575rem 0.875rem; border-radius: var(--r-sm);
  color: var(--rose); text-decoration: none;
  font-size: 0.875rem; font-weight: 600; position: relative;
  transition: background 0.15s, color 0.15s;
}
.sb-logout:hover { background: var(--rose-dim); color: #fecdd3; }
.sb-logout__icon { flex-shrink:0; width:22px; font-size:1rem; display:flex; align-items:center; justify-content:center; margin-left:-2px; }
.sb-logout__label { opacity:1; transform:translateX(0); transition:opacity var(--sb-anim), transform var(--sb-anim); }
.sb-logout__tip {
  position: absolute; left: calc(var(--sb-rail) + 4px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--bg-raised); color: var(--tx-hi);
  font-size: 0.78rem; font-weight: 600;
  padding: 0.32rem 0.7rem; border-radius: var(--r-xs);
  border: 1px solid var(--border-md); box-shadow: var(--sh-sm);
  pointer-events: none; opacity: 0; white-space: nowrap; z-index: 300;
  transition: opacity 0.15s, transform 0.15s;
}

/* ══ COLLAPSED ══════════════════════════════════════════════════════════════ */
body.sidebar-collapsed .app-sidebar { width: var(--sb-rail); }
body.sidebar-collapsed .sb-brand__text,
body.sidebar-collapsed .sb-link__label,
body.sidebar-collapsed .sb-logout__label { opacity: 0; transform: translateX(-8px); pointer-events: none; }
body.sidebar-collapsed .sb-footer__hint { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
body.sidebar-collapsed .sb-section__label { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
body.sidebar-collapsed .sb-toggle i { transform: rotate(180deg); }
body.sidebar-collapsed .sb-link:hover .sb-link__tip { opacity: 1; transform: translateY(-50%) translateX(0); }
body.sidebar-collapsed .sb-logout:hover .sb-logout__tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ══ MAIN ═══════════════════════════════════════════════════════════════════ */
.app-main {
  flex: 1; min-width: 0;
  margin-left: var(--sb-w);
  display: flex; flex-direction: column; min-height: 100vh;
  transition: margin-left var(--sb-anim);
}
body.sidebar-collapsed .app-main { margin-left: var(--sb-rail); }

/* Topbar */
.app-topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.75rem; height: 64px; min-height: 64px;
  background: rgba(11,14,23,0.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.topbar-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-xs);
  background: transparent; border: 1px solid var(--border-md);
  color: var(--tx-mid); cursor: pointer;
  transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
.topbar-hamburger:hover { background: var(--bg-raised); color: var(--tx-hi); }
.topbar-info { min-width: 0; }
.topbar-title {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; letter-spacing: -0.025em;
  color: var(--tx-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.topbar-subtitle {
  font-size: 0.75rem; color: var(--tx-low);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.user-chip {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.32rem 0.85rem 0.32rem 0.32rem;
  border-radius: 999px;
  background: var(--bg-raised); border: 1px solid var(--border-md);
  font-size: 0.8rem; font-weight: 600; color: var(--tx-mid);
  max-width: 180px; overflow: hidden;
}
.user-chip__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet) 0%, #7c3aed 100%);
  color: #fff; font-size: 0.72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Content */
.app-content { flex: 1; padding: 2rem 1.75rem; }

/* ══ CARDS ══════════════════════════════════════════════════════════════════ */
.app-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.app-card--padded { padding: 1.5rem; }
.app-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.app-card__title { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--tx-hi); letter-spacing:-0.02em; margin:0 0 0.2rem; }
.app-card__desc { font-size:0.82rem; color:var(--tx-low); margin:0; }

/* Stat grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.stat-card {
  position: relative;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 1.25rem 1.375rem; overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--border-md); }
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:var(--r) var(--r) 0 0;
}
.stat-card--amber::before,
.stat-card--gold::before   { background: linear-gradient(90deg, var(--gold), transparent); }
.stat-card--emerald::before{ background: linear-gradient(90deg, var(--emerald), transparent); }
.stat-card--sky::before    { background: linear-gradient(90deg, var(--sky), transparent); }
.stat-card--rose::before   { background: linear-gradient(90deg, var(--rose), transparent); }
.stat-card__icon { width:36px; height:36px; border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:0.875rem; }
.stat-card--amber .stat-card__icon,
.stat-card--gold .stat-card__icon    { background:rgba(245,166,35,0.14); color:var(--gold); }
.stat-card--emerald .stat-card__icon { background:var(--emerald-dim);    color:var(--emerald); }
.stat-card--sky .stat-card__icon     { background:var(--sky-dim);        color:var(--sky); }
.stat-card--rose .stat-card__icon    { background:var(--rose-dim);       color:var(--rose); }
.stat-card__label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--tx-low); margin-bottom:0.3rem; }
.stat-card__value { font-family:var(--font-display); font-size:2rem; font-weight:800; letter-spacing:-0.04em; color:var(--tx-hi); line-height:1; margin-bottom:0.45rem; }
.stat-card__foot { font-size:0.7rem; color:var(--tx-dim); }
.stat-card__foot code { font-size:0.68rem; color:var(--gold); background:rgba(245,166,35,0.12); padding:.1em .35em; border-radius:3px; }

/* ══ FORMS ══════════════════════════════════════════════════════════════════ */
.app-form-label { display:block; font-size:0.78rem; font-weight:600; color:var(--tx-mid); margin-bottom:0.4rem; letter-spacing:0.01em; }
.form-control.app-input { background:var(--bg-input); border:1px solid var(--border-md); color:var(--tx-hi); border-radius:var(--r-sm); font-size:0.875rem; font-family:var(--font); padding:0.55rem 0.875rem; transition:border-color 0.15s, box-shadow 0.15s; }
.form-control.app-input:focus { background:var(--bg-input); border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,166,35,0.15); color:var(--tx-hi); outline:none; }
.form-control.app-input::placeholder { color:var(--tx-dim); }

/* Buttons */
.btn-app-primary { background:linear-gradient(135deg,var(--gold) 0%,#d97706 100%); color:#0a0600; border:none; border-radius:var(--r-sm); font-weight:700; font-size:0.875rem; font-family:var(--font); padding:0.575rem 1.1rem; transition:opacity .15s,transform .12s,box-shadow .15s; cursor:pointer; display:inline-flex; align-items:center; gap:0.45rem; box-shadow:0 3px 16px rgba(245,166,35,0.28); text-decoration:none; white-space:nowrap; }
.btn-app-primary:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 22px rgba(245,166,35,0.38); color:#0a0600; }
.btn-app-accent { background:rgba(56,189,248,0.12); color:var(--sky); border:1px solid rgba(56,189,248,0.28); border-radius:var(--r-sm); font-weight:600; font-size:0.875rem; font-family:var(--font); padding:0.575rem 1.1rem; transition:background .15s,color .15s; cursor:pointer; display:inline-flex; align-items:center; gap:0.45rem; text-decoration:none; white-space:nowrap; }
.btn-app-accent:hover { background:rgba(56,189,248,0.2); color:#bae6fd; }
.btn-app-ghost { background:transparent; color:var(--tx-mid); border:1px solid var(--border-md); border-radius:var(--r-sm); font-weight:600; font-size:0.875rem; font-family:var(--font); padding:0.575rem 1.1rem; transition:background .15s,color .15s; cursor:pointer; display:inline-flex; align-items:center; gap:0.45rem; text-decoration:none; white-space:nowrap; }
.btn-app-ghost:hover { background:var(--bg-raised); color:var(--tx-hi); }
.btn-app-danger { background:var(--rose-dim); color:var(--rose); border:1px solid rgba(251,113,133,0.28); border-radius:var(--r-sm); font-weight:600; font-size:0.875rem; font-family:var(--font); padding:0.575rem 1.1rem; transition:background .15s,color .15s; cursor:pointer; display:inline-flex; align-items:center; gap:0.45rem; text-decoration:none; white-space:nowrap; }
.btn-app-danger:hover { background:rgba(251,113,133,0.22); color:#fecdd3; }

/* Alerts */
.alert-app { border-radius:var(--r-sm); border:1px solid; padding:0.85rem 1.1rem; margin-bottom:1.25rem; font-size:0.875rem; }
.alert-app code { font-size:0.8rem; padding:.1em .35em; border-radius:3px; }
.alert-app--success { background:var(--emerald-dim); border-color:rgba(52,211,153,0.3); color:#a7f3d0; }
.alert-app--success code { background:rgba(52,211,153,0.12); color:var(--gold); }
.alert-app--danger { background:var(--rose-dim); border-color:rgba(251,113,133,0.3); color:#fecaca; }

/* ══ TABLE ══════════════════════════════════════════════════════════════════ */
.app-table-wrap { border-radius:var(--r); border:1px solid var(--border); overflow:hidden; background:var(--bg-surface); }
.table.app-table { --bs-table-bg:transparent; --bs-table-color:var(--tx-hi); --bs-table-border-color:var(--border); margin:0; font-size:0.85rem; }
.table.app-table thead th { font-size:0.67rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--tx-low); font-weight:700; border-bottom-color:var(--border-md); padding:0.85rem 1.1rem; background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(0,0,0,0.15)); white-space:nowrap; }
.table.app-table tbody td { padding:0.875rem 1.1rem; vertical-align:middle; color:var(--tx-hi); }
.table.app-table tbody tr { cursor:pointer; transition:background 0.1s; }
.table.app-table tbody tr:hover { background:rgba(255,255,255,0.025); }
.badge-app { padding:0.28em 0.65em; border-radius:999px; font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.badge-app--ok { background:var(--emerald-dim); color:var(--emerald); border:1px solid rgba(52,211,153,0.3); }
.badge-app--off { background:var(--rose-dim); color:var(--rose); border:1px solid rgba(251,113,133,0.3); }
.mac-cell { font-family:ui-monospace,'Cascadia Code',monospace; font-weight:600; color:#fde68a; font-size:0.78rem; letter-spacing:0.03em; }

/* ══ MISC ═══════════════════════════════════════════════════════════════════ */
.text-dim, .text-muted { color:var(--tx-low) !important; }
.text-white { color:var(--tx-hi) !important; }
.text-warning { color:var(--gold) !important; }
.text-info { color:var(--sky) !important; }
.border-violet { border-color:var(--violet) !important; }
.border-info { border-color:var(--sky) !important; }
.border-warning { border-color:var(--gold) !important; }
.border-violet { border-color:var(--violet) !important; }

.badge-pill-cyan    { background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(34,211,238,0.3); padding:.22em .65em; font-size:.72rem; font-weight:700; }
.badge-pill-magenta { background:rgba(244,114,182,0.15); color:#fbcfe8; border:1px solid rgba(244,114,182,0.3); padding:.22em .65em; font-size:.72rem; font-weight:700; }
.badge-pill-lime    { background:rgba(163,230,53,0.13); color:var(--lime); border:1px solid rgba(163,230,53,0.3); padding:.22em .65em; font-size:.72rem; font-weight:700; }

.dns-add-row { display:flex; gap:0.65rem; flex-wrap:wrap; }
.dns-add-row .form-control { flex:1; min-width:200px; }
.dns-stack { display:flex; flex-direction:column; gap:0.45rem; }
.dns-empty { padding:1rem 1.25rem; border-radius:var(--r-sm); border:1px dashed var(--border-md); text-align:center; font-size:0.85rem; color:var(--tx-low); }
.dns-chip { display:flex; align-items:center; gap:0.65rem; padding:.5rem .75rem; border-radius:var(--r-sm); background:rgba(34,211,238,0.07); border:1px solid rgba(34,211,238,0.2); }
.dns-chip__text { flex:1; font-size:.875rem; word-break:break-all; }
.dns-chip__remove { flex-shrink:0; width:30px; height:30px; border:none; border-radius:7px; background:rgba(251,113,133,0.18); color:#fecdd3; font-size:1.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.dns-chip__remove:hover { background:rgba(251,113,133,0.32); color:#fff; }
.dns-replace-card { border-left:3px solid var(--gold); }

.modal-content.app-modal-dark { background:var(--bg-raised); border:1px solid var(--border-md); border-radius:var(--r); color:var(--tx-hi); }
.modal-content.app-modal-dark .modal-header, .modal-content.app-modal-dark .modal-footer { border-color:var(--border); }
.modal-content.app-modal-dark .btn-close { filter:invert(1); opacity:.65; }
.info-dl dt { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tx-low); margin-bottom:.12rem; }
.info-dl dd { margin-bottom:.85rem; font-size:.9rem; word-break:break-all; }
.info-dl dd:last-child { margin-bottom:0; }

/* ══ LOGIN ══════════════════════════════════════════════════════════════════ */
.login-page { min-height:100vh; display:flex; background:var(--bg-deep); font-family:var(--font); }
.login-page__aside { flex:0 0 42%; max-width:520px; background:linear-gradient(160deg,#13100a 0%,#0b0e17 50%,#090c12 100%); border-right:1px solid var(--border); padding:3rem 2.75rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.login-page__aside::before { content:''; position:absolute; width:420px; height:420px; background:radial-gradient(circle,rgba(245,166,35,0.18) 0%,transparent 70%); top:-100px; right:-100px; pointer-events:none; }
.login-brand { display:flex; align-items:center; gap:1rem; position:relative; z-index:1; }
.login-brand__mark { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--gold),#b45309); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:#0a0600; box-shadow:0 8px 32px rgba(245,166,35,0.3); }
.login-aside-title { font-family:var(--font-display); font-size:1.65rem; font-weight:800; letter-spacing:-0.03em; line-height:1.25; margin:0 0 .75rem; position:relative; z-index:1; }
.login-aside-list { margin:0; padding:0; list-style:none; position:relative; z-index:1; }
.login-aside-list li { display:flex; align-items:flex-start; gap:.65rem; margin-bottom:.85rem; font-size:.9rem; color:var(--tx-mid); }
.login-aside-list i { color:var(--gold); margin-top:3px; flex-shrink:0; }
.login-page__main { flex:1; display:flex; align-items:center; justify-content:center; padding:2rem; background-image:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(56,189,248,0.06),transparent); }
.login-card { width:100%; max-width:420px; }
.login-card__inner { background:var(--bg-surface); border:1px solid var(--border-md); border-radius:var(--r); padding:2.25rem 2.25rem 2rem; box-shadow:var(--sh); }
.login-card h1 { font-family:var(--font-display); font-size:1.5rem; font-weight:800; margin:0 0 .35rem; letter-spacing:-0.03em; }
.login-card .lead-in { color:var(--tx-low); font-size:.875rem; margin-bottom:1.5rem; }

/* Mobile overlay */
.sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:190; backdrop-filter:blur(2px); }
body.sidebar-mobile-open .sb-overlay { display:block; }

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .login-page__aside { display:none; }
  .app-sidebar { transform:translateX(-100%); transition:transform var(--sb-anim), width var(--sb-anim); width:var(--sb-w) !important; box-shadow:var(--sh); }
  body.sidebar-mobile-open .app-sidebar { transform:translateX(0); }
  .app-main { margin-left:0 !important; }
  .topbar-hamburger { display:flex; }
  .sb-toggle { display:none; }
}
@media (max-width: 575.98px) {
  .app-content { padding:1.25rem 1rem; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .app-topbar { padding:0 1rem; }
  .topbar-subtitle { display:none; }
}