/* Unified dark product surface for RAG Studio, Notes, Email, Training,
   Orchestration, Workflows and Documents. Loaded last on those pages. */

:root {
  --u-bg: #08090b;
  --u-panel: #111318;
  --u-panel-2: #171a20;
  --u-panel-3: #1d2128;
  --u-line: rgba(255, 255, 255, 0.09);
  --u-line-strong: rgba(255, 255, 255, 0.17);
  --u-text: #f5f6f8;
  --u-muted: #9298a4;
  --u-faint: #656b76;
  --u-accent: #c3cedd;
  --u-accent-soft: rgba(195, 206, 221, 0.10);
  --u-radius: 16px;
  --u-radius-sm: 10px;
  --u-font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

html { color-scheme: dark; }

/* ---------------------------------------------------------------- base pages */
body.rag-studio-page,
body.notes-page,
body.em-page,
body.training-page {
  --dark: var(--u-text);
  --light: #0b0c0e;
  --white: var(--u-panel);
  --gray: var(--u-muted);
  --border: var(--u-line);
  --input-accent: var(--u-accent);
  --primary: var(--u-panel-2);
  --primary-dark: #0b0c0e;
  --dark-light: var(--u-panel-2);
  background: var(--u-bg) !important;
  background-image:
    radial-gradient(900px 500px at 88% -10%, rgba(150, 170, 205, 0.08), transparent 60%),
    radial-gradient(700px 420px at -8% 22%, rgba(92, 143, 255, 0.055), transparent 60%) !important;
  color: var(--u-text) !important;
  font-family: var(--u-font) !important;
}

body.rag-studio-page h1, body.rag-studio-page h2, body.rag-studio-page h3,
body.notes-page h1, body.notes-page h2, body.notes-page h3,
body.em-page h1, body.em-page h2, body.em-page h3,
body.training-page h1, body.training-page h2, body.training-page h3 {
  letter-spacing: -0.025em;
}

/* Shared surfaces */
body.rag-studio-page .rag-card,
body.notes-page .notes-feature-card,
body.notes-page .note-card,
body.notes-page .cal-col,
body.em-page .em-ai-card,
body.em-page .em-approval,
body.em-page .em-empty-list,
body.training-page .ud-panel,
body.training-page .ud-chart,
body.training-page .ud-stat {
  background: var(--u-panel) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-radius) !important;
  box-shadow: none !important;
}

body.rag-studio-page .rag-header,
body.notes-page .notes-header,
body.em-page .em-topbar,
body.training-page .train-page-header {
  background: rgba(8, 9, 11, 0.84) !important;
  border-bottom: 1px solid var(--u-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) !important;
  color: var(--u-text) !important;
}

body.notes-page .notes-header {
  background: rgba(8, 9, 11, 0.84) !important;
  border-bottom: 1px solid var(--u-line) !important;
}

body.rag-studio-page .rag-header h1,
body.rag-studio-page .rag-card h2,
body.notes-page .notes-header h1,
body.notes-page .notes-feature-card h2,
body.notes-page .note-card-title,
body.notes-page .note-modal-inner h2,
body.em-page .em-reader-subject,
body.training-page .train-page-title,
body.training-page .ud-panel h2 {
  color: var(--u-text) !important;
}

body.rag-studio-page .rag-muted,
body.rag-studio-page .rag-header-copy p,
body.notes-page .note-card-preview,
body.notes-page .notes-feature-card p,
body.em-page .em-muted,
body.em-page .em-reader-meta,
body.training-page .ud-msg,
body.training-page .ud-stat-lbl,
body.training-page .ud-subtle {
  color: var(--u-muted) !important;
}

/* Inputs and select controls */
body.rag-studio-page input,
body.rag-studio-page textarea,
body.rag-studio-page select,
body.notes-page input,
body.notes-page textarea,
body.notes-page select,
body.em-page input,
body.em-page textarea,
body.em-page select,
body.training-page input,
body.training-page textarea,
body.training-page select,
.modal-content.documents-library-modal-shell input,
.modal-content.documents-library-modal-shell textarea,
.modal-content.documents-library-modal-shell select {
  background: #0c0e12 !important;
  border: 1px solid var(--u-line) !important;
  color: var(--u-text) !important;
  border-radius: var(--u-radius-sm) !important;
  box-shadow: none !important;
}

body.rag-studio-page input:focus,
body.rag-studio-page textarea:focus,
body.rag-studio-page select:focus,
body.notes-page input:focus,
body.notes-page textarea:focus,
body.notes-page select:focus,
body.em-page input:focus,
body.em-page textarea:focus,
body.em-page select:focus,
body.training-page input:focus,
body.training-page textarea:focus,
body.training-page select:focus {
  border-color: rgba(195, 206, 221, 0.52) !important;
  box-shadow: 0 0 0 3px rgba(195, 206, 221, 0.08) !important;
}

/* Primary buttons become the unified white pill. */
body.rag-studio-page .rag-btn-primary,
body.notes-page .btn-add-note,
body.notes-page .btn-save,
body.notes-page #btnAnalyze,
body.em-page .em-btn-primary,
body.training-page .ud-btn-primary,
body.training-page .ud-ds-tab.active,
#trainPage .btn-primary,
#tasksPage .btn-primary,
#workflowsPage .btn-workflow-run,
.documents-library-modal-shell .btn-primary {
  background: var(--u-text) !important;
  background-image: none !important;
  color: #0b0c0e !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

body.rag-studio-page .rag-btn-primary:hover,
body.notes-page .btn-add-note:hover,
body.notes-page .btn-save:hover,
body.em-page .em-btn-primary:hover,
body.training-page .ud-btn-primary:hover {
  filter: brightness(0.94) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Secondary buttons */
body.rag-studio-page .rag-btn-secondary,
body.notes-page .btn-close,
body.notes-page .notes-header .back,
body.em-page .em-btn,
body.em-page .em-btn-ghost,
body.training-page .ud-btn-sec,
#trainPage .btn-ghost,
#tasksPage .btn-ghost,
#workflowsPage .btn-workflow-ghost,
.documents-library-modal-shell .btn-modal-secondary,
.documents-library-modal-shell .documents-library-view-switch {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--u-line) !important;
  color: var(--u-text) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

/* Orange accents -> silver / neutral in these product areas. */
body.rag-studio-page .rag-badge.is-warn,
body.notes-page .note-structured-title,
body.notes-page .note-card-tag,
body.em-page .em-ai-badge,
body.em-page .em-tag.is-high,
body.training-page .ud-badge-lora,
#trainPage .train-section h2,
#tasksPage .tasks-tab.active,
#workflowsPage .workflows-tab.active {
  color: var(--u-accent) !important;
  background: var(--u-accent-soft) !important;
  border-color: var(--u-line) !important;
}

body.notes-page .notes-feature-card,
body.notes-page .note-structured,
body.notes-page .mind-map-wrap,
body.notes-page .note-card,
body.notes-page .note-card-voice,
body.notes-page .new-note-input-wrap,
body.notes-page .note-modal-inner,
body.notes-page .note-modal-inner textarea,
body.notes-page .note-modal-inner input[type="text"],
body.notes-page #searchInput,
body.notes-page .new-note-bar .new-note-input-wrap {
  border-color: var(--u-line) !important;
  background: var(--u-panel) !important;
}

body.notes-page .mind-map-wrap,
body.notes-page .new-note-input-wrap,
body.notes-page #searchInput,
body.notes-page .note-modal-inner textarea,
body.notes-page .note-modal-inner input[type="text"] {
  background: #0c0e12 !important;
}

body.notes-page .notes-header,
body.notes-page .note-structured,
body.notes-page #modalAnalysis.note-modal-analysis hr.note-md-hr {
  border-color: var(--u-line) !important;
  background: transparent !important;
}

body.notes-page .note-play-btn,
body.notes-page .note-wave-bar,
body.notes-page .day-pill.selected,
body.notes-page .note-card-tag {
  background: var(--u-accent) !important;
  color: #0b0c0e !important;
}

