/* Shared console components.
   Intentionally page-scoped (e.g. .dashboard-shell …) to avoid global bleed. */

/* =========================
   Dashboard
   ========================= */
.dashboard-shell select { background: var(--bg-panel) !important; color: var(--text-primary) !important; }
.dashboard-shell select option { background: var(--bg-panel); color: var(--text-primary); }

.dashboard-shell { display: grid; gap: 22px; }
.dashboard-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(124, 58, 237, 0.2) 55%, rgba(14, 116, 144, 0.16) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.dashboard-hero::after {
  content: '';
  position: absolute;
  inset: auto -60px -90px auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.hero-content-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-copy { max-width: 720px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.36);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.dashboard-title { margin: 0; font-size: clamp(1.75rem, 2.5vw, 2.4rem); }
.dashboard-subtitle { margin-top: 8px; max-width: 58ch; color: var(--text-secondary); }
.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}
.hero-chip span { color: var(--text-muted); font-weight: 600; }
.hero-side { min-width: min(100%, 330px); display: grid; gap: 12px; }
.hero-side-card {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.hero-side-label {
  margin: 0 0 8px 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-side-title { margin: 0; color: var(--text-primary); font-size: 1.05rem; }
.hero-side-copy { margin: 8px 0 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.hero-side-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.hero-action-card {
  display: block;
  padding: 14px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.58), rgba(15, 23, 42, 0.78));
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-action-card:hover { transform: translateY(-2px); border-color: rgba(99, 102, 241, 0.24); box-shadow: var(--shadow); }
.hero-action-card strong { display: block; color: var(--text-primary); margin-bottom: 4px; }
.hero-action-card span { display: block; color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
.header-row { display:flex; justify-content:space-between; align-items:flex-end; gap: 16px; flex-wrap: wrap; }
.dashboard-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.toolbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.88));
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.muter { color: var(--text-muted); font-size:13px; }
.month-select {
  min-width: 170px;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 4px; }
.kpi-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.68));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(145%);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: var(--metric-accent, var(--accent));
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(99, 102, 241, 0.24); }
.kpi-label {
  margin: 0 0 12px 0;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kpi-value { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.kpi-value.accent-success { color: #10b981; }
.kpi-caption { margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.metric-earnings { --metric-accent: linear-gradient(90deg, #10b981 0%, #059669 100%); }
.metric-sales { --metric-accent: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%); }
.metric-fee { --metric-accent: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%); }
.metric-count { --metric-accent: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }
.banner-card {
  margin-bottom: 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 24px;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(16, 185, 129, 0.26);
}
.banner-card h3, .banner-card p { color: inherit; }
.banner-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.banner-icon { font-size: 48px; opacity: 0.9; }
.stats-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.section-grid { margin-top: 12px; }
.panel-title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 10px; flex-wrap: wrap; }
.actions-wrap { display:flex; gap:8px; flex-wrap:wrap; }
.quick-action-grid { display:grid; grid-template-columns: 1fr; gap:10px; }
.quick-action-card {
  display:block;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.52), rgba(15, 23, 42, 0.7));
  text-decoration:none;
  color:inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: 112px;
}
.quick-action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(99, 102, 241, 0.24); }
.quick-action-card.primary { border-color: rgba(37, 99, 235, 0.35); background: linear-gradient(135deg, rgba(37,99,235,0.22), rgba(124,58,237,0.12)); }
.quick-action-label { display:block; font-weight:700; color: var(--text-primary); font-size: 15px; }
.quick-action-meta { display:block; margin-top:6px; font-size:13px; color: var(--text-secondary); }
.quick-action-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:14px;
  font-size:12px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.quick-action-arrow { color: var(--text-primary); font-size: 16px; }
