:root {
  --brand-navy: #071126;
  --brand-navy-2: #0B132B;
  --brand-slate: #0F172A;
  --brand-cobalt: #1E40AF;
  --brand-blue: #2563EB;
  --brand-silver: #D6DCE4;
  --brand-white: #FFFFFF;
  --brand-muted: #94A3B8;
  --bg: #071126;
  --shell: #0B132B;
  --panel: #0F172A;
  --panel-2: #111827;
  --panel-3: #1e293b;
  --card: #0F172A;
  --card-soft: #111827;
  --border: #1e3a5f;
  --border-soft: #243b53;
  --text: #f8fafc;
  --muted: #94A3B8;
  --muted-2: #64748b;
  --blue: #2563EB;
  --blue-soft: rgba(37, 99, 235, 0.18);
  --green: #22c55e;
  --green-soft: rgba(34, 197, 94, 0.14);
  --yellow: #f59e0b;
  --yellow-soft: rgba(245, 158, 11, 0.14);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.14);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

/* ====================================================== */
/* INDEX — style.css (V181.1 navigation)                */
/* ====================================================== */
/*  1. :root design tokens                               */
/*  2. Base reset, links, typography                     */
/*  3. App shell & sidebar layout                        */
/*  4. Navigation & rail patterns                        */
/*  5. Cards, panels, tables                             */
/*  6. Forms, buttons, inputs                            */
/*  7. Tickets, evidence, CLI surfaces                  */
/*  8. Dashboards & growth surfaces                     */
/*  9. Tablet & mobile responsive overrides              */
/* 10. Animations & reduced-motion guards                */
/* 11. Accessibility helpers                            */
/* 12. Builder V181 upgrade console                     */
/* 13. Visual refresh / utility tails                    */
/* ====================================================== */
/*
 * FUTURE CSS MODULE MAP (V182.3 planning — single file for now)
 *   static/css/base/tokens.css      — :root + reset + typography
 *   static/css/layout/shell.css     — app shell, sidebar, nav rail
 *   static/css/components/cards.css — cards, panels, tables, forms
 *   static/css/features/tickets.css — ticket + evidence + CLI surfaces
 *   static/css/features/builder.css — Builder V181 console blocks
 *   static/css/responsive/tablet-mobile.css — breakpoints only
 *   static/css/utilities/animations.css — motion + a11y guards
 * Do not split files until a build step exists; keep this map aligned with INDEX above.
 */

/* ====================================================== */
/* BASE RESET & GLOBAL ELEMENTS */
/* ====================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] pre,
html[dir="rtl"] code,
html[dir="rtl"] .manual-log-viewer,
html[dir="rtl"] .cli-output {
  direction: ltr;
  text-align: left;
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.12), transparent 34%),
    linear-gradient(135deg, #050b14 0%, #07111f 45%, #050b14 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

a { color: #93c5fd; text-decoration: none; }
a:hover { color: #bfdbfe; }

h1, h2, h3, p, td, th { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: 1.55rem; line-height: 1.12; }
h2 { margin: 0 0 14px; font-size: 1.05rem; }
h3 { margin: 14px 0 8px; font-size: 0.94rem; }
p { margin-top: 0; }

/* ====================================================== */
/* APP SHELL & PRIMARY LAYOUT */
/* ====================================================== */

.ops-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 22px 18px;
  border-right: 1px solid var(--border);
  background: rgba(7, 17, 31, 0.96);
  box-shadow: var(--shadow);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 8px 22px;
  color: var(--text);
}

.sidebar-brand:hover { color: var(--text); }
.sidebar-brand strong { display: block; font-size: 1.35rem; letter-spacing: 0; }
.sidebar-brand small { display: block; color: var(--muted); line-height: 1.35; }

.brand-orbit {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(96, 165, 250, 0.5);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #2563eb, #0f3c91);
  font-weight: 950;
  box-shadow: 0 0 28px rgba(37, 99, 235, 0.35);
}

.sidebar-nav { display: grid; gap: 4px; }
.sidebar-nav p {
  margin: 18px 10px 7px;
  color: var(--muted-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 800;
}

.sidebar-nav a:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--blue-soft);
}

.content-shell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.top-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 11, 20, 0.86);
  backdrop-filter: blur(14px);
}

.top-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.mobile-menu-button {
  display: none;
  margin-bottom: 8px;
}

.language-form select {
  min-width: 118px;
  min-height: 44px;
}

.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;
}

.user-chip, .hero-user {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--text);
  background: var(--panel-3);
  font-weight: 950;
}

.page {
  width: min(100% - 44px, 1440px);
  margin: 0 auto;
  padding: 28px 0 54px;
  flex: 1;
}

.footer {
  padding: 20px 28px;
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  text-align: center;
  font-weight: 800;
  background: rgba(7, 17, 31, 0.8);
}
.footer span,
.footer small {
  display: block;
  margin-top: 4px;
}
.footer strong { color: var(--text); }

.eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lead, .muted, .queue-summary { color: var(--muted); }

.panel,
.stat-card,
.kpi-card,
.ticket-card,
.detail-block,
.filters,
.table-shell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15, 32, 53, 0.98), rgba(13, 27, 46, 0.98));
  box-shadow: var(--shadow);
}

.user-chip.compact {
  width: 34px;
  height: 34px;
  font-size: 0.78rem;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 6px 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(15, 32, 53, 0.72);
}

.sidebar-user strong,
.auth-copy strong {
  display: block;
  color: var(--text);
  line-height: 1.1;
}

.sidebar-user small,
.auth-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.auth-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(15, 32, 53, 0.72);
}

.logout-form { margin: 0; }

.panel, .detail-block, .filters { padding: 18px; }

.ops-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(15, 32, 53, 0.96));
  box-shadow: var(--shadow);
}

.ops-hero h2 {
  margin: 6px 0;
  font-size: 1.8rem;
}

.ops-hero p {
  max-width: 780px;
  color: var(--muted);
  margin-bottom: 0;
}

.hero-actions,
.filter-actions,
.workflow-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgba(19, 38, 61, 0.88);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.button:hover {
  color: var(--text);
  text-decoration: none;
  border-color: #60a5fa;
  background: var(--panel-3);
  transform: translateY(-1px);
}

.button.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.button.secondary { background: rgba(15, 32, 53, 0.92); }
.button.success { border-color: var(--green); background: #15803d; color: #fff; }
.button.warning { border-color: var(--yellow); background: #a16207; color: #fff; }
.button.danger { border-color: var(--red); background: #991b1b; color: #fff; }
.button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted);
  background: var(--card-soft);
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-wrap: normal;
  line-height: 1.1;
}

.neutral { color: #bfdbfe; border-color: rgba(147,197,253,0.35); background: rgba(37,99,235,0.12); }
.priority-low, .status-resolved, .sla-healthy, .mode-training { color: #86efac; border-color: rgba(34,197,94,0.35); background: var(--green-soft); }
.priority-medium, .status-triage, .status-investigating, .status-action-taken, .status-verification, .mode-guided { color: #fde68a; border-color: rgba(245,158,11,0.35); background: var(--yellow-soft); }
.priority-high, .priority-critical, .sla-breached, .status-escalated, .mode-solo, .mode-restricted { color: #fca5a5; border-color: rgba(239,68,68,0.42); background: var(--red-soft); }
.status-new, .sla-at-risk { color: #93c5fd; border-color: rgba(37,99,235,0.42); background: var(--blue-soft); }
.risk-low { color: #86efac; border-color: rgba(34,197,94,0.35); background: var(--green-soft); }
.risk-medium { color: #fde68a; border-color: rgba(245,158,11,0.35); background: var(--yellow-soft); }
.risk-high, .risk-critical { color: #fca5a5; border-color: rgba(239,68,68,0.42); background: var(--red-soft); }
.replay-badge { color: #bfdbfe; border-color: rgba(96,165,250,0.5); background: var(--blue-soft); }
.difficulty-beginner { color: #86efac; border-color: rgba(34,197,94,0.35); background: var(--green-soft); }
.difficulty-intermediate { color: #fde68a; border-color: rgba(245,158,11,0.35); background: var(--yellow-soft); }
.difficulty-advanced { color: #fca5a5; border-color: rgba(239,68,68,0.42); background: var(--red-soft); }

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

.kpi-card, .stat-card {
  padding: 17px;
}

.kpi-card span,
.stat-card span {
  color: var(--muted);
  font-weight: 850;
}

.kpi-card strong,
.stat-card strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 1.75rem;
  line-height: 1.1;
}

.kpi-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted-2);
  font-weight: 750;
}

.ops-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(330px, 0.8fr);
  gap: 18px;
  margin: 18px 0;
}

.panel-large { min-height: 420px; }
.side-stack { display: grid; gap: 14px; }

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  margin: 18px 0;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.metric-list { display: grid; gap: 10px; }
.metric-list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.metric-list div:last-child { border-bottom: 0; }
.metric-list span { color: var(--muted); }
.metric-list strong { color: var(--text); }
.ok-text { color: var(--green) !important; }
.warn-text { color: var(--yellow) !important; }
.danger-text { color: var(--red) !important; }

.progress-ring-lite {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin: 12px auto 4px;
  border: 12px solid rgba(37,99,235,0.24);
  border-top-color: var(--green);
  border-radius: 50%;
  text-align: center;
}

.progress-ring-lite strong,
.progress-ring-lite span { display: block; }
.progress-ring-lite span { color: var(--muted); font-size: 0.82rem; }

.activity-list,
.compact-list,
.hint-list,
.task-list {
  padding-left: 20px;
}

.activity-list li,
.compact-list li,
.hint-list li,
.task-list li {
  margin: 8px 0;
  color: var(--muted);
}

.activity-list span { color: #93c5fd; font-weight: 950; }

.table-shell { overflow: auto; }
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 13px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  background: rgba(16, 32, 51, 0.82);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tbody tr:hover { background: rgba(37, 99, 235, 0.08); }
.compact-table td, .compact-table th { padding: 10px 11px; }
.empty { color: var(--muted-2); text-align: center; }

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

.ticket-card { padding: 16px; }
.ticket-card-top,
.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ticket-code {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 7px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.16);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 950;
}

.ticket-code.copied { outline: 2px solid var(--green); }

.ticket-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(13,27,46,0.98));
}

.ticket-header h1 { margin-top: 10px; font-size: 1.65rem; }
.ticket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.ticket-main, .ticket-side { min-width: 0; }
.ticket-side { display: grid; align-content: start; gap: 14px; }

.ticket-quickbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.quick-stat {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.quick-stat span { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 850; }
.quick-stat strong { display: block; margin-top: 4px; color: var(--text); }

.tab-bar {
  position: sticky;
  top: 76px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(7, 17, 31, 0.92);
  backdrop-filter: blur(12px);
}

.tab-button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--panel);
  font-weight: 950;
  cursor: pointer;
}

.tab-button:hover,
.tab-button.active {
  color: var(--text);
  border-color: #60a5fa;
  background: var(--blue-soft);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 850;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgba(5, 11, 20, 0.72);
  font: inherit;
  padding: 10px 11px;
}

textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  border-color: #60a5fa;
}

.two-col,
.checkbox-grid,
.filters,
.shift-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.checkbox-row input { width: auto; margin-top: 3px; }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.tag-list span {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.12);
  font-size: 0.78rem;
  font-weight: 850;
}

.training-layer-panel {
  border-color: rgba(96, 165, 250, 0.26);
}

.criteria-list {
  display: grid;
  gap: 9px;
  margin: 10px 0 16px;
}

.criteria-list .checkbox-row {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(5, 11, 20, 0.32);
}

.workspace-prep-panel {
  margin: 18px 0;
}

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

.workspace-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 126px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgba(19, 38, 61, 0.72);
}

.workspace-card:hover {
  color: var(--text);
  text-decoration: none;
  border-color: #60a5fa;
  background: rgba(37, 99, 235, 0.14);
}

.workspace-card strong {
  color: #bfdbfe;
  font-size: 0.98rem;
}

.workspace-card span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.activity-user-agent {
  max-width: 360px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.task-engine-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.task-engine-summary div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(5, 11, 20, 0.34);
}

.task-engine-summary span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.task-engine-summary strong {
  color: var(--text);
  font-size: 1.02rem;
}

.task-engine-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.task-engine-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(19, 38, 61, 0.72);
}

.task-engine-card.task-complete {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.task-meter {
  margin: 10px 0 4px;
}

.builder-form {
  display: grid;
  gap: 13px;
}

.builder-output {
  min-height: 220px;
  font-family: Consolas, "SFMono-Regular", "Courier New", monospace;
}

.builder-diff,
.builder-test-output,
.builder-warnings {
  max-height: 520px;
  font-size: 0.82rem;
}

.builder-results-panel textarea {
  width: 100%;
}

.lab-grid,
.responsive-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lab-card,
.responsive-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15, 32, 53, 0.98), rgba(13, 27, 46, 0.98));
  box-shadow: var(--shadow);
  padding: 18px;
  min-width: 0;
}

.lab-card h2,
.responsive-card h2 {
  font-size: 1.1rem;
}

.compact-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mini-performance-card {
  box-shadow: none;
  background: rgba(5, 11, 20, 0.28);
}

.mobile-only { display: none; }

.mobile-action-bar {
  display: none;
}

body.focus-mode .training-layer-panel,
body.focus-mode .workspace-prep-panel,
body.focus-mode .training-mode-panel,
body.focus-mode #walkthrough .detail-block:not(:last-child) {
  display: none;
}

body.focus-mode .top-header {
  border-bottom-color: rgba(96, 165, 250, 0.58);
}

pre, code {
  font-family: Consolas, "SFMono-Regular", "Courier New", monospace;
}

pre {
  white-space: pre-wrap;
  overflow: auto;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: #dbeafe;
  background: #06101d;
}

.evidence-stack { display: grid; gap: 12px; }
.evidence-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-soft);
}

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

.beginner-support-panel,
.manual-log-panel,
.training-mode-panel,
.score-panel {
  border-color: rgba(96, 165, 250, 0.45);
}

.support-card,
.walkthrough-step-detail {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.support-grid,
.walkthrough-fields {
  display: grid;
  gap: 10px;
}

.support-grid div,
.walkthrough-fields div,
.breakdown-grid div,
.log-prompts p {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(5, 11, 20, 0.42);
}

.support-grid strong,
.walkthrough-fields strong {
  display: block;
  margin-bottom: 5px;
  color: #93c5fd;
}

.warning-banner,
.validation-warning {
  padding: 12px 14px;
  border: 1px solid rgba(245,158,11,0.38);
  border-radius: var(--radius-sm);
  color: #fde68a;
  background: var(--yellow-soft);
  font-weight: 850;
}

.mode-selector-form {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}

.score-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.score-row strong {
  font-size: 1.85rem;
  color: #93c5fd;
}

.score-meter,
.walkthrough-progress {
  height: 10px;
  margin: 12px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(143, 163, 191, 0.16);
}

.score-meter span,
.walkthrough-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

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

.breakdown-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: capitalize;
}

.breakdown-grid strong { display: block; margin-top: 4px; }

.log-prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.manual-log-viewer {
  max-height: 500px;
  overflow: auto;
  margin: 14px 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: #020617;
}

.manual-log-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(230px, auto);
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #dbeafe;
}

.manual-log-line code { color: #e2e8f0; white-space: pre-wrap; }
.line-number { color: #60a5fa; font-weight: 950; text-align: right; }
.line-actions { display: flex; flex-wrap: wrap; gap: 8px; color: #bfdbfe; font-size: 0.84rem; }
.marked-suspicious { background: rgba(185, 28, 28, 0.34); }
.marked-noise { background: rgba(71, 85, 105, 0.48); }

.cli-block { margin-top: 18px; }
.cli-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.cli-prompt {
  padding: 10px;
  border-radius: var(--radius-sm);
  color: #86efac;
  background: #020617;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 850;
}

.cli-output {
  margin-top: 12px;
  color: #d1fae5;
  background: #020617;
}

.walkthrough-timeline {
  display: grid;
  gap: 8px;
  padding-left: 20px;
}

.walkthrough-timeline li {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(5, 11, 20, 0.42);
}

.walkthrough-timeline .active-step { border-color: #60a5fa; background: var(--blue-soft); font-weight: 950; }
.walkthrough-timeline .done-step { border-color: rgba(34,197,94,0.35); background: var(--green-soft); }

.artifact-editor { display: grid; gap: 14px; }
.artifact-editor textarea { min-height: 560px; font-family: Consolas, "Courier New", monospace; line-height: 1.5; }

.business-context-panel textarea { min-height: 110px; }

.replay-panel .metric-list {
  margin: 12px 0;
}

.replay-panel strong {
  overflow-wrap: anywhere;
}

.risk-panel p:last-child { margin-bottom: 0; }

.report-status-card .metric-list { margin-top: 14px; }

.screenshot-list,
.github-path-list {
  display: grid;
  gap: 10px;
}

.mini-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(5, 11, 20, 0.38);
}

.mini-card strong {
  display: block;
  margin-bottom: 8px;
  color: #bfdbfe;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.86rem;
}

.mini-card p {
  margin: 6px 0;
  color: var(--muted);
}

.mini-card span { color: var(--text); font-weight: 900; }

.github-path-list code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inline-admin-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}

.inline-admin-form input {
  width: min(260px, 100%);
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 26px;
}

.login-shell {
  width: min(100%, 1040px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 22px;
  align-items: stretch;
}

.login-brand,
.login-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15, 32, 53, 0.98), rgba(7, 17, 31, 0.98));
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px;
  padding: 38px;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.2), rgba(15,32,53,0.96)),
    linear-gradient(180deg, rgba(15,32,53,0.98), rgba(7,17,31,0.98));
}

.login-brand .brand-orbit {
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  font-size: 1.35rem;
}

.login-brand h1 {
  margin-bottom: 8px;
  font-size: 3rem;
}

.login-card {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 30px;
}

.auth-form {
  display: grid;
  gap: 13px;
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
}

.auth-note {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: rgba(5, 11, 20, 0.5);
  font-size: 0.9rem;
  font-weight: 800;
}

.flash-stack { display: grid; gap: 8px; margin-bottom: 16px; }
.flash {
  padding: 12px 14px;
  border: 1px solid rgba(96,165,250,0.42);
  border-radius: var(--radius-sm);
  color: #bfdbfe;
  background: var(--blue-soft);
  font-weight: 850;
  transition: opacity 240ms ease;
}

.flash.flash-fade { opacity: 0.72; }

@media (max-width: 1024px) {
  .ops-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-nav p { grid-column: 1 / -1; }
  .ops-dashboard-grid,
  .ticket-layout,
  .split-layout,
  .login-shell,
  .workspace-grid,
  .lab-grid,
  .responsive-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-brand { min-height: auto; }
}

@media (max-width: 768px) {
  body { font-size: 15px; }
  .mobile-menu-button { display: inline-flex; }
  /* V181.2: legacy ops-shell mobile hide must not apply to .clarity-sidebar (drawer uses .open + transform). */
  .sidebar:not(.clarity-sidebar) {
    display: none;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 14px;
  }
  .sidebar:not(.clarity-sidebar).nav-open { display: block; }
  .sidebar-nav {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .sidebar-nav a {
    min-height: 48px;
    padding: 12px;
  }
  .top-header,
  .ops-hero,
  .ticket-header {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }
  .top-header {
    position: static;
    padding: 14px;
  }
  .top-header-actions,
  .auth-meta,
  .language-form,
  .logout-form {
    width: 100%;
  }
  .language-form select,
  .top-header-actions .button,
  .logout-form .button {
    width: 100%;
  }
  .page { width: min(100% - 22px, 1440px); padding-top: 18px; }
  .kpi-grid,
  .stats-grid,
  .ticket-grid,
  .ticket-quickbar,
  .ticket-side,
  .lab-grid,
  .responsive-card-list,
  .compact-cards,
  .two-col,
  .filters,
  .shift-form,
  .mode-selector-form,
  .task-engine-summary,
  .checkbox-grid,
  .cli-form,
  .breakdown-grid,
  .score-row,
  .log-prompts,
  .manual-log-line {
    grid-template-columns: 1fr;
  }
  .button,
  .hero-actions { width: 100%; }
  .tab-bar {
    top: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .tab-button {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .table-shell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 720px;
  }
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
  .mobile-action-bar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(7, 17, 31, 0.94);
    box-shadow: var(--shadow);
  }
  .mobile-action-bar .button {
    width: auto;
    min-width: 0;
    padding-inline: 8px;
  }
  details.support-card:not([open]) {
    padding-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .page { width: min(100% - 14px, 1440px); }
  .panel,
  .detail-block,
  .filters,
  .lab-card,
  .responsive-card {
    padding: 14px;
  }
  h1 { font-size: 1.28rem; }
  h2 { font-size: 1rem; }
  .ticket-meta,
  .ticket-card-top,
  .tag-list {
    gap: 6px;
  }
  .badge {
    font-size: 0.68rem;
    padding-inline: 7px;
  }
  .mobile-action-bar {
    grid-template-columns: 1fr;
  }
}
.builder-mobile-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem;
}

.builder-hero-card,
.builder-result-card,
.builder-history-card,
.builder-advanced-panel {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.builder-simple-form {
  display: grid;
  gap: 1rem;
}

.builder-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.builder-action {
  width: 100%;
  min-height: 54px;
  font-size: 1rem;
  justify-content: center;
}

.builder-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}

.builder-summary-list {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0;
}

.builder-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding-bottom: 0.5rem;
}

.builder-output {
  width: 100%;
  min-height: 220px;
  margin-top: 0.75rem;
}

.builder-diff,
.builder-test-output,
.builder-warnings {
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
}

.builder-approval-box {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
}

.builder-approval-box button:disabled,
.builder-approval-box input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.builder-advanced-panel summary,
.builder-result-card summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.85rem 0;
}

@media (min-width: 760px) {
  .builder-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* =========================
   Core Experience Loop
   ========================= */
.core-loop-hero {
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.core-loop-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.core-step-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.core-step-card h2 {
    margin: 0 0 6px;
    font-size: 1rem;
}
.core-step-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}
.core-step-number {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: rgba(89, 160, 255, 0.16);
    border: 1px solid rgba(89, 160, 255, 0.35);
}
.core-loop-section {
    margin-top: 18px;
}
.compact-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.evidence-review-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.12);
}
.evidence-review-card code {
    display: block;
    white-space: pre-wrap;
    margin-top: 8px;
    font-size: 0.82rem;
}
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.checklist-grid label {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.success-text {
    color: #78e08f;
    font-weight: 700;
}
.warning-text {
    color: #f6c177;
    font-weight: 700;
}
.secondary-link {
    margin-left: 10px;
    opacity: 0.75;
}
.stacked-actions {
    flex-direction: column;
    align-items: stretch;
}
.stacked-actions form,
.stacked-actions .button {
    width: 100%;
}
@media (max-width: 980px) {
    .core-loop-progress,
    .compact-evidence-grid,
    .checklist-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================
   V20 Market Foundation UI
   ========================= */
.v20-hero {
    border: 1px solid rgba(99, 102, 241, 0.35);
}
.v20-timeline,
.scenario-grid,
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.v20-step-card,
.scenario-card,
.price-card {
    position: relative;
    overflow: hidden;
}
.v20-step-card h3,
.scenario-card h2,
.price-card h2 {
    margin-top: 0.5rem;
}
.proof-box,
.code-card {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.3);
}
.report-text {
    white-space: pre-wrap;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
}
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: end;
    gap: 1rem;
}
.button.small {
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
}
.price-card ul,
.scenario-card ul,
.v20-step-card ul {
    padding-left: 1.25rem;
}

/* =========================
   V36 Beginner + Admin UX
   ========================= */