body.notes-page .day-pill.today,
body.notes-page .cal-col.today .cal-col-date,
body.notes-page .note-card:hover {
  border-color: var(--u-line-strong) !important;
  color: var(--u-text) !important;
}

body.notes-page .notes-header .back:hover,
body.notes-page .week-nav button:hover {
  color: var(--u-text) !important;
  border-color: var(--u-line-strong) !important;
}

/* Notes recording orb: silver, no orange. */
body.notes-page .siri-orb-ring:nth-child(1) { border-color: var(--u-accent) !important; }
body.notes-page .siri-orb-ring:nth-child(2) { border-color: #8f9bae !important; }
body.notes-page .siri-orb-ring:nth-child(3) { border-color: rgba(195, 206, 221, 0.5) !important; }
body.notes-page .siri-orb-core {
  background: radial-gradient(circle at 40% 40%, #e5ebf4, #aab6c8, #778396) !important;
  box-shadow: 0 0 40px rgba(195, 206, 221, 0.28) !important;
}
body.notes-page .siri-orb-glow { background: radial-gradient(circle, rgba(195, 206, 221, 0.14) 0%, transparent 70%) !important; }

/* RAG controls */
body.rag-studio-page .rag-header { border-color: var(--u-line) !important; }
body.rag-studio-page .rag-card { border-radius: var(--u-radius) !important; }
body.rag-studio-page .rag-btn { border-radius: 999px !important; padding: 10px 16px !important; }
body.rag-studio-page input[type="checkbox"],
body.rag-studio-page input[type="radio"],
body.notes-page input[type="checkbox"],
body.training-page input[type="checkbox"] { accent-color: var(--u-accent) !important; }
body.rag-studio-page .rag-mini-toggle input { accent-color: var(--u-accent) !important; }

/* Email: remap the entire local palette. */
body.em-page {
  --em-bg: var(--u-bg);
  --em-panel: var(--u-panel);
  --em-panel-2: #0d0f13;
  --em-panel-3: var(--u-panel-2);
  --em-border: var(--u-line);
  --em-border-strong: var(--u-line-strong);
  --em-text: var(--u-text);
  --em-muted: var(--u-muted);
  --em-accent: var(--u-accent);
  --em-accent-strong: #dfe7f5;
  --em-accent-soft: var(--u-accent-soft);
  --em-shadow: none;
}
body.em-page .em-topbar,
body.em-page .em-sidebar,
body.em-page .em-list-col,
body.em-page .em-reader,
body.em-page .em-reader-head { background: var(--u-panel) !important; border-color: var(--u-line) !important; }
body.em-page .em-btn-primary { background: var(--u-text) !important; color: #0b0c0e !important; border: none !important; border-radius: 999px !important; }
body.em-page .em-btn-primary:hover { background: #fff !important; }
body.em-page .em-btn-soft { background: var(--u-accent-soft) !important; border-color: var(--u-line) !important; color: var(--u-accent) !important; }
body.em-page .em-nav button.is-active,
body.em-page .em-chips button.is-active,
body.em-page .em-msg.is-selected { background: rgba(255,255,255,0.06) !important; color: var(--u-text) !important; }
body.em-page .em-search-wrap input:focus { border-color: var(--u-line-strong) !important; box-shadow: 0 0 0 3px rgba(195,206,221,.07) !important; }
body.em-page .em-empty-mark,
body.em-page .em-unread-dot { color: var(--u-accent) !important; }
body.em-page .em-ai-badge { border-color: var(--u-line) !important; }
body.em-page .em-approval:hover { border-color: var(--u-line-strong) !important; }
body.em-page .em-tag.is-high { background: var(--u-accent-soft) !important; color: var(--u-accent) !important; }

/* Training dashboard */
body.training-page .ud-status-bar,
body.training-page .ud-pbar { background: rgba(255,255,255,0.035) !important; border-color: var(--u-line) !important; }
body.training-page .ud-pbar-fill { background: var(--u-accent) !important; }
body.training-page .ud-stat-val,
body.training-page .ud-tab.active,
body.training-page .ud-ds-tab.active { color: var(--u-accent) !important; border-color: var(--u-accent) !important; }
body.training-page .ud-panel h2 { border-left-color: var(--u-line-strong) !important; color: var(--u-muted) !important; }
body.training-page .ud-note { background: rgba(138,176,255,.08) !important; border-color: rgba(138,176,255,.18) !important; }
body.training-page .ud-ds-tab.active { background: var(--u-text) !important; color: #0b0c0e !important; border-color: transparent !important; }
body.training-page .ud-log { background: #0c0e12 !important; border-color: var(--u-line) !important; }

/* App workspace: Train, Orchestration, Workflows, Documents */
#trainPage, #tasksPage, #workflowsPage { background: var(--u-bg) !important; color: var(--u-text) !important; }
#trainPage .train-page-title, #tasksPage .train-page-title, #workflowsPage .train-page-title { color: var(--u-text) !important; }
#trainPage .train-section h2 { border-left-color: var(--u-line-strong) !important; color: var(--u-muted) !important; }
#trainPage .train-engine-tab.active,
#tasksPage .tasks-tab.active,
#workflowsPage .workflows-tab.active {
  color: var(--u-text) !important;
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--u-line) !important;
}
#trainPage .train-section .btn-primary,
#trainPage .train-form-wrap .btn-primary,
#tasksPage .btn-primary,
#workflowsPage .btn-workflow-run {
  background: var(--u-text) !important;
  background-image: none !important;
  color: #0b0c0e !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}
#workflowsPage .btn-workflow-ghost,
#tasksPage .btn-ghost,
#trainPage .btn-ghost { background: rgba(255,255,255,0.035) !important; border-color: var(--u-line) !important; color: var(--u-text) !important; }
#workflowsPage .workflows-page, #workflowsPage .workflows-canvas-wrap { background: var(--u-bg) !important; }
#workflowsPage .workflows-palette,
#workflowsPage .workflow-node,
#workflowsPage .workflows-execution-card,
#tasksPage .tasks-board-column,
#tasksPage .tasks-board-card,
#tasksPage .agent-team-card,
#tasksPage .gauntlet-bar-card {
  background: var(--u-panel) !important;
  border-color: var(--u-line) !important;
  box-shadow: none !important;
}
#workflowsPage .workflow-node.node-selected { box-shadow: 0 0 0 2px var(--u-accent) !important; }
#workflowsPage .workflow-node .node-handle,
#workflowsPage .node-handle { background: var(--u-accent) !important; border-color: var(--u-bg) !important; }
#tasksPage .tasks-board-card-dot-pending,
#tasksPage .agent-team-task-status-in_progress { background: var(--u-accent) !important; }
#tasksPage .agent-team-card:hover { border-color: var(--u-line-strong) !important; }
#tasksPage .gauntlet-badge.is-picked { background: var(--u-accent) !important; color: #0b0c0e !important; }

/* Documents library */
.modal-content.documents-library-modal-shell {
  background: var(--u-panel) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.55) !important;
  color: var(--u-text) !important;
}
.documents-library-modal-shell .documents-library-header p,
.documents-library-modal-shell .documents-library-count,
.documents-library-modal-shell .documents-library-table-head,
.documents-library-modal-shell .documents-library-empty { color: var(--u-muted) !important; }
.documents-library-modal-shell .documents-library-search,
.documents-library-modal-shell .documents-library-view-switch,
.documents-library-modal-shell .documents-library-close-btn {
  background: #0c0e12 !important;
  border-color: var(--u-line) !important;
  color: var(--u-text) !important;
}
.documents-library-modal-shell .documents-library-item,
.documents-library-modal-shell .documents-library-card {
  background: var(--u-panel-2) !important;
  border-color: var(--u-line) !important;
  box-shadow: none !important;
}
.documents-library-modal-shell .btn-modal-secondary,
.documents-library-modal-shell .documents-library-action-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--u-line) !important;
  color: var(--u-text) !important;
}

/* Keep icon buttons quiet. */
body.rag-studio-page .rag-card svg,
body.notes-page .notes-header svg,
body.em-page .em-topbar svg { color: var(--u-muted); }

