/* ====================================
   app.css - Consolidated & Optimized
   Version: 2.0 (Cleaned)
   ==================================== */

/* --------------------------------
   Variables & Base
   -------------------------------- */
:root {
  /* Colors - Core */
  --p: #6A2C86;
  --b: #27AAE1;
  --bg: #0b0f14;
  --card: #121924;
  --text: #e7eef7;
  --muted: #9fb0c3;
  
  /* Semantic Colors */
  --success: #2ecc71;
  --warning: #f1c40f;
  --danger: #ff6b6b;
  --info: var(--b);
  
  /* Backgrounds */
  --bg-app: var(--bg);
  --bg-card: var(--card);
  --bg-soft: rgba(255,255,255,.04);
  --bg-soft-hover: rgba(255,255,255,.07);
  --bg-input: #0b1220;
  --bg-overlay: rgba(3,8,16,.72);
  
  /* Borders */
  --border-base: rgba(255,255,255,.10);
  --border-soft: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  
  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  
  /* Shadows */
  --shadow-soft: 0 6px 18px rgba(0,0,0,.22);
  --shadow-card: 0 10px 30px rgba(0,0,0,.35);
  --shadow-focus: 0 0 0 3px rgba(39,170,225,.20);
  
  /* Transitions */
  --transition-fast: 140ms ease;
}

* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: linear-gradient(180deg, #070a0f, #0b0f14);
  color: var(--text);
}

/* --------------------------------
   Typography & Links
   -------------------------------- */
h1 { font-size: 22px; margin: 0 0 14px; }

a {
  color: var(--b);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.muted { color: var(--muted); }

/* --------------------------------
   Layout System
   -------------------------------- */
.app-shell {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

.app-sidebar {
  width: 270px;
  flex: 0 0 270px;
  background: rgba(9,13,19,.92);
  border-left: 1px solid var(--border-soft);
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header-left,
.app-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.app-content {
  flex: 1;
  padding: 22px 0;
}

.app-footer {
  border-top: 1px solid var(--border-soft);
  padding: var(--space-md) 18px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(0,0,0,.16);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

/* --------------------------------
   Sidebar Components
   -------------------------------- */
.sidebar-brand {
  padding: 10px 10px 18px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}

.sidebar-logo {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .8px;
}

.sidebar-brand-text {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sidebar-link {
  display: block;
  text-decoration: none;
  color: var(--text);
  padding: 11px var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  transition: var(--transition-fast);
}

.sidebar-link:hover,
.sidebar-link.active {
  border-color: rgba(39,170,225,.45);
  background: rgba(39,170,225,.08);
}

.sidebar-link.active {
  box-shadow: inset 0 0 0 1px rgba(39,170,225,.16);
}

.sidebar-section-label {
  margin: 14px 8px 4px;
  color: rgba(159,176,195,.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Sidebar Group Toggle */
.sidebar-group {
  display: grid;
  gap: var(--space-sm);
}

.sidebar-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  transition: var(--transition-fast);
}

.sidebar-group-toggle:hover {
  border-color: rgba(39,170,225,.45);
  background: rgba(39,170,225,.08);
}

.sidebar-group-caret {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.sidebar-group.is-open .sidebar-group-caret {
  transform: rotate(180deg);
}

.sidebar-subnav {
  display: none;
  padding-inline: 8px 4px;
  gap: var(--space-sm);
}

.sidebar-group.is-open .sidebar-subnav {
  display: grid;
}

.sidebar-subnav .sidebar-link {
  font-size: 14px;
  min-height: 40px;
}

/* --------------------------------
   Cards & Containers
   -------------------------------- */
.card {
  background: rgba(18,25,36,.9);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-card);
}

.card-soft { background: var(--bg-soft); }
.card-flat { box-shadow: none; }
.card-accent { border-color: rgba(39,170,225,.30); }

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.card-subtitle {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* --------------------------------
   Grid Systems
   -------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Dashboard Grids */
.dashboard-grid,
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.stats-grid-admin {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --------------------------------
   Dashboard Components
   -------------------------------- */
.dashboard-card,
.dashboard-panel,
.chart-card,
.activity-card {
  background: rgba(18,25,36,.92);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-card);
}

.dashboard-card h3,
.dashboard-panel-title,
.chart-card-title,
.activity-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.dashboard-stat-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.02em;
}

.dashboard-stat-meta {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Dashboard Tone Cards */
.dashboard-card.tone-primary { border-right: 4px solid var(--p); }
.dashboard-card.tone-success { border-right: 4px solid var(--success); }
.dashboard-card.tone-info { border-right: 4px solid var(--info); }
.dashboard-card.tone-warning { border-right: 4px solid var(--warning); }
.dashboard-card.tone-danger { border-right: 4px solid var(--danger); }

/* Chart Components */
.chart-shell {
  min-height: 320px;
  position: relative;
}

.chart-shell-sm { min-height: 260px; }
.chart-shell-lg { min-height: 360px; }

/* --------------------------------
   Tables
   -------------------------------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  min-width: 640px;
}

.table th {
  color: var(--muted);
  font-weight: 700;
  text-align: right;
  font-size: 13px;
  padding: 0 10px;
}

.table td {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  padding: 10px;
  border-left: none;
  border-right: none;
}

.table tr td:first-child {
  border-right: 1px solid var(--border-soft);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.table tr td:last-child {
  border-left: 1px solid var(--border-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.table-hover tbody tr:hover td {
  background: rgba(255,255,255,.05);
}

.table-toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-soft);
}

.table-toolbar-search {
  flex: 1 1 280px;
  max-width: 420px;
}

.table-pagination {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.table-pagination a {
  padding: 6px 10px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
}

.table-pagination a.active {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
}

/* --------------------------------
   Bulk Actions
   -------------------------------- */
.bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

.bulk-toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bulk-select {
  min-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: inherit;
}

.bulk-col {
  width: 44px;
  text-align: center;
}

.bulk-id-cell {
  cursor: pointer;
  user-select: none;
}

.bulk-id-cell:hover,
.bulk-id-head:hover {
  background: var(--bg-soft-hover);
}

/* --------------------------------
   Forms & Inputs
   -------------------------------- */
input, select, textarea {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-base);
  background: var(--bg-input);
  color: var(--text);
  outline: none;
  transition: all var(--transition-fast);
}

input:hover, select:hover, textarea:hover {
  border-color: var(--border-strong);
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(39,170,225,.55);
  box-shadow: var(--shadow-focus);
}

input::placeholder, textarea::placeholder {
  color: rgba(159,176,195,.72);
}

input:disabled, select:disabled, textarea:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-row-3 {
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
}

.form-row-4 {
  grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}

.inline-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

/* Checkboxes */
.checkbox-label,
.remember-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  margin: 0;
}

.checkbox-label input,
.remember-check input {
  width: auto;
  margin: 0;
}

/* --------------------------------
   Buttons
   -------------------------------- */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-base);
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.2;
  transition: all var(--transition-fast);
  width: auto;
  margin-top: 0;
}

button:hover, .btn:hover {
  background: var(--bg-soft-hover);
  border-color: rgba(39,170,225,.45);
  transform: translateY(-1px);
}

button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

button:disabled, .btn.is-disabled {
  opacity: .6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(90deg, var(--p), var(--b));
  color: #fff;
  border: 0;
}

.btn-secondary { background: rgba(106,44,134,.16); border-color: rgba(106,44,134,.35); color: #f3e8fb; }
.btn-success { background: rgba(46,204,113,.14); border-color: rgba(46,204,113,.35); color: #c7f5d8; }
.btn-warning { background: rgba(241,196,15,.14); border-color: rgba(241,196,15,.35); color: #ffeaa7; }
.btn-danger { background: rgba(255,107,107,.14); border-color: rgba(255,107,107,.35); color: #ffd1d1; }
.btn-ghost { background: transparent; }
.btn-link { background: transparent; border-color: transparent; color: var(--info); padding-inline: 4px; }

.btn-small { min-height: 34px; padding: 7px 10px; font-size: 13px; border-radius: var(--radius-md); }
.btn-large { min-height: 48px; padding: 12px 18px; }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* --------------------------------
   Badges
   -------------------------------- */
.badge, .pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--muted);
}

/* Badge Variants */
.badge-on, .badge-ok, .badge.ok, .badge-success {
  border-color: rgba(46,204,113,.35);
  color: #c7f5d8;
}

.badge-off, .badge-bad, .badge.bad, .badge.error, .badge-danger {
  border-color: rgba(255,107,107,.35);
  color: #ffd1d1;
}

.badge-warn, .badge.warn, .badge-warning {
  border-color: rgba(241,196,15,.35);
  color: #ffeaa7;
}

.badge-info {
  border-color: rgba(39,170,225,.35);
  color: #bfe9fb;
}

/* --------------------------------
   Alerts & Flash Messages
   -------------------------------- */
.alert, .flash {
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  border: 1px solid var(--border-base);
  background: var(--bg-soft);
}

.alert-success, .flash-success {
  background: rgba(46,204,113,.14);
  border-color: rgba(46,204,113,.35);
}

.alert-error, .flash-error, .alert.danger {
  background: rgba(255,107,107,.14);
  border-color: rgba(255,107,107,.35);
}

.alert-warning, .flash-warning {
  background: rgba(241,196,15,.14);
  border-color: rgba(241,196,15,.35);
}

.alert-info, .flash-info {
  background: rgba(39,170,225,.14);
  border-color: rgba(39,170,225,.35);
}

.flash-stack {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

/* --------------------------------
   Key-Value Lists
   -------------------------------- */
.kv {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
}

.kv .k {
  min-width: 140px;
  color: var(--muted);
}

.kv .v {
  flex: 1;
}

.meta-list {
  display: grid;
  gap: 10px;
}

.meta-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.meta-row.no-border {
  border-bottom: 0;
  padding-bottom: 0;
}

.meta-key {
  color: var(--muted);
  font-size: 13px;
}

.meta-value {
  font-weight: 700;
}

/* --------------------------------
   Empty States
   -------------------------------- */
.empty-state {
  padding: 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  text-align: center;
}

.kwsm-empty-state {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 32px 20px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.02);
}

.kwsm-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: rgba(39,170,225,.10);
  color: var(--info);
}

.kwsm-empty-title {
  margin: 0;
  font-size: 20px;
}

.kwsm-empty-actions {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --------------------------------
   Modals
   -------------------------------- */
.modal-backdrop,
.kwsm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(6px);
  z-index: 60;
}

.modal,
.kwsm-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 70;
}

.modal.hidden,
.kwsm-modal.hidden {
  display: none;
}

.modal-dialog,
.kwsm-modal-content {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  background: rgba(18,25,36,.98);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 80px rgba(0,0,0,.50);
  overflow: hidden;
}

.modal-header,
.modal-body,
.modal-footer {
  padding: 16px 18px;
}

.modal-header {
  border-bottom: 1px solid var(--border-soft);
}

.modal-footer {
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

/* --------------------------------
   Auth Pages
   -------------------------------- */
.auth-shell {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
}

.auth-container {
  max-width: 520px;
  margin: 0 auto;
}

.auth-card {
  margin-inline: auto;
}

/* --------------------------------
   Activity Feed
   -------------------------------- */
.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.activity-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

.activity-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.activity-item-time {
  font-size: .82rem;
  color: var(--muted);
}

/* --------------------------------
   Breadcrumb
   -------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-item:not(:last-child)::before {
  content: "/";
  order: 2;
  color: rgba(255,255,255,.30);
  margin-inline-start: 2px;
}

.breadcrumb-item a {
  color: var(--muted);
}

.breadcrumb-item a:hover {
  color: var(--text);
}

.breadcrumb-item.is-current span {
  color: #fff;
}

/* --------------------------------
   Page Headers
   -------------------------------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.page-eyebrow {
  color: var(--info);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.page-head-note {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

.page-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* --------------------------------
   Top Navigation
   -------------------------------- */
.topbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
}

.nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-link {
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
}

.nav-link:hover {
  border-color: rgba(39,170,225,.45);
}

.brand {
  font-weight: 800;
  letter-spacing: .5px;
}

.brand-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 12px;
  color: var(--muted);
}

.spacer {
  flex: 1;
}

/* --------------------------------
   Search & Filters
   -------------------------------- */
.table-search-input,
.filter-input,
.filter-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-base);
  background: var(--bg-input);
  color: var(--text);
  outline: none;
}

.table-search-input:focus,
.filter-input:focus,
.filter-select:focus {
  border-color: rgba(39,170,225,.5);
  box-shadow: var(--shadow-focus);
}

.advanced-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.filters-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

/* --------------------------------
   Code Blocks
   -------------------------------- */
pre, .codebox {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-input);
  border: 1px solid var(--border-base);
  padding: 12px;
  border-radius: var(--radius-lg);
  color: var(--text);
}

.codebox-scroll {
  max-height: 220px;
  overflow: auto;
}

/* --------------------------------
   Utilities
   -------------------------------- */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hr {
  height: 1px;
  background: var(--border-soft);
  margin: 14px 0;
}

/* --------------------------------
   Responsive Breakpoints
   -------------------------------- */
@media (max-width: 1180px) {
  .stats-grid-admin,
  .dashboard-grid-charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .app-shell {
    display: block;
  }

  .app-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform .22s ease;
    width: 280px;
    max-width: 86vw;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
  }

  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: inline-block;
    border: 1px solid var(--border-soft);
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    cursor: pointer;
    width: auto;
    margin: 0;
  }

  .app-content {
    padding: 16px 0;
  }

  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .stats-grid,
  .stats-grid-admin,
  .grid,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .table-stack-mobile thead {
    display: none;
  }

  .table-stack-mobile,
  .table-stack-mobile tbody,
  .table-stack-mobile tr,
  .table-stack-mobile td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .table-stack-mobile tr {
    margin-bottom: 12px;
  }

  .table-stack-mobile td {
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 8px;
  }

  .table-stack-mobile td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
  }

  .inline-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .container {
    padding: 0 14px;
  }

  .page-head {
    align-items: flex-start;
  }

  .page-actions,
  .card-actions {
    width: 100%;
  }

  .page-actions .btn,
  .card-actions .btn {
    flex: 1 1 auto;
  }

  .meta-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .form-row,
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }

  .table-toolbar {
    padding: 12px;
  }

  .table-toolbar-search,
  .table-toolbar-actions,
  .bulk-toolbar-actions,
  .bulk-select {
    width: 100%;
    max-width: none;
  }

  .table-toolbar-actions .btn,
  .bulk-toolbar-actions .btn {
    width: 100%;
    text-align: center;
  }

  .card-head-row {
    align-items: stretch;
  }

  .auth-shell {
    min-height: auto;
  }

  .dashboard-grid,
  .dashboard-cards,
  .stats-grid-admin,
  .dashboard-highlight-strip {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------
   UI-08 Monitoring Overview
   -------------------------------- */
.dashboard-card-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dashboard-panel-head,
.chart-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.monitoring-page {
  display: grid;
  gap: 18px;
}

.monitoring-hero-grid,
.monitoring-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);
  gap: 16px;
}

.monitoring-hero {
  position: relative;
  overflow: hidden;
}

.monitoring-hero::after {
  content: "";
  position: absolute;
  inset: auto auto -40px -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,170,225,.18), rgba(39,170,225,0));
  pointer-events: none;
}

.monitoring-hero-top,
.monitoring-feed-top,
.monitoring-meta-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.monitoring-hero-title {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
  margin: 4px 0 0;
}

.monitoring-status-cluster {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.monitoring-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.monitoring-meta-item {
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
}

.monitoring-meta-label {
  color: var(--muted);
  font-size: 12px;
}

.monitoring-context-note,
.monitoring-inline-alert {
  margin-top: 16px;
}

.monitoring-kpi-stack {
  display: grid;
  gap: 10px;
}

.monitoring-kpi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
}

.monitoring-kpi-row span {
  color: var(--muted);
}

.monitoring-kpi-row strong {
  font-size: 18px;
}

.monitoring-alert-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.monitoring-alert-pill {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.monitoring-alert-pill span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.monitoring-alert-pill strong {
  font-size: 18px;
}

.monitoring-alert-pill.tone-info { border-right: 4px solid var(--info); }
.monitoring-alert-pill.tone-warning { border-right: 4px solid var(--warning); }
.monitoring-alert-pill.tone-danger { border-right: 4px solid var(--danger); }
.monitoring-alert-pill.tone-neutral { border-right: 4px solid var(--border-base); }

.monitoring-feed-list {
  display: grid;
  gap: 10px;
}

.monitoring-feed-item {
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
}

.monitoring-feed-title {
  margin-inline-start: 8px;
}

.monitoring-feed-time,
.monitoring-feed-copy,
.monitoring-meta-list .meta-key,
.monitoring-meta-list .meta-value {
  font-size: 13px;
}

.monitoring-feed-time,
.monitoring-feed-copy {
  color: var(--muted);
}

.monitoring-summary-cards .dashboard-card {
  min-height: 132px;
}

@media (max-width: 1180px) {
  .monitoring-hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-alert-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .monitoring-hero-grid,
  .monitoring-grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .monitoring-hero-meta,
  .monitoring-alert-strip {
    grid-template-columns: 1fr;
  }

  .monitoring-hero-top,
  .monitoring-feed-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .monitoring-status-cluster {
    justify-content: flex-start;
  }
}

/* UI-08 Batch 2 — Peer Health Table + Filters */
.monitoring-filter-shell {
  border: 1px solid rgba(106,44,134,.12);
}
.monitoring-advanced-filters {
  display: grid;
  gap: 14px;
}
.monitoring-filter-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.monitoring-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.monitoring-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(106,44,134,.08);
  color: #4d2267;
  font-size: 12px;
  font-weight: 700;
}
.monitoring-filter-chip.is-muted {
  background: rgba(35,31,32,.06);
  color: rgba(35,31,32,.7);
}
.monitoring-health-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.monitoring-health-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(39,170,225,.07);
  border: 1px solid rgba(39,170,225,.12);
}
.monitoring-health-pill span {
  color: rgba(35,31,32,.72);
  font-size: 12px;
}
.monitoring-health-pill strong {
  font-size: 18px;
}
.monitor-health-table .monitor-peer-cell {
  display: grid;
  gap: 4px;
}
.monitor-peer-main {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.monitor-peer-id {
  color: rgba(35,31,32,.55);
  font-size: 12px;
}
.monitor-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(35,31,32,.07);
  font-weight: 700;
}
.monitor-counter.has-signal {
  background: rgba(39,170,225,.12);
  color: #0b668c;
}
.monitor-counter.has-alert {
  background: rgba(195,59,59,.12);
  color: #9f2020;
}
.monitor-table-subtext {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(35,31,32,.62);
}
@media (max-width: 768px) {
  .monitoring-filter-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .monitoring-filter-footer .page-actions {
    width: 100%;
  }
}

.monitoring-trends-grid {
  margin-top: 1.25rem;
}

.monitoring-insight-grid {
  align-items: stretch;
}

.monitoring-ranked-list .metric-row-compact {
  align-items: center;
  gap: 0.9rem;
}

.monitoring-ranked-list .metric-value {
  white-space: nowrap;
}

/* UI-08 Batch 4 — Peer Details Upgrade */
.monitor-peer-page {
  gap: 18px;
}

.monitor-peer-hero {
  border: 1px solid rgba(106,44,134,.10);
}

.monitor-peer-caption {
  color: rgba(35,31,32,.62);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.monitor-peer-timeline {
  display: grid;
  gap: 12px;
}

.monitor-peer-timeline-item {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
}

.monitor-peer-timeline-meta {
  color: var(--muted);
  font-size: 12px;
}

.monitor-peer-timeline-main {
  display: grid;
  gap: 8px;
}

@media (max-width: 720px) {
  .monitor-peer-timeline-item {
    grid-template-columns: 1fr;
  }
}

/* UI-08 Batch 5 — Polish, consistency, export refinement */
.monitoring-export-card {
  border: 1px solid rgba(106,44,134,.10);
}

.monitoring-export-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.monitoring-export-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.monitoring-export-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.monitoring-export-grid label {
  display: grid;
  gap: 8px;
}

.monitoring-export-grid label span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(35,31,32,.68);
}

.monitoring-export-note {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

.monitoring-export-grid .page-actions {
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .monitoring-export-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .monitoring-export-grid {
    grid-template-columns: 1fr;
  }

  .monitoring-export-actions,
  .monitoring-export-grid .page-actions {
    width: 100%;
  }

  .monitoring-export-actions .btn,
  .monitoring-export-grid .page-actions .btn {
    width: 100%;
  }
}

/* UI-09 Batch 1 — Alert Inbox Foundation */
.alert-center-page .page-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.alert-filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.alert-filter-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.alert-filter-actions .btn {
  min-width: 132px;
}

.cell-title {
  font-weight: 700;
}

.table-cell-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.alert-center-page .table td {
  vertical-align: top;
}

@media (max-width: 1180px) {
  .alert-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .alert-filter-grid {
    grid-template-columns: 1fr;
  }

  .alert-filter-actions {
    align-items: stretch;
  }

  .alert-filter-actions .btn {
    width: 100%;
  }
}

.kv-list{display:flex;flex-direction:column;gap:10px}
.kv-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.kv-row span{opacity:.75}
.kv-row strong{font-weight:700;text-align:end}
.code-shell{border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(6,13,28,.55)}
.code-shell pre{margin:0;padding:16px;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.grid.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width: 980px){.grid.cols-2{grid-template-columns:1fr}.kv-row{flex-direction:column}.kv-row strong{text-align:start}}

/* UI-09 Batch 3 — Incident Actions Workflow */
.incident-inline-actions{margin-top:.5rem;flex-wrap:wrap}
.incident-inline-form{display:inline-flex;margin:0}
.incident-action-grid{display:flex;gap:.65rem;flex-wrap:wrap}
.incident-note-form textarea{width:100%;min-height:112px;border-radius:16px;border:1px solid rgba(120,170,255,.18);background:rgba(7,18,40,.72);color:var(--text);padding:.9rem 1rem;resize:vertical}
.incident-note-form textarea:focus{outline:none;border-color:rgba(39,170,225,.55);box-shadow:0 0 0 3px rgba(39,170,225,.12)}
.incident-notes-list{display:grid;gap:.9rem}
.incident-note-item{padding:1rem 1.05rem;border:1px solid rgba(120,170,255,.12);border-radius:18px;background:rgba(9,20,44,.55)}
.incident-note-head{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin-bottom:.5rem}
@media (max-width: 720px){
  .incident-action-grid,.incident-inline-actions{gap:.45rem}
  .incident-inline-form .btn{width:100%}
}

/* UI-09 Batch 4 — safe dashboard + monitor incident widgets */
.dashboard-action-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.dashboard-incident-grid{margin-top:1rem}
.dashboard-incident-panel{overflow:hidden}
.dashboard-incident-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1rem 0 1.2rem}
.dashboard-incident-summary-compact{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:.85rem 0 1rem}
.dashboard-incident-stat{padding:1rem 1.1rem;border:1px solid rgba(102,190,255,.14);border-radius:18px;background:rgba(10,20,35,.45)}
.dashboard-incident-stat-critical{border-color:rgba(255,107,107,.28)}
.dashboard-incident-stat-warning{border-color:rgba(255,211,77,.28)}
.dashboard-incident-stat-info{border-color:rgba(76,201,240,.24)}
.dashboard-incident-label{display:block;font-size:.82rem;opacity:.82;margin-bottom:.35rem}
.dashboard-incident-value{font-size:1.5rem;line-height:1;font-weight:800}
.dashboard-incident-list{display:flex;flex-direction:column;gap:.85rem}
.dashboard-incident-list-compact{gap:.7rem}
.dashboard-incident-item{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.05rem;border:1px solid rgba(102,190,255,.12);border-radius:18px;background:rgba(7,15,26,.42)}
.dashboard-incident-item-compact{padding:.85rem .95rem}
.dashboard-incident-item-main{min-width:0;flex:1}
.dashboard-incident-item-top{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:.5rem}
.dashboard-incident-item-title{font-weight:700;margin-bottom:.3rem}
.dashboard-incident-item-copy{font-size:.9rem;opacity:.84;line-height:1.5}
.dashboard-incident-item-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start}
.dashboard-panel-incident-workspace .dashboard-action-row{justify-content:flex-end}
@media (max-width: 900px){
  .dashboard-incident-item{flex-direction:column}
  .dashboard-incident-item-links{justify-content:flex-start}
}