.beginner-hero,
.admin-hero,
.beginner-help-strip {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(16,185,129,0.12));
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}
.guided-flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 18px 0 24px;
}
.guided-step-card {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 18px;
    background: rgba(15, 23, 42, 0.72);
}
.what-now-box {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(59,130,246,0.14);
    border: 1px solid rgba(59,130,246,0.25);
}
.warning-panel {
    border-color: rgba(245,158,11,0.35) !important;
    background: rgba(245,158,11,0.08) !important;
}
.auth-mode-card {
    margin: 20px auto;
    max-width: 720px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(15, 23, 42, 0.72);
}
@media (max-width: 760px) {
    .beginner-hero,
    .admin-hero,
    .beginner-help-strip {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================
   V40 Launch Candidate UX
   ========================= */
.status-list { list-style: none; padding: 0; display: grid; gap: .7rem; }
.status-list li { border: 1px solid rgba(148, 163, 184, .25); border-radius: 14px; padding: .8rem; background: rgba(15, 23, 42, .35); }
.status-list li.ok { border-color: rgba(34, 197, 94, .45); }
.status-list li.warn { border-color: rgba(245, 158, 11, .55); }
.risk-row { border: 1px solid rgba(248, 113, 113, .35); border-radius: 14px; padding: .8rem; margin-bottom: .65rem; background: rgba(127, 29, 29, .18); }
.code-block { white-space: pre-wrap; border-radius: 14px; padding: 1rem; overflow:auto; background: rgba(2, 6, 23, .75); border: 1px solid rgba(148, 163, 184, .25); }
.check-list { display: grid; gap: .55rem; }
.check-list li { padding: .65rem .8rem; border-radius: 12px; background: rgba(59, 130, 246, .08); border: 1px solid rgba(59, 130, 246, .22); }
.timeline-list { display: grid; gap: 1rem; }
.timeline-item { border: 1px solid rgba(148, 163, 184, .22); border-radius: 18px; padding: 1rem; background: rgba(15, 23, 42, .36); }

/* =========================
   V45 Job Realism / Senior Agent
   ========================= */
.hero-panel {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.92));
    color: #f8fafc;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
    margin-bottom: 24px;
}
.hero-panel .lead { color: #cbd5e1; max-width: 980px; }
.grid-3, .grid-4, .stats-grid, .ticket-grid {
    display: grid;
    gap: 18px;
    margin: 22px 0;
}
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4, .stats-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ticket-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stat-card, .ticket-card, .role-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.stat-card strong { display:block; font-size: 1.25rem; margin: 8px 0; color:#0f172a; }
.senior-agent-panel {
    border: 1px solid #bfdbfe;
    background: linear-gradient(180deg, #eff6ff, #ffffff);
}
.senior-note {
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    padding: 12px;
    border-radius: 12px;
}
.compact-split { align-items: stretch; }
.button.small { padding: 8px 12px; font-size: 0.875rem; }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th, .table-wrap td { padding: 12px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.table-wrap th { color: #475569; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 900px) {
    .grid-3, .grid-4, .stats-grid, .ticket-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   V46 PREMIUM UI OVERHAUL — DIAMOPS OPS CONSOLE
   Goal: make the app feel polished, readable, beginner-safe,
   and premium without changing backend behaviour.
   ========================================================== */
:root {
  --v46-bg-0: #030712;
  --v46-bg-1: #07111f;
  --v46-bg-2: #0b1220;
  --v46-surface: rgba(15, 23, 42, 0.78);
  --v46-surface-strong: rgba(15, 23, 42, 0.94);
  --v46-card: rgba(17, 27, 46, 0.82);
  --v46-card-2: rgba(20, 33, 55, 0.88);
  --v46-border: rgba(148, 163, 184, 0.18);
  --v46-border-strong: rgba(125, 211, 252, 0.35);
  --v46-text: #f8fafc;
  --v46-muted: #aab8cf;
  --v46-soft: #7c8da8;
  --v46-cyan: #22d3ee;
  --v46-blue: #3b82f6;
  --v46-violet: #8b5cf6;
  --v46-green: #22c55e;
  --v46-amber: #f59e0b;
  --v46-red: #f43f5e;
  --v46-radius-xl: 28px;
  --v46-radius-lg: 20px;
  --v46-radius-md: 14px;
  --v46-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --v46-glow: 0 0 36px rgba(34, 211, 238, 0.18), 0 0 60px rgba(59, 130, 246, 0.12);
}

body.diamops-v46 {
  color: var(--v46-text);
  background:
    radial-gradient(circle at 12% 8%, rgba(34, 211, 238, 0.16), transparent 32%),
    radial-gradient(circle at 84% 12%, rgba(139, 92, 246, 0.18), transparent 34%),
    radial-gradient(circle at 58% 88%, rgba(34, 197, 94, 0.10), transparent 30%),
    linear-gradient(135deg, var(--v46-bg-0) 0%, var(--v46-bg-1) 52%, #020617 100%);
  background-attachment: fixed;
}

body.diamops-v46::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent 84%);
  z-index: -1;
}

.ops-shell {
  grid-template-columns: 304px minmax(0, 1fr);
}

.glass-sidebar,
.sidebar {
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.92), rgba(15, 23, 42, 0.82));
  border-right: 1px solid var(--v46-border);
  backdrop-filter: blur(22px);
  box-shadow: 18px 0 70px rgba(0, 0, 0, 0.38);
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.35) transparent;
}

.sidebar-brand {
  margin-bottom: 10px;
  padding: 12px 10px 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.10));
}

.brand-orbit {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.55);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.42), transparent 18%),
    linear-gradient(145deg, #22d3ee 0%, #3b82f6 44%, #7c3aed 100%);
  box-shadow: 0 0 42px rgba(34, 211, 238, 0.32), inset 0 1px 0 rgba(255,255,255,0.28);
  overflow: hidden;
}

.brand-orbit::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 90deg, transparent, rgba(255,255,255,0.42), transparent 32%);
  animation: diamops-spin 9s linear infinite;
}
.brand-orbit span { position: relative; z-index: 1; }
@keyframes diamops-spin { to { transform: rotate(360deg); } }

.sidebar-brand strong {
  font-size: 1.42rem;
  letter-spacing: -0.03em;
}
.sidebar-brand small { color: #b9c7dc; font-weight: 700; }

.sidebar-user {
  margin: 12px 0 18px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--v46-border);
  background: rgba(15, 23, 42, 0.66);
}

.sidebar-section-title,
.sidebar-nav p {
  margin-top: 20px;
  margin-bottom: 8px;
  color: #7dd3fc;
  opacity: 0.9;
  letter-spacing: 0.14em;
}

.sidebar-nav a {
  position: relative;
  min-height: 42px;
  margin: 2px 0;
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
  color: #c2cede;
  font-size: 0.93rem;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.sidebar-nav a::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 11px;
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.36);
  box-shadow: 0 0 14px rgba(125, 211, 252, 0.18);
}
.sidebar-nav a:hover,
.sidebar-nav a.nav-priority {
  color: #ffffff;
  border-color: rgba(125, 211, 252, 0.28);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(124, 58, 237, 0.12));
  transform: translateX(3px);
  text-decoration: none;
}
.sidebar-nav a.nav-priority::after {
  content: "START";
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  color: #001019;
  background: linear-gradient(135deg, #67e8f9, #a7f3d0);
  font-size: 0.62rem;
  font-weight: 950;
}

.ops-main { min-width: 0; }
.premium-topbar,
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  align-items: center;
  min-height: 92px;
  padding: 18px 34px;
  border-bottom: 1px solid var(--v46-border);
  background: linear-gradient(90deg, rgba(2, 6, 23, 0.76), rgba(15, 23, 42, 0.66));
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 54px rgba(0,0,0,0.24);
}
.topbar h1 { font-size: clamp(1.35rem, 2vw, 2.15rem); letter-spacing: -0.04em; }
.topbar-subtitle {
  margin: 7px 0 0;
  color: #a8b7cc;
  font-weight: 700;
  font-size: 0.92rem;
}
.premium-page,
.page {
  width: min(100% - 54px, 1520px);
  padding-top: 34px;
}

.panel,
.card,
.ops-card,
.kpi-card,
.hero-card,
.metric-card,
.scenario-card,
.role-card,
.lab-card,
.evidence-card,
.guided-step-card,
.core-step-card,
.pricing-grid > *,
.login-card {
  border: 1px solid var(--v46-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent 40%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(17, 27, 46, 0.78));
  border-radius: var(--v46-radius-lg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}
.panel:hover,
.card:hover,
.ops-card:hover,
.kpi-card:hover,
.scenario-card:hover,
.role-card:hover,
.guided-step-card:hover {
  border-color: rgba(125, 211, 252, 0.28);
  box-shadow: var(--v46-shadow), var(--v46-glow);
}

.ops-hero,
.hero,
.page-heading,
.ticket-header,
.core-loop-hero,
.beginner-hero,
.admin-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: var(--v46-radius-xl);
  background:
    radial-gradient(circle at 82% 14%, rgba(34, 211, 238, 0.24), transparent 32%),
    radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.20), transparent 38%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.66));
  box-shadow: var(--v46-shadow), 0 0 90px rgba(34, 211, 238, 0.08);
}
.ops-hero::after,
.hero::after,
.core-loop-hero::after,
.beginner-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.12), transparent 62%);
}
.ops-hero h2,
.hero h1,
.hero h2,
.page-heading h1,
.core-loop-hero h1,
.beginner-hero h1 {
  max-width: 920px;
  margin-bottom: 10px;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.075em;
  background: linear-gradient(135deg, #ffffff 0%, #dbeafe 42%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ops-hero p,
.hero p,
.lead {
  max-width: 760px;
  color: #b7c6dc;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  font-weight: 650;
}

.kpi-grid,
.metric-grid,
.metrics-grid,
.grid-3,
.grid-4,
.scenario-grid,
.role-card-grid,
.guided-flow-grid,
.panel-grid {
  gap: 18px;
}
.kpi-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  min-height: 142px;
}
.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--v46-cyan), var(--v46-blue), var(--v46-violet));
}
.kpi-card span,
.metric-list span,
.muted { color: var(--v46-muted); }
.kpi-card strong {
  display: block;
  margin: 8px 0 4px;
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  line-height: 1;
  letter-spacing: -0.06em;
}
.kpi-card small { color: var(--v46-soft); font-weight: 800; }

.button,
button,
input[type="submit"] {
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.86);
  color: #eaf2ff;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