/* RAG Studio residual orange states */
body.rag-studio-page .rag-marketplace-pill,
body.rag-studio-page .rag-trace-pill,
body.rag-studio-page .rag-source-pill.is-accent,
body.rag-studio-page .rag-store-badge.is-ready {
  background: var(--u-accent-soft) !important;
  border-color: var(--u-line) !important;
  color: var(--u-accent) !important;
}
body.rag-studio-page .rag-kb-item.is-active,
body.rag-studio-page .rag-source-item.is-active,
body.rag-studio-page .rag-store-card.is-selected {
  border-color: var(--u-line-strong) !important;
  box-shadow: inset 0 0 0 1px var(--u-line) !important;
  background: var(--u-panel-2) !important;
}
body.rag-studio-page .rag-store-card:hover { border-color: var(--u-line-strong) !important; }
body.rag-studio-page .rag-selected-connector-card,
body.rag-studio-page .rag-diagnosis {
  background: var(--u-panel) !important;
  background-image: none !important;
  border-color: var(--u-line) !important;
}
body.rag-studio-page .rag-selected-placeholder {
  border-color: var(--u-line) !important;
  background: transparent !important;
}
body.rag-studio-page .rag-store-filter.is-active {
  background: var(--u-text) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #0b0c0e !important;
}
body.rag-studio-page .rag-scorebar > span {
  background: linear-gradient(90deg, #8f9bae, #c3cedd) !important;
}
body.rag-studio-page .rag-mini-toggle input { accent-color: var(--u-accent) !important; }
body.rag-studio-page .rag-inline-field select:focus,
body.rag-studio-page .rag-source-fields textarea:focus,
body.rag-studio-page .rag-store-search input:focus {
  border-color: rgba(195, 206, 221, 0.52) !important;
  box-shadow: 0 0 0 3px rgba(195, 206, 221, 0.08) !important;
}
body.training-page .train-page-header {
  border-left-color: transparent !important;
  border-bottom: 1px solid var(--u-line) !important;
  background: rgba(8, 9, 11, 0.84) !important;
  background-image: none !important;
}

/* Workspace page headers + training controls */
#trainPage .train-page-header,
#tasksPage .train-page-header,
#workflowsPage .train-page-header {
  background: rgba(8, 9, 11, 0.84) !important;
  background-image: none !important;
  border-left-color: transparent !important;
  border-bottom: 1px solid var(--u-line) !important;
  color: var(--u-text) !important;
}
#trainPage .train-page-header *,
#tasksPage .train-page-header *,
#workflowsPage .train-page-header * { border-color: var(--u-line) !important; }
#trainPage .train-engine-tab,
#trainPage .btn-train-add-source,
#trainPage .btn-train-samples-generate,
#trainPage .train-section .btn-primary {
  background: var(--u-panel-2) !important;
  background-image: none !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-line) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}
#trainPage .train-engine-tab.active {
  background: var(--u-text) !important;
  color: #0b0c0e !important;
  border-color: transparent !important;
}
#trainPage .train-full-setup-hint,
#trainPage .train-tiny-status-wrap,
#trainPage .train-chunk-item.processing {
  background: var(--u-panel-2) !important;
  border-color: var(--u-line) !important;
  color: var(--u-muted) !important;
}
#trainPage .train-full-setup-hint { border-left: 3px solid var(--u-line-strong) !important; }
#trainPage .train-section .btn-primary {
  background: var(--u-text) !important;
  color: #0b0c0e !important;
  border-color: transparent !important;
}
#trainPage *, #tasksPage *, #workflowsPage * { box-shadow: none !important; }

/* Orchestration agent-team controls */
#tasksPage .agent-team-detail-nav-btn,
#tasksPage .agent-team-tab,
#tasksPage .gauntlet-example {
  background: transparent !important;
  border-color: var(--u-line) !important;
  color: var(--u-muted) !important;
}
#tasksPage .agent-team-detail-nav-btn.active,
#tasksPage .agent-team-tab.active {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--u-line-strong) !important;
  color: var(--u-text) !important;
}
#tasksPage .agent-team-msg-from,
#tasksPage .agent-teammate-status-working { color: var(--u-accent) !important; }
#tasksPage .agent-team-bottom-bar input:focus { border-color: var(--u-line-strong) !important; }

/* Workflow selected controls */
#workflowsPage .workflow-node .node-title[contenteditable="true"],
#workflowsPage .workflow-node .node-sub[contenteditable="true"] { outline-color: var(--u-accent) !important; }
#workflowsPage .workflows-canvas-wrap.workflow-connecting { outline-color: rgba(195,206,221,.4) !important; }

/* Documents active view */
.documents-library-modal-shell .documents-library-view-btn.is-active {
  background: rgba(255,255,255,0.12) !important;
  color: var(--u-text) !important;
  box-shadow: none !important;
}
.documents-library-modal-shell .documents-library-view-btn { color: var(--u-muted) !important; }

/* Task/agent-team surfaces */
#tasksPage .agent-team-section,
#tasksPage .agent-team-autonomous-summary-card,
#tasksPage .agent-team-autonomy-activity,
#tasksPage .tasks-board-modal-content {
  border-color: var(--u-line) !important;
  background: var(--u-panel) !important;
  background-image: none !important;
}
#tasksPage .agent-team-autonomy-status { color: var(--u-muted) !important; }

/* Workflow palette items should not stay white on the dark canvas. */
#workflowsPage .workflows-palette-item {
  background: var(--u-panel-2) !important;
  border: 1px solid var(--u-line) !important;
  color: var(--u-text) !important;
  box-shadow: none !important;
}
#workflowsPage .workflows-palette-item:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--u-line-strong) !important;
}
#workflowsPage .workflows-palette-icon { color: var(--u-muted) !important; }
#workflowsPage .workflows-palette,
#workflowsPage .workflows-executions-panel,
#workflowsPage .workflows-bottom-panel { background: var(--u-panel) !important; border-color: var(--u-line) !important; }

/* Native file pickers should match the dark product surface. */
body.rag-studio-page input[type="file"] {
  color: var(--u-muted) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
}
body.rag-studio-page input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 14px;
  border: 1px solid var(--u-line) !important;
  border-radius: 999px;
  background: var(--u-panel-2);
  color: var(--u-text);
  font: inherit;
  cursor: pointer;
}
body.rag-studio-page input[type="file"]::file-selector-button:hover { background: var(--u-panel-3); }

body.rag-studio-page input[type="file"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  background: var(--u-panel-2) !important;
  color: var(--u-muted) !important;
  font-size: 12px !important;
}
body.rag-studio-page input[type="file"]::file-selector-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--u-panel-3) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  margin-right: 10px !important;
  font: inherit !important;
  cursor: pointer !important;
}

/* Voice session: neutral, no warm orb or orange active controls. */
.voice-live-panel {
  background: var(--u-panel) !important;
  border: 1px solid var(--u-line) !important;
  color: var(--u-text) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52) !important;
  backdrop-filter: blur(18px) !important;
}
.voice-live-panel-header {
  background: var(--u-panel-2) !important;
  border-bottom: 1px solid var(--u-line) !important;
  color: var(--u-text) !important;
}
.voice-live-panel-content .camera-transcript-label,
.voice-live-status-label { color: var(--u-muted) !important; }
.voice-live-panel-content .camera-transcript-text,
.voice-live-panel .live-response-status { color: var(--u-text) !important; }
.voice-live-pulse {
  background: radial-gradient(circle, rgba(195, 206, 221, 0.58) 0%, rgba(195, 206, 221, 0.16) 70%, transparent 100%) !important;
  box-shadow: 0 0 30px rgba(195, 206, 221, 0.15) !important;
}
.avatar-voice-spinner {
  border-color: rgba(195, 206, 221, 0.25) !important;
  border-top-color: var(--u-accent) !important;
}
.avatar-chooser-trigger {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--u-line) !important;
  color: var(--u-muted) !important;
}
.avatar-chooser-trigger:hover { color: var(--u-text) !important; border-color: var(--u-line-strong) !important; }
.btn-voice.active,
.btn-voice.recording {
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--u-text) !important;
  border-color: var(--u-line-strong) !important;
}

