/* ═══════════════════════════════════════════════════════════════
   NETVIVO CONTROL CENTER — Design System v2
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Brand palette ───────────────────────────────────────── */
  --brand-orange: #ff6b2b;
  --brand-amber:  #ffb800;
  --brand-flame:  #ff3d00;
  --brand-night:  #1a0f08;

  /* ── Surface tokens ──────────────────────────────────────── */
  --ink:       #1a0f08;
  --muted:     #725c4a;
  --line:      #ead7c6;
  --soft-line: #f4e8dc;
  --panel:     #fffdf9;
  --page:      #fff8f0;
  --nav:       #1a0f08;
  --nav-quiet: #241509;

  /* ── Semantic colors ─────────────────────────────────────── */
  --success-bg:   #f0fdf4;
  --success-line: rgba(22, 163, 74, .28);
  --success-text: #15803d;
  --danger-bg:    #fef2f2;
  --danger-line:  rgba(220, 38, 38, .28);
  --danger-text:  #dc2626;
  --warn-bg:      #fffbeb;
  --warn-line:    rgba(217, 119, 6, .28);
  --warn-text:    #d97706;
  --info-bg:      #eff6ff;
  --info-line:    rgba(37, 99, 235, .22);
  --info-text:    #2563eb;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow:      rgba(26, 15, 8, .10);
  --shadow-card: 0 2px 8px -2px rgba(26, 15, 8, .07), 0 1px 0 rgba(255, 255, 255, .8) inset;
  --shadow-lift: 0 8px 24px -8px rgba(26, 15, 8, .13), 0 1px 0 rgba(255, 255, 255, .85) inset;

  /* ── Typography ──────────────────────────────────────────── */
  --display: "Neo Sans Bold", "Neo Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Geometry ────────────────────────────────────────────── */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --sidebar-w: 260px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body  { background: var(--page); color: var(--ink); line-height: 1.5; margin: 0; }
a     { color: inherit; text-decoration: none; }
img   { display: block; max-width: 100%; }

/* ── App shell ──────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  background:
    linear-gradient(180deg, rgba(255, 107, 43, .14) 0%, transparent 22%),
    var(--nav);
  border-right: 1px solid rgba(255, 184, 0, .10);
  color: #fff8f0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  padding: 22px 14px 18px;
  position: sticky;
  top: 0;
}

/* ── Brand mark ─────────────────────────────────────────────── */
.brand {
  align-items: center;
  display: inline-flex;
  font: 900 1.25rem/1 var(--display);
  gap: 10px;
  letter-spacing: 0;
  margin-bottom: 18px;
  padding: 0 4px;
  text-transform: uppercase;
}
.brand span {
  background: linear-gradient(135deg, var(--brand-amber), var(--brand-orange) 55%, var(--brand-flame));
  border-radius: 9px;
  color: var(--ink);
  display: grid;
  flex-shrink: 0;
  font-size: .95rem;
  font-weight: 900;
  height: 36px;
  place-items: center;
  width: 36px;
}

/* ── Sidebar nav ────────────────────────────────────────────── */
.sidebar nav {
  display: grid;
  flex: 1;
  gap: 2px;
}
.nav-section {
  color: rgba(255, 248, 240, .3);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 14px 6px 4px;
  text-transform: uppercase;
}