.button:hover,
button:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 211, 252, 0.42);
  box-shadow: 0 18px 42px rgba(0,0,0,0.32), 0 0 28px rgba(34,211,238,0.12);
  text-decoration: none;
}
.button.primary,
.glow-button,
.auth-submit {
  border: 0;
  color: #00111f;
  background: linear-gradient(135deg, #67e8f9 0%, #60a5fa 46%, #a78bfa 100%);
  box-shadow: 0 16px 48px rgba(34, 211, 238, 0.24), inset 0 1px 0 rgba(255,255,255,0.42);
}
.button.secondary { background: rgba(30, 41, 59, 0.85); }
.button.success { background: linear-gradient(135deg, #22c55e, #14b8a6); color: #02130b; }
.button.warning { background: linear-gradient(135deg, #f59e0b, #facc15); color: #1c1200; }
.button.danger { background: linear-gradient(135deg, #fb7185, #ef4444); color: #210006; }

.badge,
.pill,
.replay-badge {
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
  font-weight: 950;
  letter-spacing: 0.02em;
}
.mode-training,
.mode-guided,
.status-resolved,
.priority-low { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.12); color: #bbf7d0; }
.priority-high,
.priority-critical,
.risk-high,
.danger { border-color: rgba(244,63,94,0.38); background: rgba(244,63,94,0.12); color: #fecdd3; }
.priority-medium,
.warn,
.warning { border-color: rgba(245,158,11,0.38); background: rgba(245,158,11,0.12); color: #fde68a; }
.status-new,
.status-investigating { border-color: rgba(34,211,238,0.36); background: rgba(34,211,238,0.11); color: #a5f3fc; }

.table-shell,
table {
  border-radius: 18px;
  overflow: hidden;
}
.table-shell { border: 1px solid var(--v46-border); background: rgba(2,6,23,0.32); }
table { width: 100%; border-collapse: collapse; }
th {
  color: #bfefff;
  background: rgba(2, 6, 23, 0.42);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
td, th { border-bottom: 1px solid rgba(148,163,184,0.11); }
tr:hover td { background: rgba(34, 211, 238, 0.045); }

input,
select,
textarea {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.46);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: rgba(34, 211, 238, 0.62);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.10);
}
textarea { min-height: 136px; }

.core-loop-progress,
.score-meter,
.progress-ring-lite {
  background: conic-gradient(from 180deg, rgba(34,211,238,0.85), rgba(139,92,246,0.85), rgba(34,197,94,0.7), rgba(34,211,238,0.85));
  box-shadow: 0 0 36px rgba(34,211,238,0.14);
}
.core-step-number {
  background: linear-gradient(135deg, #67e8f9, #a78bfa);
  color: #020617;
  box-shadow: 0 0 22px rgba(34,211,238,0.22);
}
.senior-agent-panel,
.beginner-help-strip,
.calm-panel {
  border: 1px solid rgba(34, 211, 238, 0.28);
  background:
    linear-gradient(135deg, rgba(8, 47, 73, 0.42), rgba(30, 41, 59, 0.72)),
    radial-gradient(circle at 12% 0%, rgba(34,211,238,0.16), transparent 32%);
  box-shadow: 0 18px 48px rgba(0,0,0,0.24), 0 0 38px rgba(34,211,238,0.08);
}

.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, rgba(34,211,238,0.24), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(139,92,246,0.22), transparent 36%),
    linear-gradient(135deg, #020617, #08111f 52%, #020617);
}
.login-shell {
  min-height: 100vh;
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 34px;
}
.premium-login-brand {
  position: relative;
  padding: clamp(26px, 4vw, 52px);
  border-radius: 34px;
  border: 1px solid rgba(125,211,252,0.22);
  background: linear-gradient(135deg, rgba(15,23,42,0.76), rgba(15,23,42,0.30));
  box-shadow: var(--v46-shadow);
}
.login-brand h1 {
  font-size: clamp(4rem, 10vw, 7.4rem);
  line-height: 0.85;
  letter-spacing: -0.12em;
  margin: 18px 0 14px;
  background: linear-gradient(135deg, #fff, #67e8f9 52%, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.login-feature-grid span {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.36);
  color: #dbeafe;
  font-weight: 900;
}
.premium-login-card {
  padding: clamp(24px, 3vw, 38px);
  border-radius: 30px;
}
.auth-form label { color: #cbd5e1; font-weight: 900; }
.auth-note {
  border-radius: 16px;
  border: 1px solid rgba(245,158,11,0.22);
  background: rgba(245,158,11,0.08);
  color: #fde68a;
}

.flash {
  border-color: rgba(34,211,238,0.24);
  background: rgba(34,211,238,0.10);
  color: #cffafe;
  border-radius: 16px;
}
.footer {
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(18px);
}

@media (max-width: 1080px) {
  .ops-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--v46-border);
  }
  .sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sidebar-nav p { grid-column: 1 / -1; }
  .login-shell { grid-template-columns: 1fr; padding: 28px 0; }
}
@media (max-width: 680px) {
  .premium-page, .page { width: min(100% - 26px, 1520px); }
  .premium-topbar, .topbar { padding: 16px; align-items: flex-start; }
  .sidebar-nav { grid-template-columns: 1fr; }
  .ops-hero h2, .hero h1, .hero h2, .page-heading h1 { font-size: 2.35rem; }
  .login-feature-grid { grid-template-columns: 1fr; }
}


/* =========================
   V47 GLOBAL LANGUAGE SELECTOR
   ========================= */
.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;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(2, 6, 23, 0.18);
  backdrop-filter: blur(16px);
}

.language-switcher .language-globe {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(129, 140, 248, 0.16));
  border: 1px solid rgba(125, 211, 252, 0.18);
}

.language-switcher select {
  appearance: none;
  border: 0;
  background: transparent;
  color: #e5f0ff;
  font: inherit;
  font-weight: 750;
  letter-spacing: 0.01em;
  padding: 0.25rem 1.35rem 0.25rem 0.1rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #7dd3fc 50%), linear-gradient(135deg, #7dd3fc 50%, transparent 50%);
  background-position: calc(100% - 9px) 52%, calc(100% - 4px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.language-switcher select option {
  color: #0f172a;
  background: #ffffff;
}

.login-language-switcher {
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1rem;
}

html[dir="rtl"] .sidebar-nav,
html[dir="rtl"] .topbar,
html[dir="rtl"] .premium-page {
  text-align: right;
}

html[dir="rtl"] .topbar-actions {
  flex-direction: row-reverse;
}

@media (max-width: 720px) {
  .premium-language-switcher {
    width: 100%;
    justify-content: space-between;
  }
}

/* =========================
   V48 Clarity Mode Overhaul
   Goal: 10-second beginner comprehension + hidden advanced depth
   ========================= */
:root {
    --clarity-bg: #07111f;
    --clarity-panel: rgba(255,255,255,0.075);
    --clarity-panel-strong: rgba(255,255,255,0.12);
    --clarity-border: rgba(255,255,255,0.14);
    --clarity-text: #f7fbff;
    --clarity-muted: #aebbd0;
    --clarity-accent: #38bdf8;
    --clarity-good: #34d399;
    --clarity-warn: #fbbf24;
}
body.diamops-v48 {
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 30rem),
        radial-gradient(circle at bottom right, rgba(52, 211, 153, 0.13), transparent 26rem),
        linear-gradient(135deg, #050b15 0%, #08111f 55%, #111827 100%);
    color: var(--clarity-text);
}
.clarity-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
}
.clarity-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 1.25rem;
    border-right: 1px solid var(--clarity-border);
    background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(18px);
}
.clarity-brand,
.clarity-nav a,
.nav-folder summary {
    text-decoration: none;
    color: var(--clarity-text);
}
.clarity-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 18px;
    background: linear-gradient(135deg, #38bdf8, #22c55e);
    color: #03111f;
    font-weight: 900;
    font-size: 1.35rem;
    box-shadow: 0 18px 40px rgba(56,189,248,.28);
}
.clarity-brand small,
.clarity-user-card small,
.topbar-subtitle,
.clarity-hero p,
.quiet-card p,
.choice-card p,
.step-instruction { color: var(--clarity-muted); }
.clarity-user-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem;
    border: 1px solid var(--clarity-border);
    border-radius: 20px;
    background: var(--clarity-panel);
    margin-bottom: 1.2rem;
}
.clarity-nav {
    display: grid;
    gap: .55rem;
}
.clarity-nav .nav-big,
.nav-folder summary,
.nav-folder a {
    display: block;
    padding: .8rem .9rem;
    border-radius: 16px;
    border: 1px solid transparent;
}
.clarity-nav .nav-big {
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.08);
    font-weight: 800;
}
.clarity-nav .nav-start {
    background: linear-gradient(135deg, rgba(56,189,248,.27), rgba(52,211,153,.22));
    border-color: rgba(56,189,248,.35);
}
.nav-folder {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    overflow: hidden;
}
.nav-folder summary {
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}
.nav-folder summary::-webkit-details-marker { display: none; }
.nav-folder summary::after { content: " +"; float: right; color: var(--clarity-accent); }
.nav-folder[open] summary::after { content: " −"; }
.nav-folder a {
    margin: .1rem .45rem;
    color: var(--clarity-muted);
    font-size: .94rem;
}
.nav-folder a:hover,
.clarity-nav .nav-big:hover {
    background: rgba(56,189,248,.14);
    border-color: rgba(56,189,248,.25);
}
/* Phase 7: sidebar resume CTA — amber highlight for in-progress incident */
.nav-resume-cta {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .9rem;
    margin: .35rem 0 .5rem;
    border-radius: 16px;
    border: 1px solid rgba(251,191,36,.38);
    background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(245,158,11,.10));
    color: inherit;
    font-weight: 800;
    font-size: .875rem;
    text-decoration: none;
    overflow: hidden;
}
.nav-resume-cta i { flex: 0 0 auto; color: rgb(251,191,36); }
.nav-resume-cta .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-resume-cta:hover {
    background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(245,158,11,.18));
    border-color: rgba(251,191,36,.55);
}
.clarity-main { min-width: 0; }
.clarity-topbar {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--clarity-border);
    background: rgba(5, 11, 21, .66);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 10;
}
.clarity-topbar h1 { margin: .15rem 0 0; font-size: clamp(1.6rem, 4vw, 2.5rem); }
.clarity-page { padding: 2rem; max-width: 1320px; margin: 0 auto; width: 100%; }
.clarity-hero,
.task-focus-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.5rem;
    align-items: stretch;
    padding: clamp(1.4rem, 4vw, 2.4rem);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.045)),
        radial-gradient(circle at top right, rgba(56,189,248,.24), transparent 18rem);
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    margin-bottom: 1.35rem;
}
.clarity-hero h2,
.task-focus-hero h2 {
    font-size: clamp(2rem, 5vw, 4.6rem);
    line-height: 1;
    letter-spacing: -0.06em;
    margin: .35rem 0 1rem;
    max-width: 900px;
}
.clarity-hero.mini h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.clarity-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.3rem; }
.mega-action {
    font-size: 1.08rem;
    padding: 1rem 1.35rem !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 40px rgba(56,189,248,.22);
}
.button.ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--clarity-text); }
.gran-test-card,
.senior-mini-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.2rem;
    border-radius: 28px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.13);
}
.big-number {
    display: block;
    font-size: 5rem;
    line-height: .85;
    font-weight: 950;
    color: var(--clarity-accent);
}
.three-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.35rem 0;
}
.choice-card,
.quiet-card,
.focus-ticket-card,
.one-screen-step {
    display: block;
    color: var(--clarity-text);
    text-decoration: none;
    padding: 1.3rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background: rgba(255,255,255,.07);
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.choice-card:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.34); }
.primary-choice { background: linear-gradient(135deg, rgba(56,189,248,.24), rgba(52,211,153,.14)); }
.choice-number,
.plain-stepper span,
.step-label {
    display: inline-grid;
    place-items: center;
    min-width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    background: rgba(56,189,248,.18);
    color: #bae6fd;
    font-weight: 900;
}
.choice-card h3,
.quiet-card h3 { font-size: 1.45rem; margin: .8rem 0 .45rem; }
.clarity-strip {
    padding: 1.4rem;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
    margin: 1.35rem 0;
}
.quiet-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.advanced-disclosure {
    margin-top: 1.4rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    background: rgba(255,255,255,.04);
    padding: .85rem;
}
.advanced-disclosure summary {
    cursor: pointer;
    font-weight: 900;
    padding: .7rem;
}
.single-ticket-focus { margin: 1.2rem 0; }
.focus-ticket-card { max-width: 880px; margin: 0 auto; text-align: center; }
.focus-ticket-card h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin: .5rem 0; }
.simple-meta-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0; justify-content: flex-start; }
.focus-ticket-card .simple-meta-row { justify-content: center; }
.simple-meta-row span {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    border-radius: 999px;
    padding: .45rem .75rem;
    color: #dbeafe;
    font-weight: 700;
}
.plain-stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .8rem;
    margin: 1.2rem 0;
}
.plain-stepper article {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.055);
    border-radius: 22px;
    padding: 1rem;
}
.plain-stepper h3 { margin: .6rem 0 .3rem; }
.sticky-stepper { grid-template-columns: repeat(4, minmax(0,1fr)); }
.one-screen-step { margin: 1.2rem 0; padding: clamp(1.3rem, 4vw, 2rem); }
.one-screen-step h2 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.04em; margin: .5rem 0; }
.simple-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin: 1rem 0; }
.simple-info-grid div {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    padding: .9rem;
}
.simple-info-grid span { display:block; color: var(--clarity-muted); font-size: .86rem; }
.clarity-evidence { margin: 1rem 0; }
.clean-checklist label {
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    padding: .8rem;
    border: 1px solid rgba(255,255,255,.1);
}
.clarity-form-grid label { color: var(--clarity-text); font-weight: 800; }
.clarity-form-grid textarea,
.clarity-form-grid select,
.clarity-form-grid input[type="range"] { margin-top: .45rem; }
.clarity-badge { background: rgba(52,211,153,.18); color: #bbf7d0; border-color: rgba(52,211,153,.3); }
@media (max-width: 1050px) {
    .clarity-shell { grid-template-columns: 1fr; }
    .clarity-sidebar { position: relative; height: auto; }
    .clarity-topbar { position: relative; flex-direction: column; align-items: flex-start; }
    .clarity-hero, .task-focus-hero { grid-template-columns: 1fr; }
    .three-choice-grid, .quiet-grid, .plain-stepper, .simple-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .clarity-page { padding: 1rem; }
    .clarity-hero h2, .task-focus-hero h2 { font-size: 2.3rem; }
    .topbar-actions { width: 100%; flex-wrap: wrap; }
}


/* V50-V60 UI polish */
.v60-hero{border:1px solid rgba(148,163,184,.18);background:radial-gradient(circle at top left,rgba(124,58,237,.24),transparent 35%),linear-gradient(135deg,rgba(15,23,42,.98),rgba(2,6,23,.96));border-radius:32px;padding:34px;box-shadow:0 30px 90px rgba(0,0,0,.32)}.v60-hero h2{font-size:clamp(2rem,4vw,4rem);line-height:1.02;margin:.35rem 0;color:#fff;letter-spacing:-.055em}.v60-hero p{max-width:780px;color:#9fb0c8;font-size:1.05rem}.v60-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.v60-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:22px 0}.v60-card{background:linear-gradient(180deg,rgba(30,41,59,.95),rgba(15,23,42,.95));border:1px solid rgba(148,163,184,.18);border-radius:26px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.22)}.v60-card h3{margin:.35rem 0;color:#fff}.v60-card p,.v60-card li{color:#9fb0c8}.v60-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;border:1px solid rgba(34,211,238,.25);background:rgba(34,211,238,.09);color:#bff7ff;font-weight:800;font-size:.78rem}.v60-price{font-size:2.35rem;color:#fff;font-weight:900;letter-spacing:-.04em}.progress-shell{height:14px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;border:1px solid rgba(148,163,184,.16)}.progress-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#22d3ee);border-radius:999px}.metric-ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#34d399 var(--score-deg,270deg),rgba(148,163,184,.18) 0);color:#fff;font-size:1.25rem;font-weight:900;box-shadow:inset 0 0 0 10px rgba(2,6,23,.9)}.scenario-premium{display:flex;flex-direction:column;gap:14px}.scenario-meta{display:flex;gap:8px;flex-wrap:wrap}.copilot-box{border:1px solid rgba(124,58,237,.35);background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(34,211,238,.08));border-radius:24px;padding:18px}.locked-card{position:relative}.locked-card:before{content:"Locked";position:absolute;top:16px;right:16px;background:rgba(251,191,36,.14);color:#fde68a;border:1px solid rgba(251,191,36,.35);border-radius:999px;padding:6px 10px;font-weight:900;font-size:.72rem}


/* =========================
   V61-V100 Ultra Clean UI Pass
   ========================= */
.ultra-clean-console .clarity-main { background: radial-gradient(circle at top left, rgba(82, 108, 255, 0.10), transparent 34%), #07111f; }
.ultra-clean-console .clarity-sidebar { border-right: 1px solid rgba(255,255,255,.07); box-shadow: 20px 0 60px rgba(0,0,0,.18); }
.ultra-clean-console .clarity-nav .nav-big { border-radius: 18px; padding: 14px 16px; font-weight: 800; }
.ultra-clean-console .nav-folder { border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); margin: 10px 0; }
.ultra-clean-console .nav-folder summary { padding: 13px 14px; cursor: pointer; color: #dbeafe; font-weight: 800; }
.ultra-clean-console .nav-folder a { display: block; padding: 10px 14px 10px 22px; color: #aebed6; text-decoration: none; }
.ultra-clean-console .nav-folder a:hover { color: #fff; background: rgba(255,255,255,.045); }
.ultra-clean-hero, .v100-hero, .clean-panel { border: 1px solid rgba(255,255,255,.09); border-radius: 30px; padding: clamp(24px, 4vw, 48px); background: linear-gradient(135deg, rgba(17, 34, 64, .96), rgba(8, 17, 32, .92)); box-shadow: 0 28px 90px rgba(0,0,0,.28); }
.v100-hero h2, .clean-panel h2 { max-width: 980px; font-size: clamp(2rem, 4vw, 4.6rem); line-height: .95; letter-spacing: -0.055em; margin: 12px 0 18px; }
.v100-hero p, .clean-panel p { max-width: 820px; color: #b8c6dc; font-size: 1.08rem; line-height: 1.75; }
.v100-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.v100-summary-grid article { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 22px; }
.v100-summary-grid strong { display:block; color:#fff; font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing:-.05em; }
.v100-summary-grid span { color:#9fb0c8; font-weight:700; }
.v100-summary-grid.compact { grid-template-columns: repeat(3, minmax(0,1fr)); }
.v100-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.v100-release-card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.075); border-radius: 22px; padding: 20px; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.v100-release-card:hover { transform: translateY(-3px); border-color: rgba(125, 211, 252, .45); background: rgba(255,255,255,.065); }
.v100-release-card h3 { margin: 10px 0 8px; color: #fff; letter-spacing: -.025em; }
.v100-release-card p { color:#b7c6dd; line-height:1.6; }
.v100-release-card footer { display:flex; justify-content:space-between; gap:12px; color:#8da1bc; font-size:.85rem; border-top:1px solid rgba(255,255,255,.07); padding-top:12px; margin-top:16px; }
.v100-release-card a { color:#93c5fd; font-weight:800; text-decoration:none; display:inline-block; margin-top:12px; }
.code-card { background:#030712; color:#d1fae5; border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:18px; overflow:auto; }
@media (max-width: 900px) { .v100-summary-grid, .v100-summary-grid.compact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .v100-summary-grid, .v100-summary-grid.compact { grid-template-columns: 1fr; } .v100-hero h2, .clean-panel h2 { font-size: 2.25rem; } }


/* =========================
   V151 Marketability Repair
   ========================= */
.clean-launch .clarity-topbar .eyebrow{letter-spacing:.08em;text-transform:uppercase;color:#7dd3fc}.clean-launch .clarity-footer span{display:none}.v151-hero,.v151-ticket-shell,.v151-proof-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:stretch;background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(15,23,42,.85));border:1px solid rgba(148,163,184,.18);border-radius:28px;padding:28px;margin-bottom:24px}.v151-hero{grid-template-columns:minmax(0,1fr)}.v151-hero h2,.v151-ticket-main h2,.v151-proof-hero h2{font-size:clamp(2rem,4vw,4rem);line-height:1;margin:8px 0 12px}.v151-hero p,.lead{font-size:1.12rem;color:#cbd5e1;max-width:780px}.v151-action-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.v151-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.v151-choice,.v151-card,.v151-side-card,.v151-next-panel{display:block;background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.2);border-radius:22px;padding:20px;text-decoration:none;color:inherit}.v151-choice strong{display:block;font-size:1.25rem;margin-bottom:8px}.v151-choice span,.v151-side-card p,.v151-next-panel li{color:#cbd5e1}.primary-choice{border-color:rgba(56,189,248,.55);box-shadow:0 20px 50px rgba(14,165,233,.14)}.v151-next-panel{background:rgba(8,47,73,.55);margin-top:18px}.v151-next-panel h3{margin-top:0}.v151-side-card{background:rgba(2,6,23,.72)}.v151-core-form{display:grid;gap:18px}.v151-card h2{margin-top:0}.v151-card textarea,.v151-card select{width:100%;margin-top:8px;border-radius:14px;border:1px solid rgba(148,163,184,.25);background:#020617;color:#e5e7eb;padding:12px}.v151-evidence{display:block;border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:14px;margin:10px 0;background:rgba(2,6,23,.45)}.v151-evidence code{display:block;white-space:pre-wrap;margin-top:8px;color:#bae6fd}.v151-report{display:grid;gap:14px}.v151-report article{background:#fff;color:#111827;border-radius:18px;padding:22px}.v151-report h3{margin-top:0}.success-text{color:#86efac}.warning-text{color:#fde68a}.simple-meta-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.simple-meta-row span{border:1px solid rgba(148,163,184,.22);border-radius:999px;padding:7px 11px;color:#cbd5e1}@media(max-width:900px){.v151-ticket-shell,.v151-proof-hero{grid-template-columns:1fr}.v151-choice-grid{grid-template-columns:1fr}}

/* =========================
   V152 maturity upgrade: clean first experience
   ========================= */
.diamops-v152 .clarity-topbar {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.diamops-v152 .topbar-actions .language-switcher,
.diamops-v152 .premium-language-switcher {
    display: none !important;
}
.v152-start-page,
.v152-ticket-list-hero,
.v152-complete-hero,
.v152-proof-hero {
    max-width: 980px;
    margin: 0 auto 1.4rem auto;
}
.v152-start-card,
.v152-ticket-card,
.v152-helper-card,
.v152-card,
.v152-ticket-list-hero,
.v152-complete-hero,
.v152-proof-hero,
.v152-ticket-row,
.v152-report-preview article,
.v152-proof-strength article {
    background: rgba(15, 32, 55, 0.92);
    border: 1px solid rgba(123, 166, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}
.v152-start-card,
.v152-ticket-card,
.v152-helper-card,
.v152-card,
.v152-ticket-list-hero,
.v152-complete-hero,
.v152-proof-hero {
    padding: 1.6rem;
}
.v152-start-card h2,
.v152-ticket-card h2,
.v152-ticket-list-hero h2,
.v152-complete-hero h2,
.v152-proof-hero h2 {
    margin: 0.35rem 0 0.6rem;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
}
.v152-start-card p,
.v152-ticket-list-hero p,
.v152-ticket-card .lead,
.v152-complete-hero p,
.v152-proof-hero p {
    max-width: 760px;
    color: var(--muted, #a8b6cf);
    font-size: 1.02rem;
    line-height: 1.65;
}
.v152-primary-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.1rem;
}
.v152-progress-note,
.v152-next-line {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    background: rgba(51, 104, 255, 0.11);
    border: 1px solid rgba(123, 166, 255, 0.22);
    color: #dce8ff;
}
.v152-simple-grid,
.v152-proof-strength,
.v152-report-preview,
.v152-ticket-focus {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1180px;
    margin: 0 auto 1.4rem auto;
}
.v152-ticket-focus {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.8fr);
}
.v152-simple-grid article,
.v152-report-preview article,
.v152-proof-strength article {
    padding: 1rem;
}
.v152-simple-grid p,
.v152-proof-strength span {
    color: var(--muted, #a8b6cf);
    display: block;
    margin-top: 0.35rem;
}
.v152-core-form {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}
.v152-log-box {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.8rem;
}
.log-line {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: rgba(3, 10, 23, 0.74);
    border: 1px solid rgba(123, 166, 255, 0.12);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    display: grid;
    gap: 0.35rem;
}
.log-line code {
    white-space: pre-wrap;
    color: #e9f1ff;
}
.log-line.error {
    border-color: rgba(255, 107, 107, 0.45);
    background: rgba(70, 18, 28, 0.44);
}
.log-line.error code {
    color: #ffb3b3;
    font-weight: 800;
}
.log-line.warn {
    border-color: rgba(255, 209, 102, 0.4);
    background: rgba(75, 55, 10, 0.35);
}
.log-line.warn code {
    color: #ffe4a3;
}
.log-type {
    color: #8eb8ff;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.v152-card textarea {
    min-height: 110px;
}
.v152-ticket-cards {
    max-width: 1180px;
    margin: 1rem auto 0;
    display: grid;
    gap: 0.8rem;
}
.v152-ticket-row {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.v152-ticket-row h3 {
    margin: 0.35rem 0;
}
@media (max-width: 900px) {
    .v152-simple-grid,
    .v152-proof-strength,
    .v152-report-preview,
    .v152-ticket-focus {
        grid-template-columns: 1fr;
    }
    .v152-ticket-row {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================
   V153 final polish: maturity ceiling pass
   ========================= */
.diamops-v153 .clarity-sidebar {
    width: 260px;
}
.diamops-v153 .clarity-topbar .eyebrow {
    color: #8fb7ff;
}
.diamops-v153 .clarity-page {
    max-width: 1180px;
    margin: 0 auto;
}
.v153-start-screen {
    min-height: 62vh;
    display: grid;
    place-items: center;
}
.v153-start-panel {
    max-width: 760px;
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(15, 32, 55, .96), rgba(4, 11, 24, .96));
    border: 1px solid rgba(143, 183, 255, .2);
    box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.v153-start-panel h2 {
    font-size: clamp(2.7rem, 6vw, 5.3rem);
    line-height: .92;
    margin: .5rem 0 1rem;
    letter-spacing: -.06em;
}
.v153-start-panel p {
    max-width: 600px;
    margin: 0 auto 1.6rem;
    color: #b8c7dc;
    font-size: 1.08rem;
    line-height: 1.65;
}
.v153-one-button {
    font-size: 1.05rem;
    padding: 1rem 1.35rem;
    border-radius: 16px;
}
.v153-soft-links {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: .6rem;
    color: #91a4bf;
}
.v153-soft-links a {
    color: #b8cffd;
    text-decoration: none;
    font-weight: 700;
}
.v153-progress-note {
    margin-top: 1.2rem !important;
    font-size: .95rem !important;
    color: #95a8c2 !important;
}
.v153-ticket-page,
.v153-complete,
.v153-proof-hero,
.v153-card {
    background: rgba(15, 32, 55, .92);
    border: 1px solid rgba(143, 183, 255, .18);
    border-radius: 24px;
    box-shadow: 0 22px 70px rgba(0,0,0,.18);
}
.v153-ticket-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.v153-ticket-main {
    padding: .75rem;
}
.v153-ticket-main h2,
.v153-complete h2,
.v153-proof-hero h2 {
    margin: .35rem 0 .65rem;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: .98;
    letter-spacing: -.045em;
}
.v153-ticket-main .lead,
.v153-complete p,
.v153-proof-hero p {
    color: #b8c7dc;
    line-height: 1.65;
    font-size: 1.03rem;
}
.v153-next,
.log-guide,
.v153-confidence {
    background: rgba(71, 125, 255, .1);
    border: 1px solid rgba(143, 183, 255, .22);
    color: #dce8ff;
    border-radius: 14px;
    padding: .78rem .95rem;
    margin: 1rem 0;
}
.v153-help {
    background: rgba(2, 8, 23, .42);
    border: 1px solid rgba(143, 183, 255, .16);
    border-radius: 18px;
    padding: 1rem;
    color: #c9d6e8;
}
.v153-help summary {
    cursor: pointer;
    font-weight: 900;
    color: #e8f1ff;
}
.v153-help.inline {
    margin-top: .85rem;
}
.v153-core-form {
    display: grid;
    gap: 1rem;
}
.v153-card {
    padding: 1.3rem;
}
.v153-card h2 {
    margin: 0 0 .75rem;
}
.v153-log-box {
    display: grid;
    gap: .48rem;
    margin-top: .8rem;
}
.diamops-v153 .log-line {
    padding: .78rem .9rem;
    border-radius: 13px;
    background: rgba(2, 8, 23, .62);
    border: 1px solid rgba(143, 183, 255, .12);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.diamops-v153 .log-line code {
    white-space: pre-wrap;
    color: #dce8ff;
}
.diamops-v153 .log-line.info {
    opacity: .58;
}
.diamops-v153 .log-line.error {
    background: rgba(91, 20, 35, .38);
    border-color: rgba(255, 107, 107, .52);
}
.diamops-v153 .log-line.error code {
    color: #ffb7b7;
    font-weight: 900;
}
.diamops-v153 .log-line.warn {
    background: rgba(87, 63, 10, .32);
    border-color: rgba(255, 209, 102, .46);
}
.diamops-v153 .log-line.warn code {
    color: #ffe7a6;
    font-weight: 800;
}
.v153-card label {
    display: block;
    margin-top: .9rem;
    color: #d9e6f7;
    font-weight: 800;
}
.v153-card textarea {
    width: 100%;
    min-height: 110px;
    margin-top: .45rem;
    border-radius: 16px;
    border: 1px solid rgba(143, 183, 255, .2);
    background: rgba(2, 8, 23, .72);
    color: #f4f7fb;
    padding: .95rem;
}
.v153-submit-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;
}
.v153-complete {
    padding: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: 1rem;
}
.v153-result-card,
.v153-proof-strip article,
.v153-report-grid article {
    background: rgba(2, 8, 23, .44);
    border: 1px solid rgba(143, 183, 255, .16);
    border-radius: 18px;
    padding: 1rem;
}
.v153-result-card strong,
.v153-proof-strip strong {
    display: block;
    color: #91c7ff;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
}
.v153-result-card span,
.v153-proof-strip span {
    display: block;
    margin-top: .25rem;
    color: #f5f8ff;
    font-size: 1.05rem;
    font-weight: 900;
}
.v153-report-grid,
.v153-proof-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.v153-report-grid.proof {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.v153-report-grid h3 {
    margin-top: 0;
}
.v153-proof-hero {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
@media(max-width: 900px) {
    .v153-ticket-page,
    .v153-proof-hero {
        grid-template-columns: 1fr;
        display: grid;
    }
    .v153-proof-hero { display: block; }
    .diamops-v153 .clarity-sidebar { width: auto; }
}


/* =========================
   V154 Pre-user Validation Hardening
   ========================= */
.v154-qa-note {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.18);
    color: #b7f7ca;
    font-size: 0.92rem;
}
.v154-step-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}
.v154-step-strip span {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted, #9ca3af);
    font-size: 0.9rem;
}
.v154-step-strip strong { color: var(--text-main, #f9fafb); }
.v154-user-test-ready {
    margin-top: 12px;
    color: var(--text-muted, #9ca3af);
    font-size: 0.9rem;
}
@media (max-width: 760px) {
    .v154-step-strip { grid-template-columns: 1fr; }
}

/* =========================
   V155 Final UI/UX Refinement
   Calm, one-flow learner experience
   ========================= */
.diamops-v155 {
    --v155-bg: #0b0f14;
    --v155-panel: rgba(15, 22, 32, 0.94);
    --v155-panel-soft: rgba(255,255,255,0.04);
    --v155-border: rgba(148, 163, 184, 0.16);
    --v155-muted: #9aa6b2;
    --v155-text: #e6edf3;
    --v155-accent: #5eead4;
    --v155-primary: #22c55e;
    --v155-danger: #ef4444;
    --v155-warn: #f59e0b;
}
.diamops-v155 .clarity-main {
    background: radial-gradient(circle at 14% 0%, rgba(94, 234, 212, 0.07), transparent 34%), var(--v155-bg);
}
.diamops-v155 .clarity-page {
    max-width: 920px;
    padding-top: 24px;
}
.diamops-v155 .clarity-topbar h1 {
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    letter-spacing: -0.03em;
}
.diamops-v155 .clarity-topbar .eyebrow {
    color: var(--v155-muted);
}
.diamops-v155 .clarity-sidebar {
    background: rgba(7, 17, 31, 0.92);
}
.diamops-v155 .clarity-nav .nav-big,
.diamops-v155 .nav-folder summary,
.diamops-v155 .nav-folder a {
    border-radius: 12px;
}
.v155-start {
    min-height: min(620px, calc(100vh - 180px));
    display: grid;
    place-items: center;
}
.v155-start-card {
    width: min(760px, 100%);
    text-align: center;
    background: linear-gradient(145deg, rgba(15, 22, 32, 0.98), rgba(11, 15, 20, 0.96));
    border: 1px solid var(--v155-border);
    border-radius: 28px;
    padding: clamp(28px, 5vw, 56px);
    box-shadow: 0 32px 100px rgba(0,0,0,0.24);
}
.v155-start-card h2 {
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    line-height: 0.95;
    letter-spacing: -0.065em;
    margin: 10px 0 14px;
}
.v155-subtitle {
    color: var(--v155-muted);
    font-size: 1.08rem;
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto 20px;
}
.v155-primary-action {
    padding: 14px 20px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 18px 46px rgba(34, 197, 94, 0.18);
}
.v155-reassurance,
.v155-progress-note {
    color: var(--v155-muted);
    font-size: 0.92rem;
    margin-top: 14px;
}
.v155-quiet-links {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    color: var(--v155-muted);
}
.v155-quiet-links a {
    color: #b8cffd;
    text-decoration: none;
    font-weight: 700;
}
.v155-ticket-intro,
.v155-ticket-flow,
.v155-core-form {
    display: grid;
    gap: 14px;
}
.v155-panel,
.v155-proof-hero,
.v155-proof-strip article,
.v155-report-grid article,
.v155-feedback {
    background: var(--v155-panel);
    border: 1px solid var(--v155-border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 18px 52px rgba(0,0,0,0.16);
}
.v155-panel h2,
.v155-proof-hero h2 {
    margin: 6px 0 8px;
    font-size: clamp(1.7rem, 3.8vw, 3.1rem);
    line-height: 1;
    letter-spacing: -0.045em;
}
.v155-panel .lead,
.v155-proof-hero p,
.v155-report-grid p {
    color: #cbd5e1;
    line-height: 1.65;
}
.v155-next {
    color: #c7d2fe;
    border-left: 3px solid var(--v155-accent);
    padding: 8px 0 8px 12px;
    margin: 14px 0;
    font-size: 0.97rem;
    background: transparent;
}
.v155-mini-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.v155-mini-steps span {
    background: var(--v155-panel-soft);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--v155-muted);
    font-size: 0.9rem;
}
.v155-mini-steps strong {
    color: var(--v155-text);
    margin-right: 4px;
}
.v155-help {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    padding: 12px 14px;
    color: #cbd5e1;
}
.v155-help summary {
    cursor: pointer;
    color: #e6edf3;
    font-weight: 800;
}
.v155-help.inline { margin-top: 10px; }
.v155-log-guide {
    color: var(--v155-muted);
    font-size: 0.88rem;
    margin: 2px 0 10px;
}
.v155-log-box {
    background: #0a0f15;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    padding: 10px;
    max-height: 320px;
    overflow: auto;
}
.v155-log-line {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
    padding: 7px 9px;
    border-radius: 8px;
    margin-bottom: 5px;
    opacity: 0.86;
    border: 1px solid transparent;
}
.v155-log-line code {
    color: #dbeafe;
    white-space: pre-wrap;
}
.v155-log-line.info { opacity: 0.52; }
.v155-log-line.info code { color: #93a1b0; }
.v155-log-line.warn {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.22);
    opacity: 0.95;
}
.v155-log-line.warn code {
    color: #ffd166;
    font-weight: 800;
}
.v155-log-line.error {
    background: rgba(239, 68, 68, 0.13);
    border-color: rgba(239, 68, 68, 0.28);
    opacity: 1;
}
.v155-log-line.error code {
    color: #ffd1d1;
    font-weight: 900;
}
.v155-panel label {
    display: block;
    margin-top: 14px;
    color: #e5edf8;
    font-weight: 800;
}
.v155-panel textarea {
    width: 100%;
    min-height: 118px;
    margin-top: 8px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #0a0f15;
    color: var(--v155-text);
    padding: 13px;
    resize: vertical;
}
.v155-feedback {
    margin-top: 0;
}
.v155-feedback p { margin: 0; }
.v155-feedback.good {
    background: rgba(34, 197, 94, 0.11);
    border-color: rgba(34, 197, 94, 0.26);
}
.v155-feedback.bad {
    background: rgba(245, 158, 11, 0.11);
    border-color: rgba(245, 158, 11, 0.26);
}
.v155-submit-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
}
/* V206.0: explicit verification confirmation block — replaces the previous
   hidden verification=on input so the submit gate can be honoured honestly. */
.verification-confirm {
    margin: 14px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
}
.verification-confirm-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    column-gap: 10px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
    max-width: 100%;
    min-width: 0;
}
.verification-confirm-label input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
}
.verification-confirm-label span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}
.verification-confirm .muted.small {
    margin: 6px 0 0 28px;
}
.v155-proof-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 14px;
}
.v155-proof-strip,
.v155-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.v155-report-grid.proof {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.v155-proof-strip strong {
    display: block;
    color: var(--v155-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
}
.v155-proof-strip span {
    display: block;
    margin-top: 4px;
    font-weight: 900;
}
.v155-report-grid h3 { margin-top: 0; }
@media(max-width: 760px) {
    .v155-mini-steps { grid-template-columns: 1fr; }
    .v155-proof-hero { display: block; }
    .v155-start { min-height: auto; }
}


/* =========================
   V160 DIAMLABS / SAAS POLISH
   ========================= */
.clean-list{display:grid;gap:12px}.clean-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(15,23,42,.55)}.clean-card small{display:block;color:#94a3b8;margin-top:4px}.form-grid{display:grid;gap:14px;max-width:720px}.form-grid label{display:grid;gap:6px;color:#cbd5e1}.form-grid select,.form-grid input{background:#0f172a;color:#e5e7eb;border:1px solid rgba(148,163,184,.25);border-radius:12px;padding:12px}.hero-panel{background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(34,197,94,.08));}.report-layout h3{margin-top:18px}.actions.compact{margin:0}.button.primary,.button.secondary{white-space:nowrap}

/* =========================
   V161 OPERATIONS + PROOF ENGINE UI
   ========================= */
.v161-ops-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:center;padding:32px;border:1px solid rgba(148,163,184,.18);border-radius:28px;background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(20,184,166,.09),rgba(15,23,42,.7));box-shadow:0 24px 80px rgba(0,0,0,.25);margin-bottom:18px}.v161-ops-hero h2{font-size:clamp(2.2rem,5vw,4.5rem);line-height:.95;margin:0 0 12px}.v161-ops-hero p{color:#b6c7dd;font-size:1.02rem}.v161-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.v161-sla-card{padding:22px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.18)}.v161-sla-card strong{display:block;font-size:1.25rem;color:#fff;margin:8px 0}.v161-queue-grid,.v161-clean-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.v161-ticket-card,.v161-clean-grid article{padding:18px;border-radius:20px;background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.18)}.v161-ticket-card.high{border-color:rgba(248,113,113,.45)}.v161-ticket-card.med{border-color:rgba(251,191,36,.42)}.v161-ticket-card.low{border-color:rgba(34,197,94,.32)}.v161-ticket-card h3,.v161-clean-grid h3{margin:12px 0 8px}.v161-ticket-card p,.v161-clean-grid p{color:#b6c7dd}.v161-ticket-card a{display:inline-block;margin-top:10px;color:#93c5fd;font-weight:900}.priority,.status{display:inline-flex;align-items:center;margin-right:6px;padding:5px 9px;border-radius:999px;font-weight:900;font-size:.72rem;letter-spacing:.04em}.priority.high{background:rgba(239,68,68,.16);color:#fecaca;border:1px solid rgba(239,68,68,.35)}.priority.med{background:rgba(245,158,11,.16);color:#fde68a;border:1px solid rgba(245,158,11,.35)}.priority.low{background:rgba(34,197,94,.14);color:#bbf7d0;border:1px solid rgba(34,197,94,.32)}.status.open{background:rgba(59,130,246,.14);color:#bfdbfe;border:1px solid rgba(59,130,246,.32)}.v161-proof-ready{background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(14,165,233,.08));border:1px solid rgba(148,163,184,.18);border-radius:26px;padding:28px}.v161-proof-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}.v161-proof-actions form{margin:0}.v161-github-box{padding:16px;border-radius:18px;background:rgba(2,6,23,.45);border:1px solid rgba(148,163,184,.18);margin-top:12px}.v161-github-box code{background:rgba(15,23,42,.9);padding:3px 6px;border-radius:6px;color:#bfdbfe}@media(max-width:900px){.v161-ops-hero{grid-template-columns:1fr}.v161-queue-grid,.v161-clean-grid{grid-template-columns:1fr}}

/* =========================
   V163 ENTERPRISE SIMULATION + VALIDATION LAYER
   ========================= */
.panel-emphasis{position:relative;overflow:hidden}.v163-ops-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:center;padding:30px;border:1px solid rgba(148,163,184,.18);border-radius:28px;background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(20,184,166,.08),rgba(15,23,42,.78));box-shadow:0 24px 80px rgba(0,0,0,.22);margin-bottom:18px}.v163-ops-hero h2{font-size:clamp(2rem,4.6vw,4rem);line-height:1;margin:0 0 12px}.v163-ops-hero p{color:#b6c7dd}.v163-sla-card{padding:20px;border-radius:22px;background:rgba(2,6,23,.42);border:1px solid rgba(148,163,184,.18)}.v163-sla-card strong{display:block;font-size:1.2rem;margin:8px 0;color:#fff}.v163-metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.v163-metrics-grid article{padding:16px;border-radius:18px;background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.16)}.v163-metrics-grid strong{display:block;font-size:2rem;color:#fff}.v163-metrics-grid small{color:#94a3b8}.v163-client-strip,.v163-client-header,.v163-proof-hero{padding:22px;border-radius:24px;background:rgba(15,23,42,.68);border:1px solid rgba(148,163,184,.16);margin-bottom:16px}.v163-client-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}.v163-client-list a{display:block;padding:12px;border:1px solid rgba(148,163,184,.16);border-radius:16px;background:rgba(2,6,23,.32);text-decoration:none;color:#e5e7eb}.v163-client-list small{display:block;color:#94a3b8;margin-top:4px}.v163-env-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.v163-env-tags span,.v163-workflow-strip span{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.24);color:#bfdbfe;font-weight:800;font-size:.76rem}.v163-workflow-strip{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}.v163-ticket-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border-radius:18px;background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.16);margin-bottom:10px}.v163-ticket-row small{display:block;color:#94a3b8;margin-top:6px}.v163-proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}.v163-proof-grid article,.v163-report-list article{padding:16px;border-radius:18px;background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.16)}.readiness-score{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}.readiness-score strong{font-size:2.4rem;color:#5eead4}.readiness-score span{font-weight:900}.readiness-score small{color:#94a3b8}.v163-report-list{display:grid;gap:10px}@media(max-width:900px){.v163-ops-hero{grid-template-columns:1fr}.v163-metrics-grid,.v163-proof-grid{grid-template-columns:1fr}.v163-ticket-row{display:block}.v163-ticket-row .button{margin-top:10px}}

/* =========================
   V165 Pilot Validation & Product Intelligence
   ========================= */
.v165-hero {
  border: 1px solid rgba(94, 234, 212, 0.18);
  background:
    radial-gradient(circle at top right, rgba(94, 234, 212, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
}
.v165-start-card,
.v165-form-panel form,
.stacked-form {
  display: grid;
  gap: 0.7rem;
}
.v165-start-card input,
.v165-start-card select,
.stacked-form input,
.stacked-form select,
.stacked-form textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.85);
  color: #e5edf7;
  padding: 0.75rem 0.85rem;
}
.v165-start-card label,
.stacked-form label {
  color: #cbd5e1;
  font-size: 0.86rem;
  font-weight: 700;
}
.clean-list.numbered {
  display: grid;
  gap: 1rem;
  padding-left: 1.2rem;
}
.clean-list.numbered li {
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.64);
  border: 1px solid rgba(148, 163, 184, 0.16);
}
.clean-list.numbered small,
.timeline-row small,
.mini-metric small {
  display: block;
  color: #94a3b8;
  margin-top: 0.25rem;
}
.metric-stack {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.mini-metric,
.metric-card,
.readiness-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.64);
  border-radius: 16px;
  padding: 1rem;
}
.mini-metric strong,
.metric-card strong,
.readiness-card strong {
  display: block;
  font-size: 1.5rem;
  color: #5eead4;
}
.metric-card span,
.readiness-card span,
.mini-metric span {
  color: #cbd5e1;
}
.timeline-row {
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.timeline-row:last-child { border-bottom: none; }
.timeline-row strong,
.timeline-row span { display: block; }
.timeline-row span { color: #cbd5e1; margin-top: 0.25rem; }
.check-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.check-row.pass span { color: #86efac; }
.check-row.fail span { color: #fca5a5; }
.inline-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.inline-check input { width: auto; }
.grid.four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid.four { grid-template-columns: 1fr; }
}

/* =========================
   V166 VM Lab
   ========================= */
.vm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(79, 209, 197, 0.12), rgba(106, 168, 255, 0.08)),
    rgba(15, 23, 42, 0.82);
}
.vm-hero h2 {
  max-width: 820px;
  margin: 6px 0 12px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}
.vm-hero p {
  max-width: 720px;
  color: #b6c7dd;
}
.vm-score-card,
.vm-panel,
.vm-profile-grid article {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
}
.vm-score-card {
  padding: 20px;
}
.vm-score-card strong {
  display: block;
  color: #5eead4;
  font-size: 3rem;
  line-height: 1;
}
.vm-layout {
  margin-bottom: 18px;
}
.vm-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.vm-profile-grid article {
  padding: 18px;
}
.vm-profile-grid h3 {
  margin: 8px 0;
}
.vm-profile-grid p,
.vm-profile-grid dd,
.vm-step-list span {
  color: #b6c7dd;
}
.vm-profile-grid dl {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}
.vm-profile-grid dt {
  color: #e5edf7;
  font-weight: 900;
}
.vm-profile-grid dd {
  margin: -6px 0 6px;
}
.vm-step-list {
  display: grid;
  gap: 10px;
}
.vm-step-list div {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.26);
}
.vm-step-list strong,
.vm-step-list span {
  display: block;
}
.vm-command-list {
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: #070b11;
  color: #dbeafe;
}
@media (max-width: 980px) {
  .vm-hero,
  .vm-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Visual refresh: app shell + dashboard
   ========================= */
.visual-refresh {
  --refresh-bg: #090d12;
  --refresh-surface: rgba(18, 24, 32, 0.92);
  --refresh-surface-2: rgba(24, 31, 41, 0.82);
  --refresh-line: rgba(191, 206, 223, 0.14);
  --refresh-text: #f4f7fb;
  --refresh-muted: #aab7c6;
  --refresh-blue: #6aa8ff;
  --refresh-teal: #4fd1c5;
  --refresh-green: #7bd88f;
  --refresh-amber: #f4bf66;
  --refresh-red: #ff7d7d;
  background: var(--refresh-bg);
}

.visual-refresh::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(106, 168, 255, 0.12), transparent 28%),
    linear-gradient(245deg, rgba(79, 209, 197, 0.08), transparent 24%),
    linear-gradient(180deg, #090d12 0%, #0d1219 46%, #080b10 100%);
  z-index: -1;
}

.visual-refresh .clarity-shell {
  grid-template-columns: 272px minmax(0, 1fr);
}

.visual-refresh .clarity-sidebar {
  padding: 18px 14px;
  border-right-color: var(--refresh-line);
  background: rgba(8, 12, 18, 0.9);
  box-shadow: 16px 0 44px rgba(0, 0, 0, 0.22);
}

.visual-refresh .clarity-brand {
  padding: 8px 8px 16px;
  margin-bottom: 8px;
}

.visual-refresh .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--refresh-blue), var(--refresh-teal));
  box-shadow: 0 16px 34px rgba(79, 209, 197, 0.18);
}

.visual-refresh .clarity-brand strong,
.visual-refresh .clarity-user-card strong,
.visual-refresh .clarity-topbar h1,
.visual-refresh .dashboard-hero h2 {
  color: var(--refresh-text);
}

.visual-refresh .clarity-brand small,
.visual-refresh .clarity-user-card small,
.visual-refresh .dashboard-hero p,
.visual-refresh .dashboard-ticket-grid p,
.visual-refresh .dashboard-client-strip small {
  color: var(--refresh-muted);
}

.visual-refresh .clarity-user-card {
  border-radius: 8px;
  border-color: var(--refresh-line);
  background: var(--refresh-surface);
}

.visual-refresh .sidebar-section-title {
  margin: 16px 10px 8px;
  color: #7d8b9c;
  letter-spacing: 0.08em;
}

.visual-refresh .clarity-nav {
  display: grid;
  gap: 6px;
}

.visual-refresh .clarity-nav .nav-big,
.visual-refresh .nav-folder,
.visual-refresh .nav-folder summary,
.visual-refresh .nav-folder a {
  border-radius: 8px;
}

.visual-refresh .clarity-nav .nav-big {
  padding: 11px 12px;
  color: #cfdae7;
  background: transparent;
  border-color: transparent;
}

.visual-refresh .clarity-nav .nav-start {
  color: #061016;
  background: linear-gradient(135deg, var(--refresh-teal), var(--refresh-blue));
  box-shadow: 0 14px 30px rgba(79, 209, 197, 0.14);
}

.visual-refresh .clarity-nav .nav-big:hover,
.visual-refresh .nav-folder a:hover {
  color: var(--refresh-text);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--refresh-line);
}

.visual-refresh .nav-folder {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--refresh-line);
}

.visual-refresh .nav-folder summary {
  padding: 12px;
  color: #dbe5f0;
}

.visual-refresh .nav-folder a {
  margin: 3px 6px;
  padding: 9px 10px;
}

.visual-refresh .clarity-main {
  min-height: 100vh;
  background: transparent;
}

.visual-refresh .clarity-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 18px 28px;
  border-bottom-color: var(--refresh-line);
  background: rgba(9, 13, 18, 0.76);
  backdrop-filter: blur(18px);
}

.visual-refresh .clarity-topbar h1 {
  font-size: clamp(1.45rem, 2.8vw, 2.25rem);
}

.visual-refresh .eyebrow {
  color: var(--refresh-teal);
  letter-spacing: 0.08em;
}

.visual-refresh .clarity-page {
  max-width: 1220px;
  padding: 26px;
}

.visual-refresh .button {
  border-radius: 8px;
  min-height: 42px;
  padding: 10px 14px;
  font-weight: 850;
}

.visual-refresh .button.primary {
  color: #051016;
  background: linear-gradient(135deg, var(--refresh-teal), var(--refresh-blue));
  box-shadow: 0 14px 34px rgba(79, 209, 197, 0.2);
}

.visual-refresh .button.secondary {
  color: #d8e2ee;
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--refresh-line);
}

.visual-refresh .badge {
  border-radius: 8px;
  color: #dbeafe;
  background: rgba(106, 168, 255, 0.12);
  border-color: rgba(106, 168, 255, 0.24);
}

.visual-refresh .dashboard-hero {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  padding: clamp(22px, 4vw, 42px);
  border-radius: 8px;
  border-color: var(--refresh-line);
  background:
    linear-gradient(135deg, rgba(22, 29, 39, 0.96), rgba(9, 13, 18, 0.96)),
    linear-gradient(135deg, rgba(106, 168, 255, 0.18), rgba(79, 209, 197, 0.1));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
}

.visual-refresh .dashboard-hero::after {
  content: "";
  position: absolute;
  inset: auto 22px 18px auto;
  width: 170px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--refresh-teal), var(--refresh-blue), var(--refresh-amber));
  opacity: 0.78;
}

.visual-refresh .dashboard-hero h2 {
  max-width: 820px;
  font-size: clamp(2.1rem, 4.6vw, 4.35rem);
  line-height: 0.98;
}

.visual-refresh .dashboard-hero p {
  max-width: 680px;
  font-size: 1.04rem;
}

.visual-refresh .dashboard-hero-card {
  border-radius: 8px;
  border-color: rgba(244, 191, 102, 0.24);
  background: rgba(244, 191, 102, 0.08);
}

.visual-refresh .dashboard-hero-card strong {
  color: #fff1c7;
}

.visual-refresh .dashboard-metrics {
  gap: 12px;
}

.visual-refresh .dashboard-metrics article,
.visual-refresh .dashboard-ticket-grid article,
.visual-refresh .dashboard-client-strip {
  border-radius: 8px;
  border-color: var(--refresh-line);
  background: var(--refresh-surface);
  box-shadow: none;
}

.visual-refresh .dashboard-metrics article {
  min-height: 132px;
  padding: 18px;
}

.visual-refresh .dashboard-metrics strong {
  color: var(--refresh-text);
  font-size: 2.3rem;
  line-height: 1;
}

.visual-refresh .dashboard-metrics article:nth-child(1) { border-top: 3px solid var(--refresh-blue); }
.visual-refresh .dashboard-metrics article:nth-child(2) { border-top: 3px solid var(--refresh-red); }
.visual-refresh .dashboard-metrics article:nth-child(3) { border-top: 3px solid var(--refresh-green); }
.visual-refresh .dashboard-metrics article:nth-child(4) { border-top: 3px solid var(--refresh-amber); }

.visual-refresh .dashboard-ticket-grid {
  gap: 14px;
}

.visual-refresh .dashboard-ticket-grid article {
  display: grid;
  align-content: start;
  min-height: 224px;
  padding: 20px;
}

.visual-refresh .dashboard-ticket-grid h3 {
  margin-top: 16px;
  font-size: 1.12rem;
}

.visual-refresh .dashboard-ticket-grid a {
  align-self: end;
  justify-self: start;
  margin-top: 14px;
  padding-bottom: 3px;
  color: #b9dcff;
  border-bottom: 1px solid rgba(185, 220, 255, 0.42);
}

.visual-refresh .priority,
.visual-refresh .status {
  border-radius: 8px;
}

.visual-refresh .dashboard-client-strip {
  padding: 22px;
}

.visual-refresh .dashboard-client-strip h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.visual-refresh .v163-client-list {
  gap: 12px;
}

.visual-refresh .v163-client-list a {
  border-radius: 8px;
  border-color: var(--refresh-line);
  background: var(--refresh-surface-2);
}

.visual-refresh .v163-client-list a:hover {
  border-color: rgba(79, 209, 197, 0.36);
  background: rgba(79, 209, 197, 0.08);
}

.visual-refresh .clarity-footer {
  border-top-color: var(--refresh-line);
  background: rgba(9, 13, 18, 0.74);
}

.login-page.visual-refresh {
  min-height: 100vh;
  color: var(--refresh-text);
}

.login-page.visual-refresh .login-shell {
  width: min(1120px, calc(100% - 32px));
  gap: 18px;
  align-items: center;
}

.login-page.visual-refresh .premium-login-brand,
.login-page.visual-refresh .premium-login-card {
  border-radius: 8px;
  border-color: var(--refresh-line);
  background: var(--refresh-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.login-page.visual-refresh .premium-login-brand {
  min-height: 560px;
  background:
    linear-gradient(135deg, rgba(22, 29, 39, 0.95), rgba(9, 13, 18, 0.94)),
    linear-gradient(135deg, rgba(106, 168, 255, 0.18), rgba(79, 209, 197, 0.12));
}

.login-page.visual-refresh .login-brand .brand-orbit {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--refresh-blue), var(--refresh-teal));
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 38px rgba(79, 209, 197, 0.18);
}

.login-page.visual-refresh .login-brand h1 {
  font-size: clamp(3.5rem, 8vw, 6.3rem);
  letter-spacing: 0;
  color: var(--refresh-text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.login-page.visual-refresh .lead {
  color: #dce7f3;
}

.login-page.visual-refresh .muted {
  color: var(--refresh-muted);
}

.login-page.visual-refresh .login-feature-grid span {
  border-radius: 8px;
  border-color: var(--refresh-line);
  background: rgba(255, 255, 255, 0.055);
}

.login-page.visual-refresh .premium-login-card {
  padding: clamp(24px, 3vw, 36px);
}

.login-page.visual-refresh .login-language-switcher {
  border-radius: 8px;
  border-color: var(--refresh-line);
  background: rgba(255, 255, 255, 0.045);
}

.login-page.visual-refresh .language-switcher .language-globe {
  width: auto;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--refresh-muted);
  background: transparent;
}

.login-page.visual-refresh .auth-form input,
.login-page.visual-refresh .login-language-switcher select {
  border-radius: 8px;
  border-color: var(--refresh-line);
  background: rgba(9, 13, 18, 0.82);
  color: var(--refresh-text);
}

.login-page.visual-refresh .auth-note {
  border-radius: 8px;
  border-color: rgba(244, 191, 102, 0.24);
  background: rgba(244, 191, 102, 0.08);
  color: #ffe3a3;
}

@media (max-width: 980px) {
  .visual-refresh .clarity-shell,
  .visual-refresh .dashboard-hero {
    grid-template-columns: 1fr;
  }
  .visual-refresh .clarity-sidebar {
    position: relative;
    height: auto;
  }
  .visual-refresh .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .visual-refresh .clarity-page {
    padding: 16px;
  }
  .visual-refresh .clarity-topbar {
    padding: 16px;
  }
  .visual-refresh .dashboard-metrics,
  .visual-refresh .dashboard-ticket-grid {
    grid-template-columns: 1fr;
  }
  .visual-refresh .dashboard-hero::after {
    display: none;
  }
  .login-page.visual-refresh .premium-login-brand {
    min-height: auto;
  }
}

/* V166.2 global layout, accessibility, and responsive foundations */
body {
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 1.6;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

.main-content,
.container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1.5rem;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

::placeholder { color: rgba(255,255,255,0.5) !important; }
::-webkit-input-placeholder { color: rgba(255,255,255,0.5) !important; }

:focus-visible {
  outline: 2px solid #2dd4bf;
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #2dd4bf;
  color: #000;
  padding: 8px 16px;
  z-index: 9999;
  font-size: 14px;
  border-radius: 0 0 4px 0;
}

.skip-link:focus { top: 0; }

.card,
.stat-card,
.kpi-card,
.ticket-card,
.lab-card,
.responsive-card,
.evidence-card,
.support-card,
.mini-card,
.workspace-card,
.task-engine-card,
.scenario-card,
.price-card,
.guided-step-card,
.auth-mode-card,
.role-card,
.choice-card,
.quiet-card,
.focus-ticket-card,
.metric-card,
.readiness-card,
.vm-score-card,
.panel,
[class*="panel"],
.detail-block,
.filters {
  padding: 16px;
}

.card-grid,
.responsive-card-list,
.compact-cards,
.stats-strip,
.metric-list,
.evidence-stack,
.side-stack,
.form-grid {
  gap: 16px;
}

@media (hover: hover) {
  .card,
  [class*="card"] {
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .card:hover,
  [class*="card"]:hover {
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-1px);
  }
  button:hover { opacity: 0.88; }
  button:active { transform: scale(0.98); }
}

@media (max-width: 768px) {
  input,
  textarea,
  select { font-size: 16px !important; }
}

/* ====================================================== */
/* RESPONSIVE NAVIGATION (V166.3 → V181.3) */
/* ====================================================== */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(15,23,42,0.9);
  color: #fff;
}

.hamburger i { font-size: 22px; }

.sidebar-overlay,
.bottom-nav { display: none; }

.clarity-nav .nav-big {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clarity-nav .nav-big i {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: 20px;
}

.breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}

.breadcrumb a {
  color: #2dd4bf;
  text-decoration: none;
}

/* ====================================================== */
/* RESPONSIVE NAVIGATION + PHONE BASELINE (<= 767px) */
/* ====================================================== */

/* NOTE (V181.6): There are multiple mobile-drawer rule blocks in this file:
   - An older baseline block below (historic V166-era drawer)
   - A later Clarity-shell override block (V181+), kept for compatibility
   This version only adds structure/labels; behaviour is unchanged. */

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

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    max-width: 86vw;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1000;
    background: var(--sidebar-bg, #0f1117);
  }

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

  .sidebar-overlay.visible {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

  .hamburger { display: flex; }

  .nav-drawer-open { overflow: hidden; }

  .clarity-topbar {
    align-items: flex-start;
  }

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    background: var(--sidebar-bg, #0f1117);
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
  }

  .bottom-nav-item.active { color: #2dd4bf; }
  .bottom-nav-item i { font-size: 20px; }

  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

@media (min-width: 1024px) {
  .clarity-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    width: 240px;
    overflow-y: auto;
  }

  .hamburger { display: none; }
  .bottom-nav { display: none; }
}

/* V166.4 responsive grids and queue table */
.d-mobile { display: block; }
.d-desktop { display: none; }

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

.stats-strip,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.ticket-table {
  border-collapse: collapse;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15,23,42,0.7);
}

.ticket-table th,
.ticket-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  vertical-align: top;
}

.ticket-table th[data-sort] {
  cursor: pointer;
  color: #cbd5e1;
}

.ticket-table th[data-sort]::after {
  content: " ↕";
  color: rgba(255,255,255,0.35);
  font-size: 11px;
}

@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip,
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .d-mobile { display: none; }
  .d-desktop { display: table; width: 100%; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }

  .ticket-split {
    display: flex;
    gap: 16px;
  }

  .ticket-split .ticket-list {
    width: 360px;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
    position: sticky;
    top: 16px;
  }

  .ticket-split .ticket-detail {
    flex: 1;
    min-width: 0;
  }
}

/* V166.5 form ergonomics */
textarea.answer-field {
  min-height: 80px;
  resize: vertical;
  max-height: 400px;
}

.char-count {
  margin-top: -6px;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}

.field-error {
  display: block;
  min-height: 18px;
  color: #f87171;
  font-size: 12px;
}

.autosave-indicator {
  min-height: 20px;
  color: #2dd4bf;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* V166.6 feedback and state styles */
#toast-container {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: #1e2533;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  min-width: 200px;
  max-width: 320px;
  animation: slideIn 0.2s ease;
}

.toast.success { border-left: 3px solid #2dd4bf; }
.toast.error,
.toast.danger { border-left: 3px solid #f87171; }
.toast.message { border-left: 3px solid rgba(255,255,255,0.28); }

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card { height: 100px; margin-bottom: 8px; }
.skeleton-line { height: 14px; margin-bottom: 6px; }
.skeleton-line.short { width: 60%; }

.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: rgba(255,255,255,0.4);
}

.empty-state i {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
}

.empty-state p {
  font-size: 14px;
  margin-bottom: 16px;
}

/* V166.8 evidence and log affordances */
.log-block {
  position: relative;
}

.copy-log {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(15,23,42,0.88);
  color: #e5e7eb;
  padding: 6px 10px;
  font-size: 12px;
}

.log-error { color: #f87171; }
.log-warn { color: #fbbf24; }
.log-info { color: rgba(255,255,255,0.35); }

.evidence-accordion summary {
  cursor: pointer;
  padding: 10px 0;
  font-weight: 500;
}

.evidence-accordion .evidence-body {
  padding: 8px 0 16px;
}

/* V166.9 progress and scoring */
.readiness-info {
  display: inline-flex;
  align-items: center;
  color: #2dd4bf;
  vertical-align: middle;
}

.progress-stepper {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

.progress-stepper .step-label {
  display: block;
  min-width: 0;
  max-width: 100%;
  height: auto;
  padding: 0 4px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.step::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: rgba(255,255,255,0.1);
  z-index: 0;
}

.step:last-child::before { display: none; }

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-dark, #0f1117);
  position: relative;
  z-index: 1;
}

.step.active .step-number {
  border-color: #2dd4bf;
  color: #2dd4bf;
}

.step.complete .step-number {
  background: #2dd4bf;
  border-color: #2dd4bf;
  color: #000;
}

@media (max-width: 520px) {
  .progress-stepper {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.35rem;
    padding-bottom: 0.35rem;
    scroll-snap-type: x proximity;
  }

  .progress-stepper .step {
    flex: 0 0 auto;
    min-width: 4.75rem;
    max-width: 5.5rem;
    scroll-snap-align: start;
  }

  .progress-stepper .step::before {
    right: -35%;
  }
}

/* V166.10 onboarding */
#welcome-banner {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9100;
  border: 1px solid rgba(45,212,191,0.28);
  border-radius: 8px;
  background: rgba(15,23,42,0.94);
  color: #e5f7f4;
  padding: 12px 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
}

.next-action-card {
  margin-bottom: 24px;
  padding: 32px;
  border: 1px solid rgba(45,212,191,0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(45,212,191,0.14), rgba(15,23,42,0.86));
}

/* V166.11 AI copilot */
.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

.chip,
.copy-response {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(15,23,42,0.82);
  color: #e5e7eb;
  padding: 8px 12px;
  font-size: 13px;
}

.copilot-response {
  position: relative;
}

.copy-response {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* V166.12 portfolio and proof */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.proof-stamp {
  display: inline-block;
  margin-top: 12px;
  color: rgba(255,255,255,0.48);
  font-size: 13px;
}

/* V166.18 desktop UX */
.context-menu {
  position: fixed;
  z-index: 9200;
  min-width: 180px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: #111827;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.context-menu a,
.context-menu button {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: #e5e7eb;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.context-menu a:hover,
.context-menu button:hover,
.context-menu button:focus-visible {
  background: rgba(45,212,191,0.12);
  color: #fff;
}

.ticket-title {
  display: inline-block;
  max-width: 100%;
}

/* V166.19 monetisation surfaces */
.upgrade-prompt {
  text-align: center;
  padding: 32px 24px;
  border: 1px dashed rgba(45,212,191,0.3);
  border-radius: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
}

.upgrade-prompt i {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
  color: #2dd4bf;
}

.contact-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.referral-line {
  margin-top: 24px;
  color: rgba(255,255,255,0.48);
  font-size: 13px;
}

/* v166.21 responsive and stability pass */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

html {
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.clarity-main,
.clarity-page,
.main-content,
.container,
.panel,
.card,
[class*="card"],
.ticket-detail {
  min-width: 0;
}

.panel,
.card,
.ticket-card,
.stat-card,
.metric-card,
.detail-block,
.upgrade-prompt,
.next-action-card {
  padding: var(--space-4);
}

.card-grid,
.stats-strip,
.stats-grid,
.v60-grid,
.v161-queue-grid,
.v163-metrics-grid,
.contact-tier-grid,
.hero-actions,
.topbar-actions,
.prompt-chips {
  gap: var(--space-4);
}

.table-shell,
.table-wrap,
.compact-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-shell table,
.table-wrap table,
.compact-table table {
  min-width: 720px;
}

.nav-big,
.bottom-nav-item,
.hamburger,
button,
.button,
.btn-primary,
.btn-secondary,
.chip {
  min-height: 44px;
}

.brand-mark,
.hamburger,
.bottom-nav-item i,
.nav-big i {
  flex: 0 0 auto;
}

.ticket-title,
.clarity-topbar h1,
.nav-label {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====================================================== */
/* RESPONSIVE NAVIGATION — CLARITY SHELL OVERRIDES (V181+) */
/* ====================================================== */

@media (max-width: 767px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body.nav-drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  /* V181.3: welcome banner z-index is very high; do not let it eat taps on the open drawer. */
  body.nav-drawer-open #welcome-banner {
    pointer-events: none;
  }

  .clarity-shell {
    display: block !important;
    min-height: 100vh;
  }

  .clarity-main {
    width: 100%;
    min-width: 0;
    position: relative;
  }

  .clarity-page,
  .main-content,
  .container {
    width: 100%;
    max-width: 100%;
    padding: var(--space-4) !important;
  }

  .clarity-topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    min-height: 64px;
    backdrop-filter: blur(14px);
  }

  .clarity-topbar h1 {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    line-height: 1.15;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .topbar-actions > * {
    flex: 1 1 150px;
    justify-content: center;
  }

  .hamburger {
    display: inline-flex !important;
    position: relative;
    z-index: 1002;
  }

  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(280px, 86vw) !important;
    max-width: 86vw;
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.25s ease;
    will-change: transform;
    z-index: 1001;
    overflow-y: auto;
    padding: var(--space-4) !important;
  }

  .sidebar.open {
    transform: translate3d(0, 0, 0);
  }

  .sidebar-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .sidebar-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .bottom-nav {
    height: calc(64px + env(safe-area-inset-bottom));
    min-height: 64px;
  }

  .bottom-nav-item {
    min-width: 0;
    min-height: 44px;
    padding-top: var(--space-1);
  }

  .bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel,
  .card,
  .ticket-card,
  .stat-card,
  .metric-card,
  .detail-block,
  .upgrade-prompt,
  .next-action-card {
    padding: var(--space-4) !important;
  }

  .card-grid,
  .stats-strip,
  .stats-grid,
  .v60-grid,
  .v161-queue-grid,
  .v163-metrics-grid,
  .contact-tier-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }

  .stats-strip,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  main table,
  .table-shell table,
  .table-wrap table,
  .compact-table table {
    min-width: 720px;
  }

  .table-shell,
  .table-wrap,
  .compact-table {
    margin-inline: 0;
    border-radius: 8px;
  }

  #toast-container {
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .toast {
    width: 100%;
    max-width: none;
  }

  #welcome-banner {
    top: var(--space-3);
    left: var(--space-4);
    right: var(--space-4);
  }

  .context-menu {
    display: none !important;
  }

  .copy-response,
  .copy-log {
    min-height: 44px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: readable labels + full nav (icon-only rail hid admin folder links). */
  .clarity-shell {
    display: grid !important;
    grid-template-columns: minmax(200px, min(30vw, 260px)) minmax(0, 1fr) !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0;
    width: auto !important;
    min-width: 0;
    height: 100vh;
    max-height: 100vh;
    padding: var(--space-3) var(--space-3) !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tablet-admin-shortcuts {
    display: none !important;
  }

  .clarity-brand {
    justify-content: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .clarity-brand span:not(.brand-mark),
  .sidebar .clarity-user-card span:not(.user-chip) {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
  }

  .sidebar-section-title {
    display: block !important;
  }

  .nav-label {
    display: inline !important;
  }

  .nav-folder {
    display: block !important;
  }

  .clarity-user-card {
    display: flex !important;
    align-items: center;
    padding: var(--space-2) var(--space-3) !important;
    margin-bottom: var(--space-2);
  }

  .clarity-nav .nav-big {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px !important;
    min-height: 44px;
  }

  .clarity-nav .nav-big i {
    margin: 0 !important;
  }

  .nav-label {
    font-size: 0.82rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .nav-folder {
    margin-top: var(--space-1);
  }

  .nav-folder summary {
    padding: 10px 12px !important;
    min-height: 44px;
  }

  .nav-folder a {
    padding: 8px 10px 8px 14px !important;
    font-size: 0.8rem;
  }

  .hamburger,
  .bottom-nav,
  .sidebar-overlay {
    display: none !important;
  }

  .clarity-page,
  .main-content,
  .container {
    width: 100%;
    max-width: 100%;
    padding: var(--space-4) var(--space-4) !important;
  }

  .clarity-topbar {
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
  }

  .card-grid,
  .v60-grid,
  .v161-queue-grid,
  .v163-metrics-grid,
  .contact-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stats-strip,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  main table,
  .table-shell table,
  .table-wrap table,
  .compact-table table {
    min-width: 640px;
  }
}

@media (min-width: 1024px) {
  .clarity-shell {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0;
    width: 240px !important;
    height: 100vh;
    overflow-y: auto;
  }

  .hamburger,
  .bottom-nav,
  .sidebar-overlay {
    display: none !important;
  }

  .clarity-page,
  .main-content {
    max-width: 1280px;
  }

  .ticket-table {
    table-layout: fixed;
  }
}

/* v166.22 public SaaS polish */
.login-page.visual-refresh {
  background:
    radial-gradient(circle at 18% 18%, rgba(45,212,191,0.12), transparent 30%),
    linear-gradient(135deg, #08111f 0%, #0f172a 48%, #111827 100%);
}

.login-page.visual-refresh .login-shell {
  width: min(1120px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--space-6) 0;
  align-items: stretch;
}

.login-page.visual-refresh .premium-login-brand,
.login-page.visual-refresh .premium-login-card {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 28px 80px rgba(0,0,0,0.3);
}

.login-page.visual-refresh .premium-login-brand {
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(45,212,191,0.12), rgba(14,165,233,0.08)),
    rgba(15,23,42,0.72);
}

.login-page.visual-refresh .premium-login-card {
  background: rgba(8,13,24,0.9);
}

.login-page.visual-refresh .login-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.login-page.visual-refresh .login-feature-grid span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.pricing-hero,
.enterprise-hero {
  margin-bottom: var(--space-5);
}

.public-pricing {
  align-items: stretch;
  margin-bottom: var(--space-5);
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.price-card h2 {
  margin: 0;
}

.price-card ul {
  margin: 0;
  padding-left: 20px;
}

.price-card li + li,
.capability-list li + li {
  margin-top: var(--space-2);
}

.price-card .button {
  margin-top: auto;
}

.price-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
}

.price-actions .button {
  margin-top: 0;
}

.featured-price-card {
  border-color: rgba(45,212,191,0.34);
  background:
    linear-gradient(135deg, rgba(45,212,191,0.12), rgba(15,23,42,0.88)),
    rgba(15,23,42,0.78);
}

.team-enquiry-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-5);
  align-items: start;
}

.team-tier-card {
  padding: var(--space-4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(15,23,42,0.58);
}

.team-tier-card h3 {
  margin-top: 0;
}

.enterprise-capability-grid .panel {
  height: 100%;
}

.capability-list {
  margin: var(--space-3) 0 0;
  padding-left: 20px;
}

@media (max-width: 767px) {
  .login-page.visual-refresh .login-shell {
    width: min(100% - 24px, 520px);
    padding: var(--space-4) 0;
  }

  .login-page.visual-refresh .premium-login-brand,
  .login-page.visual-refresh .premium-login-card {
    padding: var(--space-5) !important;
  }

  .login-page.visual-refresh .login-feature-grid,
  .team-enquiry-panel {
    grid-template-columns: 1fr;
  }

  .public-pricing {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .team-enquiry-panel {
    grid-template-columns: 1fr;
  }
}

/* v167.0 design system */
:root {
  --ds-bg: #050b14;
  --ds-surface-1: #0b1626;
  --ds-surface-2: #101f33;
  --ds-surface-3: #162840;
  --ds-border: rgba(148,163,184,0.18);
  --ds-border-strong: rgba(255,255,255,0.2);
  --ds-text: #e8eef8;
  --ds-muted: #9fb0c7;
  --ds-muted-soft: #6f8198;
  --ds-primary: #2dd4bf;
  --ds-primary-strong: #14b8a6;
  --ds-info: #60a5fa;
  --ds-success: #22c55e;
  --ds-warning: #f59e0b;
  --ds-danger: #ef4444;
  --ds-radius-sm: 4px;
  --ds-radius: 8px;
  --ds-shadow: 0 18px 48px rgba(0,0,0,0.28);
  --ds-transition: 150ms ease;
  --radius: var(--ds-radius);
  --radius-sm: var(--ds-radius);
  --shadow: var(--ds-shadow);
}

body {
  color: var(--ds-text);
}

h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

.eyebrow {
  color: var(--ds-primary);
  letter-spacing: 0.08em;
}

.panel,
.card,
.ticket-card,
.clean-card,
.metric-card,
.stat-card,
.price-card,
.team-tier-card,
.detail-block,
.filters,
.empty-state,
.upgrade-prompt {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: rgba(11,22,38,0.76);
  box-shadow: none;
}

.panel.elevated,
.card.elevated,
.modal,
.dialog,
[role="dialog"] {
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius);
  background: rgba(11,22,38,0.96);
  box-shadow: var(--ds-shadow);
}

.button,
button,
.btn-primary,
.btn-secondary,
.chip,
.copy-log,
.copy-response {
  border-radius: var(--ds-radius);
  transition:
    background-color var(--ds-transition),
    border-color var(--ds-transition),
    color var(--ds-transition),
    opacity var(--ds-transition),
    transform var(--ds-transition);
}

.button.primary,
.btn-primary {
  border-color: var(--ds-primary-strong);
  background: var(--ds-primary-strong);
  color: #04111d;
}

.button.secondary,
.btn-secondary {
  border-color: var(--ds-border);
  background: rgba(16,31,51,0.9);
  color: var(--ds-text);
}

.button.ghost,
.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ds-muted);
}

.button.danger,
.btn-danger {
  border-color: rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.16);
  color: #fecaca;
}

.button.success,
.btn-success {
  border-color: rgba(34,197,94,0.42);
  background: rgba(34,197,94,0.18);
  color: #bbf7d0;
}

.badge,
.priority,
.status,
.v60-pill,
.user-chip {
  border-radius: 999px;
  border: 1px solid var(--ds-border);
}

.toast,
#welcome-banner {
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-border);
  background: rgba(11,22,38,0.96);
  box-shadow: var(--ds-shadow);
}

input,
textarea,
select {
  border-radius: var(--ds-radius);
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition), background-color var(--ds-transition);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ds-primary);
}

:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

.skeleton {
  border-radius: var(--ds-radius);
}

@media (hover: hover) {
  .button:hover,
  button:hover,
  .chip:hover {
    opacity: 0.9;
  }

  .panel:hover,
  .card:hover,
  .ticket-card:hover,
  .clean-card:hover,
  .price-card:hover {
    border-color: var(--ds-border-strong);
  }
}

/* v167.1 operational workspace shell */
.workspace-shell-enabled .clarity-main {
  position: relative;
}

.workspace-guidance-panel {
  position: fixed;
  right: 16px;
  top: 88px;
  z-index: 90;
  width: 300px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: rgba(11,22,38,0.94);
  box-shadow: var(--ds-shadow);
  transition: width var(--ds-transition), transform var(--ds-transition), opacity var(--ds-transition);
}

.workspace-guidance-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--ds-border);
  background: rgba(16,31,51,0.9);
  color: var(--ds-text);
}

.workspace-guidance-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.workspace-guidance-body h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.workspace-guidance-body p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 0.9rem;
}