.attention-list { display:grid; gap:10px; }
.attention-item {
  display:block;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(148, 163, 184, 0.14);
  text-decoration:none;
  color:inherit;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.46), rgba(15, 23, 42, 0.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.attention-item strong { display:block; color: var(--text-primary); margin-bottom: 6px; }
.attention-item span { display:block; font-size: 13px; color: var(--text-secondary); }
.attention-item.tone-warn { border-color: rgba(245, 158, 11, 0.35); box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.85); }
.attention-item.tone-bad { border-color: rgba(239, 68, 68, 0.35); box-shadow: inset 3px 0 0 rgba(239, 68, 68, 0.85); }
.attention-item.tone-info { border-color: rgba(59, 130, 246, 0.35); box-shadow: inset 3px 0 0 rgba(59, 130, 246, 0.85); }
.inventory-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:700; border: 1px solid transparent; }
.inventory-pill.tone-healthy { background: rgba(16, 185, 129, 0.14); color: #10b981; border-color: rgba(16, 185, 129, 0.22); }
.inventory-pill.tone-low { background: rgba(245, 158, 11, 0.14); color: #d97706; border-color: rgba(245, 158, 11, 0.2); }
.inventory-pill.tone-critical { background: rgba(239, 68, 68, 0.14); color: #ef4444; border-color: rgba(239, 68, 68, 0.2); }
.compact-table { width:100%; }
.compact-table th, .compact-table td { padding: 9px 10px; font-size: 13px; vertical-align: top; }
.activity-list { display:grid; gap:10px; }
.activity-item {
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.64));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.activity-item-title { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:4px; }
.activity-item-title strong { color: var(--text-primary); }
.activity-item-meta { font-size:13px; color: var(--text-secondary); line-height: 1.5; }
.funnel-row { margin-bottom:12px; }
.funnel-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; gap:8px; }
.progress-track { height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
[data-theme='dark'] .progress-track { background: rgba(148, 163, 184, 0.2); }
.progress-bar { height:100%; border-radius:999px; }
.funnel-footer { display:flex; gap:16px; margin-top:16px; padding-top:12px; border-top:1px solid var(--border); flex-wrap: wrap; }

@media (max-width: 1400px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 768px) {
  .mobile-menu-toggle { display: block; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kpi-card { padding: 16px; border-radius: 18px; }
  .kpi-label { font-size: 10px; }
  .kpi-value { font-size: 1.2rem; }
  .side { display: none; }
  .dash-layout { grid-template-columns: 1fr; }
  .dashboard-hero { padding: 20px; border-radius: 22px; }
  .hero-content-row { gap: 14px; }
  .hero-side { min-width: 100%; }
  .hero-side-actions { grid-template-columns: 1fr; }
  .mobile-dash-nav { display: block; margin-bottom: 12px; }
  .mobile-dash-nav-toggle {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    box-shadow: var(--shadow);
  }
  .mobile-dash-nav-menu {
    display: none;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;
    margin-top: 8px;
    box-shadow: var(--shadow);
  }
  .mobile-dash-nav-menu.active { display: block; }
  .grid-2 { grid-template-columns: 1fr; }
  .dashboard-toolbar { width: 100%; }
  .month-select, .toolbar-chip, .dashboard-toolbar .btn { width: 100%; }
  table { font-size: 13px; }
  th, td { padding: 6px; }
}

@media (min-width: 769px) {
  .mobile-dash-nav { display: none; }
  .kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .quick-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================
   Router detail
   ========================= */
.router-detail-shell { display: grid; gap: 20px; }
.router-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(124, 58, 237, 0.12) 50%, rgba(16, 185, 129, 0.12) 100%);
  box-shadow: var(--shadow-lg);
}
.router-detail-hero::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.detail-hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.detail-copy h2 { margin: 0 0 8px 0; }
.detail-copy p { margin: 0; max-width: 64ch; color: var(--text-secondary); }
.detail-actions { display:flex; gap:10px; flex-wrap:wrap; }
.detail-chip {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(12px);
}
.detail-chip span { display:block; }
.detail-chip-label { display:block; font-size:11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.detail-chip-value { font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.detail-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.8fr);
  gap: 18px;
}
.status-card,
.operator-card,
.advanced-details,
.advanced-panel {
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
  box-shadow: var(--shadow-sm);
}
.status-card,
.operator-card { padding: 20px; }
.status-card h3,
.operator-card h3,
.advanced-panel h4 { margin: 0 0 10px 0; color: var(--text-primary); }
.status-chip-row,
.operator-actions { display:flex; gap:10px; flex-wrap:wrap; }
.status-note,
.operator-card p,
.probe-note,
.advanced-note,
.advanced-panel .muted { color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.status-note,
.probe-note,
.advanced-note { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.12); background: rgba(255,255,255,0.04); }
.operator-card p { margin: 0 0 14px 0; }
.advanced-details { overflow: hidden; }
.advanced-details summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
  font-weight: 700;
}
.advanced-details summary::-webkit-details-marker { display: none; }
.advanced-body { padding: 0 20px 20px; }
.advanced-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.advanced-panel { padding: 18px; }
.pppoe-panel { border-left: 4px solid #8b5cf6; }
.detail-tabs { display:flex; gap:10px; flex-wrap:wrap; }
.detail-tabs a {
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 700;
}
.detail-tabs a.active {
  background: linear-gradient(135deg, rgba(37,99,235,0.22), rgba(124,58,237,0.2));
  border-color: rgba(99, 102, 241, 0.28);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.tabp { margin-top: 14px; }
.router-detail-shell .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 900px) {
  .detail-summary-grid,
  .advanced-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .router-detail-hero { padding: 20px; border-radius: 22px; }
  .detail-hero-grid { align-items: stretch; }
  .detail-chip { flex: 1 1 100%; }
  .operator-actions .btn,
  .detail-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* =========================
   Routers list
   ========================= */
.routers-shell { display: grid; gap: 18px; }
.status-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.status-indicator::before { content: ''; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-indicator.online { background: rgba(16,185,129,.12); color: #a7f3d0; border: 1px solid rgba(16,185,129,.22); }
.status-indicator.online::before { background: #10b981; box-shadow: 0 0 10px rgba(16,185,129,.55); animation: pulse 2s infinite; }
.status-indicator.offline { background: rgba(248,113,113,.12); color: #fecaca; border: 1px solid rgba(248,113,113,.22); }
.status-indicator.offline::before { background: #f87171; }
.status-indicator.unknown { background: rgba(148,163,184,.10); color: rgba(148,163,184,.95); border: 1px solid rgba(148,163,184,.18); }
.status-indicator.unknown::before { background: rgba(148,163,184,.75); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.router-icon { font-size: 20px; margin-right: 8px; }
.search-card-header { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap; }
.table-title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 10px; }
.table-title-row h3 { margin: 0; }
.table-hint { color: var(--text-muted); font-size: 13px; }
.inventory-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 16px; }
.inventory-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.inventory-chip {
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
  box-shadow: var(--shadow-sm);
}
.inventory-chip-label { display: block; margin-bottom: 4px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.inventory-chip-value { display: block; color: var(--text-primary); font-weight: 700; font-size: 0.95rem; }
.router-site-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 700;
}
.router-name-stack strong { display: block; margin-bottom: 4px; }
.router-hostname { font-size: 12px; color: var(--text-muted); }
.endpoint-pill,
.overlay-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148, 163, 184, 0.12);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.overlay-pill { background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.18); color: #ddd6fe; font-family: inherit; }
.health-cell { display: grid; gap: 8px; }
.health-stack { display: flex; gap: 6px; flex-wrap: wrap; }
.desktop-empty { padding: 34px 16px; text-align: center; }
.table-pager {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.38), rgba(15, 23, 42, 0.56));
}
.pager-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-setup-card {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 24px;
  padding: 28px;
  margin-bottom: 24px;
  color: white;
  text-align: center;
  box-shadow: 0 18px 44px rgba(16, 185, 129, 0.28);
}
.quick-setup-card p, .quick-setup-card h2 { color: inherit; }
.quick-setup-meta { margin-top: 20px; font-size: 13px; opacity: 0.92; }
.manual-router-note {
  background: rgba(245,158,11,0.12);
  border-left: 4px solid rgba(245,158,11,0.85);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.manual-router-note p { margin: 0; color: #fbbf24; font-size: 14px; }
.auto-config-note {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  margin-bottom: 16px;
}
.mobile-empty-card { text-align: center; }
@media (max-width: 768px) {
  .desktop-table { display: none; }
  .mobile-cards { display: block; }
  .router-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    transition: all 0.2s;
  }
  .router-card:active { transform: scale(0.98); }
  .router-card-header {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .router-card-header > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
  }
  .router-status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
  .router-status-badge.online { background: var(--success-bg); color: var(--success); }
  .router-status-badge.offline { background: var(--error-bg); color: var(--error); }
  .router-card-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .router-card-row:last-of-type { border-bottom: none; }
  .router-card-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
  .router-card-value { font-size: 14px; text-align: right; max-width: 60%; color: var(--text-primary); overflow-wrap: anywhere; }
  .router-health { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
  .router-card-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
  .router-card-actions .btn { flex: 1; text-align: center; }
  .add-panel { display: none; }
  .mobile-add-button { display: block; position: fixed; bottom: 20px; right: 20px; z-index: 100; }
  .add-panel.mobile-active {
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-body);
    z-index: 200;
    padding: 16px;
    overflow-y: auto;
  }
  .mobile-close-btn {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-form { width: 100%; }
  .search-form input { flex: 1; min-width: 0; }
}
@media (min-width: 769px) {
  .desktop-table { display: block; }
  .mobile-cards { display: none; }
  .mobile-add-button { display: none; }
  .add-panel { display: block !important; }
  .mobile-close-btn { display: none; }
}

/* =========================
   Payments
   ========================= */
.payments-shell select { background: var(--bg-panel) !important; color: var(--text-primary) !important; }
.payments-shell select option { background: var(--bg-panel); color: var(--text-primary); }
.payments-shell { display: grid; gap: 18px; }
.filters-mobile-toggle { display: none; }
.filters-panel { width: 100%; }
.filters-panel.mobile-collapsed { display: none; }
.filters-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.filters-shell { display: grid; gap: 14px; }
.filters-header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.filters-title-group { display:grid; gap:4px; }
.filters-title-group h3 { margin:0; }
.filters-title-group p { margin:0; font-size: 13px; color: var(--text-muted); }
.filter-form {
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items:end !important;
}
.filter-form input,
.filter-form select {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 0 12px;
  background: var(--bg-panel);
  color: var(--text-primary);
  box-shadow: var(--shadow);
}
.filters-actions { grid-column: 1 / -1; padding-top: 6px; }
.chart-grid,
.summary-grid { margin-top: 0; }
.summary-card {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.summary-row { display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
.table-card-title { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 8px; }
.empty-state { text-align:center; padding:40px 20px; }
.empty-state-icon { font-size:48px; margin-bottom:16px; }
@media (max-width: 768px) {
  .desktop-table { display: none; }
  .mobile-cards { display: block; }
  .filter-form { grid-template-columns: 1fr; }
  .filters-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
  }
  .filters-panel { padding-top: 10px; }
  .filters-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters-actions .btn { justify-content: center; }
  .payment-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
  }
  .payment-card-header {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .payment-card-header > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
  }
  .payment-status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
  .payment-status-badge.paid { background: var(--success-bg); color: var(--success); }
  .payment-status-badge.pending { background: var(--warning-bg); color: var(--warning); }
  .payment-status-badge.failed { background: var(--error-bg); color: var(--error); }
  .payment-card-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .payment-card-row:last-of-type { border-bottom: none; }
  .payment-card-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
  .payment-card-value { font-size: 13px; text-align: right; color: var(--text-primary); max-width: 62%; overflow-wrap: anywhere; }
  .filter-form { flex-direction: column; align-items: stretch !important; }
  .filter-form input,
  .filter-form select,
  .filter-form button,
  .filter-form a { width: 100%; margin: 0; min-width: 0; }
  canvas { max-width: 100% !important; }
  @media (max-width: 420px) { .filters-actions { grid-template-columns: 1fr; } }
  .grid-2 { grid-template-columns: 1fr !important; }
  .v { flex-direction: column; align-items: stretch; }
  .v .chip { text-align: center; }
}
@media (min-width: 769px) {
  .mobile-cards { display: none; }
  .desktop-table { display: block; }
}

/* =========================
   Vouchers
   ========================= */
.vouchers-shell { gap: 22px; }
.table-title-row h3,
.generator-title-row h3 { margin: 0; }
.table-title-row,
.generator-title-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.table-hint,
.generator-hint { color: var(--text-muted); font-size: 13px; }
.voucher-code-cell { display:flex; align-items:center; gap:10px; }
.voucher-code-badge {
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(124,58,237,0.08));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.05em;
}
.voucher-code-cell img {
  width:60px;
  height:60px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.vouchers-shell .empty-state { text-align:center; padding:40px 20px; }
.vouchers-shell .empty-state-icon { font-size:48px; margin-bottom:16px; }
.voucher-generator-note {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(124,58,237,0.18);
  background: linear-gradient(180deg, rgba(99,102,241,0.1), rgba(37,99,235,0.06));
}
.voucher-generator-note p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.generator-actions { display:flex; gap:8px; flex-wrap:wrap; }
.inventory-overview-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
.inventory-summary-list { display:grid; gap:10px; }
.inventory-summary-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.inventory-summary-row strong { color: var(--text-primary); }
.inventory-summary-meta { font-size:13px; color: var(--text-secondary); line-height: 1.5; }
.batch-list { display:grid; gap:10px; }
.batch-card {
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.46), rgba(15, 23, 42, 0.64));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.batch-card-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.batch-card strong { color: var(--text-primary); }
.batch-card p { margin:6px 0 0 0; font-size:13px; color: var(--text-secondary); line-height: 1.5; }
.batch-card-metrics { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; margin-top: 12px; }
.batch-card-metric {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255,255,255,0.04);
}
.batch-card-metric span { display:block; font-size:11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; }
.batch-card-metric strong { font-size: 0.98rem; }
.batch-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px; }
.preview-card {
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(37,99,235,0.2);
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(124,58,237,0.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.preview-stats { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom: 12px; }
.preview-stat {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(30, 41, 59, 0.72));
}
.preview-stat span { display:block; font-size:11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; }
.preview-stat strong { color: var(--text-primary); }
.preview-support { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 8px; }
.preview-samples { display:flex; gap:8px; flex-wrap:wrap; }
.preview-sample {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(37,99,235,0.35);
  background: rgba(15, 23, 42, 0.76);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.preset-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 12px; }
.preset-btn {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.58), rgba(15, 23, 42, 0.72));
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.preset-btn:hover { border-color: rgba(99, 102, 241, 0.24); transform: translateY(-1px); }
.preset-btn.active { border-color: rgba(37, 99, 235, 0.32); background: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(124,58,237,0.12)); box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18); }
.advanced-generator {
  margin: 16px 0;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.36), rgba(15, 23, 42, 0.5));
  overflow: hidden;
}
.advanced-generator summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color: var(--text-primary);
  font-weight: 700;
}
.advanced-generator summary::-webkit-details-marker { display:none; }
.advanced-generator-body { padding: 0 18px 18px; }
.advanced-generator-note {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.vouchers-shell .advanced-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
.code-length-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 12px; }
.code-length-btn {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.code-length-btn.active { border-color: rgba(37, 99, 235, 0.32); background: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(124,58,237,0.12)); }
.stock-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255,255,255,0.04);
}
.stock-hint.healthy { border-color: rgba(52, 211, 153, 0.18); background: rgba(16, 185, 129, 0.08); color: #bbf7d0; }
.stock-hint.low { border-color: rgba(245, 158, 11, 0.22); background: rgba(245, 158, 11, 0.08); color: #fde68a; }
.stock-hint.critical { border-color: rgba(248, 113, 113, 0.24); background: rgba(239, 68, 68, 0.08); color: #fecaca; }
@media (max-width: 768px) {
  .desktop-table { display: none; }
  .mobile-cards { display: block; }
  .inventory-overview-grid,
  .preview-stats,
  .vouchers-shell .advanced-grid,
  .batch-card-metrics { grid-template-columns: 1fr; }
  .voucher-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
  }
  .voucher-card-header { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
  .voucher-card-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .voucher-card-row:last-child { border-bottom: none; }
  .voucher-card-label { font-size: 12px; color: var(--text-secondary); font-weight: 700; }
  .voucher-card-value { font-size: 14px; text-align: right; color: var(--text-primary); max-width: 62%; overflow-wrap: anywhere; }
  .qr-code-small { width: 80px; height: 80px; margin: 8px auto; display: block; }
  .voucher-card-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
  .voucher-card-actions .btn { flex: 1; min-width: 70px; text-align: center; }
  .preview-support,
  .batch-card-header { align-items: stretch; }
  .add-panel { display: none; }
  .mobile-add-button { display: block; position: fixed; bottom: 20px; right: 20px; z-index: 100; }
  .add-panel.mobile-active {
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-body);
    z-index: 200;
    padding: 16px;
    overflow-y: auto;
  }
  .mobile-close-btn {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 769px) {
  .desktop-table { display: block; }
  .mobile-cards { display: none; }
  .mobile-add-button { display: none; }
  .add-panel { display: block !important; }
  .mobile-close-btn { display: none; }
}

/* =========================
   Sites list
   ========================= */
.site-icon { font-size: 20px; margin-right: 8px; }
@media (max-width: 768px) {
  .desktop-table { display: none; }
  .mobile-cards { display: block; }
  .site-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
  }
  .site-card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
  .site-card-title { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-card-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
  .site-card-row:last-of-type { border-bottom: none; }
  .site-card-label { font-size: 12px; color: var(--text-secondary); font-weight: 700; }
  .site-card-value { font-size: 13px; text-align: right; color: var(--text-primary); max-width: 62%; overflow-wrap: anywhere; }
  .site-card-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .site-card-actions .btn { justify-content: center; }
  @media (max-width: 420px) { .site-card-actions { grid-template-columns: 1fr; } }
}
@media (min-width: 769px) {
  .desktop-table { display: block; }
  .mobile-cards { display: none; }
}

/* =========================
   Usage analytics
   ========================= */
.usage-analytics-shell .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.usage-analytics-shell .stat-box {
  background: var(--bg-panel);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.usage-analytics-shell .stat-box:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.usage-analytics-shell .stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 8px;
}
.usage-analytics-shell .stat-value { font-size: 24px; font-weight: 800; color: var(--text-primary); }
.usage-analytics-shell .chart-container,
.usage-analytics-shell .top-users-table {
  background: var(--bg-panel);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* =========================
   Notifications settings (.notifications-settings-shell)
   ========================= */
.notifications-settings-shell .accordion {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.notifications-settings-shell .accordion-header {
  background: var(--bg-panel);
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: background 0.2s;
}
.notifications-settings-shell .accordion-header:hover { background: var(--bg-body); }
.notifications-settings-shell .accordion-header.active {
  background: var(--bg-body);
  border-bottom: 1px solid var(--border);
}
.notifications-settings-shell .accordion-body {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.notifications-settings-shell .accordion-body.open {
  max-height: 2000px;
  padding: 16px;
}
.notifications-settings-shell .accordion-icon {
  transition: transform 0.3s;
  font-size: 12px;
}
.notifications-settings-shell .accordion-header.active .accordion-icon { transform: rotate(180deg); }
.notifications-settings-shell .stat-pill {
  display: inline-block;
  background: #dbeafe;
  color: #1e40af;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin: 2px;
}
.notifications-settings-shell .stat-pill--danger {
  background: #fee2e2;
  color: #991b1b;
}
.notifications-settings-shell .pill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.notifications-settings-shell .panel-title { margin-top: 0; }
.notifications-settings-shell .compact-field { margin-bottom: 12px; }
.notifications-settings-shell .compact-field > label {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  color: var(--text-secondary);
}
.notifications-settings-shell .compact-field label.label-row-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.notifications-settings-shell .compact-field input,
.notifications-settings-shell .compact-field select,
.notifications-settings-shell .compact-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-panel);
  color: var(--text-primary);
}
.notifications-settings-shell .compact-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.notifications-settings-shell .compact-field select option {
  background: var(--bg-panel);
  color: var(--text-primary);
}
.notifications-settings-shell .hint-under-check {
  display: block;
  margin-left: 28px;
}
.notifications-settings-shell .compact-field--spaced { margin-top: 16px; }
.notifications-settings-shell .form-actions { margin-top: 16px; }
@media (max-width: 768px) {
  .notifications-settings-shell .btn {
    display: block;
    width: 100%;
    margin: 6px 0;
    text-align: center;
  }
}

/* =========================
   Notifications templates list (.notifications-templates-shell)
   ========================= */
.notifications-templates-shell .template-card {
  background: var(--bg-panel);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 16px;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}
.notifications-templates-shell .template-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.notifications-templates-shell .template-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.notifications-templates-shell .template-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.notifications-templates-shell .template-icon { font-size: 20px; }
.notifications-templates-shell .template-body {
  background: var(--bg-body);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  border-left: 3px solid #3b82f6;
}
.notifications-templates-shell .template-preview {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-family: monospace;
  white-space: pre-wrap;
}
.notifications-templates-shell .template-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.notifications-templates-shell .meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.notifications-templates-shell .status-active {
  background: #d1fae5;
  color: #065f46;
}
.notifications-templates-shell .status-inactive {
  background: #fee2e2;
  color: #991b1b;
}
.notifications-templates-shell .type-badge {
  background: var(--bg-body);
  color: var(--text-muted);
}
.notifications-templates-shell .nt-page-header {
  background: var(--bg-panel);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.notifications-templates-shell .nt-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.notifications-templates-shell .nt-page-title {
  margin: 0 0 8px 0;
}
.notifications-templates-shell .nt-page-lede {
  margin: 0;
  font-size: 14px;
}
.notifications-templates-shell .variables-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  border: 1px solid var(--border);
}
.notifications-templates-shell .variables-info-lede {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.notifications-templates-shell .var-code {
  background: var(--bg-panel);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin: 2px;
}
.notifications-templates-shell .empty-templates-panel {
  text-align: center;
  padding: 40px;
}
.notifications-templates-shell .templates-footer-actions { margin-top: 20px; }

/* =========================
   Promo code create (.promo-code-create-shell)
   ========================= */
.promo-code-create-shell .promo-create-form-wrap { max-width: 700px; margin: 0 auto; }
.promo-code-create-shell .promo-create-title { margin: 0; }
.promo-code-create-shell .form-group { margin-bottom: 20px; }
.promo-code-create-shell .form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.promo-code-create-shell .form-group input,
.promo-code-create-shell .form-group select,
.promo-code-create-shell .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-panel);
  color: var(--text-primary);
}
.promo-code-create-shell .form-group small {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}
.promo-code-create-shell .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.promo-code-create-shell .radio-group {
  display: flex;
  gap: 16px;
}
.promo-code-create-shell .radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
}
.promo-code-create-shell .input-uppercase { text-transform: uppercase; }
.promo-code-create-shell .promo-tips-callout {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 16px;
  border-radius: 8px;
  margin: 24px 0;
}
.promo-code-create-shell .promo-tips-callout h4 {
  margin: 0 0 8px 0;
  color: #1e40af;
}
.promo-code-create-shell .promo-tips-callout ul {
  margin: 0;
  padding-left: 20px;
  color: #1e40af;
  font-size: 13px;
  line-height: 1.6;
}
.promo-code-create-shell .form-submit-row {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 640px) {
  .promo-code-create-shell .form-row { grid-template-columns: 1fr; }
}

/* =========================
   Team
   ========================= */
.page-shell select { background: var(--bg-panel); color: var(--text-primary); }
.page-shell select option { background: var(--bg-panel); color: var(--text-primary); }

/* =========================
   Stock alerts dashboard (scoped — shared class names like .stat-box, .history-item)
   ========================= */
.stock-dashboard-page .stock-shell { display: grid; gap: 22px; }
.stock-dashboard-page .stock-hero {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(245, 158, 11, 0.18);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(239, 68, 68, 0.12) 48%, rgba(59, 130, 246, 0.14) 100%);
  box-shadow: var(--shadow-lg);
}
.stock-dashboard-page .stock-hero::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.stock-dashboard-page .stock-hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.stock-dashboard-page .stock-badge-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.24);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.stock-dashboard-page .stock-copy h2 { margin: 0 0 8px 0; }
.stock-dashboard-page .stock-copy p { margin: 0; max-width: 64ch; color: var(--text-secondary); }
.stock-dashboard-page .stock-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stock-dashboard-page .stock-hero-chip {
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
}
.stock-dashboard-page .stock-hero-chip span { display: block; }
.stock-dashboard-page .stock-hero-chip-label {
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stock-dashboard-page .stock-hero-chip-value { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.stock-dashboard-page .summary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stock-dashboard-page .stat-box {
  text-align: left;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.48), rgba(15, 23, 42, 0.66));
  box-shadow: var(--shadow);
}
.stock-dashboard-page .stat-box.critical { border-color: rgba(239, 68, 68, 0.24); }
.stock-dashboard-page .stat-box.low { border-color: rgba(245, 158, 11, 0.22); }
.stock-dashboard-page .stat-box.ok { border-color: rgba(16, 185, 129, 0.22); }
.stock-dashboard-page .stat-value { font-size: 36px; font-weight: 800; margin-bottom: 6px; }
.stock-dashboard-page .stat-label { color: var(--text-secondary); font-size: 13px; }
.stock-dashboard-page .stock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.stock-dashboard-page .stock-card {
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.68));
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.stock-dashboard-page .stock-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--stock-accent, rgba(148, 163, 184, 0.6));
}
.stock-dashboard-page .stock-card.critical { --stock-accent: #ef4444; }
.stock-dashboard-page .stock-card.low { --stock-accent: #f59e0b; }
.stock-dashboard-page .stock-card.ok { --stock-accent: #10b981; }
.stock-dashboard-page .stock-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.stock-dashboard-page .stock-site { font-weight: 700; color: var(--text-primary); font-size: 16px; }
.stock-dashboard-page .stock-package { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.stock-dashboard-page .stock-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.stock-dashboard-page .badge-critical { background: rgba(239, 68, 68, 0.14); color: #ef4444; border-color: rgba(239, 68, 68, 0.22); }
.stock-dashboard-page .badge-low { background: rgba(245, 158, 11, 0.14); color: #d97706; border-color: rgba(245, 158, 11, 0.22); }
.stock-dashboard-page .badge-ok { background: rgba(16, 185, 129, 0.14); color: #10b981; border-color: rgba(16, 185, 129, 0.22); }
.stock-dashboard-page .stock-level-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.stock-dashboard-page .stock-level { font-size: 40px; font-weight: 800; line-height: 1; }
.stock-dashboard-page .stock-level.critical { color: #ef4444; }
.stock-dashboard-page .stock-level.low { color: #f59e0b; }
.stock-dashboard-page .stock-level.ok { color: #10b981; }
.stock-dashboard-page .stock-threshold { color: var(--text-secondary); font-size: 13px; }
.stock-dashboard-page .stock-meta-grid { display: grid; gap: 8px; margin-top: 16px; }
.stock-dashboard-page .stock-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148, 163, 184, 0.1);
}
.stock-dashboard-page .stock-meta-row strong { color: var(--text-primary); }
.stock-dashboard-page .stock-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.stock-dashboard-page .activity-panel { margin-top: 4px; }
.stock-dashboard-page .activity-list { display: grid; gap: 10px; }
.stock-dashboard-page .history-item {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.stock-dashboard-page .history-action { font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.stock-dashboard-page .history-details { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.stock-dashboard-page .history-time { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.stock-dashboard-page .info-panel {
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(14,116,144,0.08));
}
.stock-dashboard-page .info-panel h4 { margin: 0 0 8px 0; color: var(--text-primary); }
.stock-dashboard-page .info-panel ul { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.stock-dashboard-page .info-panel p { margin: 12px 0 0 0; color: var(--text-secondary); font-size: 13px; }
.stock-dashboard-page .panel.empty-state {
  text-align: center;
  padding: 64px 20px;
  border-radius: 24px;
}
.stock-dashboard-page .summary-stats .stat-box.critical .stat-value { color: #dc2626; }
.stock-dashboard-page .summary-stats .stat-box.low .stat-value { color: #f59e0b; }
.stock-dashboard-page .summary-stats .stat-box.ok .stat-value { color: #10b981; }
.stock-dashboard-page .activity-panel > h3 { margin: 0 0 16px 0; }
.stock-dashboard-page .stock-activity-empty { text-align: center; padding: 40px; }
.stock-dashboard-page .panel.empty-state .stock-empty-icon { font-size: 64px; margin-bottom: 16px; }
.stock-dashboard-page .panel.empty-state > h3 { margin: 0 0 8px 0; }
.stock-dashboard-page .panel.empty-state .stock-empty-lead {
  margin: 0 0 24px 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .stock-dashboard-page .stock-hero { padding: 20px; border-radius: 22px; }
  .stock-dashboard-page .stock-hero-grid { align-items: stretch; }
  .stock-dashboard-page .stock-hero-chip { flex: 1 1 100%; }
  .stock-dashboard-page .summary-stats { grid-template-columns: 1fr; }
  .stock-dashboard-page .history-item { align-items: flex-start; flex-direction: column; }
}

/* =========================
   Financial dashboard (scoped under .financial-dashboard-shell)
   ========================= */
.financial-dashboard-shell .finance-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
  }

  .financial-dashboard-shell .date-filter {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--bg-panel);
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    flex-wrap: wrap;
  }

  .financial-dashboard-shell .date-filter input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-body);
    color: var(--text-primary);
  }

  .financial-dashboard-shell .date-filter button {
    padding: 8px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.2s;
  }

  .financial-dashboard-shell .date-filter button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }

  .financial-dashboard-shell .finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
  }

  .financial-dashboard-shell .finance-card {
    background: var(--bg-panel);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .financial-dashboard-shell .finance-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  }

  .financial-dashboard-shell .finance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  }

  .financial-dashboard-shell .finance-card.featured {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
  }

  .financial-dashboard-shell .finance-card.featured::before { display: none; }

  .financial-dashboard-shell .card-icon {
    font-size: 28px;
    opacity: 0.3;
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .financial-dashboard-shell .finance-card.featured .card-icon { opacity: 0.2; }

  .financial-dashboard-shell .finance-card h3 {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .financial-dashboard-shell .finance-card.featured h3 { color: rgba(255,255,255,0.9); }

  .financial-dashboard-shell .finance-card .value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
  }

  .financial-dashboard-shell .finance-card.featured .value { color: white; }

  .financial-dashboard-shell .finance-card .sub {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .financial-dashboard-shell .finance-card.featured .sub { color: rgba(255,255,255,0.85); }

  .financial-dashboard-shell .chart-panel {
    background: var(--bg-panel);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .financial-dashboard-shell .chart-panel canvas {
    max-height: 400px;
    width: 100% !important;
    height: 400px !important;
  }

  .financial-dashboard-shell .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .financial-dashboard-shell .chart-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .financial-dashboard-shell .chart-header select {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
  }

  .financial-dashboard-shell .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
  }

  .financial-dashboard-shell .progress-bar {
    width: 100%;
    height: 10px;
    background: var(--bg-body);
    border-radius: 5px;
    overflow: hidden;
  }

  .financial-dashboard-shell .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s;
    border-radius: 5px;
  }

  .financial-dashboard-shell .actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }

  @media (max-width: 768px) {
    .financial-dashboard-shell .finance-header { flex-direction: column; }
    .financial-dashboard-shell .finance-grid { grid-template-columns: 1fr; }
    .financial-dashboard-shell .stats-grid { grid-template-columns: 1fr; }
    .financial-dashboard-shell .date-filter { flex-direction: column; width: 100%; }
    .financial-dashboard-shell .date-filter input, .financial-dashboard-shell .date-filter button { width: 100%; }
    .financial-dashboard-shell .actions-grid { grid-template-columns: 1fr; }
  }

.financial-dashboard-shell .financial-period-panel { margin-bottom: 16px; }
.financial-dashboard-shell .financial-period-label { display: block; font-size: 12px; margin-bottom: 8px; }
.financial-dashboard-shell .financial-panel-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.financial-dashboard-shell .financial-sales-row { display: flex; align-items: center; gap: 8px; }
.financial-dashboard-shell .financial-sales-row .progress-bar { flex: 1; min-width: 0; }
.financial-dashboard-shell .actions-grid .btn { text-align: center; }

/* =========================
   Revenue reports (scoped under .revenue-reports-shell)
   ========================= */
.revenue-reports-shell { display: grid; gap: 22px; }
.revenue-reports-shell .revenue-reports-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.revenue-reports-shell .revenue-reports-tabs-wrap { margin-bottom: 24px; }
.revenue-reports-shell .report-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg-body);
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.revenue-reports-shell .report-tab {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.revenue-reports-shell .report-tab:hover {
  background: var(--bg-panel);
  color: var(--text-primary);
}
.revenue-reports-shell .report-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.revenue-reports-shell .metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.revenue-reports-shell .metric-card {
  background: var(--bg-panel);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.revenue-reports-shell .metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.revenue-reports-shell .metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}
.revenue-reports-shell .metric-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.revenue-reports-shell .metric-card-icon {
  font-size: 24px;
  opacity: 0.3;
  line-height: 1;
}
.revenue-reports-shell .metric-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.revenue-reports-shell .metric-card-head .metric-label { margin-bottom: 0; }
.revenue-reports-shell .metric-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.revenue-reports-shell .metric-change {
  font-size: 13px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.revenue-reports-shell .metric-change.positive { color: #10b981; }
.revenue-reports-shell .metric-change.negative { color: #ef4444; }
.revenue-reports-shell .chart-panel {
  background: var(--bg-panel);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.revenue-reports-shell .chart-panel h3 {
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
}
.revenue-reports-shell .revenue-trend-chart-host {
  height: 320px;
  position: relative;
}
.revenue-reports-shell .revenue-panel-title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.revenue-reports-shell .table-caption-left { text-align: left; }
.revenue-reports-shell .text-growth-positive { color: #10b981; }
.revenue-reports-shell .text-growth-negative { color: #ef4444; }
.revenue-reports-shell .revenue-site-amount { color: #10b981; font-weight: 600; }
.revenue-reports-shell .revenue-inline-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.revenue-reports-shell .panel.revenue-panel-spaced { margin-top: 24px; }
.revenue-reports-shell .revenue-quick-actions-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.revenue-reports-shell .btn-inline-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
  .revenue-reports-shell .report-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }
  .revenue-reports-shell .metric-grid { grid-template-columns: 1fr; }
  .revenue-reports-shell .revenue-reports-top-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* =========================
   Router monitoring (health, logs, traffic, queues)
   ========================= */
  .router-health-page .health-shell { display: grid; gap: 20px; }
  .router-health-page .health-hero {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: 28px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(14, 165, 233, 0.12) 48%, rgba(16, 185, 129, 0.12) 100%);
    box-shadow: var(--shadow-lg);
  }
  .router-health-page .health-hero::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -10px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .router-health-page .health-hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
  }
  .router-health-page .health-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.24);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .router-health-page .health-copy h2 { margin: 0 0 8px 0; }
  .router-health-page .health-copy p { margin: 0; color: var(--text-secondary); max-width: 62ch; }
  .router-health-page .health-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .router-health-page .health-chip {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .router-health-page .health-chip span { display: block; }
  .router-health-page .health-chip-label {
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .router-health-page .health-chip-value {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 1rem;
  }
  .router-health-page .health-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .router-health-page .health-toolbar h3 { margin: 0; }
  .router-health-page .health-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.14);
  }
  .router-health-page .health-filter label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .router-health-page .health-stats {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
  .router-health-page .health-stat {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.48), rgba(15, 23, 42, 0.66));
    box-shadow: var(--shadow);
  }
  .router-health-page .health-stat-label {
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .router-health-page .health-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 8px;
  }
  .router-health-page .health-stat-note {
    color: var(--text-secondary);
    font-size: 13px;
  }
  .router-health-page .chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
  }
  .router-health-page .chart-panel {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.64));
    box-shadow: var(--shadow);
  }
  .router-health-page .chart-panel h4 {
    margin: 0 0 6px 0;
    color: var(--text-primary);
  }
  .router-health-page .chart-panel p {
    margin: 0 0 14px 0;
    color: var(--text-secondary);
    font-size: 13px;
  }
  .router-health-page .chart-canvas {
    position: relative;
    height: 240px;
  }
  .router-health-page .health-empty {
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 18px;
  }
  @media (max-width: 768px) {
    .router-health-page .health-hero { padding: 20px; border-radius: 22px; }
    .router-health-page .health-hero-grid { align-items: stretch; }
    .router-health-page .health-chip { flex: 1 1 100%; }
    .router-health-page .health-stats { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .router-health-page .health-stats { grid-template-columns: 1fr; }
    .router-health-page .health-filter { width: 100%; }
  }
.router-health-page .chart-panel.chart-panel--full-span { grid-column: 1 / -1; }

  .router-logs-page .logs-shell { display: grid; gap: 20px; }
  .router-logs-page .logs-hero {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(124, 58, 237, 0.14) 100%);
    box-shadow: var(--shadow-lg);
  }
  .router-logs-page .logs-hero::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .router-logs-page .logs-hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
  }
  .router-logs-page .logs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.34);
    border: 1px solid rgba(255,255,255,0.32);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .router-logs-page .logs-copy h2 { margin: 0 0 8px 0; }
  .router-logs-page .logs-copy p { margin: 0; color: var(--text-secondary); max-width: 58ch; }
  .router-logs-page .logs-actions { display:flex; gap:10px; flex-wrap:wrap; }
  .router-logs-page .logs-chip {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.28);
  }
  .router-logs-page .logs-chip span { display:block; }
  .router-logs-page .logs-chip-label { display:block; font-size:11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
  .router-logs-page .logs-chip-value { font-size: 1rem; font-weight: 800; color: var(--text-primary); }
  .router-logs-page .logs-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .router-logs-page .logs-toolbar h3 { margin: 0; }
  .router-logs-page .logs-filter {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.14);
  }
  .router-logs-page .topic-pill {
    display:inline-flex;
    align-items:center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.18);
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 700;
  }
  .router-logs-page .empty-row { text-align:center; padding: 28px 16px; }
  @media (max-width: 768px) {
    .router-logs-page .logs-hero { padding: 18px; border-radius: 20px; }
    .router-logs-page .logs-hero-grid { align-items: stretch; }
    .router-logs-page .logs-chip { flex: 1 1 100%; }
    .router-logs-page .logs-filter { width: 100%; }
  }
  .router-traffic-page .traffic-shell { display: grid; gap: 20px; }
  .router-traffic-page .traffic-hero {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(16, 185, 129, 0.12) 100%);
    box-shadow: var(--shadow-lg);
  }
  .router-traffic-page .traffic-hero::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .router-traffic-page .traffic-hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
  }
  .router-traffic-page .traffic-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.32);
    border: 1px solid rgba(255,255,255,0.28);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .router-traffic-page .traffic-copy h2 { margin: 0 0 8px 0; }
  .router-traffic-page .traffic-copy p { margin: 0; color: var(--text-secondary); max-width: 58ch; }
  .router-traffic-page .traffic-actions { display:flex; gap:10px; flex-wrap:wrap; }
  .router-traffic-page .traffic-chip {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.28);
  }
  .router-traffic-page .traffic-chip span { display:block; }
  .router-traffic-page .traffic-chip-label { display:block; font-size:11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
  .router-traffic-page .traffic-chip-value { font-size: 1rem; font-weight: 800; color: var(--text-primary); }
  .router-traffic-page .traffic-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .router-traffic-page .traffic-filter {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.14);
  }
  .router-traffic-page .chart-panel {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
    box-shadow: var(--shadow-sm);
  }
  .router-traffic-page .chart-panel h4 { margin: 0 0 6px 0; color: var(--text-primary); }
  .router-traffic-page .chart-panel p { margin: 0 0 14px 0; color: var(--text-secondary); font-size: 13px; }
  .router-traffic-page .chart-canvas { position: relative; height: 260px; }
  .router-traffic-page .live-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .router-traffic-page .live-metric {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255,255,255,0.04);
  }
  .router-traffic-page .live-metric h3 { margin: 0 0 8px 0; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
  .router-traffic-page .live-metric .v { font-size: 2rem; font-weight: 800; color: var(--text-primary); }
  @media (max-width: 768px) {
    .router-traffic-page .traffic-hero { padding: 18px; border-radius: 20px; }
    .router-traffic-page .traffic-hero-grid { align-items: stretch; }
    .router-traffic-page .traffic-chip { flex: 1 1 100%; }
    .router-traffic-page .traffic-filter { width: 100%; }
    .router-traffic-page .live-metrics { grid-template-columns: 1fr; }
  }
  .router-queues-page .queues-shell { display: grid; gap: 20px; }
  .router-queues-page .queues-hero {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(245, 158, 11, 0.18);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(37, 99, 235, 0.12) 100%);
    box-shadow: var(--shadow-lg);
  }
  .router-queues-page .queues-hero::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .router-queues-page .queues-hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
  }
  .router-queues-page .queues-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.32);
    border: 1px solid rgba(255,255,255,0.28);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .router-queues-page .queues-copy h2 { margin: 0 0 8px 0; }
  .router-queues-page .queues-copy p { margin: 0; color: var(--text-secondary); max-width: 58ch; }
  .router-queues-page .queues-actions { display:flex; gap:10px; flex-wrap:wrap; }
  .router-queues-page .queues-chip {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.28);
  }
  .router-queues-page .queues-chip span { display:block; }
  .router-queues-page .queues-chip-label { display:block; font-size:11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
  .router-queues-page .queues-chip-value { font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.router-logs-page .logs-table-wrap { margin-top: 12px; }
.router-logs-page table.router-console-wide-table { min-width: 900px; }
.router-traffic-page .traffic-charts-row { margin-top: 12px; }
.router-traffic-page .traffic-empty-notice { margin-top: 12px; }
.router-queues-page table.router-console-wide-table { min-width: 900px; }
.router-queues-page .router-queues-empty td { text-align: center; padding: 28px 16px; }


/* =========================
   Bandwidth monitoring (.bandwidth-monitoring-shell)
   ========================= */
.bandwidth-monitoring-shell .bandwidth-card { background: var(--bg-panel); border-radius: 12px; border: 1px solid var(--border); padding: 20px; margin-bottom: 16px; transition: all 0.2s; box-shadow: var(--shadow); }
  .bandwidth-monitoring-shell .bandwidth-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
  .bandwidth-monitoring-shell .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
  .bandwidth-monitoring-shell .stat-box { background: var(--bg-panel); border-radius: 10px; padding: 16px; border: 1px solid var(--border); transition: all 0.2s; }
  .bandwidth-monitoring-shell .stat-box:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
  .bandwidth-monitoring-shell .stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 8px; }
  .bandwidth-monitoring-shell .stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }
  .bandwidth-monitoring-shell .stat-icon { font-size: 24px; margin-bottom: 8px; }
  .bandwidth-monitoring-shell .page-header { background: var(--bg-panel); border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
  .bandwidth-monitoring-shell .router-card { background: var(--bg-panel); border-radius: 12px; padding: 20px; margin-bottom: 16px; border: 1px solid var(--border); box-shadow: var(--shadow); }
  .bandwidth-monitoring-shell .bandwidth-bar { height: 24px; background: var(--bg-body); border-radius: 8px; overflow: hidden; position: relative; }
  .bandwidth-monitoring-shell .bandwidth-fill { height: 100%; background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%); transition: width 0.3s; }
  .bandwidth-monitoring-shell .filter-section { background: var(--bg-panel); border-radius: 12px; padding: 16px; margin-bottom: 20px; border: 1px solid var(--border); }
  .bandwidth-monitoring-shell .session-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .bandwidth-monitoring-shell .session-row:last-child { border-bottom: none; }
  .bandwidth-monitoring-shell .session-user { font-weight: 600; }
  .bandwidth-monitoring-shell .session-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-muted); }
  .bandwidth-monitoring-shell .bandwidth-meter { height: 40px; background: var(--bg-body); border-radius: 8px; overflow: hidden; position: relative; margin: 16px 0; }