.sidebar nav a {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: rgba(255, 248, 240, .6);
  display: block;
  font-size: .855rem;
  font-weight: 500;
  padding: 8px 11px;
  transition: background .13s, border-color .13s, color .13s;
}
.sidebar nav a:hover {
  background: rgba(255, 248, 240, .08);
  border-color: rgba(255, 184, 0, .16);
  color: #fff8f0;
}
.sidebar nav a.active {
  background: rgba(255, 107, 43, .17);
  border-color: rgba(255, 107, 43, .30);
  color: #fff8f0;
  font-weight: 700;
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 248, 240, .07);
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  gap: 4px;
}
.sidebar-button {
  background: rgba(255, 61, 0, .09);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: rgba(255, 248, 240, .45);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  padding: 8px 11px;
  text-align: left;
  transition: background .13s, color .13s;
  width: 100%;
}
.sidebar-button:hover { background: rgba(255, 61, 0, .18); color: #fff8f0; }
.sidebar-link-quiet {
  color: rgba(255, 248, 240, .4);
  display: block;
  font-size: .8rem;
  padding: 6px 11px;
  transition: color .13s;
}
.sidebar-link-quiet:hover { color: rgba(255, 248, 240, .7); }

/* ── Main content area ──────────────────────────────────────── */
main { min-width: 0; padding: 0 clamp(16px, 3vw, 40px) 48px; }

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  align-items: center;
  border-bottom: 1px solid var(--soft-line);
  display: flex;
  gap: 12px;
  height: 70px;
  justify-content: flex-end;
  margin-bottom: 26px;
}
.topbar > span:first-child {
  color: var(--muted);
  font-size: .855rem;
  font-weight: 600;
}
.pill {
  background: rgba(255, 184, 0, .13);
  border: 1px solid rgba(255, 107, 43, .2);
  border-radius: 999px;
  color: #7a3a14;
  font-size: .76rem;
  font-weight: 700;
  max-width: 220px;
  overflow: hidden;
  padding: 5px 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Typography ─────────────────────────────────────────────── */
h1 {
  font: 900 1.9rem/1.06 var(--display);
  letter-spacing: -.01em;
  margin: 0 0 5px;
  text-transform: uppercase;
}
h2 {
  font: 800 1.02rem/1.25 var(--display);
  letter-spacing: 0;
  margin: 0 0 14px;
}
h3 { font-size: .92rem; font-weight: 700; margin: 0 0 8px; }
p  { color: var(--muted); line-height: 1.5; margin-top: 0; }
small { color: var(--muted); font-size: .8rem; }

/* ── Page head ──────────────────────────────────────────────── */
.page-head, .toolbar {
  align-items: flex-end;
  border-bottom: 1px solid var(--soft-line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.page-head p, .toolbar p { margin-bottom: 0; }

/* ── Grids ──────────────────────────────────────────────────── */
.grid    { display: grid; gap: 16px; }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auto    { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

/* ── Metric cards ───────────────────────────────────────────── */
.metric {
  background:
    linear-gradient(135deg, rgba(255, 184, 0, .13) 0%, transparent 50%),
    var(--panel);
  display: grid;
  gap: 8px;
  min-height: 126px;
  overflow: hidden;
  padding: 18px 20px 16px;
  position: relative;
}
.metric::before {
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-flame));
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}
.metric:nth-child(2)::before { background: linear-gradient(90deg, var(--brand-amber), var(--brand-orange)); }
.metric:nth-child(3)::before { background: linear-gradient(90deg, var(--brand-flame), #ff8c00); }
.metric:nth-child(4)::before { background: linear-gradient(90deg, #ff8c00, var(--brand-amber)); }
.metric > span   { color: var(--muted); font-size: .73rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.metric strong   { display: block; font: 900 2.1rem/1 var(--display); letter-spacing: -.01em; margin-top: auto; }
.metric-status   { }
.metric-status strong { font: 800 1.05rem/1.3 var(--display); word-break: break-word; }
.metric .trend   { align-items: center; display: inline-flex; font-size: .72rem; font-weight: 700; gap: 3px; margin-top: 2px; }
.trend-up   { color: #16a34a; }
.trend-down { color: #dc2626; }
.trend-flat { color: var(--muted); }

/* ── Facts / key-value grid ─────────────────────────────────── */
.facts {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.facts span   { color: var(--muted); font-size: .875rem; }
.facts strong { font-size: .875rem; text-align: right; }

/* ── Table ──────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th {
  border-bottom: 2px solid var(--soft-line);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 8px 10px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  border-bottom: 1px solid var(--soft-line);
  padding: 11px 10px;
  text-align: left;
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td     { background: rgba(255, 184, 0, .03); }
td a { color: var(--brand-flame); font-weight: 650; }
td code {
  background: var(--soft-line);
  border-radius: 4px;
  font-size: .78rem;
  padding: 2px 6px;
}

/* ── Forms ──────────────────────────────────────────────────── */
form.stack, .stack { display: grid; gap: 14px; }
.fields { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

label {
  color: var(--ink);
  display: grid;
  font-size: .875rem;
  font-weight: 600;
  gap: 6px;
}
label span  { align-items: center; display: inline-flex; gap: 8px; }
label small { font-weight: 400; }

input, textarea, select {
  background: #fffaf4;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  padding: 9px 12px;
  transition: border-color .13s, box-shadow .13s, background .13s;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  background: #fff;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 43, .13);
  outline: none;
}
textarea { min-height: 82px; resize: vertical; }

/* ── Buttons ────────────────────────────────────────────────── */
button, .button {
  align-items: center;
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-flame) 100%);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px -8px rgba(255, 61, 0, .65);
  color: #fff8f0;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  gap: 6px;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  transition: filter .13s, transform .13s, box-shadow .13s;
  white-space: nowrap;
  width: fit-content;
}
button:hover, .button:hover {
  box-shadow: 0 10px 22px -8px rgba(255, 61, 0, .75);
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-1px);
}
button:active, .button:active { transform: translateY(0); }
button:disabled, .button[disabled] {
  cursor: not-allowed;
  filter: grayscale(.45);
  opacity: .52;
  transform: none;
}
button.secondary, .button.secondary {
  background: #ffecd0;
  border: 1px solid rgba(255, 107, 43, .18);
  box-shadow: none;
  color: var(--ink);
}
button.secondary:hover, .button.secondary:hover {
  background: #ffe3be;
  box-shadow: none;
  filter: none;
  transform: translateY(-1px);
}
button.danger, .button.danger {
  background: #b62d07;
  box-shadow: 0 6px 16px -6px rgba(182, 45, 7, .55);
}
button.danger:hover { box-shadow: 0 8px 20px -6px rgba(182, 45, 7, .7); }
button.ghost, .button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
  font-weight: 600;
}
button.ghost:hover { background: var(--soft-line); box-shadow: none; filter: none; transform: none; }

/* ── Action rows ────────────────────────────────────────────── */
.actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.inline  { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Alerts & flash messages ────────────────────────────────── */
.alert {
  border-radius: var(--radius-sm);
  font-size: .875rem;
  margin-bottom: 16px;
  padding: 11px 16px;
}
.alert-success {
  background: var(--success-bg);
  border: 1px solid var(--success-line);
  color: var(--success-text);
}
.alert-danger, .alert-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  color: var(--danger-text);
}
.alert-info {
  background: var(--info-bg);
  border: 1px solid var(--info-line);
  color: var(--info-text);
}
.status {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  color: #734100;
  padding: 11px 14px;
}
.upgrade {
  background: #fff1e8;
  border: 1px solid rgba(255, 107, 43, .28);
  border-radius: var(--radius-sm);
  color: #7a2207;
  margin-bottom: 18px;
  padding: 12px 16px;
}
.upgrade a { color: var(--brand-flame); font-weight: 700; text-decoration: underline; }

/* toast bar (rendered from TempData) */
.toast-bar {
  align-items: center;
  animation: toast-in .25s ease;
  border-radius: var(--radius-sm);
  display: flex;
  font-size: .875rem;
  font-weight: 500;
  gap: 10px;
  margin-bottom: 18px;
  padding: 11px 16px;
}
.toast-bar.success {
  background: var(--success-bg);
  border: 1px solid var(--success-line);
  color: var(--success-text);
}
.toast-bar.error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  color: var(--danger-text);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Premium lock ───────────────────────────────────────────── */
.premium-lock {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 184, 0, .18) 0%, transparent 40%),
    var(--nav);
  border: 1px solid rgba(255, 107, 43, .32);
  border-radius: var(--radius);
  color: #fff8f0;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 18px;
  padding: 20px 22px;
}
.premium-lock div    { display: grid; gap: 4px; }
.premium-lock strong { font: 800 1rem/1.3 var(--display); }
.premium-lock span   { color: #f1ccb4; font-size: .855rem; }

/* ── Plan card ──────────────────────────────────────────────── */
.plan { display: grid; gap: 10px; }
.plan > div:first-child { display: grid; gap: 4px; }
.plan > div:first-child > strong { color: var(--brand-flame); font-weight: 800; }
.plan-name { font: 900 1.55rem/1.1 var(--display); }

/* ── Hero section ───────────────────────────────────────────── */
.hero {
  background:
    linear-gradient(135deg, rgba(255, 184, 0, .15) 0%, transparent 44%),
    linear-gradient(315deg, rgba(255, 61, 0, .08) 0%, transparent 34%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 22px;
  overflow: hidden;
  padding: 26px 26px 22px;
  position: relative;
}
.hero::after {
  background: linear-gradient(90deg, var(--brand-amber), var(--brand-orange), var(--brand-flame));
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}
.hero h1 {
  font-size: 1.65rem;
  margin-bottom: 4px;
  text-transform: none;
}
.hero p { font-size: .9rem; margin-bottom: 0; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ── Site cards ─────────────────────────────────────────────── */
.site-card { display: grid; gap: 10px; }
.site-card-head {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.site-card-name { font-size: .95rem; font-weight: 700; }
.site-card-meta { color: var(--muted); display: grid; font-size: .8rem; gap: 2px; margin-top: 2px; }
.site-dot {
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 8px;
  margin-top: 5px;
  width: 8px;
}
.site-dot.online  { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.site-dot.offline { background: #9ca3af; }
.site-dot.unknown { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .16); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 8px;
  white-space: nowrap;
}
.badge-green  { background: rgba(22, 163, 74, .11);  color: #15803d; }
.badge-red    { background: rgba(220, 38, 38, .09);  color: #dc2626; }
.badge-amber  { background: rgba(217, 119, 6, .11);  color: #d97706; }
.badge-gray   { background: rgba(107, 114, 128, .1); color: #6b7280; }
.badge-orange { background: rgba(255, 107, 43, .11); color: #c2440e; }
.badge-blue   { background: rgba(37, 99, 235, .09);  color: #2563eb; }

/* ── Empty states ───────────────────────────────────────────── */
.empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 36px 20px;
  text-align: center;
}
.empty-icon { font-size: 2.2rem; opacity: .35; }
.empty h3   { color: var(--ink); font-size: .92rem; font-weight: 700; margin: 0; }
.empty p    { font-size: .855rem; margin: 0; max-width: 280px; }

/* ── Wizard steps ───────────────────────────────────────────── */
.wizard-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wizard-step {
  background: var(--soft-line);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  min-width: 118px;
  padding: 9px 12px;
}
.wizard-step.active {
  background: rgba(255, 107, 43, .1);
  border-color: rgba(255, 61, 0, .24);
  color: #8b2708;
}
.wizard-step.done {
  background: rgba(255, 184, 0, .14);
  border-color: rgba(255, 184, 0, .38);
  color: #6b4100;
}

/* ── Site choice (UniFi connection) ─────────────────────────── */
.site-choice { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; }
.site-choice span { align-items: center; display: flex; gap: 8px; }
.site-choice input { min-height: 0; width: auto; }

/* ── Validation ─────────────────────────────────────────────── */
.validation-summary-errors, .field-validation-error { color: #b62d07; font-size: .82rem; }
input.input-validation-error, select.input-validation-error { border-color: #b62d07; }

/* ── Auth wrapper (unauthenticated) ─────────────────────────── */
.auth {
  background:
    linear-gradient(120deg, rgba(255, 184, 0, .16) 0%, transparent 38%),
    linear-gradient(300deg, rgba(255, 61, 0, .10) 0%, transparent 36%),
    var(--page);
  display: grid;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
}

/* classic single-col login card */
.login {
  background:
    linear-gradient(135deg, rgba(255, 184, 0, .18) 0%, transparent 44%),
    var(--panel);
  max-width: 460px;
  padding: clamp(22px, 4vw, 36px);
  width: 100%;
}
.login::before {
  background: linear-gradient(90deg, var(--brand-amber), var(--brand-orange), var(--brand-flame));
  border-radius: 999px;
  content: "";
  display: block;
  height: 5px;
  margin-bottom: 22px;
  width: 68px;
}

/* two-column auth split */
.auth-split {
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -16px rgba(26, 15, 8, .18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 880px;
  min-height: 520px;
  overflow: hidden;
  width: 100%;
}
.auth-brand {
  align-items: flex-start;
  background:
    linear-gradient(145deg, rgba(255, 184, 0, .28) 0%, rgba(255, 107, 43, .18) 50%, rgba(255, 61, 0, .12) 100%),
    var(--nav);
  color: #fff8f0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 30px;
}
.auth-brand-animated {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
.auth-brand-animated::before {
  animation: auth-aurora 13s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 184, 0, .34), transparent 28%),
    radial-gradient(circle at 78% 30%, rgba(255, 107, 43, .26), transparent 30%),
    radial-gradient(circle at 48% 86%, rgba(255, 61, 0, .22), transparent 34%);
  content: "";
  inset: -18%;
  position: absolute;
  z-index: 0;
}
.auth-brand-animated::after {
  background:
    linear-gradient(rgba(255, 248, 240, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 240, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, .75), transparent 70%);
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, .75), transparent 70%);
  position: absolute;
  z-index: 0;
}
.auth-brand-canvas {
  inset: 0;
  opacity: .48;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.auth-brand-content,
.auth-brand-features {
  position: relative;
  z-index: 2;
}
.auth-brand-logo { align-items: center; display: flex; gap: 10px; margin-bottom: 20px; }
.auth-brand-logo span {
  background: linear-gradient(135deg, var(--brand-amber), var(--brand-orange));
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  font: 900 .95rem var(--display);
  height: 32px;
  place-items: center;
  width: 32px;
}
.auth-brand-logo strong { font: 900 1.15rem/1 var(--display); letter-spacing: 0; text-transform: uppercase; }
.auth-brand-headline {
  font: 900 1.7rem/1.12 var(--display);
  letter-spacing: 0;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.auth-brand-headline em { color: var(--brand-amber); font-style: normal; }
.auth-brand > p {
  color: rgba(255, 248, 240, .6);
  font-size: .855rem;
  line-height: 1.55;
  margin-bottom: 24px;
}
.auth-brand-features {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
}
.auth-brand-features li {
  align-items: center;
  color: rgba(255, 248, 240, .75);
  display: flex;
  font-size: .82rem;
  gap: 8px;
}
.auth-brand-features li::before { color: var(--brand-amber); content: "✓"; font-weight: 800; }

@keyframes auth-aurora {
  from { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) rotate(5deg) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-brand-animated::before { animation: none; }
  .auth-brand-canvas { display: none; }
}

.auth-form {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 34px;
}
.auth-form h1 {
  font-size: 1.35rem;
  margin-bottom: 4px;
  text-transform: none;
}
.auth-form > p { font-size: .875rem; margin-bottom: 22px; }

/* ── Ticket ─────────────────────────────────────────────────── */
.ticket-frame {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 420px;
  padding: 24px;
}
.ticket { color: var(--ink); display: grid; gap: 12px; text-align: center; }
.ticket h1, .ticket p { margin: 0; }
.ticket header img { max-height: 54px; max-width: 180px; }
.ticket .code {
  border: 2px dashed var(--brand-orange);
  border-radius: var(--radius-sm);
  font: 900 1.8rem/1.2 var(--display);
  letter-spacing: 0;
  padding: 14px;
  word-break: break-word;
}
.ticket .qr { aspect-ratio: 1; justify-self: center; max-width: 220px; width: 100%; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .shell  { grid-template-columns: 1fr; }
  .sidebar {
    min-height: 0;
    padding: 14px;
    position: static;
  }
  .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main { padding: 0 16px 32px; }
  .topbar { height: auto; margin-bottom: 18px; min-height: 62px; }
  .metrics, .two, .three, .plans, .fields { grid-template-columns: 1fr; }
  .page-head   { align-items: flex-start; flex-direction: column; }
  .premium-lock { align-items: flex-start; flex-direction: column; }
  .auth-split  { grid-template-columns: 1fr; }
  .auth-brand  { display: none; }
  h1 { font-size: 1.65rem; }
}