.workspace-guidance-list {
  display: grid;
  gap: var(--space-2);
}

.workspace-guidance-list span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  color: var(--ds-muted);
  background: rgba(255,255,255,0.03);
}

.workspace-guidance-panel.collapsed {
  width: 138px;
}

.workspace-guidance-panel.collapsed .workspace-guidance-body {
  display: none;
}

@media (min-width: 1440px) {
  .workspace-shell-enabled .clarity-page {
    padding-right: 340px !important;
  }
}

@media (max-width: 1439px) {
  .workspace-guidance-panel {
    position: static;
    width: auto;
    max-height: none;
    margin: 0 var(--space-4) var(--space-4);
  }

  .workspace-guidance-panel.collapsed {
    width: auto;
  }
}

@media (max-width: 767px) {
  .workspace-guidance-panel {
    display: none;
  }
}

/* v167.2 core workflow workspace */
.core-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-4);
  align-items: start;
}

.core-workspace .v155-problem-panel,
.core-workspace .v155-core-form {
  min-width: 0;
}

.core-workspace .v155-problem-panel,
.core-workspace .v155-core-form {
  grid-column: 1;
}

.core-ops-panel {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  gap: var(--space-4);
  position: sticky;
  top: 96px;
}

.core-sla-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.core-sla-strip span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  color: var(--ds-muted);
  background: rgba(255,255,255,0.03);
  font-size: 0.86rem;
}