/* UI-09 Batch 5 polish */
.alert-badge-info { background:#3498db;color:#fff;padding:2px 6px;border-radius:4px }
.alert-badge-warning { background:#f1c40f;color:#000;padding:2px 6px;border-radius:4px }
.alert-badge-critical { background:#e74c3c;color:#fff;padding:2px 6px;border-radius:4px }
.alert-badge-ack { background:#9b59b6;color:#fff;padding:2px 6px;border-radius:4px }
.alert-badge-resolved { background:#2ecc71;color:#fff;padding:2px 6px;border-radius:4px }

.alert-empty {
    padding:40px;
    text-align:center;
    color:#777;
    font-size:14px;
}

.alert-export-btn {
    margin-left:10px;
}

/* UI-10 Batch 1 — NOC scaffold */
.body-noc .app-content > .container { max-width: 1500px; }
.noc-shell { background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(12,18,31,.98)); color: #e5edf8; }
.noc-shell .page-head h1,
.noc-shell .page-head-note,
.noc-shell .dashboard-panel-title,
.noc-shell .dashboard-panel-copy,
.noc-shell .metric-label,
.noc-shell .metric-value,
.noc-shell .table,
.noc-shell .dashboard-highlight-label,
.noc-shell .dashboard-highlight-value,
.noc-shell .dashboard-highlight-meta { color: inherit; }
.noc-hero { display:grid; grid-template-columns: 1.8fr 1fr; gap:1rem; align-items:stretch; }
.noc-hero, .noc-panel { background: rgba(255,255,255,.03); border:1px solid rgba(148,163,184,.16); border-radius: 18px; }
.noc-hero { padding:1.25rem; }
.noc-hero-title { margin:.35rem 0 .5rem; font-size:1.8rem; line-height:1.2; }
.noc-hero-side { display:grid; gap:.75rem; justify-items:end; }
.noc-sync-pill { padding:.5rem .8rem; border-radius:999px; font-weight:700; border:1px solid rgba(255,255,255,.08); }
.noc-sync-pill-fresh { background: rgba(16,185,129,.16); color:#c6f6dc; }
.noc-sync-pill-lagging { background: rgba(245,158,11,.16); color:#fde68a; }
.noc-sync-pill-stale { background: rgba(239,68,68,.18); color:#fecaca; }
.noc-sync-pill-unknown { background: rgba(59,130,246,.16); color:#bfdbfe; }
.noc-hero-kpis { width:100%; display:grid; gap:.6rem; }
.noc-hero-kpis > div { display:flex; justify-content:space-between; gap:1rem; background: rgba(255,255,255,.04); padding:.75rem .9rem; border-radius:14px; }
.noc-summary-cards .dashboard-card { min-height: 132px; }
.noc-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1rem; }
.noc-grid-wide { grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr); align-items:start; }
.noc-panel { padding:1rem; }
.noc-panel-span-2 { grid-column: span 1; }
.noc-alert-list { display:grid; gap:.75rem; }
.noc-alert-item { padding:.85rem .95rem; border-radius:14px; background: rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.12); }
.noc-alert-item-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.noc-alert-title { font-weight:700; margin-bottom:.2rem; }
.noc-alert-copy, .noc-alert-age { color:#a9b8cf; font-size:.9rem; }
.noc-inline-alert { margin-top:.85rem; }
.noc-table th, .noc-table td { white-space: nowrap; }
.noc-highlight-strip { margin-top: 0; }
@media (max-width: 1180px) {
  .noc-hero, .noc-grid, .noc-grid-wide { grid-template-columns: 1fr; }
  .noc-hero-side { justify-items:start; }
}

/* UI-10 Batch 2 — NOC wallboard mode */
.body-noc .app-content { background: #070b14; }
.body-noc .app-footer { display:none; }
.body-noc .container { max-width: 100%; padding: 1rem 1rem 1.25rem; }
.body-noc .page-head { margin-bottom: .9rem; }
.body-noc .page-head-note { color: #99a9c2; }
.body-noc .app-header { position: sticky; top: 0; z-index: 20; }

.noc-wallboard { min-height: calc(100vh - 2rem); background: radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 30%), linear-gradient(180deg, #0b1220 0%, #09101c 100%); border: 1px solid rgba(100,116,139,.24); box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.noc-page-batch2 .page-section { margin-top: 1rem; }
.noc-status-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding: 1rem 1.15rem; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.14); }
.noc-status-title { margin: .3rem 0 .25rem; font-size: 1.75rem; line-height: 1.1; }
.noc-status-copy { margin: 0; color: #a8b6cc; max-width: 72ch; }
.noc-refresh-pill { display:inline-flex; align-items:center; gap:.65rem; padding:.7rem .9rem; border-radius: 999px; background: rgba(15,23,42,.92); border:1px solid rgba(59,130,246,.24); color:#dce7f7; font-weight:700; }
.noc-refresh-pill.is-paused { opacity:.72; border-color: rgba(245,158,11,.35); }
.noc-refresh-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.55); animation: nocPulse 1.8s infinite; }
.noc-top-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:.85rem; }
.noc-top-tile { border-radius: 18px; padding: 1rem 1.05rem; border:1px solid rgba(148,163,184,.14); background: rgba(255,255,255,.035); min-height: 126px; display:flex; flex-direction:column; justify-content:space-between; }
.noc-top-tile.is-emphasis { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 35px rgba(0,0,0,.18); }
.noc-top-tile-label { color:#98a8c2; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.noc-top-tile-value { font-size: 2rem; font-weight:800; line-height:1; }
.noc-top-tile-meta { color:#b9c7dc; font-size:.92rem; }
.noc-top-tile-ok { background: linear-gradient(180deg, rgba(16,185,129,.16), rgba(6,95,70,.12)); }
.noc-top-tile-warning { background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(120,53,15,.12)); }
.noc-top-tile-danger { background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(127,29,29,.12)); }
.noc-top-tile-info { background: linear-gradient(180deg, rgba(59,130,246,.18), rgba(30,64,175,.12)); }

.noc-grid-layout { display:grid; grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr); gap:1rem; align-items:start; }
.noc-panel-alerts, .noc-panel-health { min-height: 550px; }
.noc-panel-feed { grid-column: 1 / -1; min-height: 300px; }
.noc-panel-head-tight { margin-bottom: .9rem; }
.noc-alert-priority-strip { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.7rem; margin-bottom: .9rem; }
.noc-priority-chip { border-radius: 16px; padding: .8rem .9rem; border:1px solid rgba(148,163,184,.14); background: rgba(255,255,255,.035); display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.noc-priority-chip strong { font-size: 1.5rem; }
.noc-priority-chip-danger { background: rgba(127,29,29,.22); }
.noc-priority-chip-warning { background: rgba(120,53,15,.2); }
.noc-priority-chip-info { background: rgba(30,64,175,.18); }
.noc-priority-chip.is-live { box-shadow: 0 0 0 1px rgba(255,255,255,.05); animation: nocGlow 1.7s infinite; }
.noc-priority-list, .noc-mini-feed, .noc-activity-list, .noc-endpoint-list { display:grid; gap:.7rem; }
.noc-priority-item, .noc-activity-item, .noc-endpoint-item { display:block; padding:.9rem .95rem; border-radius: 16px; background: rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.13); color: inherit; text-decoration: none; }
.noc-priority-item-danger { border-color: rgba(248,113,113,.32); }
.noc-priority-item-warning { border-color: rgba(251,191,36,.3); }
.noc-priority-item.is-pulse { animation: nocGlow 1.6s infinite; }
.noc-priority-item-top, .noc-endpoint-item-top, .noc-activity-item-top, .noc-mini-feed-item { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.noc-priority-item-title, .noc-endpoint-item-title, .noc-activity-item-title { margin-top:.45rem; font-weight:800; }
.noc-priority-item-copy, .noc-endpoint-item-meta, .noc-activity-item-meta, .noc-priority-item-age, .noc-endpoint-item-time, .noc-activity-item-time, .noc-mini-feed-age { color:#9fb0c8; font-size:.92rem; }
.noc-priority-item-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.8rem; }
.noc-mini-feed-item { padding: .55rem .65rem; border-radius: 12px; background: rgba(255,255,255,.025); }

.noc-metric-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.7rem; margin-bottom: .9rem; }
.noc-metric-card { border-radius: 16px; padding: .8rem .9rem; border:1px solid rgba(148,163,184,.14); background: rgba(255,255,255,.03); }
.noc-metric-card-label { color:#9fb0c8; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
.noc-metric-card-value { font-size: 1.55rem; font-weight:800; }
.noc-metric-card-ok { background: rgba(6,95,70,.16); }
.noc-metric-card-warning { background: rgba(120,53,15,.18); }
.noc-metric-card-danger { background: rgba(127,29,29,.18); }
.noc-metric-card-info { background: rgba(30,64,175,.16); }
.noc-interface-table-wrap { overflow:auto; }
.noc-interface-table tbody tr.is-active { background: rgba(16,185,129,.08); }
.noc-interface-table td, .noc-interface-table th { border-color: rgba(148,163,184,.12); }

.noc-feed-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1rem; }
.noc-feed-column { min-height: 100%; }
.noc-feed-column-head { margin-bottom: .7rem; color:#dbe7f6; font-weight:800; letter-spacing:.02em; }

@keyframes nocPulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@keyframes nocGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,.2); }
  50% { box-shadow: 0 0 0 6px rgba(248,113,113,.07); }
}

@media (max-width: 1360px) {
  .noc-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noc-grid-layout { grid-template-columns: 1fr; }
  .noc-panel-alerts, .noc-panel-health { min-height: auto; }
}

@media (max-width: 900px) {
  .body-noc .container { padding: .75rem; }
  .noc-status-bar, .noc-feed-grid, .noc-metric-grid, .noc-alert-priority-strip { grid-template-columns: 1fr; }
  .noc-status-bar { display:grid; }
  .noc-top-grid { grid-template-columns: 1fr; }
}

/* UI-10 Batch 3 — NOC density + incident emphasis */
.noc-page-batch3 .page-head { margin-bottom:.65rem; }
.noc-grid-layout-batch3 { grid-template-columns: minmax(420px, .96fr) minmax(460px, 1.04fr); }
.noc-highlight-band { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.75rem; }
.noc-highlight-band-item { border-radius:16px; padding:.85rem .95rem; border:1px solid rgba(148,163,184,.14); background:rgba(255,255,255,.028); }
.noc-highlight-band-item-ok { background:rgba(6,95,70,.16); }
.noc-highlight-band-item-warning { background:rgba(120,53,15,.18); }
.noc-highlight-band-item-danger { background:rgba(127,29,29,.18); }
.noc-highlight-band-item-info { background:rgba(30,64,175,.16); }
.noc-highlight-band-label { color:#9fb0c8; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.noc-highlight-band-value { margin-top:.2rem; font-size:1.3rem; font-weight:800; }
.noc-highlight-band-meta { margin-top:.25rem; color:#b3c1d5; font-size:.86rem; }

.noc-spotlight { margin-bottom:.9rem; padding:1rem 1.05rem; border-radius:18px; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.noc-spotlight-danger { background:linear-gradient(180deg, rgba(127,29,29,.34), rgba(69,10,10,.22)); border-color:rgba(248,113,113,.32); }
.noc-spotlight-warning { background:linear-gradient(180deg, rgba(120,53,15,.28), rgba(67,20,7,.2)); border-color:rgba(251,191,36,.28); }
.noc-spotlight-ok { background:linear-gradient(180deg, rgba(6,95,70,.26), rgba(2,44,34,.18)); border-color:rgba(16,185,129,.26); }
.noc-spotlight-info { background:linear-gradient(180deg, rgba(30,64,175,.24), rgba(15,23,42,.18)); border-color:rgba(96,165,250,.22); }
.noc-spotlight.is-live { animation:nocGlow 1.4s infinite; }
.noc-spotlight-top,.noc-alert-event-top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.noc-spotlight-age,.noc-alert-event-time { color:#d7e0ee; font-size:.9rem; }
.noc-spotlight-title { margin-top:.55rem; font-size:1.35rem; font-weight:800; line-height:1.15; }
.noc-spotlight-entity { margin-top:.25rem; color:#d9e5f5; font-weight:700; }
.noc-spotlight-copy { margin:.5rem 0 .85rem; color:#d6dfed; line-height:1.55; }
.noc-spotlight-stats { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.65rem; margin-bottom:.85rem; }
.noc-spotlight-stats > div { padding:.7rem .8rem; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); }
.noc-spotlight-stats span { display:block; color:#a9bad2; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.noc-spotlight-stats strong { display:block; margin-top:.25rem; font-size:1.35rem; }
.noc-spotlight-actions { display:flex; gap:.55rem; flex-wrap:wrap; }

.noc-priority-list-dense .noc-priority-item { padding:.8rem .85rem; }
.noc-severity-columns { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.75rem; margin-top:.9rem; }
.noc-severity-column { padding:.75rem .8rem; border-radius:16px; background:rgba(255,255,255,.028); border:1px solid rgba(148,163,184,.12); }
.noc-severity-column-head { margin-bottom:.55rem; font-size:.85rem; font-weight:800; color:#dce7f7; }
.noc-severity-empty { color:#8da1bc; font-size:.9rem; }
.noc-mini-feed-item-danger { border:1px solid rgba(248,113,113,.18); }
.noc-mini-feed-item-warning { border:1px solid rgba(251,191,36,.18); }
.noc-mini-feed-item-info { border:1px solid rgba(96,165,250,.18); }

.noc-metric-card-meta { margin-top:.3rem; color:#aabbd1; font-size:.84rem; }
.noc-pressure-bars { display:grid; gap:.65rem; margin-bottom:.85rem; }
.noc-pressure-bar-row { display:grid; grid-template-columns: 160px minmax(0,1fr) 64px; gap:.7rem; align-items:center; }
.noc-pressure-bar-label { color:#cfe0f4; font-size:.88rem; }
.noc-pressure-bar-track { position:relative; height:10px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.noc-pressure-bar-fill { position:absolute; inset:0 auto 0 0; border-radius:999px; }
.noc-pressure-bar-fill.tone-ok { background:linear-gradient(90deg, rgba(16,185,129,.95), rgba(74,222,128,.72)); }
.noc-pressure-bar-fill.tone-warning { background:linear-gradient(90deg, rgba(245,158,11,.95), rgba(251,191,36,.72)); }
.noc-pressure-bar-fill.tone-info { background:linear-gradient(90deg, rgba(59,130,246,.95), rgba(96,165,250,.72)); }
.noc-pressure-bar-value { text-align:right; color:#dfe9f8; font-weight:700; }
.noc-attention-breakdown { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.65rem; margin-bottom:.85rem; }
.noc-attention-chip { padding:.7rem .8rem; border-radius:14px; border:1px solid rgba(148,163,184,.13); background:rgba(255,255,255,.03); display:flex; justify-content:space-between; gap:.65rem; align-items:center; }
.noc-attention-chip-ok { background:rgba(6,95,70,.14); }
.noc-attention-chip-warning { background:rgba(120,53,15,.16); }
.noc-attention-chip-danger { background:rgba(127,29,29,.16); }
.noc-attention-chip-info { background:rgba(30,64,175,.14); }
.noc-active-context { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.65rem; margin-bottom:.9rem; }
.noc-active-context-item { padding:.75rem .8rem; border-radius:14px; background:rgba(255,255,255,.028); border:1px solid rgba(148,163,184,.12); }
.noc-active-context-item span { display:block; color:#9fb0c8; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.noc-active-context-item strong { display:block; margin-top:.28rem; color:#eff5ff; }

.noc-feed-grid-batch3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.noc-activity-item-danger,.noc-alert-event-item-danger { border-color:rgba(248,113,113,.26); }
.noc-activity-item-warning,.noc-alert-event-item-warning { border-color:rgba(251,191,36,.24); }
.noc-activity-item-info,.noc-alert-event-item-info { border-color:rgba(96,165,250,.22); }
.noc-activity-item-ok,.noc-alert-event-item-ok { border-color:rgba(16,185,129,.22); }
.noc-alert-event-list { display:grid; gap:.7rem; }
.noc-alert-event-item { padding:.85rem .9rem; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid rgba(148,163,184,.12); }
.noc-alert-event-title { margin-top:.45rem; font-weight:800; }
.noc-alert-event-meta { margin-top:.22rem; color:#9fb0c8; font-size:.9rem; }

@media (max-width: 1480px) {
  .noc-grid-layout-batch3 { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  .noc-highlight-band, .noc-feed-grid-batch3, .noc-severity-columns, .noc-attention-breakdown, .noc-active-context { grid-template-columns: 1fr 1fr; }
  .noc-pressure-bar-row { grid-template-columns: 1fr; }
  .noc-pressure-bar-value { text-align:left; }
}
@media (max-width: 760px) {
  .noc-highlight-band, .noc-feed-grid-batch3, .noc-severity-columns, .noc-attention-breakdown, .noc-active-context, .noc-spotlight-stats { grid-template-columns: 1fr; }
}

/* ==============================================
   UI-10 Batch 4 — Live Signals + Visual Urgency
   ============================================== */
.noc-page-batch4 .page-head {
  margin-bottom: 12px;
}

.noc-status-bar-batch4 {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, .95fr);
  gap: 14px;
  align-items: stretch;
}

.noc-status-side {
  display: grid;
  gap: 10px;
}

.noc-smart-refresh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(11, 18, 32, .92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.noc-smart-refresh-copy {
  display: grid;
  gap: 2px;
  flex: 1;
}

.noc-smart-refresh-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(201,214,227,.72);
}

.noc-smart-refresh-meta {
  font-size: 15px;
  font-weight: 700;
  color: #edf4ff;
}

.noc-live-spinner {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.16);
  border-top-color: currentColor;
  animation: noc-spin 1s linear infinite;
}

.noc-smart-refresh-ok { color: #58d68d; }
.noc-smart-refresh-warning { color: #f4c542; }
.noc-smart-refresh-danger { color: #ff6b6b; }
.noc-smart-refresh.is-paused { opacity: .62; }
.noc-smart-refresh.is-refreshing {
  box-shadow: 0 0 0 1px rgba(39,170,225,.35), 0 0 22px rgba(39,170,225,.18);
}

.noc-focus-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(15, 23, 42, .88);
  color: #d6e3f4;
}

.noc-focus-banner-critical {
  border-color: rgba(255, 107, 107, .45);
  background: linear-gradient(135deg, rgba(75, 16, 24, .92), rgba(18, 18, 29, .94));
  box-shadow: 0 0 0 1px rgba(255, 107, 107, .18), 0 0 24px rgba(255, 107, 107, .12);
}

.noc-focus-banner-warning {
  border-color: rgba(244, 197, 66, .36);
  background: linear-gradient(135deg, rgba(64, 46, 6, .92), rgba(18, 18, 29, .94));
}

.noc-focus-badge {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.08);
}

.noc-focus-copy {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(227,236,246,.86);
}

.noc-page-batch4 .noc-top-grid,
.noc-page-batch4 .noc-metric-grid,
.noc-page-batch4 .noc-feed-grid-batch3 {
  gap: 10px;
}

.noc-top-tile-head,
.noc-metric-card-head,
.noc-inline-label,
.noc-table-label,
.noc-feed-column-head,
.noc-spotlight-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.noc-signal-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 10px;
  background: rgba(148,163,184,.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

.noc-signal-dot-live {
  background: #58d68d;
  box-shadow: 0 0 10px rgba(88,214,141,.45);
}

.noc-signal-dot-unstable {
  background: #f4c542;
  box-shadow: 0 0 10px rgba(244,197,66,.38);
}

.noc-signal-dot-down {
  background: #ff6b6b;
  box-shadow: 0 0 14px rgba(255,107,107,.42);
}

.noc-signal-dot.is-live,
.noc-priority-chip.is-live .noc-signal-dot,
.noc-priority-item.is-pulse .noc-signal-dot,
.noc-spotlight.is-live .noc-signal-dot {
  animation: noc-pulse 1.5s ease-in-out infinite;
}

.noc-page-batch4 .noc-spotlight {
  position: relative;
  overflow: hidden;
}

.noc-page-batch4 .noc-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.05), transparent);
  transform: translateX(-120%);
  animation: noc-scan 5.5s linear infinite;
}

.noc-page-batch4 .noc-spotlight-danger,
.noc-page-batch4 .noc-priority-item-danger.is-pulse,
.noc-page-batch4 .noc-alert-event-item-danger {
  box-shadow: 0 0 0 1px rgba(255,107,107,.24), 0 0 24px rgba(255,107,107,.12);
}

.noc-page-batch4 .noc-spotlight-warning,
.noc-page-batch4 .noc-priority-item-warning.is-pulse {
  box-shadow: 0 0 0 1px rgba(244,197,66,.22), 0 0 20px rgba(244,197,66,.08);
}

.noc-operator-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.noc-page-batch4.noc-focus-mode-critical .noc-panel-health,
.noc-page-batch4.noc-focus-mode-critical .noc-panel-feed {
  opacity: .58;
  filter: saturate(.74);
}

.noc-page-batch4.noc-focus-mode-warning .noc-panel-feed {
  opacity: .8;
}

.noc-page-batch4.noc-focus-mode-critical [data-noc-focus-primary] {
  transform: scale(1.01);
}

.noc-page-batch4.is-refreshing .noc-shell {
  box-shadow: 0 0 0 1px rgba(39,170,225,.28), 0 0 28px rgba(39,170,225,.12);
}

.noc-page-batch4 .noc-panel,
.noc-page-batch4 .noc-top-tile,
.noc-page-batch4 .noc-metric-card,
.noc-page-batch4 .noc-attention-chip,
.noc-page-batch4 .noc-activity-item,
.noc-page-batch4 .noc-endpoint-item,
.noc-page-batch4 .noc-alert-event-item,
.noc-page-batch4 .noc-priority-item {
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.noc-page-batch4 .noc-panel:hover,
.noc-page-batch4 .noc-top-tile:hover,
.noc-page-batch4 .noc-metric-card:hover {
  transform: translateY(-1px);
}

@keyframes noc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes noc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .72; }
}

@keyframes noc-scan {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (max-width: 1200px) {
  .noc-status-bar-batch4 {
    grid-template-columns: 1fr;
  }

  .noc-page-batch4.noc-focus-mode-critical .noc-panel-health,
  .noc-page-batch4.noc-focus-mode-critical .noc-panel-feed,
  .noc-page-batch4.noc-focus-mode-warning .noc-panel-feed {
    opacity: 1;
    filter: none;
  }
}

/* --------------------------------
   UI-10 Batch 5 — NOC hardening
   -------------------------------- */
.noc-page-batch5 [data-noc-refresh-region] {
  min-height: 0;
}

.noc-page-batch5 .noc-status-bar,
.noc-page-batch5 .noc-top-grid,
.noc-page-batch5 .noc-grid-layout,
.noc-page-batch5 .noc-highlight-band {
  contain: layout paint;
}

.noc-page-batch5 .noc-shell {
  transition: transform 420ms ease, opacity 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}

.noc-page-batch5 .noc-shell[data-burnin-step="0"] { transform: translate(0, 0); }
.noc-page-batch5 .noc-shell[data-burnin-step="1"] { transform: translate(1px, 0); }
.noc-page-batch5 .noc-shell[data-burnin-step="2"] { transform: translate(1px, 1px); }
.noc-page-batch5 .noc-shell[data-burnin-step="3"] { transform: translate(0, 1px); }

.noc-page-batch5 .noc-shell.is-hidden-paused {
  opacity: .98;
}

.noc-page-batch5 .noc-shell.is-refreshing [data-noc-refresh-region] {
  opacity: .96;
}

.noc-page-batch5 .noc-shell.is-stale {
  box-shadow: inset 0 0 0 1px rgba(255,107,107,.2), 0 10px 30px rgba(0,0,0,.35);
}

.noc-page-batch5 .noc-smart-refresh {
  position: relative;
}

.noc-page-batch5 .noc-smart-refresh.is-fetching {
  border-color: rgba(39,170,225,.45);
  box-shadow: 0 0 0 1px rgba(39,170,225,.18);
}

.noc-page-batch5 .noc-smart-refresh.is-stale {
  border-color: rgba(255,107,107,.4);
}

.noc-stale-indicator {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,107,107,.25);
  background: rgba(255,107,107,.08);
  color: #ffd7d7;
}

.noc-stale-copy,
.noc-stale-age {
  font-size: 12px;
  color: #ffd7d7;
}

.noc-stale-age {
  font-weight: 800;
  letter-spacing: .04em;
}

[data-collapse-limit] > .is-collapsed-hidden {
  display: none !important;
}

.noc-more-toggle {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}

.noc-page-batch5 .noc-activity-list,
.noc-page-batch5 .noc-endpoint-list,
.noc-page-batch5 .noc-alert-event-list,
.noc-page-batch5 .noc-severity-columns {
  min-height: 120px;
}

.noc-page-batch5 .noc-feed-column,
.noc-page-batch5 .noc-panel,
.noc-page-batch5 .noc-top-tile,
.noc-page-batch5 .noc-highlight-band-item {
  min-height: 0;
}

.noc-page-batch5 .noc-panel,
.noc-page-batch5 .noc-feed-column {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .noc-page-batch5 .noc-shell,
  .noc-page-batch5 .noc-smart-refresh,
  .noc-page-batch5 .noc-panel,
  .noc-page-batch5 .noc-top-tile {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------
   UI-14 Batch 1 — Client layout foundation
   -------------------------------- */
.client-portal {
  background:
    radial-gradient(circle at top right, rgba(106,44,134,.24), transparent 34%),
    radial-gradient(circle at top left, rgba(39,170,225,.15), transparent 28%),
    linear-gradient(180deg, #080c12 0%, #0b1118 100%);
}
 
.client-shell {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

.client-main-shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.client-sidebar-backdrop {
  display: none;
}

.client-container {
  max-width: 1320px;
}

.client-page-stage {
  display: grid;
  gap: 18px;
}

.client-page-stage-guest {
  max-width: 720px;
  margin: 24px auto 0;
}

.client-header-shell {
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(9,14,22,.90), rgba(9,14,22,.76));
  backdrop-filter: blur(12px);
}

.client-header-primary,
.client-header-secondary {
  gap: 14px;
}

.client-header-brand {
  display: grid;
  gap: 5px;
}

.client-header-eyebrow {
  color: rgba(159,176,195,.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.client-header-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

.client-header-subtitle {
  color: var(--muted);
  font-size: 13px;
}

.client-header-summary-card {
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.client-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.client-summary-line + .client-summary-line {
  margin-top: 10px;
}

.client-summary-label {
  color: var(--muted);
  font-size: 12px;
}

.client-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.client-header-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
}

.client-header-logout:hover {
  border-color: rgba(39,170,225,.4);
  background: rgba(39,170,225,.10);
}

.client-sidebar {
  width: 320px;
  flex: 0 0 320px;
  padding: 18px;
  border-left: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(9,14,22,.96), rgba(12,19,29,.94)),
    radial-gradient(circle at top, rgba(106,44,134,.24), transparent 38%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.03);
}

.client-sidebar-topbar {
  display: none;
}

.client-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}

.client-sidebar-logo {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .08em;
  background: linear-gradient(135deg, rgba(106,44,134,.96), rgba(39,170,225,.78));
  color: #fff;
  box-shadow: 0 12px 24px rgba(39,170,225,.16);
}

.client-sidebar-brand-copy {
  display: grid;
  gap: 4px;
}

.client-sidebar-brand-copy strong {
  font-size: 16px;
}

.client-sidebar-brand-copy span {
  color: var(--muted);
  font-size: 12px;
}

.client-sidebar-panel {
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(39,170,225,.16);
  background: linear-gradient(180deg, rgba(39,170,225,.12), rgba(39,170,225,.04));
}

.client-sidebar-panel-label,
.client-sidebar-section-label {
  color: rgba(159,176,195,.82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.client-sidebar-panel-value {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
}

.client-sidebar-panel-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.client-sidebar-nav {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.client-sidebar-link {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.client-sidebar-link:hover,
.client-sidebar-link.active {
  transform: translateY(-1px);
  border-color: rgba(39,170,225,.36);
  background: linear-gradient(180deg, rgba(39,170,225,.12), rgba(39,170,225,.04));
  box-shadow: 0 12px 24px rgba(0,0,0,.16);
}

.client-sidebar-link-label {
  font-weight: 800;
}

.client-sidebar-link-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.client-sidebar-quick-actions {
  margin-top: 18px;
}

.client-sidebar-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.client-content {
  padding: 28px 0 30px;
}

.client-footer-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(6,9,14,.54);
}

.client-footer-copy {
  display: grid;
  gap: 4px;
}

.client-footer-copy strong {
  font-size: 13px;
}

.client-footer-copy span,
.client-footer-meta {
  color: var(--muted);
  font-size: 12px;
}

.client-sidebar-toggle {
  display: none;
}

.client-sidebar-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 980px) {
  .client-shell.has-client-sidebar {
    display: block;
  }

  .client-sidebar-toggle,
  .client-sidebar-topbar {
    display: flex;
    align-items: center;
  }

  .client-sidebar-toggle {
    justify-content: center;
  }

  .client-sidebar-topbar {
    justify-content: flex-end;
    margin-bottom: 14px;
  }

  .client-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(90vw, 340px);
    max-width: 340px;
    height: 100vh;
    transform: translateX(105%);
    transition: transform 180ms ease;
    z-index: 60;
  }

  .client-sidebar.is-open {
    transform: translateX(0);
  }

  .client-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    border: 0;
    padding: 0;
    background: rgba(2,6,12,.56);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .client-sidebar-open .client-sidebar-backdrop {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .client-header-shell {
    padding: 16px 16px 18px;
    align-items: flex-start;
  }

  .client-header-title {
    font-size: 20px;
  }

  .client-header-summary-card {
    min-width: 100%;
  }

  .client-content {
    padding-top: 20px;
  }

  .client-footer-shell {
    padding-inline: 16px;
  }
}

@media (max-width: 640px) {
  .client-header-actions,
  .client-header-secondary,
  .client-sidebar-quick-grid {
    width: 100%;
  }

  .client-header-actions .btn,
  .client-header-actions .client-header-logout,
  .client-sidebar-quick-grid .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .client-header-shell,
  .client-footer-shell {
    padding-inline: 14px;
  }

  .client-container {
    padding-inline: 14px;
  }
}

/* --------------------------------
   UI-15 Batch 1 — Client Dashboard
   -------------------------------- */
.client-dashboard-shell .page-head{align-items:flex-start}
.client-dashboard-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);gap:1rem;padding:1.15rem;border:1px solid rgba(106,44,134,.14);border-radius:24px;background:linear-gradient(135deg,rgba(106,44,134,.14),rgba(39,170,225,.08));box-shadow:0 20px 50px rgba(15,23,42,.10)}
.client-dashboard-overline{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.45rem}
.client-dashboard-hero-title{margin:0 0 .55rem;font-size:2rem;line-height:1.15}
.client-dashboard-hero-copy{margin:0;color:var(--muted);max-width:62ch;line-height:1.8}
.client-dashboard-status-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1rem}
.client-dashboard-status-copy{color:var(--muted);font-size:.94rem}
.client-dashboard-contact-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.client-dashboard-mini-chip{display:flex;flex-direction:column;gap:.2rem;padding:.85rem 1rem;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(106,44,134,.12);min-width:160px}
.client-dashboard-mini-chip span{font-size:.78rem;color:var(--muted)}
.client-dashboard-mini-chip strong{font-size:.94rem;color:var(--text)}
.client-dashboard-hero-side{display:grid;gap:.85rem}
.client-dashboard-plan-card{padding:1rem 1.05rem;border-radius:20px;background:rgba(255,255,255,.82);border:1px solid rgba(106,44,134,.12);box-shadow:0 12px 30px rgba(15,23,42,.08)}
.client-dashboard-plan-card-soft{background:rgba(255,255,255,.64)}
.client-dashboard-plan-label{font-size:.8rem;color:var(--muted);margin-bottom:.35rem}
.client-dashboard-plan-value{font-size:1.35rem;font-weight:800;line-height:1.25}
.client-dashboard-plan-meta,.client-dashboard-plan-note{color:var(--muted);line-height:1.7;margin-top:.35rem}
.client-dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.client-dashboard-stat-card{padding:1rem 1.05rem;border-radius:20px;border:1px solid rgba(148,163,184,.22);background:#fff;box-shadow:0 12px 24px rgba(15,23,42,.06)}
.client-dashboard-stat-card-success{border-color:rgba(34,197,94,.22)}
.client-dashboard-stat-card-warning{border-color:rgba(245,158,11,.25)}
.client-dashboard-stat-card-danger{border-color:rgba(239,68,68,.22)}
.client-dashboard-stat-card-info{border-color:rgba(59,130,246,.20)}
.client-dashboard-stat-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.45rem}
.client-dashboard-stat-value{font-size:1.6rem;font-weight:800;line-height:1.2;margin-bottom:.45rem}
.client-dashboard-stat-value-small{font-size:1.2rem}
.client-dashboard-stat-meta{color:var(--muted);line-height:1.65}
.client-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.client-dashboard-grid-bottom{padding-top:0}
.client-dashboard-panel{padding:1rem 1.05rem;border-radius:22px;border:1px solid rgba(148,163,184,.18);background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.06)}
.client-dashboard-panel-soft{background:linear-gradient(180deg,rgba(106,44,134,.06),rgba(39,170,225,.04))}
.client-dashboard-panel-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.client-dashboard-panel-title{margin:0 0 .3rem;font-size:1.1rem}
.client-dashboard-panel-copy{color:var(--muted);line-height:1.7}
.client-usage-block{display:grid;gap:1rem}
.client-usage-row{padding:.95rem 1rem;border:1px solid rgba(148,163,184,.18);border-radius:18px;background:rgba(248,250,252,.85)}
.client-usage-top{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:.7rem}
.client-usage-progress{height:10px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden}
.client-usage-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--p),var(--c))}
.client-usage-meta{margin-top:.55rem;color:var(--muted);font-size:.92rem}
.client-dashboard-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.client-dashboard-quick-card{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.05rem;border-radius:18px;border:1px solid rgba(106,44,134,.12);background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,250,252,.95));text-decoration:none;color:inherit;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.client-dashboard-quick-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(15,23,42,.10);border-color:rgba(106,44,134,.25)}
.client-dashboard-quick-card strong{font-size:1rem}
.client-dashboard-quick-card span{color:var(--muted);line-height:1.65}
.client-dashboard-timeline{display:grid;gap:.85rem}
.client-dashboard-timeline-item{padding:.95rem 1rem;border-radius:18px;border:1px solid rgba(148,163,184,.18);background:rgba(248,250,252,.85);display:flex;flex-direction:column;gap:.3rem}
.client-dashboard-timeline-item span{color:var(--muted);line-height:1.7}
.client-dashboard-note-stack{display:grid;gap:.85rem}
.client-dashboard-note-card{padding:.95rem 1rem;border-radius:18px;border:1px solid rgba(106,44,134,.10);background:rgba(255,255,255,.75);display:flex;flex-direction:column;gap:.3rem}
.client-dashboard-note-card span{color:var(--muted);line-height:1.7}
@media (max-width: 1180px){
  .client-dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 980px){
  .client-dashboard-hero,.client-dashboard-grid,.client-dashboard-quick-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .client-dashboard-hero{padding:1rem}
  .client-dashboard-hero-title{font-size:1.6rem}
  .client-dashboard-stat-grid{grid-template-columns:1fr}
  .client-dashboard-contact-row{flex-direction:column}
  .client-dashboard-mini-chip{min-width:0}
}

/* UI-15 Batch 1 — Client Dashboard Theme Hotfix */
.client-dashboard-shell{color:#e7eefb}
.client-dashboard-shell .card{background:transparent;box-shadow:none;border:none}
.client-dashboard-shell .page-head-title,
.client-dashboard-shell .page-head-subtitle,
.client-dashboard-shell .page-head-meta,
.client-dashboard-shell .page-head-overline{color:#e7eefb}
.client-dashboard-hero{border-color:rgba(39,170,225,.16);background:linear-gradient(135deg,rgba(10,18,34,.92),rgba(15,32,60,.84));box-shadow:0 22px 48px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04)}
.client-dashboard-overline{color:rgba(178,210,244,.72)}
.client-dashboard-hero-title,
.client-dashboard-plan-value,
.client-dashboard-stat-value,
.client-dashboard-panel-title,
.client-dashboard-quick-card strong,
.client-dashboard-timeline-item,
.client-dashboard-note-card{color:#fff}
.client-dashboard-hero-copy,
.client-dashboard-status-copy,
.client-dashboard-plan-meta,
.client-dashboard-plan-note,
.client-dashboard-stat-meta,
.client-dashboard-panel-copy,
.client-dashboard-quick-card span,
.client-dashboard-timeline-item span, 
.client-dashboard-note-card span,
.client-usage-meta{color:rgba(214,228,245,.78)}
.client-dashboard-mini-chip,
.client-dashboard-plan-card,
.client-dashboard-stat-card,
.client-dashboard-panel,
.client-usage-row,
.client-dashboard-quick-card,
.client-dashboard-timeline-item,
.client-dashboard-note-card{backdrop-filter:blur(10px)}
.client-dashboard-mini-chip{background:rgba(255,255,255,.06);border-color:rgba(130,170,216,.18)}
.client-dashboard-mini-chip span{color:rgba(178,210,244,.72)}
.client-dashboard-mini-chip strong{color:#f8fbff}
.client-dashboard-plan-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border-color:rgba(130,170,216,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.client-dashboard-plan-card-soft{background:linear-gradient(180deg,rgba(106,44,134,.16),rgba(39,170,225,.10))}
.client-dashboard-plan-label,
.client-dashboard-stat-kicker{color:rgba(178,210,244,.72)}
.client-dashboard-stat-card{border-color:rgba(130,170,216,.16);background:linear-gradient(180deg,rgba(12,22,40,.92),rgba(9,16,31,.96));box-shadow:0 14px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);color:#eef5ff}
.client-dashboard-panel{border-color:rgba(130,170,216,.16);background:linear-gradient(180deg,rgba(12,22,40,.92),rgba(9,16,31,.96));box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.03);color:#eef5ff}
.client-dashboard-panel-soft{background:linear-gradient(180deg,rgba(24,34,59,.92),rgba(14,22,42,.96))}
.client-usage-row{border-color:rgba(130,170,216,.14);background:rgba(255,255,255,.04)}
.client-usage-top{color:#f5f9ff}
.client-usage-progress{background:rgba(130,170,216,.14)}
.client-dashboard-quick-card{border-color:rgba(39,170,225,.18);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));color:#eef5ff}
.client-dashboard-quick-card:hover{box-shadow:0 16px 30px rgba(0,0,0,.24);border-color:rgba(39,170,225,.34)}
.client-dashboard-timeline-item{border-color:rgba(130,170,216,.14);background:rgba(255,255,255,.04)}
.client-dashboard-note-card{border-color:rgba(106,44,134,.20);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03))}

/* --------------------------------
   UI-16 Batch 1 — Client Billing Experience
   -------------------------------- */
.client-billing-page .page-section {
  margin-bottom: 18px;
}

.client-billing-shell {
  position: relative;
  overflow: hidden;
}

.client-billing-overview,
.client-billing-panel,
.client-payment-card,
.client-plan-card,
.client-proof-card,
.client-empty-state {
  border: 1px solid rgba(116, 157, 201, .14);
  background:
    linear-gradient(180deg, rgba(10, 21, 41, .96), rgba(6, 16, 32, .98)),
    radial-gradient(circle at top right, rgba(106, 44, 134, .18), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 16px 32px rgba(0,0,0,.20);
}

.client-billing-overview,
.client-billing-panel,
.client-empty-state {
  border-radius: 24px;
  padding: 22px;
}

.client-billing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, .8fr);
  gap: 16px;
  align-items: stretch;
}

.client-billing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: rgba(133, 196, 255, .88);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.client-billing-hero-copy h2,
.client-payment-spotlight-copy h2,
.client-plan-title {
  margin: 0 0 8px;
  color: #f7fbff;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
}

.client-billing-hero-copy p,
.client-payment-spotlight-copy p,
.client-plan-subtitle,
.client-billing-stat-meta,
.client-form-help,
.client-note-item,
.client-proof-date,
.client-payment-meta-item span,
.client-mini-stat span {
  color: rgba(207, 223, 242, .78);
}

.client-billing-mini-stats,
.client-current-plan-box {
  display: grid;
  gap: 12px;
  align-content: start;
}

.client-mini-stat,
.client-current-plan-box {
  border-radius: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(67, 169, 255, .16);
  background: linear-gradient(180deg, rgba(12, 27, 54, .86), rgba(8, 19, 38, .96));
}

.client-mini-stat strong,
.client-current-plan-box strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.client-mini-stat.is-accent,
.client-current-plan-box {
  box-shadow: 0 0 0 1px rgba(39,170,225,.14), 0 14px 30px rgba(39,170,225,.08);
}

.client-billing-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.client-billing-stats-grid-compact {
  margin-top: 0;
}

.client-billing-stat-card {
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(116, 157, 201, .12);
  background: linear-gradient(180deg, rgba(12, 28, 55, .84), rgba(8, 18, 37, .96));
}

.client-billing-stat-label,
.client-billing-inline-label,
.client-payment-ref,
.client-proof-id,
.client-plan-price-currency {
  color: rgba(146, 192, 239, .9);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.client-billing-stat-value,
.client-plan-price-amount,
.client-payment-plan,
.client-payment-meta-item strong,
.client-payment-reference-box strong {
  color: #fff;
  font-weight: 800;
}

.client-billing-stat-value {
  margin-top: 8px;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.1;
}

.client-billing-stat-value-small {
  font-size: clamp(18px, 2.6vw, 24px);
}

.client-billing-section-head,
.client-payment-card-head,
.client-plan-card-head,
.client-proof-card,
.client-payment-spotlight {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.client-payment-spotlight,
.client-billing-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 18px;
}

.client-payment-spotlight {
  align-items: stretch;
  border-radius: 24px;
  padding: 22px;
  border: 1px solid rgba(116, 157, 201, .14);
  background:
    radial-gradient(circle at top right, rgba(39,170,225,.16), transparent 36%),
    linear-gradient(180deg, rgba(11, 24, 46, .95), rgba(6, 15, 30, .98));
}

.client-payment-spotlight-side {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.client-payment-reference-box {
  width: 100%;
  border-radius: 20px;
  padding: 14px 16px;
  border: 1px dashed rgba(133, 196, 255, .28);
  background: rgba(5, 14, 28, .42);
}

.client-payment-reference-box span {
  display: block;
  margin-bottom: 8px;
  color: rgba(200, 220, 243, .76);
}

.client-payment-list,
.client-proof-list,
.client-note-list {
  display: grid;
  gap: 14px;
}

.client-payment-card,
.client-plan-card,
.client-proof-card {
  border-radius: 22px;
  padding: 18px;
}

.client-payment-plan {
  margin: 6px 0 0;
  font-size: 22px;
}

.client-payment-meta-grid,
.client-plan-capacity-grid,
.client-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.client-plan-capacity-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-payment-meta-item,
.client-plan-capacity-item {
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}

.client-payment-meta-item span,
.client-plan-capacity-item span,
.client-current-plan-box span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

.client-payment-card-actions,
.client-plan-price-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.client-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.client-plan-price-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.client-plan-price-copy {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.client-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: #f6fbff;
}

.client-status-pill.is-pending {
  background: rgba(255, 196, 84, .14);
  border-color: rgba(255, 196, 84, .22);
  color: #ffe6a5;
}

.client-status-pill.is-submitted,
.client-status-pill.is-current {
  background: rgba(39,170,225,.14);
  border-color: rgba(39,170,225,.25);
  color: #a8e6ff;
}

.client-status-pill.is-approved {
  background: rgba(82, 215, 145, .14);
  border-color: rgba(82, 215, 145, .22);
  color: #b7f4d1;
}

.client-status-pill.is-rejected {
  background: rgba(255, 107, 107, .14);
  border-color: rgba(255, 107, 107, .22);
  color: #ffc1c1;
}

.client-status-pill.is-need-info {
  background: rgba(126, 123, 255, .16);
  border-color: rgba(126, 123, 255, .24);
  color: #d8d4ff;
}

.client-billing-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.client-billing-step {
  position: relative;
  padding: 16px 16px 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}

.client-billing-step::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.client-billing-step strong,
.client-billing-step span {
  display: block;
}

.client-billing-step strong {
  margin-bottom: 6px;
  color: #fff;
}

.client-billing-step.is-complete::before {
  background: #52d791;
}

.client-billing-step.is-active::before {
  background: #27aae1;
}

.client-instructions-card,
.client-admin-message-card {
  margin-top: 16px;
  border-radius: 20px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.client-instructions-card pre {
  margin: 12px 0 0;
  white-space: pre-wrap;
  font-family: inherit;
  color: #edf6ff;
}

.client-admin-message-card.is-rejected {
  border-color: rgba(255,107,107,.2);
  background: rgba(255,107,107,.08);
}

.client-admin-message-card.is-info {
  border-color: rgba(39,170,225,.22);
  background: rgba(39,170,225,.08);
}

.client-admin-message-body,
.client-admin-message-extra {
  margin-top: 10px;
  color: #eef6ff;
}

.client-admin-message-extra {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.client-proof-form label {
  display: block;
  margin-bottom: 8px;
  color: #edf6ff;
  font-weight: 700;
}

.client-proof-form input[type="file"],
.client-proof-form input[type="text"],
.client-proof-form input:not([type]) {
  width: 100%;
}

.client-proof-card {
  align-items: center;
}

.client-empty-state {
  text-align: center;
}

.client-empty-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(39,170,225,.12);
  color: #9bdcf6;
  font-size: 28px;
  font-weight: 900;
}

.client-note-item {
  border-radius: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.03);
}

@media (max-width: 1180px) {
  .client-billing-stats-grid,
  .client-plan-grid,
  .client-billing-two-column,
  .client-payment-spotlight,
  .client-billing-hero {
    grid-template-columns: 1fr;
  }

  .client-billing-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .client-billing-overview,
  .client-billing-panel,
  .client-empty-state,
  .client-payment-card,
  .client-plan-card,
  .client-proof-card,
  .client-payment-spotlight {
    padding: 16px;
    border-radius: 18px;
  }

  .client-billing-stats-grid,
  .client-payment-meta-grid,
  .client-plan-capacity-grid,
  .client-form-grid {
    grid-template-columns: 1fr;
  }

  .client-plan-price-card,
  .client-payment-card-head,
  .client-plan-card-head,
  .client-proof-card {
    flex-direction: column;
    align-items: stretch;
  }

  .client-payment-card-actions,
  .client-plan-price-list {
    flex-direction: column;
  }

  .client-payment-card-actions .btn,
  .client-plan-price-card .btn {
    width: 100%;
  }
}

/* --------------------------------
   UI-17 Batch 1 — Client devices experience
   -------------------------------- */
.client-devices-shell .page-head,
.client-device-flow .page-head {
  align-items: flex-start;
}

.client-devices-card,
.client-device-flow-card {
  background: linear-gradient(180deg, rgba(6,12,20,.90), rgba(9,17,28,.82));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 50px rgba(0,0,0,.24);
}

.client-devices-overline {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(159,176,195,.78);
  margin-bottom: 8px;
}

.client-devices-hero,
.client-device-flow-intro,
.client-router-verify-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr);
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(106,44,134,.22), transparent 42%),
    radial-gradient(circle at top left, rgba(39,170,225,.14), transparent 34%),
    linear-gradient(180deg, rgba(11,19,31,.96), rgba(10,17,27,.86));
}

.client-devices-hero-title,
.client-device-flow-title {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.15;
  color: #f4f8ff;
}

.client-devices-hero-text,
.client-device-flow-copy {
  margin: 0;
  color: rgba(214,227,244,.8);
  line-height: 1.85;
  max-width: 68ch;
}

.client-devices-hero-status,
.client-device-flow-pill-wrap,
.client-router-verify-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  align-content: flex-start;
}

.client-devices-hero-note,
.client-device-flow-note {
  color: rgba(214,227,244,.74);
  font-size: 13px;
}

.client-devices-hero-side {
  display: grid;
  gap: 12px;
}

.client-devices-summary-card,
.client-devices-metric-card,
.client-devices-filter-wrap,
.client-devices-pending-card,
.client-devices-item-card,
.client-device-choice-card,
.client-router-stage-card,
.client-router-verify-card,
.client-device-success-card,
.client-device-info-item {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
}

.client-devices-summary-card {
  padding: 18px;
  display: grid;
  gap: 6px;
}

.client-devices-summary-card span,
.client-devices-metric-label,
.client-devices-kv span,
.client-devices-pending-meta,
.client-devices-item-subtitle,
.client-device-choice-kicker,
.client-router-stage-card span,
.client-router-verify-card span {
  color: rgba(159,176,195,.82);
  font-size: 13px;
}

.client-devices-summary-card strong,
.client-devices-metric-value,
.client-router-stage-card strong,
.client-router-verify-card strong {
  color: #f4f8ff;
  font-size: 28px;
  line-height: 1.15;
}

.client-devices-summary-card small,
.client-devices-metric-note,
.client-router-stage-card small,
.client-router-verify-card small {
  color: rgba(214,227,244,.74);
  line-height: 1.75;
}

.client-devices-summary-card-soft {
  background: linear-gradient(180deg, rgba(39,170,225,.09), rgba(255,255,255,.04));
}

.client-devices-metrics,
.client-device-choice-grid,
.client-router-stage-grid,
.client-router-verify-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.client-devices-metric-card,
.client-router-stage-card,
.client-router-verify-card {
  padding: 18px;
  display: grid;
  gap: 8px;
}

.client-devices-filter-wrap,
.client-devices-pending-wrap,
.client-devices-list-wrap,
.client-router-verify-table-wrap {
  margin-top: 16px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(10,17,27,.9), rgba(8,15,24,.84));
}

.client-devices-filters input,
.client-devices-filters select,
.client-device-flow-form input,
.client-device-flow-form select,
.client-router-script-box {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: #edf5ff;
}

.client-devices-filters input::placeholder,
.client-device-flow-form input::placeholder,
.client-router-script-box::placeholder {
  color: rgba(159,176,195,.6);
}

.client-devices-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.client-devices-section-head h3,
.client-device-choice-card h3 {
  margin: 0 0 6px;
  color: #f4f8ff;
}

.client-devices-section-head p,
.client-device-choice-card p {
  margin: 0;
  color: rgba(214,227,244,.74);
  line-height: 1.75;
}

.client-devices-pending-grid,
.client-devices-grid {
  display: grid;
  gap: 14px;
}

.client-devices-pending-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.client-devices-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.client-devices-pending-card,
.client-devices-item-card,
.client-device-choice-card,
.client-device-success-card,
.client-device-info-item {
  padding: 18px;
}

.client-devices-pending-top,
.client-devices-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.client-devices-pending-top strong,
.client-devices-item-title {
  color: #f4f8ff;
  font-size: 20px;
  line-height: 1.2;
}

.client-devices-pending-actions,
.client-devices-item-actions,
.client-device-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.client-devices-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.client-devices-kv {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  display: grid;
  gap: 6px;
}

.client-devices-kv strong,
.client-devices-note,
.client-devices-results {
  color: #edf5ff;
}

.client-devices-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(39,170,225,.08);
  border: 1px solid rgba(39,170,225,.15);
  line-height: 1.7;
}

.client-devices-empty-state {
  background: linear-gradient(180deg, rgba(10,17,27,.92), rgba(8,15,24,.84));
  border: 1px solid rgba(255,255,255,.08);
}

.client-device-choice-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: rgba(214,227,244,.82);
}

.client-device-choice-list li {
  position: relative;
  padding-inline-start: 18px;
}

.client-device-choice-list li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 0;
  color: #27aae1;
}

.client-router-script-box {
  width: 100%;
  min-height: 280px;
  margin-top: 10px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(4,9,16,.9);
}

.client-device-success-card {
  display: grid;
  gap: 16px;
}

.client-device-info-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.client-device-info-item {
  display: grid;
  gap: 6px;
}

.client-device-info-item strong {
  color: #f4f8ff;
}

.client-device-info-item span {
  color: rgba(214,227,244,.78);
  line-height: 1.75;
}

@media (max-width: 1200px) {
  .client-devices-metrics,
  .client-router-stage-grid,
  .client-router-verify-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .client-devices-hero,
  .client-device-flow-intro,
  .client-router-verify-hero,
  .client-device-info-strip,
  .client-device-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .client-devices-hero-title,
  .client-device-flow-title {
    font-size: 24px;
  }

  .client-devices-metrics,
  .client-router-stage-grid,
  .client-router-verify-grid,
  .client-devices-kv-grid {
    grid-template-columns: 1fr;
  }

  .client-devices-section-head,
  .client-devices-pending-top,
  .client-devices-item-head {
    flex-direction: column;
  }

  .client-devices-item-badges,
  .client-device-success-actions,
  .client-devices-item-actions {
    width: 100%;
  }

  .client-devices-item-actions .btn,
  .client-device-success-actions .btn,
  .client-devices-pending-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* --------------------------------
   UI-18 — Polish
   -------------------------------- */
.client-toast-stack{
  position:sticky;
  top:14px;
  z-index:35;
  display:grid;
  gap:10px;
  margin-bottom:16px;
}

.client-toast{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(130,170,216,.18);
  background:linear-gradient(180deg,rgba(10,21,41,.96),rgba(6,16,32,.98));
  box-shadow:0 16px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(12px);
}

.client-toast-copy{line-height:1.75;color:#eef5ff}
.client-toast-close{
  width:32px;height:32px;flex:0 0 32px;border-radius:10px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);color:#eef5ff;cursor:pointer;font-size:22px;line-height:1;
}
.client-toast-close:hover{background:rgba(255,255,255,.10);border-color:rgba(39,170,225,.28)}
.client-toast.is-leaving{opacity:0;transform:translateY(-6px);transition:opacity .2s ease, transform .2s ease}

.client-portal .btn,
.client-portal .client-sidebar-link,
.client-portal .client-header-logout,
.client-portal .table tbody tr,
.client-portal .field input,
.client-portal .field select,
.client-portal .field textarea,
.client-portal .client-payment-card,
.client-portal .client-plan-card,
.client-portal .client-device-card,
.client-portal .client-router-pending-card,
.client-portal .client-router-verify-card,
.client-portal .client-device-flow-card,
.client-portal .client-audit-item{
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease;
}

.client-portal .btn:focus-visible,
.client-portal .client-sidebar-link:focus-visible,
.client-portal .client-header-logout:focus-visible,
.client-portal .field input:focus,
.client-portal .field select:focus,
.client-portal .field textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(39,170,225,.18);
}

.client-portal form.is-submitting{pointer-events:none}
.client-portal .btn.is-loading,
.client-portal input[type=submit].is-loading{
  position:relative;
  pointer-events:none;
  opacity:.88;
}
.client-portal .btn.is-loading::before,
.client-portal input[type=submit].is-loading::before{
  content:'';
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  display:inline-block;
  vertical-align:middle;
  margin-inline-start:0;
  margin-inline-end:8px;
  animation:clientSpin .7s linear infinite;
}
.client-portal .btn.is-loading .btn-loading-label{display:inline-flex;align-items:center}

@keyframes clientSpin{to{transform:rotate(360deg)}}

.field-help{
  margin-top:7px;
  color:rgba(214,228,245,.70);
  font-size:12px;
  line-height:1.7;
}

.client-auth-shell{color:#e7eefb}
.client-auth-card,
.client-onboard-card{
  border:1px solid rgba(130,170,216,.16);
  background:linear-gradient(180deg,rgba(10,21,41,.96),rgba(6,16,32,.98));
  box-shadow:0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03);
}
.client-auth-actions{padding-top:6px}
.client-auth-note-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  border-color:rgba(130,170,216,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
}
.client-auth-note-item{display:grid;gap:6px}
.client-auth-note-item strong{color:#fff}
.client-auth-note-item span{color:rgba(214,228,245,.76);line-height:1.75}

.client-audit-shell{
  border:1px solid rgba(116,157,201,.14);
  background:linear-gradient(180deg,rgba(10,21,41,.96),rgba(6,16,32,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 16px 32px rgba(0,0,0,.20);
}
.client-audit-overview{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(180px,.7fr);
  gap:16px;
  align-items:stretch;
  padding:22px;
  border:1px solid rgba(116,157,201,.14);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(10,18,34,.92),rgba(15,32,60,.84));
}
.client-audit-overline{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(178,210,244,.72);margin-bottom:.45rem}
.client-audit-title{margin:0 0 .55rem;font-size:1.7rem;line-height:1.18;color:#fff}
.client-audit-copy{margin:0;color:rgba(214,228,245,.76);line-height:1.8;max-width:64ch}
.client-audit-stat{
  border-radius:22px;padding:18px 20px;border:1px solid rgba(39,170,225,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  display:flex;flex-direction:column;justify-content:center;gap:8px
}
.client-audit-stat span{color:rgba(178,210,244,.72);font-size:.84rem}
.client-audit-stat strong{font-size:2rem;line-height:1;color:#fff}
.client-audit-list{display:grid;gap:14px}
.client-audit-item{
  padding:18px 20px;border-radius:20px;border:1px solid rgba(130,170,216,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
}
.client-audit-item:hover{transform:translateY(-1px);border-color:rgba(39,170,225,.24);box-shadow:0 14px 30px rgba(0,0,0,.20)}
.client-audit-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.client-audit-item-time{color:rgba(178,210,244,.72);font-size:.83rem;margin-bottom:6px}
.client-audit-item-title{margin:0;font-size:1.05rem;color:#fff}
.client-audit-item-copy{margin:0;color:rgba(214,228,245,.76);line-height:1.8}
.client-empty-state-tight{padding:28px 22px}
.client-empty-state-icon{font-size:30px;line-height:1;margin-bottom:4px}

@media (max-width: 980px){
  .client-toast-stack{top:10px}
  .client-auth-note-grid,
  .client-audit-overview{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .client-toast{padding:12px 14px}
  .client-audit-item,
  .client-audit-overview{padding:16px}
}

@media (prefers-reduced-motion: reduce){
  .client-portal .btn,
  .client-portal .client-sidebar-link,
  .client-portal .client-header-logout,
  .client-portal .table tbody tr,
  .client-portal .field input,
  .client-portal .field select,
  .client-portal .field textarea,
  .client-portal .client-payment-card,
  .client-portal .client-plan-card,
  .client-portal .client-device-card,
  .client-portal .client-router-pending-card,
  .client-portal .client-router-verify-card,
  .client-portal .client-device-flow-card,
  .client-portal .client-audit-item,
  .client-toast,
  .client-toast.is-leaving,
  .client-portal .btn.is-loading::before,
  .client-portal input[type=submit].is-loading::before{
    transition:none !important;
    animation:none !important;
  }
}


/* --------------------------------
   UI-19 — Mobile Optimization
   -------------------------------- */
.client-portal,
.client-portal body {
  overflow-x: clip;
}

.client-shell,
.client-main-shell,
.client-content,
.client-page-stage,
.client-billing-page,
.client-devices-shell,
.client-device-flow,
.client-dashboard-shell,
.client-audit-page {
  min-width: 0;
}

.client-page-stage > .page,
.client-page-stage > .auth-shell,
.client-page-stage > .client-auth-shell {
  min-width: 0;
}

.client-sidebar-body-lock {
  overflow: hidden;
  touch-action: none;
}

.client-portal .page-head-actions,
.client-portal .page-head-actions .page-actions,
.client-portal .page-head .page-actions {
  max-width: 100%;
}

.client-billing-list-wrap,
.client-router-verify-table-wrap,
.client-device-flow-card,
.client-devices-card,
.client-billing-shell,
.client-audit-shell,
.client-dashboard-shell .card {
  overflow: hidden;
}

.client-portal .table-wrap,
.client-router-script-box,
.client-payment-reference-box,
.client-payment-proof-box,
.client-portal pre,
.client-portal code,
.client-portal .codebox {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.client-portal .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.client-portal .btn,
.client-portal .client-header-logout,
.client-portal .client-sidebar-link,
.client-portal .client-dashboard-quick-card,
.client-portal .client-payment-card,
.client-portal .client-plan-card,
.client-portal .client-devices-item-card,
.client-portal .client-devices-pending-card,
.client-portal .client-audit-item {
  min-width: 0;
}

.client-portal .client-dashboard-mini-chip strong,
.client-portal .client-payment-meta-item strong,
.client-portal .client-payment-reference-box strong,
.client-portal .client-devices-kv strong,
.client-portal .client-device-info-item strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.client-portal .page-head .btn,
.client-portal .page-actions .btn,
.client-portal .client-header-actions .btn,
.client-portal .client-header-actions .client-header-logout,
.client-portal .client-devices-item-actions .btn,
.client-portal .client-devices-pending-actions .btn,
.client-portal .client-device-success-actions .btn,
.client-portal .client-payment-card-actions .btn {
  white-space: normal;
}

@media (max-width: 980px) {
  .client-header-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .client-header-primary,
  .client-header-secondary,
  .client-header-brand {
    min-width: 0;
  }

  .client-header-secondary {
    width: 100%;
    justify-content: stretch;
  }

  .client-header-summary-card,
  .client-header-actions {
    width: 100%;
  }

  .client-sidebar {
    width: min(92vw, 360px);
    max-width: 360px;
    padding: 16px 14px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .client-content {
    padding-bottom: 22px;
  }

  .client-dashboard-shell .page-head,
  .client-devices-shell .page-head,
  .client-device-flow .page-head,
  .client-billing-page .page-head,
  .client-audit-page .page-head {
    gap: 12px;
  }

  .client-dashboard-hero,
  .client-billing-hero,
  .client-payment-spotlight,
  .client-billing-two-column,
  .client-devices-hero,
  .client-device-flow-intro,
  .client-router-verify-hero {
    grid-template-columns: 1fr !important;
  }

  .client-dashboard-hero-side,
  .client-billing-mini-stats,
  .client-payment-spotlight-side,
  .client-devices-hero-side {
    width: 100%;
  }

  .client-dashboard-stat-grid,
  .client-billing-stats-grid,
  .client-plan-grid,
  .client-devices-grid,
  .client-devices-pending-grid,
  .client-router-stage-grid,
  .client-router-verify-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-billing-stat-card,
  .client-dashboard-stat-card,
  .client-devices-metric-card,
  .client-router-verify-card,
  .client-router-stage-card {
    min-height: 100%;
  }

  .client-payment-card-head,
  .client-plan-card-head,
  .client-devices-section-head,
  .client-devices-item-head,
  .client-devices-pending-top,
  .client-audit-item-head {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .client-header-title {
    font-size: 18px;
    line-height: 1.25;
  }

  .client-header-subtitle,
  .client-sidebar-link-hint,
  .client-footer-copy span,
  .client-footer-meta {
    font-size: 12px;
  }

  .client-header-summary-card {
    padding: 14px;
  }

  .client-header-actions,
  .client-sidebar-quick-grid,
  .client-billing-stat-card,
  .client-devices-metric-card,
  .client-device-info-strip,
  .client-payment-meta-grid,
  .client-plan-capacity-grid,
  .client-form-grid,
  .client-devices-kv-grid,
  .client-dashboard-stat-grid,
  .client-billing-stats-grid,
  .client-plan-grid,
  .client-devices-grid,
  .client-devices-pending-grid,
  .client-router-stage-grid,
  .client-router-verify-grid,
  .client-dashboard-quick-grid,
  .client-dashboard-grid,
  .client-billing-two-column {
    grid-template-columns: 1fr !important;
  }

  .client-billing-section-head,
  .client-payment-card-head,
  .client-plan-card-head,
  .client-dashboard-panel-head,
  .client-audit-item-head {
    flex-direction: column;
  }

  .client-payment-card-actions,
  .client-device-success-actions,
  .client-devices-item-actions,
  .client-devices-pending-actions,
  .client-header-actions {
    width: 100%;
  }

  .client-payment-card-actions .btn,
  .client-device-success-actions .btn,
  .client-devices-item-actions .btn,
  .client-devices-pending-actions .btn,
  .client-header-actions .btn,
  .client-header-actions .client-header-logout {
    width: 100%;
    justify-content: center;
  }

  .client-billing-overview,
  .client-billing-panel,
  .client-empty-state,
  .client-payment-spotlight,
  .client-payment-card,
  .client-plan-card,
  .client-proof-card,
  .client-dashboard-hero,
  .client-dashboard-panel,
  .client-dashboard-stat-card,
  .client-devices-summary-card,
  .client-devices-metric-card,
  .client-devices-filter-wrap,
  .client-devices-pending-card,
  .client-devices-item-card,
  .client-device-choice-card,
  .client-device-success-card,
  .client-router-stage-card,
  .client-router-verify-card,
  .client-audit-overview,
  .client-audit-item,
  .client-auth-card,
  .client-onboard-card {
    padding: 16px;
    border-radius: 20px;
  }

  .client-dashboard-hero-title,
  .client-billing-hero-copy h2,
  .client-payment-spotlight-copy h2,
  .client-plan-title,
  .client-devices-hero-title,
  .client-device-flow-title,
  .client-audit-title {
    font-size: 24px;
  }

  .client-dashboard-contact-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .client-dashboard-mini-chip,
  .client-payment-reference-box,
  .client-mini-stat,
  .client-current-plan-box {
    min-width: 0;
    width: 100%;
  }

  .client-plan-price-card {
    flex-direction: column;
    align-items: stretch;
  }

  .client-plan-price-copy {
    justify-content: space-between;
    width: 100%;
  }

  .client-plan-price-card .btn {
    width: 100%;
    justify-content: center;
  }

  .client-proof-card,
  .client-payment-card,
  .client-plan-card,
  .client-devices-item-card,
  .client-devices-pending-card,
  .client-audit-item {
    gap: 12px;
  }

  .client-router-script-box {
    min-height: 220px;
    font-size: 12px;
  }

  .client-footer-shell {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 520px) {
  .client-container,
  .client-header-shell,
  .client-footer-shell {
    padding-inline: 12px;
  }

  .client-content {
    padding-top: 14px;
    padding-bottom: 18px;
  }

  .client-sidebar {
    width: 100vw;
    max-width: 100vw;
    border-left: 0;
    border-radius: 0;
  }

  .client-sidebar-brand,
  .client-sidebar-panel,
  .client-sidebar-link,
  .client-sidebar-quick-grid .btn {
    border-radius: 16px;
  }

  .client-sidebar-logo {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 15px;
  }

  .client-header-title {
    font-size: 17px;
  }

  .client-header-subtitle {
    line-height: 1.6;
  }

  .client-dashboard-overline,
  .client-billing-kicker,
  .client-devices-overline,
  .client-audit-overline {
    font-size: 11px;
    letter-spacing: .1em;
  }

  .client-dashboard-hero-title,
  .client-billing-hero-copy h2,
  .client-payment-spotlight-copy h2,
  .client-plan-title,
  .client-devices-hero-title,
  .client-device-flow-title,
  .client-audit-title {
    font-size: 22px;
  }

  .client-dashboard-stat-value,
  .client-billing-stat-value,
  .client-devices-metric-value,
  .client-audit-stat strong,
  .client-mini-stat strong,
  .client-current-plan-box strong {
    font-size: 22px;
  }

  .client-dashboard-panel-title,
  .client-devices-section-head h3,
  .client-billing-section-head .card-title,
  .client-audit-item-title {
    font-size: 16px;
  }

  .client-portal .page-head .page-actions,
  .client-portal .page-head-actions,
  .client-portal .page-head .btn,
  .client-portal .page-actions .btn {
    width: 100%;
  }

  .client-portal .page-head .btn,
  .client-portal .page-actions .btn {
    justify-content: center;
  }

  .client-dashboard-quick-card,
  .client-dashboard-timeline-item,
  .client-dashboard-note-card,
  .client-payment-meta-item,
  .client-plan-capacity-item,
  .client-devices-kv,
  .client-device-info-item {
    padding: 12px 14px;
    border-radius: 16px;
  }

  .client-toast-stack {
    top: 8px;
  }

  .client-toast {
    padding: 12px;
    border-radius: 16px;
  }
}


/* --------------------------------
   UI-20 — Accessibility
   -------------------------------- */
.skip-link {
  position: fixed;
  top: 14px;
  inset-inline-start: 14px;
  transform: translateY(-140%);
  padding: 12px 16px;
  border-radius: 14px;
  background: #f7fbff;
  color: #07111f;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
  z-index: 1000;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(123, 211, 255, .92);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(39,170,225,.18);
}

.client-portal :where(.page-head-note, .field-help, .client-header-subtitle, .client-sidebar-panel-note, .client-sidebar-link-hint, .client-footer-meta, .client-footer-copy span, .client-summary-label) {
  color: rgba(224, 235, 247, .88);
}

.client-portal :where(.client-header-eyebrow, .client-sidebar-panel-label, .client-sidebar-section-label, .client-dashboard-overline, .client-dashboard-stat-kicker, .client-billing-stat-label, .client-billing-inline-label, .client-payment-ref, .client-proof-id, .client-plan-price-currency) {
  color: rgba(167, 212, 255, .94);
}

.client-sidebar-link[aria-current="page"] {
  border-color: rgba(123, 211, 255, .52);
  box-shadow: inset 0 0 0 1px rgba(123, 211, 255, .18), 0 0 0 1px rgba(123, 211, 255, .10);
}

.client-sidebar-link[aria-current="page"] .client-sidebar-link-label {
  color: #ffffff;
}

.client-content:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* UI-21 — Final Client QA / Consistency Sweep */
.client-portal .page-head {
  align-items: flex-start;
  gap: 1rem;
}

.client-portal .page-eyebrow,
.client-header-eyebrow,
.client-billing-kicker,
.client-devices-overline,
.client-audit-overline,
.client-dashboard-overline {
  text-transform: none;
  letter-spacing: .04em;
}

.client-portal .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.client-portal .page-actions .btn,
.client-payment-card-actions .btn,
.client-device-success-actions .btn,
.client-header-actions .btn,
.client-sidebar-quick-grid .btn,
.client-auth-actions .btn {
  min-height: 42px;
}

.client-portal .page-head-note,
.client-portal .card-subtitle,
.client-portal .empty-state-text,
.client-portal .field-help,
.client-footer-copy span,
.client-footer-meta {
  color: rgba(214,228,245,.78);
}

.client-portal .flash,
.client-portal .alert,
.client-portal .empty-state,
.client-portal .client-empty-state,
.client-portal .compact-empty-state {
  border-radius: 18px;
}

.client-portal .client-status-pill,
.client-portal .badge {
  white-space: nowrap;
}

.client-portal code,
.client-portal pre,
.client-portal textarea,
.client-portal input,
.client-portal .client-payment-reference-box strong,
.client-portal .client-router-script-box,
.client-portal .client-router-code,
.client-portal .client-device-credential-box,
.client-portal .client-proof-id {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.client-portal .client-billing-shell,
.client-portal .client-devices-card,
.client-portal .client-audit-shell,
.client-portal .client-auth-card,
.client-portal .client-device-flow-card {
  border-color: rgba(130,170,216,.16);
  box-shadow: 0 18px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}

.client-portal .client-billing-overview,
.client-portal .client-billing-panel,
.client-portal .client-payment-card,
.client-portal .client-plan-card,
.client-portal .client-proof-card,
.client-portal .client-empty-state,
.client-portal .client-router-verify-card,
.client-portal .client-devices-metric-card,
.client-portal .client-device-info-item,
.client-portal .client-auth-note-item {
  backdrop-filter: blur(10px);
}

.client-portal .client-payment-card:hover,
.client-portal .client-plan-card:hover,
.client-portal .client-devices-peer-card:hover,
.client-portal .client-audit-item:hover {
  transform: translateY(-1px);
  border-color: rgba(39,170,225,.24);
}

.client-portal a:focus-visible,
.client-portal button:focus-visible,
.client-portal input:focus-visible,
.client-portal select:focus-visible,
.client-portal textarea:focus-visible {
  outline: 2px solid rgba(39,170,225,.9);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .client-portal .page-head,
  .client-billing-section-head,
  .client-payment-card-head,
  .client-plan-card-head,
  .client-proof-card,
  .client-payment-spotlight,
  .client-router-verify-hero,
  .client-devices-hero {
    align-items: flex-start;
  }

  .client-portal .page-actions,
  .client-payment-card-actions,
  .client-device-success-actions,
  .client-header-actions {
    width: 100%;
  }

  .client-portal .page-actions .btn,
  .client-payment-card-actions .btn,
  .client-device-success-actions .btn,
  .client-header-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* --------------------------------
   UI-30 — Admin Shell Redesign / Batch 1
   Non-breaking scaffold
   -------------------------------- */
.admin-shell-body {
  background:
    radial-gradient(circle at top right, rgba(106,44,134,.16), transparent 28%),
    linear-gradient(180deg, #070a0f, #0b0f14 38%, #0c121a 100%);
}

.app-shell--admin {
  position: relative;
}

.app-shell-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 16, .56);
  z-index: 25;
}

.admin-sidebar,
.app-sidebar.admin-sidebar {
  background:
    linear-gradient(180deg, rgba(8, 11, 17, .98), rgba(11, 15, 20, .96));
  border-left: 1px solid rgba(255,255,255,.08);
}

.admin-sidebar-brand {
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
}

.admin-sidebar-nav {
  gap: 14px;
}

.sidebar-group-title,
.admin-sidebar-group-title {
  margin: 2px 8px 0;
  color: rgba(159,176,195,.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sidebar-links,
.admin-sidebar-links {
  display: grid;
  gap: 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-link-label {
  min-width: 0;
}

.admin-main {
  min-width: 0;
}

.admin-header {
  padding-block: 16px;
  background: linear-gradient(180deg, rgba(11,15,20,.92), rgba(11,15,20,.78));
}

.admin-header-main,
.admin-header-actions {
  gap: 14px;
}

.admin-brand-wrap {
  gap: 4px;
}

.admin-header-context {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-cluster,
.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-header-indicators {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-indicator-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 13px;
}

.admin-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(46,204,113,.14);
}

.iface-form,
.admin-iface-form {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

.iface-select,
.admin-iface-select {
  min-width: 116px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: var(--bg-input);
  color: var(--text);
}

.header-logout,
.admin-header-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 700;
}

.header-logout:hover,
.admin-header-logout:hover {
  border-color: rgba(39,170,225,.45);
  background: rgba(39,170,225,.1);
}

.admin-content {
  padding-top: 24px;
}

.admin-container {
  max-width: 1280px;
}

.admin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-footer-sep {
  opacity: .55;
}

@media (max-width: 980px) {
  .admin-header {
    padding-inline: 14px;
  }

  .admin-header,
  .app-header {
    align-items: flex-start;
  }

  .admin-header-main,
  .admin-header-actions {
    width: 100%;
  }

  .admin-header-actions {
    justify-content: flex-start;
  }

  .admin-indicator-pill,
  .iface-form,
  .admin-iface-form,
  .header-logout,
  .admin-header-logout {
    width: 100%;
  }

  .admin-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------
   UI-30 Batch 2 — Header Scaffold
   -------------------------------- */
.app-header-v2 {
  gap: 14px;
  padding: 16px 18px;
}

.app-header-main,
.app-header-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.app-header-start,
.app-header-end,
.header-action-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.app-header-center {
  flex: 1 1 280px;
  min-width: 220px;
}

.shell-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.shell-brand:hover {
  color: var(--text);
}

.shell-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, rgba(106,44,134,.95), rgba(39,170,225,.92));
  box-shadow: 0 12px 30px rgba(8, 15, 27, .24);
}

.shell-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shell-brand-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
}

.shell-brand-subtitle {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
}

.page-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-intro-kicker {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-intro-title {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
}

.header-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.header-breadcrumbs a {
  color: var(--muted);
}

.header-breadcrumbs a:hover {
  color: var(--text);
}

.breadcrumb-sep {
  opacity: .55;
}

.header-search-shell {
  min-width: min(280px, 100%);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}

.header-search-icon {
  color: var(--muted);
  font-size: 16px;
}

.header-search-input {
  width: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  font: inherit;
}

.header-search-input::placeholder {
  color: var(--muted);
}

.header-status-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.header-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  color: var(--muted);
}

.header-chip-interface {
  color: var(--text);
}

.header-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .12);
}

.header-interface-form {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.header-control-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  color: var(--muted);
  font-size: 12px;
}

.iface-select {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 0 12px;
}

.header-remember-check {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.03);
}

.header-icon-link {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  background: rgba(255,255,255,.04);
}

.header-icon-link:hover,
.header-user-menu summary:hover,
.header-logout:hover {
  border-color: rgba(39,170,225,.36);
  background: rgba(39,170,225,.08);
}

.header-user-menu {
  position: relative;
}

.header-user-menu summary {
  min-height: 42px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,.04);
}

.header-user-menu summary::-webkit-details-marker {
  display: none;
}

.header-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: rgba(39,170,225,.14);
  color: var(--text);
}

.header-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

.header-user-meta strong {
  font-size: 13px;
}

.header-user-meta small {
  font-size: 11px;
  color: var(--muted);
}

.header-user-dropdown {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(11,17,29,.98);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  z-index: 35;
}

.header-user-menu[open] .header-user-dropdown {
  display: flex;
}

.header-user-card {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.04);
}

.header-user-card span {
  font-size: 12px;
  color: var(--muted);
}

.header-user-dropdown a,
.header-logout {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--text);
}

.sidebar-toggle {
  position: relative;
}

.sidebar-toggle-lines,
.sidebar-toggle-lines::before,
.sidebar-toggle-lines::after {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  display: block;
  content: '';
}

.sidebar-toggle-lines {
  position: relative;
}

.sidebar-toggle-lines::before,
.sidebar-toggle-lines::after {
  position: absolute;
  left: 0;
}

.sidebar-toggle-lines::before {
  top: -6px;
}

.sidebar-toggle-lines::after {
  top: 6px;
}

@media (max-width: 1100px) {
  .app-header-v2 {
    padding: 14px 16px;
  }

  .app-header-main {
    align-items: start;
  }

  .app-header-end {
    width: 100%;
    justify-content: space-between;
  }

  .header-search-shell {
    flex: 1 1 240px;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .shell-brand-subtitle,
  .header-link-text,
  .header-user-meta small,
  .header-breadcrumbs {
    display: none;
  }

  .app-header-main,
  .app-header-tools,
  .app-header-end,
  .header-interface-form,
  .header-action-cluster {
    width: 100%;
  }

  .app-header-tools {
    align-items: stretch;
  }

  .header-search-shell,
  .header-control-label,
  .header-icon-link,
  .header-user-menu summary {
    width: 100%;
  }

  .header-status-strip {
    width: 100%;
  }

  .header-chip {
    flex: 1 1 auto;
    justify-content: center;
  }

  .header-user-dropdown {
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: min(100%, 280px);
  }
}


/* --------------------------------
   UI-30 — Admin Shell Redesign / Batch 3
   Sidebar scaffold
   -------------------------------- */
.sidebar-brand-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-sidebar-badge {
  font-weight: 700;
}

.sidebar-brand-copy-block {
  display: grid;
  gap: 8px;
}

.sidebar-brand-title {
  font-size: 15px;
  font-weight: 800;
  color: #f4f8ff;
}

.admin-sidebar-context-card {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.admin-sidebar-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #e7eefb;
}

.admin-sidebar-context-label {
  color: rgba(173, 188, 205, .78);
  font-size: 12px;
}

.admin-sidebar-section-heading {
  margin: 4px 8px 2px;
  color: rgba(191, 206, 224, .82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.admin-sidebar-group {
  padding: 8px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 20px;
  background: rgba(255,255,255,.02);
}

.admin-sidebar-group.is-active-group {
  border-color: rgba(39,170,225,.22);
  background: linear-gradient(180deg, rgba(39,170,225,.08), rgba(255,255,255,.025));
}

.admin-sidebar-group-toggle {
  width: 100%;
  border-radius: 16px;
}

.admin-sidebar-group-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.admin-sidebar-group-meta {
  color: rgba(159,176,195,.76);
  font-size: 12px;
}

.admin-sidebar-subnav {
  gap: 10px;
}

.admin-sidebar-link {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.025);
}

.admin-sidebar-link:hover {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
}

.admin-sidebar-link.active {
  border-color: rgba(39,170,225,.30);
  background: linear-gradient(90deg, rgba(39,170,225,.18), rgba(106,44,134,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.admin-sidebar-link-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-sidebar-link-side {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.admin-sidebar-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

.admin-sidebar-item-badge.tone-neutral {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
  color: rgba(214,227,243,.88);
}

.admin-sidebar-item-badge.tone-info {
  background: rgba(39,170,225,.14);
  border-color: rgba(39,170,225,.22);
  color: #c7eeff;
}

.admin-sidebar-item-badge.tone-success {
  background: rgba(28,184,126,.14);
  border-color: rgba(28,184,126,.22);
  color: #cbffe8;
}

.admin-sidebar-item-badge.tone-warning {
  background: rgba(245,166,35,.16);
  border-color: rgba(245,166,35,.24);
  color: #ffe4b2;
}

.admin-sidebar-item-badge.tone-danger {
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.24);
  color: #ffd3d3;
}

.admin-sidebar-item-badge.tone-live {
  background: rgba(106,44,134,.18);
  border-color: rgba(166,112,198,.22);
  color: #f0d9ff;
}

.admin-sidebar-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(7,12,18,.55);
  color: #dce9fb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.admin-sidebar-link-copy {
  color: #edf4ff;
  font-weight: 700;
}

.admin-sidebar-link-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: rgba(189,205,224,.88);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .admin-sidebar-context-card {
    padding: 12px;
  }

  .admin-sidebar-group {
    border-radius: 18px;
  }

  .admin-sidebar-link {
    padding: 11px 12px;
  }

  .admin-sidebar-link-side {
    gap: 6px;
  }

  .admin-sidebar-link-tag {
    display: none;
  }
}

/* --------------------------------
   UI-30 — Admin Shell Redesign / Batch 4
   Footer scaffold
   -------------------------------- */
.admin-footer-v2 {
  margin-top: auto;
  padding: 18px 24px 28px;
  background: transparent;
  border-top: 0;
}

.admin-footer-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(18, 34, 51, .08);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(247,250,255,.96)),
    linear-gradient(135deg, rgba(39,170,225,.07), rgba(106,44,134,.05));
  box-shadow: 0 14px 34px rgba(17, 24, 39, .06);
}

.admin-footer-primary,
.admin-footer-secondary {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.admin-footer-brandblock {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.admin-footer-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(106,44,134,.14), rgba(39,170,225,.14));
  border: 1px solid rgba(39,170,225,.16);
  color: #2a3550;
  font-weight: 900;
  font-size: 18px;
}

.admin-footer-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-footer-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-footer-title {
  color: #1f2f46;
  font-size: 15px;
  font-weight: 800;
}

.admin-footer-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(39,170,225,.18);
  background: rgba(39,170,225,.08);
  color: #255f83;
  font-size: 11px;
  font-weight: 800;
}

.admin-footer-text {
  margin: 0;
  color: #5a687c;
  line-height: 1.7;
}

.admin-footer-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-footer-stat {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(18,34,51,.07);
  background: rgba(255,255,255,.72);
}

.admin-footer-stat-label,
.admin-footer-links-title {
  color: #728196;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.admin-footer-stat strong {
  color: #1f2f46;
  font-size: 14px;
}

.admin-footer-links-wrap {
  display: grid;
  gap: 10px;
}

.admin-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(18,34,51,.08);
  background: rgba(255,255,255,.74);
  color: #304155;
  font-weight: 700;
  text-decoration: none;
  transition: .18s ease;
}

.admin-footer-links a:hover {
  border-color: rgba(39,170,225,.22);
  background: rgba(39,170,225,.08);
  color: #163650;
}

.admin-footer-utility {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #657489;
  font-size: 13px;
}

@media (max-width: 980px) {
  .admin-footer-v2 {
    padding-inline: 16px;
    padding-bottom: 22px;
  }

  .admin-footer-shell {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .admin-footer-meta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-sidebar-quicklinks {
    gap: 6px;
  }

  .admin-sidebar-quicklink .quick-badge {
    display: none;
  }

  .admin-sidebar-item-badge {
    min-height: 24px;
    padding-inline: 8px;
  }

  .admin-footer-shell {
    padding: 14px;
  }

  .admin-footer-brandblock {
    gap: 12px;
  }

  .admin-footer-mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 14px;
  }

  .admin-footer-links a {
    width: 100%;
  }
}

/* --------------------------------
   UI-30 — Admin Shell Redesign / Batch 5
   Shell consistency pass + responsive polish
   -------------------------------- */
.app-shell--admin {
  isolation: isolate;
}

.app-main.admin-main {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(39,170,225,.06), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}

.app-shell--admin .app-header-v2 {
  margin: 0 18px;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(11,15,20,.92), rgba(11,15,20,.78));
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.app-shell--admin .admin-content {
  padding-top: 18px;
  padding-bottom: 12px;
}

.app-shell--admin .admin-container {
  max-width: 1320px;
  padding-inline: 18px;
}

.page-intro-subtitle {
  margin: 0;
  color: rgba(173,188,205,.82);
  font-size: 13px;
  line-height: 1.5;
}

.header-chip-muted {
  color: rgba(189,205,224,.88);
}

.header-search-shell,
.header-icon-link,
.header-user-menu summary,
.header-remember-check,
.header-chip {
  backdrop-filter: blur(8px);
}

.header-search-input:disabled {
  cursor: not-allowed;
  opacity: .92;
}

.app-sidebar.admin-sidebar {
  scrollbar-gutter: stable;
}

.admin-sidebar {
  width: 294px;
  flex-basis: 294px;
  padding: 18px 14px 20px;
}

.admin-sidebar-brand {
  padding-bottom: 18px;
  margin-bottom: 14px;
}

.admin-sidebar-quicklinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 8px 4px;
}

.admin-sidebar-quicklink {
  min-height: 30px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: #dfe9f8;
  font-size: 12px;
  font-weight: 700;
}

.admin-sidebar-quicklink:hover {
  border-color: rgba(39,170,225,.28);
  background: rgba(39,170,225,.08);
  color: #fff;
}

.admin-sidebar-group,
.admin-sidebar-context-card,
.app-shell--admin .app-header-v2,
.admin-footer-shell {
  backdrop-filter: blur(10px);
}

.admin-sidebar-group-toggle:focus-visible,
.admin-sidebar-link:focus-visible,
.admin-sidebar-quicklink:focus-visible,
.header-icon-link:focus-visible,
.header-user-menu summary:focus-visible,
.sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.admin-sidebar-link.active .admin-sidebar-link-tag {
  border-color: rgba(39,170,225,.18);
  color: #edf6ff;
  background: rgba(255,255,255,.05);
}

.admin-sidebar-link.active .admin-sidebar-item-badge.tone-neutral {
  background: rgba(255,255,255,.09);
  color: #f5fbff;
}

.admin-sidebar-quicklink .quick-badge {
  min-height: 22px;
  padding-inline: 8px;
  font-size: 10px;
}

.admin-footer-v2 {
  padding-top: 10px;
}

.admin-footer-shell {
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at top right, rgba(39,170,225,.08), transparent 30%),
    linear-gradient(180deg, rgba(11,15,20,.86), rgba(11,15,20,.76));
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
}

.admin-footer-mark {
  color: #edf4ff;
  background: linear-gradient(135deg, rgba(106,44,134,.34), rgba(39,170,225,.24));
  border-color: rgba(39,170,225,.22);
}

.admin-footer-title,
.admin-footer-stat strong,
.admin-footer-links a {
  color: #edf4ff;
}

.admin-footer-text,
.admin-footer-utility,
.admin-footer-stat-label,
.admin-footer-links-title {
  color: rgba(173,188,205,.82);
}

.admin-footer-chip,
.admin-footer-links a,
.admin-footer-stat {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

.admin-footer-links a:hover {
  color: #fff;
  border-color: rgba(39,170,225,.30);
  background: rgba(39,170,225,.10);
}

@media (max-width: 1180px) {
  .app-shell--admin .app-header-v2,
  .admin-footer-v2 {
    margin-inline: 16px;
  }

  .app-shell--admin .admin-container {
    padding-inline: 16px;
  }

  .header-search-shell {
    min-width: 220px;
  }
}

@media (max-width: 980px) {
  body.sidebar-lock {
    overflow: hidden;
  }

  .admin-sidebar {
    width: min(320px, 92vw);
    max-width: 92vw;
    padding-bottom: 24px;
  }

  .app-shell--admin .app-header-v2 {
    margin-inline: 14px;
    margin-top: 14px;
    padding: 16px;
    border-radius: 22px;
  }

  .app-shell--admin .admin-container {
    padding-inline: 14px;
  }

  .app-shell-backdrop {
    backdrop-filter: blur(3px);
  }

  .admin-sidebar-context-card {
    gap: 8px;
  }
}

@media (max-width: 760px) {
  .page-intro-subtitle,
  .header-chip-muted {
    display: none;
  }

  .app-shell--admin .app-header-v2 {
    gap: 12px;
  }

  .app-header-start {
    width: 100%;
    justify-content: space-between;
  }

  .app-header-center {
    order: 3;
    flex-basis: 100%;
  }

  .app-header-end {
    gap: 10px;
  }

  .header-status-strip {
    gap: 6px;
  }

  .header-chip,
  .header-icon-link,
  .header-user-menu summary,
  .admin-sidebar-quicklink {
    min-height: 38px;
  }

  .admin-sidebar-section-heading {
    margin-inline: 4px;
  }

  .admin-footer-v2 {
    margin-inline: 14px;
    padding-inline: 0;
  }

  .admin-footer-shell {
    border-radius: 20px;
  }

  .admin-footer-utility {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* --------------------------------
   UI-31 — Navigation System v2 / Batch 4
   Mobile behavior
   -------------------------------- */
.admin-sidebar-mobilebar,
.admin-sidebar-mobile-footer {
  display: none;
}

.admin-sidebar-mobilebar {
  position: sticky;
  top: 0;
  z-index: 3;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -18px -14px 14px;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(9,13,19,.98), rgba(9,13,19,.92));
  backdrop-filter: blur(10px);
}

.admin-sidebar-mobile-copy {
  display: grid;
  gap: 3px;
}

.admin-sidebar-mobile-copy strong {
  color: #f4f8ff;
  font-size: 14px;
}

.admin-sidebar-mobile-copy span {
  color: rgba(173,188,205,.78);
  font-size: 12px;
}

.admin-sidebar-close,
.admin-sidebar-mobile-action {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #edf4ff;
  font-weight: 700;
}

.admin-sidebar-close {
  min-width: 38px;
  padding: 0 10px;
  font-size: 22px;
  line-height: 1;
}

.admin-sidebar-mobile-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 -8px;
  padding: 12px 0 2px;
  background: linear-gradient(180deg, rgba(9,13,19,0), rgba(9,13,19,.96) 32%);
}

.admin-sidebar-mobile-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

.admin-sidebar-mobile-action.is-close {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.18);
}

@media (max-width: 980px) {
  .admin-sidebar-mobilebar,
  .admin-sidebar-mobile-footer {
    display: grid;
  }

  .admin-sidebar {
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .admin-sidebar-brand {
    padding-top: 0;
  }

  .admin-sidebar-quicklinks {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    margin-inline: 0;
    scroll-snap-type: x proximity;
  }

  .admin-sidebar-quicklink {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .admin-sidebar-group {
    padding: 7px;
  }

  .admin-sidebar-group-toggle {
    min-height: 52px;
  }

  .admin-sidebar-link {
    flex-wrap: nowrap;
    align-items: center;
  }

  .admin-sidebar-link-side {
    max-width: 46%;
  }
}

@media (max-width: 760px) {
  .admin-sidebar {
    width: min(340px, 94vw);
    max-width: 94vw;
    padding-inline: 12px;
  }

  .admin-sidebar-mobilebar {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .admin-sidebar-context-card {
    grid-template-columns: 1fr;
  }

  .admin-sidebar-link {
    align-items: flex-start;
  }

  .admin-sidebar-link-main {
    min-width: 0;
    flex: 1 1 auto;
  }

  .admin-sidebar-link-side {
    max-width: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
  }

  .admin-sidebar-item-badge {
    max-width: 100%;
  }
}


/* --------------------------------
   UI-31 — Navigation System v2 / Batch 5
   QA consistency pass
   -------------------------------- */
.admin-sidebar-group-toggle[aria-expanded="false"] + .admin-sidebar-subnav {
  display: none;
}

.admin-sidebar-link[data-nav-link] {
  position: relative;
}

.admin-sidebar-link.active::after {
  content: '';
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 6px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(39,170,225,.92), rgba(106,44,134,.92));
}

.admin-sidebar-link:focus-visible,
.admin-sidebar-quicklink:focus-visible,
.admin-sidebar-mobile-action:focus-visible {
  outline: 2px solid rgba(39,170,225,.42);
  outline-offset: 2px;
}

.admin-sidebar-item-badge,
.admin-sidebar-link-tag,
.admin-sidebar-link-icon,
.admin-sidebar-group-caret {
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

.admin-sidebar-group-toggle[aria-expanded="true"] .admin-sidebar-group-caret {
  transform: rotate(0deg);
}

.admin-sidebar-group-toggle[aria-expanded="false"] .admin-sidebar-group-caret {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar-item-badge,
  .admin-sidebar-link-tag,
  .admin-sidebar-link-icon,
  .admin-sidebar-group-caret,
  .admin-sidebar-link,
  .admin-sidebar-quicklink,
  .admin-sidebar-mobile-action,
  .app-sidebar,
  .app-shell-backdrop {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 980px) {
  .admin-sidebar-link.active::after {
    inset-inline-start: auto;
    inset-inline-end: 8px;
  }
}


/* --------------------------------
   UI-32 — Header & Footer Redesign / Batch 1
   Header structure & information layer
   -------------------------------- */
.app-header-v3 {
  gap: 16px;
}

.header-context-row,
.header-action-row,
.header-context-main,
.header-leading-group,
.header-context-meta,
.header-context-pills,
.header-primary-actions,
.header-action-left,
.header-action-right,
.header-quick-grid {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.header-context-row,
.header-action-row {
  justify-content: space-between;
}

.header-context-main {
  flex: 1 1 560px;
  min-width: 280px;
  align-items: flex-start;
}

.header-leading-group {
  flex: 0 0 auto;
}

.header-page-block {
  flex: 1 1 280px;
  min-width: 220px;
}

.header-context-meta {
  flex: 0 1 560px;
  justify-content: flex-end;
}

.header-context-pills,
.header-primary-actions,
.header-action-right {
  justify-content: flex-end;
}

.header-brand-badge {
  min-height: 48px;
  padding: 7px 12px 7px 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color: var(--text);
}

.header-brand-badge:hover {
  color: var(--text);
  border-color: rgba(39,170,225,.28);
  background: linear-gradient(180deg, rgba(39,170,225,.10), rgba(255,255,255,.03));
}

.header-brand-badge-mark {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(106,44,134,.95), rgba(39,170,225,.92));
  color: #fff;
}

.header-brand-badge-copy {
  display: grid;
  gap: 2px;
  line-height: 1.1;
}

.header-brand-badge-copy strong {
  font-size: 13px;
}

.header-brand-badge-copy small {
  font-size: 11px;
  color: var(--muted);
}

.page-intro-v3 {
  gap: 5px;
}

.header-chip-soft {
  min-height: 38px;
  padding-inline: 12px;
  background: rgba(255,255,255,.03);
}

.header-chip-label,
.header-status-pill-label {
  color: rgba(173,188,205,.78);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.header-chip-value {
  color: var(--text);
  font-weight: 700;
}

.header-alert-link .header-icon-badge,
.header-summary-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  background: rgba(39,170,225,.16);
  color: var(--text);
}

.header-alert-link .header-icon-badge {
  background: rgba(255,107,107,.16);
}

.header-panel-menu {
  position: relative;
}

.header-panel-menu summary {
  min-height: 42px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,.04);
}

.header-panel-menu summary::-webkit-details-marker {
  display: none;
}

.header-panel-menu summary:hover,
.header-panel-menu[open] summary {
  border-color: rgba(39,170,225,.36);
  background: rgba(39,170,225,.08);
}

.header-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

.header-summary-copy strong {
  font-size: 13px;
  color: var(--text);
}

.header-summary-copy small {
  font-size: 11px;
  color: var(--muted);
}

.header-panel-dropdown {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 250px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(11,17,29,.98);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  z-index: 35;
}

.header-panel-menu[open] .header-panel-dropdown {
  display: flex;
}

.header-dropdown-card {
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.03);
}

.header-dropdown-card strong {
  font-size: 13px;
}

.header-dropdown-card span,
.header-panel-placeholder {
  color: var(--muted);
  font-size: 12px;
}

.header-quick-grid {
  gap: 8px;
}

.header-quick-grid a,
.header-panel-placeholder {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.02);
  color: var(--text);
}

.header-quick-grid a:hover,
.header-panel-dropdown a:hover,
.header-logout:hover {
  border-color: rgba(39,170,225,.24);
  background: rgba(39,170,225,.08);
}

.header-interface-form-v3 {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}

.header-status-pill {
  min-height: 40px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.header-status-pill strong {
  font-size: 13px;
  color: var(--text);
}

.header-status-pill-ok {
  border-color: rgba(52,211,153,.22);
  background: rgba(52,211,153,.09);
}

.header-status-pill-stable {
  border-color: rgba(39,170,225,.20);
  background: rgba(39,170,225,.08);
}

.header-status-pill-idle,
.header-status-pill-passive {
  background: rgba(255,255,255,.03);
}

@media (max-width: 1180px) {
  .header-context-row,
  .header-action-row,
  .header-context-main,
  .header-context-meta {
    width: 100%;
  }

  .header-context-meta,
  .header-context-pills,
  .header-primary-actions,
  .header-action-right {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .header-brand-badge-copy small,
  .header-summary-copy small,
  .header-chip-adaptive,
  .header-context-pills {
    display: none;
  }

  .header-context-main,
  .header-context-meta,
  .header-leading-group,
  .header-primary-actions,
  .header-action-left,
  .header-action-right,
  .header-interface-form-v3,
  .header-panel-menu summary,
  .header-alert-link {
    width: 100%;
  }

  .header-leading-group {
    justify-content: space-between;
  }

  .header-brand-badge {
    flex: 1 1 auto;
    justify-content: center;
  }

  .header-primary-actions,
  .header-action-right {
    gap: 8px;
  }

  .header-alert-link,
  .header-panel-menu summary,
  .header-status-pill {
    min-height: 40px;
    justify-content: center;
  }

  .header-panel-dropdown {
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: min(100%, 280px);
  }
}


/* --------------------------------
   UI-32 — Header & Footer Redesign / Batch 3
   Header polish + footer audit/structure
   -------------------------------- */
.app-shell--admin .app-header-v3 {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.header-context-row,
.header-action-row {
  padding: 18px 20px;
}

.header-context-row {
  position: relative;
  align-items: stretch;
  gap: 18px;
  background:
    radial-gradient(circle at top right, rgba(39,170,225,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

.header-context-row::after {
  content: '';
  position: absolute;
  inset-inline: 20px;
  inset-block-end: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0));
}

.header-action-row {
  gap: 14px;
  background: linear-gradient(180deg, rgba(4,8,14,.08), rgba(255,255,255,.01));
}

.header-context-main {
  align-items: center;
  gap: 18px;
}

.header-leading-group {
  align-items: center;
  gap: 12px;
}

.header-page-block {
  display: flex;
  align-items: center;
  min-height: 72px;
}

.page-intro-v3 {
  width: 100%;
  gap: 7px;
}

.header-page-headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.page-intro-title {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
}

.header-page-route-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(212,228,245,.88);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.header-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: rgba(173,188,205,.82);
}

.header-breadcrumbs a,
.header-breadcrumbs span {
  font-size: 12px;
}

.header-context-meta {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  min-width: min(100%, 320px);
}

.header-context-pills,
.header-primary-actions {
  justify-content: flex-end;
}

.header-context-pills {
  gap: 10px;
}

.header-chip-soft {
  min-height: 40px;
  padding-inline: 13px;
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
}

.header-primary-actions {
  gap: 10px;
}

.header-icon-link,
.header-panel-menu summary {
  min-height: 44px;
  border-radius: 16px;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.header-icon-link {
  padding-inline: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.header-icon-link:hover,
.header-panel-menu summary:hover,
.header-panel-menu[open] summary {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.header-panel-menu summary:focus-visible,
.header-icon-link:focus-visible,
.header-brand-badge:focus-visible,
.header-quick-grid a:focus-visible,
.header-user-dropdown a:focus-visible,
.header-interface-form-v3 select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.header-panel-dropdown {
  top: calc(100% + 10px);
  min-width: 280px;
  padding: 12px;
  border-radius: 18px;
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(8,12,18,.98), rgba(8,12,18,.94));
}

.header-dropdown-card {
  padding: 12px;
  border-radius: 14px;
}

.header-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.header-quick-grid a,
.header-panel-dropdown a,
.header-panel-placeholder {
  justify-content: flex-start;
  min-height: 40px;
  border-radius: 12px;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.header-quick-grid a:hover,
.header-panel-dropdown a:hover,
.header-logout:hover {
  transform: translateX(-1px);
}

.header-user-avatar {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.16);
}

.header-action-left {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 620px;
}

.header-action-cluster {
  min-height: 64px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}

.header-action-cluster-interface {
  flex: 1 1 360px;
}

.header-action-cluster-note {
  flex: 0 1 320px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.header-cluster-label {
  color: rgba(173,188,205,.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.header-action-cluster-note strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.header-interface-form-v3 {
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.header-control-label {
  min-width: 220px;
}

.header-control-label span {
  color: rgba(173,188,205,.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.header-remember-check {
  margin-inline-start: auto;
  min-height: 40px;
  padding-inline: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
}

.header-action-right {
  flex: 0 1 480px;
  align-items: stretch;
  gap: 10px;
}

.header-status-pill {
  min-height: 44px;
  padding: 8px 12px;
  justify-content: center;
  border-radius: 16px;
}

.header-status-pill strong {
  font-size: 12px;
}

.admin-footer-v3 {
  padding-top: 12px;
}

.admin-footer-v3 .admin-footer-shell {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.admin-footer-zone {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.admin-footer-zone-label {
  color: rgba(173,188,205,.82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.admin-footer-v3 .admin-footer-brandblock {
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}

.admin-footer-inline-note {
  color: rgba(173,188,205,.82);
  font-size: 12px;
}

.admin-footer-utility-card {
  min-height: 74px;
  padding: 14px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}

.admin-footer-utility-card strong {
  color: #edf4ff;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .header-context-row,
  .header-action-row {
    padding: 16px 18px;
  }

  .header-context-main,
  .header-context-meta {
    width: 100%;
  }

  .header-context-meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .header-context-pills,
  .header-primary-actions,
  .header-action-right {
    justify-content: flex-start;
  }

  .header-action-left,
  .header-action-right {
    width: 100%;
    flex-basis: 100%;
  }

  .admin-footer-v3 .admin-footer-shell {
    grid-template-columns: 1fr 1fr;
  }

  .admin-footer-zone-left {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .header-context-row,
  .header-action-row {
    padding: 14px;
  }

  .header-context-row::after {
    inset-inline: 14px;
  }

  .header-page-headline {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .header-page-route-chip,
  .header-action-cluster-note {
    display: none;
  }

  .header-context-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .header-brand-badge-copy small,
  .header-summary-copy small,
  .header-chip-adaptive,
  .header-context-pills {
    display: none;
  }

  .header-context-main,
  .header-context-meta,
  .header-leading-group,
  .header-primary-actions,
  .header-action-left,
  .header-action-right,
  .header-action-cluster-interface,
  .header-interface-form-v3,
  .header-panel-menu,
  .header-panel-menu summary,
  .header-alert-link {
    width: 100%;
  }

  .header-leading-group {
    justify-content: space-between;
  }

  .header-brand-badge {
    flex: 1 1 auto;
    justify-content: center;
  }

  .header-primary-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .header-alert-link,
  .header-panel-menu summary,
  .header-status-pill {
    min-height: 42px;
    justify-content: center;
  }

  .header-panel-dropdown {
    inset-inline: 0;
    min-width: 100%;
  }

  .header-quick-grid {
    grid-template-columns: 1fr;
  }

  .header-action-cluster {
    min-height: 0;
    padding: 12px;
    border-radius: 16px;
  }

  .header-control-label,
  .header-remember-check {
    width: 100%;
  }

  .header-remember-check {
    margin-inline-start: 0;
    justify-content: center;
  }

  .header-status-pill {
    flex: 1 1 calc(50% - 8px);
  }

  .admin-footer-v3 .admin-footer-shell {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .admin-footer-zone {
    gap: 10px;
  }

  .admin-footer-v3 .admin-footer-brandblock,
  .admin-footer-utility-card {
    padding: 12px;
    border-radius: 16px;
  }

  .admin-footer-inline-note {
    font-size: 11px;
  }
}

@media (max-width: 520px) {
  .page-intro-subtitle {
    display: none;
  }

  .header-status-pill {
    width: 100%;
    flex-basis: 100%;
  }

  .admin-footer-v3 {
    margin-inline: 12px;
  }
}


/* --------------------------------
   UI-32 — Header & Footer Redesign / Batch 4
   Footer implementation polish + shell consistency pass
   -------------------------------- */
.app-shell--admin .admin-content {
  padding-top: 20px;
  padding-bottom: 16px;
}

.app-shell--admin .admin-container {
  max-width: 1320px;
  padding-inline: 18px;
}

.app-shell--admin .app-header-v3 {
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.header-context-row,
.header-action-row {
  padding: 0;
}

.header-row-shell {
  width: min(100%, 1356px);
  margin: 0 auto;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  flex-wrap: wrap;
}

.header-context-row {
  gap: 0;
}

.header-context-row::after {
  inset-inline: max(18px, calc((100% - 1320px) / 2 + 18px));
}

.header-action-row {
  border-top: 1px solid rgba(255,255,255,.03);
}

.header-context-main {
  gap: 16px;
}

.header-page-block {
  min-height: 68px;
}

.header-context-meta {
  gap: 10px;
}

.header-context-pills {
  gap: 8px;
}

.header-chip-soft {
  min-height: 38px;
  padding-inline: 12px;
}

.header-icon-link,
.header-panel-menu summary,
.header-brand-badge,
.header-quick-grid a,
.header-panel-dropdown a,
.header-logout,
.header-status-pill,
.admin-footer-link-list a {
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.header-icon-link:hover,
.header-panel-menu summary:hover,
.header-panel-menu[open] summary {
  transform: translateY(-1px);
}

.header-alert-link:hover .header-icon-badge,
.header-panel-menu summary:hover .header-summary-icon,
.header-panel-menu[open] summary .header-summary-icon {
  opacity: .95;
  background: rgba(39,170,225,.24);
}

.header-panel-dropdown {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
}

.header-panel-menu[open] .header-panel-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.header-dropdown-card span,
.header-panel-placeholder {
  line-height: 1.55;
}

.header-action-cluster {
  min-height: 60px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}

.header-action-cluster-note strong {
  color: rgba(231,238,247,.92);
}

.header-status-pill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.admin-footer-v3 {
  padding: 12px 0 26px;
  border-top: 1px solid rgba(255,255,255,.03);
}

.admin-footer-v3 .admin-footer-shell {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 18px;
  gap: 18px;
  align-items: start;
}

.admin-footer-zone {
  gap: 11px;
}

.admin-footer-zone-label {
  padding-inline: 2px;
  color: rgba(173,188,205,.76);
}

.admin-footer-v3 .admin-footer-brandblock,
.admin-footer-utility-card {
  padding: 15px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.022));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}

.admin-footer-v3 .admin-footer-brandblock {
  align-items: flex-start;
  gap: 13px;
}

.admin-footer-mark {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

.admin-footer-title-row {
  align-items: center;
  gap: 8px;
}

.admin-footer-title {
  font-size: 15px;
  letter-spacing: .01em;
}

.admin-footer-chip-subtle {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color: rgba(223,233,248,.90);
}

.admin-footer-text {
  font-size: 13px;
  line-height: 1.7;
}

.admin-footer-inline-note {
  font-size: 11px;
  letter-spacing: .01em;
}

.admin-footer-utility-card {
  min-height: 72px;
  gap: 4px;
}

.admin-footer-stat-label {
  color: rgba(173,188,205,.72);
}

.admin-footer-utility-card strong {
  font-size: 13px;
  font-weight: 700;
  color: rgba(237,244,255,.94);
}

.admin-footer-utility-card-muted strong,
.admin-footer-utility-card-state strong {
  color: rgba(223,233,248,.82);
}

.admin-footer-utility-card-state {
  background: linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.018));
}

.admin-footer-link-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.admin-footer-link-list a {
  min-height: 30px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(231,238,247,.92);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 2px;
}

.admin-footer-link-list a:hover,
.admin-footer-link-list a:focus-visible {
  color: #fff;
  border-color: rgba(39,170,225,.26);
  background: rgba(39,170,225,.08);
  text-decoration: underline;
}

@media (max-width: 1180px) {
  .app-shell--admin .admin-content {
    padding-top: 18px;
  }

  .header-row-shell,
  .app-shell--admin .admin-container,
  .admin-footer-v3 .admin-footer-shell {
    padding-inline: 16px;
  }

  .header-context-meta {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px 14px;
  }

  .header-context-pills,
  .header-primary-actions,
  .header-action-right {
    justify-content: flex-start;
  }

  .admin-footer-v3 .admin-footer-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .app-shell--admin .admin-content {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .header-row-shell,
  .app-shell--admin .admin-container,
  .admin-footer-v3 .admin-footer-shell {
    padding-inline: 14px;
  }

  .header-row-shell {
    gap: 12px;
  }

  .header-context-row::after {
    inset-inline: 14px;
  }

  .header-page-block {
    min-height: 0;
  }

  .header-context-meta,
  .header-primary-actions,
  .header-action-left,
  .header-action-right {
    gap: 8px;
  }

  .header-panel-dropdown {
    top: calc(100% + 6px);
  }

  .admin-footer-v3 {
    padding-bottom: 20px;
  }

  .admin-footer-v3 .admin-footer-shell {
    gap: 12px;
  }

  .admin-footer-zone {
    gap: 9px;
  }

  .admin-footer-v3 .admin-footer-brandblock,
  .admin-footer-utility-card {
    padding: 13px 14px;
    border-radius: 16px;
  }

  .admin-footer-link-list a {
    flex: 0 0 auto;
  }
}

@media (max-width: 520px) {
  .header-row-shell,
  .app-shell--admin .admin-container,
  .admin-footer-v3 .admin-footer-shell {
    padding-inline: 12px;
  }

  .header-context-row::after {
    inset-inline: 12px;
  }

  .admin-footer-v3 .admin-footer-shell {
    grid-template-columns: 1fr;
  }

  .admin-footer-link-list {
    gap: 6px;
  }

  .admin-footer-link-list a {
    min-height: 28px;
    padding-inline: 8px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-icon-link,
  .header-panel-menu summary,
  .header-brand-badge,
  .header-panel-dropdown,
  .header-quick-grid a,
  .header-panel-dropdown a,
  .header-logout,
  .header-status-pill,
  .admin-footer-link-list a {
    transition: none !important;
    transform: none !important;
  }
}


/* --------------------------------
   UI-33 Batch 1 — Shared Page Patterns
   -------------------------------- */
.page-head {
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}

.page-head-main {
  flex: 1 1 340px;
  min-width: 0;
}

.page-head-copy {
  display: grid;
  gap: 8px;
}

.page-head h1 {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.page-eyebrow {
  margin-bottom: 0;
}

.page-head-note {
  margin-top: 0;
  line-height: 1.65;
}

.page-head-subtitle {
  max-width: 72ch;
  color: rgba(231, 238, 247, .86);
}

.page-head-meta {
  font-size: 12px;
}

.page-head-actions {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.page-actions {
  gap: 12px;
}

.page-actions .btn,
.table-toolbar-actions .btn {
  min-height: 40px;
}

.advanced-filters,
.filters-shell {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.025);
}

.filters-form,
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
}

.filter-field {
  min-width: 0;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table-toolbar {
  gap: 16px;
  padding: 14px 16px;
  border-color: rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
}

.table-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
}

.table-toolbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}

.table-toolbar-pill strong {
  font-size: 14px;
}

.table-toolbar-note {
  color: var(--muted);
  font-size: 12px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgba(18,25,36,.88), rgba(11,15,20,.92));
  box-shadow: var(--shadow-soft);
}

.table-wrap .table {
  margin: 0;
}

.empty-state {
  padding: 24px 22px;
  border-style: solid;
  border-color: rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.02));
}

.compact-empty-state {
  min-height: 96px;
  display: grid;
  place-items: center;
}

.admin-content .page-head + .page-section,
.admin-content .page-section + .page-section,
.admin-content .advanced-filters + .page-section,
.admin-content .table-toolbar + .table-wrap,
.admin-content .table-wrap + .table-pagination,
.admin-content .table-wrap + .page-section {
  margin-top: 16px;
}

.admin-content .stats-grid,
.admin-content .stats-grid-admin,
.admin-content .dashboard-cards {
  gap: 16px;
}

@media (max-width: 980px) {
  .page-head {
    align-items: stretch;
    padding: 16px;
  }

  .page-head-actions {
    width: 100%;
    justify-content: stretch;
  }

  .page-head-actions .page-actions,
  .filter-actions,
  .table-toolbar-actions {
    width: 100%;
  }

  .page-head-actions .btn,
  .filter-actions .btn,
  .table-toolbar-actions .btn {
    flex: 1 1 180px;
  }
}

@media (max-width: 720px) {
  .page-head {
    padding: 14px;
    border-radius: var(--radius-xl);
  }

  .filters-form,
  .filters-grid {
    grid-template-columns: 1fr;
  }

  .table-wrap {
    padding: 6px;
    border-radius: var(--radius-xl);
  }

  .table-toolbar-meta {
    width: 100%;
  }
}


/* --------------------------------
   UI-33 Batch 2 — Dashboard / Operations / Monitoring Pages
   -------------------------------- */
.ops-page-shell {
  display: grid;
  gap: 16px;
}

.page-head-ops {
  margin-bottom: 0;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.page-head-ops-compact {
  padding-block: 16px;
}

.page-head-actions-wrap {
  align-items: stretch;
}

.page-head-actions-wrap .page-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ops-hero-band,
.ops-section-card,
.ops-filter-card,
.ops-chart-card {
  position: relative;
  overflow: hidden;
}

.ops-hero-band::before,
.ops-section-card::before,
.ops-filter-card::before,
.ops-chart-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(96,165,250,.45), rgba(255,255,255,0));
  pointer-events: none;
}

.ops-hero-band {
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.1), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.02));
}

.ops-summary-grid {
  gap: 16px;
}

.ops-page-grid {
  gap: 16px;
  align-items: start;
}

.ops-section-card .card-head,
.ops-section-card .dashboard-panel-head,
.ops-filter-card .dashboard-panel-head,
.ops-chart-card .chart-card-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ops-section-card .table-wrap,
.ops-filter-card,
.ops-callout-card {
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016));
}

.ops-callout-card .empty-state {
  place-items: start;
  text-align: start;
}

.ops-page-shell .monitoring-filter-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.ops-page-shell .monitoring-filter-chips,
.ops-page-shell .btn-row,
.ops-page-shell .incident-action-grid,
.ops-page-shell .incident-inline-actions {
  flex-wrap: wrap;
}

.dashboard-page-batch2 .dashboard-card,
.monitoring-page-batch2 .dashboard-card,
.alert-center-page-batch2 .monitoring-alert-pill,
.agent-health-page-batch2 .stat-card,
.apply-center-page-batch2 .meta-list {
  box-shadow: var(--shadow-soft);
}

.dashboard-page-batch2 .dashboard-highlight-strip,
.alert-center-page-batch2 .monitoring-alert-strip,
.monitoring-page-batch2 .monitoring-health-strip,
.monitoring-page-batch2 .monitoring-summary-cards,
.noc-page-batch4 .noc-top-grid {
  margin-top: 0;
}

.dashboard-page-batch2 .dashboard-panel,
.apply-center-page-batch2 .card,
.apply-job-page-batch2 .card,
.agent-health-page-batch2 .card,
.alert-detail-page-batch2 .card,
.monitoring-page-batch2 .card {
  box-shadow: var(--shadow-soft);
}

.monitoring-page-batch2 .monitoring-hero-grid,
.monitor-peer-page-batch2 .monitoring-hero-meta,
.alert-detail-page-batch2 .monitoring-alert-strip,
.apply-center-page-batch2 .card-split,
.agent-health-page-batch2 .card-split {
  gap: 16px;
}

.monitoring-page-batch2 .monitoring-filter-shell,
.alert-center-page-batch2 .monitoring-filter-shell {
  padding: 18px;
}

.monitoring-page-batch2 .monitoring-advanced-filters,
.alert-center-page-batch2 .alert-filter-grid {
  gap: 14px;
}

.monitoring-page-batch2 .monitoring-feed-item,
.monitor-peer-page-batch2 .monitoring-feed-item,
.alert-detail-page-batch2 .incident-note-item,
.noc-page-batch4 .noc-priority-item,
.noc-page-batch4 .noc-activity-item,
.noc-page-batch4 .noc-alert-event-item {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.alert-center-page-batch2 .table-wrap,
.alert-detail-page-batch2 .table-wrap,
.apply-center-page-batch2 .table-wrap,
.apply-job-page-batch2 .codebox,
.agent-health-page-batch2 .codebox,
.monitoring-page-batch2 .table-wrap,
.monitor-peer-page-batch2 .table-wrap {
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(9,14,24,.96));
}

.alert-detail-page-batch2 .code-shell,
.apply-job-page-batch2 .codebox,
.apply-center-page-batch2 .codebox,
.agent-health-page-batch2 .codebox {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: rgba(15,23,42,.86);
}

.alert-detail-page-batch2 .empty-state,
.monitoring-page-batch2 .empty-state,
.monitor-peer-page-batch2 .empty-state,
.agent-health-page-batch2 .empty-state,
.apply-center-page-batch2 .empty-state,
.apply-job-page-batch2 .empty-state {
  min-height: 110px;
}

@media (max-width: 980px) {
  .ops-page-grid,
  .monitoring-page-batch2 .monitoring-grid-2,
  .monitor-peer-page-batch2 .monitoring-grid-2,
  .alert-detail-page-batch2 .grid.cols-2,
  .agent-health-page-batch2 .card-split,
  .apply-center-page-batch2 .card-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .page-head-actions-wrap .page-actions {
    justify-content: stretch;
  }

  .ops-page-shell {
    gap: 14px;
  }

  .monitoring-page-batch2 .monitoring-filter-shell,
  .alert-center-page-batch2 .monitoring-filter-shell {
    padding: 14px;
  }
}


/* --------------------------------
   UI-33 Batch 3 — CRUD / Listing Pages
   -------------------------------- */
.crud-page-shell {
  display: grid;
  gap: 16px;
}

.crud-intro-card,
.crud-filter-card,
.crud-create-card,
.crud-table-card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.crud-intro-card::before,
.crud-filter-card::before,
.crud-create-card::before,
.crud-table-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(96,165,250,.45), rgba(255,255,255,0));
  pointer-events: none;
}

.crud-intro-card .page-head {
  margin-bottom: 0;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.1), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.crud-filter-card,
.crud-create-card,
.crud-table-card {
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016));
}

.crud-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.crud-section-head-tight {
  margin-bottom: 10px;
}

.filters-shell-meta {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}

.filters-shell-actions {
  margin-top: 12px;
  justify-content: flex-end;
}

.crud-table-toolbar,
.crud-table-card .table-toolbar {
  padding-inline: 0;
  padding-top: 0;
  margin-bottom: 12px;
  background: transparent;
  border: 0;
}

.table-toolbar-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.crud-table-card .table-toolbar-meta {
  gap: 10px 12px;
}

.crud-table-wrap,
.crud-table-card .table-wrap {
  padding: 8px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(9,14,24,.96));
}

.crud-bulk-toolbar {
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
}

.crud-inline-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.crud-inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.crud-row-stack {
  gap: 10px;
}

.crud-empty-state {
  min-height: 132px;
  display: grid;
  place-items: center;
  text-align: center;
}

.crud-page-users .users-admin-hero {
  margin-bottom: 16px;
}

.crud-page-users .users-bulk-toolbar-static.is-empty {
  opacity: .72;
}

@media (max-width: 980px) {
  .crud-filter-card,
  .crud-create-card,
  .crud-table-card {
    padding: 16px;
  }

  .table-toolbar-search-form {
    width: 100%;
  }

  .table-toolbar-search-form .table-search-input,
  .table-toolbar-search-form .btn {
    flex: 1 1 180px;
  }
}

@media (max-width: 720px) {
  .crud-filter-card,
  .crud-create-card,
  .crud-table-card {
    padding: 14px;
  }

  .crud-inline-grid {
    grid-template-columns: 1fr;
  }

  .crud-table-wrap,
  .crud-table-card .table-wrap {
    border-radius: var(--radius-xl);
    padding: 6px;
  }
}


/* --------------------------------
   UI-33 Batch 4 — Forms / Detail / Settings
   -------------------------------- */
.page-head-form,
.page-head-detail {
  align-items: flex-start;
  gap: 14px;
}

.form-page-shell,
.detail-page-shell {
  gap: 16px;
}

.form-surface-card,
.detail-surface-card {
  padding: 1.1rem 1.15rem;
}

.form-shell,
.compact-form-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.compact-form-shell {
  gap: 14px;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(120,170,255,.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

.form-section-grid-tight {
  margin-top: 2px;
}

.form-section-head,
.detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.form-section-title,
.detail-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.form-section-note,
.detail-panel-note,
.form-actions-note {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

.form-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.form-toggle-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: .95rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(120,170,255,.12);
  background: rgba(255,255,255,.03);
}

.form-toggle-row {
  min-height: 48px;
  padding: .8rem .95rem;
  border-radius: 14px;
  border: 1px solid rgba(120,170,255,.12);
  background: rgba(255,255,255,.03);
}

.form-actions-split {
  justify-content: space-between;
}

.form-actions-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.no-top-margin {
  margin-top: 0;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 16px;
}

.detail-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-panel,
.detail-note-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(120,170,255,.12);
  background: rgba(255,255,255,.025);
}

.detail-note-card {
  justify-content: center;
}

.detail-note-title {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--info);
}

.detail-code-box {
  margin-top: 2px;
  max-height: 320px;
}

.detail-stat-strip {
  margin-top: 6px;
}

.detail-prewrap {
  white-space: pre-wrap;
}

.table-wrap-detail {
  border-radius: 18px;
}

.users-edit-page .detail-note-card {
  min-height: 100%;
}

@media (max-width: 1080px) {
  .detail-grid,
  .detail-grid-compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .form-surface-card,
  .detail-surface-card {
    padding: .95rem;
  }

  .form-section,
  .detail-panel,
  .detail-note-card {
    padding: .9rem;
  }

  .form-actions-split {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions-group,
  .form-actions-note {
    width: 100%;
  }
}


/* --------------------------------
   UI-33 Batch 5 — QA / Consistency Sweep
   -------------------------------- */
.section-stack {
  display: grid;
  gap: 16px;
}

.page-section-tight {
  margin-top: 12px;
}

.users-admin-shell,
.crud-page-peers,
.crud-page-clients,
.client-detail-page {
  display: grid;
  gap: 16px;
}

.users-admin-card-gap,
.table-section,
.form-card-head {
  margin-bottom: 0;
}

.form-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.table-section {
  display: grid;
  gap: 12px;
}

.page-actions,
.bulk-toolbar-actions,
.filters-shell-actions,
.table-toolbar-actions,
.inline-form,
.crud-inline-actions,
.users-bulk-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bulk-toolbar-title {
  font-size: 13px;
  color: var(--muted);
}

.inline-button,
.btn-sm {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: var(--radius-md);
}

.page-head .page-actions,
.table-toolbar-actions,
.filters-shell-actions {
  justify-content: flex-end;
}

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -2px;
}

.dashboard-title {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.15;
}

.dashboard-subtitle,
.chart-card-copy,
.metric-list,
.dashboard-note-list {
  color: var(--muted);
}

.dashboard-subtitle {
  margin: 6px 0 0;
}

.dashboard-kpis {
  display: grid;
  gap: 16px;
}

.dashboard-hero,
.dashboard-hero-split,
.dashboard-hero-stack,
.chart-card-wide,
.dashboard-panel-span-2 {
  gap: 16px;
}

.dashboard-hero-note,
.chart-card-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--info);
}

.dashboard-hero-subnote {
  color: var(--muted);
  font-size: 13px;
}

.empty-state-title {
  font-size: 15px;
  font-weight: 800;
}

.table-pagination {
  margin-top: 12px;
}

.filters-shell + .table-section,
.filters-shell + .crud-table-card,
.form-surface-card + .form-surface-card,
.detail-surface-card + .form-surface-card,
.detail-surface-card + .detail-surface-card {
  margin-top: 0;
}

@media (max-width: 980px) {
  .page-actions,
  .bulk-toolbar-actions,
  .table-toolbar-actions,
  .filters-shell-actions,
  .inline-form,
  .users-bulk-form {
    width: 100%;
  }

  .page-actions .btn,
  .bulk-toolbar-actions .btn,
  .table-toolbar-actions .btn,
  .filters-shell-actions .btn,
  .inline-form .btn,
  .users-bulk-form .btn,
  .users-bulk-form select {
    flex: 1 1 180px;
  }
}

@media (max-width: 720px) {
  .section-stack,
  .users-admin-shell,
  .crud-page-peers,
  .crud-page-clients,
  .client-detail-page {
    gap: 14px;
  }

  .form-card-head,
  .dashboard-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .table-section {
    gap: 10px;
  }
}


/* Billing copy affordances + registration refinements */
.client-plan-price-plain,
.client-copy-hint,
.table-meta {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted, #6b7280);
  font-size: 0.82rem;
}

.client-copy-stack {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.client-payment-destination-card {
  margin-top: 1rem;
}

.client-payment-copy-grid {
  display: grid;
  gap: 0.8rem;
}

.client-copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.65);
  flex-wrap: wrap;
}

.client-copy-row span {
  color: var(--muted, #6b7280);
  font-size: 0.86rem;
}

.copy-inline-btn {
  margin-top: 0.6rem;
}

.field-span-2 {
  grid-column: 1 / -1;
}

.client-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .client-copy-row {
    align-items: flex-start;
  }
}


.client-payment-destination-head {
  align-items: flex-start;
}

.client-payment-destination-actions {
  justify-content: flex-end;
}

.client-payment-destination-actions .btn {
  min-width: 132px;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.checkbox-inline input {
  width: 18px;
  height: 18px;
}

.btn-danger {
  border-color: rgba(239, 68, 68, .28);
  background: rgba(239, 68, 68, .12);
  color: #fecaca;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, .18);
}

@media (max-width: 760px) {
  .client-payment-destination-actions {
    width: 100%;
    justify-content: stretch;
  }

  .client-payment-destination-actions .btn {
    flex: 1 1 180px;
  }
}

/* Billing Review Inbox Upgrade */
.billing-review-inbox-page .billing-inbox-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.billing-review-inbox-page .billing-inbox-stat-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.billing-review-inbox-page .billing-inbox-stat-card.tone-review {
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12);
}
.billing-review-inbox-page .billing-inbox-stat-card.tone-proof {
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.12);
}
.billing-review-inbox-page .billing-inbox-stat-card.tone-warning {
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.16);
}
.billing-review-inbox-page .billing-inbox-stat-card.tone-success {
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.14);
}
.billing-review-inbox-page .billing-inbox-filters-form .form-row {
  align-items: end;
}
.billing-review-inbox-page .billing-inbox-filter-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.billing-review-inbox-page .billing-request-row.is-review-ready {
  background: rgba(59, 130, 246, 0.06);
}
.billing-review-inbox-page .billing-request-row.status-warning {
  background: rgba(245, 158, 11, 0.06);
}
.billing-review-inbox-page .billing-request-row.status-success {
  background: rgba(34, 197, 94, 0.05);
}
.billing-review-inbox-page .billing-request-row.status-muted {
  opacity: 0.9;
}
.billing-review-inbox-page .billing-inbox-primary-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.billing-review-inbox-page .billing-inbox-primary-title {
  font-weight: 600;
}
.billing-review-inbox-page .badge-review-ready,
.billing-review-inbox-page .billing-status-badge.tone-review,
.billing-review-inbox-page .billing-proof-badge.tone-proof {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.billing-review-inbox-page .billing-status-badge.tone-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.billing-review-inbox-page .billing-status-badge.tone-success {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}
.billing-review-inbox-page .billing-status-badge.tone-muted,
.billing-review-inbox-page .billing-proof-badge.tone-muted {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}
.billing-review-inbox-page .billing-status-badge.tone-neutral {
  background: rgba(15, 23, 42, 0.08);
  color: #334155;
}
.billing-review-inbox-page .billing-proof-count-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.billing-review-inbox-page .billing-proof-hint {
  font-size: 0.78rem;
  color: #64748b;
}
.billing-review-inbox-page .billing-inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
.billing-review-inbox-page .billing-inline-review-row > td {
  padding: 0 !important;
  background: rgba(248, 250, 252, 0.9);
}
.billing-review-inbox-page .billing-inline-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}
.billing-review-inbox-page .billing-inbox-empty-state .empty-state-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .billing-review-inbox-page .billing-inbox-actions {
    justify-content: flex-start;
  }
}


/* Billing proof visibility upgrade */
.proof-preview-card,
.billing-inline-proof-review-summary {
  display: grid;
  gap: 12px;
}

.proof-preview-meta,
.billing-inline-proof-review-summary {
  align-items: center;
  grid-template-columns: 1fr auto;
}

.proof-preview-name,
.billing-inline-proof-filename {
  font-weight: 700;
  word-break: break-word;
}

.proof-preview-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  color: var(--text-soft, rgba(255,255,255,.72));
  font-size: 13px;
}

.proof-preview-actions,
.billing-inline-proof-summary-actions,
.billing-proof-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.proof-preview-frame-wrap,
.billing-inline-proof-preview {
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  min-height: 240px;
}

.proof-preview-image,
.billing-inline-proof-image {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: rgba(0,0,0,.2);
}

.proof-preview-frame,
.billing-inline-proof-frame {
  display: block;
  width: 100%;
  min-height: 520px;
  border: 0;
  background: #fff;
}

.billing-inline-proof-review-summary {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}

.billing-inline-proof-preview {
  margin-bottom: 16px;
}

.text-muted {
  color: var(--text-soft, rgba(255,255,255,.72));
  font-size: 13px;
}

@media (max-width: 900px) {
  .proof-preview-meta,
  .billing-inline-proof-review-summary {
    grid-template-columns: 1fr;
  }

  .proof-preview-frame,
  .billing-inline-proof-frame {
    min-height: 360px;
  }
}


/* UI/Billing-02 — Billing Request Detail Review Upgrade */
.billing-request-workspace-page {
  gap: 16px;
}

.billing-request-top-grid,
.billing-request-workspace-grid {
  display: grid;
  gap: 16px;
}

.billing-request-top-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
}

.billing-request-workspace-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  align-items: start;
}

.billing-request-overview-card,
.billing-request-status-flow-card {
  display: grid;
  gap: 14px;
}

.billing-request-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.billing-overview-item,
.billing-proof-detail-card,
.billing-instruction-card {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.03);
}

.billing-overview-label,
.billing-proof-detail-label,
.billing-proof-note-label,
.billing-history-message-label,
.billing-instruction-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.billing-overview-value,
.billing-proof-detail-value,
.billing-proof-card-title,
.billing-history-title,
.billing-decision-title,
.billing-instruction-method {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.billing-overview-hint,
.billing-history-meta,
.billing-proof-card-meta,
.billing-instruction-copy,
.billing-history-copy,
.billing-decision-copy,
.billing-proof-lightbox-meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.billing-status-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.billing-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border: 1px dashed rgba(148,163,184,.22);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  text-align: center;
}

.billing-flow-step.is-active {
  border-style: solid;
  border-color: rgba(59,130,246,.28);
  background: rgba(59,130,246,.08);
}

.billing-flow-dot,
.billing-proof-step-dot,
.billing-history-marker {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(148,163,184,.65);
}

.billing-flow-label {
  font-size: 13px;
  font-weight: 700;
}

.billing-proof-toolbar,
.billing-proof-card-actions,
.billing-proof-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.billing-proof-timeline,
.billing-history-timeline,
.billing-decision-stack {
  display: grid;
  gap: 14px;
}

.billing-proof-timeline-item,
.billing-history-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.billing-proof-step {
  position: relative;
  display: flex;
  justify-content: center;
}

.billing-proof-step-line {
  position: absolute;
  top: 12px;
  bottom: -14px;
  width: 2px;
  background: rgba(148,163,184,.24);
}

.billing-proof-timeline-item:last-child .billing-proof-step-line {
  display: none;
}

.billing-proof-card,
.billing-history-card,
.billing-decision-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.03);
}

.billing-proof-card-head,
.billing-history-card-head,
.billing-proof-lightbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.billing-proof-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.billing-proof-preview-shell {
  margin-top: 12px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15,23,42,.18);
  min-height: 280px;
}

.billing-proof-preview-image,
.billing-proof-lightbox-image {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  background: rgba(0,0,0,.18);
}

.billing-proof-preview-frame,
.billing-proof-lightbox-frame {
  display: block;
  width: 100%;
  min-height: 480px;
  border: 0;
  background: #fff;
}

.billing-proof-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.billing-proof-note-box,
.billing-history-message-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(248,250,252,.04);
}