.bandwidth-monitoring-shell .chart-section {
  background: var(--bg-panel);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.bandwidth-monitoring-shell .live-sessions {
  background: var(--bg-panel);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.bandwidth-monitoring-shell .bandwidth-used {
  height: 100%;
  min-width: 2.5rem;
  background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
  transition: width 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.bandwidth-monitoring-shell .bw-metrics-row { margin-bottom: 16px; }
.bandwidth-monitoring-shell .bw-chart-title { margin-top: 0; }
.bandwidth-monitoring-shell .bw-chart-host { height: 320px; position: relative; }
.bandwidth-monitoring-shell .bw-meter-block { margin-top: 24px; }
.bandwidth-monitoring-shell .bw-meter-label-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bandwidth-monitoring-shell .bw-meter-label { font-size: 14px; font-weight: 600; }
.bandwidth-monitoring-shell .bw-meter-caption { font-size: 14px; color: #6b7280; }
.bandwidth-monitoring-shell .bw-sessions-title { margin-top: 0; margin-bottom: 16px; }
.bandwidth-monitoring-shell .bw-sessions-scroll { max-height: 400px; overflow-y: auto; }
.bandwidth-monitoring-shell .bw-session-meta { font-size: 12px; color: #9ca3af; }
.bandwidth-monitoring-shell .bw-stat-num { font-weight: 600; }
.bandwidth-monitoring-shell .bw-stat-unit { font-size: 11px; }
.bandwidth-monitoring-shell .bw-empty-center { text-align: center; }
.bandwidth-monitoring-shell .bw-traffic-chart-host { height: 300px; position: relative; }
.bandwidth-monitoring-shell .bw-site-section { margin-top: 24px; }
.bandwidth-monitoring-shell .bw-table-caption { text-align: left; }
.bandwidth-monitoring-shell .bw-health-ok { color: #10b981; }
.bandwidth-monitoring-shell .bw-table-empty { text-align: center; }
.bandwidth-monitoring-shell .bandwidth-used.bw-used-demo { width: 50%; }

/* =========================
   Support requests inbox (.support-requests-shell)
   ========================= */
.support-requests-shell .support-filter-form select {
    background: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
  }
  .support-requests-shell .support-filter-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
  }
  .support-requests-shell .support-filter-form select option {
    background: var(--bg-panel);
    color: var(--text-primary);
    padding: 8px;
  }
  .support-requests-shell .sla-pill { display:inline-flex; align-items:center; gap:6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; border:1px solid var(--border); }
  .support-requests-shell .sla-ok { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.25); color: #065f46; }
  .support-requests-shell .sla-warn { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.28); color: #92400e; }
  .support-requests-shell .sla-critical { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.28); color: #7f1d1d; }
  .support-requests-shell .sr-details { margin-top: 10px; padding: 10px; border:1px solid var(--border); border-radius: 10px; background: var(--bg-body); }
  .support-requests-shell .sr-details-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
  @media (max-width: 900px) { .support-requests-shell .sr-details-grid { grid-template-columns: 1fr; } }

.support-requests-shell .timeline { display:flex; flex-direction:column; gap: 10px; margin-top: 8px; }
.support-requests-shell .event { border:1px solid var(--border); border-radius: 12px; background: var(--bg-body); padding: 10px; }
.support-requests-shell .event-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.support-requests-shell .event-by { font-weight:900; }
.support-requests-shell .event-when { color: var(--text-muted); font-size: 13px; }
.support-requests-shell .event-body { margin-top: 8px; white-space: pre-wrap; }
.support-requests-shell .support-requests-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.support-requests-shell .support-requests-toolbar h3 { margin-top: 0; }
.support-requests-shell .support-filter-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.support-requests-shell .support-requests-table-wrap { margin-top: 8px; }
.support-requests-shell table.support-requests-wide-table { min-width: 1000px; }
.support-requests-shell .support-id-link { font-weight: 900; text-decoration: none; }
.support-requests-shell .support-subject-link { text-decoration: none; }
.support-requests-shell .support-notes-details { display: inline-block; margin-left: 6px; }
.support-requests-shell .support-notes-details > summary { list-style: none; cursor: pointer; }
.support-requests-shell .sr-details-wide { min-width: min(720px, 92vw); }
.support-requests-shell .support-section-title { font-weight: 900; margin-bottom: 6px; }
.support-requests-shell .support-pre-wrap { white-space: pre-wrap; }
.support-requests-shell .support-info-block { margin-top: 10px; font-weight: 900; }
.support-requests-shell .support-info-body { margin-top: 4px; }
.support-requests-shell .support-note-textarea { width: 100%; }
.support-requests-shell .support-note-submit { margin-top: 8px; }
.support-requests-shell .support-legacy-notes { margin-top: 10px; }
.support-requests-shell .support-legacy-body { white-space: pre-wrap; }
.support-requests-shell .support-view-timeline { margin-top: 10px; }

/* =========================
   Support request detail (.support-request-detail-shell)
   ========================= */
.support-request-detail-shell .sr-wrap { display:grid; grid-template-columns: 1.25fr .75fr; gap: 14px; }
  @media (max-width: 980px) { .support-request-detail-shell .sr-wrap { grid-template-columns: 1fr; } }
  .support-request-detail-shell .sr-kv { display:grid; grid-template-columns: 140px 1fr; gap: 8px 12px; }
  .support-request-detail-shell .sr-k { color: var(--text-muted); font-size: 13px; }
  .support-request-detail-shell .sr-v { font-weight: 700; }
  .support-request-detail-shell .timeline { display:flex; flex-direction:column; gap: 10px; margin-top: 8px; }
  .support-request-detail-shell .event { border:1px solid var(--border); border-radius: 12px; background: var(--bg-body); padding: 10px; }
  .support-request-detail-shell .event-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .support-request-detail-shell .event-by { font-weight:900; }
  .support-request-detail-shell .event-when { color: var(--text-muted); font-size: 13px; }
  .support-request-detail-shell .event-body { margin-top: 8px; white-space: pre-wrap; }

.support-request-detail-shell .sr-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.support-request-detail-shell .sr-detail-title { margin-top: 0; }
.support-request-detail-shell .sr-detail-subject { margin: 6px 0 0; }
.support-request-detail-shell .sr-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.support-request-detail-shell .sr-wrap-spaced { margin-top: 12px; }
.support-request-detail-shell .sr-panel-title { margin-top: 0; }
.support-request-detail-shell .sr-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}
.support-request-detail-shell .sr-notes-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.support-request-detail-shell .sr-notes-heading { margin: 0; }
.support-request-detail-shell .sr-note-form { margin-top: 10px; }
.support-request-detail-shell .sr-empty-notes { margin-top: 8px; }
.support-request-detail-shell .sr-legacy-panel { margin-top: 12px; }
.support-request-detail-shell .sr-kv-spaced { margin-top: 10px; }
.support-request-detail-shell .sr-ua-block { margin-top: 10px; }
.support-request-detail-shell .sr-ua-label { margin-bottom: 6px; }
.support-request-detail-shell .sr-ua-value { word-break: break-word; }
.support-request-detail-shell .support-pre-wrap { white-space: pre-wrap; }

/* =========================
   RADIUS session detail (.radius-session-detail-shell)
   ========================= */
.radius-session-detail-shell .rs-wrap { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 14px; }
@media (max-width: 980px) {
  .radius-session-detail-shell .rs-wrap { grid-template-columns: 1fr; }
}
.radius-session-detail-shell .timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.radius-session-detail-shell .event {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-body);
  padding: 10px;
}
.radius-session-detail-shell .event-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.radius-session-detail-shell .event-by { font-weight: 900; }
.radius-session-detail-shell .event-when { color: var(--text-muted); font-size: 13px; }
.radius-session-detail-shell .event-body { margin-top: 8px; white-space: pre-wrap; }
.radius-session-detail-shell .rs-kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; }
.radius-session-detail-shell .rs-k { color: var(--text-muted); font-size: 13px; }
.radius-session-detail-shell .rs-v { font-weight: 700; }
.radius-session-detail-shell .rs-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.radius-session-detail-shell .rs-detail-title { margin-top: 0; }
.radius-session-detail-shell .rs-detail-subject { margin: 6px 0 0; }
.radius-session-detail-shell .rs-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.radius-session-detail-shell .rs-wrap-spaced { margin-top: 12px; }
.radius-session-detail-shell .rs-panel-title { margin-top: 0; }
.radius-session-detail-shell .rs-empty-timeline { margin-top: 8px; }
.radius-session-detail-shell .rs-kv-spaced { margin-top: 10px; }
.radius-session-detail-shell .rs-usage-block { margin-top: 14px; }
.radius-session-detail-shell .rs-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}
.radius-session-detail-shell .rs-usage-label { margin-bottom: 6px; }
.radius-session-detail-shell .rs-usage-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =========================
   Promo codes list (.promo-codes-shell)
   ========================= */
.promo-codes-shell .header-row h2 { margin: 0; }
.promo-codes-shell .promo-header-actions { display: flex; gap: 8px; }
.promo-codes-shell .promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.promo-codes-shell .promo-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.promo-codes-shell .promo-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.promo-codes-shell .promo-code {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand);
  font-family: monospace;
  margin-bottom: 8px;
}
.promo-codes-shell .promo-discount {
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.promo-codes-shell .promo-min-line {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}
.promo-codes-shell .promo-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.promo-codes-shell .promo-meta-em { font-weight: 600; color: var(--text-primary); }
.promo-codes-shell .promo-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.promo-codes-shell .badge-active {
  background: #10b981;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.promo-codes-shell .badge-inactive {
  background: #6b7280;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.promo-codes-shell .badge-expired {
  background: #dc2626;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.promo-codes-shell .promo-empty-panel { text-align: center; padding: 60px 20px; }
.promo-codes-shell .promo-empty-icon { font-size: 64px; margin-bottom: 16px; }
.promo-codes-shell .promo-empty-title { margin: 0 0 12px; }
.promo-codes-shell .promo-empty-lead {
  color: var(--text-secondary);
  margin: 0 0 24px;
}
.promo-codes-shell .promo-tips-box {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 16px;
  border-radius: 8px;
  margin-top: 24px;
}
.promo-codes-shell .promo-tips-title { margin: 0 0 8px; color: #1e40af; }
.promo-codes-shell .promo-tips-list {
  margin: 0;
  padding-left: 20px;
  color: #1e40af;
  font-size: 14px;
  line-height: 1.8;
}

/* =========================
   Promo code detail (.promo-code-detail-shell)
   ========================= */
.promo-code-detail-shell .header-row h2 { margin: 0; }
.promo-code-detail-shell .promo-detail-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.promo-code-detail-shell .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.promo-code-detail-shell .stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.promo-code-detail-shell .stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.promo-code-detail-shell .stat-label { color: var(--text-secondary); font-size: 13px; }
.promo-code-detail-shell .promo-detail-panel-title { margin: 0 0 16px; }
.promo-code-detail-shell .promo-detail-table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}
.promo-code-detail-shell .promo-detail-row { border-bottom: 1px solid var(--border); }
.promo-code-detail-shell .promo-detail-row:last-child { border-bottom: none; }
.promo-code-detail-shell .promo-detail-label {
  padding: 12px;
  color: var(--text-secondary);
  width: 200px;
  vertical-align: top;
}
.promo-code-detail-shell .promo-detail-value { padding: 12px; font-weight: 600; }
.promo-code-detail-shell .promo-detail-value.promo-detail-code {
  font-family: monospace;
  font-size: 18px;
}
.promo-code-detail-shell .promo-status-active { color: #10b981; font-weight: 600; }
.promo-code-detail-shell .promo-status-disabled { color: #6b7280; font-weight: 600; }
.promo-code-detail-shell .promo-status-expired { color: #dc2626; font-weight: 600; }
.promo-code-detail-shell .promo-redemptions-panel { margin-top: 24px; }
.promo-code-detail-shell .redemption-list {
  background: var(--bg-panel);
  border-radius: 12px;
  overflow: hidden;
}
.promo-code-detail-shell .redemption-item {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.promo-code-detail-shell .redemption-item:last-child { border-bottom: none; }
.promo-code-detail-shell .redemption-phone { font-weight: 600; color: var(--text-primary); }
.promo-code-detail-shell .redemption-meta {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 4px;
}
.promo-code-detail-shell .redemption-amount-col { text-align: right; }
.promo-code-detail-shell .redemption-amount { font-weight: 600; color: var(--text-primary); }
.promo-code-detail-shell .redemption-saved {
  color: #10b981;
  font-size: 13px;
  margin-top: 4px;
}
.promo-code-detail-shell .promo-empty-redemptions {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px 20px;
}


/* =========================
   Invoice list (scoped under .invoice-list-shell)
   ========================= */
.invoice-list-shell { display: grid; gap: 0; }
.invoice-list-shell .invoice-list-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.invoice-list-shell .invoice-list-filter-wrap {
  margin-top: 10px;
  margin-bottom: 20px;
}
.invoice-list-shell .invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.invoice-list-shell .invoice-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.invoice-list-shell .invoice-filters input,
.invoice-list-shell .invoice-filters select {
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-primary);
  transition: all 0.2s;
  font-size: 14px;
}
.invoice-list-shell .invoice-filters input:focus,
.invoice-list-shell .invoice-filters select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}
.invoice-list-shell .invoice-table {
  background: var(--bg-panel);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.invoice-list-shell .invoice-status {
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.invoice-list-shell .invoice-status.draft {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}
.invoice-list-shell .invoice-status.sent {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}
.invoice-list-shell .invoice-status.paid {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}
.invoice-list-shell .invoice-status.overdue {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.invoice-list-shell .invoice-status.cancelled {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.invoice-list-shell .invoice-caption-left { text-align: left; }
.invoice-list-shell .invoice-meta-muted { font-size: 12px; }
.invoice-list-shell .invoice-empty { text-align: center; }
.invoice-list-shell .invoice-balance-due { color: #ef4444; }
.invoice-list-shell .invoice-card-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.invoice-list-shell .invoice-card-actions .btn { flex: 1; text-align: center; }
@media (max-width: 768px) {
  .invoice-list-shell .invoice-header { flex-direction: column; }
  .invoice-list-shell .invoice-filters { width: 100%; }
  .invoice-list-shell .invoice-filters input,
  .invoice-list-shell .invoice-filters select { flex: 1; }
  .invoice-list-shell .invoice-table table { display: none; }
  .invoice-list-shell .invoice-cards { display: block; }
  .invoice-list-shell .invoice-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
  }
  .invoice-list-shell .invoice-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .invoice-list-shell .invoice-card-number {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
  }
  .invoice-list-shell .invoice-card-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }
  .invoice-list-shell .invoice-card-row:last-child { border-bottom: none; }
  .invoice-list-shell .invoice-card-label {
    font-size: 13px;
    color: var(--text-secondary);
  }
  .invoice-list-shell .invoice-card-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
  }
  .invoice-list-shell .invoice-list-top-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}
@media (min-width: 769px) {
  .invoice-list-shell .invoice-cards { display: none; }
}

/* =========================
   Stock alert pages (history, create, edit, delete, generate)
   ========================= */
/* ---- console/templates/console/stock_alert_history.html ---- */

  .stock-alert-history-page .history-shell { display: grid; gap: 20px; }
  .stock-alert-history-page .history-hero {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: 28px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(14, 165, 233, 0.10) 46%, rgba(16, 185, 129, 0.10) 100%);
    box-shadow: var(--shadow-lg);
  }
  .stock-alert-history-page .history-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .stock-alert-history-page .history-hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
  }
  .stock-alert-history-page .history-badge-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.24);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .stock-alert-history-page .history-copy h2 { margin: 0 0 8px 0; }
  .stock-alert-history-page .history-copy p { margin: 0; max-width: 62ch; color: var(--text-secondary); }
  .stock-alert-history-page .history-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .stock-alert-history-page .history-chip {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84));
    border: 1px solid rgba(148, 163, 184, 0.16);
  }
  .stock-alert-history-page .history-chip span { display: block; }
  .stock-alert-history-page .history-chip-label {
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .stock-alert-history-page .history-chip-value { color: var(--text-primary); font-weight: 800; font-size: 1rem; }
  .stock-alert-history-page .history-summary-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 18px;
  }
  .stock-alert-history-page .stock-card, .stock-alert-history-page .history-card, .stock-alert-history-page .empty-state {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
    box-shadow: var(--shadow-sm);
  }
  .stock-alert-history-page .stock-card { text-align: center; }
  .stock-alert-history-page .stock-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .stock-alert-history-page .stock-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  .stock-alert-history-page .stock-note, .stock-alert-history-page .summary-note, .stock-alert-history-page .history-details, .stock-alert-history-page .history-meta {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
  }
  .stock-alert-history-page .summary-note strong { color: var(--text-primary); }
  .stock-alert-history-page .history-list { display: grid; gap: 12px; }
  .stock-alert-history-page .history-item {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.40), rgba(15, 23, 42, 0.58));
  }
  .stock-alert-history-page .history-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
  .stock-alert-history-page .history-action { font-weight: 700; color: var(--text-primary); font-size: 15px; }
  .stock-alert-history-page .history-badge { padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; }
  .stock-alert-history-page .badge-alert { background: rgba(245, 158, 11, 0.14); color: #f59e0b; border-color: rgba(245, 158, 11, 0.2); }
  .stock-alert-history-page .badge-generate { background: rgba(16, 185, 129, 0.14); color: #10b981; border-color: rgba(16, 185, 129, 0.2); }
  .stock-alert-history-page .badge-change { background: rgba(99, 102, 241, 0.14); color: #818cf8; border-color: rgba(99, 102, 241, 0.2); }
  .stock-alert-history-page .history-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
  .stock-alert-history-page .empty-state { text-align: center; padding: 60px 20px; }
  .stock-alert-history-page .empty-state .stock-history-empty-icon { font-size: 64px; margin-bottom: 16px; }
  .stock-alert-history-page .empty-state > h3 { margin: 0 0 8px 0; }
  .stock-alert-history-page .empty-state .muter { margin: 0; }
  @media (max-width: 900px) {
    .stock-alert-history-page .history-summary-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .stock-alert-history-page .history-hero { padding: 20px; border-radius: 22px; }
    .stock-alert-history-page .history-hero-grid { align-items: stretch; }
    .stock-alert-history-page .history-chip { flex: 1 1 100%; }
  }
/* ---- console/templates/console/stock_alert_create.html ---- */

  .stock-alert-create-page .alert-form-shell { display: grid; gap: 20px; }
  .stock-alert-create-page .alert-form-hero {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: 28px;
    border: 1px solid rgba(245, 158, 11, 0.18);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(239, 68, 68, 0.08) 42%, rgba(59, 130, 246, 0.14) 100%);
    box-shadow: var(--shadow-lg);
  }
  .stock-alert-create-page .alert-form-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .stock-alert-create-page .alert-form-hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
  }
  .stock-alert-create-page .alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.24);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .stock-alert-create-page .alert-copy h2 { margin: 0 0 8px 0; }
  .stock-alert-create-page .alert-copy p { margin: 0; max-width: 62ch; color: var(--text-secondary); }
  .stock-alert-create-page .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .stock-alert-create-page .hero-chip {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .stock-alert-create-page .hero-chip span { display: block; }
  .stock-alert-create-page .hero-chip-label {
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .stock-alert-create-page .hero-chip-value { color: var(--text-primary); font-weight: 800; font-size: 1rem; }
  .stock-alert-create-page .alert-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 18px;
    align-items: start;
  }
  .stock-alert-create-page .form-panel {
    position: relative;
    overflow: hidden;
  }
  .stock-alert-create-page .form-panel::after {
    content: '';
    position: absolute;
    inset: auto -50px -70px auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .stock-alert-create-page .form-panel > * { position: relative; z-index: 1; }
  .stock-alert-create-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .stock-alert-create-page .section-header h3 { margin: 0; }
  .stock-alert-create-page .section-hint { color: var(--text-muted); font-size: 13px; }
  .stock-alert-create-page .alert-form { display: grid; gap: 14px; }
  .stock-alert-create-page .field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .stock-alert-create-page .field-card, .stock-alert-create-page .setting-card, .stock-alert-create-page .info-card {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
    box-shadow: var(--shadow-sm);
  }
  .stock-alert-create-page .field-card label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .stock-alert-create-page .field-card input, .stock-alert-create-page .field-card select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.78);
    color: var(--text-primary);
    font-size: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .stock-alert-create-page .field-card small, .stock-alert-create-page .setting-copy small, .stock-alert-create-page .info-card p, .stock-alert-create-page .info-card li {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
  }
  .stock-alert-create-page .field-card small { display: block; margin-top: 8px; }
  .stock-alert-create-page .settings-stack, .stock-alert-create-page .sidebar-stack {
    display: grid;
    gap: 12px;
  }
  .stock-alert-create-page .setting-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
  }
  .stock-alert-create-page .setting-copy label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .stock-alert-create-page .setting-copy small { display: block; }
  .stock-alert-create-page .setting-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: #f59e0b;
  }
  .stock-alert-create-page .info-card h4 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
  }
  .stock-alert-create-page .info-card ul {
    margin: 0;
    padding-left: 18px;
  }
  .stock-alert-create-page .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  @media (max-width: 900px) {
    .stock-alert-create-page .alert-form-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .stock-alert-create-page .alert-form-hero { padding: 20px; border-radius: 22px; }
    .stock-alert-create-page .alert-form-hero-grid { align-items: stretch; }
    .stock-alert-create-page .hero-chip { flex: 1 1 100%; }
    .stock-alert-create-page .field-grid { grid-template-columns: 1fr; }
    .stock-alert-create-page .setting-card { align-items: center; }
    .stock-alert-create-page .form-actions .btn { flex: 1 1 auto; text-align: center; }
  }