.core-timeline {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.core-timeline li {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-5);
  color: var(--ds-muted);
}

.core-timeline li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ds-border-strong);
  background: var(--ds-surface-2);
}

.core-timeline li.complete::before,
.core-timeline li.event::before {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
}

.core-timeline strong {
  color: var(--ds-text);
  font-size: 0.9rem;
}

.core-timeline span {
  font-size: 0.82rem;
}

.core-workspace .evidence-accordion {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 0 var(--space-4) var(--space-4);
  background: rgba(255,255,255,0.025);
}

@media (max-width: 1023px) {
  .core-workspace {
    grid-template-columns: 1fr;
  }

  .core-workspace .v155-problem-panel,
  .core-workspace .v155-core-form,
  .core-ops-panel {
    grid-column: 1;
  }

  .core-ops-panel {
    grid-row: auto;
    position: static;
  }
}

/* v167.3 shift architecture */
.shift-briefing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.shift-briefing-card,
.shift-handover-card,
.shift-log-panel,
.shift-summary-handover,
.shift-live-card {
  border-color: rgba(45, 212, 191, 0.2);
}

.shift-handover-card form {
  display: grid;
  gap: var(--space-3);
}

.shift-handover-card textarea {
  width: 100%;
  min-height: 132px;
}

.shift-handover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.shift-handover-actions small {
  color: var(--ds-muted);
}

.shift-log-panel {
  margin-top: var(--space-4);
}

.shift-log-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.shift-log-list li {
  display: grid;
  grid-template-columns: 168px minmax(160px, 0.5fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: rgba(255,255,255,0.025);
}

.shift-log-list time {
  color: var(--ds-muted);
  font-size: 0.78rem;
}

.shift-log-list strong {
  color: var(--ds-text);
}

.shift-log-list span {
  color: var(--ds-muted);
}

.shift-summary-handover {
  margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
  .shift-briefing-grid {
    grid-template-columns: 1fr;
  }

  .shift-log-list li {
    grid-template-columns: 1fr;
  }

  .shift-handover-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* v167.4 communication simulation */
.communication-sim-panel {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ds-border);
}

.communication-sim-panel h3 {
  margin: 0;
}

.communication-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: var(--ds-radius);
  background: rgba(45, 212, 191, 0.07);
}

.communication-score strong {
  color: var(--ds-text);
}

.communication-score span {
  color: var(--ds-muted);
  font-size: 0.86rem;
}

@media (max-width: 767px) {
  .communication-score {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* v168.0 operational maturity system */
.maturity-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.maturity-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

.maturity-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.maturity-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.maturity-card strong {
  color: var(--ds-text);
  font-size: 1.2rem;
}

.maturity-card p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 0.86rem;
}

@media (max-width: 1279px) {
  .maturity-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .maturity-grid,
  .maturity-grid.compact {
    grid-template-columns: 1fr;
  }
}

/* v168.1 core IT role paths */
.role-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.role-path-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.role-path-card h2,
.role-path-card h3 {
  margin: 0;
}

.role-path-card .compact-list {
  margin: 0;
}

/* v168.2 advanced IT paths */
.role-path-card.advanced {
  border-color: rgba(147, 197, 253, 0.22);
}

.advanced-role-grid {
  margin-top: var(--space-2);
}

.compact-heading {
  margin-top: var(--space-5);
}

@media (min-width: 1280px) {
  .role-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .role-path-grid {
    grid-template-columns: 1fr;
  }
}

/* v168.3 progression signal system */
.progression-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.progression-signal-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.progression-signal-card.attention {
  border-color: rgba(248, 113, 113, 0.35);
}

.progression-signal-card h3,
.progression-signal-card p {
  margin: 0;
}

@media (max-width: 1023px) {
  .progression-signal-grid {
    grid-template-columns: 1fr;
  }
}

/* v168.4 certification intelligence */
.cert-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.cert-reference-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.cert-reference-card h2,
.cert-reference-card p {
  margin: 0;
}

@media (max-width: 1023px) {
  .cert-reference-grid {
    grid-template-columns: 1fr;
  }
}

/* v168.5 certification roadmap */
.cert-roadmap-section {
  margin-bottom: var(--space-5);
}

.cert-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.cert-roadmap-tier {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.cert-roadmap-item {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ds-border);
}

.cert-roadmap-item h3,
.cert-roadmap-item p {
  margin: 0;
}

@media (max-width: 1023px) {
  .cert-roadmap-grid {
    grid-template-columns: 1fr;
  }
}

/* v169.0 proof engine */
.proof-maturity-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.proof-maturity-grid article {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.proof-maturity-grid span {
  color: var(--ds-primary);
  font-weight: 700;
}

.proof-maturity-grid p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 0.82rem;
}

@media (max-width: 1023px) {
  .proof-maturity-grid {
    grid-template-columns: 1fr;
  }
}

/* v169.1 recruiter replay */
.replay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-4);
}

.replay-comparison {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--ds-border);
}

.replay-comparison h3,
.replay-comparison p {
  margin: 0;
}

@media (max-width: 1023px) {
  .replay-layout {
    grid-template-columns: 1fr;
  }
}

/* v169.2 operational documentation engine */
.documentation-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.documentation-form {
  display: grid;
  gap: var(--space-3);
}

.documentation-form textarea {
  min-height: 180px;
}

@media (max-width: 1023px) {
  .documentation-grid {
    grid-template-columns: 1fr;
  }
}

/* v169.3 employer intelligence */
.employer-table small {
  color: var(--ds-muted);
}

/* v170.0 AI senior guidance */
.senior-guidance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.senior-guidance-grid article {
  padding: var(--space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: rgba(255,255,255,0.03);
}

.senior-guidance-grid h4 {
  margin: 0 0 var(--space-2);
}

@media (max-width: 767px) {
  .senior-guidance-grid {
    grid-template-columns: 1fr;
  }
}

/* v170.1 senior shadow replay */
.shadow-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
  .shadow-grid {
    grid-template-columns: 1fr;
  }
}

/* v171.0 operational maturity modes */
.operational-mode-card {
  border-left: 4px solid var(--ds-primary);
}

.operational-mode-card.mode-advanced {
  border-left-color: #93c5fd;
}

.operational-mode-card.mode-intermediate {
  border-left-color: #fbbf24;
}

.operational-mode-card.mode-beginner {
  border-left-color: #2dd4bf;
}

/* v171.1 SOC response engine */
.soc-response-shell {
  display: grid;
  gap: 16px;
}

.soc-ticket-rail {
  align-self: start;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 16px;
}

.soc-ticket-rail .button {
  margin-top: 16px;
}

.soc-response-main {
  min-width: 0;
}

.clean-list {
  margin: 0;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.72);
}

.clean-list li + li {
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .soc-response-shell {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
  }

  .soc-ticket-rail {
    position: sticky;
    top: 24px;
  }
}

/* v171.2 cross-team incident simulation */
.cross-team-board {
  display: grid;
  gap: 16px;
}

.cross-team-lane {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 16px;
  min-width: 0;
}