.billing-history-message-box.tone-private {
  border-color: rgba(99,102,241,.18);
  background: rgba(99,102,241,.07);
}

.billing-history-marker.tone-success,
.billing-status-badge.tone-success { background: rgba(34,197,94,.16); color: #22c55e; }
.billing-history-marker.tone-danger,
.billing-status-badge.tone-danger { background: rgba(239,68,68,.16); color: #ef4444; }
.billing-history-marker.tone-warning,
.billing-status-badge.tone-warning { background: rgba(245,158,11,.16); color: #f59e0b; }
.billing-history-marker.tone-review,
.billing-status-badge.tone-review,
.billing-proof-badge.tone-review { background: rgba(59,130,246,.16); color: #60a5fa; }
.billing-history-marker.tone-muted,
.billing-status-badge.tone-muted,
.billing-proof-badge.tone-muted { background: rgba(148,163,184,.16); color: #94a3b8; }
.billing-proof-badge.tone-proof { background: rgba(16,185,129,.16); color: #34d399; }

.billing-decision-panel-card {
  position: sticky;
  top: 92px;
}

.billing-decision-card.tone-approve { border-color: rgba(34,197,94,.18); }
.billing-decision-card.tone-need-info { border-color: rgba(245,158,11,.2); }
.billing-decision-card.tone-reject { border-color: rgba(239,68,68,.18); }

.billing-proof-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.billing-proof-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.82);
}

.billing-proof-lightbox-dialog {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(1200px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.96);
  box-shadow: 0 30px 60px rgba(2,6,23,.45);
}

.billing-proof-lightbox-body {
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.03);
  min-height: 60vh;
}

@media (max-width: 1180px) {
  .billing-request-top-grid,
  .billing-request-workspace-grid {
    grid-template-columns: 1fr;
  }

  .billing-decision-panel-card {
    position: static;
  }
}

@media (max-width: 760px) {
  .billing-status-flow,
  .billing-proof-detail-grid {
    grid-template-columns: 1fr;
  }

  .billing-proof-preview-frame,
  .billing-proof-lightbox-frame {
    min-height: 320px;
  }

  .billing-proof-lightbox-dialog {
    width: calc(100vw - 18px);
    margin: 9px auto;
    padding: 12px;
    max-height: calc(100vh - 18px);
  }
}

.billing-settings-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.billing-settings-kpi-card,
.billing-settings-card,
.billing-plan-item {
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 22px;
  background: rgba(15,23,42,.62);
}

.billing-settings-kpi-card {
  padding: 18px;
}

.billing-settings-kpi-label {
  font-size: .86rem;
  color: #94a3b8;
}

.billing-settings-kpi-value {
  margin-top: 8px;
  font-size: 2rem;
  font-weight: 700;
}

.billing-settings-kpi-meta {
  margin-top: 8px;
  color: #cbd5e1;
  font-size: .92rem;
}

.billing-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.billing-settings-card {
  padding: 18px;
}

.billing-settings-card-head,
.billing-plan-item-head,
.crud-section-head-spread {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.billing-settings-card-body {
  margin-top: 14px;
}

.billing-settings-list {
  display: grid;
  gap: 10px;
}

.billing-settings-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.12);
  background: rgba(248,250,252,.03);
}

.billing-settings-list-title,
.billing-plan-item-title {
  font-size: 1rem;
  font-weight: 600;
}

.billing-settings-list-meta,
.billing-plan-item-note {
  color: #94a3b8;
  font-size: .9rem;
  margin-top: 4px;
}

.billing-settings-empty-note {
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed rgba(148,163,184,.2);
  color: #94a3b8;
}

.billing-settings-links-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.billing-settings-link-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.12);
  background: rgba(248,250,252,.03);
  text-decoration: none;
  color: inherit;
}