/* ---- console/templates/console/stock_alert_edit.html ---- */

  .stock-alert-edit-page .alert-edit-shell { display: grid; gap: 20px; }
  .stock-alert-edit-page .alert-edit-hero {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: 28px;
    border: 1px solid rgba(245, 158, 11, 0.18);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(239, 68, 68, 0.10) 42%, rgba(59, 130, 246, 0.14) 100%);
    box-shadow: var(--shadow-lg);
  }
  .stock-alert-edit-page .alert-edit-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .stock-alert-edit-page .alert-edit-hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
  }
  .stock-alert-edit-page .alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.24);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .stock-alert-edit-page .alert-copy h2 { margin: 0 0 8px 0; }
  .stock-alert-edit-page .alert-copy p { margin: 0; max-width: 64ch; color: var(--text-secondary); }
  .stock-alert-edit-page .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .stock-alert-edit-page .hero-chip {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .stock-alert-edit-page .hero-chip span { display: block; }
  .stock-alert-edit-page .hero-chip-label {
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .stock-alert-edit-page .hero-chip-value { color: var(--text-primary); font-weight: 800; font-size: 1rem; }
  .stock-alert-edit-page .alert-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    gap: 18px;
    align-items: start;
  }
  .stock-alert-edit-page .form-panel {
    position: relative;
    overflow: hidden;
  }
  .stock-alert-edit-page .form-panel::after {
    content: '';
    position: absolute;
    inset: auto -50px -70px auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .stock-alert-edit-page .form-panel > * { position: relative; z-index: 1; }
  .stock-alert-edit-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .stock-alert-edit-page .section-header h3 { margin: 0; }
  .stock-alert-edit-page .section-hint { color: var(--text-muted); font-size: 13px; }
  .stock-alert-edit-page .stock-summary {
    display: grid;
    gap: 12px;
  }
  .stock-alert-edit-page .stock-summary-card, .stock-alert-edit-page .field-card, .stock-alert-edit-page .setting-card, .stock-alert-edit-page .info-card {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
    box-shadow: var(--shadow-sm);
  }
  .stock-alert-edit-page .stock-summary-card {
    text-align: center;
  }
  .stock-alert-edit-page .stock-summary-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .stock-alert-edit-page .stock-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  .stock-alert-edit-page .stock-summary-note { color: var(--text-secondary); font-size: 13px; }
  .stock-alert-edit-page .alert-form { display: grid; gap: 14px; }
  .stock-alert-edit-page .field-card label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .stock-alert-edit-page .field-card input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.78);
    color: var(--text-primary);
    font-size: 14px;
  }
  .stock-alert-edit-page .field-card input[disabled] {
    opacity: 0.78;
    cursor: not-allowed;
  }
  .stock-alert-edit-page .field-card small, .stock-alert-edit-page .setting-copy small, .stock-alert-edit-page .stock-summary-note, .stock-alert-edit-page .info-card p, .stock-alert-edit-page .info-card li {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
  }
  .stock-alert-edit-page .field-card small { display: block; margin-top: 8px; }
  .stock-alert-edit-page .settings-stack, .stock-alert-edit-page .sidebar-stack { display: grid; gap: 12px; }
  .stock-alert-edit-page .setting-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
  }
  .stock-alert-edit-page .setting-copy label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .stock-alert-edit-page .setting-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: #f59e0b;
  }
  .stock-alert-edit-page .info-card h4 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
  }
  .stock-alert-edit-page .info-card ul {
    margin: 0;
    padding-left: 18px;
  }
  .stock-alert-edit-page .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .stock-alert-edit-page .danger-action {
    margin-left: auto;
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
  }
  @media (max-width: 900px) {
    .stock-alert-edit-page .alert-edit-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .stock-alert-edit-page .alert-edit-hero { padding: 20px; border-radius: 22px; }
    .stock-alert-edit-page .alert-edit-hero-grid { align-items: stretch; }
    .stock-alert-edit-page .hero-chip { flex: 1 1 100%; }
    .stock-alert-edit-page .setting-card { align-items: center; }
    .stock-alert-edit-page .form-actions .btn { flex: 1 1 auto; text-align: center; }
    .stock-alert-edit-page .danger-action { margin-left: 0; }
  }