/* Camera + Microphone panel: dark, hairline, white primary action, no orange. */
.camera-panel {
  width: 340px !important;
  max-height: min(680px, calc(100vh - 48px)) !important;
  background: var(--u-panel) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.58) !important;
  color: var(--u-text) !important;
  overflow: hidden !important;
}
.camera-panel-header {
  padding: 13px 16px !important;
  background: var(--u-panel-2) !important;
  border-bottom: 1px solid var(--u-line) !important;
  color: var(--u-text) !important;
  font-weight: 600 !important;
}
.camera-panel-header .btn-close-camera {
  color: var(--u-muted) !important;
  border-radius: 50% !important;
}
.camera-panel-header .btn-close-camera:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--u-text) !important;
}
.camera-panel-content { padding: 12px !important; gap: 0 !important; }
.camera-video {
  border: 1px solid var(--u-line) !important;
  border-radius: 13px !important;
  background: #05070a !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}
.camera-transcript {
  padding: 12px 2px 2px !important;
  max-height: none !important;
  min-height: 0 !important;
}
.camera-transcript-label,
.live-response-label {
  color: var(--u-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}
.camera-transcript-text,
.live-response-text {
  color: var(--u-text) !important;
  background: transparent !important;
  font-size: 12.5px !important;
}
.camera-vlm-hint,
.live-response-status { color: var(--u-muted) !important; font-size: 11px !important; }
.camera-transcript .btn-use-transcript,
.camera-transcript .btn-camera-shot,
.camera-transcript .btn-live-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px !important;
  margin: 10px 8px 0 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--u-line) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--u-text) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.camera-transcript .btn-camera-shot,
.camera-transcript .btn-live-send {
  background: var(--u-text) !important;
  color: #0b0c0e !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
.camera-transcript .btn-use-transcript:hover { background: rgba(255,255,255,0.08) !important; }
.camera-transcript .btn-camera-shot:hover,
.camera-transcript .btn-live-send:hover { filter: brightness(0.94) !important; }
.live-response-section { border-top-color: var(--u-line) !important; }
.live-controls-row .toggle-label { color: var(--u-muted) !important; }
.live-controls-row input[type="checkbox"] { accent-color: var(--u-accent) !important; }
.camera-panel .btn-voice.active,
.camera-panel .btn-voice.recording { background: rgba(255,255,255,0.09) !important; color: var(--u-text) !important; }

/* Orchestration / Gauntlet: monochrome step markers and selection states. */
#tasksPage .gauntlet-panel {
  background: var(--u-panel) !important;
  border-color: var(--u-line) !important;
}
#tasksPage .gauntlet-step-num {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-line) !important;
}
#tasksPage .gauntlet-bar-card:hover,
#tasksPage .gauntlet-bar-card:focus-visible,
#tasksPage .gauntlet-bar-card.selected {
  border-color: var(--u-line-strong) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: 0 0 0 1px var(--u-line) inset !important;
  outline-color: var(--u-line-strong) !important;
}
#tasksPage .gauntlet-bar-mono {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-line) !important;
}
#tasksPage .gauntlet-example {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--u-line) !important;
}
#tasksPage .gauntlet-example:hover { background: rgba(255, 255, 255, 0.06) !important; }
#tasksPage .gauntlet-badge {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--u-text) !important;
}
#tasksPage .gauntlet-badge.is-picked {
  background: var(--u-text) !important;
  color: #0b0c0e !important;
}
#tasksPage .gauntlet-bar-excerpt { border-left-color: var(--u-line-strong) !important; }

/* Workflow canvas accents: neutral, no warm strokes. */
#workflowsPage .workflows-edges-svg .workflow-edge,
#workflowsPage .workflows-edges-svg path.workflow-edge,
#workflowsPage .workflows-edges-svg line.workflow-edge {
  stroke: rgba(195, 206, 221, 0.55) !important;
}
#workflowsPage .workflows-edges-svg path.workflow-edge:hover,
#workflowsPage .workflows-edges-svg line.workflow-edge:hover,
#workflowsPage .workflows-edges-svg path.workflow-edge-highlighted {
  stroke: var(--u-text) !important;
}
#workflowsPage .workflow-execution-dot {
  fill: var(--u-accent) !important;
  filter: none !important;
}
#workflowsPage .node-handle.connecting {
  box-shadow: 0 0 0 3px rgba(195, 206, 221, 0.45) !important;
}
#workflowsPage .workflows-canvas-wrap.workflow-connecting {
  outline-color: rgba(195, 206, 221, 0.35) !important;
}