.cross-team-lane h2 {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .cross-team-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .cross-team-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* v172.0 mature career platform */
.career-path-section {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.career-path-grid,
.career-route-grid {
  display: grid;
  gap: 16px;
}

.career-path-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 16px;
}

.career-path-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (min-width: 768px) {
  .career-path-grid,
  .career-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .career-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* v173.0 multi-industry foundation */
.industry-layer-grid {
  display: grid;
  gap: 16px;
}

.industry-layer-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 8px;
  padding: 16px;
}

@media (min-width: 768px) {
  .industry-layer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .industry-layer-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* v174.0 operational consequences */
.consequence-grid {
  display: grid;
  gap: 16px;
}

.consequence-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  padding: 16px;
}

.consequence-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (min-width: 768px) {
  .consequence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .consequence-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* v175.0 operational debt and workload pressure */
.debt-pressure-panel {
  display: grid;
  gap: 16px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(248, 113, 113, 0.24);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .debt-pressure-panel {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    align-items: center;
  }
}

/* v176.0 leadership and workplace dynamics */
.workplace-dynamics-grid {
  display: grid;
  gap: 16px;
}

.workplace-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(147, 197, 253, 0.2);
  border-radius: 8px;
  padding: 16px;
}

@media (min-width: 768px) {
  .workplace-dynamics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v177.0 longitudinal career memory */
.career-memory-grid {
  display: grid;
  gap: 16px;
}

.memory-panel {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 8px;
  padding: 16px;
}

@media (min-width: 1024px) {
  .career-memory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v178.0 enterprise replay and trust */
.enterprise-trust-grid {
  display: grid;
  gap: 16px;
}

.trust-panel {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 16px;
}

@media (min-width: 1024px) {
  .enterprise-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v179.0 persistent organisational environments */
.org-environment-grid {
  display: grid;
  gap: 16px;
}

.org-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 16px;
}

.org-card-meta {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.92rem;
}

@media (min-width: 1024px) {
  .org-environment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* v180.0 enterprise workforce simulation ecosystem */
.workforce-grid {
  display: grid;
  gap: 16px;
}

.workforce-panel {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 8px;
  padding: 16px;
}

@media (min-width: 1024px) {
  .workforce-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v180.1 navigation and responsive stability; v180.2 Builder V1; v180.3 UI/UX polish */
.tablet-admin-shortcuts {
  display: none;
}

.char-count {
  color: rgba(255, 255, 255, 0.46);
}

.char-count.is-empty {
  color: rgba(255, 255, 255, 0.38);
}

.char-count.is-short {
  color: #fbbf24;
}

.char-count.is-ready {
  color: rgba(255, 255, 255, 0.46);
}

.ticket-table th,
.ticket-table td {
  vertical-align: top;
}

.ticket-table th {
  white-space: nowrap;
}

.ticket-table th:nth-child(5) {
  white-space: normal;
  min-width: 7.5rem;
}

.ticket-table td:nth-child(5) {
  overflow-wrap: anywhere;
  min-width: 180px;
}

@media (max-width: 767px) {
  .tablet-admin-shortcuts {
    display: grid;
    gap: var(--space-2);
  }

  .clarity-sidebar.open {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible;
  }

  .clarity-sidebar {
    display: block !important;
    visibility: visible;
  }

  .clarity-topbar {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .clarity-topbar .eyebrow {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #welcome-banner {
    top: calc(64px + env(safe-area-inset-top));
    z-index: 850;
  }

  .core-workspace .v155-problem-panel {
    order: 1;
  }

  .core-workspace .v155-core-form {
    order: 2;
  }

  .core-ops-panel {
    order: 3;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .clarity-sidebar,
  .sidebar {
    display: block !important;
  }

  .tablet-admin-shortcuts {
    display: none !important;
  }

  .clarity-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
  }

  .clarity-topbar h1 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .topbar-actions {
    max-width: 260px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .core-workspace .v155-problem-panel {
    order: 1;
  }

  .core-workspace .v155-core-form {
    order: 2;
  }

  .core-ops-panel {
    order: 3;
  }
}

@media (min-width: 1280px) {
  .clarity-sidebar,
  .sidebar {
    display: block !important;
  }

  .clarity-page,
  .main-content {
    max-width: min(1520px, calc(100vw - 240px));
  }

  .workspace-shell-enabled .clarity-page {
    max-width: min(1560px, calc(100vw - 240px));
  }
}

/* ====================================================== */
/* BUILDER — BASE LAYOUT (v180.2 V1 foundation) */
/* ====================================================== */
.builder-v1-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-6);
}

.builder-v1-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.builder-v1-subnav a {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: rgba(226, 232, 240, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
  text-decoration: none;
}

.builder-v1-subnav a:hover {
  border-color: rgba(45, 212, 191, 0.45);
  color: #fff;
}

.builder-v1-hero {
  margin-bottom: var(--space-5);
}

.builder-v1-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0.25rem 0;
}

.builder-v1-lead {
  font-size: 1.05rem;
  color: rgba(226, 232, 240, 0.88);
  max-width: 52ch;
}

.builder-v1-disclaimer {
  max-width: 60ch;
  margin-top: var(--space-2);
}

.builder-v1-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.builder-v1-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  padding: var(--space-4);
}

.builder-v1-card h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.builder-v1-span-2 {
  grid-column: 1 / -1;
}

.builder-v1-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--space-3);
  font-size: 0.95rem;
}

.builder-v1-label input,
.builder-v1-label select,
.builder-v1-label textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.builder-v1-muted {
  color: rgba(226, 232, 240, 0.75);
}

.builder-v1-list {
  margin: 0;
  padding-left: 1.2rem;
}

.builder-v1-plain {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(241, 245, 249, 0.95);
}

.builder-v1-checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0;
}

.builder-v1-checklist li {
  margin-bottom: 0.5rem;
}

.builder-v1-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.builder-v1-validation-summary {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.builder-v1-validation-summary h3 {
  font-size: 1rem;
  margin-top: 0;
}

/* =========================================================
   BUILDER V183.0 — RUN “AT A GLANCE” (daily use)
   ========================================================= */
.builder-v183-daily-use {
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.builder-v183-glance-dl {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 var(--space-3);
}
.builder-v183-glance-dl > div {
  display: contents;
}
.builder-v183-glance-dl dt {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #94a3b8);
  font-weight: 600;
}
.builder-v183-glance-dl dd {
  margin: 0;
  font-size: 0.95rem;
}
.builder-v183-muted-lead {
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}
.builder-v183-jump-links {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.6;
}

.builder-v184-disk-outcome {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.builder-v184-disk-outcome h3 {
  font-size: 1rem;
  margin-top: 0;
}
.builder-v184-disk-outcome.is-pass {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.08);
}
.builder-v184-disk-outcome.is-fail {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.08);
}

.builder-v1-steps {
  margin: var(--space-2) 0 var(--space-4);
  padding-left: 1.2rem;
  line-height: 1.6;
}

.builder-v1-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.builder-v1-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
}

.builder-v1-badge.risk-low {
  background: rgba(34, 197, 94, 0.2);
  color: #bbf7d0;
}

.builder-v1-badge.risk-medium {
  background: rgba(251, 191, 36, 0.18);
  color: #fef3c7;
}

.builder-v1-badge.risk-high {
  background: rgba(248, 113, 113, 0.2);
  color: #fecaca;
}

.builder-v1-advanced {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 10px;
}

.builder-v1-history {
  margin-top: var(--space-5);
}

.builder-v1-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.builder-v1-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.builder-v1-history-row {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: var(--space-3);
}

.builder-v1-history-row h3 {
  margin: 0.35rem 0;
  font-size: 1rem;
}

.builder-v1-inline-form {
  margin-top: var(--space-2);
}

@media (min-width: 900px) {
  .builder-v1-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =============================================================================
   V180.3 — UI/UX polish (wayfinding, focus, touch, motion, feedback)
   ============================================================================= */

.visual-refresh {
  --ux-focus: rgba(79, 209, 197, 0.55);
  --ux-focus-ring: 0 0 0 3px rgba(79, 209, 197, 0.28);
  --ux-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}

.visual-refresh ::selection {
  background: rgba(79, 209, 197, 0.38);
  color: #061016;
}

.visual-refresh .clarity-page a:not(.button):not(.badge):not(.nav-big) {
  text-decoration: underline;
  text-decoration-color: rgba(106, 168, 255, 0.42);
  text-underline-offset: 3px;
}

.visual-refresh .clarity-page a:not(.button):not(.badge):not(.nav-big):hover {
  text-decoration-color: var(--refresh-teal);
}

.visual-refresh .clarity-nav .nav-big[aria-current="page"] {
  color: var(--refresh-text);
  background: rgba(79, 209, 197, 0.12);
  border-color: rgba(79, 209, 197, 0.35);
  box-shadow: inset 0 0 0 1px rgba(79, 209, 197, 0.12);
}

.visual-refresh .clarity-nav .nav-start[aria-current="page"] {
  box-shadow:
    0 12px 28px rgba(79, 209, 197, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.visual-refresh :is(a, button, input, textarea, select, summary, [role="button"], .hamburger, .bottom-nav-item):focus-visible {
  outline: 2px solid rgba(79, 209, 197, 0.95);
  outline-offset: 2px;
  box-shadow: var(--ux-focus-ring);
}

@media (hover: hover) {
  .visual-refresh button:hover:not(:disabled):not([aria-disabled="true"]),
  .visual-refresh .button:hover:not(:disabled):not([aria-disabled="true"]) {
    opacity: 1;
    filter: brightness(1.06);
  }

  .visual-refresh .button.secondary:hover:not(:disabled) {
    filter: brightness(1.08);
    border-color: rgba(191, 206, 223, 0.38);
  }
}

.visual-refresh .button:disabled,
.visual-refresh .button[disabled],
.visual-refresh button:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

.visual-refresh .button:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.97);
}

.visual-refresh input:not([type="checkbox"]):not([type="radio"]),
.visual-refresh textarea,
.visual-refresh select {
  transition:
    border-color 0.18s var(--ux-ease-out),
    box-shadow 0.18s var(--ux-ease-out);
}

.visual-refresh input:focus-visible,
.visual-refresh textarea:focus-visible,
.visual-refresh select:focus-visible {
  border-color: rgba(79, 209, 197, 0.55);
  box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.22);
  outline: 2px solid rgba(79, 209, 197, 0.75);
  outline-offset: 2px;
}

#welcome-banner {
  max-width: min(92vw, 380px);
  line-height: 1.45;
  font-size: 0.95rem;
  animation: diamops-welcome-in 0.42s ease-out both;
}

@keyframes diamops-welcome-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#toast-container {
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  line-height: 1.45;
}

.skip-link {
  font-weight: 700;
  border-radius: 0 0 10px 0;
  transition: top 0.2s ease, box-shadow 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  outline: 2px solid #061016;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .visual-refresh .bottom-nav {
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.38);
  }

  .visual-refresh .bottom-nav-item {
    position: relative;
    min-height: 48px;
    font-size: 11px;
    letter-spacing: 0.02em;
    font-weight: 650;
    border-radius: 12px 12px 0 0;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .visual-refresh .bottom-nav-item:focus-visible {
    outline: 2px solid rgba(79, 209, 197, 0.95);
    outline-offset: -4px;
    z-index: 1;
  }

  .visual-refresh .bottom-nav-item.active {
    color: #c9fff4;
    background: rgba(79, 209, 197, 0.1);
  }

  .visual-refresh .bottom-nav-item.active::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--refresh-teal), var(--refresh-blue));
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none !important;
  }

  #welcome-banner {
    animation: none !important;
  }

  .visual-refresh .button:active:not(:disabled) {
    transform: none;
  }
}

.visual-refresh .next-action-card,
.visual-refresh .v163-ops-hero {
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

@media (hover: hover) {
  .visual-refresh .next-action-card:hover,
  .visual-refresh .v163-ops-hero:hover {
    border-color: rgba(79, 209, 197, 0.24);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.26);
  }
}

.visual-refresh .char-count {
  color: rgba(255, 255, 255, 0.52);
}

.visual-refresh .clarity-topbar h1 {
  text-wrap: balance;
  letter-spacing: -0.02em;
}

/* ====================================================== */
/* BUILDER — CONTROLLED UPGRADE CONSOLE (V181+) */
/* ====================================================== */

.builder-v181-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.builder-v181-subnav {
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.builder-v181-queue-strip {
  border-radius: 14px;
  border: 1px solid rgba(79, 209, 197, 0.18);
  background: rgba(6, 16, 22, 0.55);
  padding: 0.85rem 1rem;
}

.builder-v181-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.builder-v181-counter {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 5.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.builder-v181-counter .label {
  opacity: 0.78;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.builder-v181-counter strong {
  font-size: 1.15rem;
  font-weight: 750;
}

.builder-v181-counter:hover {
  border-color: rgba(79, 209, 197, 0.35);
}

.builder-v181-counter.active {
  border-color: rgba(79, 209, 197, 0.55);
  background: rgba(79, 209, 197, 0.1);
}

.builder-v181-banner {
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.builder-v181-banner.warn {
  border: 1px solid rgba(255, 193, 94, 0.45);
  background: rgba(255, 193, 94, 0.08);
}

.builder-v181-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
}

.builder-v181-status-badge.status-draft {
  color: #b8c4cc;
}
.builder-v181-status-badge.status-queued {
  color: #9fdcf5;
}
.builder-v181-status-badge.status-generating {
  color: #c9b8ff;
}
.builder-v181-status-badge.status-awaiting-review,
.builder-v181-status-badge.status-builder-v1-plan,
.builder-v181-status-badge.status-plan-generated {
  color: #ffd28a;
}
.builder-v181-status-badge.status-approved {
  color: #8ef5c8;
}
.builder-v181-status-badge.status-rejected {
  color: #ffb4b4;
}
.builder-v181-status-badge.status-applied {
  color: #7ee0ff;
}
.builder-v181-status-badge.status-failed {
  color: #ff8a8a;
}

.builder-v181-timeline {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.builder-v181-timeline li {
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.9rem;
}

.builder-v181-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  margin-top: 0.75rem;
}

.builder-v181-inline label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.88rem;
}

.builder-v181-inline input[type="text"] {
  min-width: 10rem;
}

.builder-v181-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}

.builder-v181-actions-row {
  margin-top: 0.5rem;
}

.builder-v181-section-title {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.builder-v181-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.builder-v181-diff-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.builder-v181-diff-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.builder-v181-diff-card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
}

.builder-v181-diff-card > summary::-webkit-details-marker {
  display: none;
}

.builder-v181-diff-card > summary::before {
  content: "▸";
  font-size: 0.75rem;
  opacity: 0.65;
  margin-right: 0.15rem;
}

.builder-v181-diff-card[open] > summary::before {
  content: "▾";
}

.builder-v181-diff-card .path {
  font-weight: 650;
  word-break: break-word;
}

.builder-v181-diff-card .meta {
  font-size: 0.82rem;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.builder-v181-diff-card .snippet {
  margin: 0;
  padding: 0.65rem 0.85rem;
  max-height: 14rem;
  overflow: auto;
  font-size: 0.78rem;
  line-height: 1.45;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
  white-space: pre-wrap;
  word-break: break-word;
}

.builder-v181-diff-card.level-safe {
  border-left: 3px solid rgba(79, 209, 197, 0.55);
}

.builder-v181-diff-card.level-protected {
  border-left: 3px solid rgba(255, 193, 94, 0.75);
}

.builder-v181-diff-card.level-blocked {
  border-left: 3px solid rgba(255, 120, 120, 0.85);
}

.builder-v181-diff-card.high-impact {
  box-shadow: 0 0 0 1px rgba(255, 193, 94, 0.22);
}

.builder-v181-restore-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.builder-v181-restore-form input[type="text"] {
  flex: 1 1 8rem;
  min-width: 7rem;
}

/* ====================================================== */
/* BUILDER — MOBILE / TOUCH (V181.5) */
/* ====================================================== */

.builder-v181-queue-help {
  margin: 0 0 0.65rem;
  line-height: 1.45;
}

.builder-v181-hero-steps {
  margin-top: 0.4rem;
  max-width: 48rem;
  line-height: 1.5;
}

.builder-v181-history-hint {
  margin: 0 0 0.65rem;
}

@media (max-width: 640px) {
  .builder-v181-btn-row {
    flex-direction: column;
  }

  .builder-v181-btn-row form {
    width: 100%;
  }

  .builder-v181-btn-row .button {
    width: 100%;
    min-height: 2.75rem;
  }

  .builder-v181-counter {
    min-width: calc(50% - 0.35rem);
    min-height: 2.75rem;
    justify-content: center;
  }

  .builder-v181-diff-card > summary {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ====================================================== */
/* PUBLIC MARKETING / LANDING (V202.0) */
/* ====================================================== */

.public-marketing-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 80% at 20% 0%, rgba(79, 209, 197, 0.08), transparent 55%),
    linear-gradient(180deg, #090d12 0%, #070a0f 100%);
  color: #e8eef5;
}

.public-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 8, 12, 0.65);
  backdrop-filter: blur(10px);
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}

.public-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.45rem;
  background: linear-gradient(145deg, rgba(79, 209, 197, 0.35), rgba(79, 209, 197, 0.08));
  font-weight: 750;
  font-size: 1rem;
}

.public-brand small {
  display: block;
  font-size: 0.72rem;
  opacity: 0.72;
  font-weight: 500;
}

.public-topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
}

.public-topnav a {
  color: #c8d4e0;
  text-decoration: none;
  font-size: 0.92rem;
}

.public-topnav a:hover {
  color: #fff;
}

.public-main {
  flex: 1;
  width: min(1100px, 100% - 2rem);
  margin: 0 auto;
  padding: 1.75rem 1rem 2.5rem;
}

.public-footer {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.88rem;
  color: #9aa7b6;
  background: rgba(5, 8, 12, 0.55);
}

.public-footer strong {
  color: #dce6f0;
}

.public-footer small {
  display: block;
  margin-top: 0.35rem;
  line-height: 1.45;
  opacity: 0.9;
}

.public-landing-hero {
  align-items: stretch;
}

.public-hero-aside {
  max-width: 22rem;
}

.public-role-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.public-role-list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: #c5d2e2;
}

.public-role-list .ti {
  opacity: 0.75;
}

.public-showcase-preview {
  margin-top: 1.5rem;
}

.public-preview-placeholder {
  margin-top: 1rem;
  min-height: 180px;
  border-radius: 0.65rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: #8fa0b3;
  font-size: 0.88rem;
  line-height: 1.5;
}

.public-preview-placeholder code {
  font-size: 0.82rem;
}

.public-auth-card {
  max-width: 32rem;
  margin: 2rem auto;
}

.public-flash {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.45rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.public-flash-error {
  background: rgba(255, 120, 120, 0.12);
  border: 1px solid rgba(255, 120, 120, 0.35);
}

.public-flash-message,
.public-flash-info {
  background: rgba(79, 209, 197, 0.08);
  border: 1px solid rgba(79, 209, 197, 0.25);
}

.public-page-title-wrap {
  margin-bottom: 0.35rem;
}

.public-page-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.login-pilot-signup {
  margin-top: 1rem;
  text-align: center;
}

.public-landing-roles-heading {
  margin-top: 0;
  font-size: 1rem;
  font-weight: 650;
}

.sim-integrity-note {
  margin-top: 0.35rem;
}

@media (max-width: 720px) {
  .public-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .public-topnav {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ====================================================== */
/* ADMIN — USER MANAGEMENT (V202.5) */
/* ====================================================== */

.admin-user-toolbar {
  margin-bottom: 0.75rem;
}

.admin-user-filter {
  display: block;
  max-width: 28rem;
}

.input-inline-search {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font-size: 0.95rem;
}

.badge.warning-inline {
  margin-left: 0.35rem;
  font-size: 0.68rem;
  vertical-align: middle;
  padding: 0.12rem 0.35rem;
  border-radius: 0.3rem;
  background: rgba(255, 193, 94, 0.15);
  border: 1px solid rgba(255, 193, 94, 0.35);
  color: #fcd9a4;
}

.demo-cleanup-preview-form {
  display: inline-block;
  margin-right: 0.75rem;
}

.demo-cleanup-execute-form {
  margin-top: 1rem;
  max-width: 36rem;
}

#live-demo-cleanup .admin-user-toolbar {
  margin-top: 0.75rem;
}

/* ====================================================== */
/* ADMIN — USER MANAGEMENT SAAS TABLE (V204.0) */
/* ====================================================== */

.admin-users-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.admin-users-heading .lead {
  max-width: 42rem;
}

.admin-users-heading-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-users-diagnostics {
  padding: 0.85rem 1.1rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
}

.admin-users-diagnostics-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.admin-users-diagnostics-note {
  margin: 0.5rem 0 0;
}

.admin-users-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .admin-users-layout {
    grid-template-columns: 1fr;
  }
}

.admin-users-create-form {
  display: grid;
  gap: 0.65rem;
}

.admin-users-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.88rem;
}

.admin-users-field input,
.admin-users-field select {
  padding: 0.45rem 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
}

.admin-users-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.admin-users-bulk-bar {
  position: sticky;
  top: 0.5rem;
  z-index: 20;
  margin: 0.5rem 0 1rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(99, 179, 237, 0.35);
  background: rgba(12, 20, 32, 0.92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.admin-users-bulk-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.admin-users-bulk-count {
  font-size: 0.92rem;
}

.admin-users-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-users-table-panel {
  padding: 0.75rem 1rem 1rem;
}

.admin-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-users-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-users-filter-pill {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-size: 0.78rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
}

.admin-users-filter-pill.is-active {
  border-color: rgba(99, 179, 237, 0.55);
  background: rgba(99, 179, 237, 0.12);
}

.admin-users-search {
  flex: 1 1 14rem;
  max-width: 22rem;
}

.admin-users-table-scroll {
  margin: 0 -0.25rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-users-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-users-table th,
.admin-users-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.admin-users-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

.admin-users-th-check {
  width: 2.25rem;
}

.admin-users-th-actions {
  width: 6.5rem;
}

.admin-users-usercell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.admin-users-username {
  font-weight: 600;
}

.admin-users-badge-protected {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: rgba(147, 112, 219, 0.15);
  border: 1px solid rgba(147, 112, 219, 0.35);
  color: #e6dcff;
}

.admin-users-badge-demo {
  font-size: 0.65rem;
}

.admin-users-email {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-users-row-menu {
  position: relative;
}

.admin-users-menu-trigger {
  list-style: none;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0.28rem 0.55rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
}

.admin-users-row-menu summary::-webkit-details-marker {
  display: none;
}

.admin-users-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 11rem;
  padding: 0.35rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 18, 26, 0.98);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  z-index: 30;
}

.admin-users-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.86rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.admin-users-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.admin-users-menu-item.danger {
  color: #ffb4b4;
}

.admin-users-menu-form {
  margin: 0;
}

.admin-users-menu-form button {
  width: 100%;
}

dialog.admin-users-dialog {
  max-width: 26rem;
  width: calc(100vw - 2rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.65rem;
  background: rgba(14, 18, 26, 0.98);
  color: inherit;
  padding: 0;
}

dialog.admin-users-dialog:not([open]) {
  display: none;
}

dialog.admin-users-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

dialog.admin-users-dialog.dialog-fallback-open {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9001;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

body.admin-users-dialog-fallback-active::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.55);
}

.admin-users-dialog form {
  padding: 1.1rem 1.2rem 1.2rem;
}

/* V205.1 deep audit fixes: contain wide operational UI without hiding table access. */
html,
body {
  max-width: 100%;
}

.clarity-shell,
.clarity-main,
.clarity-page,
.panel,
.next-action-card {
  min-width: 0;
}

.button,
.hero-actions .button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-users-table-scroll,
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.admin-users-table th,
.admin-users-table td {
  overflow-wrap: anywhere;
}

.admin-users-email {
  white-space: normal;
  overflow-wrap: anywhere;
}

.check-row {
  min-width: 0;
}

.check-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  .check-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .check-row span {
    text-align: left;
  }
}

.admin-users-dialog h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.admin-users-dialog-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  max-height: 10rem;
  overflow-y: auto;
  font-size: 0.88rem;
}

.admin-users-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.platform-origin-warning {
  margin: 0.5rem 1rem 0;
  padding: 0.65rem 0.85rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 193, 94, 0.45);
  background: rgba(255, 193, 94, 0.12);
  color: #fcd9a4;
  font-size: 0.88rem;
}

.resume-work-card {
  margin-bottom: 1rem;
}

.proof-recruiter-note {
  border-left: 3px solid rgba(99, 179, 237, 0.45);
  padding-left: 0.65rem;
}

/* DiamOps Sentinel V1: tablet proof surfaces need calm, scan-safe wrapping. */
.proof-centre-hero {
  align-items: stretch;
}

.proof-centre-hero > div:first-child {
  min-width: 0;
}

.proof-centre-hero .hero-actions {
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  max-width: 180px;
}

.proof-centre-hero .hero-actions .button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.proof-table-shell {
  border-radius: 18px;
  overscroll-behavior-x: contain;
}

.proof-table-shell table {
  table-layout: fixed;
  min-width: 680px;
}

.proof-table-shell th,
.proof-table-shell td {
  overflow-wrap: anywhere;
}

.clarity-user-card span:not(.user-chip),
.clarity-brand span:not(.brand-mark) {
  min-width: 0;
}

.clarity-user-card strong,
.clarity-user-card small,
.clarity-brand small {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .proof-centre-hero {
    flex-direction: column;
  }

  .proof-centre-hero .hero-actions {
    width: 100%;
    max-width: none;
    justify-content: stretch;
  }
}

/* LIVE PLATFORM — enterprise SaaS polish (2026) */
body.diamops-live-platform {
  background: var(--brand-navy);
  color: var(--text);
}

body.clarity-shell {
  display: block;
}

.clarity-brand .brand-mark,
.public-brand .brand-mark {
  background: linear-gradient(135deg, var(--brand-cobalt), var(--brand-blue));
  color: var(--brand-white);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
}

.clarity-brand small,
.public-brand small {
  color: var(--brand-muted);
}

.clarity-topbar .eyebrow,
.public-topbar .eyebrow {
  color: var(--brand-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.button.primary {
  background: linear-gradient(180deg, #3b82f6 0%, var(--brand-blue) 100%);
  border-color: rgba(37, 99, 235, 0.65);
}

.panel,
.price-card,
.metric-card,
.guided-step-card {
  border-color: var(--border-soft);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 19, 43, 0.98));
}

.platform-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.12);
  color: var(--brand-silver);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.platform-trust-strip {
  margin-top: 0.75rem;
  color: var(--brand-muted);
  font-size: 0.88rem;
}

.admin-nav-clean summary {
  font-weight: 600;
}

.nav-folder.admin-folder a {
  font-size: 0.92rem;
}

.pricing-trial-note {
  margin-top: 0.5rem;
  color: var(--brand-silver);
  font-size: 0.9rem;
}

.settings-platform-panel .metric-list strong {
  color: var(--brand-silver);
}

/* Brand integration pass: use the DiamOps mark consistently across shells. */
.brand-word {
  display: inline-block;
  letter-spacing: 0;
}

.brand-word span {
  color: #4f8cff;
}

.clarity-brand .brand-word,
.clarity-user-card strong {
  display: block;
  line-height: 1.15;
}

.clarity-brand small,
.clarity-user-card small {
  display: block;
  margin-top: 4px;
  line-height: 1.35;
}

.brand-mark.brand-mark-logo,
.public-brand .brand-mark.brand-mark-logo {
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(214, 220, 228, 0.08), rgba(37, 99, 235, 0.08)),
    #071126;
  border: 1px solid rgba(37, 99, 235, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 16px 34px rgba(37, 99, 235, 0.2);
}

.brand-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.clarity-brand .brand-mark-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.public-brand .brand-mark-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.brand-orbit.brand-orbit-logo {
  width: 92px;
  height: 92px;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #071126;
  border: 1px solid rgba(37, 99, 235, 0.62);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 42px rgba(37, 99, 235, 0.34),
    0 28px 72px rgba(0, 0, 0, 0.42);
}

.brand-orbit.brand-orbit-logo::after {
  display: none;
}

.login-language-switcher .language-globe {
  width: auto;
  min-width: 76px;
  padding: 0 10px;
  color: var(--brand-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.login-language-switcher select {
  min-width: 160px;
  text-align: left;
}

.premium-login-brand .brand-word {
  color: #f8fafc;
}

.premium-login-brand .brand-word span {
  color: #4f8cff;
}

.public-marketing-shell {
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(37, 99, 235, 0.18), transparent 62%),
    radial-gradient(760px 460px at 82% 12%, rgba(214, 220, 228, 0.08), transparent 58%),
    linear-gradient(180deg, #050b18 0%, #071126 52%, #050b18 100%);
}

.public-preview-placeholder {
  border-style: solid;
  border-color: rgba(37, 99, 235, 0.24);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(7, 17, 38, 0.92)),
    radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.18), transparent 34%);
  color: #cbd5e1;
}