.billing-settings-link-card span {
  color: #94a3b8;
  font-size: .92rem;
}

.billing-plan-list {
  display: grid;
  gap: 14px;
}

.billing-plan-item {
  padding: 18px;
}

.billing-plan-item-title-row,
.billing-plan-footer-row,
.billing-plan-inline-actions,
.billing-plan-item-actions,
.toolbar-actions-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.billing-plan-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.billing-plan-metric {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.12);
  background: rgba(248,250,252,.03);
}

.billing-plan-metric span {
  display: block;
  color: #94a3b8;
  font-size: .82rem;
}

.billing-plan-metric strong {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
}

.billing-plan-footer-row {
  justify-content: space-between;
  margin-top: 14px;
}

.billing-plan-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.billing-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(99,102,241,.12);
  color: #c7d2fe;
  font-size: .8rem;
}

.billing-tag-muted { background: rgba(148,163,184,.14); color: #cbd5e1; }
.billing-tag-usage { background: rgba(245,158,11,.14); color: #fbbf24; }
.billing-tag-safe { background: rgba(34,197,94,.14); color: #86efac; }

.toolbar-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(180px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

@media (max-width: 1180px) {
  .billing-settings-kpi-grid,
  .billing-settings-grid,
  .billing-plan-metrics,
  .toolbar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .billing-settings-kpi-grid,
  .billing-settings-grid,
  .billing-plan-metrics,
  .toolbar-grid {
    grid-template-columns: 1fr;
  }

  .billing-settings-card-head,
  .billing-plan-item-head,
  .billing-plan-footer-row,
  .crud-section-head-spread {
    flex-direction: column;
    align-items: stretch;
  }
}

.billing-methods-shell-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .95fr);
  gap: 16px;
  align-items: start;
}

.billing-methods-form-card,
.billing-methods-guide-card,
.billing-settings-control-strip {
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 22px;
  background: rgba(15,23,42,.62);
}

.billing-methods-guide-card,
.billing-settings-control-strip {
  padding: 18px;
}

.billing-methods-guide-head,
.billing-settings-control-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.billing-methods-guide-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.billing-methods-guide-item {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.12);
  background: rgba(248,250,252,.03);
}

.billing-methods-guide-item strong {
  font-size: .96rem;
}

.billing-methods-guide-item span,
.billing-settings-note-card span {
  color: #94a3b8;
  font-size: .92rem;
  line-height: 1.55;
}

.billing-methods-guide-links {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.billing-settings-links-grid-wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.billing-settings-method-item {
  align-items: flex-start;
}

.billing-methods-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.billing-method-destination,
.billing-method-usage {
  display: grid;
  gap: 6px;
}

.billing-method-usage .billing-tag {
  margin-right: 6px;
  margin-bottom: 6px;
}

.field-align-end {
  align-self: end;
}

@media (max-width: 1180px) {
  .billing-methods-shell-grid,
  .billing-settings-links-grid-wide {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .billing-methods-shell-grid,
  .billing-settings-links-grid-wide {
    grid-template-columns: 1fr;
  }

  .billing-methods-guide-head,
  .billing-settings-control-head {
    flex-direction: column;
    align-items: stretch;
  }
}


/* UI/Billing-03 — Batch 3: queue and review workspace refinement */
.billing-review-inbox-page .billing-inbox-stat-card .stat-subtle {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.billing-review-inbox-page .billing-inbox-stat-card.tone-neutral {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.billing-review-inbox-page .billing-inbox-stat-card.tone-danger {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.14);
}
.billing-queue-overview-card,
.billing-decision-summary-card {
  display: grid;
  gap: 14px;
}
.billing-queue-overview-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.billing-queue-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.billing-queue-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.billing-queue-shortcut:hover {
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.24);
  background: rgba(59,130,246,.06);
}
.billing-queue-shortcut.is-active {
  border-color: rgba(59,130,246,.3);
  background: rgba(59,130,246,.09);
}
.billing-queue-shortcut-label {
  font-weight: 700;
}
.billing-review-inbox-page .billing-inbox-secondary {
  color: #64748b;
  font-size: 0.84rem;
}
.billing-review-inbox-page .billing-inbox-payment-cell {
  display: grid;
  gap: 0.3rem;
}
.billing-review-inbox-page .billing-inbox-payment-amount {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.billing-review-inbox-page .billing-inbox-table td {
  vertical-align: top;
}
.billing-request-state-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.billing-request-state-card,
.billing-request-ready-banner {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.03);
}
.billing-request-state-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.billing-request-state-value {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}
.billing-request-ready-banner {
  display: grid;
  gap: 4px;
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.18);
}
.billing-review-checklist {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 6px;
}
.billing-decision-summary-card .billing-history-message-box:first-child {
  margin-top: 0;
}
.billing-decision-panel-card .empty-state {
  margin-top: 0;
}
.billing-status-badge.tone-neutral {
  background: rgba(15,23,42,.08);
  color: #334155;
}
@media (max-width: 980px) {
  .billing-request-state-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .billing-queue-overview-meta {
    width: 100%;
  }
  .billing-request-state-strip {
    grid-template-columns: 1fr;
  }
}


/* Billing safety / control layer */
.billing-settings-controls-card { grid-column: 1 / -1; }
.billing-settings-control-list { display:grid; gap:14px; }
.billing-control-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid rgba(15,23,42,.08); border-radius:14px; background:#fff; }
.billing-control-toggle small { display:block; color:#64748b; margin-top:4px; }
.billing-request-locked-banner { border:1px solid rgba(15,23,42,.08); background:rgba(148,163,184,.12); }
.billing-safety-note-row { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }



/* UIX-05A - Admin billing and plans alignment */
.uix-billing {
  --uix-billing-border: rgba(148,163,184,.16);
  --uix-billing-border-strong: rgba(39,170,225,.28);
  --uix-billing-panel: rgba(15,23,42,.66);
  --uix-billing-panel-soft: rgba(248,250,252,.04);
  --uix-billing-text-muted: #94a3b8;
  --uix-billing-text-soft: #cbd5e1;
}

.uix-billing-panel {
  border: 1px solid var(--uix-billing-border);
  background: linear-gradient(135deg, rgba(106,44,134,.12), rgba(39,170,225,.045)), var(--uix-billing-panel);
  box-shadow: 0 18px 46px rgba(2,6,23,.20);
}

.uix-billing-hero {
  position: relative;
  overflow: hidden;
}

.uix-billing-hero::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 16px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #27AAE1, #6A2C86);
  opacity: .9;
}

.uix-billing-dashboard-grid,
.uix-billing-workspace-grid,
.uix-billing-price-summary {
  display: grid;
  gap: 16px;
}

.uix-billing-dashboard-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  align-items: stretch;
}

.uix-billing-workspace-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.uix-billing-status-panel,
.uix-billing-flow-panel,
.uix-billing-note-panel,
.uix-billing-workspace-card,
.uix-billing-price-card {
  border: 1px solid var(--uix-billing-border);
  border-radius: 18px;
  background: var(--uix-billing-panel);
}

.uix-billing-status-panel,
.uix-billing-flow-panel,
.uix-billing-note-panel {
  padding: 18px;
}

.uix-billing-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.uix-billing-status-grid,
.uix-billing-price-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.uix-billing-status-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.uix-billing-status-card,
.uix-billing-price-card,
.uix-billing-flow-step,
.uix-billing-workspace-card {
  padding: 14px 16px;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 16px;
  background: var(--uix-billing-panel-soft);
}

.uix-billing-status-label,
.uix-billing-price-card span {
  display: block;
  color: var(--uix-billing-text-muted);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.uix-billing-status-value,
.uix-billing-price-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.75rem;
  line-height: 1.1;
}

.uix-billing-status-meta,
.uix-billing-price-card small,
.uix-billing-flow-step span,
.uix-billing-workspace-card span {
  display: block;
  margin-top: 8px;
  color: var(--uix-billing-text-soft);
  font-size: .9rem;
  line-height: 1.5;
}

.uix-billing-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.uix-billing-flow {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.uix-billing-workspace-card {
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.uix-billing-workspace-card:hover,
.uix-plan-card:hover {
  transform: translateY(-1px);
  border-color: var(--uix-billing-border-strong);
  background: rgba(39,170,225,.07);
}

.uix-billing-kpi-grid .billing-settings-kpi-card,
.uix-billing-kpi-grid .client-billing-stat-card {
  background: linear-gradient(180deg, rgba(39,170,225,.07), rgba(106,44,134,.05)), rgba(15,23,42,.62);
  border-color: var(--uix-billing-border);
}

.uix-billing-table-wrap {
  border-radius: 18px;
  overflow: auto;
}

.uix-billing-bulk-toolbar {
  border-color: rgba(39,170,225,.22);
  background: rgba(39,170,225,.08);
}

.uix-billing-price-amount {
  font-weight: 800;
  color: #e0f2fe;
}

.uix-admin-plans-list .toolbar-form,
.uix-billing-prices .crud-filter-card,
.uix-billing-currencies .crud-filter-card,
.uix-billing-accounts .crud-filter-card {
  border-color: rgba(39,170,225,.14);
}

.uix-plan-card {
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

@media (max-width: 1180px) {
  .uix-billing-dashboard-grid,
  .uix-billing-workspace-grid,
  .uix-billing-status-grid,
  .uix-billing-price-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .uix-billing-dashboard-grid,
  .uix-billing-workspace-grid,
  .uix-billing-status-grid,
  .uix-billing-price-summary {
    grid-template-columns: 1fr;
  }

  .uix-billing-panel-head,
  .uix-billing-panel-actions {
    align-items: stretch;
    flex-direction: column;
  }
}



/* UIX-05B - Client billing, payments, and proof alignment */
.uix-client-billing {
  --uix-client-billing-border: rgba(148,163,184,.16);
  --uix-client-billing-border-strong: rgba(39,170,225,.28);
  --uix-client-billing-panel: rgba(15,23,42,.68);
  --uix-client-billing-soft: rgba(248,250,252,.045);
  --uix-client-billing-muted: #94a3b8;
  --uix-client-billing-text: #dbeafe;
}

.uix-client-billing-shell {
  border: 1px solid var(--uix-client-billing-border);
  background: linear-gradient(135deg, rgba(106,44,134,.11), rgba(39,170,225,.05)), rgba(15,23,42,.72);
}

.uix-client-billing-overview,
.uix-client-billing-panel,
.uix-client-plan-card,
.uix-client-payment-card,
.uix-proof-panel,
.uix-payment-status {
  border: 1px solid var(--uix-client-billing-border);
  background: var(--uix-client-billing-panel);
  box-shadow: 0 16px 38px rgba(2,6,23,.18);
}

.uix-client-billing-overview {
  border-radius: 20px;
  overflow: hidden;
}

.uix-client-billing .client-billing-hero,
.uix-client-payment-spotlight {
  background: linear-gradient(135deg, rgba(39,170,225,.11), rgba(106,44,134,.10));
  border-color: rgba(39,170,225,.18);
}

.uix-client-plan-grid {
  align-items: stretch;
}

.uix-client-plan-card {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.uix-client-plan-card::before,
.uix-client-payment-card::before,
.uix-proof-panel::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 16px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #27AAE1, #6A2C86);
  opacity: .8;
}

.uix-client-plan-card:hover,
.uix-client-payment-card:hover,
.uix-client-price-card:hover {
  transform: translateY(-1px);
  border-color: var(--uix-client-billing-border-strong);
  background: rgba(15,23,42,.78);
}

.uix-client-price-card {
  border-color: rgba(39,170,225,.18);
  background: linear-gradient(135deg, rgba(39,170,225,.08), rgba(106,44,134,.06));
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.uix-client-payments .client-billing-stats-grid,
.uix-client-payment-stats {
  gap: 14px;
}

.uix-client-payment-list-wrap {
  border: 1px solid var(--uix-client-billing-border);
  border-radius: 20px;
  padding: 18px;
  background: rgba(15,23,42,.58);
}

.uix-client-payment-card {
  position: relative;
  overflow: hidden;
}

.uix-client-payment-card .client-payment-card-actions,
.uix-client-payment-detail .page-actions {
  gap: 8px;
}

.uix-client-payment-spotlight {
  border-radius: 20px;
  border: 1px solid var(--uix-client-billing-border);
}

.uix-payment-status {
  border-radius: 18px;
}

.uix-proof-panel {
  position: relative;
  overflow: hidden;
}

.uix-proof-form {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 16px;
  background: var(--uix-client-billing-soft);
}

.uix-proof-form input[type="file"] {
  min-height: 44px;
  padding: 10px;
  border: 1px dashed rgba(39,170,225,.30);
  border-radius: 14px;
  background: rgba(2,6,23,.20);
}

.uix-proof-card {
  border-color: rgba(39,170,225,.16);
  background: linear-gradient(135deg, rgba(39,170,225,.07), rgba(248,250,252,.03));
}

.uix-client-billing .client-note-item,
.uix-client-billing .client-plan-capacity-item,
.uix-client-billing .client-payment-meta-item,
.uix-client-billing .client-copy-row {
  border-color: rgba(148,163,184,.14);
  background: rgba(248,250,252,.04);
}

.uix-client-billing .client-status-pill,
.uix-client-billing .client-plan-price-currency,
.uix-client-billing .client-payment-ref,
.uix-client-billing .client-proof-id {
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .uix-client-payment-list-wrap,
  .uix-proof-form {
    padding: 12px;
  }

  .uix-client-payment-card .client-payment-card-actions,
  .uix-client-payment-detail .page-actions,
  .uix-client-payment-detail .client-payment-destination-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .uix-client-payment-card .btn,
  .uix-client-payment-detail .page-actions .btn {
    width: 100%;
  }
}



/* UIX-06A - Admin users and RBAC legacy views */
.uix-users {
  --uix-users-border: rgba(148,163,184,.16);
  --uix-users-border-strong: rgba(39,170,225,.28);
  --uix-users-panel: rgba(15,23,42,.68);
  --uix-users-soft: rgba(248,250,252,.045);
  --uix-users-muted: #94a3b8;
  --uix-users-text: #dbeafe;
}

.uix-users .uix-rbac-panel,
.uix-users .uix-users-table-panel,
.uix-users .uix-user-form-card,
.uix-users .uix-rbac-matrix-card {
  border: 1px solid var(--uix-users-border);
  background: linear-gradient(135deg, rgba(106,44,134,.10), rgba(39,170,225,.045)), var(--uix-users-panel);
  box-shadow: 0 18px 44px rgba(2,6,23,.18);
}

.uix-users-hero {
  position: relative;
  overflow: hidden;
}

.uix-users-hero::after,
.uix-user-form-card::after,
.uix-users-table-panel::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 16px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #27AAE1, #6A2C86);
  opacity: .82;
}

.uix-user-form-card,
.uix-users-table-panel {
  position: relative;
  overflow: hidden;
}

.uix-users-actions {
  gap: 8px;
}

.uix-users-list,
.uix-user-form,
.uix-users-help {
  display: grid;
  gap: 16px;
}

.uix-privilege-warning {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(245,158,11,.22);
  border-radius: 16px;
  background: rgba(245,158,11,.08);
  color: var(--uix-users-text);
}

.uix-privilege-warning span,
.uix-privilege-warning .muted,
.uix-privilege-warning .page-head-note {
  color: #f8fafc;
  opacity: .86;
}

.uix-form-intro {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.uix-user-form-body {
  display: grid;
  gap: 16px;
}

.uix-role-badge {
  border-color: rgba(39,170,225,.22);
  background: rgba(39,170,225,.10);
  color: #bae6fd;
  letter-spacing: 0;
}

.uix-user-row-actions {
  justify-content: flex-start;
  gap: 8px;
}

.uix-users-bulk-toolbar {
  border-color: rgba(39,170,225,.22);
  background: rgba(39,170,225,.08);
  margin-bottom: 14px;
}

.uix-users-bulk-toolbar.is-empty {
  opacity: .82;
}

.uix-users-empty {
  border: 1px dashed var(--uix-users-border);
  border-radius: 16px;
  background: var(--uix-users-soft);
}

.uix-rbac-table-wrap {
  border-radius: 18px;
  overflow: auto;
}

.uix-users .table td,
.uix-users .table th {
  vertical-align: top;
}

.uix-users .form-row,
.uix-users .detail-grid {
  gap: 14px;
}

.uix-users .form-actions-note,
.uix-users .card-subtitle,
.uix-users .detail-panel-note {
  color: var(--uix-users-muted);
}

@media (max-width: 760px) {
  .uix-users-actions,
  .uix-user-row-actions,
  .uix-users .form-actions-split,
  .uix-users .bulk-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .uix-users-actions .btn,
  .uix-user-row-actions .btn,
  .uix-users .form-actions .btn,
  .uix-users .bulk-toolbar-actions .btn,
  .uix-users .bulk-toolbar-actions select {
    width: 100%;
  }
}



/* UIX-07A - Client portal shell and dashboard alignment */
.uix-client-shell {
  --uix-client-border: rgba(148,163,184,.16);
  --uix-client-border-strong: rgba(39,170,225,.28);
  --uix-client-panel: rgba(15,23,42,.70);
  --uix-client-soft: rgba(248,250,252,.045);
  --uix-client-muted: #94a3b8;
  --uix-client-text: #dbeafe;
}

.uix-client-shell-frame {
  background: radial-gradient(circle at top right, rgba(39,170,225,.10), transparent 34rem), radial-gradient(circle at bottom left, rgba(106,44,134,.12), transparent 30rem);
}

.uix-client-main-shell,
.uix-client-content,
.uix-client-container,
.uix-client-page-stage {
  min-width: 0;
}

.uix-client-header,
.uix-client-sidebar,
.uix-client-footer,
.uix-client-dashboard-card,
.uix-client-dashboard-panel,
.uix-client-status,
.uix-client-summary {
  border-color: var(--uix-client-border);
  background: linear-gradient(135deg, rgba(106,44,134,.10), rgba(39,170,225,.045)), var(--uix-client-panel);
  box-shadow: 0 18px 44px rgba(2,6,23,.18);
}

.uix-client-header {
  backdrop-filter: blur(16px);
}

.uix-client-brand,
.uix-client-sidebar-brand {
  position: relative;
}

.uix-client-brand::before,
.uix-client-sidebar-brand::before,
.uix-client-summary::before,
.uix-client-dashboard-panel::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 14px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #27AAE1, #6A2C86);
  opacity: .82;
}

.uix-client-summary,
.uix-client-dashboard-panel,
.uix-client-dashboard-card {
  position: relative;
  overflow: hidden;
}

.uix-client-header-actions {
  gap: 8px;
}

.uix-client-sidebar-nav .client-sidebar-link {
  border: 1px solid transparent;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.uix-client-sidebar-nav .client-sidebar-link:hover,
.uix-client-sidebar-nav .client-sidebar-link.active {
  transform: translateX(-1px);
  border-color: var(--uix-client-border-strong);
  background: rgba(39,170,225,.08);
}

.uix-client-sidebar .uix-client-quick-actions,
.uix-client-dashboard .uix-client-quick-actions {
  gap: 10px;
}

.uix-client-dashboard-card {
  border: 1px solid var(--uix-client-border);
  background: linear-gradient(135deg, rgba(15,23,42,.78), rgba(15,23,42,.64));
}

.uix-client-summary {
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(39,170,225,.11), rgba(106,44,134,.10)), rgba(15,23,42,.70);
}

.uix-client-summary-side {
  gap: 12px;
}

.uix-client-status-grid .uix-client-status,
.uix-client-dashboard-panel,
.uix-client-dashboard .client-dashboard-plan-card,
.uix-client-dashboard .client-dashboard-quick-card,
.uix-client-dashboard .client-dashboard-note-card,
.uix-client-dashboard .client-dashboard-timeline-item {
  border: 1px solid var(--uix-client-border);
  background: rgba(248,250,252,.045);
}

.uix-client-dashboard .client-dashboard-quick-card,
.uix-client-dashboard .client-dashboard-note-card,
.uix-client-dashboard .client-dashboard-timeline-item {
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.uix-client-dashboard .client-dashboard-quick-card:hover {
  transform: translateY(-1px);
  border-color: var(--uix-client-border-strong);
  background: rgba(39,170,225,.08);
}

.uix-client-dashboard .client-usage-progress {
  background: rgba(148,163,184,.18);
  overflow: hidden;
}

.uix-client-dashboard .client-usage-progress span {
  background: linear-gradient(90deg, #27AAE1, #6A2C86);
}

.uix-client-footer {
  border-top: 1px solid var(--uix-client-border);
}

.uix-client-dashboard .client-dashboard-panel-copy,
.uix-client-dashboard .client-dashboard-stat-meta,
.uix-client-dashboard .client-dashboard-plan-meta,
.uix-client-dashboard .client-dashboard-plan-note,
.uix-client-footer .client-footer-copy span {
  color: var(--uix-client-muted);
}

@media (max-width: 980px) {
  .uix-client-header {
    gap: 12px;
  }

  .uix-client-header-secondary,
  .uix-client-header-actions {
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .uix-client-header-primary,
  .uix-client-header-secondary,
  .uix-client-header-actions,
  .uix-client-dashboard .client-dashboard-status-row {
    align-items: stretch;
    flex-direction: column;
  }

  .uix-client-header-actions .btn,
  .uix-client-header-actions button,
  .uix-client-dashboard .client-dashboard-quick-card {
    width: 100%;
  }

  .uix-client-summary,
  .uix-client-dashboard-panel {
    border-radius: 18px;
  }
}

/* ================================
   Redesigned Header (v3)
   ================================ */
.app-header .header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  height: 56px;
}

.header-start {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}

.header-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--p), var(--b));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}

.header-brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
}

.header-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.header-end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-alert-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,107,107,.15);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: background .15s;
}
.header-alert-btn:hover { background: rgba(255,107,107,.25); }