/* Chat trace / long-log output: replace navy-blue panels with the product black. */
.message-trace-section {
  background: var(--u-panel) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.message-trace-title,
.message-trace-summary-meta,
.message-final-answer-label {
  color: var(--u-muted) !important;
}
.message-trace-summary {
  color: var(--u-text) !important;
}
.message-trace-summary::before {
  color: var(--u-muted) !important;
}
.message-trace-pre {
  background: #0b0c0e !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 10px !important;
}
.message-trace-inline {
  color: var(--u-muted) !important;
}
.message-tool-call-chip {
  background: var(--u-panel-2) !important;
  border-color: var(--u-line) !important;
  color: var(--u-text) !important;
}
.message-tool-call-name { color: var(--u-text) !important; }
.message-tool-call-args { color: var(--u-muted) !important; }
.message-final-answer {
  border-top-color: var(--u-line) !important;
}

/* Integration Store: full-page workspace surface, not a cramped modal. */
.integration-store-overlay {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background: var(--u-bg) !important;
  backdrop-filter: none !important;
}
.integration-store-modal {
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--u-bg) !important;
  box-shadow: none !important;
  color: var(--u-text) !important;
}
.integration-store-header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 28px !important;
  background: rgba(8, 9, 11, .92) !important;
  border-bottom: 1px solid var(--u-line) !important;
}
.integration-store-head-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.integration-store-back {
  border: 1px solid var(--u-line); background: rgba(255,255,255,.035);
  color: var(--u-text); border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.integration-store-back:hover { background: rgba(255,255,255,.07); border-color: var(--u-line-strong); }
.integration-store-title { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.025em; }
.integration-store-subtitle { color: var(--u-muted) !important; font-size: 12px; margin-top: 3px; }
.integration-store-close {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--u-line) !important;
  background: rgba(255,255,255,.035) !important; color: var(--u-muted) !important;
}
.integration-store-close:hover { color: var(--u-text) !important; background: rgba(255,255,255,.07) !important; }
.integration-store-menu {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--u-line); border-radius: 50%;
  background: rgba(255,255,255,.035); color: var(--u-text);
  cursor: pointer;
}
.integration-store-menu:hover { background: rgba(255,255,255,.07); border-color: var(--u-line-strong); }
/* The main workspace rail stays above the store while opened from its menu. */
body.integration-store-open .sidebar { z-index: 9500; }
body.integration-store-open .sidebar-overlay { z-index: 9400; }
.integration-store-layout { display: flex; flex: 1 1 auto; min-height: 0; }
.integration-store-filters {
  width: 252px; flex: 0 0 252px; padding: 18px 14px; overflow-y: auto;
  background: #0b0c0e; border-right: 1px solid var(--u-line);
}
.integration-store-filter-label {
  color: var(--u-faint); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; padding: 0 10px 10px;
}
.integration-store-tabs { display: flex !important; flex-direction: column; gap: 3px; padding: 0 !important; overflow: visible !important; }
.integration-store-tab {
  width: 100%; display: flex !important; align-items: center; gap: 8px;
  border: 1px solid transparent !important; border-radius: 9px !important;
  padding: 9px 10px !important; background: transparent !important;
  color: var(--u-muted) !important; font-size: 12px !important; text-align: left;
  filter: grayscale(1);
}
.integration-store-tab:hover { background: rgba(255,255,255,.05) !important; color: var(--u-text) !important; }
.integration-store-tab.active {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--u-line) !important;
  color: var(--u-text) !important;
}
.integration-store-tab .tab-count { margin-left: auto; font-size: 9px; color: var(--u-faint); background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 999px; }
.integration-store-content { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.integration-store-search { padding: 18px 28px 8px !important; width: min(760px, 100%); flex-shrink: 0; }
.integration-store-search-input {
  width: 100%; height: 42px; border-radius: 10px !important;
  border: 1px solid var(--u-line) !important; background: #0c0e12 !important;
  color: var(--u-text) !important; font-size: 13px !important; padding: 0 14px !important;
}
.integration-store-search-input:focus { border-color: var(--u-line-strong) !important; outline: none; }
.integration-store-grid {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 12px !important; overflow-y: auto !important; flex: 1 1 auto !important;
  min-height: 0 !important; padding: 10px 28px 48px !important;
  /* Auto rows default to stretch, which compressed every card to a 14px
     line inside the fixed-height full-page store. Size rows to content and
     let the grid itself scroll. */
  grid-auto-rows: max-content !important;
  align-content: start !important;
}
.integration-store-group {
  background: var(--u-panel) !important; border: 1px solid var(--u-line) !important;
  border-radius: 14px !important; overflow: hidden !important;
}
.integration-store-card-header { padding: 12px 14px !important; border-bottom: 1px solid var(--u-line) !important; }
.integration-store-card { border-color: var(--u-line) !important; }
.integration-store-card:hover { background: rgba(255,255,255,.04) !important; border-color: var(--u-line-strong) !important; }
.integration-store-card-icon { filter: grayscale(1); opacity: .85; }
.integration-store-config-btn { color: var(--u-muted) !important; }
.integration-store-config-btn:hover { color: var(--u-text) !important; }
.integration-store-actions { border-top: 0 !important; }
.integration-store-action { border-top: 1px solid var(--u-line) !important; color: var(--u-text) !important; }
.integration-store-action:hover { background: rgba(255,255,255,.055) !important; }
.integration-store-action-hint { color: var(--u-faint) !important; }
.integration-store-create-card { border-color: var(--u-line-strong) !important; background: rgba(255,255,255,.025) !important; }
.integration-store-more { color: var(--u-muted) !important; border-color: var(--u-line-strong) !important; }
.integration-store-empty { color: var(--u-faint) !important; }
.integration-store-tab svg, .integration-store-card-icon svg { filter: grayscale(1); }

/* Integration Store category icons in the workflow palette. */
.integrations-cat-icon { filter: grayscale(1) opacity(.8); }

/* Integration settings: scrollable, readable, monochrome. */
.integration-config-overlay {
  z-index: 10000 !important;
  align-items: flex-start !important;
  padding: 4vh 16px !important;
  overflow-y: auto !important;
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(8px);
}
.integration-config-modal {
  max-width: 620px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--u-panel) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 18px !important;
  color: var(--u-text) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.6) !important;
  overflow: hidden !important;
}
.integration-config-header {
  flex-shrink: 0;
  background: var(--u-panel-2) !important;
  border-bottom: 1px solid var(--u-line) !important;
  padding: 16px 18px !important;
}
.integration-config-title { color: var(--u-text) !important; }
.integration-config-icon { filter: grayscale(1); }
.integration-config-close { color: var(--u-muted) !important; border-radius: 50% !important; }
.integration-config-close:hover { color: var(--u-text) !important; }
.integration-config-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  padding: 18px 20px !important;
}
.integration-config-section-label { color: var(--u-faint) !important; }
.integration-config-label { color: var(--u-muted) !important; font-size: 12px !important; }
.integration-config-input {
  background: #0c0e12 !important;
  border: 1px solid var(--u-line) !important;
  color: var(--u-text) !important;
  border-radius: 9px !important;
}
.integration-config-input:focus { border-color: var(--u-line-strong) !important; outline: none; box-shadow: 0 0 0 3px rgba(195,206,221,.07); }
.integration-config-reveal-btn { background: rgba(255,255,255,.06) !important; color: var(--u-text) !important; border-radius: 9px !important; }
.integration-config-reveal-btn:hover { background: rgba(255,255,255,.1) !important; }
.integration-config-oauth {
  margin-bottom: 14px; padding: 12px; border: 1px solid var(--u-line) !important;
  border-radius: 12px; background: rgba(255,255,255,.03) !important;
}
.integration-linkedin-oauth-btn {
  width: 100%;
  background: rgba(255,255,255,.07) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 999px !important;
}
.integration-linkedin-oauth-btn:hover { background: rgba(255,255,255,.11) !important; }
.integration-config-test-btn { background: rgba(255,255,255,.06) !important; color: var(--u-text) !important; border: 1px solid var(--u-line) !important; border-radius: 999px !important; }
.integration-config-save-btn { background: var(--u-text) !important; color: #0b0c0e !important; border-radius: 999px !important; }
.integration-config-footer {
  flex-shrink: 0;
  background: var(--u-panel-2) !important;
  border-top: 1px solid var(--u-line) !important;
  padding: 12px 20px 16px !important;
}
.integration-config-status { padding: 0 20px 6px !important; }
.integration-config-has-saved { border-color: rgba(126, 230, 167, .55) !important; }
.integration-config-cred-name-wrap select { background: #0c0e12 !important; color: var(--u-text) !important; }

/* Avatar panel must be only the globe, never a floating-panel card. */
.avatar-panel.floating-panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.avatar-panel .avatar-siri-wrap,
.avatar-panel .avatar-container,
.avatar-panel .avatar-container canvas {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.avatar-panel .avatar-container { border-radius: 50% !important; }
.avatar-panel .avatar-chooser-trigger { border-radius: 50% !important; }


#avatarPanel.avatar-panel.floating-panel {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  outline: none !important;
}
#avatarPanel .avatar-siri-wrap,
#avatarPanel .avatar-container,
#avatarPanel .avatar-container canvas {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Camera preview as a phone-style video-call bubble: just the circle. */
#cameraPanel.camera-panel {
  left: auto !important;
  right: 24px !important;
  top: 136px !important;
  width: 196px !important;
  height: 196px !important;
  max-height: none !important;
  padding: 0 !important;
  background: #05070a !important;
  border: 2px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 50% !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden !important;
}
#cameraPanel .camera-panel-header {
  position: absolute !important;
  top: 30px !important;
  right: 30px !important;
  left: auto !important;
  z-index: 3 !important;
  padding: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#cameraPanel .camera-panel-header > span { display: none !important; }
#cameraPanel .btn-close-camera {
  width: 27px !important; height: 27px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
#cameraPanel .camera-panel-content {
  width: 100% !important; height: 100% !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
#cameraPanel .camera-video {
  width: 100% !important; height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
#cameraPanel .camera-transcript { display: none !important; }
#cameraPanel .camera-circle-shot {
  position: absolute !important;
  left: 50% !important;
  bottom: 11px !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0b0c0e !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
#cameraPanel .camera-circle-shot:hover { background: #fff !important; }
@media (max-width: 600px) {
  #cameraPanel.camera-panel {
    right: 16px !important;
    top: 120px !important;
    width: 154px !important;
    height: 154px !important;
  }
}

/* Settings must be a first-class, always visible sidebar destination. */
.sb-settings-row {
  margin-top: 4px;
  border-top: 1px solid var(--u-line) !important;
  border-radius: 0 0 9px 9px !important;
}
.sb-settings-row:hover { background: rgba(255,255,255,.055) !important; }
.sidebar-footer .sb-account {
  min-height: 52px;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--u-line) !important;
}
.sidebar-footer .sb-account:hover { background: rgba(255,255,255,.06) !important; }
.sidebar-footer .sb-account .user-avatar { flex: 0 0 30px; }

/* GPU / runtime information is a neutral status strip, not a warning. */
.stg-gpu-info {
  padding: 8px 11px !important;
  border-radius: 9px !important;
  border: 1px solid var(--u-line) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--u-muted) !important;
  font-size: 11.5px !important;
}
.stg-gpu-info #ollamaGpuInfoText { color: var(--u-muted) !important; }