@media (max-width: 767px) {
  .clarity-brand .brand-mark-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .brand-orbit.brand-orbit-logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
  }

  .login-language-switcher {
    align-items: stretch;
    border-radius: 12px;
  }

  .login-language-switcher .language-globe {
    min-width: 0;
    justify-content: flex-start;
  }

  .login-language-switcher select {
    min-width: 0;
    width: 100%;
  }

  .enterprise-capability-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .enterprise-capability-grid .side-stack,
  .enterprise-capability-grid .panel {
    width: 100%;
    min-width: 0;
  }

  .enterprise-capability-grid .panel h2 {
    font-size: clamp(1.25rem, 6vw, 1.55rem);
    line-height: 1.16;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* ====================================================== */
/* ACTIVE INCIDENT WORKSPACE — V208.0                    */
/* Transforms core_loop into a multi-panel ops surface  */
/* ====================================================== */

.ops-workspace {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 268px;
  gap: 16px;
  align-items: start;
  padding-bottom: 24px;
}

.ops-workspace-left {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
}

.ops-workspace-center {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ops-workspace-right {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
}

/* Incident meta card */
.ops-incident-meta {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  background: rgba(11, 22, 38, 0.94);
}

.incident-priority-row,
.incident-sla-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.incident-meta-row {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.incident-meta-row small {
  font-size: 0.70rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}

.incident-meta-row span {
  font-size: 0.88rem;
  color: var(--text, #f8fafc);
  line-height: 1.35;
}

/* Priority badges */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.priority-badge.priority-critical,
.priority-badge.priority-high {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.priority-badge.priority-medium {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.priority-badge.priority-low {
  color: #86efac;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

/* SLA live indicator */
.sla-live-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 800;
}

.sla-live-indicator.sla-breached {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.24);
  color: #fca5a5;
}

.sla-live-indicator.sla-at-risk,
.sla-live-indicator.sla-tight {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.24);
  color: #fcd34d;
}

.sla-live-indicator.sla-healthy,
.sla-live-indicator.sla-completed {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.20);
  color: #86efac;
}

@keyframes ops-sla-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.sla-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.sla-live-indicator.sla-breached .sla-pulse-dot,
.sla-live-indicator.sla-at-risk .sla-pulse-dot,
.sla-live-indicator.sla-tight .sla-pulse-dot {
  animation: ops-sla-pulse 1.8s ease-in-out infinite;
}

/* Progress card */
.ops-progress-card {
  padding: 14px 16px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  background: rgba(11, 22, 38, 0.94);
}

.ops-progress-card .progress-stepper {
  margin-bottom: 0;
}

/* Back to queue link */
.ops-queue-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted, #94a3b8);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ops-queue-link:hover {
  color: var(--text, #f8fafc);
  border-color: rgba(148, 163, 184, 0.30);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

/* Workspace incident header panel */
.ops-incident-header {
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  padding: 20px;
  background: rgba(11, 22, 38, 0.94);
}

.ops-incident-header h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  line-height: 1.2;
  margin: 6px 0 10px;
  color: var(--text, #f8fafc);
}

/* AI Intelligence Panel */
.ops-ai-panel {
  border: 1px solid rgba(37, 99, 235, 0.30);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10, 18, 36, 0.96);
}

.ops-ai-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.10);
  font-weight: 900;
  font-size: 0.84rem;
  color: #93c5fd;
  letter-spacing: 0.02em;
}

.ops-ai-panel-header i {
  color: #60a5fa;
}

.ops-ai-panel-body {
  padding: 14px;
  display: grid;
  gap: 14px;
}

.ops-ai-section {
  display: grid;
  gap: 6px;
}

.ops-ai-section-title {
  font-size: 0.70rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin: 0;
}

.ops-ai-summary {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.5;
  padding: 10px 12px;
  border-left: 2px solid rgba(37, 99, 235, 0.55);
  background: rgba(37, 99, 235, 0.06);
  border-radius: 0 8px 8px 0;
}

.ops-ai-check-list {
  display: grid;
  gap: 5px;
}

.ops-ai-check-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 10px;
  border: 1px solid rgba(34, 197, 94, 0.14);
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.04);
  font-size: 0.84rem;
  color: #d1fae5;
  line-height: 1.4;
}

.ops-ai-check-item i {
  color: #4ade80;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.9rem;
}

.ops-ai-risk-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 10px;
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.05);
  font-size: 0.84rem;
  color: #fde68a;
  line-height: 1.4;
}

.ops-ai-risk-item i {
  color: #fbbf24;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.9rem;
}

.ops-ai-guidance-note {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(148, 163, 184, 0.10);
}

/* Activity drawer */
.ops-activity-drawer {
  grid-column: 1 / -1;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  background: rgba(6, 12, 24, 0.97);
  overflow: hidden;
  margin-top: 4px;
}

.ops-activity-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(30, 58, 95, 0.60);
  cursor: pointer;
  user-select: none;
  background: rgba(11, 22, 38, 0.80);
}

.ops-activity-drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}