.header-user-menu {
  position: relative;
}
.header-user-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: background .15s;
}
.header-user-menu summary::-webkit-details-marker { display: none; }
.header-user-menu summary:hover { background: rgba(255,255,255,.06); }

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--p);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.header-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.header-user-info strong { font-size: 13px; }
.header-user-info small { font-size: 11px; color: var(--muted); }

.header-user-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  min-width: 180px;
  padding: 6px 0;
  box-shadow: var(--shadow-card);
  z-index: 50;
}
[dir="rtl"] .header-user-dropdown { left: auto; right: 0; }

.header-user-dropdown a {
  display: block;
  padding: 8px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  transition: background .1s;
}
.header-user-dropdown a:hover { background: rgba(255,255,255,.06); }

.header-logout-link { color: var(--danger) !important; border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 10px !important; }

/* ================================
   Redesigned Sidebar (v3)
   ================================ */
.sidebar-mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.sidebar-mobile-bar strong { font-size: 14px; }
.sidebar-mobile-bar button {
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
}

.sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  padding: 14px 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.sidebar-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--p), var(--b));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.sidebar-brand-text strong { font-size: 15px; letter-spacing: .5px; }
.sidebar-brand-text small { font-size: 11px; color: var(--muted); }

.sidebar-iface-selector {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.sidebar-iface-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.sidebar-iface-label select {
  width: 100%;
  padding: 6px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.sidebar-nav {
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
}

.sidebar-group { margin-bottom: 2px; }

.sidebar-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  transition: color .15s;
}
.sidebar-group-toggle:hover { color: var(--text); }

.sidebar-group-caret {
  font-size: 10px;
  transition: transform .2s;
}
.sidebar-group.is-open .sidebar-group-caret { transform: rotate(180deg); }

.sidebar-subnav {
  display: none;
  padding: 0 6px 6px;
}
.sidebar-group.is-open .sidebar-subnav { display: block; }

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  transition: background .1s, border-color .1s;
  border: 1px solid transparent;
}
.sidebar-link:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.04);
}
.sidebar-link.active {
  background: rgba(39,170,225,.1);
  border-color: rgba(39,170,225,.2);
  color: var(--b);
  font-weight: 600;
}