/* ---- console/templates/console/stock_alert_delete.html ---- */

  .stock-alert-delete-page .confirm-shell { display: grid; gap: 20px; max-width: 760px; margin: 0 auto; }
  .stock-alert-delete-page .warning-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(239, 68, 68, 0.22);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(127, 29, 29, 0.1) 100%);
    box-shadow: var(--shadow-lg);
    text-align: center;
  }
  .stock-alert-delete-page .warning-card::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .stock-alert-delete-page .warning-card > * { position: relative; z-index: 1; }
  .stock-alert-delete-page .warning-icon { font-size: 64px; margin-bottom: 16px; }
  .stock-alert-delete-page .warning-copy { margin: 0; color: #fecaca; font-size: 14px; line-height: 1.6; }
  .stock-alert-delete-page .warning-title { margin: 0 0 12px 0; color: #991b1b; }
  .stock-alert-delete-page .stock-delete-form { margin-top: 24px; }
  .stock-alert-delete-page .subject-card, .stock-alert-delete-page .impact-card {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
    box-shadow: var(--shadow-sm);
  }
  .stock-alert-delete-page .subject-card {
    text-align: center;
  }
  .stock-alert-delete-page .subject-site { font-weight: 700; color: var(--text-primary); font-size: 1rem; margin-bottom: 6px; }
  .stock-alert-delete-page .subject-package { color: var(--text-secondary); }
  .stock-alert-delete-page .impact-card h4 { margin: 0 0 8px 0; color: var(--text-primary); }
  .stock-alert-delete-page .impact-card p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
  .stock-alert-delete-page .form-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .stock-alert-delete-page .danger-btn { background: #dc2626; border-color: #dc2626; color: #fff; }
  @media (max-width: 768px) {
    .stock-alert-delete-page .warning-card { padding: 22px; border-radius: 22px; }
    .stock-alert-delete-page .form-actions .btn { flex: 1 1 auto; text-align: center; }
  }
/* ---- console/templates/console/stock_generate_vouchers.html ---- */

  .stock-generate-page .generate-shell { display: grid; gap: 20px; }
  .stock-generate-page .generate-hero {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: 28px;
    border: 1px solid rgba(16, 185, 129, 0.18);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(59, 130, 246, 0.12) 48%, rgba(245, 158, 11, 0.1) 100%);
    box-shadow: var(--shadow-lg);
  }
  .stock-generate-page .generate-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
    pointer-events: none;
  }
  .stock-generate-page .generate-hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
  }
  .stock-generate-page .generate-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.24);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .stock-generate-page .generate-copy h2 { margin: 0 0 8px 0; }
  .stock-generate-page .generate-copy p { margin: 0; max-width: 62ch; color: var(--text-secondary); }
  .stock-generate-page .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .stock-generate-page .hero-chip {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84));
    border: 1px solid rgba(148, 163, 184, 0.16);
  }
  .stock-generate-page .hero-chip span { display: block; }
  .stock-generate-page .hero-chip-label {
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .stock-generate-page .hero-chip-value { color: var(--text-primary); font-weight: 800; font-size: 1rem; }
  .stock-generate-page .generate-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 18px;
    align-items: start;
  }
  .stock-generate-page .form-panel, .stock-generate-page .info-card, .stock-generate-page .stock-card, .stock-generate-page .field-card {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
    box-shadow: var(--shadow-sm);
  }
  .stock-generate-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .stock-generate-page .section-header h3 { margin: 0; }
  .stock-generate-page .section-hint { color: var(--text-muted); font-size: 13px; }
  .stock-generate-page .generate-form { display: grid; gap: 14px; }
  .stock-generate-page .field-card label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .stock-generate-page .field-card input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.78);
    color: var(--text-primary);
    font-size: 14px;
  }
  .stock-generate-page .field-card small, .stock-generate-page .info-card p, .stock-generate-page .info-card li, .stock-generate-page .stock-note {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
  }
  .stock-generate-page .field-card small { display: block; margin-top: 8px; }
  .stock-generate-page .stock-card { text-align: center; }
  .stock-generate-page .stock-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .stock-generate-page .stock-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  .stock-generate-page .sidebar-stack { display: grid; gap: 12px; }
  .stock-generate-page .info-card h4 { margin: 0 0 8px 0; color: var(--text-primary); }
  .stock-generate-page .info-card ul { margin: 0; padding-left: 18px; }
  .stock-generate-page .form-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
  @media (max-width: 900px) {
    .stock-generate-page .generate-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .stock-generate-page .generate-hero { padding: 20px; border-radius: 22px; }
    .stock-generate-page .generate-hero-grid { align-items: stretch; }
    .stock-generate-page .hero-chip { flex: 1 1 100%; }
    .stock-generate-page .form-actions .btn { flex: 1 1 auto; text-align: center; }
  }

/* =========================
   Portal customization (console/portal_customization.html)
   ========================= */