.ops-activity-drawer-body {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

.ops-activity-drawer.drawer-closed .ops-activity-drawer-body {
  display: none;
}

.ops-timeline-event {
  flex-shrink: 0;
  min-width: 172px;
  max-width: 232px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.ops-timeline-event.complete {
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(34, 197, 94, 0.04);
}

.ops-timeline-event.active {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.06);
}

.ops-timeline-event.pending {
  opacity: 0.45;
}

.ops-timeline-event .event-label {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--text, #f8fafc);
  letter-spacing: 0.01em;
}

.ops-timeline-event .event-detail {
  font-size: 0.75rem;
  color: var(--muted, #94a3b8);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Escalation panel */
.ops-escalation-panel {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  background: rgba(11, 22, 38, 0.92);
}

.ops-escalation-panel p {
  font-size: 0.86rem;
  color: var(--muted, #94a3b8);
  line-height: 1.5;
  margin: 0;
}

/* Phase 8: adaptive mode pressure indicators */
.adaptive-pressure-bar {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .84rem;
  line-height: 1.45;
  margin-top: .75rem;
}
.adaptive-pressure-bar i { flex: 0 0 auto; margin-top: .1rem; }
.pressure-elevated {
  border: 1px solid rgba(251,191,36,.30);
  background: rgba(251,191,36,.08);
  color: rgb(253,224,132);
}
.pressure-critical {
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.09);
  color: rgb(252,165,165);
}

/* Phase 9: AI operational actions panel */
.ops-ai-actions-panel {
  margin-top: 12px;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 14px;
  background: rgba(11,22,38,.92);
  overflow: hidden;
}
.ops-ai-actions-intro {
  font-size: .8rem;
  color: var(--muted, #94a3b8);
  margin: 0 14px 10px;
}
.ops-ai-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 12px 12px;
}
.ops-ai-action-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(56,189,248,.18);
  background: rgba(56,189,248,.07);
  color: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  min-height: 36px;
  transition: background .15s, border-color .15s;
}
.ops-ai-action-btn:hover:not(:disabled) {
  background: rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.35);
}
.ops-ai-action-btn:disabled { opacity: .55; cursor: not-allowed; }
.ops-ai-action-result {
  border-top: 1px solid rgba(148,163,184,.1);
  padding: 12px 14px;
}
.ops-ai-loading {
  display: flex; align-items: center; gap: 7px;
  font-size: .83rem; color: var(--muted, #94a3b8); margin: 0;
}
.ops-ai-result-inner { font-size: .84rem; }
.ops-ai-result-title {
  font-weight: 800; font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase; color: rgb(56,189,248);
  margin-bottom: 8px;
}
.ops-ai-result-text { line-height: 1.55; margin: 0 0 8px; }
.ops-ai-result-hint { font-size: .78rem; color: var(--muted); margin: 0 0 8px; }
.ops-ai-result-error { color: #fca5a5; margin: 0; }
.ops-ai-result-list { padding-left: 1.2rem; margin: 0 0 8px; }
.ops-ai-result-list li { margin-bottom: 5px; line-height: 1.4; }
.ops-ai-result-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 8px; }
.ops-ai-result-dl dt { font-weight: 700; color: var(--muted); white-space: nowrap; }
.ops-ai-result-dl dd { margin: 0; }
.ops-ai-timeline { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.ops-ai-timeline-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; border-radius: 7px;
  border-left: 3px solid rgba(148,163,184,.3);
  background: rgba(255,255,255,.03);
}
.ops-ai-timeline-row.complete { border-left-color: rgb(52,211,153); }
.ops-ai-timeline-row.pending  { border-left-color: rgba(148,163,184,.3); }
.ops-ai-timeline-row.event    { border-left-color: rgb(56,189,248); }
.tl-label { font-weight: 700; font-size: .8rem; }
.tl-detail { font-size: .76rem; color: var(--muted); }
.ops-ai-copy-btn {
  padding: 5px 12px; border-radius: 7px;
  border: 1px solid rgba(56,189,248,.25);
  background: rgba(56,189,248,.08);
  color: inherit; font-size: .78rem; cursor: pointer;
  min-height: 30px;
}
.ops-ai-copy-btn:hover { background: rgba(56,189,248,.16); }

/* Phase 10: live activity feed */
.ops-live-feed-section {
  margin-top: 20px;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 14px;
  background: rgba(7,17,38,.7);
  overflow: hidden;
}
.ops-live-feed-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(148,163,184,.08);
}
.ops-live-feed-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgb(52,211,153);
  box-shadow: 0 0 6px rgba(52,211,153,.6);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.ops-live-feed-status {
  font-size: .77rem;
  color: var(--muted, #94a3b8);
  margin-left: auto;
}
.ops-live-feed-list {
  padding: 8px 0;
  max-height: 260px;
  overflow-y: auto;
}
.ops-live-feed-row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 16px;
  font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.ops-live-feed-row i { color: rgb(56,189,248); font-size: .9rem; }
.feed-label { font-weight: 600; }
.feed-detail { font-size: .76rem; color: var(--muted, #94a3b8); }
.feed-age { font-size: .74rem; color: var(--muted, #94a3b8); white-space: nowrap; }
.ops-live-feed-placeholder {
  grid-template-columns: 1fr;
  padding: 14px 16px;
  color: var(--muted, #94a3b8);
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .ops-live-feed-dot { animation: none; }
}

/* Phase 11: first-session onboarding banner */
.ops-onboarding-banner {
  padding: 24px 28px;
  border-radius: 20px;
  border: 1px solid rgba(56,189,248,.3);
  background: linear-gradient(135deg, rgba(56,189,248,.1), rgba(52,211,153,.06), rgba(5,11,21,.8));
  margin-bottom: 20px;
}
.onboarding-banner-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.onboarding-banner-icon {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(56,189,248,.15);
  border: 1px solid rgba(56,189,248,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: rgb(56,189,248);
}
.onboarding-banner-content h2 { margin: 4px 0 8px; font-size: clamp(1.2rem, 2.5vw, 1.55rem); }
.onboarding-banner-content p { margin: 0 0 14px; color: var(--muted, #94a3b8); font-size: .94rem; }
.onboarding-steps-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.onboarding-step {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  font-size: .79rem; font-weight: 600;
}
.onboarding-step i { color: rgb(52,211,153); }
.onboarding-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 640px) {
  .onboarding-banner-content { flex-direction: column; }
  .onboarding-banner-icon { width: 40px; height: 40px; font-size: 1.2rem; }
}

/* Phase 11: completion screen */
.completion-hero { border-color: rgba(52,211,153,.25); background: linear-gradient(135deg, rgba(52,211,153,.08), rgba(14,165,233,.05), rgba(5,11,21,.7)); }
.completion-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.completion-next-actions {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 16px;
  background: rgba(7,17,38,.6);
}
.ops-next-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.completion-next-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(56,189,248,.18);
  background: rgba(56,189,248,.06);
  color: inherit;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.completion-next-btn i { font-size: 1.1rem; color: rgb(56,189,248); }
.completion-next-btn span { font-weight: 800; font-size: .9rem; }
.completion-next-btn small { font-size: .77rem; color: var(--muted, #94a3b8); }
.completion-next-btn:hover { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.32); }
.proof-path-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.proof-path-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start;
  padding: 8px 12px; border-radius: 9px; background: rgba(2,6,23,.5);
  border: 1px solid rgba(148,163,184,.1);
}
.proof-path-label { font-size: .78rem; font-weight: 700; color: var(--muted, #94a3b8); padding-top: 2px; }
.proof-path-row code { font-size: .78rem; color: rgb(147,197,253); word-break: break-all; }

/* Phase 11: advanced-tier red-herring reveal block (completion screen) */
.ops-red-herring-reveal {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 24px;
  margin: 20px 0;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-left: 3px solid #fbbf24;
  border-radius: 14px;
  background: rgba(251, 191, 36, 0.05);
}
.red-herring-reveal-icon {
  font-size: 2rem;
  color: #fbbf24;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.ops-red-herring-reveal h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fde68a;
  margin: 4px 0 8px;
}
.ops-red-herring-reveal p { margin: 0 0 8px; }
.ops-red-herring-reveal p:last-child { margin-bottom: 0; }

/* ====================================================== */
/* PHASE 12: INCIDENT DEPTH ENGINE                        */
/* ====================================================== */

/* Area 1: Related incidents panel */
.ops-related-panel {
  padding: 14px 16px;
  border: 1px solid rgba(30, 58, 95, 0.9);
  border-radius: 14px;
  background: rgba(5, 11, 21, 0.72);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ops-related-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(30, 58, 95, 0.7);
  border-left-width: 3px;
  background: rgba(15, 23, 42, 0.6);
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s;
  cursor: pointer;
}
.ops-related-row:hover { background: rgba(56, 189, 248, 0.07); }
.ops-related-row.priority-critical,
.ops-related-row.priority-high   { border-left-color: #f87171; }
.ops-related-row.priority-medium { border-left-color: #f59e0b; }
.ops-related-row.priority-low    { border-left-color: #4ade80; }

.ops-related-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ops-related-id {
  font-size: 0.72rem;
  font-weight: 800;
  color: #93c5fd;
  letter-spacing: 0.04em;
  font-family: monospace;
}
.ops-related-role {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #94a3b8);
  background: rgba(148, 163, 184, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}
.ops-related-title {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text, #f8fafc);
  line-height: 1.3;
}
.ops-related-rel {
  font-size: 0.74rem;
  color: var(--muted, #94a3b8);
  font-style: italic;
}

/* Area 2: Operational consequence flags (completion screen) */
.ops-consequence-flags {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ops-consequence-flag {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.06);
}
.ops-consequence-flag.caution {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.06);
}
.ops-consequence-flag i {
  font-size: 1.2rem;
  color: #fbbf24;
  flex-shrink: 0;
  margin-top: 1px;
}
.ops-consequence-flag.caution i { color: #f87171; }
.ops-consequence-flag strong { font-size: 0.88rem; display: block; margin-bottom: 4px; }
.ops-consequence-flag p { font-size: 0.82rem; color: var(--muted, #94a3b8); margin: 0; }

/* Area 3: Environment escalation note in core loop */
.ops-env-escalation-note {
  margin: 6px 0 0;
  font-size: 0.80rem;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}

/* Area 4: Session digest panel */
.ops-session-digest {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 14px;
  border: 1px solid rgba(99, 179, 237, 0.20);
  border-radius: 14px;
  background: rgba(14, 165, 233, 0.06);
}
.ops-digest-icon {
  font-size: 1.6rem;
  color: #7dd3fc;
  flex-shrink: 0;
}
.ops-session-digest h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text, #f8fafc);
  margin: 0 0 6px;
}
.ops-digest-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ops-digest-stat {
  font-size: 0.80rem;
  color: var(--muted, #94a3b8);
}
.ops-digest-stat strong {
  color: var(--text, #f8fafc);
  font-size: 1rem;
  margin-right: 3px;
}
.ops-digest-urgent strong { color: #fca5a5; }

/* Area 7: Queue surge banner */
.ops-surge-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.07);
}
.ops-surge-banner.surge-high {
  border-color: rgba(239, 68, 68, 0.32);
  border-left-color: #f87171;
  background: rgba(239, 68, 68, 0.07);
}
.ops-surge-banner.surge-critical {
  border-color: rgba(239, 68, 68, 0.45);
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  animation: ops-sla-card-pulse 2s ease-in-out infinite;
}
.ops-surge-banner i {
  font-size: 1.3rem;
  color: #fbbf24;
  flex-shrink: 0;
}
.ops-surge-banner.surge-high i,
.ops-surge-banner.surge-critical i { color: #f87171; }
.ops-surge-banner div { flex: 1; }
.ops-surge-banner strong { display: block; font-size: 0.88rem; margin-bottom: 2px; }
.ops-surge-banner span { font-size: 0.80rem; color: var(--muted, #94a3b8); }
@media (prefers-reduced-motion: reduce) {
  .ops-surge-banner.surge-critical { animation: none; }
}

/* Area 5: Timeline phase grouping */
.ops-timeline-phase-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 10px 0 4px;
  border-top: 1px solid rgba(30, 58, 95, 0.5);
  margin-top: 4px;
}
.ops-timeline-phase-header:first-child {
  padding-top: 4px;
  border-top: none;
  margin-top: 0;
}
.ops-timeline-consequence-ok {
  font-size: 0.70rem;
  color: #4ade80;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

/* ── Phase 12 Area 8: Operational Identity Profile ─────────────────── */
.ops-identity-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ops-identity-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ops-identity-header h3 {
  margin: 4px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}
.ops-identity-readiness {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ops-readiness-strong {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.30);
}
.ops-readiness-developing {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.30);
}
.ops-readiness-early {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.20);
}
.ops-identity-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ops-identity-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(30, 58, 95, 0.40);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  padding: 10px 16px;
  flex: 1 1 100px;
  min-width: 90px;
}
.ops-identity-stat strong {
  font-size: 1.30rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}
.ops-identity-stat small {
  font-size: 0.70rem;
  color: #64748b;
  text-align: center;
  line-height: 1.3;
}
.ops-identity-insight-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .ops-identity-insight-row { grid-template-columns: 1fr; }
}
.ops-identity-block .eyebrow { display: block; margin-bottom: 8px; }
.ops-identity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ops-identity-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.ops-identity-strengths li .ti { color: #4ade80; font-size: 0.90rem; }
.ops-identity-improvements li .ti { color: #fbbf24; font-size: 0.90rem; }
.ops-identity-footer {
  margin-top: 4px;
  border-top: 1px solid rgba(30, 58, 95, 0.5);
  padding-top: 12px;
}

/* ── Phase 13 Area 4: Achievement System ───────────────────────────── */
.ops-ach-progress-bar-wrap {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ops-ach-progress-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.ops-ach-progress-meta strong {
  font-size: 0.95rem;
  color: var(--text-primary);
}
.ops-ach-progress-track {
  height: 6px;
  background: rgba(30,58,95,0.5);
  border-radius: 4px;
  overflow: hidden;
}
.ops-ach-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.ops-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.ops-ach-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.12);
  background: rgba(15,23,42,0.6);
  transition: border-color 0.15s;
}
.ops-ach-earned {
  border-color: rgba(74,222,128,0.30);
  background: rgba(74,222,128,0.04);
}
.ops-ach-locked {
  opacity: 0.55;
}
.ops-ach-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.ops-ach-earned .ops-ach-icon {
  background: rgba(74,222,128,0.15);
  color: #4ade80;
}
.ops-ach-locked .ops-ach-icon {
  background: rgba(30,58,95,0.5);
  color: #475569;
}
.ops-ach-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ops-ach-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ops-ach-label { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.ops-ach-badge-earned {
  font-size: 0.70rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(74,222,128,0.15); color: #4ade80;
}
.ops-ach-badge-locked {
  font-size: 0.70rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(71,85,105,0.3); color: #64748b;
}
.ops-ach-description { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; }
.ops-ach-requirement { display: block; margin-top: 2px; }
.ops-ach-date { display: block; margin-top: 3px; color: #4ade80; }

/* Achievement mini grid (skills_dashboard preview) */
.ops-ach-mini-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ops-ach-mini-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(74,222,128,0.25);
  background: rgba(74,222,128,0.07);
  font-size: 0.80rem;
  color: var(--text-secondary);
  cursor: default;
}
.ops-ach-mini-card .ti { color: #4ade80; font-size: 0.85rem; }

/* ── Phase 13 Area 2: Readiness Trend Chart (CSS-based) ─────────────── */
.ops-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
  padding: 4px 0 0;
}
.ops-trend-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}
.ops-trend-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}
.ops-trend-strong { background: rgba(74,222,128,0.7); }
.ops-trend-mid    { background: rgba(251,191,36,0.7); }
.ops-trend-low    { background: rgba(239,68,68,0.6); }
.ops-trend-label {
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1;
}

/* ── Phase 13 Area 3: Role Affinity ─────────────────────────────────── */
.ops-affinity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ops-affinity-card {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.12);
  background: rgba(30,58,95,0.30);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ops-affinity-top {
  border-color: rgba(96,165,250,0.35);
  background: rgba(59,130,246,0.08);
}
.ops-affinity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ops-affinity-header strong { font-size: 0.92rem; color: var(--text-primary); }
.ops-affinity-score { font-size: 1.05rem; font-weight: 900; }
.ops-affinity-signals {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.ops-affinity-signals li {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-secondary);
}
.ops-affinity-signals li .ti { color: #4ade80; font-size: 0.80rem; }

/* ── Phase 13 Area 1: Career Path Grid ──────────────────────────────── */
.ops-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ops-path-card {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.12);
  background: rgba(30,58,95,0.30);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ops-path-active { border-color: rgba(96,165,250,0.30); }
.ops-path-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ops-path-header strong { font-size: 0.92rem; color: var(--text-primary); }
.ops-path-milestone-badge {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(74,222,128,0.15); color: #4ade80;
}
.ops-path-stats {
  display: flex; gap: 12px;
  font-size: 0.82rem; color: var(--text-secondary);
}
.ops-path-stats strong { color: var(--text-primary); }
.ops-path-certs {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.ops-path-cert-tag {
  font-size: 0.70rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(30,58,95,0.6);
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,0.12);
}

/* ── Phase 13 Area 5 + Phase 14: Progression Timeline ───────────────── */
.ops-progression-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  position: relative;
}
.ops-progression-timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(30,58,95,0.7);
}
.ops-progression-event {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0 10px 0;
  position: relative;
}
.ops-progression-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  background: rgba(30,58,95,0.8);
  border: 2px solid rgba(30,58,95,0.8);
  z-index: 1;
}
.ops-progression-milestone .ops-progression-icon { background: rgba(59,130,246,0.2); border-color: rgba(96,165,250,0.5); color: #60a5fa; }
.ops-progression-improvement .ops-progression-icon { background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.4); color: #4ade80; }
.ops-progression-achievement .ops-progression-icon { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.4); color: #fbbf24; }
.ops-progression-domain .ops-progression-icon { background: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.4); color: #a855f7; }
.ops-progression-content {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 10px;
}
.ops-progression-content strong { font-size: 0.90rem; color: var(--text-primary); }
.ops-progression-score {
  font-size: 0.80rem;
  font-weight: 700;
  color: #60a5fa;
  margin-top: 2px;
}
.ops-progression-date {
  padding-top: 12px;
  white-space: nowrap;
  font-size: 0.72rem;
}

/* ── Phase 14: Recruiter Dashboard extras ───────────────────────────── */
.ops-recruiter-readiness-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(30,58,95,0.5);
}
.ops-recruiter-ready-block {
  display: flex; align-items: center; gap: 10px;
}
.ops-recruiter-ready-score {
  font-size: 2rem; font-weight: 900; color: var(--text-primary);
  line-height: 1;
}
.ops-recruiter-ready-block > div {
  display: flex; flex-direction: column; gap: 2px;
}
.ops-recruiter-ready-block strong { font-size: 0.88rem; color: var(--text-primary); }
.ops-recruiter-ready-block small { font-size: 0.72rem; }
.ops-trend-direction { font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.ops-trend-improving { color: #4ade80; }
.ops-trend-declining { color: #f87171; }
.ops-trend-stable    { color: #94a3b8; }
.ops-role-readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ops-role-readiness-card {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.12);
  background: rgba(30,58,95,0.30);
  display: flex; flex-direction: column; gap: 8px;
}
.ops-role-readiness-header {
  display: flex; align-items: center; justify-content: space-between;
}
.ops-role-readiness-header strong { font-size: 0.88rem; color: var(--text-primary); }
.ops-recruiter-signal-list {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ops-recruiter-signal-list li {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.76rem; color: var(--text-secondary);
}
.ops-recruiter-signal-list li .ti { color: #4ade80; font-size: 0.78rem; }
.ops-recruiter-achievements {
  display: flex; flex-direction: column; gap: 12px; margin-top: 8px;
}
.ops-recruiter-ach {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(30,58,95,0.30);
  border: 1px solid rgba(148,163,184,0.10);
}
.ops-recruiter-ach .ti {
  font-size: 1.2rem; color: #fbbf24;
  flex-shrink: 0; margin-top: 2px;
}
.ops-recruiter-ach > div { display: flex; flex-direction: column; gap: 2px; }
.ops-recruiter-ach strong { font-size: 0.88rem; color: var(--text-primary); }
.ops-recruiter-ach small { font-size: 0.75rem; }
.ops-recruiter-ach-date { color: #4ade80 !important; }

/* ── Phase 15: Operational Presence Strip ───────────────────────────── */
.ops-presence-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(30,58,95,0.35);
  border: 1px solid rgba(148,163,184,0.10);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ops-presence-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ops-presence-high   { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.5); }
.ops-presence-moderate { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.4); }
.ops-presence-low    { background: #4ade80; }
.ops-presence-detail { font-size: 0.82rem; color: var(--text-secondary); flex: 1; }
.ops-presence-stat {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.76rem; color: #64748b;
}
.ops-presence-stat .ti { font-size: 0.80rem; }

/* Workspace responsive */
@media (max-width: 1199px) {
  .ops-workspace {
    grid-template-columns: 1fr;
  }

  .ops-workspace-left,
  .ops-workspace-right {
    position: static;
  }

  /* On tablet: left panel goes below center, right panel goes above */
  .ops-workspace-left  { order: 3; }
  .ops-workspace-center { order: 1; }
  .ops-workspace-right { order: 2; }

  .ops-ai-panel-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Collapse AI actions to a horizontal scroll row on tablet */
  .ops-ai-action-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ops-ai-action-btn {
    flex: 0 0 auto;
    font-size: .79rem;
    padding: 6px 10px;
    min-height: 32px;
  }

  /* Compact the left meta panel on tablet */
  .ops-incident-meta { padding: 12px; }
  .ops-progress-card { display: none; } /* stepper redundant on mobile */

  /* Dashboard mode card — stack to column on tablet to prevent overflow */
  .ops-mode-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .ops-mode-actions {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .ops-activity-drawer {
    display: none;
  }

  .ops-ai-panel-body {
    grid-template-columns: 1fr;
  }

  /* Mobile: hide right panel by default, show toggle */
  .ops-workspace-right {
    border: 1px solid rgba(56,189,248,.15);
    border-radius: 14px;
    overflow: hidden;
  }

  /* Compact onboarding banner on mobile */
  .ops-onboarding-banner {
    padding: 16px;
  }
  .onboarding-steps-row {
    display: none; /* too cramped on mobile, steps visible in wizard */
  }

  /* Completion screen next-actions stack on mobile */
  .ops-next-action-row {
    grid-template-columns: 1fr;
  }

  /* Portfolio empty state */
  .portfolio-empty-state {
    flex-direction: column;
  }
  .portfolio-empty-steps {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* Phase 11: portfolio empty state */
.portfolio-empty-state {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  border: 1px dashed rgba(56,189,248,.25);
  border-radius: 18px;
  background: rgba(56,189,248,.04);
  grid-column: 1 / -1;
}
.portfolio-empty-icon {
  flex: 0 0 52px; height: 52px;
  border-radius: 14px;
  background: rgba(56,189,248,.1);
  border: 1px solid rgba(56,189,248,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: rgb(56,189,248);
}
.portfolio-empty-state h2 { margin: 0 0 8px; }
.portfolio-empty-steps {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.portfolio-empty-steps span {
  display: flex; align-items: center; gap: 4px;
  font-size: .8rem; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  background: rgba(255,255,255,.05);
}
.portfolio-empty-steps i { color: rgb(52,211,153); }
.portfolio-empty-steps span:nth-child(even) {
  background: none; color: var(--muted, #94a3b8); padding: 0; font-size: .9rem;
}

/* ====================================================== */
/* PHASE 2A — OPERATIONAL QUEUE CONSOLE                  */
/* Dashboard + Tickets transformation                     */
/* ====================================================== */

/* Badge variants for queue pressure header */
.badge-red {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.30);
}
.badge-amber {
  background: rgba(245, 158, 11, 0.14);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.30);
}
.badge-green {
  background: rgba(34, 197, 94, 0.10);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.25);
}

/* Command header — top of dashboard */
.ops-command-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(15, 23, 42, 0.92));
  margin-bottom: 16px;
}

.ops-command-meta h2 {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  margin: 4px 0 0;
  color: var(--text, #f8fafc);
}

.ops-sla-pressure-wrap {
  display: grid;
  gap: 5px;
  min-width: 200px;
}

.ops-sla-pressure-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}

.ops-sla-pressure-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.ops-sla-pressure-fill.pressure-high {
  background: linear-gradient(90deg, #ef4444, #f87171);
  animation: ops-sla-pulse 2s ease-in-out infinite;
}

.ops-sla-pressure-fill.pressure-mod {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.ops-sla-pressure-fill.pressure-low {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.ops-breach-warning {
  font-size: 0.76rem;
  font-weight: 900;
  color: var(--muted, #94a3b8);
}

.ops-breach-warning.warning {
  color: #fca5a5;
}

.ops-command-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Operational metrics strip */
.ops-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.ops-metric-card {
  padding: 16px 18px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
  display: grid;
  gap: 3px;
}

.ops-metric-card strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: var(--text, #f8fafc);
  font-variant-numeric: tabular-nums;
}

.ops-metric-card small {
  color: var(--muted, #94a3b8);
  font-size: 0.78rem;
}

.ops-metric-card.ops-metric-alert {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.04);
}

.ops-metric-card.ops-metric-alert strong {
  color: #fca5a5;
}

.ops-metric-card.ops-metric-success strong {
  color: #86efac;
}

/* Flash animation — fires when a metric value changes via live feed */
@keyframes ops-metric-flash {
  0%   { opacity: 1; }
  25%  { opacity: 0.35; }
  60%  { opacity: 1; }
  80%  { color: #7dd3fc; }
  100% { opacity: 1; }
}
.ops-metric-flash {
  animation: ops-metric-flash 0.55s ease-out forwards;
}

/* Urgent SLA card — pulses border when sla_risk > 0 */
@keyframes ops-sla-card-pulse {
  0%, 100% { border-color: rgba(239, 68, 68, 0.28); }
  50%       { border-color: rgba(239, 68, 68, 0.70); }
}
.ops-metric-card.ops-metric-urgent {
  animation: ops-sla-card-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ops-metric-flash, .ops-metric-card.ops-metric-urgent { animation: none; }
}

/* Priority queue section — primary action anchor on dashboard */
.ops-queue-section {
  margin-bottom: 18px;
  padding-top: 4px;
  border-top: 2px solid rgba(99, 179, 237, 0.18);
}

.ops-queue-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ops-queue-section-header h3 {
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #93c5fd;
  margin: 0;
}

/* Section divider — used between major dashboard content zones */
.ops-section-divider {
  border: none;
  border-top: 1px solid rgba(30, 58, 95, 0.8);
  margin: 20px 0 18px;
}

.ops-view-all {
  font-size: 0.82rem;
  font-weight: 800;
  color: #7dd3fc;
  text-decoration: none;
}

.ops-view-all:hover {
  color: #bfdbfe;
}

.ops-queue-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ops-queue-card {
  padding: 16px;
  border: 1px solid var(--border, #1e3a5f);
  border-left-width: 3px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
  display: grid;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}

.ops-queue-card:hover {
  background: rgba(15, 23, 42, 0.90);
}

.ops-queue-card.priority-critical,
.ops-queue-card.priority-high { border-left-color: #f87171; }
.ops-queue-card.priority-medium { border-left-color: #f59e0b; }
.ops-queue-card.priority-low { border-left-color: #4ade80; }

.ops-queue-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ops-ticket-id {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--muted, #94a3b8);
  letter-spacing: 0.06em;
  font-family: 'Courier New', monospace;
}

.ops-priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ops-queue-card.priority-critical .ops-priority-dot,
.ops-queue-card.priority-high .ops-priority-dot {
  background: #f87171;
  animation: ops-sla-pulse 1.8s ease-in-out infinite;
}

.ops-queue-card.priority-medium .ops-priority-dot { background: #fbbf24; }
.ops-queue-card.priority-low .ops-priority-dot { background: #4ade80; }

.ops-queue-card h4 {
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  color: var(--text, #f8fafc);
}

.ops-queue-meta {
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
  margin: 0;
}

.ops-queue-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.ops-queue-empty {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  text-align: center;
  color: var(--muted, #94a3b8);
}

/* Operational mode card — condensed */
.ops-mode-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.68);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ops-mode-card .eyebrow {
  display: block;
  margin-bottom: 2px;
}

.ops-mode-card strong {
  display: block;
  font-size: 1rem;
  color: var(--text, #f8fafc);
}

.ops-mode-card .muted {
  font-size: 0.86rem;
  margin: 4px 0 0;
}

.ops-mode-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 1;
  flex-wrap: wrap;
}

/* MSP client environments strip */
.ops-client-strip {
  padding: 18px 22px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.68);
  margin-bottom: 16px;
}

.ops-client-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ops-client-chip {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.40);
  text-decoration: none;
  color: var(--text, #f8fafc);
  transition: border-color 0.15s, background 0.15s;
}

.ops-client-chip:hover {
  border-color: rgba(37, 99, 235, 0.40);
  background: rgba(37, 99, 235, 0.06);
  text-decoration: none;
}

.ops-client-chip strong {
  font-size: 0.88rem;
  font-weight: 900;
}

.ops-client-chip small {
  font-size: 0.74rem;
  color: var(--muted, #94a3b8);
}

/* Resume active case card */
.ops-resume-card {
  padding: 18px 22px;
  border: 1px solid rgba(37, 99, 235, 0.30);
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.06);
  margin-bottom: 16px;
}

.ops-resume-card h2 {
  font-size: 1.1rem;
  margin: 6px 0 8px;
}

.ops-resume-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ====================================================== */
/* INCIDENT QUEUE — tickets.html                         */
/* ====================================================== */

.ops-queue-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.ops-queue-header-bar .muted {
  font-size: 0.86rem;
  margin: 4px 0 0;
}

.ops-filter-disclosure {
  margin-bottom: 16px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.60);
  overflow: hidden;
}

.ops-filter-disclosure summary {
  padding: 11px 16px;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  color: var(--muted, #94a3b8);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-filter-disclosure summary::-webkit-details-marker { display: none; }

.ops-filter-disclosure[open] summary {
  border-bottom: 1px solid var(--border, #1e3a5f);
  color: var(--text, #f8fafc);
}

.ops-filters {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.ops-filters label {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted, #94a3b8);
}

.ops-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Mobile ticket cards */
.ops-ticket-cards {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.ops-ticket-row {
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--border, #1e3a5f);
  border-left-width: 3px;
  border-left-color: rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
  display: grid;
  gap: 6px;
  transition: background 0.15s;
}

.ops-ticket-row:hover {
  background: rgba(15, 23, 42, 0.90);
}

.ops-ticket-row.priority-critical,
.ops-ticket-row.priority-high { border-left-color: #f87171; }
.ops-ticket-row.priority-medium,
.ops-ticket-row.priority-med { border-left-color: #f59e0b; }
.ops-ticket-row.priority-low { border-left-color: #4ade80; }

.ops-ticket-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.ops-priority-badge.priority-critical,
.ops-priority-badge.priority-high {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.30);
}

.ops-priority-badge.priority-medium,
.ops-priority-badge.priority-med {
  background: rgba(245, 158, 11, 0.14);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.30);
}

.ops-priority-badge.priority-low {
  background: rgba(34, 197, 94, 0.10);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.25);
}

.ops-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: rgba(37, 99, 235, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.ops-ticket-row h3 {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--text, #f8fafc);
}

.ops-ticket-row-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* Desktop incident table */
.ops-ticket-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.ops-ticket-table thead tr {
  background: rgba(11, 22, 38, 0.95);
}

.ops-ticket-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #94a3b8);
  border-bottom: 1px solid var(--border, #1e3a5f);
  white-space: nowrap;
}

.ops-ticket-table th[data-sort] { cursor: pointer; }
.ops-ticket-table th[data-sort]:hover { color: var(--text, #f8fafc); }

.ops-ticket-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(30, 58, 95, 0.45);
  color: var(--text, #f8fafc);
  vertical-align: middle;
}

.ops-ticket-table tbody tr:last-child td { border-bottom: none; }

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

.ops-ticket-table tbody tr.row-critical td:first-child,
.ops-ticket-table tbody tr.row-high td:first-child {
  border-left: 3px solid #f87171;
  padding-left: 11px;
}

.ops-ticket-table tbody tr.row-medium td:first-child,
.ops-ticket-table tbody tr.row-med td:first-child {
  border-left: 3px solid #f59e0b;
  padding-left: 11px;
}

.ops-ticket-table tbody tr.row-low td:first-child {
  border-left: 3px solid #4ade80;
  padding-left: 11px;
}

/* Responsive queue */
@media (max-width: 1100px) {
  .ops-command-header {
    grid-template-columns: 1fr 1fr;
  }
  .ops-command-actions {
    grid-column: 1 / -1;
  }
  .ops-metrics-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ops-queue-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ops-command-header {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ops-sla-pressure-wrap { min-width: unset; }
  .ops-metrics-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ops-queue-cards { grid-template-columns: 1fr; }
  .ops-mode-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .ops-mode-actions {
    width: 100%;
  }
}

/* ====================================================== */
/* PHASE 3 — ANALYTICS & EVIDENCE HUB                    */
/* skills_dashboard, proof_centre, portfolio_v160         */
/* ====================================================== */

/* Readiness hero */
.ops-readiness-display {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}

.ops-readiness-ring {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ops-readiness-ring strong {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--text, #f8fafc);
  line-height: 1;
}

.ops-readiness-ring span {
  font-size: 0.68rem;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

.ops-readiness-meta h2 {
  margin: 6px 0 6px;
  font-size: 1.15rem;
}

.ops-readiness-stats {
  display: flex;
  gap: 24px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ops-readiness-stats span {
  font-size: 0.84rem;
  color: var(--muted, #94a3b8);
}

.ops-readiness-stats strong {
  color: var(--text, #f8fafc);
}

/* Maturity grid */
.ops-maturity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ops-maturity-card {
  padding: 12px 14px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
}

.ops-maturity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.86rem;
}

.ops-maturity-bar {
  height: 5px;
  background: rgba(148, 163, 184, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

.ops-maturity-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.ops-maturity-bar span.bar-green { background: #4ade80; }
.ops-maturity-bar span.bar-amber { background: #f59e0b; }
.ops-maturity-bar span.bar-red   { background: #f87171; }

.score-strong { color: #4ade80; }
.score-mid    { color: #fbbf24; }
.score-low    { color: #f87171; }

/* Skill grid */
.ops-skill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ops-skill-card {
  padding: 14px 16px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
}

.ops-skill-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.ops-skill-header strong {
  font-size: 0.9rem;
  line-height: 1.3;
}

.ops-skill-score {
  font-size: 1.05rem;
  font-weight: 900;
  flex-shrink: 0;
}

.ops-skill-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.ops-skill-meta small {
  font-size: 0.76rem;
  color: var(--muted, #94a3b8);
}

/* Evidence cards — proof centre */
.ops-evidence-grid {
  display: grid;
  gap: 10px;
}

.ops-evidence-card {
  padding: 14px 18px 14px 20px;
  border: 1px solid var(--border, #1e3a5f);
  border-left-width: 3px;
  border-left-color: rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.65);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  transition: background 0.15s;
}

.ops-evidence-card:hover {
  background: rgba(15, 23, 42, 0.85);
}

.ops-evidence-card.outcome-resolved { border-left-color: #4ade80; }
.ops-evidence-card.outcome-partial   { border-left-color: #f59e0b; }
.ops-evidence-card.outcome-pending   { border-left-color: rgba(148, 163, 184, 0.35); }

.ops-evidence-meta {
  display: grid;
  gap: 4px;
}

.ops-evidence-meta strong {
  font-size: 0.92rem;
  color: var(--text, #f8fafc);
}

.ops-evidence-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
}

.ops-outcome-chip {
  font-size: 0.70rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ops-outcome-chip.chip-resolved {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.ops-outcome-chip.chip-partial {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.ops-outcome-chip.chip-pending {
  background: rgba(148, 163, 184, 0.10);
  color: var(--muted, #94a3b8);
  border: 1px solid rgba(148, 163, 184, 0.20);
}

.ops-evidence-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Portfolio cards */
.ops-portfolio-grid {
  display: grid;
  gap: 10px;
}

.ops-portfolio-card {
  padding: 14px 18px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.65);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  transition: background 0.15s;
}

.ops-portfolio-card:hover {
  background: rgba(15, 23, 42, 0.88);
}

.ops-portfolio-meta {
  display: grid;
  gap: 4px;
}

.ops-portfolio-meta strong {
  font-size: 0.92rem;
  color: var(--text, #f8fafc);
}

.ops-portfolio-tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 3px;
}

.ops-portfolio-tag {
  font-size: 0.72rem;
  color: var(--muted, #94a3b8);
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 5px;
  padding: 1px 7px;
}

.ops-portfolio-tag.tag-public {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.20);
}

.ops-portfolio-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Analytics hero panel */
.ops-analytics-hero {
  padding: 28px 32px;
}

/* Proof centre hero stats */
.ops-proof-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ops-proof-stat {
  display: grid;
  gap: 2px;
}

.ops-proof-stat strong {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text, #f8fafc);
  line-height: 1;
}

.ops-proof-stat span {
  font-size: 0.76rem;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Phase 3 responsive */
@media (max-width: 900px) {
  .ops-maturity-grid { grid-template-columns: 1fr; }
  .ops-skill-grid    { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .ops-readiness-display { grid-template-columns: 1fr; gap: 20px; }
  .ops-readiness-ring { width: 84px; height: 84px; }
  .ops-readiness-ring strong { font-size: 1.35rem; }
  .ops-evidence-card { grid-template-columns: 1fr; }
  .ops-portfolio-card { grid-template-columns: 1fr; }
  .ops-analytics-hero { padding: 20px 18px; }
}

/* ====================================================== */
/* PHASE 4 — SHIFT & ENVIRONMENT LAYER                    */
/* active_shift, start_shift, enterprise, recruiter       */
/* ====================================================== */

/* Shift console header */
.ops-shift-console-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ops-shift-console-header-meta {
  min-width: 0;
}

.ops-shift-console-header-meta h2 {
  font-size: 1.2rem;
  margin: 6px 0 6px;
}

.ops-shift-lead {
  font-size: 0.84rem;
  color: var(--muted, #94a3b8);
  margin: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.ops-shift-lead span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Shift start configuration grid */
.ops-shift-start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.ops-shift-start-card {
  padding: 18px 20px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
}

.ops-shift-start-card h3 {
  font-size: 0.92rem;
  margin: 0 0 8px;
  color: var(--text, #f8fafc);
}

.ops-shift-start-card p {
  font-size: 0.84rem;
  color: var(--muted, #94a3b8);
  line-height: 1.55;
  margin: 0;
}

/* Enterprise ops header layout */
.ops-enterprise-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ops-enterprise-sla-card {
  padding: 16px 20px;
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.06);
  flex-shrink: 0;
  min-width: 190px;
}

.ops-enterprise-sla-card strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 900;
  color: #fca5a5;
  margin-bottom: 5px;
}

.ops-enterprise-sla-card p {
  font-size: 0.80rem;
  color: var(--muted, #94a3b8);
  margin: 0;
}

/* Workflow states strip */
.ops-workflow-states {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.35);
  margin-bottom: 18px;
  align-items: center;
}

.ops-workflow-states-label {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #94a3b8);
  margin-right: 4px;
}

.ops-workflow-state {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--border, #1e3a5f);
  color: var(--muted, #94a3b8);
  background: rgba(148, 163, 184, 0.06);
}

/* Recruiter proof grid */
.ops-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.ops-proof-grid-card {
  padding: 20px 22px;
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
}

.ops-proof-grid-card h3 {
  font-size: 0.96rem;
  margin: 0 0 12px;
}

.ops-proof-grid-card ul {
  padding: 0 0 0 18px;
  margin: 0;
}

.ops-proof-grid-card li {
  font-size: 0.88rem;
  color: var(--muted, #94a3b8);
  margin-bottom: 6px;
  line-height: 1.4;
}

.ops-recruiter-skill-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #1e3a5f);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
}

.ops-recruiter-skill-row:last-child { border-bottom: none; }

.ops-recruiter-skill-row strong { color: var(--text, #f8fafc); }

.ops-recruiter-skill-row small { color: var(--muted, #94a3b8); }

/* Recruiter readiness banner */
.ops-recruiter-readiness {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 11px;
  background: rgba(37, 99, 235, 0.06);
}

.ops-recruiter-readiness-score {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text, #f8fafc);
  line-height: 1;
  flex-shrink: 0;
}

.ops-recruiter-readiness-meta {
  display: grid;
  gap: 3px;
}

.ops-recruiter-readiness-meta span {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text, #f8fafc);
}

.ops-recruiter-readiness-meta small {
  font-size: 0.80rem;
  color: var(--muted, #94a3b8);
}

/* Phase 4 responsive */
@media (max-width: 900px) {
  .ops-proof-grid { grid-template-columns: 1fr; }
  .ops-shift-start-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .ops-enterprise-header { flex-direction: column; }
  .ops-enterprise-sla-card { min-width: unset; width: 100%; }
  .ops-recruiter-readiness { flex-direction: column; align-items: flex-start; }
  .ops-shift-console-header { flex-direction: column; }
}

/* ======================================================
   MATURITY PASS — RECRUITER SNAPSHOT (Part 8)
   ====================================================== */

.ops-recruiter-snapshot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ops-snapshot-card {
  background: var(--surface-2, #0c1830);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ops-snapshot-card .snapshot-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #8095b3);
  font-weight: 600;
}

.ops-snapshot-card .snapshot-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text, #f8fafc);
  line-height: 1.1;
}

.ops-snapshot-card .snapshot-sub {
  font-size: 0.8rem;
  color: var(--muted, #8095b3);
}

.ops-snapshot-card.snapshot-strong .snapshot-value { color: #27ae60; }
.ops-snapshot-card.snapshot-developing .snapshot-value { color: #f39c12; }
.ops-snapshot-card.snapshot-early .snapshot-value { color: #e74c3c; }

@media (max-width: 900px) {
  .ops-recruiter-snapshot { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .ops-recruiter-snapshot { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .ops-snapshot-card { padding: 0.8rem; }
  .ops-snapshot-card .snapshot-value { font-size: 1.2rem; }
}

/* ======================================================
   MATURITY PASS — START HERE GUIDANCE (Part 5)
   ====================================================== */

.ops-start-here {
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.06) 100%);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.ops-start-here-icon {
  font-size: 1.75rem;
  color: #3b82f6;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.ops-start-here h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--text, #f8fafc);
}

.ops-start-here p {
  font-size: 0.875rem;
  color: var(--muted, #8095b3);
  margin: 0 0 0.75rem 0;
}

.ops-start-here-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 600px) {
  .ops-start-here { flex-direction: column; gap: 0.75rem; padding: 1rem; }
  .ops-start-here-icon { font-size: 1.4rem; }
}

/* ======================================================
   MATURITY PASS — CONTEXTUAL GUIDANCE PANEL (Part 6)
   ====================================================== */

.ops-guidance-panel {
  background: var(--surface-2, #0c1830);
  border: 1px solid var(--border, #1e2d4a);
  border-left: 3px solid #3b82f6;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.ops-guidance-panel .guidance-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #3b82f6;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.ops-guidance-panel p {
  font-size: 0.875rem;
  color: var(--muted, #8095b3);
  margin: 0;
  line-height: 1.5;
}

/* ======================================================
   MATURITY PASS — EMPTY STATE EXCELLENCE (Part 7)
   ====================================================== */

.ops-empty-start {
  text-align: center;
  padding: 2.5rem 2rem;
  border: 1px dashed var(--border, #1e2d4a);
  border-radius: 10px;
  margin: 1rem 0;
}

.ops-empty-start .ops-empty-icon {
  font-size: 2.5rem;
  color: var(--muted, #8095b3);
  margin-bottom: 0.75rem;
}

.ops-empty-start h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--text, #f8fafc);
}

.ops-empty-start p {
  font-size: 0.875rem;
  color: var(--muted, #8095b3);
  margin: 0 0 1.25rem 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ======================================================
   MATURITY PASS — MOBILE UX PASS (Part 9)
   ====================================================== */

/* Achievements grid — mobile */
@media (max-width: 600px) {
  .ops-ach-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .ops-ach-card {
    padding: 1rem !important;
  }
  .ops-ach-icon {
    font-size: 1.4rem !important;
  }
}

/* Role affinity grid — mobile */
@media (max-width: 600px) {
  .ops-affinity-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
}

/* Role readiness grid — mobile */
@media (max-width: 600px) {
  .ops-role-readiness-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
}

/* Recruiter readiness strip — mobile */
@media (max-width: 600px) {
  .ops-recruiter-readiness-strip {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}

/* Onboarding steps row — mobile */
@media (max-width: 640px) {
  .onboarding-steps-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .ops-onboarding-banner {
    padding: 1.25rem !important;
  }
}

/* Command header — mobile */
@media (max-width: 640px) {
  .ops-command-header {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .ops-command-actions {
    flex-wrap: wrap;
  }
}

/* Progress cards — mobile */
@media (max-width: 640px) {
  .ops-recruiter-ready-block {
    min-width: unset !important;
    width: 100%;
  }
  .ops-recruiter-ready-score {
    font-size: 2rem !important;
  }
}

/* Panel padding — mobile */
@media (max-width: 480px) {
  .panel {
    padding: 1rem !important;
  }
  .ops-hero {
    gap: 1rem !important;
  }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.05rem; }
}

/* Ensure buttons don't overflow on mobile */
@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .hero-actions .button {
    width: 100%;
    text-align: center;
  }
}