.sidebar-link-label { flex: 1; min-width: 0; }

.sidebar-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.sidebar-badge.tone-success { background: rgba(46,204,113,.15); color: var(--success); }
.sidebar-badge.tone-warning { background: rgba(241,196,15,.15); color: var(--warning); }
.sidebar-badge.tone-danger { background: rgba(255,107,107,.15); color: var(--danger); }
.sidebar-badge.tone-info { background: rgba(39,170,225,.15); color: var(--b); }

/* ================================
   Redesigned Footer (v3)
   ================================ */
.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  font-size: 12px;
  color: var(--muted);
}

/* ================================
   Responsive overrides for new layout
   ================================ */
@media (max-width: 980px) {
  .sidebar-mobile-bar { display: flex; }
  .header-center { display: none; }
  .header-user-info { display: none; }
  .header-brand-name { display: none; }
}

/* UIX-01 admin shell design-system alignment */
.admin-shell-body {
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  background: #0b0f14;
  color: var(--admin-text, #edf3f7);
}

.admin-skip-link {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 50%;
  z-index: 1200;
  transform: translateX(-50%) translateY(-160%);
  padding: 10px 16px;
  border-radius: 999px;
  background: #f8fbff;
  color: #121721;
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .18s ease;
}

.admin-skip-link:focus {
  transform: translateX(-50%) translateY(0);
  outline: 3px solid rgba(39, 170, 225, .45);
  outline-offset: 3px;
}

.app-shell--admin {
  --admin-shell-bg: #0b0f14;
  --admin-panel: rgba(18, 24, 33, .92);
  --admin-panel-strong: rgba(23, 31, 43, .96);
  --admin-border: rgba(255, 255, 255, .10);
  --admin-border-strong: rgba(39, 170, 225, .26);
  --admin-muted: #9fb0bd;
  --admin-text: #edf3f7;
  background:
    linear-gradient(180deg, rgba(106, 44, 134, .13), transparent 320px),
    var(--admin-shell-bg);
}

.app-shell--admin .app-sidebar {
  background: linear-gradient(180deg, rgba(18, 24, 33, .98), rgba(11, 15, 20, .98));
  border-inline-start: 1px solid var(--admin-border);
  box-shadow: -18px 0 40px rgba(0, 0, 0, .26);
}

.app-shell--admin .admin-main {
  background: transparent;
}

.app-shell--admin .admin-content {
  outline: none;
}

.app-shell--admin .admin-container {
  width: min(100%, 1480px);
  padding-block: 22px 30px;
}

.app-shell--admin .app-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(11, 15, 20, .82);
  border-bottom: 1px solid var(--admin-border);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

.app-shell--admin .header-row {
  min-height: 72px;
  gap: 18px;
}

.header-brand-copy {
  display: grid;
  gap: 1px;
  line-height: 1.1;
}

.header-brand-copy strong {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0;
}

.header-brand-copy small {
  color: var(--admin-muted);
  font-size: .78rem;
  font-weight: 700;
}

.app-shell--admin .header-brand-mark,
.app-shell--admin .sidebar-brand-mark {
  background: linear-gradient(135deg, var(--p), var(--b));
  color: #fff;
  box-shadow: 0 12px 30px rgba(39, 170, 225, .18);
}

.app-shell--admin .header-title {
  color: #fff;
  font-size: 1.12rem;
}

.app-shell--admin .header-subtitle,
.app-shell--admin .header-breadcrumbs,
.app-shell--admin .header-user-meta,
.app-shell--admin .footer-meta {
  color: var(--admin-muted);
}

.app-shell--admin .header-alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: auto;
  padding-inline: 12px;
  border: 1px solid rgba(39, 170, 225, .24);
  border-radius: 999px;
  background: rgba(39, 170, 225, .10);
  color: #e9f7ff;
}