/* -------------------------------------------------------------------------
   Mobile workspace pass: orchestration, workflows, integrations, settings.
   ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .sidebar:not(.hidden) ~ .train-page { margin-left: 0 !important; }
  .train-page { min-height: 100dvh; }
  .train-page-header,
  .tasks-board-header,
  .workflows-top-bar {
    padding-left: max(16px, var(--sal)) !important;
    padding-right: max(16px, var(--sar)) !important;
    padding-top: max(10px, var(--sat)) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .train-page-title,
  .workflows-page-title { font-size: 1.05rem !important; }

  /* Orchestration */
  #tasksPage .tasks-board-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 14px 18px !important;
    -webkit-overflow-scrolling: touch;
  }
  #tasksPage .tasks-board-columns {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 10px !important;
  }
  #tasksPage .tasks-board-column {
    flex: 0 0 min(82vw, 320px) !important;
    min-width: min(82vw, 320px) !important;
    max-height: 62dvh !important;
    min-height: 260px !important;
  }
  #tasksPage .tasks-tab-bar {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  #tasksPage .tasks-tab { flex: 0 0 auto; min-height: 42px; padding: 8px 12px; }
  #tasksPage #boardTabActions,
  #tasksPage [id$="TabActions"] {
    display: flex !important;
    width: 100%;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #tasksPage .tasks-board-desc { order: 0; width: 100%; }
  #tasksPage .agent-teams-panel,
  #tasksPage .agent-team-section { padding: 12px !important; }
  #tasksPage .agent-teams-list { grid-template-columns: 1fr !important; }
  #tasksPage .gauntlet-steps { grid-template-columns: 1fr !important; gap: 18px !important; }
  #tasksPage .gauntlet-head { flex-wrap: wrap !important; gap: 8px !important; }
  #tasksPage .gauntlet-head .btn-primary { width: auto; }
  #tasksPage .gauntlet-run-row { flex-wrap: wrap; }
  #tasksPage .gauntlet-row { flex-wrap: wrap; }
  #tasksPage .gauntlet-budget { flex: 0 0 auto; }
  #tasksPage .decisions-rule { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  #tasksPage .decisions-rule-control { align-items: flex-start !important; }
  #tasksPage .tasks-board-modal-content {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    max-height: 90dvh;
    overflow-y: auto;
    margin: 12px auto !important;
    padding: 16px !important;
  }

  /* Workflows */
  #workflowsPage { min-height: 0 !important; height: 100dvh; }
  #workflowsPage .workflows-top-left { flex: 1 1 100%; min-width: 0; }
  #workflowsPage .workflows-top-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  #workflowsPage .workflows-tab { flex: 0 0 auto; min-height: 40px; }
  #workflowsPage .workflows-top-actions {
    width: 100%; flex-wrap: nowrap !important; overflow-x: auto;
    padding-bottom: 2px; margin-left: 0;
    -webkit-overflow-scrolling: touch;
  }
  #workflowsPage .workflows-top-actions > * { flex: 0 0 auto; }
  #workflowsPage .workflow-select { min-width: 170px; }
  #workflowsPage .workflow-name-input { width: 180px !important; min-width: 180px; flex: 0 0 180px; }
  #workflowsPage .btn-workflow { min-height: 40px; padding: 8px 12px; }
  #workflowsPage .workflows-editor-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #workflowsPage .workflows-palette {
    width: 100% !important;
    max-height: 126px !important;
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--u-line) !important;
    -webkit-overflow-scrolling: touch;
  }
  #workflowsPage .workflows-palette-section {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
  }
  #workflowsPage .workflows-palette-title {
    width: auto !important;
    margin: 0 3px 0 0 !important;
    font-size: 8.5px !important;
    white-space: nowrap;
  }
  #workflowsPage .workflows-palette-item {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    white-space: nowrap;
  }
  #workflowsPage .workflows-palette-subsection { margin: 0 !important; }
  #workflowsPage .workflows-canvas-wrap { flex: 1 1 auto !important; min-height: 260px !important; }
  #workflowsPage .workflows-bottom-panel { flex: 0 0 auto; }
  #workflowsPage .workflows-executions-panel { padding: 12px 14px !important; }
  #workflowsPage .workflows-executions-toolbar { flex-wrap: wrap; }
  #workflowsPage .workflow-zoom-panel { right: 10px; bottom: 10px; }

  /* Integration Store full page */
  .integration-store-header { padding: 12px 14px !important; gap: 10px !important; flex-wrap: wrap; }
  .integration-store-head-left { gap: 10px; flex-wrap: wrap; }
  .integration-store-back { padding: 7px 11px; font-size: 11px; }
  .integration-store-title { font-size: 18px !important; }
  .integration-store-subtitle { display: none !important; }
  .integration-store-layout { flex-direction: column !important; }
  .integration-store-filters {
    width: 100% !important; flex: 0 0 auto !important;
    max-height: 154px; padding: 8px 12px !important;
    border-right: 0 !important; border-bottom: 1px solid var(--u-line) !important;
  }
  .integration-store-filter-label { padding: 0 0 7px !important; }
  .integration-store-tabs { flex-direction: row !important; gap: 5px !important; overflow-x: auto !important; }
  .integration-store-tab { width: auto !important; flex: 0 0 auto !important; white-space: nowrap; padding: 7px 10px !important; }
  .integration-store-tab .tab-count { margin-left: 2px; }
  .integration-store-search { padding: 10px 14px 6px !important; }
  .integration-store-grid {
    grid-template-columns: 1fr !important;
    padding: 8px 14px 40px !important;
  }
  .integration-store-card-header { padding: 10px 12px !important; }
  .integration-config-overlay { padding: 0 !important; align-items: stretch !important; }
  .integration-config-modal {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
  .integration-config-header { padding: 14px !important; }
  .integration-config-body { padding: 16px !important; }
  .integration-config-footer { padding: 12px 16px max(12px, var(--sab)) !important; }

  /* Settings: make long model/server forms fit the viewport. */
  #settingsScreen .stg-scroll { padding-left: 16px; padding-right: 16px; }
  #settingsScreen .stg-card { padding: 12px; }
  #settingsScreen .form-group { grid-template-columns: 1fr !important; gap: 8px !important; }
  #settingsScreen .form-group > label { margin-bottom: 2px; }
  #settingsScreen .form-input,
  #settingsScreen .form-select { width: 100% !important; max-width: 100% !important; }
}

/* Mobile headers must clear the floating hamburger. */
@media (max-width: 820px) {
  .train-page-header,
  .tasks-board-header,
  .workflows-top-bar {
    padding-left: max(72px, var(--sal)) !important;
  }
  .workflows-top-left { min-width: 0; }
  .sidebar .sb-settings-row {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--n-surface, #111214);
  }
}