.portal-customization-shell.portal-customization-page .portal-customization-page-title { margin: 0; }
.portal-customization-shell.portal-customization-page .portal-customization-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-customization-page .form-container { max-width: 800px; margin: 0 auto; }
.portal-customization-page .form-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}
.portal-customization-page .form-section h3 { margin: 0 0 20px 0; color: var(--text-primary); }
.portal-customization-page .form-group { margin-bottom: 20px; }
.portal-customization-page .form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.portal-customization-page .form-group input,
.portal-customization-page .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-panel);
  color: var(--text-primary);
}
.portal-customization-page .form-group small {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}
.portal-customization-page .color-preview {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  border: 2px solid var(--border);
  margin-top: 8px;
}
.portal-customization-page .portal-theme-color-input {
  width: 100px;
  height: 50px;
  padding: 0;
  cursor: pointer;
}
.portal-customization-page .portal-captive-theme-select {
  width: 100%;
  max-width: 480px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-primary);
}
.portal-customization-page .portal-push-callout {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.portal-customization-page .portal-push-callout h4 { margin: 0 0 8px 0; color: #1e40af; }
.portal-customization-page .portal-push-callout p { margin: 0 0 12px 0; color: #1e40af; font-size: 13px; }
.portal-customization-page .portal-push-callout label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e40af;
}
.portal-customization-page .portal-form-actions { display: flex; gap: 12px; }

/* =========================
   Site portal / hotspot settings (console/site_portal.html)
   ========================= */
.site-portal-settings-shell .settings-container { max-width: 900px; margin: 0 auto; }
.site-portal-settings-shell .settings-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.site-portal-settings-shell .section-header {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.site-portal-settings-shell .section-desc { margin: 0 0 20px 0; font-size: 14px; color: var(--text-secondary); }
.site-portal-settings-shell .form-row { display: flex; gap: 16px; align-items: flex-end; }
.site-portal-settings-shell .form-row > * { flex: 1; }
.site-portal-settings-shell .input-group { margin-bottom: 16px; }
.site-portal-settings-shell .input-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 14px;
}
.site-portal-settings-shell .input-group input,
.site-portal-settings-shell .input-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-panel);
  color: var(--text-primary);
}
.site-portal-settings-shell .input-group input:focus,
.site-portal-settings-shell .input-group textarea:focus {
  outline: none;
  border-color: var(--brand);
}
.site-portal-settings-shell .input-group small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.site-portal-settings-shell .char-count { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.site-portal-settings-shell .copy-btn {
  padding: 8px 16px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.site-portal-settings-shell .copy-btn:hover { background: var(--border); }
.site-portal-settings-shell .update-btn {
  padding: 10px 20px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.site-portal-settings-shell .update-btn:hover { opacity: 0.9; }
.site-portal-settings-shell .portal-theme-color-input {
  width: 100px;
  height: 50px;
  padding: 0;
  cursor: pointer;
}
.site-portal-settings-shell .portal-captive-theme-select {
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-primary);
}
.site-portal-settings-shell .site-portal-page-header { margin-bottom: 24px; }
.site-portal-settings-shell .site-portal-page-title { margin: 0; }
.site-portal-settings-shell .site-portal-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.site-portal-settings-shell .site-portal-inline-form { display: inline; }
.site-portal-settings-shell .site-portal-push-main-btn {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.site-portal-settings-shell .site-portal-tip-callout {
  background: #ecfdf5;
  border-left: 4px solid #10b981;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.site-portal-settings-shell .site-portal-tip-callout h4 {
  margin: 0 0 8px 0;
  color: #065f46;
}
.site-portal-settings-shell .site-portal-tip-callout p {
  margin: 0;
  color: #065f46;
  font-size: 13px;
  line-height: 1.6;
}
.site-portal-settings-shell .site-portal-lede {
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 14px;
}
.site-portal-settings-shell .site-portal-actions-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.site-portal-settings-shell .site-portal-push-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #10b981;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.site-portal-settings-shell .site-portal-router-id-input { flex: 3; min-width: 0; }
.site-portal-settings-shell .site-portal-router-hint {
  margin: 12px 0 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}
@media (max-width: 768px) {
  .site-portal-settings-shell .settings-container { max-width: 100%; }
  .site-portal-settings-shell .settings-section { padding: 16px; border-radius: 14px; }
  .site-portal-settings-shell .section-header { font-size: 16px; }
  .site-portal-settings-shell .section-desc { font-size: 13px; }
  .site-portal-settings-shell .header-row > div { width: 100%; flex-wrap: wrap; }
  .site-portal-settings-shell .header-row > div a { flex: 1 1 100%; }
  .site-portal-settings-shell .form-row { flex-direction: column; align-items: stretch; }
  .site-portal-settings-shell .form-row > * { width: 100%; min-width: 0; }
  .site-portal-settings-shell .input-group input,
  .site-portal-settings-shell .input-group textarea { font-size: 16px; }
  .site-portal-settings-shell .update-btn,
  .site-portal-settings-shell .copy-btn { width: 100%; }
}

/* =========================
   Vouchers batch print (console/vouchers_print.html)
   ========================= */
.vouchers-print-page .print-hub {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(124, 58, 237, 0.12) 55%, rgba(16, 185, 129, 0.1) 100%);
  box-shadow: var(--shadow-lg);
  margin-bottom: 18px;
}
.vouchers-print-page .print-hub::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}
.vouchers-print-page .print-hub-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.vouchers-print-page .print-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.vouchers-print-page .print-copy h2 { margin: 0 0 8px 0; }
.vouchers-print-page .print-copy p { margin: 0; color: var(--text-secondary); max-width: 60ch; }
.vouchers-print-page .print-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vouchers-print-page .print-stat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.vouchers-print-page .print-stat {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.16);
}
.vouchers-print-page .print-stat span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.vouchers-print-page .print-stat strong { color: var(--text-primary); }
.vouchers-print-page .filter-panel { margin-bottom: 18px; }
.vouchers-print-page .filter-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.vouchers-print-page .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.vouchers-print-page .cards .card {
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.vouchers-print-page .cards .brand {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 2px solid #10b981;
  color: #065f46;
  margin-bottom: 10px;
  width: 100%;
}
.vouchers-print-page .cards .code {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1px;
  color: #111827;
  text-align: center;
  margin: 10px 0;
}
.vouchers-print-page .cards .qr-section { text-align: center; margin: 10px 0; }
.vouchers-print-page .cards .qr { width: 110px; height: 110px; border: 2px solid #10b981; border-radius: 10px; }
.vouchers-print-page .cards .scan-hint { font-size: 10px; color: #6b7280; margin-top: 4px; }
.vouchers-print-page .cards .meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  width: 100%;
}
.vouchers-print-page .cards .meta-item { text-align: center; padding: 6px; background: #f9fafb; border-radius: 10px; }
.vouchers-print-page .cards .meta .lbl { font-size: 9px; text-transform: uppercase; color: #6b7280; }
.vouchers-print-page .cards .meta .val { font-weight: 700; margin-top: 2px; }
@media print {
  @page { size: A4; margin: 6mm; }
  body:has(.vouchers-print-page) * { visibility: hidden; }
  body:has(.vouchers-print-page) .vouchers-print-page .cards,
  body:has(.vouchers-print-page) .vouchers-print-page .cards * { visibility: visible; }
  body:has(.vouchers-print-page) .vouchers-print-page .cards { position: absolute; left: 0; top: 0; width: 100%; }
  body:has(.vouchers-print-page) .vouchers-print-page { background: #fff; margin: 0; padding: 0; }
  body:has(.vouchers-print-page) .vouchers-print-page .panel { box-shadow: none; border: none; margin: 0; padding: 0; }
  .vouchers-print-page .cards { grid-template-columns: repeat(5, 1fr); gap: 2mm; }
  .vouchers-print-page .cards .card { border: 1px solid #000; border-radius: 0; padding: 3mm; break-inside: avoid; }
  .vouchers-print-page .cards .brand { font-size: 10px; padding-bottom: 2mm; }
  .vouchers-print-page .cards .code { font-size: 16px; margin: 2mm 0; }
  .vouchers-print-page .cards .qr { width: 70px; height: 70px; }
  .vouchers-print-page .cards .scan-hint { font-size: 7px; }
  .vouchers-print-page .cards .meta { font-size: 9px; gap: 2mm; margin-top: 2mm; }
  .vouchers-print-page .cards .meta .lbl { font-size: 7px; }
  .vouchers-print-page .cards .meta .val { font-size: 9px; }
}
@media (max-width: 768px) {
  .vouchers-print-page .print-hub { padding: 20px; border-radius: 22px; }
  .vouchers-print-page .print-hub-grid { align-items: stretch; }
  .vouchers-print-page .print-stat-row { width: 100%; }
  .vouchers-print-page .print-stat { flex: 1 1 100%; }
  .vouchers-print-page .filter-form .field,
  .vouchers-print-page .filter-form .btn,
  .vouchers-print-page .print-actions .btn { width: 100%; }
}

/* =========================
   Single voucher print (console/voucher_print.html)
   ========================= */
.voucher-print-page .print-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(124, 58, 237, 0.12) 55%, rgba(16, 185, 129, 0.1) 100%);
  box-shadow: var(--shadow-lg);
  margin-bottom: 18px;
}
.voucher-print-page .print-hero::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}
.voucher-print-page .print-hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.voucher-print-page .print-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.voucher-print-page .print-copy h2 { margin: 0 0 8px 0; }
.voucher-print-page .print-copy p { margin: 0; color: var(--text-secondary); max-width: 56ch; }
.voucher-print-page .print-actions,
.voucher-print-page .print-meta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.voucher-print-page .print-meta {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.16);
}
.voucher-print-page .print-meta span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.voucher-print-page .print-meta strong { color: var(--text-primary); }
.voucher-print-page .ticket-panel { padding: 20px; }
.voucher-print-page .ticket {
  max-width: 360px;
  margin: 0 auto;
  border: 2px solid #10b981;
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.voucher-print-page .ticket .brand {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
  color: #065f46;
  border-bottom: 2px solid #10b981;
  padding-bottom: 8px;
}
.voucher-print-page .ticket .code {
  text-align: center;
  font-weight: 800;
  font-size: 26px;
  margin: 12px 0;
  color: #111827;
  letter-spacing: 0.08em;
}
.voucher-print-page .ticket .qr-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 12px 0;
}
.voucher-print-page .ticket .qr-section canvas {
  width: 180px;
  height: 180px;
  border: 2px solid #10b981;
  border-radius: 12px;
}
.voucher-print-page .ticket .scan-hint { font-size: 11px; color: #6b7280; margin-top: 6px; text-align: center; }
.voucher-print-page .ticket .meta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
}
.voucher-print-page .ticket .meta-item { text-align: center; padding: 10px 8px; background: #f9fafb; border-radius: 10px; }
.voucher-print-page .ticket .meta-label { font-size: 10px; color: #6b7280; text-transform: uppercase; }
.voucher-print-page .ticket .meta-value { font-weight: 700; color: #111827; margin-top: 2px; }
@media print {
  @page { size: A4; margin: 6mm; }
  body:has(.voucher-print-page) * { visibility: hidden; }
  body:has(.voucher-print-page) .voucher-print-page .ticket,
  body:has(.voucher-print-page) .voucher-print-page .ticket * { visibility: visible; }
  body:has(.voucher-print-page) .voucher-print-page .ticket {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #000;
    box-shadow: none;
  }
}
@media (max-width: 768px) {
  .voucher-print-page .print-hero { padding: 20px; border-radius: 22px; }
  .voucher-print-page .print-hero-grid { align-items: stretch; }
  .voucher-print-page .print-meta-row { width: 100%; }
  .voucher-print-page .print-meta,
  .voucher-print-page .print-actions .btn { flex: 1 1 100%; }
}

/* =========================
   Bootstrap quick setup (console/bootstrap_setup.html)
   ========================= */
.console-bootstrap-setup .setup-shell { max-width: 1040px; margin: 0 auto; display: grid; gap: 18px; }
.console-bootstrap-setup .setup-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding: 24px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.66), rgba(15, 23, 42, 0.78));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.console-bootstrap-setup .setup-kicker {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.console-bootstrap-setup .setup-hero h1 {
  margin: 0 0 8px 0;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}
.console-bootstrap-setup .setup-hero p {
  margin: 0;
  max-width: 64ch;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}
.console-bootstrap-setup .setup-hero-status {
  min-width: 190px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.console-bootstrap-setup .setup-hero-status span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.console-bootstrap-setup .setup-hero-status strong { color: var(--text-primary); }
.console-bootstrap-setup .setup-path-note {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.1);
  color: var(--text-secondary);
  line-height: 1.6;
}
.console-bootstrap-setup .setup-alt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.console-bootstrap-setup .setup-alt-card {
  padding: 16px;
  background: rgba(15, 23, 42, 0.68);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: var(--shadow-sm);
}
.console-bootstrap-setup .setup-alt-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.console-bootstrap-setup .setup-alt-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}
.console-bootstrap-setup .setup-alt-card a {
  color: #93c5fd;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.console-bootstrap-setup .setup-form {
  background: var(--bg-panel);
  padding: 26px;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.console-bootstrap-setup .setup-form h3 { margin: 0 0 20px 0; }
.console-bootstrap-setup .setup-form .field { margin-bottom: 24px; }
.console-bootstrap-setup .setup-form .field > label {
  font-size: 13px;
  font-weight: 800;
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.console-bootstrap-setup .setup-form input:not([type="radio"]),
.console-bootstrap-setup .setup-form select,
.console-bootstrap-setup .setup-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  transition: all 0.2s;
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.82);
}
.console-bootstrap-setup .setup-form input:focus,
.console-bootstrap-setup .setup-form select:focus,
.console-bootstrap-setup .setup-form textarea:focus {
  border-color: rgba(59, 130, 246, 0.55);
  outline: none;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.console-bootstrap-setup .setup-form input::placeholder { color: var(--text-muted); }
.console-bootstrap-setup .setup-form small {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.console-bootstrap-setup .choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.console-bootstrap-setup .choice-card {
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.console-bootstrap-setup .choice-card:has(input:checked) {
  border-color: rgba(37, 99, 235, 0.48);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.1);
}
.console-bootstrap-setup .choice-card input[type="radio"] {
  position: absolute;
  top: 16px;
  right: 16px;
  transform: scale(1.15);
  accent-color: var(--brand);
}
.console-bootstrap-setup .choice-card-title { font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.console-bootstrap-setup .choice-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.console-bootstrap-setup .setup-advanced {
  margin-bottom: 24px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.console-bootstrap-setup .setup-advanced summary {
  cursor: pointer;
  padding: 14px 16px;
  color: var(--text-primary);
  font-weight: 800;
}
.console-bootstrap-setup .setup-advanced-body { padding: 0 16px 16px; }
.console-bootstrap-setup .setup-info-box {
  padding: 18px;
  border-left: 4px solid #3b82f6;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: rgba(59, 130, 246, 0.08);
  color: var(--text-secondary);
}
.console-bootstrap-setup .setup-info-box strong { color: var(--text-primary); }
.console-bootstrap-setup .setup-info-box p {
  margin: 8px 0 10px;
  color: var(--text-secondary);
  font-size: 14px;
}
.console-bootstrap-setup .setup-info-box ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}
.console-bootstrap-setup .setup-submit { margin-top: 28px; }
.console-bootstrap-setup .big-cta-button {
  width: 100%;
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 800;
  background: #2563eb;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.console-bootstrap-setup .big-cta-button:hover {
  transform: translateY(-2px);
  background: #1d4ed8;
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.28);
}
.console-bootstrap-setup .big-cta-button:active { transform: translateY(0); }
.console-bootstrap-setup .step-indicator {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.console-bootstrap-setup .step {
  padding: 16px;
  background: rgba(15, 23, 42, 0.68);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.console-bootstrap-setup .step-number {
  width: 32px;
  height: 32px;
  background: rgba(37, 99, 235, 0.16);
  color: #bfdbfe;
  border: 1px solid rgba(37, 99, 235, 0.26);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}
.console-bootstrap-setup .step-title { font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.console-bootstrap-setup .step-desc { font-size: 13px; color: var(--text-secondary); }
.console-bootstrap-setup .setup-next {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.console-bootstrap-setup .setup-next h4 { margin: 0 0 14px 0; color: var(--text-primary); }
.console-bootstrap-setup .setup-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.console-bootstrap-setup .setup-next-card {
  padding: 15px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.console-bootstrap-setup .setup-next-card strong { color: var(--text-primary); }
.console-bootstrap-setup .setup-next-card p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
@media (max-width: 760px) {
  .console-bootstrap-setup .setup-hero { align-items: stretch; }
  .console-bootstrap-setup .setup-hero-status { width: 100%; }
  .console-bootstrap-setup .step-indicator { grid-template-columns: 1fr; }
  .console-bootstrap-setup .setup-form { padding: 18px; }
}

/* =========================
   Bootstrap script page (console/bootstrap_script.html)
   ========================= */
.console-bootstrap-script-page .script-page-container { max-width: 1000px; margin: 0 auto; padding: 24px; }
.console-bootstrap-script-page .success-hero {
  text-align: center;
  padding: 48px 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 20px;
  color: white;
  margin-bottom: 40px;
  box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
}
.console-bootstrap-script-page .success-hero h1 { font-size: 48px; margin: 0 0 16px 0; font-weight: 800; }
.console-bootstrap-script-page .success-hero p { font-size: 22px; opacity: 0.95; margin: 0; }
.console-bootstrap-script-page .copy-button-big {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}
.console-bootstrap-script-page .copy-button-big:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
}
.console-bootstrap-script-page .big-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.console-bootstrap-script-page .big-action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
  color: white;
}
.console-bootstrap-script-page .instruction-card {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  padding: 32px;
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-lg);
}
.console-bootstrap-script-page .step-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
}
.console-bootstrap-script-page .bootstrap-script-textarea {
  width: 100%;
  min-height: 140px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  padding: 16px 16px 60px 16px;
  border: 3px solid #10b981;
  border-radius: 12px;
  background: var(--bg-body);
  color: var(--success);
  resize: vertical;
  line-height: 1.5;
}
.console-bootstrap-script-page .big-action-button--success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* =========================
   Quick setup wizard (console/wizard_step_*.html)
   ========================= */
.console-wizard-flow .wizard-container { max-width: 800px; margin: 40px auto; }
.console-wizard-flow.wizard-container--narrow .wizard-container { max-width: 600px; }
.console-wizard-flow.wizard-container--step3 .wizard-container { max-width: 700px; }
.console-wizard-flow .wizard-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}
.console-wizard-flow .wizard-progress::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
}
.console-wizard-flow .wizard-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.console-wizard-flow .step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 8px;
}
.console-wizard-flow .wizard-step.active .step-circle {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.console-wizard-flow .wizard-step.complete .step-circle { background: #10b981; color: white; }
.console-wizard-flow .step-label { font-size: 12px; color: #6b7280; }
.console-wizard-flow .wizard-step.active .step-label { color: #111827; font-weight: 600; }
.console-wizard-flow .wizard-card {
  background: var(--bg-panel);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.console-wizard-flow.wizard-container--step3 .wizard-card {
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}
.console-wizard-flow .wizard-header { text-align: center; margin-bottom: 32px; }
.console-wizard-flow .wizard-header h1 { font-size: 28px; margin-bottom: 8px; }
.console-wizard-flow.wizard-container--step3 .wizard-header h1 { color: #111827; font-weight: 700; }
.console-wizard-flow .wizard-header p { color: var(--text-muted); }
.console-wizard-flow.wizard-container--step3 .wizard-header p { color: #6b7280; }
.console-wizard-flow .form-group { margin-bottom: 24px; }
.console-wizard-flow .form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.console-wizard-flow .form-group input,
.console-wizard-flow .form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  background: var(--bg-panel);
  color: var(--text-primary);
}
.console-wizard-flow .form-group input:focus,
.console-wizard-flow .form-group select:focus {
  outline: none;
  border-color: #667eea;
}
.console-wizard-flow .form-help { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.console-wizard-flow .wizard-actions { display: flex; gap: 12px; margin-top: 32px; }
.console-wizard-flow .btn-wizard {
  flex: 1;
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.console-wizard-flow .btn-wizard.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.console-wizard-flow .btn-wizard.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}
.console-wizard-flow .btn-wizard.btn-secondary { background: #f3f4f6; color: #6b7280; }
.console-wizard-flow .btn-wizard.btn-secondary:hover { background: #e5e7eb; }
.console-wizard-flow .package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.console-wizard-flow .package-option {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-panel);
}
.console-wizard-flow .package-option:hover {
  border-color: #667eea;
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
}
.console-wizard-flow .package-option input[type="radio"] { display: none; }
.console-wizard-flow .package-option:has(input[type="radio"]:checked) { border-color: #667eea; }
.console-wizard-flow .package-option:has(input[type="radio"]:checked) .package-name { color: #667eea; }
.console-wizard-flow .package-content { text-align: center; }
.console-wizard-flow .package-icon { font-size: 32px; margin-bottom: 8px; }
.console-wizard-flow .package-name { font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--text-primary); }
.console-wizard-flow .package-price { font-size: 20px; font-weight: 700; color: #10b981; margin: 8px 0; }
.console-wizard-flow .package-details { font-size: 13px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.console-wizard-flow .package-desc { font-size: 11px; color: var(--text-muted); margin-top: 8px; font-style: italic; }
.console-wizard-flow .wizard-pro-tip {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.console-wizard-flow .wizard-pro-tip-title { font-weight: 600; margin-bottom: 4px; }
.console-wizard-flow .wizard-pro-tip-body { font-size: 13px; color: #1e40af; }
.console-wizard-flow .summary-box {
  background: #ffffff;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.console-wizard-flow .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}
.console-wizard-flow .summary-item:last-child { border-bottom: none; }
.console-wizard-flow .summary-label { font-weight: 600; color: #6b7280; font-size: 14px; }
.console-wizard-flow .summary-value { font-weight: 700; color: #111827; font-size: 16px; }
.console-wizard-flow .voucher-count-selector { margin: 24px 0; }
.console-wizard-flow .voucher-count-selector > label {
  display: block;
  font-weight: 600;
  margin-bottom: 12px;
  color: #111827;
}
.console-wizard-flow .count-options { display: flex; gap: 12px; }
.console-wizard-flow .count-option { flex: 1; }
.console-wizard-flow .count-option input[type="radio"] { display: none; }
.console-wizard-flow .count-option label {
  display: block;
  padding: 16px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #ffffff;
  color: #111827;
}
.console-wizard-flow .count-option input[type="radio"]:checked + label {
  border-color: #667eea;
  background: #eff6ff;
  color: #667eea;
  font-weight: 700;
}
.console-wizard-flow .count-option label:hover { border-color: #667eea; }
.console-wizard-flow .count-value { font-size: 24px; font-weight: 700; display: block; margin-bottom: 4px; }
.console-wizard-flow .count-label { font-size: 12px; color: #6b7280; }
.console-wizard-flow .info-box {
  background: #ecfdf5;
  border-left: 4px solid #10b981;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.console-wizard-flow .info-box-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: #065f46;
  display: flex;
  align-items: center;
  gap: 8px;
}
.console-wizard-flow .info-box-content { font-size: 13px; color: #047857; line-height: 1.6; }
.console-wizard-flow .feature-list { list-style: none; padding: 0; margin: 20px 0; }
.console-wizard-flow .feature-list li {
  padding: 8px 0;
  padding-left: 28px;
  position: relative;
  color: #047857;
}
.console-wizard-flow .feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: 700;
  font-size: 18px;
}
.console-wizard-flow .wizard-tip-amber {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.console-wizard-flow .wizard-tip-amber-title { font-weight: 600; margin-bottom: 4px; color: #92400e; }
.console-wizard-flow .wizard-tip-amber-body { font-size: 13px; color: #92400e; }
.console-wizard-flow .summary-box-title { margin: 0 0 16px 0; font-size: 16px; color: #6b7280; font-weight: 600; }

/* =========================
   Campaign create (console/campaign_create.html)
   ========================= */
@media (prefers-color-scheme: dark) {
  .campaign-create-page select,
  .campaign-create-page input[type="text"],
  .campaign-create-page input[type="number"],
  .campaign-create-page input[type="date"],
  .campaign-create-page input[type="time"],
  .campaign-create-page input[type="url"],
  .campaign-create-page input[type="file"],
  .campaign-create-page textarea {
    background-color: #1f2937 !important;
    color: #ffffff !important;
    border: 1px solid #374151 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .campaign-create-page select {
    color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }
  .campaign-create-page select option {
    background-color: #1f2937 !important;
    color: #ffffff !important;
  }
  .campaign-create-page select:focus,
  .campaign-create-page input:focus,
  .campaign-create-page textarea:focus {
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
    outline: none !important;
  }
  .campaign-create-page label { color: #e5e7eb !important; }
}
@media (prefers-color-scheme: light) {
  .campaign-create-page select,
  .campaign-create-page input[type="text"],
  .campaign-create-page input[type="number"],
  .campaign-create-page input[type="date"],
  .campaign-create-page input[type="time"],
  .campaign-create-page input[type="url"],
  .campaign-create-page input[type="file"],
  .campaign-create-page textarea {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #d1d5db !important;
  }
  .campaign-create-page select option {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
}

/* =========================
   Form macros marker (console/_form_macros.html)
   ========================= */
body:has(.console-form-macros-marker) .form-helper {
  background: #f9fafb;
  border-left: 3px solid #3b82f6;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 20px;
}
body:has(.console-form-macros-marker) .form-helper h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}
body:has(.console-form-macros-marker) .form-helper p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}
body:has(.console-form-macros-marker) .field-group {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
body:has(.console-form-macros-marker) .field-group h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 8px;
}
body:has(.console-form-macros-marker) .field .help-text {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
}
body:has(.console-form-macros-marker) .field .help-text code {
  background: #f3f4f6;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 12px;
}
body:has(.console-form-macros-marker) .field label .required { color: #ef4444; margin-left: 2px; }
body:has(.console-form-macros-marker) .field label .optional {
  color: #9ca3af;
  font-size: 12px;
  font-weight: normal;
  margin-left: 8px;
}
body:has(.console-form-macros-marker) .field input:focus + .help-text,
body:has(.console-form-macros-marker) .field select:focus + .help-text,
body:has(.console-form-macros-marker) .field textarea:focus + .help-text {
  color: #2563eb;
}
body:has(.console-form-macros-marker) .field-tooltip {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #e5e7eb;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-size: 11px;
  font-weight: bold;
  color: #6b7280;
  cursor: help;
  margin-left: 4px;
}
body:has(.console-form-macros-marker) .field-tooltip:hover { background: #2563eb; color: white; }
@media (max-width: 640px) {
  body:has(.console-form-macros-marker) .field-group { padding: 16px; }
  body:has(.console-form-macros-marker) .form-helper { font-size: 12px; padding: 10px 12px; }
}

/* =========================
   Mobile loader (console/_mobile_loader.html)
   ========================= */
#mobile-loader.mobile-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 10000;
  display: none;
  color: white;
}
#mobile-loader.mobile-loader.is-visible {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: console-mobile-loader-fadeIn 0.3s;
}
@keyframes console-mobile-loader-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#mobile-loader .loader-logo {
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  animation: console-mobile-loader-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
@keyframes console-mobile-loader-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
#mobile-loader .loader-logo svg { width: 60px; height: 60px; fill: #2563eb; }
#mobile-loader .loader-text { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
#mobile-loader .loader-subtext { font-size: 14px; opacity: 0.9; }
#mobile-loader .loader-progress {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin-top: 30px;
  overflow: hidden;
}
#mobile-loader .loader-progress-bar {
  height: 100%;
  background: white;
  border-radius: 2px;
  animation: console-mobile-loader-progress 2s ease-in-out infinite;
}
@keyframes console-mobile-loader-progress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}
#mobile-loader .loader-network {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 12px;
}
#mobile-loader .network-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: console-mobile-loader-blink 2s infinite;
}
#mobile-loader .network-dot.offline { background: #ef4444; }
@keyframes console-mobile-loader-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* =========================
   Responsive table partial (console/_responsive_table.html)
   ========================= */
.console-responsive-table .console-responsive-table__empty { text-align: center; }
.console-responsive-table .responsive-table-container { width: 100%; }
.console-responsive-table .responsive-table { display: table; width: 100%; }
.console-responsive-table .responsive-cards { display: none; }
@media (max-width: 768px) {
  .console-responsive-table .responsive-table { display: none; }
  .console-responsive-table .responsive-cards { display: block; }
  .console-responsive-table .card-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .console-responsive-table .card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
  }
  .console-responsive-table .card-row:last-child { border-bottom: none; }
  .console-responsive-table .card-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
  }
  .console-responsive-table .card-value {
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
  }
  .console-responsive-table .card-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .console-responsive-table .card-actions .btn {
    flex: 1;
    min-width: 80px;
    text-align: center;
  }
  .console-responsive-table .card-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
  }
  .console-responsive-table .card-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
  }
  .console-responsive-table .card-badge.success { background: #ecfdf5; color: #065f46; }
  .console-responsive-table .card-badge.warning { background: #fffbeb; color: #92400e; }
  .console-responsive-table .card-badge.danger { background: #fef2f2; color: #991b1b; }
}

/* ---- console/templates/console/router_apply_baseline.html ---- */
.router-apply-baseline-page .baseline-shell { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; }
.router-apply-baseline-page .baseline-hero {
  padding: 26px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.66), rgba(15, 23, 42, 0.78));
  box-shadow: var(--shadow-lg);
}
.router-apply-baseline-page .baseline-hero-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.router-apply-baseline-page .baseline-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.router-apply-baseline-page .baseline-copy h2 { margin: 0 0 8px 0; }
.router-apply-baseline-page .baseline-copy p { margin: 0; max-width: 62ch; color: var(--text-secondary); }
.router-apply-baseline-page .baseline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.router-apply-baseline-page .baseline-chip {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.16);
}
.router-apply-baseline-page .baseline-chip span { display: block; }
.router-apply-baseline-page .baseline-chip-label {
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.router-apply-baseline-page .baseline-chip-value { color: var(--text-primary); font-weight: 800; font-size: 1rem; }
.router-apply-baseline-page .baseline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: start;
}
.router-apply-baseline-page .info-card,
.router-apply-baseline-page .tip-card,
.router-apply-baseline-page .form-card {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.68);
  box-shadow: var(--shadow-sm);
}
.router-apply-baseline-page .info-card h4,
.router-apply-baseline-page .tip-card h4,
.router-apply-baseline-page .form-card h3 { margin: 0 0 10px 0; color: var(--text-primary); }
.router-apply-baseline-page .info-card p,
.router-apply-baseline-page .info-card li,
.router-apply-baseline-page .tip-card p { color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.router-apply-baseline-page .info-card ul { margin: 0; padding-left: 18px; }
.router-apply-baseline-page .sidebar-stack { display: grid; gap: 12px; }
.router-apply-baseline-page .form-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.router-apply-baseline-page .baseline-form-intro { margin: 0 0 14px 0; }
@media (max-width: 900px) {
  .router-apply-baseline-page .baseline-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .router-apply-baseline-page .baseline-hero { padding: 20px; }
  .router-apply-baseline-page .baseline-hero-grid { align-items: stretch; }
  .router-apply-baseline-page .baseline-chip { flex: 1 1 100%; }
  .router-apply-baseline-page .form-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---- console/templates/console/router_config.html ---- */
.router-config-page .config-shell { display: grid; gap: 20px; }
.router-config-page .config-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(124, 58, 237, 0.12) 50%, rgba(16, 185, 129, 0.1) 100%);
  box-shadow: var(--shadow-lg);
}
.router-config-page .config-hero::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.router-config-page .config-hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.router-config-page .config-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.router-config-page .config-copy h2 { margin: 0 0 8px 0; }
.router-config-page .config-copy p { margin: 0; color: var(--text-secondary); max-width: 58ch; }
.router-config-page .config-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.router-config-page .config-chip {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.28);
}
.router-config-page .config-chip span { display: block; }
.router-config-page .config-chip-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.router-config-page .config-chip-value { font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.router-config-page .section-title { margin: 0 0 12px 0; }
.router-config-page .preview-grid { gap: 10px; }
.router-config-page .config-preview-fields { gap: 8px; }
.router-config-page .config-inventory-grid { margin-top: 0; }
.router-config-page .config-section-heading { margin: 0 0 8px 0; }
.router-config-page .config-section-note { margin: 0 0 8px 0; font-size: 13px; }
.router-config-page .config-data-table { min-width: 600px; }
.router-config-page .config-addrlist-filter {
  margin: 0 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.router-config-page .config-filter-label { margin: 0; }
.router-config-page .config-filter-input {
  min-width: 200px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-primary);
}
.router-config-page .config-preview-actions { margin-top: 8px; display: flex; gap: 8px; }
.router-config-page .config-baseline-results { margin-top: 8px; }
.router-config-page .config-baseline-args-pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font: inherit;
}
@media (max-width: 768px) {
  .router-config-page .config-hero { padding: 18px; border-radius: 20px; }
  .router-config-page .config-hero-grid { align-items: stretch; }
  .router-config-page .config-chip { flex: 1 1 100%; }
}

/* === Console auth pages — layout (login + signup) === */
body:has(:is(.console-login-shell, .console-signup-shell)) .sidebar,
body:has(:is(.console-login-shell, .console-signup-shell)) .sidebar-overlay,
body:has(:is(.console-login-shell, .console-signup-shell)) header,
body:has(:is(.console-login-shell, .console-signup-shell)) footer {
  display: none !important;
}
body:has(:is(.console-login-shell, .console-signup-shell)) {
  display: block;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(140deg, #1d4ed8 0%, #0f172a 56%, #020617 100%);
}
body:has(:is(.console-login-shell, .console-signup-shell)) .main-wrapper,
body:has(:is(.console-login-shell, .console-signup-shell)) .content {
  margin-left: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}
body:has(:is(.console-login-shell, .console-signup-shell)) .messages {
  margin: 0;
}
body:has(:is(.console-login-shell, .console-signup-shell)) .messages:empty {
  display: none;
}

/* === Console auth pages — shared UI (login + signup) === */
:is(.console-login-shell, .console-signup-shell) .auth-shell {
  min-height: 100vh;
  padding: 22px 16px 30px;
}
:is(.console-login-shell, .console-signup-shell) .auth-topbar {
  max-width: 1180px;
  margin: 0 auto 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
:is(.console-login-shell, .console-signup-shell) .auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}
:is(.console-login-shell, .console-signup-shell) .auth-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.26);
}
:is(.console-login-shell, .console-signup-shell) .auth-brand-copy strong {
  display: block;
  font-size: 15px;
}
:is(.console-login-shell, .console-signup-shell) .auth-brand-copy span {
  display: block;
  color: rgba(226, 232, 240, 0.76);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
:is(.console-login-shell, .console-signup-shell) .auth-topbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
:is(.console-login-shell, .console-signup-shell) .auth-link-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  font-size: 13px;
  font-weight: 700;
}
:is(.console-login-shell, .console-signup-shell) .auth-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 20px;
  align-items: stretch;
}
:is(.console-login-shell, .console-signup-shell) .auth-story,
:is(.console-login-shell, .console-signup-shell) .auth-card {
  border-radius: 30px;
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.28);
}
:is(.console-login-shell, .console-signup-shell) .auth-story {
  padding: 28px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  color: #e2e8f0;
  position: relative;
  overflow: hidden;
}
:is(.console-login-shell, .console-signup-shell) .auth-story::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
}
:is(.console-login-shell, .console-signup-shell) .auth-badge {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
:is(.console-login-shell, .console-signup-shell) .auth-story h1 {
  margin: 0 0 12px 0;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.02;
  color: #fff;
}
:is(.console-login-shell, .console-signup-shell) .auth-story-copy {
  margin: 0;
  color: rgba(226, 232, 240, 0.88);
  font-size: 15px;
  line-height: 1.7;
  max-width: 58ch;
}
:is(.console-login-shell, .console-signup-shell) .story-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
:is(.console-login-shell, .console-signup-shell) .story-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
:is(.console-login-shell, .console-signup-shell) .auth-card {
  padding: 28px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(226,232,240,0.92);
  color: #0f172a;
}
:is(.console-login-shell, .console-signup-shell) .auth-header {
  margin-bottom: 24px;
}
:is(.console-login-shell, .console-signup-shell) .auth-kicker {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(37,99,235,0.08);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
:is(.console-login-shell, .console-signup-shell) .auth-title {
  margin: 0 0 8px 0;
  font-size: 1.95rem;
  line-height: 1.05;
  color: #0f172a;
}
:is(.console-login-shell, .console-signup-shell) .auth-subtitle {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.65;
}
:is(.console-login-shell, .console-signup-shell) .auth-form .field {
  margin-bottom: 18px;
}
:is(.console-login-shell, .console-signup-shell) .auth-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 13px;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
:is(.console-login-shell, .console-signup-shell) .auth-form input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(148,163,184,0.38);
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
:is(.console-login-shell, .console-signup-shell) .auth-form input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
:is(.console-login-shell, .console-signup-shell) .field-help {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}
:is(.console-login-shell, .console-signup-shell) .auth-alert {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(254, 226, 226, 0.92);
  border: 1px solid rgba(248, 113, 113, 0.22);
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.6;
}
:is(.console-login-shell, .console-signup-shell) .errorlist {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.5;
}
:is(.console-login-shell, .console-signup-shell) .auth-form .btn {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 16px;
  margin-top: 4px;
}
:is(.console-login-shell, .console-signup-shell) .auth-form .btn.primary {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  border: none;
  color: white;
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.22);
}
:is(.console-login-shell, .console-signup-shell) .auth-form .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(37, 99, 235, 0.28);
}
:is(.console-login-shell, .console-signup-shell) .auth-form .btn.secondary {
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(148,163,184,0.34);
}
:is(.console-login-shell, .console-signup-shell) .auth-support {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
:is(.console-login-shell, .console-signup-shell) .support-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,0.92);
  background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(255,255,255,0.99));
}
:is(.console-login-shell, .console-signup-shell) .support-card span {
  display: block;
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
:is(.console-login-shell, .console-signup-shell) .support-card strong {
  display: block;
  color: #0f172a;
  margin-bottom: 4px;
}
:is(.console-login-shell, .console-signup-shell) .support-card p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}
:is(.console-login-shell, .console-signup-shell) .auth-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(226,232,240,0.9);
  font-size: 14px;
  color: #64748b;
}
:is(.console-login-shell, .console-signup-shell) .auth-footer a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 700;
}
:is(.console-login-shell, .console-signup-shell) .auth-footer a:hover {
  text-decoration: underline;
}
@media (max-width: 920px) {
  :is(.console-login-shell, .console-signup-shell) .auth-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  :is(.console-login-shell, .console-signup-shell) .auth-shell {
    padding: 16px 12px 24px;
  }
  :is(.console-login-shell, .console-signup-shell) .auth-story,
  :is(.console-login-shell, .console-signup-shell) .auth-card {
    border-radius: 24px;
    padding: 20px;
  }
  :is(.console-login-shell, .console-signup-shell) .auth-topbar-actions,
  :is(.console-login-shell, .console-signup-shell) .auth-link-pill {
    width: 100%;
  }
  :is(.console-login-shell, .console-signup-shell) .auth-topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  :is(.console-login-shell, .console-signup-shell) .auth-support {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  :is(.console-login-shell, .console-signup-shell) .auth-topbar-actions {
    grid-template-columns: 1fr;
  }
}

/* === Console login page === */
.console-login-shell .story-checklist {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.console-login-shell .story-checklist--single {
  grid-template-columns: 1fr;
}
.console-login-shell .story-check {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: #fff;
  line-height: 1.6;
}
.console-login-shell .story-check a {
  color: #93c5fd;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.console-login-shell .auth-field-forgot {
  margin-top: -6px;
  margin-bottom: 14px;
}
.console-login-shell .auth-forgot-link {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
}
.console-login-shell .field-help-forgot-note {
  margin-top: 6px;
}
.console-login-shell .auth-support--single {
  grid-template-columns: 1fr;
}

/* === Console signup page === */
.console-signup-shell .story-list {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}
.console-signup-shell .story-list--compact {
  margin-top: 18px;
}
.console-signup-shell .story-list-item {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: #fff;
  line-height: 1.6;
}
.console-signup-shell .story-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.console-signup-shell .story-metric {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
}
.console-signup-shell .story-metric span {
  display: block;
  font-size: 11px;
  color: rgba(226, 232, 240, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.console-signup-shell .story-metric strong {
  display: block;
  color: #fff;
  margin-bottom: 6px;
  font-size: 1rem;
}
.console-signup-shell .story-metric p {
  margin: 0;
  color: rgba(226, 232, 240, 0.88);
  font-size: 13px;
  line-height: 1.6;
}
.console-signup-shell .plan-grid {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.console-signup-shell .plan-grid--single {
  grid-template-columns: 1fr;
}
.console-signup-shell .plan-grid--after-form {
  margin-top: 14px;
}
.console-signup-shell .plan-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,0.92);
  background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(255,255,255,0.99));
}
.console-signup-shell .plan-card span {
  display: block;
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.console-signup-shell .plan-card strong {
  display: block;
  color: #0f172a;
  margin-bottom: 4px;
}
.console-signup-shell .plan-card p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .console-signup-shell .plan-grid {
    grid-template-columns: 1fr;
  }
  .console-signup-shell .story-grid {
    grid-template-columns: 1fr;
  }
}

/* === Console profile edit (package) page === */
.console-profile-edit-shell .package-edit-shell { display: grid; gap: 20px; }
.console-profile-edit-shell .package-edit-hero {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(16, 185, 129, 0.18);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%);
  box-shadow: var(--shadow-lg);
}
.console-profile-edit-shell .package-edit-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.console-profile-edit-shell .package-edit-hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.console-profile-edit-shell .package-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.24);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.console-profile-edit-shell .package-copy h2 { margin: 0 0 8px 0; }
.console-profile-edit-shell .package-copy p { margin: 0; max-width: 62ch; color: var(--text-secondary); }
.console-profile-edit-shell .package-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.console-profile-edit-shell .package-chip {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84));
  border: 1px solid rgba(148, 163, 184, 0.16);
}
.console-profile-edit-shell .package-chip span { display: block; }
.console-profile-edit-shell .package-chip-label {
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.console-profile-edit-shell .package-chip-value { color: var(--text-primary); font-weight: 800; font-size: 1rem; }
.console-profile-edit-shell .edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: start;
}
.console-profile-edit-shell .form-panel,
.console-profile-edit-shell .info-card,
.console-profile-edit-shell .field-card {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
  box-shadow: var(--shadow-sm);
}
.console-profile-edit-shell .field-stack,
.console-profile-edit-shell .sidebar-stack { display: grid; gap: 12px; }
.console-profile-edit-shell .field-card label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.console-profile-edit-shell .field-card small { display: block; margin-top: 8px; color: var(--text-secondary); font-size: 13px; }
.console-profile-edit-shell .field-card input,
.console-profile-edit-shell .field-card select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; }
.console-profile-edit-shell .info-card h4 { margin: 0 0 8px 0; color: var(--text-primary); }
.console-profile-edit-shell .info-card ul { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.console-profile-edit-shell .form-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.console-profile-edit-shell .danger-link { margin-left: auto; background: #dc2626; border-color: #dc2626; color: #fff; }
.console-profile-edit-shell .field-error { color: #dc2626; font-size: 13px; margin-top: 4px; }
@media (max-width: 900px) {
  .console-profile-edit-shell .edit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .console-profile-edit-shell .package-edit-hero { padding: 20px; border-radius: 22px; }
  .console-profile-edit-shell .package-edit-hero-grid { align-items: stretch; }
  .console-profile-edit-shell .package-chip { flex: 1 1 100%; }
  .console-profile-edit-shell .form-actions .btn { flex: 1 1 auto; text-align: center; }
  .console-profile-edit-shell .danger-link { margin-left: 0; }
}

/* === Console profile delete (package) page === */
.console-profile-delete-shell .confirm-shell { display: grid; gap: 20px; max-width: 760px; margin: 0 auto; }
.console-profile-delete-shell .warning-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(239, 68, 68, 0.22);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(127, 29, 29, 0.1) 100%);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.console-profile-delete-shell .warning-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.console-profile-delete-shell .warning-card > * { position: relative; z-index: 1; }
.console-profile-delete-shell .confirm-icon { font-size: 64px; margin-bottom: 16px; }
.console-profile-delete-shell .warning-title {
  margin: 0 0 12px 0;
  color: #991b1b;
}
.console-profile-delete-shell .warning-copy {
  margin: 0;
  color: #fecaca;
  font-size: 14px;
  line-height: 1.6;
}
.console-profile-delete-shell .package-card,
.console-profile-delete-shell .warning-box,
.console-profile-delete-shell .info-box {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.44), rgba(15, 23, 42, 0.62));
  box-shadow: var(--shadow-sm);
}
.console-profile-delete-shell .package-card { text-align: left; }
.console-profile-delete-shell .package-name { font-weight: 700; color: var(--text-primary); font-size: 1rem; margin-bottom: 6px; }
.console-profile-delete-shell .package-site { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }
.console-profile-delete-shell .package-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.console-profile-delete-shell .meta-label { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
.console-profile-delete-shell .meta-value { font-weight: 700; color: var(--text-primary); }
.console-profile-delete-shell .meta-value.bad { color: #f87171; }
.console-profile-delete-shell .meta-value.good { color: #34d399; }
.console-profile-delete-shell .warning-box h4,
.console-profile-delete-shell .info-box h4 { margin: 0 0 8px 0; color: var(--text-primary); }
.console-profile-delete-shell .warning-box p,
.console-profile-delete-shell .info-box ul { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.console-profile-delete-shell .info-box ul { padding-left: 18px; }
.console-profile-delete-shell .form-actions { display: flex; gap: 12px; margin-top: 24px; justify-content: center; flex-wrap: wrap; }
.console-profile-delete-shell .danger-btn { background: #dc2626; border-color: #dc2626; color: #fff; }
.console-profile-delete-shell .delete-back-wrap { text-align: center; margin-top: 24px; }
.console-profile-delete-shell .delete-confirm-form { margin-top: 24px; }
@media (max-width: 768px) {
  .console-profile-delete-shell .warning-card { padding: 22px; border-radius: 22px; }
  .console-profile-delete-shell .package-meta { grid-template-columns: 1fr; }
  .console-profile-delete-shell .form-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* =========================
   Console breadcrumbs partial (console/_breadcrumbs.html)
   ========================= */
.console-breadcrumbs-partial .console-breadcrumbs-partial__list {
  list-style: none;
  padding: 0;
  margin: 6px 0 12px 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* =========================
   Console empty state partial (console/_empty_state.html)
   ========================= */
.console-empty-state-partial.console-empty-state-partial--compact {
  text-align: center;
  padding: 20px 12px;
}
.console-empty-state-partial.console-empty-state-partial--compact .console-empty-state-partial__title { margin: 0 0 6px 0; }
.console-empty-state-partial.console-empty-state-partial--compact .console-empty-state-partial__hint--compact {
  margin: 0;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;
}
.console-empty-state-partial.console-empty-state-partial--compact .console-empty-state-partial__actions--primary { margin-top: 12px; }
.console-empty-state-partial.console-empty-state-partial--compact .console-empty-state-partial__actions--secondary { margin-top: 8px; }
.console-empty-state-partial.panel.console-empty {
  text-align: center;
  padding: 28px 20px;
}
.console-empty-state-partial.panel.console-empty .console-empty-state-partial__heading { margin: 0 0 8px 0; }
.console-empty-state-partial.panel.console-empty .console-empty-state-partial__hint {
  margin: 0;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.console-empty-state-partial.panel.console-empty .console-empty-state-partial__actions--block { margin-top: 16px; }
.console-empty-state-partial.panel.console-empty .console-empty-state-partial__actions--block-secondary { margin-top: 10px; }

/* =========================
   Console form field partial (console/_form_field.html)
   ========================= */
.console-form-field-partial .console-form-field-partial__required { color: #ef4444; }
.console-form-field-partial .console-form-field-partial__help {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 13px;
}
.console-form-field-partial .console-form-field-partial__error {
  display: block;
  margin-top: 4px;
  color: #ef4444;
  font-size: 13px;
}

/* =========================
   Advertiser create (console/advertiser_create.html)
   ========================= */
.advertiser-create-shell .advertiser-create-shell__title { margin: 0; }
.advertiser-create-shell .advertiser-create-shell__stack { display: grid; gap: 16px; }
.advertiser-create-shell .advertiser-create-shell__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* =========================
   Hotspot sessions (console/hotspot_sessions.html)
   ========================= */
.hotspot-sessions-shell .hotspot-sessions-shell__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hotspot-sessions-shell .hotspot-sessions-shell__title { margin: 0; }
.hotspot-sessions-shell .hotspot-sessions-shell__table { margin-top: 12px; }
.hotspot-sessions-shell .hotspot-sessions-shell__caption { text-align: left; }