.header-alert-mark {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: var(--b);
  color: #071018;
  font-size: .75rem;
  font-weight: 900;
}

.header-alert-text {
  font-size: .82rem;
  font-weight: 800;
}

.app-shell--admin .header-user-summary,
.app-shell--admin .header-user-dropdown {
  border-color: var(--admin-border);
  background: rgba(18, 24, 33, .88);
  color: #fff;
}

.app-shell--admin .sidebar-brand-link {
  margin: 12px;
  padding: 14px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.app-shell--admin .sidebar-brand-text small,
.sidebar-brand-kicker {
  color: var(--admin-muted);
}

.sidebar-brand-kicker {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  font-weight: 700;
}

.app-shell--admin .sidebar-iface-selector {
  margin-inline: 12px;
  border-color: rgba(39, 170, 225, .20);
  background: rgba(39, 170, 225, .07);
}

.app-shell--admin .sidebar-iface-selector select {
  border-color: rgba(255, 255, 255, .12);
  background-color: rgba(10, 14, 20, .92);
  color: #fff;
}

.app-shell--admin .sidebar-group-toggle {
  color: #dbe7ef;
}

.app-shell--admin .sidebar-link {
  border: 1px solid transparent;
  color: #d9e3ea;
}

.app-shell--admin .sidebar-link:hover,
.app-shell--admin .sidebar-link:focus-visible {
  border-color: rgba(39, 170, 225, .18);
  background: rgba(39, 170, 225, .08);
  color: #fff;
}

.app-shell--admin .sidebar-link.active {
  border-color: rgba(39, 170, 225, .30);
  background: linear-gradient(90deg, rgba(39, 170, 225, .18), rgba(106, 44, 134, .18));
  color: #fff;
  box-shadow: inset 4px 0 0 var(--b);
}

.app-shell--admin .sidebar-badge {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .08);
}

.app-shell--admin .flash-stack {
  margin-bottom: 18px;
}

.admin-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid var(--admin-border);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
}

.admin-flash .flash-indicator {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: .43em;
  border-radius: 999px;
  background: currentColor;
}

.admin-flash .flash-copy {
  min-width: 0;
}

.admin-page-head {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--admin-border);
}

.admin-page-head h1 {
  color: #fff;
  letter-spacing: 0;
}

.admin-page-head .page-head-note,
.admin-page-head .page-eyebrow {
  color: var(--admin-muted);
}

.app-shell--admin .app-footer {
  border-top: 1px solid var(--admin-border);
  background: rgba(11, 15, 20, .72);
}

.app-shell--admin .footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--admin-muted);
}

.footer-brand {
  color: #fff;
  font-weight: 800;
}

@media (max-width: 980px) {
  .app-shell--admin .app-sidebar {
    width: min(84vw, 340px);
  }

  .app-shell--admin .header-row {
    min-height: 64px;
  }

  .app-shell--admin .header-alert-text,
  .app-shell--admin .header-brand-copy small,
  .app-shell--admin .header-subtitle {
    display: none;
  }

  .app-shell--admin .admin-container {
    padding-block: 16px 24px;
  }
}

@media (max-width: 640px) {
  .app-shell--admin .header-row {
    gap: 10px;
  }

  .app-shell--admin .header-end {
    gap: 8px;
  }

  .app-shell--admin .footer-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-page-head.page-head--with-actions {
    gap: 14px;
  }
}

/* UIX-02A dashboard and NOC view alignment */
.uix-02a-dashboard,
.uix-02a-noc {
  --uix2-surface: rgba(18, 24, 33, .82);
  --uix2-surface-strong: rgba(22, 30, 42, .94);
  --uix2-border: rgba(255, 255, 255, .10);
  --uix2-border-accent: rgba(39, 170, 225, .28);
  --uix2-muted: #9fb0bd;
  --uix2-text: #eef5f9;
}

.uix-02a-shell-card,
.uix-02a-noc-shell {
  border: 1px solid var(--uix2-border);
  background:
    linear-gradient(180deg, rgba(106, 44, 134, .10), transparent 260px),
    rgba(12, 17, 24, .72);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

.uix-02a-hero,
.uix-02a-noc-status {
  border: 1px solid var(--uix2-border-accent);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(39, 170, 225, .12), rgba(106, 44, 134, .13)),
    rgba(18, 24, 33, .84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.uix-02a-hero .dashboard-hero-note,
.uix-02a-noc-status .noc-status-title {
  color: #fff;
  letter-spacing: 0;
}

.uix-02a-hero .dashboard-hero-subnote,
.uix-02a-noc-status .noc-status-copy {
  color: var(--uix2-muted);
}

.uix-02a-dashboard .dashboard-header {
  align-items: end;
  border-bottom: 1px solid var(--uix2-border);
  padding-bottom: 14px;
}

.uix-02a-dashboard .dashboard-title {
  color: #fff;
  letter-spacing: 0;
}

.uix-02a-dashboard .dashboard-subtitle {
  color: var(--uix2-muted);
}

.uix-02a-dashboard-cards {
  gap: 14px;
}

.uix-02a-kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  border: 1px solid var(--uix2-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)),
    var(--uix2-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

.uix-02a-kpi-card:hover,
.uix-02a-kpi-card:focus-visible {
  border-color: var(--uix2-border-accent);
  transform: translateY(-1px);
}

.uix-02a-kpi-card .dashboard-card-kicker {
  color: var(--uix2-muted);
  font-weight: 800;
}

.uix-02a-kpi-card .dashboard-stat-value {
  color: #fff;
  font-size: clamp(1.65rem, 2vw, 2.25rem);
  letter-spacing: 0;
}

.uix-02a-kpi-card .dashboard-stat-meta {
  color: var(--uix2-muted);
}

.uix-02a-card-rail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--b), var(--p));
  opacity: .82;
}

.uix-02a-actions-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--uix2-border);
  border-radius: 8px;
  background: rgba(18, 24, 33, .68);
}

.uix-02a-actions-copy {
  display: grid;
  gap: 2px;
  min-width: 180px;
}

.uix-02a-actions-copy span {
  color: var(--uix2-muted);
  font-size: .8rem;
  font-weight: 800;
}

.uix-02a-actions-copy strong {
  color: #fff;
  font-size: .98rem;
}

.uix-02a-actions-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.uix-02a-actions-panel .btn {
  min-height: 38px;
}

.uix-02a-dashboard .dashboard-panel,
.uix-02a-noc .dashboard-panel,
.uix-02a-noc .noc-panel {
  border: 1px solid var(--uix2-border);
  border-radius: 8px;
  background: var(--uix2-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
}

.uix-02a-dashboard .dashboard-panel-title,
.uix-02a-noc .dashboard-panel-title,
.uix-02a-dashboard .chart-card-title {
  color: #fff;
  letter-spacing: 0;
}

.uix-02a-dashboard .dashboard-panel-copy,
.uix-02a-noc .dashboard-panel-copy,
.uix-02a-dashboard .chart-card-copy {
  color: var(--uix2-muted);
}

.uix-02a-incident-grid .dashboard-incident-panel,
.uix-02a-feed-panel,
.uix-02a-notes-panel {
  background: var(--uix2-surface-strong);
}

.uix-02a-activity-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.uix-02a-activity-feed {
  display: grid;
  gap: 10px;
}

.uix-02a-activity-item,
.uix-02a-dashboard .dashboard-incident-item,
.uix-02a-noc .noc-priority-item,
.uix-02a-noc .noc-activity-item,
.uix-02a-noc .noc-endpoint-item,
.uix-02a-noc .noc-alert-event-item {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.uix-02a-activity-item:hover,
.uix-02a-activity-item:focus-visible,
.uix-02a-dashboard .dashboard-incident-item:hover,
.uix-02a-noc .noc-activity-item:hover,
.uix-02a-noc .noc-endpoint-item:hover,
.uix-02a-noc .noc-alert-event-item:hover {
  border-color: rgba(39, 170, 225, .22);
  background: rgba(39, 170, 225, .06);
}

.uix-02a-chart-grid .dashboard-card,
.uix-02a-dashboard .chart-card {
  border: 1px solid var(--uix2-border);
  border-radius: 8px;
  background: rgba(18, 24, 33, .76);
}

.uix-02a-noc-top-grid .noc-top-tile,
.uix-02a-noc .noc-highlight-band-item,
.uix-02a-noc .noc-metric-card,
.uix-02a-noc .noc-attention-chip,
.uix-02a-noc .noc-priority-chip {
  border: 1px solid var(--uix2-border);
  border-radius: 8px;
  background: rgba(18, 24, 33, .78);
}

.uix-02a-noc-top-grid .noc-top-tile.is-emphasis {
  border-color: var(--uix2-border-accent);
  background:
    linear-gradient(135deg, rgba(39, 170, 225, .13), rgba(106, 44, 134, .12)),
    rgba(18, 24, 33, .86);
}

.uix-02a-noc .noc-status-side,
.uix-02a-noc .noc-grid-layout {
  gap: 14px;
}

.uix-02a-noc .noc-smart-refresh,
.uix-02a-noc .noc-focus-banner,
.uix-02a-noc .noc-spotlight,
.uix-02a-noc .noc-interface-table-wrap,
.uix-02a-noc .noc-pressure-bars,
.uix-02a-noc .noc-active-context {
  border-radius: 8px;
}

.uix-02a-noc .noc-table th {
  color: var(--uix2-muted);
}

.uix-02a-noc .noc-table td {
  color: var(--uix2-text);
}

@media (max-width: 980px) {
  .uix-02a-actions-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .uix-02a-actions-copy {
    min-width: 0;
  }

  .uix-02a-dashboard .dashboard-header {
    align-items: start;
  }
}

@media (max-width: 640px) {
  .uix-02a-shell-card,
  .uix-02a-noc-shell {
    border-radius: 0;
  }

  .uix-02a-kpi-card {
    min-height: 118px;
  }

  .uix-02a-actions-panel .btn {
    width: 100%;
  }
}

/* UIX-02B monitor and alerts view alignment */
.uix-monitor,
.uix-peer-monitor,
.uix-alerts,
.uix-alert-detail {
  --uix2b-surface: rgba(18, 24, 33, .82);
  --uix2b-surface-strong: rgba(22, 30, 42, .94);
  --uix2b-border: rgba(255, 255, 255, .10);
  --uix2b-border-accent: rgba(39, 170, 225, .28);
  --uix2b-muted: #9fb0bd;
  --uix2b-text: #eef5f9;
}

.uix-monitor-shell,
.uix-alerts-shell,
.uix-alert-detail-shell,
.uix-peer-hero {
  border: 1px solid var(--uix2b-border);
  background:
    linear-gradient(180deg, rgba(39, 170, 225, .10), transparent 260px),
    rgba(12, 17, 24, .74);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.uix-monitor .dashboard-panel,
.uix-peer-monitor .card,
.uix-alerts .card,
.uix-alert-detail .card {
  border: 1px solid var(--uix2b-border);
  border-radius: 8px;
  background: var(--uix2b-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .13);
}

.uix-monitor-hero-main,
.uix-monitor-hero-side,
.uix-peer-hero,
.uix-alert-detail-shell {
  border-color: var(--uix2b-border-accent);
  background:
    linear-gradient(135deg, rgba(39, 170, 225, .12), rgba(106, 44, 134, .12)),
    rgba(18, 24, 33, .86);
}

.uix-monitor .monitoring-hero-title,
.uix-peer-monitor .monitoring-hero-title,
.uix-alerts .dashboard-panel-title,
.uix-alert-detail .dashboard-panel-title,
.uix-monitor .chart-card-title {
  color: #fff;
  letter-spacing: 0;
}

.uix-monitor .page-head-note,
.uix-peer-monitor .page-head-note,
.uix-alerts .page-head-note,
.uix-alert-detail .page-head-note,
.uix-monitor .chart-card-copy {
  color: var(--uix2b-muted);
}

.uix-monitor-summary-cards,
.uix-peer-summary-cards,
.uix-alerts-summary-strip,
.uix-alert-detail-summary {
  gap: 14px;
}

.uix-monitor-summary-cards .dashboard-card,
.uix-peer-summary-cards .dashboard-card,
.uix-alerts-summary-strip .monitoring-alert-pill,
.uix-alert-detail-summary .monitoring-alert-pill {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--uix2b-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)),
    var(--uix2b-surface);
}

.uix-monitor-summary-cards .dashboard-card::before,
.uix-peer-summary-cards .dashboard-card::before,
.uix-alerts-summary-strip .monitoring-alert-pill::before,
.uix-alert-detail-summary .monitoring-alert-pill::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--b), var(--p));
  opacity: .78;
}

.uix-monitor-signal-grid .dashboard-panel,
.uix-monitor-insight-grid .dashboard-panel,
.uix-alerts-inbox-card,
.uix-alert-detail-card,
.uix-alert-detail-notes,
.uix-peer-context-grid .card,
.uix-peer-chart-card,
.uix-peer-events-card {
  background: var(--uix2b-surface-strong);
}

.uix-monitor-trends-grid .chart-card,
.uix-peer-chart-card {
  border: 1px solid var(--uix2b-border);
  border-radius: 8px;
  background: rgba(18, 24, 33, .78);
}