/* Old blue document-editor shell -> neutral workspace surface. */
.aaaaioffice-shell {
  background: #08090b !important;
  color: var(--u-text, #f2f3f5) !important;
}
.aaaaioffice-shell-header {
  background: rgba(8, 9, 11, .94) !important;
  border-bottom-color: var(--u-line, rgba(255,255,255,.08)) !important;
}
.aaaaioffice-shell-badge {
  background: rgba(255,255,255,.07) !important;
  color: var(--u-muted, #9298a4) !important;
}
.aaaaioffice-shell-title { color: var(--u-text) !important; }
.aaaaioffice-shell-subtitle { color: var(--u-muted) !important; }
.aaaaioffice-shell-status {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--u-line) !important;
  color: var(--u-muted) !important;
}
.aaaaioffice-shell-save {
  background: var(--u-text, #f2f3f5) !important;
  border-color: var(--u-text, #f2f3f5) !important;
  color: #0b0c0e !important;
  border-radius: 999px !important;
}
.aaaaioffice-shell-toggle {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--u-line) !important;
  color: var(--u-text) !important;
  border-radius: 999px !important;
}
.aaaaioffice-frame-wrap { background: #08090b !important; }

/* Direct-message composer: remove navy/blue tints. */
.modal-content.documents-library-modal-shell {
  background: var(--u-panel, #14161b) !important;
  border: 1px solid var(--u-line, rgba(255,255,255,.09)) !important;
  color: var(--u-text) !important;
}
.documents-library-empty {
  background: rgba(255,255,255,.025) !important;
  border-color: var(--u-line, rgba(255,255,255,.1)) !important;
  color: var(--u-muted) !important;
}
.documents-library-search {
  background: #0c0e12 !important;
  border-color: var(--u-line) !important;
  color: var(--u-text) !important;
}
.documents-library-view-btn.is-active {
  background: rgba(255,255,255,.1) !important;
  color: var(--u-text) !important;
  box-shadow: none !important;
}
.documents-library-empty:focus,
.documents-library-empty:focus-visible { outline: none !important; }

/* Keep Settings reachable at the bottom of the main rail on long workspaces. */
.sidebar .sb-settings-row {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--n-surface, #111214);
}

/* Settings focus states: monochrome, no blue rings. */
#settingsScreen { --stg-link: #c3cedd; }
#settingsScreen .stg-nav-item:focus-visible,
#settingsScreen .stg-back:focus-visible,
#settingsScreen .stg-icon-btn:focus-visible,
#settingsScreen .stg-btn:focus-visible,
#settingsScreen .settings-section .btn-modal:focus-visible,
#settingsScreen .settings-section .btn:focus-visible {
  outline-color: rgba(195, 206, 221, .75) !important;
}
#settingsScreen .settings-section input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(195, 206, 221, .18) !important;
}

/* Platform language switch */
.sb-lang-switch {
  display: flex; gap: 2px; margin: 0 0 8px; padding: 3px;
  border: 1px solid var(--n-border, rgba(255,255,255,.09)); border-radius: 9px;
  background: rgba(255,255,255,.025);
}
.sb-lang-switch button {
  flex: 1; min-height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: var(--n-text-3, #9298a4);
  font: inherit; font-size: 11px; letter-spacing: .05em; cursor: pointer;
}
.sb-lang-switch button:hover { color: var(--n-text, #f2f3f5); background: rgba(255,255,255,.05); }
.sb-lang-switch button[aria-pressed="true"] {
  background: rgba(255,255,255,.1); color: var(--n-text, #f2f3f5); font-weight: 600;
}
.sb-lang-switch button[aria-pressed="true"] { background: #f2f3f5 !important; color: #08090b !important; }

/* Neutral video/voice welcome surfaces (no navy/blue boxes). */
.video-chat-welcome,
.video-session-header {
  padding: 26px 24px !important;
  max-width: 720px;
  margin: 12vh auto 0 !important;
  text-align: center;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.video-chat-welcome h2,
.video-session-header-title {
  color: var(--u-text) !important;
  font-size: clamp(28px, 5vw, 44px) !important;
  font-weight: 400 !important;
  letter-spacing: -.04em;
  margin: 0 0 12px !important;
}
.video-chat-welcome p,
.video-session-header-hint {
  color: var(--u-muted) !important;
  font-size: 14px !important;
  line-height: 1.5;
  margin: 0 auto !important;
  max-width: 620px;
}
.video-session-header-label { color: var(--u-faint) !important; }

/* In camera/video mode the globe is redundant; video itself is the visual. */
body.camera-mode-active #avatarPanel { display: none !important; }

/* Camera flip control in the circular bubble. */
#cameraPanel .camera-circle-flip {
  position: absolute !important;
  right: 16px !important;
  bottom: 12px !important;
  z-index: 4 !important;
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(0,0,0,.52) !important;
  color: #fff !important;
  font-size: 16px !important; line-height: 1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
}
@media (max-width: 600px) {
  #cameraPanel .camera-circle-flip { right: 10px !important; bottom: 9px !important; width: 28px !important; height: 28px !important; }
  .video-chat-welcome, .video-session-header { margin-top: 10vh !important; padding: 22px 18px !important; }
}

/* ChatGPT-style attachment previews: thumbnail cards, not a wide strip. */
.attachment-preview-wrap {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 8px !important;
}
.attachment-preview-label {
  color: var(--u-faint) !important;
  font-size: 10.5px !important;
  letter-spacing: .02em;
  margin-bottom: 7px !important;
}
.attachment-preview {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 0 !important;
}
.attachment-card {
  position: relative;
  width: 156px;
  min-height: 64px;
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start;
  gap: 0 !important;
  background: #14161b !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.attachment-card-image { width: 142px; }
.attachment-card-image > img {
  width: 100%; height: 88px; object-fit: cover; display: block;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.attachment-card-name {
  display: block; padding: 7px 9px;
  color: var(--u-text, #f2f3f5);
  font-size: 10.5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attachment-card-file {
  width: 210px; min-height: 68px;
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px 12px !important;
}
.attachment-card-icon {
  flex: 0 0 auto; width: 31px; height: 31px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(255,255,255,.06); color: var(--u-muted);
}
.attachment-card-icon .attachment-icon { color: inherit; }
.attachment-card-meta {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
}
.attachment-card-meta strong {
  color: var(--u-text); font-size: 11px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attachment-card-meta small { color: var(--u-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.attachment-card-remove {
  position: absolute !important; top: 4px; right: 4px;
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.58) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px !important; line-height: 1 !important;
  z-index: 2;
}
.attachment-card-remove:hover { background: rgba(255,59,48,.75) !important; color: #fff !important; }
.attachment-card-actions {
  position: absolute; right: 5px; bottom: 5px; display: flex; gap: 4px; z-index: 2;
}
.attachment-card-actions .attachment-preview-open,
.attachment-card-actions .attachment-preview-redact {
  padding: 3px 7px !important;
  border-radius: 6px !important;
  background: rgba(8,9,11,.72) !important;
  color: #eceef1 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-size: 9px !important;
}
.attachment-card-file .attachment-card-remove { background: rgba(255,255,255,.08) !important; }
html[data-theme="light"] .attachment-card { background: #f3f4f6 !important; border-color: rgba(0,0,0,.1) !important; }
html[data-theme="light"] .attachment-card-name,
html[data-theme="light"] .attachment-card-meta strong { color: #111318; }
html[data-theme="light"] .attachment-card-remove { background: rgba(0,0,0,.55) !important; color: #fff !important; }
@media (max-width: 600px) {
  .attachment-card { width: 138px; }
  .attachment-card-image { width: 124px; }
  .attachment-card-image > img { height: 76px; }
  .attachment-card-file { width: min(240px, 100%); }
}

/* Inline message editor: same conversation surface, no modal, no orange. */
.message-inline-editor {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--u-line, rgba(255,255,255,.1));
  border-radius: 12px;
  background: #0c0e12;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.message-inline-editor-input {
  width: 100%;
  min-height: 82px;
  max-height: 260px;
  resize: vertical;
  box-sizing: border-box;
  border: 1px solid var(--u-line, rgba(255,255,255,.12));
  border-radius: 9px;
  background: #08090b;
  color: var(--u-text, #f2f3f5);
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
}
.message-inline-editor-input:focus { border-color: var(--u-line-strong, rgba(255,255,255,.25)); }
.message-inline-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 8px;
}
.message-inline-editor-cancel,
.message-inline-editor-save {
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.message-inline-editor-cancel {
  background: transparent;
  border: 1px solid var(--u-line, rgba(255,255,255,.14));
  color: var(--u-muted, #9298a4);
}
.message-inline-editor-cancel:hover { color: var(--u-text, #f2f3f5); border-color: var(--u-line-strong, rgba(255,255,255,.25)); }
.message-inline-editor-save {
  background: var(--u-text, #f2f3f5);
  border: 1px solid var(--u-text, #f2f3f5);
  color: #0b0c0e;
  font-weight: 600;
}
.message-inline-editor-save:hover { background: #fff; }
.message-inline-editor-save:disabled { opacity: .6; cursor: wait; }
html[data-theme="light"] .message-inline-editor { background: #f4f5f7; }
html[data-theme="light"] .message-inline-editor-input { background: #fff; color: #111318; }

@media (max-width: 820px) {
  .train-page-header,
  .tasks-board-header,
  .workflows-top-bar { padding-left: max(120px, var(--sal)) !important; }
  .tasks-board-header .train-page-title,
  .workflows-top-left { margin-left: 0 !important; }
}
/* Board tabs stay put when the active tab changes. */
.tasks-tab-bar { display: flex !important; gap: 4px !important; justify-content: flex-start !important; }
.tasks-tab { min-width: 96px; text-align: center; }
#tabTeams { min-width: 118px; }
#tabAutonomous { min-width: 112px; }

/* Always-visible language switch in the top of the rail. */
.sb-lang-mini { display: inline-flex; padding: 2px; border: 1px solid var(--n-border, rgba(255,255,255,.09)); border-radius: 8px; }
.sb-lang-mini button {
  min-width: 27px; height: 26px; border: 0; border-radius: 6px; background: transparent;
  color: var(--n-text-3, #9298a4); font: inherit; font-size: 9.5px; font-weight: 500; cursor: pointer;
}
.sb-lang-mini button[aria-pressed="true"] { background: #f2f3f5; color: #08090b; }
.sb-lang-mini button:hover { color: var(--n-text, #f2f3f5); }

/* Documents library: neutral cards instead of the legacy navy/purple surface. */
.modal-content.documents-library-modal-shell {
  background: #111318 !important;
  border: 1px solid var(--u-line) !important;
}
.documents-library-grid-card {
  background: #14161b !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: none !important;
}
.documents-library-card-preview {
  --documents-library-accent: #c3cedd !important;
  background: #191b21 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.documents-library-preview-topline,
.documents-library-preview-kind,
.documents-library-preview-pill {
  color: #9298a4 !important;
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.documents-library-card-preview,
.documents-library-card-preview * { color: #c8ccd4; }
.documents-library-card-preview strong,
.documents-library-preview-title { color: #f2f3f5 !important; }
.documents-library-grid-card-header,
.documents-library-grid-card-footer,
.documents-library-card-body,
.documents-library-preview-footer {
  background: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
}
.documents-library-grid-card-footer,
.documents-library-reason,
.documents-library-owner-cell { color: var(--u-muted) !important; }
.documents-library-action-btn,
.documents-library-header-btn,
.documents-library-view-switch {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--u-text) !important;
}
.documents-library-action-btn:hover,
.documents-library-header-btn:hover { background: rgba(255,255,255,.08) !important; }
.documents-library-search {
  background: #0c0e12 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: var(--u-text) !important;
}
.documents-library-view-btn.is-active {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Immediate feedback while the settings payload loads. */
.settings-loading-overlay {
  position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center;
  background: rgba(8,9,11,.78); backdrop-filter: blur(8px);
}
.settings-loading-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 34px; border: 1px solid var(--u-line); border-radius: 16px;
  background: var(--u-panel); color: var(--u-text); font-size: 12px;
}
.settings-loading-card strong { font-size: 15px; font-weight: 500; }
.settings-loading-card span:last-child { color: var(--u-muted); }
.settings-loading-spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.16); border-top-color: #f2f3f5;
  animation: settings-spin .8s linear infinite;
}
@keyframes settings-spin { to { transform: rotate(360deg); } }

/* Sidebar: keep the account/settings footer always visible. The rail itself
   does not scroll; only the middle content does. This prevents long Recents/
   Direct messages lists from pushing the lower controls below the viewport. */
.sidebar {
  overflow: hidden !important;
}
.sidebar-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.sidebar-footer {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  position: relative;
  z-index: 6;
}
.sb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 8px;
}
.sb-section-head .sb-section-label {
  padding-bottom: 4px !important;
}
.sb-section-add {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--n-divider);
  border-radius: 50%;
  background: transparent;
  color: var(--n-text-2);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.sb-section-add:hover {
  background: var(--n-raised);
  color: var(--n-text);
}


/* Direct-message search: never show a credential/autofill tint or password UI. */
#internalChatSearchInput,
.documents-library-modal-shell #internalChatSearchInput,
#internalChatSearchInput:focus,
#internalChatSearchInput:focus-visible {
  background: #0c0e12 !important;
  background-color: #0c0e12 !important;
  border-color: var(--u-line, rgba(255,255,255,.1)) !important;
  color: var(--u-text, #f4f5f6) !important;
  -webkit-text-fill-color: var(--u-text, #f4f5f6) !important;
  box-shadow: none !important;
  outline: none !important;
  caret-color: var(--u-text, #f4f5f6);
}
#internalChatSearchInput:-webkit-autofill,
#internalChatSearchInput:-webkit-autofill:hover,
#internalChatSearchInput:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0c0e12 inset !important;
  -webkit-text-fill-color: var(--u-text, #f4f5f6) !important;
  transition: background-color 99999s ease-out 0s;
}

/* Subscription gate — current product surface (monochrome, no legacy orange). */
.sub-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(900px 520px at 50% -15%, rgba(255,255,255,.06), transparent 68%),
        rgba(5, 6, 8, 0.84);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.sub-card {
    width: min(560px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 24px;
    background: #101113;
    color: #f4f4f5;
    box-shadow: 0 28px 90px rgba(0,0,0,.62);
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
.sub-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.sub-brand {
    display: inline-flex;
    align-items: flex-start;
    gap: 3px;
    color: #f4f4f5;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.06em;
    line-height: 1;
}
.sub-brand span { color: #7d818a; font-weight: 300; }
.sub-brand small { margin-top: -1px; font-size: 8px; font-weight: 600; letter-spacing: .04em; color: #8e929b; }
.sub-eyebrow {
    color: #8e929b;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sub-card h1 {
    margin: 0 0 10px;
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.1;
    letter-spacing: -.04em;
    font-weight: 500;
    color: #f7f7f8;
}
.sub-message {
    margin: 0 0 22px;
    color: #9a9ea7;
    font-size: 14px;
    line-height: 1.6;
}
.sub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.sub-btn + .sub-btn { margin-top: 9px; }
.sub-btn:hover { transform: translateY(-1px); }
.sub-btn--primary {
    background: #f4f4f5;
    color: #0b0c0e;
    border-color: #f4f4f5;
    box-shadow: 0 12px 34px rgba(255,255,255,.08);
}
.sub-btn--primary:hover { background: #fff; border-color: #fff; }
.sub-btn--ghost {
    background: transparent;
    color: #e6e7ea;
    border-color: rgba(255,255,255,.18);
}
.sub-btn--ghost:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.3); }
.sub-link {
    display: block;
    margin: 14px auto 0;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: #8e929b;
    font: inherit;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}
.sub-link:hover { color: #f4f4f5; }
.sub-hint {
    margin: 8px 0 10px;
    color: #7d818a;
    font-size: 11px;
    line-height: 1.5;
}
.sub-hint strong { color: #b9bcc3; font-weight: 600; }
.sub-crypto {
    margin-top: 10px;
    padding-top: 0;
}
.sub-crypto-details {
    margin-top: 9px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: #151619;
}
.sub-crypto-options { display: flex; flex-wrap: wrap; gap: 7px; }
.sub-crypto-options .btn-crypto-select {
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: #1b1c20;
    color: #e6e7ea;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.sub-crypto-options .btn-crypto-select:hover { border-color: rgba(255,255,255,.3); }
.sub-crypto-amount { margin: 0 0 10px; color: #f4f4f5; font-size: 14px; font-weight: 600; text-align: center; }
.sub-crypto-qr { display: inline-block; margin: 0 auto; padding: 9px; border-radius: 10px; background: #fff; }
.sub-crypto-address {
    margin: 10px 0 0;
    padding: 8px;
    border-radius: 7px;
    background: rgba(0,0,0,.28);
    color: #9a9ea7;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    line-height: 1.45;
    word-break: break-all;
}
.sub-crypto-copy {
    margin-top: 9px;
    border: 0;
    background: none;
    color: #c9cbd1;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.sub-crypto-status { margin: 12px 0 0; color: #c9cbd1; font-size: 12px; font-weight: 600; text-align: center; }
.sub-note {
    margin: 20px 0 0;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #70747d;
    font-size: 11px;
    line-height: 1.55;
}
@media (max-width: 560px) {
    .sub-overlay { padding: 10px; align-items: flex-end; }
    .sub-card { padding: 21px 18px; border-radius: 20px; max-height: calc(100dvh - 12px); }
    .sub-brand-row { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
    .sub-eyebrow { font-size: 8px; }
}