.uix-monitor .monitoring-feed-item,
.uix-monitor .dashboard-incident-item,
.uix-peer-monitor .monitoring-feed-item,
.uix-peer-monitor .monitor-peer-timeline-item,
.uix-alert-detail .incident-note-item,
.uix-alerts-row {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.uix-monitor .monitoring-feed-item:hover,
.uix-monitor .dashboard-incident-item:hover,
.uix-peer-monitor .monitoring-feed-item:hover,
.uix-peer-monitor .monitor-peer-timeline-item:hover,
.uix-alert-detail .incident-note-item:hover,
.uix-alerts-row:hover {
  border-color: rgba(39, 170, 225, .22);
  background: rgba(39, 170, 225, .06);
}

.uix-monitor .monitoring-meta-item,
.uix-peer-monitor .monitoring-meta-item,
.uix-monitor .monitoring-kpi-row,
.uix-peer-monitor .monitoring-kpi-row,
.uix-alert-detail .kv-row {
  border-color: rgba(255, 255, 255, .08);
}

.uix-monitor .monitoring-health-pill,
.uix-monitor .monitoring-filter-chip,
.uix-alerts .monitoring-filter-chip {
  border: 1px solid var(--uix2b-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
}

.uix-monitor-health-table,
.uix-alerts-table,
.uix-alert-detail .table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.uix-monitor-health-table tbody tr,
.uix-alerts-table tbody tr,
.uix-alert-detail .table tbody tr {
  background: rgba(255, 255, 255, .03);
}

.uix-monitor-health-table tbody td,
.uix-alerts-table tbody td,
.uix-alert-detail .table tbody td {
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.uix-monitor-health-table tbody td:first-child,
.uix-alerts-table tbody td:first-child,
.uix-alert-detail .table tbody td:first-child {
  border-start-start-radius: 8px;
  border-end-start-radius: 8px;
  border-inline-start: 1px solid rgba(255, 255, 255, .07);
}

.uix-monitor-health-table tbody td:last-child,
.uix-alerts-table tbody td:last-child,
.uix-alert-detail .table tbody td:last-child {
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  border-inline-end: 1px solid rgba(255, 255, 255, .07);
}

.uix-alerts-filter-card .alert-filter-grid,
.uix-monitor .monitoring-advanced-filters {
  border-radius: 8px;
}

.uix-alert-detail .incident-action-grid,
.uix-alert-detail .incident-note-form,
.uix-alerts .incident-inline-actions {
  border-radius: 8px;
}

.uix-alert-detail .code-shell pre {
  max-height: 420px;
  overflow: auto;
}

@media (max-width: 980px) {
  .uix-monitor-hero-grid,
  .uix-monitor-signal-grid,
  .uix-peer-context-grid,
  .uix-peer-chart-grid,
  .uix-peer-event-grid,
  .uix-alert-detail-main-grid,
  .uix-alert-detail-secondary-grid {
    grid-template-columns: 1fr;
  }

  .uix-alerts .incident-inline-actions,
  .uix-alert-detail .incident-action-grid {
    align-items: stretch;
  }
}

@media (max-width: 640px) {
  .uix-monitor-shell,
  .uix-alerts-shell,
  .uix-alert-detail-shell,
  .uix-peer-hero {
    border-radius: 0;
  }

  .uix-monitor .btn-row,
  .uix-alerts .btn-row,
  .uix-alert-detail .btn-row {
    align-items: stretch;
    flex-direction: column;
  }

  .uix-monitor .btn-row .btn,
  .uix-alerts .btn-row .btn,
  .uix-alert-detail .btn-row .btn {
    width: 100%;
  }
}

/* UIX-03A admin clients view alignment */
.uix-clients,
.uix-client-detail {
  --uix3a-surface: rgba(18, 24, 33, .82);
  --uix3a-surface-strong: rgba(22, 30, 42, .94);
  --uix3a-border: rgba(255, 255, 255, .10);
  --uix3a-border-accent: rgba(39, 170, 225, .28);
  --uix3a-muted: #9fb0bd;
  --uix3a-text: #eef5f9;
}

.uix-clients-hero,
.uix-client-detail-hero {
  border: 1px solid var(--uix3a-border-accent);
  background:
    linear-gradient(135deg, rgba(39, 170, 225, .11), rgba(106, 44, 134, .12)),
    rgba(12, 17, 24, .78);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.uix-clients .card,
.uix-client-detail .card,
.uix-client-section {
  border: 1px solid var(--uix3a-border);
  border-radius: 8px;
  background: var(--uix3a-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .13);
}

.uix-clients-filter-card,
.uix-clients-table-card,
.uix-client-form-card,
.uix-client-security-card,
.uix-client-peers-card {
  background: var(--uix3a-surface-strong);
}

.uix-clients .page-head-note,
.uix-client-detail .detail-panel-note,
.uix-client-detail .card-subtitle,
.uix-client-detail .form-actions-note {
  color: var(--uix3a-muted);
}

.uix-client-summary,
.uix-client-actions {
  gap: 14px;
}

.uix-client-section {
  position: relative;
  overflow: hidden;
}

.uix-client-section::before,
.uix-clients-table-card::before,
.uix-client-security-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--b), var(--p));
  opacity: .74;
}

.uix-client-token-section {
  border-color: rgba(39, 170, 225, .22);
}

.uix-client-token-section .detail-code-box {
  max-height: 140px;
  border: 1px solid rgba(39, 170, 225, .20);
  background: rgba(7, 12, 18, .72);
}

.uix-client-form-card .form-section,
.uix-client-security-card .detail-panel,
.uix-client-peers-card .table-wrap-detail {
  border-radius: 8px;
}

.uix-clients-table-wrap table,
.uix-client-peers-table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.uix-clients-table-wrap tbody tr,
.uix-client-peers-table tbody tr {
  background: rgba(255, 255, 255, .03);
}

.uix-clients-table-wrap tbody td,
.uix-client-peers-table tbody td {
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.uix-clients-table-wrap tbody td:first-child,
.uix-client-peers-table tbody td:first-child {
  border-start-start-radius: 8px;
  border-end-start-radius: 8px;
  border-inline-start: 1px solid rgba(255, 255, 255, .07);
}

.uix-clients-table-wrap tbody td:last-child,
.uix-client-peers-table tbody td:last-child {
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  border-inline-end: 1px solid rgba(255, 255, 255, .07);
}

.uix-client-actions .detail-panel,
.uix-client-security-card .detail-note-card,
.uix-client-detail .meta-row {
  border-color: rgba(255, 255, 255, .08);
}

.uix-client-actions .btn,
.uix-client-detail .form-actions .btn,
.uix-clients .bulk-toolbar-actions .btn {
  min-height: 38px;
}

.uix-clients-export {
  border-color: rgba(39, 170, 225, .22);
}

@media (max-width: 980px) {
  .uix-client-summary,
  .uix-client-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .uix-clients-hero,
  .uix-client-detail-hero {
    border-radius: 0;
  }

  .uix-client-detail .form-actions,
  .uix-client-detail .btn-row,
  .uix-clients .bulk-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .uix-client-detail .form-actions .btn,
  .uix-client-detail .btn-row .btn,
  .uix-clients .bulk-toolbar-actions .btn {
    width: 100%;
  }
}

/* UIX-03B client devices and routers view alignment */
.uix-client-devices,
.uix-client-flow {
  --uix3b-surface: rgba(18, 24, 33, .82);
  --uix3b-surface-strong: rgba(22, 30, 42, .94);
  --uix3b-border: rgba(255, 255, 255, .10);
  --uix3b-border-accent: rgba(39, 170, 225, .28);
  --uix3b-muted: #9fb0bd;
  --uix3b-text: #eef5f9;
}

.uix-client-flow-card,
.uix-client-devices .client-devices-card {
  border: 1px solid var(--uix3b-border);
  background:
    linear-gradient(180deg, rgba(39, 170, 225, .10), transparent 260px),
    rgba(12, 17, 24, .76);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.uix-client-flow-hero,
.uix-device-created-success,
.uix-router-verify-hero {
  border: 1px solid var(--uix3b-border-accent);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(39, 170, 225, .12), rgba(106, 44, 134, .12)),
    rgba(18, 24, 33, .86);
}

.uix-client-flow .client-device-flow-title,
.uix-client-devices .client-devices-hero-title,
.uix-client-devices .client-devices-section-head h3 {
  color: #fff;
  letter-spacing: 0;
}

.uix-client-flow .client-device-flow-copy,
.uix-client-devices .client-devices-hero-text,
.uix-client-devices .client-devices-section-head p,
.uix-client-flow .page-head-note {
  color: var(--uix3b-muted);
}

.uix-client-flow-metrics .client-devices-metric-card,
.uix-client-devices .client-devices-summary-card,
.uix-client-device-card,
.uix-client-router-pending .client-devices-pending-card,
.uix-client-choice-grid .client-device-choice-card,
.uix-device-created-info .client-device-info-item,
.uix-router-stage-grid .client-router-stage-card,
.uix-router-verify-grid .client-router-verify-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--uix3b-border);
  border-radius: 8px;
  background: var(--uix3b-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .13);
}

.uix-client-flow-metrics .client-devices-metric-card::before,
.uix-client-device-card::before,
.uix-router-stage-grid .client-router-stage-card::before,
.uix-router-verify-grid .client-router-verify-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--b), var(--p));
  opacity: .76;
}

.uix-client-flow-filter,
.uix-client-router-pending,
.uix-client-device-list,
.uix-router-script-card,
.uix-router-public-key-card,
.uix-router-verify-table {
  border: 1px solid var(--uix3b-border);
  border-radius: 8px;
  background: var(--uix3b-surface-strong);
}

.uix-client-device-card:hover,
.uix-client-router-pending .client-devices-pending-card:hover,
.uix-router-verify-grid .client-router-verify-card:hover {
  border-color: rgba(39, 170, 225, .22);
  background: rgba(39, 170, 225, .06);
}

.uix-client-devices .client-devices-item-actions,
.uix-client-devices .client-devices-pending-actions,
.uix-device-created .client-device-success-actions,
.uix-router-verify .inline-form {
  gap: 10px;
}

.uix-router-script-card .client-router-script-box {
  min-height: 280px;
  border: 1px solid rgba(39, 170, 225, .20);
  border-radius: 8px;
  background: rgba(7, 12, 18, .76);
  color: #e8f3f8;
}

.uix-router-public-key-card .client-device-flow-form,
.uix-device-add .client-device-flow-form {
  border-radius: 8px;
}

.uix-router-verify-table .table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.uix-router-verify-table .table tbody tr {
  background: rgba(255, 255, 255, .03);
}

.uix-router-verify-table .table tbody td {
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.uix-device-created-info {
  gap: 12px;
}

@media (max-width: 980px) {
  .uix-client-flow-hero,
  .uix-router-verify-hero,
  .uix-client-devices .client-devices-hero {
    grid-template-columns: 1fr;
  }

  .uix-client-devices .client-devices-grid,
  .uix-client-devices .client-devices-pending-grid,
  .uix-client-choice-grid,
  .uix-router-stage-grid,
  .uix-router-verify-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .uix-client-flow-card,
  .uix-client-devices .client-devices-card {
    border-radius: 0;
  }

  .uix-client-devices .client-devices-item-actions,
  .uix-client-devices .client-devices-pending-actions,
  .uix-device-created .client-device-success-actions,
  .uix-client-flow .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .uix-client-devices .client-devices-item-actions .btn,
  .uix-client-devices .client-devices-pending-actions .btn,
  .uix-device-created .client-device-success-actions .btn,
  .uix-client-flow .form-actions .btn {
    width: 100%;
  }
}

/* UIX-04A peers and interfaces view alignment */
.uix-peers,
.uix-peer-form,
.uix-interfaces {
  --uix4a-surface: rgba(18, 24, 33, .82);
  --uix4a-surface-strong: rgba(22, 30, 42, .94);
  --uix4a-border: rgba(255, 255, 255, .10);
  --uix4a-border-accent: rgba(39, 170, 225, .28);
  --uix4a-muted: #9fb0bd;
  --uix4a-text: #eef5f9;
}

.uix-network-panel {
  border: 1px solid var(--uix4a-border);
  border-radius: 8px;
  background: var(--uix4a-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .13);
}

.uix-peers-hero,
.uix-peer-form-card,
.uix-interfaces-hero {
  border-color: var(--uix4a-border-accent);
  background:
    linear-gradient(135deg, rgba(39, 170, 225, .11), rgba(106, 44, 134, .12)),
    rgba(12, 17, 24, .78);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.uix-peer-list,
.uix-interface-create-card,
.uix-interface-list-card {
  background: var(--uix4a-surface-strong);
}

.uix-peers .page-head-note,
.uix-peer-form .form-section-note,
.uix-interfaces .card-subtitle,
.uix-interfaces .page-head-note {
  color: var(--uix4a-muted);
}

.uix-peer-form-section,
.uix-peer-guidance,
.uix-interface-form,
.uix-peer-actions {
  border: 1px solid var(--uix4a-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.uix-peer-form-section,
.uix-peer-list,
.uix-interface-create-card,
.uix-interface-list-card {
  position: relative;
  overflow: hidden;
}

.uix-peer-form-section::before,
.uix-interface-create-card::before,
.uix-interface-list-card::before,
.uix-peer-list::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--b), var(--p));
  opacity: .74;
}

.uix-peer-form input,
.uix-peer-form textarea,
.uix-peer-form select,
.uix-interface-form input,
.uix-interface-form select {
  border-color: rgba(255, 255, 255, .12);
}

.uix-peer-table-wrap table,
.uix-interface-table-wrap table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.uix-peer-table-wrap tbody tr,
.uix-interface-table-wrap tbody tr {
  background: rgba(255, 255, 255, .03);
}

.uix-peer-table-wrap tbody td,
.uix-interface-table-wrap tbody td {
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.uix-peer-table-wrap tbody td:first-child,
.uix-interface-table-wrap tbody td:first-child {
  border-start-start-radius: 8px;
  border-end-start-radius: 8px;
  border-inline-start: 1px solid rgba(255, 255, 255, .07);
}

.uix-peer-table-wrap tbody td:last-child,
.uix-interface-table-wrap tbody td:last-child {
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  border-inline-end: 1px solid rgba(255, 255, 255, .07);
}

.uix-peer-export {
  border-color: rgba(39, 170, 225, .22);
}

.uix-interface-list-card .crud-inline-actions,
.uix-peer-actions .bulk-toolbar-actions {
  gap: 10px;
}

.uix-interface-card .btn,
.uix-peer-list .btn,
.uix-peer-form .btn {
  min-height: 38px;
}

@media (max-width: 980px) {
  .uix-peer-form .form-row,
  .uix-interfaces .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .uix-peers-hero,
  .uix-peer-form-card,
  .uix-interfaces-hero {
    border-radius: 0;
  }

  .uix-interface-list-card .crud-inline-actions,
  .uix-peer-actions .bulk-toolbar-actions,
  .uix-peer-form .form-actions-group {
    align-items: stretch;
    flex-direction: column;
  }

  .uix-interface-list-card .crud-inline-actions .btn,
  .uix-peer-actions .bulk-toolbar-actions .btn,
  .uix-peer-form .form-actions-group .btn {
    width: 100%;
  }
}

/* UIX-04B apply center and config view alignment */
.uix-apply {
  --uix4b-surface: rgba(18, 24, 33, .82);
  --uix4b-surface-strong: rgba(22, 30, 42, .94);
  --uix4b-border: rgba(255, 255, 255, .10);
  --uix4b-border-accent: rgba(39, 170, 225, .28);
  --uix4b-muted: #9fb0bd;
  --uix4b-text: #eef5f9;
}

.uix-apply-shell,
.uix-apply-job-shell,
.uix-config-version-shell {
  border: 1px solid var(--uix4b-border-accent);
  background:
    linear-gradient(135deg, rgba(39, 170, 225, .10), rgba(106, 44, 134, .12)),
    rgba(12, 17, 24, .78);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.uix-apply .card,
.uix-apply-status,
.uix-config-preview,
.uix-config-version-list,
.uix-apply-jobs-panel {
  border: 1px solid var(--uix4b-border);
  border-radius: 8px;
  background: var(--uix4b-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .13);
}

.uix-apply-status,
.uix-apply-jobs-panel,
.uix-config-version-list,
.uix-config-preview {
  position: relative;
  overflow: hidden;
}

.uix-apply-status::before,
.uix-apply-jobs-panel::before,
.uix-config-version-list::before,
.uix-config-preview::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--b), var(--p));
  opacity: .74;
}

.uix-apply .card-title,
.uix-apply .detail-panel-title {
  color: #fff;
  letter-spacing: 0;
}

.uix-apply .card-subtitle,
.uix-apply .detail-panel-note,
.uix-apply .page-head-note {
  color: var(--uix4b-muted);
}

.uix-apply-actions form,
.uix-apply-error,
.uix-config-preview {
  background: var(--uix4b-surface-strong);
}

.uix-apply-actions .page-actions,
.uix-apply .btn-row,
.uix-apply .inline-form {
  gap: 10px;
}

.uix-apply-table,
.uix-config-version-list table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.uix-apply-table tbody tr,
.uix-config-version-list table tbody tr {
  background: rgba(255, 255, 255, .03);
}

.uix-apply-table tbody td,
.uix-config-version-list table tbody td {
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.uix-config-preview-box,
.uix-apply .detail-code-box,
.uix-apply .codebox {
  max-height: 520px;
  border: 1px solid rgba(39, 170, 225, .20);
  border-radius: 8px;
  background: rgba(7, 12, 18, .78);
  color: #e8f3f8;
}

.uix-apply-error .codebox {
  border-color: rgba(239, 68, 68, .26);
}

.uix-apply .meta-row {
  border-color: rgba(255, 255, 255, .08);
}

.uix-apply .btn {
  min-height: 38px;
}

@media (max-width: 980px) {
  .uix-apply .card-split,
  .uix-apply-job-grid,
  .uix-config-version-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .uix-apply-shell,
  .uix-apply-job-shell,
  .uix-config-version-shell {
    border-radius: 0;
  }

  .uix-apply .btn-row,
  .uix-apply .page-actions,
  .uix-apply .inline-form {
    align-items: stretch;
    flex-direction: column;
  }

  .uix-apply .btn-row .btn,
  .uix-apply .page-actions .btn,
  .uix-apply .inline-form .btn {
    width: 100%;
  }
}


/* UIX-07B - Client auth and onboarding alignment */
.uix-client-auth {
  --uix-auth-border: rgba(148,163,184,.16);
  --uix-auth-border-strong: rgba(39,170,225,.30);
  --uix-auth-panel: rgba(15,23,42,.76);
  --uix-auth-soft: rgba(248,250,252,.045);
  --uix-auth-muted: #94a3b8;
  --uix-auth-text: #dbeafe;
  min-height: min(100vh, 980px);
}

.uix-client-auth-container {
  width: min(100%, 1040px);
}

.uix-client-auth .uix-auth-panel,
.uix-client-auth.uix-client-onboard .uix-auth-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--uix-auth-border-strong);
  background: linear-gradient(135deg, rgba(106,44,134,.13), rgba(39,170,225,.055)), var(--uix-auth-panel);
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
}

.uix-client-auth .uix-auth-panel::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--p), var(--b));
  opacity: .95;
}

.uix-client-auth .page-head,
.uix-client-auth .client-auth-form,
.uix-client-auth .auth-note,
.uix-client-auth .alert,
.uix-client-auth .page-head-note {
  position: relative;
  z-index: 1;
}

.uix-client-auth .uix-client-auth-form {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--uix-auth-border);
  border-radius: 16px;
  background: rgba(2,6,23,.24);
}

.uix-client-auth .uix-auth-field {
  padding: 12px;
  border: 1px solid var(--uix-auth-border);
  border-radius: 14px;
  background: var(--uix-auth-soft);
}

.uix-client-auth .uix-auth-field input {
  min-height: 44px;
}

.uix-client-auth .field-help,
.uix-client-auth .page-head-note,
.uix-client-auth .auth-note span {
  color: var(--uix-auth-muted);
}

.uix-client-auth .uix-auth-note-grid {
  margin-top: 18px;
  border: 1px solid var(--uix-auth-border);
  background: rgba(15,23,42,.48);
}

.uix-client-auth .client-auth-note-item {
  padding: 12px;
  border: 1px solid var(--uix-auth-border);
  border-radius: 14px;
  background: rgba(248,250,252,.035);
}

.uix-client-auth .client-auth-actions .btn,
.uix-client-auth .form-actions .btn {
  min-height: 44px;
}

.uix-client-onboard {
  display: grid;
  place-items: center;
  padding-block: 28px;
}

.uix-client-onboard .uix-onboarding-panel {
  width: min(100%, 720px);
}

.uix-client-onboard .uix-onboarding-note {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(39,170,225,.22);
  border-radius: 14px;
  background: rgba(39,170,225,.07);
}

@media (max-width: 720px) {
  .uix-client-auth .uix-client-auth-form {
    padding: 12px;
  }

  .uix-client-auth .uix-auth-field {
    padding: 10px;
  }

  .uix-client-auth .client-auth-actions {
    display: grid;
  }

  .uix-client-auth .client-auth-actions .btn,
  .uix-client-auth .form-actions .btn {
    width: 100%;
  }
}


/* UIX-08A - Accessibility, responsiveness, and final polish */
:root {
  --uix-focus-ring: rgba(125, 211, 252, .95);
  --uix-focus-glow: rgba(39, 170, 225, .22);
}

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--uix-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--uix-focus-glow);
}

:where(.btn, button, input, select, textarea, .sidebar-link, .client-sidebar-link, .admin-sidebar-link, .client-dashboard-quick-card, .client-payment-card, .client-plan-card, .uix-billing-workspace-card):focus-visible {
  border-color: rgba(125, 211, 252, .72);
}

:where(.btn, button, input, select, textarea) {
  min-height: 42px;
}

:where(input, select, textarea) {
  max-width: 100%;
}

:where(.table-wrap, .table-wrap-detail, .uix-client-payment-list-wrap, .uix-clients-table-wrap, .uix-peer-list, .uix-billing-table-wrap) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.table, table) {
  overflow-wrap: anywhere;
}

:where(.card, .dashboard-card, .dashboard-panel, .uix-client-dashboard-panel, .uix-client-section, .uix-billing-panel, .uix-apply-panel, .uix-users .card) {
  min-width: 0;
}

:where(.page-actions, .form-actions, .card-actions, .btn-row, .bulk-toolbar-actions, .client-header-actions, .uix-client-header-actions) {
  gap: 10px;
}

:where(.alert, .flash, .page-head-note, .empty-state, .client-empty-state, .compact-empty-state) {
  line-height: 1.75;
}

:where(.field, .form-section, .detail-panel, .client-auth-form, .uix-client-auth-form) {
  min-width: 0;
}

:where(.field-help, .card-subtitle, .page-head-note, .muted) {
  line-height: 1.7;
}

[dir="rtl"] :where(.page-actions, .form-actions, .card-actions, .btn-row, .bulk-toolbar-actions) {
  justify-content: flex-start;
}

@media (max-width: 980px) {
  :where(.app-content, .client-content) {
    padding-inline: 0;
  }

  :where(.container, .client-container, .uix-client-container) {
    padding-inline: 14px;
  }

  :where(.page-head, .card-head, .table-toolbar, .bulk-toolbar, .client-header, .uix-client-header) {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  :where(.page-actions, .form-actions, .card-actions, .btn-row, .bulk-toolbar-actions, .client-header-actions, .uix-client-header-actions) {
    align-items: stretch;
  }

  :where(.page-actions .btn, .form-actions .btn, .card-actions .btn, .btn-row .btn, .bulk-toolbar-actions .btn, .client-header-actions .btn, .uix-client-header-actions .btn) {
    width: 100%;
  }

  :where(.card, .dashboard-card, .dashboard-panel, .client-auth-card, .client-devices-card, .client-billing-panel, .uix-client-dashboard-panel, .uix-billing-panel, .uix-apply-panel) {
    border-radius: 16px;
    padding: 14px;
  }

  :where(.table-toolbar, .bulk-toolbar) {
    padding: 12px;
  }

  :where(.badge, .status-badge, .client-status-pill, .admin-sidebar-item-badge) {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  :where(.container, .client-container, .uix-client-container) {
    padding-inline: 10px;
  }

  :where(.page-title, .client-dashboard-title, .client-device-flow-title, .card-title) {
    overflow-wrap: anywhere;
  }

  :where(.btn, button, input, select, textarea) {
    min-height: 44px;
  }
}

/* UIX-QA-01 - Post manual QA visual fixes */
.app-shell--admin .app-header {
  padding-inline: 0;
}

.app-shell--admin .header-row {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
}

.app-shell--admin .header-start,
.app-shell--admin .header-center,
.app-shell--admin .header-end {
  min-width: 0;
}

.app-shell--admin .header-start {
  flex: 0 1 auto;
}

.app-shell--admin .header-center {
  flex: 1 1 18rem;
}

.app-shell--admin .header-end {
  flex: 0 0 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.app-shell--admin .sidebar-toggle {
  display: none;
}

.app-shell--admin .header-alert-btn,
.app-shell--admin .header-user-menu,
.app-shell--admin .header-user-menu summary {
  flex: 0 0 auto;
}

.app-shell--admin .header-alert-btn {
  min-height: 38px;
  white-space: nowrap;
}

.app-shell--admin .header-user-menu summary {
  max-width: 220px;
  min-height: 42px;
}

.app-shell--admin .header-user-info {
  min-width: 0;
}

.app-shell--admin .header-user-info strong,
.app-shell--admin .header-user-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uix-02a-noc .noc-severity-column {
  min-width: 0;
}

.uix-02a-noc .noc-mini-feed-item {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
  line-height: 1.45;
}

.uix-02a-noc .noc-mini-feed-item > span:not(.badge):not(.noc-signal-dot):not(.noc-mini-feed-age) {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.uix-02a-noc .noc-mini-feed-age {
  flex: 0 0 auto;
  margin-inline-start: auto;
  white-space: nowrap;
}

.uix-02a-noc .noc-priority-item-top,
.uix-02a-noc .noc-alert-event-top,
.uix-02a-noc .noc-endpoint-item-top,
.uix-02a-noc .noc-activity-item-top {
  flex-wrap: wrap;
}

.uix-02a-noc .noc-priority-item-title,
.uix-02a-noc .noc-priority-item-copy,
.uix-02a-noc .noc-alert-event-title,
.uix-02a-noc .noc-alert-event-meta,
.uix-02a-noc .noc-endpoint-item-title,
.uix-02a-noc .noc-endpoint-item-meta {
  overflow-wrap: anywhere;
}

.uix-billing-dashboard .uix-billing-dashboard-grid {
  gap: 20px;
}

.uix-billing-dashboard .uix-billing-status-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.uix-billing-dashboard .uix-billing-panel-head {
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148,163,184,.14);
}

.uix-billing-dashboard .uix-billing-panel-head > div {
  min-width: 0;
}

.uix-billing-dashboard .uix-billing-panel-head .badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

.uix-billing-dashboard .uix-billing-status-grid,
.uix-billing-dashboard .uix-billing-flow {
  margin-top: 0;
}

.uix-billing-dashboard .uix-billing-status-grid {
  gap: 14px;
}

.uix-billing-dashboard .uix-billing-status-card {
  min-width: 0;
  border-radius: 12px;
}

.uix-billing-dashboard .uix-billing-status-meta,
.uix-billing-dashboard .uix-billing-flow-step span,
.uix-billing-dashboard .uix-billing-workspace-card span {
  overflow-wrap: anywhere;
}

.uix-billing-dashboard .uix-billing-panel-actions {
  margin-top: auto;
  padding-top: 2px;
}

.uix-billing-dashboard .uix-billing-workspace-grid {
  gap: 14px;
}

.uix-billing-dashboard .uix-billing-workspace-card {
  border-radius: 12px;
  min-height: 116px;
}

.uix-billing-dashboard .uix-billing-workspace-card[href$="/admin/billing/requests"] {
  border-color: rgba(39,170,225,.32);
  background: linear-gradient(135deg, rgba(39,170,225,.13), rgba(106,44,134,.08)), var(--uix-billing-panel-soft);
}

@media (max-width: 980px) {
  .app-shell--admin .sidebar-toggle {
    display: inline-grid;
    place-items: center;
  }

  .app-shell--admin .header-row {
    gap: 12px;
  }

  .app-shell--admin .header-start {
    flex: 1 1 auto;
  }

  .app-shell--admin .header-center {
    display: none;
  }

  .app-shell--admin .header-end {
    max-width: 46%;
  }
}

@media (max-width: 640px) {
  .app-shell--admin .header-row {
    padding-inline: 12px;
  }

  .app-shell--admin .header-brand-copy {
    display: none;
  }

  .app-shell--admin .header-end {
    max-width: none;
  }

  .app-shell--admin .header-alert-btn {
    width: 38px;
    padding-inline: 0;
  }

  .uix-02a-noc .noc-mini-feed-item {
    align-items: flex-start;
  }

  .uix-02a-noc .noc-mini-feed-age {
    margin-inline-start: 0;
  }

  .uix-billing-dashboard .uix-billing-panel-head {
    align-items: stretch;
  }

  .uix-billing-dashboard .uix-billing-panel-head .badge,
  .uix-billing-dashboard .uix-billing-panel-actions .btn {
    width: 100%;
  }
}