:root {
  /* ======================================================================
   * BRAND SYSTEM 2.0 — canonical token source (Phase A: colors + fonts).
   * These six colors and two typefaces are the single source of truth.
   * Space Grotesk / Inter are loaded via Google Fonts in index.html.
   * ================================================================== */
  --lw-black: #0b0b0d;       /* Loadwise Black */
  --lw-graphite: #18191b;    /* Loadwise Graphite */
  --lw-warm-white: #f5f4f1;  /* Loadwise Warm White */
  --lw-white: #ffffff;       /* Loadwise White */
  --lw-red: #d71920;         /* Loadwise Red */
  --lw-grey: #9a9a9a;        /* Loadwise Grey */
  --lw-font-heading: 'Space Grotesk', Anton, Impact, sans-serif;
  --lw-font-body: 'Inter', Montserrat, Arial, sans-serif;

  /* ======================================================================
   * Phase B — legacy token names now ALIAS the Brand System 2.0 tokens
   * above, so every existing rule in this file that references var(--bg),
   * var(--accent), var(--white), var(--gray), var(--surface) picks up the
   * new brand values automatically, with no per-rule edits needed.
   * --bg/--accent/--white are exact-value matches (zero color shift).
   * --gray (#B8B8B8 → #9A9A9A) and --surface (#151519 → #18191B) are the
   * deliberate, visible Phase B refinements toward the Brand System 2.0
   * spec. --line is unchanged (not part of the six-color brand palette). */
  /* ======================================================================
   * STUDIO UX/UI CONVERGENCE v1 — LIGHT TECHNOLOGICAL PREMIUM.
   *
   * These five aliases are the whole inversion. Every rule in this file already speaks through them
   * (--bg 23 uses, --surface 16, --white 54, --line 61, --gray 63), so pointing them at the light palette
   * converges the operator workspace without touching those rules one by one.
   *
   * The palette is NOT new. `LOADWISE VISUAL SYSTEM v1` further down this file already defines it, and the
   * public and client surfaces already render in it; its own comment recorded the split this convergence
   * closes — "OWNER/operator views retain their established dense dark workspace, while the client receives
   * the same light-tech language as public". One product, one language.
   *
   * Custom properties resolve at use time, so referencing tokens declared later in the same :root is
   * intentional and well-defined, not a forward-reference bug.
   *
   * --white keeps its name and changes meaning: it has always been "the colour that reads against the app
   * background", which is now ink. The handful of places where it genuinely meant white-on-dark (a label
   * over an image, text on the red button) are pinned to --on-accent below instead. */
  --bg: var(--lw-bg);
  --accent: var(--lw-red);
  --white: var(--lw-text);
  --gray: var(--lw-text-muted);
  --surface: var(--lw-surface);
  --line: var(--lw-border);
  /* Text that sits on the red accent or on a dark image overlay, where ink would be unreadable. */
  --on-accent: #ffffff;
  /* Panel fills that used to be hardcoded near-black. */
  --panel: var(--lw-surface);
  --panel-soft: var(--lw-bg-soft);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1000px; background: var(--bg); color: var(--white); font: 500 13px/1.45 var(--lw-font-body); }
button, input, textarea, select { font: inherit; }
.app-header { height: 68px; padding: 0 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.brand { font: 22px Anton, Impact, sans-serif; letter-spacing: .5px; }.accent { color: var(--accent); }.brand + small { margin-left: 9px; color: var(--gray); font-size: 9px; letter-spacing: 1.4px; }.project-name { color: var(--gray); font-size: 11px; }
.studio { min-height: calc(100vh - 130px); display: grid; grid-template-columns: 328px minmax(560px, 1fr) 220px; }
.slides-panel, .editor-panel { background: var(--panel); padding: 22px 18px; overflow-y: auto; max-height: calc(100vh - 130px); }.editor-panel { border-right: 1px solid var(--line); }.slides-panel { border-left: 1px solid var(--line); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: var(--gray); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; }
.slide-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.slide-item { cursor: pointer; padding: 6px; display: block; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); transition: .15s; }.slide-item:hover, .slide-item.active { border-color: var(--accent); }.slide-thumb-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: var(--bg); }.slide-thumb { width: 100%; height: 100%; display: block; }.slide-thumb-num { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 3px; background: rgba(11,11,13,.8); color: var(--accent); font: 600 11px var(--lw-font-heading); letter-spacing: .4px; }.slide-item.active .slide-thumb-wrap { outline: 2px solid var(--accent); outline-offset: -2px; }
.preview-panel { padding: 22px 30px; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 50% 0%, var(--lw-surface), var(--lw-bg) 60%); }.preview-panel .panel-heading { width: min(100%, 540px); }.canvas-shell { width: min(540px, 100%); aspect-ratio: 4 / 5; box-shadow: var(--lw-shadow-md); background: var(--bg); }.canvas-shell canvas { width: 100%; height: 100%; display: block; }.preview-note { color: var(--lw-text-muted); font-size: 10px; margin-top: 13px; }
.editor-panel label { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: .7px; }.editor-panel textarea, .editor-panel input:not([type="range"]), .editor-panel select { display: block; width: 100%; margin-top: 7px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; outline: none; resize: vertical; color: var(--white); background: var(--bg); font: 500 12px/1.5 var(--lw-font-body); }.editor-panel textarea:focus, .editor-panel input:focus, .editor-panel select:focus { border-color: var(--accent); }.hidden { display: none !important; }
.contacts-editor { padding-bottom: 5px; border-bottom: 1px solid var(--line); }.contacts-editor .image-label { padding-top: 0; }.editor-heading { margin-top: 19px; }
.ai-panel { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 19px; }.ai-panel button { width: 100%; margin-top: 4px; padding: 10px 14px; cursor: pointer; border-radius: 4px; font-size: 11px; font-weight: 700; }.ai-panel button:disabled { opacity: .5; cursor: default; }.ai-status { margin: 8px 0 0; color: var(--gray); font-size: 10px; letter-spacing: .3px; min-height: 12px; }.ai-status.success { color: var(--accent); }
.image-editor { padding-top: 5px; border-top: 1px solid var(--line); }.image-label { padding: 15px 0 8px; color: var(--gray); font-size: 10px; font-weight: 700; letter-spacing: .8px; }.drop-zone { min-height: 118px; padding: 18px; border: 1px dashed var(--lw-border-strong); border-radius: 7px; display: grid !important; place-items: center; cursor: pointer; color: var(--gray); text-align: center; font-size: 11px !important; line-height: 1.6; }.drop-zone.dragover { background: rgba(215,25,32,.1); border-color: var(--accent); color: var(--white); }.drop-zone input { display: none; }.text-button { padding: 9px 0 0; border: 0; background: transparent; color: var(--gray); cursor: pointer; font-size: 10px; text-decoration: underline; }
.image-editor .panel-heading { margin-bottom: 10px; }#imageStatusBadge.status-generated, #imageStatusBadge.status-uploaded { color: var(--accent); }#imageStatusBadge.status-error { color: var(--accent); }.compact-button { width: 100%; margin-bottom: 14px; padding: 9px 10px; cursor: pointer; border-radius: 4px; font-size: 10px; font-weight: 700; }.compact-button:disabled { opacity: .5; cursor: default; }
.position-controls { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.position-controls label { margin: 0; color: var(--gray); }.position-controls output { float: right; color: var(--white); font-weight: 500; }.position-controls input { width: 100%; margin: 7px 0 0; accent-color: var(--accent); }
.export-bar { height: 62px; padding: 0 28px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; align-items: center; gap: 9px; background: var(--panel); }.export-bar button { padding: 10px 14px; cursor: pointer; border-radius: 4px; font-size: 11px; font-weight: 700; }.secondary { color: var(--white); border: 1px solid var(--lw-border-strong); background: var(--lw-surface); }.primary { color: var(--on-accent); border: 1px solid var(--accent); background: var(--accent); }

/* ======================================================================
 * V2.0 — Content Planner & Dashboard. Purely additive: nothing above this
 * line is touched. Reuses existing tokens (--bg/--accent/--white/--gray/
 * --surface/--line), existing .panel-heading/.secondary/.primary/.text-button
 * classes, and the existing .hidden utility for view switching.
 * ================================================================== */
.app-nav { display: flex; gap: 6px; }
.nav-link { padding: 7px 14px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--gray); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.nav-link:hover { color: var(--white); }
.nav-link.active { border-color: var(--accent); color: var(--white); }
.app-view.hidden { display: none !important; }
/* Content OS Phase 26 Part 5 — auth header cluster (login/logout/user badge). Reuses .nav-link's own styling. */
.auth-header-wrap { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.auth-user-badge { color: var(--gray); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.view-inner { max-width: 1040px; margin: 0 auto; padding: 28px 28px 60px; min-height: calc(100vh - 130px); }

/* Dashboard */
.dashboard-view { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dashboard-section { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 20px; }
.dashboard-section-wide { grid-column: 1 / -1; }
.dashboard-plan-summary { color: var(--gray); font-size: 12px; line-height: 1.6; }
.dashboard-plan-summary strong { color: var(--white); }
.dashboard-actions { display: flex; gap: 10px; }
.dashboard-actions button { padding: 10px 16px; cursor: pointer; border-radius: 4px; font-size: 11px; font-weight: 700; }
/* Content OS Slice 2 — storage status panel. Mirrors .dashboard-plan-summary's typography exactly. */
.storage-status-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.storage-status-text { color: var(--gray); font-size: 12px; line-height: 1.6; margin: 0; }
.storage-status-text.status-ok { color: var(--white); }
.storage-status-text.status-warn { color: var(--accent); }
#storageMigrateButton { padding: 8px 14px; cursor: pointer; border-radius: 4px; font-size: 11px; font-weight: 700; }
.dashboard-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

/* Content OS Phase 3E — Media Library. Same card/grid vocabulary as .dashboard-projects/.project-card above,
 * reused rather than reinvented. */
/* POST-GATE REMEDIATION P3 — this toolbar holds SEVEN controls in one row. With a hard 220px floor on the
 * three text inputs it could not fit 1280px and pushed the whole document sideways by 162px (82px at
 * 1440px) — measured by the independent gate, and present on the base commit too. Wrapping is the fix that
 * keeps the desktop appearance (it is still one row wherever it fits) instead of shrinking every control on
 * every screen. The max-width: 900px block below is unchanged: on a phone each control still takes a full
 * row, which wrapping alone would not guarantee. */
.media-library-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.media-library-toolbar input, .media-library-toolbar select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--white); font: 500 12px var(--lw-font-body); }
.media-library-toolbar input { flex: 1 1 200px; min-width: 0; }
.media-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.media-card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); }
.media-thumb { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; cursor: pointer; background: var(--bg); }
.media-thumb:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.media-card-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.media-category-select, .media-tags-input { padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--white); font: 500 11px var(--lw-font-body); }
.media-card-meta { color: var(--gray); font-size: 10px; line-height: 1.4; }

/* Content OS Phase 10 — Jobs monitoring table. Plain table, no new color: reuses the exact same
 * .cal-item-status status-* classes the Calendar already established (grey/red only, Brand System 2.0). */
.jobs-table { width: 100%; border-collapse: collapse; font: 500 12px var(--lw-font-body); }
.jobs-table th, .jobs-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--white); vertical-align: top; }
.jobs-table th { color: var(--gray); font-size: 10px; letter-spacing: .4px; text-transform: uppercase; }
.jobs-id-cell { font-family: monospace; font-size: 11px; color: var(--gray); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-error-cell { color: var(--accent); font-size: 11px; max-width: 260px; }

/* Content OS Phase 11 — Create Content Job form. Same input/select vocabulary as .media-library-toolbar,
 * reused rather than reinvented. */
.content-job-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.content-job-form label { display: flex; flex-direction: column; gap: 4px; font: 500 10px var(--lw-font-body); color: var(--gray); letter-spacing: .3px; text-transform: uppercase; }
.content-job-form input, .content-job-form select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--white); font: 500 12px var(--lw-font-body); text-transform: none; letter-spacing: normal; }
.jobs-pipeline-cell { display: flex; gap: 4px; flex-wrap: wrap; font-size: 10px; }
.jobs-pipeline-stage { padding: 1px 5px; border-radius: 2px; border: 1px solid var(--line); color: var(--gray); }
.jobs-pipeline-stage.stage-completed { color: var(--accent); border-color: var(--accent); }
.jobs-pipeline-stage.stage-failed { color: var(--accent); border-color: var(--accent); background: rgba(215,25,32,.12); }

/* Content OS Phase 12 — Jobs hierarchy. Child (technical) rows get a faint background tint + slightly
 * de-emphasized text so the GENERATE_CONTENT business rows read as the primary content of the table at a
 * glance; the "↳" prefix on the ID cell (added in app.js) reinforces the nesting without needing real
 * indentation, which would break the plain <table> layout. No new colors — reuses --line/--gray only. */
.jobs-row-child { background: rgba(255,255,255,.02); }
.jobs-row-child td { color: var(--gray); }
.jobs-row-child .jobs-id-cell { color: var(--gray); }
.jobs-child-label { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--gray); }
.jobs-open-editor-btn { margin-top: 4px; padding: 0; border: none; background: none; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; cursor: pointer; text-align: left; }
.jobs-open-editor-btn:hover { text-decoration: underline; }

/* Content OS Phase 12 (Human Approval Workflow) — Editor approval bar. Sits inside .export-bar (flex,
 * justify-content:flex-end); margin-right:auto pins it to the left edge while every existing export/save
 * button keeps its current right-aligned position and order, completely unaffected. */
.content-approval-bar { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.content-approval-status { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--gray); }

.project-card { border: 1px solid var(--line); border-radius: 5px; padding: 12px; cursor: pointer; background: var(--surface); }
.project-card:hover { border-color: var(--accent); }
.project-card .project-card-title { color: var(--white); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.project-card .project-card-meta { color: var(--gray); font-size: 10px; }
.dashboard-empty-note { color: var(--lw-text-muted); font-size: 11px; }
.dashboard-empty-note.success { color: var(--accent); }
/* Content OS Phase 36F Part 7 — FEEDBACK STATES. .error reuses the exact same failed-job/rejected tint
 * .cal-item-status.status-failed already uses elsewhere (rgba(215,25,32,.12) on the existing --accent token) —
 * no new color introduced, just applied to the plain-text feedback line these Content Brief actions use. */
.dashboard-empty-note.error { color: var(--accent); background: rgba(215,25,32,.12); padding: 3px 6px; border-radius: 3px; display: inline-block; }

/* Content OS Phase 36F Part 4/6 — REAL DRAFT REVIEW + simplified primary flow. Reuses .project-card/
 * .dashboard-empty-note's existing color tokens (var(--line)/var(--gray)/var(--white)/var(--accent)) — no new
 * palette, just new layout for the Content Brief's own draft-preview and advanced-fields disclosure. */
.brief-draft-header { color: var(--white); font-size: 12px; margin: 8px 0 6px; }
.brief-draft-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 6px; }
.brief-slide { border: 1px solid var(--line); border-radius: 4px; padding: 8px; background: var(--bg); font-size: 10px; color: var(--gray); }
.brief-slide-index { color: var(--gray); font-size: 9px; font-weight: 700; letter-spacing: .5px; margin-bottom: 4px; text-transform: uppercase; }
.brief-slide-field { margin-bottom: 3px; line-height: 1.4; color: var(--white); }
.brief-slide-field strong { color: var(--gray); font-weight: 700; }
.brief-slide-cta { color: var(--accent); }
.brief-slide-image { display: block; max-width: 220px; width: 100%; border-radius: 4px; border: 1px solid var(--line); margin: 6px 0; }
.css-tab-active { color: var(--white) !important; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.css-workflow-guide { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.css-workflow-guide span { border: 1px solid var(--line); border-radius: 4px; padding: 7px 9px; color: var(--gray); font-size: 10px; }
.css-workflow-guide strong { color: var(--accent); margin-right: 4px; }
.css-workflow-next { margin: 7px 0 3px; color: var(--white); font-size: 10px; }
.brief-hero-label { margin-top: 8px; color: var(--white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.brief-image-scope-note { max-width: 620px; margin: 8px 0; padding: 7px 9px; border-left: 2px solid var(--accent); background: rgba(215,25,32,.08); color: var(--gray); font-size: 10px; line-height: 1.4; }
.brief-advanced-details { margin-top: 6px; font-size: 10px; color: var(--gray); flex-basis: 100%; }
.brief-advanced-details summary { cursor: pointer; color: var(--gray); }
.brief-advanced-details select { margin-top: 6px; margin-right: 6px; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--white); font-size: 11px; }
.brand-dna-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; padding: 10px; border: 1px solid var(--line); }
.brand-dna-details summary { grid-column: 1 / -1; font-weight: 700; }
.brand-dna-details input, .brand-dna-details textarea, .brand-dna-details select { box-sizing: border-box; width: 100%; margin: 0; padding: 7px 10px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--white); font-size: 11px; }
.brand-dna-details textarea { min-height: 72px; resize: vertical; }
.brand-dna-details label { display: flex; align-items: center; gap: 8px; }
.brand-dna-details label input[type="color"] { width: 44px; min-width: 44px; padding: 2px; }

/* Planner — create-plan form (reuses editor-panel-style label/input rules, scoped locally since this form
 * lives outside .editor-panel) */
.planner-create { max-width: 480px; }
.planner-create label { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: .7px; color: var(--gray); }
.planner-create input, .planner-create select { display: block; width: 100%; margin-top: 7px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; outline: none; color: var(--white); background: var(--bg); font: 500 12px/1.5 var(--lw-font-body); }
.planner-create input:focus, .planner-create select:focus { border-color: var(--accent); }
.planner-create .form-row { display: flex; gap: 14px; }
.planner-create .form-row label { flex: 1; }
.planner-create .form-row.checkboxes { flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; margin-bottom: 14px; }
.planner-create .form-row.checkboxes label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--white); font-size: 11px; }
.planner-create .form-row.checkboxes .form-group-label { color: var(--gray); font-size: 10px; font-weight: 700; letter-spacing: .7px; margin-bottom: 2px; }
.planner-create > button.primary { width: 100%; padding: 12px 14px; cursor: pointer; border-radius: 4px; font-size: 11px; font-weight: 700; margin-top: 6px; }

/* Planner — plan view (list + calendar) */
.planner-toolbar { display: flex; gap: 12px; }
.planner-toolbar button { text-decoration: none; border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }
.planner-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 16px; }
.plan-item-card { border: 1px solid var(--line); border-radius: 6px; padding: 14px; cursor: pointer; background: var(--panel); }
.plan-item-card:hover { border-color: var(--accent); }
.plan-item-card .item-date { color: var(--accent); font: 700 15px var(--lw-font-heading); letter-spacing: .5px; }
.plan-item-card .item-format { color: var(--gray); font-size: 10px; font-weight: 700; letter-spacing: .8px; margin: 6px 0 4px; }
.plan-item-card .item-title { color: var(--white); font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; min-height: 36px; }
.plan-item-card .item-goal { color: var(--gray); font-size: 10px; letter-spacing: .5px; }
.item-status { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .6px; border: 1px solid var(--line); color: var(--gray); }
.item-status.status-ready, .item-status.status-exported, .item-status.status-published, .item-status.status-scheduled { color: var(--accent); border-color: var(--accent); }
.item-status.status-failed { color: var(--accent); border-color: var(--accent); background: rgba(215,25,32,.12); }
.planner-calendar { margin-top: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.planner-calendar .cal-cell { min-height: 92px; border: 1px solid var(--line); border-radius: 5px; padding: 6px; background: var(--panel); transition: border-color .15s; }
.planner-calendar .cal-cell .cal-daynum { color: var(--gray); font-size: 10px; margin-bottom: 4px; }
.planner-calendar .cal-item { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; margin-bottom: 4px; font-size: 9px; cursor: grab; color: var(--white); line-height: 1.3; display: flex; flex-direction: column; gap: 3px; }
.planner-calendar .cal-item:hover { border-color: var(--accent); }
.planner-calendar .cal-item.dragging { opacity: .4; }
.planner-calendar .cal-head { color: var(--gray); font-size: 9px; font-weight: 700; text-align: center; letter-spacing: .6px; padding-bottom: 2px; }
.planner-calendar .cal-cell.cal-drop-target { border-color: var(--accent); background: rgba(215,25,32,.08); }
.planner-calendar.cal-day-mode { display: block; }
.cal-day-agenda .cal-cell { min-height: 200px; }
.cal-thumb { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 3px; margin-bottom: 2px; background: var(--bg); }
.cal-item-status { align-self: flex-start; padding: 1px 5px; border-radius: 2px; font-size: 8px; font-weight: 700; letter-spacing: .4px; border: 1px solid var(--line); color: var(--gray); }
.cal-item-status.status-published, .cal-item-status.status-scheduled, .cal-item-status.status-ready { color: var(--accent); border-color: var(--accent); }
.cal-item-status.status-failed { color: var(--accent); border-color: var(--accent); background: rgba(215,25,32,.12); }
/* Content OS Phase 3B — IDEA/DRAFT previously fell through to the bare .cal-item-status default (identical
 * for both, no distinction at all). Brand System 2.0 only defines grey/red (no blue/yellow/green anywhere in
 * this file) — "do not change Brand System" rules out adding a new hue, so DRAFT is distinguished from IDEA
 * the same way FAILED is already distinguished from READY above: a subtle tinted background using the
 * existing --gray token, not a new color. IDEA stays the plain outline (the true "nothing has happened yet"
 * baseline state). */
.cal-item-status.status-draft { background: rgba(154,154,154,.16); }
.cal-item-title { cursor: pointer; }
.cal-thumb.cal-thumb-clickable { cursor: pointer; }

/* Planner — calendar toolbar + filters (Content OS Slice 1, Phase 4) */
.planner-calendar-panel { margin-top: 16px; }
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.cal-toolbar-group { display: flex; align-items: center; gap: 6px; }
.cal-range-label { color: var(--white); font: 700 12px var(--lw-font-heading); letter-spacing: .4px; margin-left: 4px; }
.cal-view-btn.active { border-color: var(--accent); color: var(--accent); }
.cal-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.cal-filters label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--gray); }
.cal-filters select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--white); font: 500 11px var(--lw-font-body); }

/* Planner — item detail panel */
.planner-item-detail { margin-top: 20px; border: 1px solid var(--line); border-radius: 6px; padding: 20px; background: var(--panel); }
.planner-item-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.planner-item-fields label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .6px; color: var(--gray); }
.planner-item-fields .full-width { grid-column: 1 / -1; }
.planner-item-fields input, .planner-item-fields select, .planner-item-fields textarea { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; outline: none; color: var(--white); background: var(--bg); font: 500 12px/1.5 var(--lw-font-body); }
.planner-item-fields input:focus, .planner-item-fields select:focus, .planner-item-fields textarea:focus { border-color: var(--accent); }
.planner-item-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.planner-item-actions button { padding: 10px 14px; cursor: pointer; border-radius: 4px; font-size: 11px; font-weight: 700; }
.planner-item-actions button:disabled { opacity: .5; cursor: default; }
.planner-note { color: var(--gray); font-size: 10px; margin: -4px 0 10px; }

/* ======================================================================
 * V2.1 — Strategic Content Planner + Publishing & Media Workflow.
 * Purely additive: nothing above this line is touched. Reuses the same
 * tokens/utility classes as V2.0 (--bg/--accent/--white/--gray/--surface/
 * --line, .panel-heading/.secondary/.primary/.text-button/.hidden,
 * .form-row/.checkboxes/.form-group-label from the planner-create form).
 * ================================================================== */

/* Strategy preview */
.planner-strategy-preview { margin-top: 4px; max-width: 720px; }
.strategy-summary { color: var(--gray); font-size: 12px; line-height: 1.7; margin-bottom: 10px; }
.strategy-summary strong { color: var(--white); }
.strategy-block { margin-bottom: 16px; }
.strategy-warning { color: var(--accent); font-size: 11px; font-weight: 600; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 4px; background: rgba(215,25,32,.08); }
.mix-list { display: flex; flex-direction: column; gap: 6px; }
.mix-row { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 8px; font-size: 11px; color: var(--white); }
.mix-bar { display: block; height: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.mix-bar span { display: block; height: 100%; background: var(--accent); }
.pillar-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pillar-chip { border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; font-size: 10px; font-weight: 700; letter-spacing: .4px; color: var(--white); background: var(--surface); }
.journey-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--white); }
.journey-flow .journey-step { border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; background: var(--surface); }
.journey-flow .journey-arrow { color: var(--gray); }
.cluster-list { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--gray); }
.cluster-row strong { color: var(--white); }
.cluster-row .cluster-funnel { color: var(--lw-text-muted); font-size: 10px; margin-left: 4px; }

/* V2.2 — Strategy Score + rationale + Listing source selector */
.score-total { font: 700 32px var(--lw-font-heading); color: var(--accent); }
.score-checks { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.score-checks .score-ok { color: var(--white); }
.score-checks .score-warn { color: var(--accent); }
.strategy-rationale { color: var(--gray); font-size: 12px; line-height: 1.7; max-width: 640px; }
.listing-source-options { display: flex; gap: 14px; flex-wrap: wrap; }
.listing-source-options label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; color: var(--white); font-size: 11px; }

/* Dashboard — publishing counters + next publications */
.pub-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pub-counter { border: 1px solid var(--line); border-radius: 5px; padding: 12px 8px; text-align: center; background: var(--surface); }
.pub-counter strong { display: block; font: 700 26px var(--lw-font-heading); color: var(--white); }
.pub-counter span { color: var(--gray); font-size: 9px; font-weight: 700; letter-spacing: .6px; }
.next-pub-list { display: flex; flex-direction: column; gap: 8px; }
.next-pub-row { display: grid; grid-template-columns: 1fr 90px 1fr 140px; gap: 10px; font-size: 11px; color: var(--white); border: 1px solid var(--line); border-radius: 5px; padding: 8px 12px; background: var(--surface); }
.next-pub-row .next-pub-when { color: var(--accent); font-weight: 700; }

/* Publishing view */
.pub-tabs button.active { color: var(--white); border-color: var(--accent); }
.prepare-panel { margin-top: 20px; border: 1px solid var(--line); border-radius: 6px; padding: 20px; background: var(--panel); }
.prepare-grid { display: grid; grid-template-columns: 240px 1fr; gap: 20px; }
.prepare-media-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.prepare-thumb { width: 100%; aspect-ratio: 4 / 5; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); }
.prepare-fields label { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: .7px; color: var(--gray); }
.prepare-fields input, .prepare-fields textarea { display: block; width: 100%; margin-top: 7px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; outline: none; color: var(--white); background: var(--bg); font: 500 12px/1.5 var(--lw-font-body); }
.prepare-fields textarea { margin-bottom: 10px; resize: vertical; }
.caption-tabs { display: flex; gap: 14px; margin-bottom: 8px; }
.caption-tabs .caption-tab { padding: 0; text-decoration: none; color: var(--gray); }
.caption-tabs .caption-tab.active { color: var(--white); border-bottom: 2px solid var(--accent); }
.quick-schedule { display: flex; gap: 10px; margin: 4px 0 10px; }
.quick-schedule button { text-decoration: none; border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }

/* V1.9 — Real Auction Vehicle Pipeline (LISTING-001). Reuses .ai-panel/.drop-zone/.image-label/.secondary
 * tokens already defined above — only the field-grid and photo-thumbnail-grid layouts are new. */
.auction-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.auction-field-grid label { font-size: 9px; margin-bottom: 8px; }
.auction-thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.auction-thumb { position: relative; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg); }
.auction-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auction-thumb.low-quality { border-color: var(--accent); }
.auction-thumb.acceptable-quality { border-color: #d7a419; }
.auction-thumb-label { position: absolute; left: 3px; bottom: 3px; padding: 1px 5px; border-radius: 3px; background: rgba(11,11,13,.8); color: var(--on-accent); font-size: 8px; letter-spacing: .3px; text-transform: uppercase; }
.auction-empty-note { color: var(--gray); font-size: 10px; grid-column: 1 / -1; }
.auction-debug { background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; margin: 6px 0 10px; font: 10px/1.6 monospace; color: var(--gray); white-space: pre-wrap; }

/* ======================================================================
 * Content OS Phase 13 — Automotive Asset Generation Pipeline. Reuses existing tokens (--bg/--accent/--white/
 * --gray/--surface/--line), .panel-heading/.editor-heading/.text-button/.hidden — no new colors.
 * ================================================================== */
.generated-assets-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.generated-assets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.generated-asset-tile { position: relative; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: var(--bg); aspect-ratio: 4 / 3; cursor: pointer; }
.generated-asset-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.generated-asset-tile:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.generated-asset-tile.pending { cursor: default; display: flex; align-items: center; justify-content: center; color: var(--gray); font-size: 9px; letter-spacing: .3px; text-transform: uppercase; text-align: center; padding: 6px; }
.generated-asset-status { position: absolute; left: 3px; bottom: 3px; padding: 1px 5px; border-radius: 3px; background: rgba(11,11,13,.8); color: var(--on-accent); font-size: 8px; letter-spacing: .3px; text-transform: uppercase; }
.generated-assets-empty-note { color: var(--gray); font-size: 10px; }

/* ==================================================================
 * Content OS Phase 14 — Vehicle Info panel, quick-action jobs, suggestions, QA warning, jobs failed counter.
 * Reuses the exact same tokens/panel classes as Phase 13 above — no new colors introduced.
 * ================================================================== */
.vehicle-info-body { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.vehicle-info-row { font-size: 11px; color: var(--white); }
.vehicle-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.suggestion-row { display: flex; align-items: center; gap: 8px; }
.suggestion-kind { font-size: 8px; letter-spacing: .3px; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 1px 4px; flex-shrink: 0; }
.suggestion-text { flex: 1; font-size: 10px; color: var(--gray); }
.content-qa-warning { color: var(--accent); font-size: 10px; max-width: 320px; }
.jobs-failed-count { color: var(--accent); }

/* ==================================================================
 * Content OS Phase 15A — Sales Content Factory: package list rows, Sales Assistant panel.
 * Reuses the exact same tokens/panel classes as Phase 13/14 above — no new colors introduced.
 * ================================================================== */
.pkg-items-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.pkg-item-row { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.pkg-item-label { flex: 1; color: var(--gray); }

/* ==================================================================
 * Content OS Phase 15B — Sales Flow Polish: package quick-nav, objection history, sales dashboard metrics.
 * Reuses the exact same tokens/panel classes as Phase 13/14/15A above — no new colors introduced.
 * ================================================================== */
.pkg-quick-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Brief, purely cosmetic flash so a "Otwórz pakiet" jump from the Editor's Sales Assistant panel is easy to
 * spot among the (possibly long) Sales Content Packages list — no color outside the existing --accent token. */
.highlight-flash { animation: pkgHighlightFlash 1.6s ease-out; }
@keyframes pkgHighlightFlash { 0% { background: rgba(255, 214, 10, .25); } 100% { background: transparent; } }
.objection-history-group { margin-bottom: 10px; }
.objection-history-group:last-child { margin-bottom: 0; }
.objection-history-heading { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.objection-history-row { align-items: flex-start; }
.objection-history-date { font-size: 9px; color: var(--gray); min-width: 62px; flex-shrink: 0; padding-top: 1px; }
.sales-dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }

/* ==================================================================
 * Content OS Phase 15C — Production Readiness: Global Search, Sales Workspace, Jobs retry action.
 * Reuses the exact same tokens/panel classes as every prior phase above — no new colors introduced.
 * ================================================================== */
.global-search-wrap { position: relative; flex: 1; max-width: 340px; margin: 0 12px; }
.global-search-wrap input { width: 100%; padding: 7px 10px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--white); font-size: 11px; }
.global-search-results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; max-height: 340px; overflow-y: auto; z-index: 50; padding: 4px; }
.global-search-result { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; }
.global-search-result:hover { background: var(--bg); }
.global-search-result-kind { font-size: 8px; letter-spacing: .3px; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 1px 4px; flex-shrink: 0; }
.global-search-result-label { flex: 1; color: var(--white); }
.global-search-result-meta { color: var(--gray); font-size: 10px; }

/* ==================================================================
 * Content OS Phase 16 — CRM & Lead Automation Core. Same panel/card/token vocabulary as every section above —
 * no new colors, no new layout primitive beyond the existing .dashboard-projects grid + .project-card.
 * ================================================================== */
.dashboard-subheading { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gray); margin: 10px 0 6px; }
.quick-lead-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.quick-lead-form input { flex: 1 1 140px; min-width: 110px; padding: 7px 10px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--white); font-size: 11px; }
.customer-status-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.customer-status-row select { flex: 1; padding: 5px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--white); font-size: 10px; }

/* ==================================================================
 * Content OS Phase 17 — LOADWISE SALES OPERATING SYSTEM. Same panel/card/token vocabulary as every section
 * above — the Pipeline Board's columns are the one new layout primitive (a horizontal-scroll flex of vertical
 * .dashboard-projects-style stacks), everything else reuses .project-card/.dashboard-projects/.pub-counter. */
.priority-badge { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; border-radius: 3px; padding: 1px 5px; margin-left: 6px; }
.priority-badge.priority-low { color: var(--gray); border: 1px solid var(--line); }
.priority-badge.priority-medium { color: var(--white); border: 1px solid var(--gray); }
.priority-badge.priority-high { color: var(--accent); border: 1px solid var(--accent); }
.activity-timeline { display: flex; flex-direction: column; gap: 2px; }
.activity-timeline-item { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.activity-timeline-item:last-child { border-bottom: none; }
.activity-timeline-date { color: var(--gray); font-size: 10px; min-width: 108px; flex-shrink: 0; }
.activity-timeline-message { color: var(--white); }
/* ============================ DEAL PIPELINE — OPERATIONAL KANBAN ============================
 * The board was never the reason only two or three stages fitted on a 34" monitor: `.view-inner` caps every
 * view at 1040px, so the board was handed ~984px whatever the display. Eight stages at any readable column
 * width need ~1500px, so no amount of column shrinking could have worked -- the cap had to go first, and it
 * goes for THIS VIEW ONLY. The global rule is untouched, because every other screen is a reading surface
 * where a 1040px measure is the right call; a Kanban is the exception, not the new default. */
#dealPipelineView .view-inner { max-width: none; width: 100%; }
/* MEASURED, not assumed: with the cap lifted the board was still only 806px wide at a 1920px viewport,
 * because `.dashboard-view` is a two-column grid (styles.css:91) and the board is a direct grid child that
 * never carried `.dashboard-section-wide`. It was taking one of the two columns. Spanning it is what
 * actually hands the Kanban the full width. */
#dealPipelineView .pipeline-board { grid-column: 1 / -1; }
/* The BOARD owns the horizontal overflow, not the document: a page that scrolls sideways moves the nav and
 * the headings too, which is what makes a wide Kanban feel broken rather than wide. overflow-y stays
 * visible so a tall column is still governed by normal page scrolling. */
.pipeline-board { display: flex; gap: 8px; overflow-x: auto; overflow-y: visible; padding-bottom: 8px; }
/* 180px, slightly WIDER than the 170px it replaces. Once the cap is gone the constraint is no longer
 * pixels, so the column can afford to be readable rather than merely narrow. */
/* min-width:0 is load-bearing. A flex item defaults to min-width:auto, so the column cannot shrink below
 * its own min-content -- and the stage <select> sizes to its LONGEST option, which since the P0 label fix
 * reads "PIERWSZY KONTAKT — klient odpowiedział". Measured: columns rendered at 275px against a declared
 * basis of 180px, and only two fitted. The basis is honoured only once the automatic minimum is released. */
.pipeline-column { min-width: 0; flex: 0 0 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.pipeline-column-heading { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.pipeline-card { border: 1px solid var(--line); border-radius: 5px; padding: 8px; background: var(--bg); }
.pipeline-card .project-card-title { color: var(--white); font-size: 11px; font-weight: 700; margin-bottom: 3px; }
.pipeline-card .project-card-meta { color: var(--gray); font-size: 9px; margin-bottom: 2px; }
/* Content OS Phase 19 Part 2 — Deal Pipeline card inline edit row (value/probability/expectedCloseDate),
 * same compact-input visual language as .quick-lead-form input / .customer-status-row select above. */
/* Secondary actions -- open the customer, the two AI analyses and their verbose output -- collapse behind a
 * native <details>. Stage editing and Zapisz deliberately stay OUTSIDE it: moving a deal along the funnel is
 * the primary act on this screen and must stay one click, not two. */
.pipeline-card .deal-more { margin-top: 6px; }
.pipeline-card .deal-more > summary { cursor: pointer; color: var(--gray); font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; list-style: none; padding: 2px 0; }
.pipeline-card .deal-more > summary::-webkit-details-marker { display: none; }
.pipeline-card .deal-more > summary::before { content: '▸ '; }
.pipeline-card .deal-more[open] > summary::before { content: '▾ '; }
.pipeline-card .deal-more > summary:hover { color: var(--white); }
.pipeline-card .deal-more .text-button { display: block; margin-top: 4px; }
/* Forecast + revenue counters, compacted for THIS view only. .pub-counter is shared with Publications, Jobs
 * and the Revenue Dashboard elsewhere, so an unscoped size change would quietly reformat screens nobody
 * asked us to touch. The numbers, labels and arithmetic are untouched -- only the space they occupy. */
#dealPipelineView .pub-counter { padding: 6px 8px; }
#dealPipelineView .pub-counter strong { font-size: 16px; line-height: 1.2; }
#dealPipelineView .pub-counter span { font-size: 8px; letter-spacing: .4px; }
#dealPipelineView #dealForecastCounters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The same automatic-minimum release for the controls inside a card: without it the select and the three
 * number/date inputs set the column's floor. The <select> is additionally clamped, because its intrinsic
 * width follows its longest option regardless of the box it sits in. */
.pipeline-card .deal-card-inputs input, .pipeline-card .deal-card-inputs select { min-width: 0; max-width: 100%; }
.pipeline-card .deal-stage-select { width: 100%; flex: 1 1 100%; }
.pipeline-card .deal-card-inputs { min-width: 0; }
/* Measured on the 1920x1080 screenshot: with only the TILES compacted the board still did not begin until
 * ~630px down a 1080px viewport, leaving under half the screen for the funnel itself. The tiles were never
 * the bulk -- the three 20px-padded `.dashboard-section` wrappers and an 18px heading margin were, and the
 * five revenue counters wrapped onto a second row in a four-column grid. All scoped to this view. */
/* THE ACTUAL CAUSE of the vertical waste, found by reading computed style rather than inferring it: the
 * section's content box is only 50px, but it RENDERED at 119px. `.view-inner` carries
 * `min-height: calc(100vh - 130px)` (styles.css:88), so this grid is always taller than its content, and a
 * grid's default `align-content: stretch` spreads the surplus across every auto row -- inflating all three
 * header blocks and pushing the board far down the page. Padding was never the problem. */
#dealPipelineView .dashboard-view { align-content: start; }
#dealPipelineView .dashboard-section { padding: 10px 12px; margin-bottom: 8px; }
#dealPipelineView .panel-heading { margin-bottom: 6px; }
/* Five counters, five columns: in the shared four-column grid the fifth wrapped and doubled the block's
 * height for one tile. */
#dealPipelineView #dealRevenueCounters { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#dealPipelineView #dealForecastCounters { gap: 8px; }

.deal-card-inputs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.deal-card-inputs input, .deal-card-inputs select { flex: 1 1 70px; min-width: 60px; padding: 5px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--white); font-size: 9px; }
.action-center-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.action-center-item .action-center-label { flex: 1; min-width: 160px; }
.recent-search-chip { display: inline-block; font-size: 10px; color: var(--gray); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; margin: 2px 4px 2px 0; cursor: pointer; }
.recent-search-chip:hover { border-color: var(--accent); color: var(--white); }

/* Increment A — export-bar status line (font-readiness gate + export result). Deliberately a plain rule:
   it adds no responsive breakpoint and no new focus styling, so the existing static CSS baselines that
   other tests assert on stay exactly as they were. */
.export-status { font-size: 12px; color: var(--gray); margin-left: 8px; align-self: center; max-width: 460px; }
/* Success deliberately does NOT reuse var(--accent): elsewhere in this file both .success and .error tint
   with the brand red, which is fine for a single-state note but would make "export finished" and "export
   blocked" indistinguishable on the one control that must never be misread. */
.export-status.success { color: #4CAF50; }
.export-status.error { color: var(--accent); }

/* Increment B — media controls. Plain rules only: no new responsive breakpoint and no new focus styling, so
   the static CSS baselines other tests assert on are unchanged. */
#dropText { white-space: pre-line; }   /* preserves the two-line hint without markup */
.media-file-name { margin: 6px 0 0; font-size: 11px; color: var(--gray); word-break: break-all; }
.media-status { margin: 4px 0 0; font-size: 11px; color: var(--gray); min-height: 12px; }
.media-status.error { color: var(--accent); }

/* Correction B.1 — save/sync truth line, sitting next to the export status in the editor footer. */
.persistence-status { font-size: 12px; color: #7c8698; align-self: center; }
.persistence-status.error { color: #c0392b; font-weight: 600; }

/* Increment C — Create in 3 clicks. Layout only; no new palette, no theme fork. */
.create-step { margin: 0 0 28px; }
.create-step h2 { font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: #7c8698; margin: 0 0 12px; }
.create-type-list { display: flex; flex-wrap: wrap; gap: 12px; }
.create-type { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 190px; padding: 14px 16px; border: 1px solid #d8dee8; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; }
.create-type strong { font-size: 15px; }
.create-type small { color: #7c8698; }
.create-type.selected { border-color: #1d2b3a; box-shadow: 0 0 0 2px rgba(29, 43, 58, 0.12); }
.create-field { display: block; margin: 0 0 14px; font-size: 13px; color: #4a5464; }
.create-field textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #d8dee8; border-radius: 8px; font: inherit; resize: vertical; }
.create-photo-count { margin: 8px 0 0; font-size: 12px; color: #7c8698; }
.create-photo-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.create-photo { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 104px; }
.create-photo img { width: 104px; height: 78px; object-fit: cover; border-radius: 6px; border: 1px solid #d8dee8; }
.create-photo span { font-size: 11px; color: #7c8698; max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.create-status { margin: 12px 0; font-size: 13px; color: #4a5464; }
.create-status.error { color: #c0392b; font-weight: 600; }
.create-status.success { color: #1e8449; }
.create-result { border-top: 1px solid #e6eaf0; padding-top: 22px; }
.create-preview { display: block; max-width: 340px; width: 100%; border-radius: 10px; border: 1px solid #d8dee8; }
.create-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.create-thumb { width: 72px; border-radius: 5px; border: 1px solid #d8dee8; cursor: pointer; }
.create-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }

/* MASTER REFERENCE REBUILD v1 — public advertising surface only. */
body.public-landing-active,
body.public-auth-active { min-width: 0; }
body.public-landing-active { background: #f6f8fb; }
body.public-landing-active .app-header,
body.public-auth-active .app-header {
  position: relative; z-index: 30; height: 72px; padding: 0 clamp(22px, 3vw, 48px);
  border-bottom: 1px solid rgba(21, 34, 50, .08); background: rgba(255,255,255,.95); color: #0b1018;
}
body.public-landing-active .app-nav,
body.public-landing-active .global-search-wrap,
body.public-landing-active .project-name,
body.public-auth-active .app-nav,
body.public-auth-active .global-search-wrap,
body.public-auth-active .project-name { display: none !important; }
body.public-landing-active .brand + small,
body.public-auth-active .brand + small { color: #8090a4; }
body.public-landing-active .auth-header-wrap { margin-left: auto; }
body.public-auth-active .auth-header-wrap { margin-left: auto; }
body.public-landing-active .nav-link,
body.public-auth-active .nav-link { color: #141b25; border-color: rgba(20,27,37,.18); background: rgba(255,255,255,.72); }
body.public-landing-active #navLoginButton,
body.public-auth-active #navLoginButton { color: #fff; background: #0b1018; border-color: #0b1018; }
.public-invite-button { display: none; }
body.public-landing-active .public-invite-button,
body.public-auth-active .public-invite-button { display: inline-flex; }

.landing-view { min-height: calc(100vh - 72px); overflow: hidden; color: #121923; background: #f5f8fc; }
.landing-hero {
  position: relative; isolation: isolate; min-height: 720px; padding: 108px clamp(24px, 7vw, 112px) 34px;
  background-image:
    linear-gradient(90deg, rgba(247,250,253,.08), rgba(247,250,253,.04) 56%, rgba(247,250,253,.02)),
    url('assets/loadwise-studio-hero-master-v1.webp');
  background-position: center center; background-size: cover;
}
.landing-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(244,248,252,.08) 55%, rgba(244,248,252,.94) 100%);
}
.landing-atmosphere {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 53% 35%, rgba(255,255,255,.9), rgba(255,255,255,.42) 28%, transparent 53%);
}
.landing-copy { position: relative; z-index: 5; width: min(650px, 54vw); margin: 0 auto; text-align: center; }
.landing-eyebrow {
  font: 700 clamp(10px, .9vw, 13px)/1.2 var(--lw-font-body); letter-spacing: .34em;
  text-transform: uppercase; color: #6f7f92; margin: 0 0 20px;
}
.landing-title {
  font: 700 clamp(54px, 6.1vw, 94px)/.94 var(--lw-font-heading); letter-spacing: -.065em;
  text-transform: uppercase; white-space: nowrap; color: #06080b; margin: 0 0 24px;
  text-shadow: 0 2px 20px rgba(255,255,255,.7);
}
.landing-title em { color: #e10d17; font-style: normal; }
.landing-lede {
  font: 700 clamp(17px, 1.55vw, 23px)/1.45 var(--lw-font-body); color: #263343;
  margin: 0 auto 30px; max-width: 32em; text-shadow: 0 1px 10px rgba(255,255,255,.9);
}
.landing-actions { display: flex; gap: 14px; justify-content: center; margin-bottom: 12px; }
.landing-actions button {
  min-width: 210px; min-height: 54px; border-radius: 10px; padding: 13px 24px; cursor: pointer;
  font: 700 14px var(--lw-font-body); box-shadow: 0 12px 35px rgba(23,35,49,.12);
}
.landing-actions .primary { border-color: #e10d17; background: linear-gradient(135deg,#ed1722,#ce0811); }
.landing-actions .secondary { color: #131b25; border-color: rgba(20,31,43,.4); background: rgba(255,255,255,.64); backdrop-filter: blur(14px); }
.landing-note { font: 500 12px var(--lw-font-body); color: #6d7b8c; margin: 0; }
.landing-side-manifesto {
  position: absolute; left: clamp(24px, 4.8vw, 76px); top: 54px; display: flex; flex-direction: column;
  gap: 6px; color: rgba(67,86,108,.42); font: 500 19px/1.35 var(--lw-font-body); letter-spacing: .22em;
}
.landing-side-manifesto::after { content: ''; width: 96px; height: 2px; margin-top: 10px; background: #e10d17; }
.landing-glass-card {
  position: absolute; z-index: 4; width: 210px; padding: 19px 20px; border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px; background: linear-gradient(135deg,rgba(255,255,255,.7),rgba(242,247,252,.34));
  box-shadow: 0 22px 55px rgba(33,55,78,.15), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(18px);
  transform: perspective(800px) rotateY(-4deg); color: #243346;
}
.landing-brand-card { left: 5.5%; bottom: 250px; }
.landing-result-card { right: 3.5%; top: 80px; }
.landing-card-kicker { display: block; color: #e10d17; font: 700 9px var(--lw-font-body); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.landing-glass-card strong { font: 700 17px/1.25 var(--lw-font-heading); }
.brand-swatch-row { display: flex; gap: 6px; margin-top: 14px; }
.brand-swatch-row i { width: 24px; height: 7px; border-radius: 6px; background: #0b1018; }
.brand-swatch-row i:nth-child(2) { background: #e10d17; }.brand-swatch-row i:nth-child(3) { background: #8090a4; }.brand-swatch-row i:nth-child(4) { background: #fff; border: 1px solid #d9e0e8; }
.landing-mini-chart { position: relative; height: 34px; margin-top: 12px; border-left: 1px solid #afbbc8; border-bottom: 1px solid #afbbc8; }
.landing-mini-chart::before { content: ''; position: absolute; inset: 9px 3px 5px 8px; border-top: 3px solid #e10d17; transform: skewY(-17deg); }

.landing-steps {
  position: absolute; z-index: 6; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(900px, 76vw);
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; list-style: none; padding: 0; margin: 0;
}
.landing-steps li {
  min-height: 158px; padding: 18px 12px; border: 1px solid rgba(255,255,255,.8); border-radius: 17px;
  background: linear-gradient(145deg,rgba(255,255,255,.76),rgba(250,252,255,.42));
  box-shadow: 0 18px 45px rgba(36,58,82,.11), inset 0 1px rgba(255,255,255,.95); backdrop-filter: blur(17px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.landing-step-icon { color: #1f2b39; font-size: 24px; line-height: 1; }
.landing-step-num { color: #e10d17; font: 700 18px/1 var(--lw-font-heading); }
.landing-steps strong { color: #111923; font: 700 16px var(--lw-font-body); text-transform: uppercase; }
.landing-steps small { color: #647386; font: 500 12px var(--lw-font-body); }
.landing-step-done { border-color: rgba(225,13,23,.35) !important; }
.landing-benefits {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; max-width: 1240px; margin: 0 auto; padding: 34px 48px 24px;
}
.landing-benefits > div { display: flex; gap: 14px; align-items: center; }
.landing-benefits > div > span { color: #111923; font: 700 30px var(--lw-font-heading); }
.landing-benefits p { display: flex; flex-direction: column; margin: 0; }
.landing-benefits strong { color: #111923; font-size: 13px; }.landing-benefits small { color: #758497; font-size: 11px; }
.landing-footnote {
  color: #8492a3; font: 600 9px var(--lw-font-body); letter-spacing: .34em; text-transform: uppercase;
  text-align: center; margin: 0; padding: 10px 20px 28px;
}

@media (max-width: 1100px) {
  .studio { grid-template-columns: 300px minmax(500px, 1fr) 190px; }
  .preview-panel { padding-left: 18px; padding-right: 18px; }
  .prepare-grid { grid-template-columns: 1fr; }
  body.public-landing-active .app-header { height: 64px; padding: 0 18px; }
  body.public-landing-active .brand + small { display: none; }
  body.public-landing-active .public-invite-button { display: none; }
  .landing-view { min-height: calc(100vh - 64px); }
  .landing-hero {
    min-height: 720px; padding: 76px 20px 24px; background-position: 63% center;
    background-image: linear-gradient(180deg,rgba(255,255,255,.52),rgba(246,249,252,.22) 50%,rgba(246,249,252,.96)),url('assets/loadwise-studio-hero-master-v1.webp');
  }
  .landing-atmosphere { background: radial-gradient(circle at 48% 26%,rgba(255,255,255,.95),rgba(255,255,255,.52) 43%,transparent 68%); }
  .landing-copy { width: 100%; }
  .landing-eyebrow { font-size: 9px; letter-spacing: .22em; margin-bottom: 13px; }
  .landing-title { font-size: 42px; white-space: normal; margin-bottom: 16px; }
  .landing-lede { font-size: 15px; line-height: 1.45; max-width: 24em; margin-bottom: 22px; }
  .landing-actions { flex-direction: column; align-items: center; gap: 9px; }
  .landing-actions button { width: min(100%,330px); min-height: 48px; }
  .landing-side-manifesto,.landing-result-card { display: none; }
  .landing-brand-card { display: block; left: 20px; right: auto; bottom: 204px; width: 168px; padding: 13px 15px; }
  .landing-brand-card strong { font-size: 14px; }
  .landing-steps { left: 20px; right: 20px; bottom: 22px; transform: none; width: auto; grid-template-columns: 1fr; }
  .landing-steps li { display: none; }
  .landing-steps li:first-child { display: flex; min-height: 142px; width: 152px; margin-left: auto; }
  .landing-lede br { display: none; }
  .landing-benefits { grid-template-columns: 1fr; padding: 28px 20px 12px; gap: 22px 14px; }
  .landing-footnote { padding-bottom: 24px; }
}

/* LOADWISE VISUAL SYSTEM v1 — scoped client workspace.
 * The server-derived ALPHA_TESTER surface is the only switch. OWNER/operator views retain their
 * established dense dark workspace, while the client receives the same light-tech language as public. */
:root {
  --lw-bg: #f4f7fb; --lw-bg-soft: #eef3f8; --lw-surface: #ffffff;
  --lw-surface-glass: rgba(255,255,255,.78); --lw-surface-elevated: rgba(255,255,255,.96);
  --lw-text: #0b1119; --lw-text-secondary: #3f4b5d; --lw-text-muted: #7a8798;
  --lw-red: #e21a22; --lw-red-soft: rgba(226,26,34,.09); --lw-red-border: rgba(226,26,34,.28);
  --lw-border: rgba(27,42,60,.12); --lw-border-strong: rgba(27,42,60,.2);
  --lw-shadow-sm: 0 8px 24px rgba(28,45,68,.07); --lw-shadow-md: 0 18px 48px rgba(28,45,68,.11);
  --lw-shadow-lg: 0 32px 80px rgba(31,50,74,.15); --lw-glow-red: 0 14px 32px rgba(226,26,34,.2);
  --lw-glow-cool: 0 24px 60px rgba(83,129,174,.14);
  --lw-radius-sm: 8px; --lw-radius-md: 14px; --lw-radius-lg: 22px; --lw-radius-xl: 30px;
  --lw-space-1: 6px; --lw-space-2: 10px; --lw-space-3: 16px; --lw-space-4: 24px; --lw-space-5: 36px; --lw-space-6: 56px;
  --lw-motion-fast: 160ms; --lw-motion-normal: 260ms;
}
.lw-kicker { margin: 0 0 10px; color: var(--lw-text-muted); font: 700 11px/1.2 var(--lw-font-body); letter-spacing: .22em; }

/* VISUAL SYSTEM v1 — status tokens. The Create status line is the one thing a paying customer
   watches during the two anxious moments (generation and download), and it was the only
   customer-facing surface still painted with raw hex outside the token system. Scoped to the alpha
   client so the operator app renders byte-identically. */
body.alpha-client-active { --lw-success: #1a7f4b; --lw-danger: #c0272d; }
body.alpha-client-active .create-status { color: var(--lw-text-secondary); font-size: 13.5px; }
body.alpha-client-active .create-status.error { color: var(--lw-danger); font-weight: 600; }
body.alpha-client-active .create-status.success { color: var(--lw-success); font-weight: 600; }

body.alpha-client-active {
  min-width: 0; overflow-x: hidden; color: var(--lw-text); background:
    radial-gradient(circle at 88% 8%, rgba(181,213,241,.26), transparent 26%),
    linear-gradient(180deg, #f9fbfd 0, var(--lw-bg) 100%);
}
body.alpha-client-active::before {
  content: ''; position: fixed; inset: 72px 0 0; z-index: -1; pointer-events: none; opacity: .32;
  background-image: linear-gradient(rgba(58,91,126,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(58,91,126,.045) 1px, transparent 1px);
  background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
body.alpha-client-active .app-header {
  position: sticky; top: 0; z-index: 50; height: 72px; padding: 0 clamp(20px,4vw,60px); gap: clamp(20px,3vw,48px);
  color: var(--lw-text); border-bottom: 1px solid var(--lw-border); background: rgba(255,255,255,.9);
  box-shadow: 0 5px 24px rgba(30,47,68,.05); backdrop-filter: blur(22px);
}
body.alpha-client-active .brand + small { color: var(--lw-text-muted); }
body.alpha-client-active .app-nav { flex: 1; justify-content: center; gap: 4px; }
body.alpha-client-active .nav-link {
  min-height: 40px; padding: 9px 15px; border: 0; border-radius: 10px; color: var(--lw-text-secondary); background: transparent;
  transition: color var(--lw-motion-fast), background var(--lw-motion-fast), transform var(--lw-motion-fast);
}
body.alpha-client-active .nav-link:hover { color: var(--lw-text); background: var(--lw-bg-soft); transform: translateY(-1px); }
body.alpha-client-active .nav-link.active { color: var(--lw-text); background: var(--lw-surface); box-shadow: var(--lw-shadow-sm); }
body.alpha-client-active .global-search-wrap,
body.alpha-client-active .project-name,
body.alpha-client-active #navInviteButton,
body.alpha-client-active #navLoginButton { display: none !important; }
body.alpha-client-active .auth-header-wrap { margin-left: 0; }
body.alpha-client-active .auth-user-badge { color: var(--lw-text-secondary); }
body.alpha-client-active #navLogoutButton { border: 1px solid var(--lw-border); }

body.alpha-client-active .view-inner,
body.alpha-client-active #createView > .view-header,
body.alpha-client-active #createView > .create-step,
body.alpha-client-active #createView > .create-result,
body.alpha-client-active #alphaProjectsView > .view-header {
  width: min(1180px, calc(100% - 48px)); max-width: 1180px; margin-left: auto; margin-right: auto; box-sizing: border-box;
}
body.alpha-client-active .view-inner { padding: 42px 0 72px; }
body.alpha-client-active .view-header { padding: 48px 0 24px; border: 0; color: var(--lw-text); background: transparent; }
body.alpha-client-active .view-header h1 { margin: 0 0 8px; font: 700 clamp(34px,4vw,54px)/1 var(--lw-font-heading); letter-spacing: -.045em; }
body.alpha-client-active .view-subtitle { color: var(--lw-text-secondary); font-size: 15px; }
body.alpha-client-active .dashboard-view { display: block; }
body.alpha-client-active .dashboard-section {
  margin-bottom: 22px; padding: 24px; color: var(--lw-text); border: 1px solid var(--lw-border); border-radius: var(--lw-radius-lg);
  background: var(--lw-surface-glass); box-shadow: var(--lw-shadow-sm); backdrop-filter: blur(18px);
}
body.alpha-client-active #alphaHomeSection { padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
body.alpha-client-active #dashboardView .dashboard-section:not(#alphaHomeSection) { display:none !important; }
body.alpha-client-active .panel-heading { margin: 34px 0 16px; color: var(--lw-text); border: 0; }
body.alpha-client-active .panel-heading > span:first-child { font-size: 12px; letter-spacing: .13em; }
body.alpha-client-active .dashboard-empty-note,
body.alpha-client-active .project-card-meta { color: var(--lw-text-muted); }

.alpha-home-hero {
  position: relative; isolation: isolate; min-height: 290px; overflow: hidden; display: grid; grid-template-columns: 1.35fr .65fr;
  align-items: center; gap: 36px; padding: clamp(36px,5vw,64px); border: 1px solid rgba(255,255,255,.7); border-radius: var(--lw-radius-xl);
  /* FINAL OWNER VISUAL CORRECTION — the authenticated client HOME must read the same for a marketing
   agency, a clinic, a logistics firm and a car importer, so it uses an industry-neutral plate
   (generated by tools/generate-alpha-home-hero.js). The approved automotive master scene stays
   on the PUBLIC landing and the login screen, which are out of scope for this correction. */
  background: linear-gradient(90deg, rgba(250,252,255,.96) 0%, rgba(250,252,255,.84) 54%, rgba(247,250,253,.42) 100%), url('assets/loadwise-alpha-home-neutral-v1.webp') center 45% / cover;
  box-shadow: var(--lw-shadow-lg);
}
.alpha-home-hero::after { content:''; position:absolute; inset:0; z-index:-1; background: radial-gradient(circle at 73% 42%, rgba(255,255,255,.05), rgba(116,154,190,.16)); }
.alpha-home-hero h1 { margin: 0; max-width: 660px; color:var(--lw-text); font: 700 clamp(38px,5vw,64px)/.98 var(--lw-font-heading); letter-spacing: -.055em; }
.alpha-home-hero > div > p:not(.lw-kicker) { max-width: 570px; margin: 18px 0 26px; color: var(--lw-text-secondary); font-size: 15px; }
.alpha-home-hero .primary { min-height: 50px; padding: 0 24px; border-radius: 11px; box-shadow: var(--lw-glow-red); }
.alpha-home-brand-card {
  justify-self: end; width: min(260px,100%); padding: 25px; border: 1px solid rgba(255,255,255,.86); border-radius: 20px;
  background: rgba(255,255,255,.62); box-shadow: var(--lw-shadow-md); backdrop-filter: blur(20px);
}
.alpha-home-brand-card span { display:block; margin-bottom:9px; color:var(--lw-text-muted); font-size:10px; font-weight:700; letter-spacing:.16em; }
.alpha-home-brand-card strong { display:block; margin-bottom:20px; font:700 22px/1.15 var(--lw-font-heading); }
.alpha-home-brand-card i { display:inline-block; width:34px; height:7px; margin-right:5px; border-radius:8px; background:#0b1119; }
.alpha-home-brand-card i:nth-of-type(2) { background:var(--lw-red); }.alpha-home-brand-card i:nth-of-type(3) { background:#9fb2c5; }

body.alpha-client-active .create-type-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body.alpha-client-active .primary { width:max-content; min-height:44px; padding:11px 20px; color:#fff; border:1px solid var(--lw-red); border-radius:10px; background:var(--lw-red); box-shadow:var(--lw-glow-red); }
body.alpha-client-active .secondary { min-height:42px; padding:10px 16px; color:var(--lw-text); border:1px solid var(--lw-border-strong); border-radius:10px; background:#fff; }
body.alpha-client-active .text-button { color:var(--lw-text-secondary); }
body.alpha-client-active .create-type {
  min-width:0; min-height:118px; justify-content:flex-end; position:relative; padding:22px; color:var(--lw-text); border:1px solid var(--lw-border);
  border-radius:var(--lw-radius-md); background:var(--lw-surface-elevated); box-shadow:var(--lw-shadow-sm);
  transition:transform var(--lw-motion-normal), box-shadow var(--lw-motion-normal), border-color var(--lw-motion-normal);
}
body.alpha-client-active .create-type::before { content:'✦'; position:absolute; top:19px; right:20px; color:var(--lw-red); font-size:20px; }
body.alpha-client-active .create-type:hover { transform:translateY(-4px); border-color:var(--lw-red-border); box-shadow:var(--lw-shadow-md); }
body.alpha-client-active .create-type.selected { border-color:var(--lw-red); box-shadow:0 0 0 3px var(--lw-red-soft), var(--lw-shadow-md); }
body.alpha-client-active .create-type strong { color:var(--lw-text); font:700 16px/1.25 var(--lw-font-heading); }
body.alpha-client-active .create-type small { color:var(--lw-text-muted); }

.lw-value-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:42px; padding:24px 0; border-top:1px solid var(--lw-border); }
.lw-value-strip > div { display:flex; align-items:center; gap:13px; padding:10px; }
.lw-value-strip b { font-size:30px; font-weight:500; color:var(--lw-text); }.lw-value-strip p { margin:0; }.lw-value-strip strong,.lw-value-strip small { display:block; }
.lw-value-strip strong { font-size:10px; letter-spacing:.07em; }.lw-value-strip small { margin-top:3px; color:var(--lw-text-muted); font-size:11px; }

body.alpha-client-active #createView { min-height:calc(100vh - 72px); padding-bottom:72px; }
body.alpha-client-active #createView > .create-step,
body.alpha-client-active #createView > .create-result { padding:30px; border:1px solid var(--lw-border); border-radius:var(--lw-radius-lg); background:var(--lw-surface-glass); box-shadow:var(--lw-shadow-md); }
body.alpha-client-active .create-step h2,
body.alpha-client-active .create-result h2 { color:var(--lw-text); font:700 20px/1.2 var(--lw-font-heading); text-transform:none; letter-spacing:-.02em; }
.lw-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:680px; margin:30px 0 0; padding:0; list-style:none; }
.lw-progress li { position:relative; display:flex; align-items:center; gap:9px; color:var(--lw-text-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.lw-progress li::after { content:''; position:absolute; left:34px; right:10px; top:14px; height:1px; background:var(--lw-border-strong); }
.lw-progress li:last-child::after { display:none; }.lw-progress span { display:grid; place-items:center; z-index:1; width:28px; height:28px; border:1px solid var(--lw-border-strong); border-radius:50%; background:#fff; }
.lw-progress .active { color:var(--lw-red); }.lw-progress .active span { color:#fff; border-color:var(--lw-red); background:var(--lw-red); }
body.alpha-client-active .create-field { color:var(--lw-text-secondary); font-weight:600; }
body.alpha-client-active input, body.alpha-client-active textarea, body.alpha-client-active select {
  color:var(--lw-text); border-color:var(--lw-border-strong); background:rgba(255,255,255,.92);
}
body.alpha-client-active .create-field textarea { min-height:86px; padding:15px; border-radius:12px; }
body.alpha-client-active input:focus,body.alpha-client-active textarea:focus,body.alpha-client-active select:focus { outline:3px solid var(--lw-red-soft); border-color:var(--lw-red); }
body.alpha-client-active .drop-zone { min-height:150px; display:grid; place-items:center; text-align:center; color:var(--lw-text-secondary); border:1px dashed rgba(56,79,105,.3); border-radius:16px; background:linear-gradient(145deg,#fff,#f2f6fa); }
body.alpha-client-active .drop-zone:hover { border-color:var(--lw-red); background:#fff; }
body.alpha-client-active .create-photo { position:relative; width:124px; padding:7px; border:1px solid var(--lw-border); border-radius:12px; background:#fff; box-shadow:var(--lw-shadow-sm); }
body.alpha-client-active .create-photo img { width:110px; height:84px; border:0; border-radius:8px; }
.lw-brand-assurance { display:flex; align-items:center; gap:14px; margin-top:22px; padding:16px; border:1px solid var(--lw-border); border-radius:14px; background:linear-gradient(120deg,rgba(255,255,255,.95),rgba(236,243,249,.8)); }
.lw-brand-orbit { display:grid; place-items:center; flex:0 0 44px; height:44px; color:var(--lw-red); border:1px solid var(--lw-red-border); border-radius:50%; font-size:10px; font-weight:800; }
.lw-brand-assurance p,.lw-brand-assurance strong,.lw-brand-assurance small { display:block; margin:0; }.lw-brand-assurance small { margin-top:3px; color:var(--lw-text-muted); }
.lw-result-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:30px; align-items:start; }
body.alpha-client-active .create-preview { max-width:580px; border:0; border-radius:16px; box-shadow:var(--lw-shadow-lg); }
.lw-result-actions { position:sticky; top:100px; display:flex; flex-direction:column; align-items:stretch; padding:24px; border:1px solid var(--lw-border); border-radius:18px; background:rgba(255,255,255,.9); box-shadow:var(--lw-shadow-md); }
.lw-result-actions button { min-height:46px; border-radius:10px; }.lw-result-actions p { margin:8px 0 0; color:var(--lw-text-muted); font-size:11px; text-align:center; }
.lw-result-badge { color:#23734b; font-size:10px; font-weight:800; letter-spacing:.1em; }

body.alpha-client-active .dashboard-projects { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body.alpha-client-active .alpha-project-tile { overflow:hidden; min-height:210px; display:grid; grid-template-columns:105px 1fr; padding:0; text-align:left; color:var(--lw-text); border:1px solid var(--lw-border); border-radius:16px; background:#fff; box-shadow:var(--lw-shadow-sm); cursor:pointer; }
.alpha-project-visual { display:grid; place-items:center; color:rgba(255,255,255,.9); background:radial-gradient(circle at 30% 20%,#59758e,#101820 74%); font:700 24px var(--lw-font-heading); letter-spacing:-.05em; }
.project-card-copy { display:flex; flex-direction:column; padding:22px 18px; }.alpha-project-kind { color:var(--lw-red); font-size:9px; font-weight:800; letter-spacing:.12em; }
body.alpha-client-active .project-card-title { margin:9px 0; color:var(--lw-text); font:700 15px/1.3 var(--lw-font-heading); }
.alpha-project-open { margin-top:auto; color:var(--lw-text); font-size:11px; font-weight:700; }.alpha-project-open i { color:var(--lw-red); font-style:normal; }
.lw-empty-state { grid-column:1/-1; display:grid; justify-items:center; padding:56px 24px; text-align:center; border:1px dashed var(--lw-border-strong); border-radius:20px; background:rgba(255,255,255,.66); }
.lw-empty-state > span { color:var(--lw-red); font-size:28px; }.lw-empty-state strong { margin-top:12px; font:700 20px var(--lw-font-heading); }.lw-empty-state p { color:var(--lw-text-muted); }

/* Alpha Marka is the existing, authorized Brands pane — presentation only. */
body.alpha-client-active #contentStudioSaasView .view-inner { max-width:1180px; }
body.alpha-client-active #cssPaneBrands .dashboard-section { padding:34px; }
body.alpha-client-active #cssPaneBrands .panel-heading > span:first-child::after { content:' · DNA TWOJEJ MARKI'; color:var(--lw-text-muted); }
body.alpha-client-active #cssBrandsAddForm { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:22px; border-radius:16px; background:var(--lw-bg-soft); }
body.alpha-client-active #cssBrandsAddForm label { color:var(--lw-text-secondary); }
body.alpha-client-active #cssBrandsAddForm input,body.alpha-client-active #cssBrandsAddForm textarea,body.alpha-client-active #cssBrandsAddForm select { box-sizing:border-box; width:100%; min-height:42px; margin-top:6px; padding:10px 12px; border-radius:9px; }
body.alpha-client-active #cssBrandsAddForm .primary { align-self:end; }
body.alpha-client-active #cssBrandsList { margin-top:22px; }
body.alpha-client-active #cssBrandsList .project-card { color:var(--lw-text); border:1px solid var(--lw-border); border-radius:16px; background:#fff; box-shadow:var(--lw-shadow-sm); }

/* Auth is showroom intensity from the same single master asset, without changing invite logic. */
body.public-auth-active #loginView { min-height:calc(100vh - 72px); padding:clamp(35px,6vw,84px) 24px; color:var(--lw-text); background:linear-gradient(90deg,rgba(247,250,253,.96),rgba(247,250,253,.72)),url('assets/loadwise-studio-hero-master-v1.webp') center/cover; }
body.public-auth-active #loginView .view-inner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:960px; }
body.public-auth-active #loginView .dashboard-section { padding:30px; border:1px solid rgba(255,255,255,.82); border-radius:20px; background:rgba(255,255,255,.76); box-shadow:var(--lw-shadow-lg); backdrop-filter:blur(22px); }
body.public-auth-active #loginView .panel-heading { color:var(--lw-text); border:0; }
body.public-auth-active #loginView .quick-lead-form { display:flex; flex-direction:column; }
body.public-auth-active #loginView input { flex:0 0 auto; box-sizing:border-box; width:100%; min-height:46px; padding:12px 14px; color:var(--lw-text); border:1px solid var(--lw-border-strong); border-radius:10px; background:#fff; }
body.public-auth-active #loginView button { min-height:46px; color:#fff; border-color:var(--lw-red); border-radius:10px; background:var(--lw-red); }
body.public-auth-active #loginView .dashboard-empty-note { color:var(--lw-text-muted); }

body.alpha-client-active :is(button,a,input,textarea,select):focus-visible,
body.public-auth-active :is(button,a,input,textarea,select):focus-visible { outline:3px solid rgba(226,26,34,.28); outline-offset:3px; }

@media (max-width: 900px) {
  body.alpha-client-active .app-header { height:auto; min-height:66px; padding:10px 18px; flex-wrap:wrap; gap:8px; }
  body.alpha-client-active .app-header > div:first-child { flex:1; }
  body.alpha-client-active .brand { font-size:18px; } body.alpha-client-active .brand + small { display:none; }
  body.alpha-client-active .app-nav { order:3; width:100%; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  body.alpha-client-active .nav-link { flex:0 0 auto; min-height:44px; padding:10px 13px; }
  body.alpha-client-active .auth-user-badge { display:none; }
  /* FINAL OWNER VISUAL CORRECTION — at phone widths the product destinations come first. The logout
     control moves after the nav strip (order 4, the nav is order 3) and drops its button chrome, so it
     no longer occupies prime first-navigation space. No hamburger, no new control, no CTR change. */
  body.alpha-client-active .auth-header-wrap { order:4; width:100%; margin-left:0; justify-content:flex-end; }
  body.alpha-client-active #navLogoutButton {
    min-height:0; padding:2px 2px; border:0; background:transparent; box-shadow:none;
    color:var(--lw-text-muted); font-size:12px; font-weight:600; text-decoration:underline;
    text-underline-offset:3px;
  }
  body.alpha-client-active .view-inner,body.alpha-client-active #createView > .view-header,body.alpha-client-active #createView > .create-step,body.alpha-client-active #createView > .create-result,body.alpha-client-active #alphaProjectsView > .view-header { width:min(100% - 28px,1180px); }
  .alpha-home-hero { grid-template-columns:1fr; min-height:440px; padding:34px 24px; background:linear-gradient(180deg,rgba(250,252,255,.98) 0%,rgba(250,252,255,.84) 64%,rgba(247,250,253,.52)),url('assets/loadwise-alpha-home-neutral-v1.webp') 62% center/cover; }
  .alpha-home-hero h1 { font-size:42px; }.alpha-home-brand-card { align-self:end; justify-self:stretch; width:auto; }
  body.alpha-client-active .create-type-list,body.alpha-client-active .dashboard-projects { grid-template-columns:1fr; }
  .lw-value-strip { grid-template-columns:repeat(2,1fr); }.lw-progress { overflow:hidden; }.lw-progress li { font-size:0; }.lw-progress li span { font-size:11px; }
  .lw-result-layout { grid-template-columns:1fr; }.lw-result-actions { position:static; }.lw-result-actions .primary { order:-1; }
  body.alpha-client-active #cssBrandsAddForm,body.public-auth-active #loginView .view-inner { grid-template-columns:1fr; }
  body.alpha-client-active #createView > .create-step,body.alpha-client-active #createView > .create-result { padding:20px; }
  .lw-value-strip { grid-template-columns:1fr; }.alpha-home-hero h1 { font-size:36px; }
  body.alpha-client-active .alpha-project-tile { grid-template-columns:84px 1fr; min-height:170px; }
  body.public-auth-active #loginView { padding:24px 14px; }
}
.lw-reduced-motion *, .lw-reduced-motion *::before, .lw-reduced-motion *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }

/* CLIENT HOME — the one question an external tester should see first. */
.alpha-home-title {
  font-family: var(--lw-font-heading); font-size: clamp(24px, 3.4vw, 34px);
  color: var(--lw-white); margin: 4px 0 20px; letter-spacing: -.4px;
}

/* MARKA — logo row inside the existing Brand form. Reuses .quick-lead-form's own field rhythm. */
.brand-logo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
.brand-logo-preview {
  width: 84px; height: 84px; border-radius: 10px; border: 1px solid #2a2b30; background: var(--lw-graphite);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto;
}
.brand-logo-preview img { max-width: 100%; max-height: 100%; display: block; }
.brand-logo-empty { font-family: var(--lw-font-body); font-size: 11px; color: var(--lw-grey); text-align: center; padding: 6px; }
.brand-logo-hint { font-family: var(--lw-font-body); font-size: 12px; color: var(--lw-grey); margin: 0; }
.brand-logo-status { font-family: var(--lw-font-body); font-size: 12px; margin: 0; }
.brand-logo-status.error { color: var(--lw-red); }
.brand-logo-status.success { color: #4caf50; }

/* Content Office v0.3 — LAYOUT ONLY, no new visual language.
 * Three rules, all of them structural: let the internal tab row wrap instead of forcing horizontal scroll
 * at 390px, and give the decision buttons a gap. Colours, type, radii and spacing tokens are untouched —
 * the visual reconstruction owns those, this package does not. */
.co-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.co-tabs .co-tab.active { text-decoration: underline; }
.co-decisions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ======================================================================
 * CONVERGENCE v1 §6/§16 — THE OPERATOR WORKSPACE ON A PHONE.
 * ----------------------------------------------------------------------
 * Structural only. No colour, type, radius or spacing token is redefined here, and nothing above this line
 * is edited — a future visual reconstruction owns all of that and can proceed without touching these rules.
 *
 * Two shells already had a phone treatment (`body.alpha-client-active`, `body.public-auth-active`) and the
 * operator workspace every OWNER/SALES/OPERATIONS user actually works in had none: `body { min-width: 1000px }`
 * meant a 390px phone rendered a 1000px page and scrolled sideways, and the fixed multi-column grids under it
 * never collapsed. Measured, before this block: 834-1841px of horizontal overflow for all three roles at both
 * 390px and 430px, on every reachable screen (test_convergence_v1_mobile_overflow_browser.js).
 *
 * Every selector below is unscoped and therefore LOWER specificity than the `body.alpha-client-active` /
 * `body.public-auth-active` rules that precede it, so both of those shells keep their own established
 * behaviour unchanged. ================================================================== */

/* (A) Applies at EVERY width, phones included, because this one is not a phone bug. The header lays the nav
 * out as a single non-wrapping flex row, and the app now has 27 nav destinations: at 1280px an OWNER's
 * 22 visible buttons measured 2033px wide and pushed the document 991px past the viewport. Wrapping is the
 * honest fix — a horizontally scrolled strip hides destinations behind a gesture with no affordance, which
 * is the same affordance debt the navigation IA audit exists to remove. The header grows in height only when
 * it genuinely has to wrap, so a narrow nav is pixel-identical to before. */
.app-header { height: auto; min-height: 68px; flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
.app-nav { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.view-inner { max-width: min(1040px, 100%); }

@media (max-width: 900px) {
  /* (B) The root cause. Everything else in this block is only reachable once the page may be narrower than
   * 1000px at all. overflow-x is NOT set here: a page that clips instead of fitting is the same bug with the
   * evidence hidden, and the browser test measures scrollWidth, which clipping would falsify. */
  body { min-width: 0; }
  .app-header { padding-inline: 14px; }
  .view-inner { padding-left: 14px; padding-right: 14px; }

  /* (C) Every fixed multi-column grid collapses to one column. minmax(0,1fr) rather than 1fr throughout:
   * a bare 1fr track refuses to shrink below its content's min-content width, which is exactly how a long
   * customer name or a Mercedes-Benz trim string pushes a "responsive" grid off a phone screen. */
  .studio { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .editor-panel, .slides-panel { max-height: none; overflow-y: visible; border-left: 0; border-right: 0; border-top: 1px solid var(--line); }
  .preview-panel { padding: 18px 14px; }
  .dashboard-view { grid-template-columns: minmax(0, 1fr); }
  .dashboard-section-wide { grid-column: auto; }
  .prepare-grid, .planner-item-fields, .auction-field-grid, .generated-assets-grid,
  .position-controls, .next-pub-row { grid-template-columns: minmax(0, 1fr); }
  .pub-counters, .auction-thumb-grid, .prepare-media-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mix-row { grid-template-columns: 92px minmax(0, 1fr) 34px; }
  .planner-calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }

  /* (D) Flex rows that were built to sit side by side. The min-width floors are what actually overflowed —
   * two 220px inputs plus four selects in one non-wrapping row measured 1322px inside a 390px window. */
  .media-library-toolbar { flex-wrap: wrap; }
  .media-library-toolbar input, .media-library-toolbar select { flex: 1 1 100%; min-width: 0; }
  .export-bar { height: auto; min-height: 62px; padding: 10px 14px; flex-wrap: wrap; }
  .quick-lead-form input { min-width: 0; }
  .deal-card-inputs input, .deal-card-inputs select { min-width: 0; }
  .action-center-item .action-center-label { min-width: 0; }
  .activity-timeline-date, .objection-history-date { min-width: 0; }

  /* (E) The long-string safety net. Every one of these is a real field a salesperson types into: a customer
   * email on a vanity domain, a vehicle trim, a pasted URL. Without it a single unbreakable token re-creates
   * the overflow that (B)-(D) just removed. */
  .dashboard-section, .panel-heading, .view-inner { min-width: 0; }
  .view-inner, .dashboard-section { overflow-wrap: anywhere; }
  canvas, img, video { max-width: 100%; height: auto; }
}

/* ==========================================================================================
 * STUDIO UX/UI CONVERGENCE v1 — LIGHT TECHNOLOGICAL PREMIUM (shell + major workspaces)
 *
 * Applied on top of the token inversion at the head of this file. The inversion did the colour work; this
 * layer does the *quality* work the direction asks for — space, hierarchy, restraint, and a shell that
 * reads as one product rather than a stack of feature experiments.
 *
 * Deliberately last in the file so it converges what already exists instead of being threaded through 84KB
 * of rules, and deliberately additive: no selector here changes layout structure, only its presentation.
 * ========================================================================================== */

/* --- The page itself: spacious, warm, quiet ------------------------------------------------ */
body {
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(226,26,34,.045), transparent 62%),
    radial-gradient(900px 460px at 92% -6%, rgba(83,129,174,.075), transparent 60%),
    var(--lw-bg);
  color: var(--lw-text);
  -webkit-font-smoothing: antialiased;
}

/* --- Shell: a glass header that stays out of the way -------------------------------------- */
.app-header {
  position: sticky; top: 0; z-index: 40;
  /* AUTO HEIGHT, deliberately. The shell carries 28 top-level destinations, and against a FIXED header
   * height the nav wrapped to a second row that overflowed the header box and printed on top of the first
   * card of every screen. Sizing the header to its content makes a wrapping nav push the page down instead
   * of covering it. The count itself is information noise worth addressing, but that is an IA decision, not
   * a styling one, so this fixes the overlap without quietly redesigning the navigation. */
  height: auto; min-height: 72px; padding: 10px var(--lw-space-5); flex-wrap: wrap; row-gap: 6px;
  background: var(--lw-surface-glass);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--lw-border);
}
.brand { font-family: var(--lw-font-heading); font-size: 20px; letter-spacing: .4px; color: var(--lw-text); font-weight: 700; }
.brand + small { color: var(--lw-text-muted); letter-spacing: 1.5px; }
.project-name { color: var(--lw-text-secondary); }

/* --- Navigation: one row, clear current position ------------------------------------------ */
.app-nav { gap: 4px; flex-wrap: wrap; row-gap: 6px; }
.nav-link {
  padding: 8px 14px; border: 1px solid transparent; border-radius: var(--lw-radius-sm);
  background: transparent; color: var(--lw-text-secondary);
  font-weight: 600; letter-spacing: .2px;
  transition: background var(--lw-motion-fast), color var(--lw-motion-fast), border-color var(--lw-motion-fast);
}
.nav-link:hover { background: var(--lw-bg-soft); color: var(--lw-text); }
.nav-link.active {
  background: var(--lw-surface); color: var(--lw-text);
  border-color: var(--lw-border); box-shadow: var(--lw-shadow-sm);
}
/* The accent marks position; it never floods the surface. */
.nav-link.active::after {
  content: ''; display: block; height: 2px; margin: 6px -6px -8px;
  border-radius: 2px; background: var(--lw-red);
}

/* --- Global search: wraps rather than collapsing to a sliver ------------------------------- */
/* With the header now wrapping, flex was shrinking the search field to a few pixels before it ever moved
 * to the next row — at 1280px it rendered as a one-character box. Giving it a floor makes it wrap intact. */
#globalSearchInput {
  flex: 0 1 320px; min-width: 220px;
  padding: 9px 12px;
  border: 1px solid var(--lw-border); border-radius: var(--lw-radius-sm);
  background: var(--lw-surface); color: var(--lw-text);
}
#globalSearchInput:focus { outline: none; border-color: var(--lw-red-border); box-shadow: 0 0 0 3px var(--lw-red-soft); }

/* --- Cards: premium, restrained, one elevation language ----------------------------------- */
.dashboard-section,
.plan-item-card,
.planner-item-detail,
.prepare-panel,
.cal-filters {
  background: var(--lw-surface);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-md);
  box-shadow: var(--lw-shadow-sm);
}
.dashboard-section { padding: var(--lw-space-4); }
.plan-item-card { transition: box-shadow var(--lw-motion-fast), border-color var(--lw-motion-fast), transform var(--lw-motion-fast); }
.plan-item-card:hover { box-shadow: var(--lw-shadow-md); border-color: var(--lw-border-strong); transform: translateY(-1px); }

/* --- Typography: strong black headings, quiet supporting text ------------------------------ */
.panel-heading { color: var(--lw-text-secondary); font-weight: 700; letter-spacing: 1px; }
.dashboard-empty-note { color: var(--lw-text-muted); line-height: 1.6; }

/* --- Controls: legible on light, accent reserved for intent -------------------------------- */
.editor-panel textarea, .editor-panel input:not([type="range"]), .editor-panel select,
.planner-create input, .planner-create select,
.planner-item-fields input, .planner-item-fields select, .planner-item-fields textarea,
.prepare-fields input, .prepare-fields textarea,
.media-library-toolbar input, .media-library-toolbar select,
.content-job-form input, .content-job-form select,
.cal-filters select, .media-category-select, .media-tags-input {
  background: var(--lw-surface);
  border-color: var(--lw-border);
  color: var(--lw-text);
  border-radius: var(--lw-radius-sm);
}
.editor-panel textarea:focus, .editor-panel input:focus, .editor-panel select:focus,
.planner-create input:focus, .planner-create select:focus,
.prepare-fields input:focus, .prepare-fields textarea:focus {
  border-color: var(--lw-red-border);
  box-shadow: 0 0 0 3px var(--lw-red-soft);
}
.primary { border-radius: var(--lw-radius-sm); box-shadow: var(--lw-glow-red); }
.primary:hover { filter: brightness(1.05); }
.secondary { border-radius: var(--lw-radius-sm); }
.secondary:hover { background: var(--lw-bg-soft); }

/* --- Side panels and bars: surfaces, not voids -------------------------------------------- */
.slides-panel, .editor-panel { background: var(--lw-surface); }
.export-bar {
  background: var(--lw-surface-glass);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--lw-border);
}
.preview-note { color: var(--lw-text-muted); }

/* --- Responsive: the shell stops assuming a desktop --------------------------------------- */
@media (max-width: 1100px) {
  body { min-width: 0; }
  .app-header { height: auto; padding: 12px var(--lw-space-3); flex-wrap: wrap; gap: 8px; }
  .app-nav { flex-wrap: wrap; }
  .studio { grid-template-columns: 1fr; }
  .slides-panel, .editor-panel { max-height: none; border-left: 0; border-right: 0; }
}
@media (max-width: 720px) {
  .nav-link { padding: 7px 10px; font-size: 10px; }
  .dashboard-section { padding: var(--lw-space-3); }
}

/* ======================================================================
 * NAVIGATION HIERARCHY v1 — primary shell
 * ----------------------------------------------------------------------
 * The header used to carry every destination at once: measured on the
 * baseline, an OWNER at 390px got 23 chips over 7 rows and a 389px header --
 * 46% of the viewport before any content. The shell below moves destinations
 * into a domain sidebar and leaves the header as a compact utility bar.
 *
 * Restraint is the point, per LIGHT TECHNOLOGICAL PREMIUM: light surfaces,
 * generous whitespace, strong black type, the Loadwise red used once (the
 * active leaf and the Create action) and nowhere else. The sidebar must not
 * become a second dashboard.
 * ==================================================================== */
/* The header's own earlier rule pins `min-height: 72px` and `height: auto`, and its comment says exactly
 * why: "the shell carries 28 top-level destinations, and against a FIXED header height the nav wrapped to a
 * second row that overflowed the header box". That premise is what this milestone removes -- the nav no
 * longer lives in the header at all -- so the constraint it forced can go with it. `min-height` is reset
 * here as well as `height`, because a min-height always beats a smaller height. */
.app-header { height: 56px; min-height: 56px; gap: 14px; flex-wrap: nowrap; }
.header-identity { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.app-shell { display: block; }
.app-main { padding-left: 232px; transition: padding-left .16s ease; }

.app-sidebar {
  position: fixed; top: 56px; left: 0; bottom: 0; width: 232px; z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px 12px; box-sizing: border-box; overflow-y: auto;
  border-right: 1px solid var(--line); background: var(--lw-surface);
  transition: width .16s ease;
}
.sidebar-identity { display: none; }
.app-sidebar .nav-create {
  margin-bottom: 14px; padding: 10px 12px; width: 100%;
  color: var(--on-accent); border-color: var(--accent); background: var(--accent);
  font-size: 11px; letter-spacing: .6px;
}
.app-sidebar .app-nav { display: flex; flex-direction: column; gap: 2px; flex-wrap: nowrap; }
.nav-domain-group { display: flex; flex-direction: column; }
.nav-domain {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--lw-text); cursor: pointer; text-align: left;
  font: 700 11px/1.2 var(--lw-font-heading); letter-spacing: .7px; text-transform: uppercase;
}
.nav-domain:hover { background: var(--lw-bg-soft); }
.nav-domain[aria-expanded="true"] { color: var(--lw-text); }
.nav-domain.active { color: var(--accent); }
.nav-domain::after {
  content: '›'; font-size: 13px; color: var(--lw-text-muted); transition: transform .14s ease;
}
.nav-domain[aria-expanded="true"]::after { transform: rotate(90deg); }
/* Drawer/collapse state is expressed HERE, never by adding `hidden` to a leaf:
 * `hidden` means role gating and six browser suites read it that way. */
.nav-leaves { display: none; flex-direction: column; gap: 1px; padding: 2px 0 8px 10px; margin-left: 4px; border-left: 1px solid var(--line); }
.nav-domain-group[data-open="1"] .nav-leaves { display: flex; }
.app-sidebar .nav-link {
  padding: 7px 10px; border: 0; border-radius: 5px; background: transparent;
  color: var(--lw-text-muted); text-align: left; font: 500 12px/1.3 var(--lw-font-body);
  letter-spacing: 0; text-transform: none;
}
.app-sidebar .nav-link:hover { color: var(--lw-text); background: var(--lw-bg-soft); }
.app-sidebar .nav-link.active { color: var(--lw-text); background: var(--lw-bg-soft); box-shadow: inset 2px 0 0 var(--accent); }
/* The horizontal nav marked the active tab with a red underline bar (`.nav-link.active::after`). In a
 * vertical list that bar is drawn UNDER the leaf while the inset rail is drawn beside it, so the active
 * leaf carried the accent twice and read as a red box -- measured on the first evidence pass, not guessed.
 * LIGHT TECHNOLOGICAL PREMIUM spends the Loadwise red once, so the underline is dropped in the sidebar and
 * the inset rail is the single mark. The header rule is untouched: it still applies wherever it belongs. */
.app-sidebar .nav-link.active::after { display: none; }
.nav-more-toggle {
  margin-top: 4px; padding: 6px 10px; border: 0; background: transparent; cursor: pointer;
  color: var(--lw-text-muted); text-align: left; font: 600 10px var(--lw-font-body); letter-spacing: .5px; text-transform: uppercase;
}
.nav-more-toggle:hover { color: var(--lw-text); }
.nav-more { display: none; flex-direction: column; gap: 1px; }
.nav-more[data-open="1"] { display: flex; }
.nav-utilities { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.nav-collapse {
  margin-top: auto; padding: 8px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--lw-text-muted); cursor: pointer; font-size: 13px;
}
.nav-collapse:hover { color: var(--lw-text); border-color: var(--lw-border-strong); }
.nav-drawer-toggle { display: none; }
.nav-drawer-backdrop { display: none; }

/* Collapsed: icons-width rail. Labels are removed from flow, not merely hidden,
 * so the rail is genuinely narrow; the accessible name stays on the control. */
body[data-nav-collapsed="1"] .app-sidebar { width: 64px; padding-left: 8px; padding-right: 8px; }
body[data-nav-collapsed="1"] .app-main { padding-left: 64px; }
body[data-nav-collapsed="1"] .nav-domain { justify-content: center; padding: 10px 4px; font-size: 9px; letter-spacing: .3px; overflow: hidden; }
body[data-nav-collapsed="1"] .nav-domain::after { content: ''; }
body[data-nav-collapsed="1"] .nav-leaves { display: none !important; }
body[data-nav-collapsed="1"] .nav-create { font-size: 0; padding: 12px 4px; }
body[data-nav-collapsed="1"] .nav-create::before { content: '+'; font-size: 16px; }
body[data-nav-collapsed="1"] .nav-utilities .nav-link { font-size: 9px; text-align: center; padding: 8px 2px; overflow: hidden; }
body[data-nav-collapsed="1"] .nav-collapse { transform: rotate(180deg); }

/* The public landing and auth screens keep their own chrome: no shell there. */
body.public-landing-active .app-sidebar,
body.public-auth-active .app-sidebar { display: none !important; }
body.public-landing-active .app-main,
body.public-auth-active .app-main { padding-left: 0; }
body.public-landing-active .nav-drawer-toggle,
body.public-auth-active .nav-drawer-toggle { display: none !important; }

@media (max-width: 900px) {
  .app-header { height: 56px; min-height: 56px; padding: 0 14px; gap: 10px; flex-wrap: nowrap; }
  .nav-drawer-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px;
    background: transparent; cursor: pointer; flex: 0 0 auto;
  }
  .nav-drawer-toggle span { display: block; height: 2px; background: var(--lw-text); border-radius: 2px; }
  .app-header .global-search-wrap, .app-header .project-name { display: none; }
  .app-main { padding-left: 0; }
  /* A CLOSED drawer is not rendered. Translating it off-canvas was the first attempt and it
   * was wrong twice over: its 19-26 controls stayed in the tab order, focusable but invisible,
   * and a measurement sweep correctly counted every one of them as pushed outside the viewport.
   * `display: none` is the honest state -- and it is expressed through the shell's data
   * attribute, never by adding `hidden` to a control, because `hidden` means role gating here.
   * The off-canvas transform is kept as the OPEN animation's starting frame, so the drawer
   * still slides in from the left instead of appearing. */
  .app-sidebar {
    display: none;
    width: min(86vw, 320px); box-shadow: var(--lw-shadow-md);
  }
  body[data-nav-drawer="open"] .app-sidebar { display: flex; animation: navDrawerSlideIn .18s ease; }
  @keyframes navDrawerSlideIn { from { transform: translateX(-102%); } to { transform: translateX(0); } }
  body[data-nav-drawer="open"] .nav-drawer-backdrop {
    display: block; position: fixed; inset: 56px 0 0 0; z-index: 35; background: rgba(11,11,13,.38);
  }
  .sidebar-identity { display: flex; align-items: baseline; gap: 5px; padding: 0 4px 12px; }
  .nav-collapse { display: none; }
  body[data-nav-collapsed="1"] .app-sidebar { width: min(86vw, 320px); padding: 16px 12px 12px; }
  body[data-nav-collapsed="1"] .app-main { padding-left: 0; }

  /* 3. The user badge pushed the logout control off a 390px screen and forced the header to 72px.
   *    The identity stays (it is how a viewer knows whose session this is) but it is bounded. */
  .app-header .auth-user-badge { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-header .header-identity small { display: none; }
  .app-header .auth-header-wrap { margin-left: auto; flex: 0 0 auto; }
  .app-header .nav-link { padding: 7px 9px; font-size: 10px; }
}

/* Corrections found by looking at the rendered shell rather than at the rules. */
/* 1. The wordmark is one word: a flex gap between its two spans printed "LOAD WISE". */
.header-identity, .sidebar-identity { gap: 0; }
.header-identity small, .sidebar-identity small { margin-left: 8px; }
/* 2. `.app-sidebar .nav-link` is declared after `.nav-create` at equal specificity, so it was winning and
 *    the primary action rendered as a muted link. Raised, not reordered, so the intent stays local. */
.app-sidebar .nav-link.nav-create {
  color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent);
  font: 700 11px var(--lw-font-heading); letter-spacing: .6px; text-align: center;
}
.app-sidebar .nav-link.nav-create:hover { color: var(--on-accent); background: var(--lw-red); }



/* ======================================================================
 * CRM WORKSPACE V1.3 — LIGHT GRAPHITE OPERATOR WORKSPACE
 * ----------------------------------------------------------------------
 * The operator workspace was painted on #f4f7fb with #ffffff cards: a near-snow-white canvas that is
 * genuinely tiring on a large monitor over an eight-hour day, which is how this workspace is actually used.
 * This is NOT dark mode and not a rebrand — it is the same light language, moved off white onto a calm cool
 * grey, with off-white cards that still read as raised against it.
 *
 * SCOPED ON PURPOSE. These are the same token names the LOADWISE VISUAL SYSTEM v1 block declares, but
 * redeclared on a body class rather than :root, so the tokens resolve to graphite ONLY inside the operator
 * workspace. The landing page, the login screen and the customer portal share that :root block and keep
 * their existing palette untouched — retuning :root would have repainted the public product to fix an
 * internal tool. showView() owns the class (see app.js), so a view is graphite because it is an operator
 * view, not because someone remembered to add a class to its markup.
 *
 * Contrast is not traded away for calm: body text is near-black graphite on off-white (>14:1) and the muted
 * token is held at ~4.9:1, above the 4.5:1 floor for normal text.
 * ================================================================== */
body.workspace-graphite {
  --lw-bg: #eceef1;            /* page/workspace — soft light graphite */
  --lw-bg-soft: #e2e5e9;       /* recessed areas, hover fills */
  --lw-surface: #f8f9fa;       /* content cards — off-white, never pure #fff */
  --lw-surface-glass: rgba(248,249,250,.82);
  --lw-surface-elevated: #fdfdfe;
  --lw-text: #1b2027;          /* dark graphite ink */
  --lw-text-secondary: #46505c;
  --lw-text-muted: #5f6a76;    /* ~4.9:1 on --lw-surface */
  --lw-border: rgba(27,32,39,.13);
  --lw-border-strong: rgba(27,32,39,.22);
  /* Shadows are the first thing that turns a calm surface noisy, so they are reduced rather than recoloured. */
  --lw-shadow-sm: 0 1px 2px rgba(20,26,33,.05);
  --lw-shadow-md: 0 4px 14px rgba(20,26,33,.07);
  --lw-shadow-lg: 0 14px 38px rgba(20,26,33,.10);
}
/* The shell header is a translucent glass surface by contract (Studio UX convergence U2 pins that it is
 * rgba and blurred), so graphite retunes it through the GLASS token rather than replacing it with an
 * opaque fill — an opaque header here regressed that contract on the first run. */
body.workspace-graphite .app-header { background: var(--lw-surface-glass); }
body.workspace-graphite .app-sidebar { background: var(--lw-surface-elevated); }

/* ======================================================================
 * DEAL WORKSPACE — CENTER FEED + RIGHT ACTION RAIL
 * ----------------------------------------------------------------------
 * The Deal card was ten full-width stacked sections, which is why the thing a salesperson works all day
 * read as an administrative form: the activity history — the actual conversation — sat below the money and
 * the contract, roughly 1600px down before V1.2 moved it up.
 *
 * Two columns instead: the chronology is the dominant surface, and the six operational modules become a
 * compact rail beside it. The rail is a fixed 380px rather than a percentage so it stays legible as the
 * viewport grows: at 1440px that is ~28% and at 1920px ~21%, i.e. the feed keeps taking the extra width,
 * which is the point of the change. Below 1180px the grid collapses to one column and the rail returns to
 * its familiar stacked order — the narrow layout is deliberately the OLD layout, so nothing about small
 * screens is a new thing to get wrong.
 * ================================================================== */
#dealCardView .view-inner { max-width: 1680px; }
/* `.dashboard-view` is itself a two-column grid (styles.css:91), and every full-width panel in this app
 * spans it with `.dashboard-section-wide { grid-column: 1 / -1 }`. The workspace is a new direct child of
 * that grid, so it needs the same span — without it the whole two-column workspace was squeezed into ONE
 * half-column of its parent, which is exactly what the rendered-geometry assertions caught. */
.deal-workspace { display: block; grid-column: 1 / -1; }
@media (min-width: 1180px) {
  .deal-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
  }
  .deal-workspace-feed { min-width: 0; }
  .deal-workspace-rail {
    position: sticky;
    /* Clears the 68px app header plus a little breathing room; the rail scrolls independently once its own
     * content is taller than the viewport, so a long task list can never trap the feed. */
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* The rail holds six modules that were full-width sections; they have to become dense to be a rail. */
.deal-workspace-rail .dashboard-section { padding: 12px 14px; margin-bottom: 12px; }
.deal-workspace-rail .panel-heading { margin-bottom: 8px; font-size: 11px; letter-spacing: .14em; }
.deal-workspace-rail .project-card { padding: 10px 12px; margin-bottom: 8px; }
.deal-workspace-rail .project-card-title { font-size: 13px; }
.deal-workspace-rail .project-card-meta { font-size: 12px; line-height: 1.5; }
.deal-workspace-rail .quick-lead-form { gap: 6px; }
.deal-workspace-rail .quick-lead-form select,
.deal-workspace-rail .quick-lead-form input,
.deal-workspace-rail .quick-lead-form button { min-height: 32px; font-size: 12px; }

/* ---------- the feed itself ---------- */
/* #dealCardTimeline carries .dashboard-projects, which is an auto-fill card GRID (styles.css:104) — the
 * right shape for a board of project tiles and the wrong one for a conversation: it laid the chronology out
 * in four columns, so "what happened on this deal" read left-to-right-then-down and the newest entry was
 * not where a reader looks. A feed is one column by definition. Caught by looking at the rendered page, not
 * by the geometry assertions, which is why the suite now pins the column count too. */
#dealCardTimeline { display: block; }

.deal-feed-composer { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.deal-feed-composer textarea {
  width: 100%; min-height: 64px; resize: vertical;
  padding: 10px 12px; border-radius: var(--lw-radius-sm);
  border: 1px solid var(--lw-border); background: var(--lw-surface); color: var(--lw-text);
  font: 400 13px/1.55 var(--lw-font-body);
}
.deal-feed-composer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deal-feed-composer-actions .deal-feed-composer-hint { margin-left: auto; font-size: 11px; color: var(--lw-text-muted); }

.deal-feed-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--lw-border); }
.deal-feed-item:last-child { border-bottom: 0; }
.deal-feed-avatar {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lw-bg-soft); color: var(--lw-text-secondary);
  font: 600 11px/1 var(--lw-font-body); letter-spacing: .02em;
}
/* A machine event is visibly not a person, without shouting. */
.deal-feed-item[data-actor="system"] .deal-feed-avatar { background: transparent; border: 1px dashed var(--lw-border-strong); color: var(--lw-text-muted); }
.deal-feed-body { min-width: 0; flex: 1 1 auto; }
.deal-feed-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.deal-feed-actor { font: 600 13px/1.3 var(--lw-font-body); color: var(--lw-text); }
.deal-feed-time { font-size: 11px; color: var(--lw-text-muted); }
.deal-feed-kind { font-size: 11px; color: var(--lw-text-muted); }
.deal-feed-kind::before { content: '· '; }
.deal-feed-text { font: 400 13px/1.6 var(--lw-font-body); color: var(--lw-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
/* A note is the thing people write, so it gets the ink; a system line stays quieter. */
.deal-feed-item[data-timeline-kind="NOTE"] .deal-feed-text { color: var(--lw-text); }

.deal-feed-mention-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.deal-feed-mention-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 6px 2px 8px; border-radius: 999px;
  background: var(--lw-bg-soft); color: var(--lw-text-secondary);
  font: 500 11px/1.6 var(--lw-font-body);
}
.deal-feed-mention-chip button { border: 0; background: none; cursor: pointer; color: var(--lw-text-muted); font-size: 12px; line-height: 1; padding: 0; }
.deal-feed-mentions { margin-top: 4px; font: 500 12px/1.5 var(--lw-font-body); color: var(--lw-text-secondary); }

/* ---------- secondary modules ---------- */
.deal-secondary { margin-top: 18px; }
.deal-secondary > summary {
  cursor: pointer; list-style: none;
  padding: 10px 14px; border: 1px solid var(--lw-border); border-radius: var(--lw-radius-sm);
  background: var(--lw-surface); color: var(--lw-text-secondary);
  font: 600 11px/1.2 var(--lw-font-body); letter-spacing: .14em; text-transform: uppercase;
}
.deal-secondary > summary::-webkit-details-marker { display: none; }
.deal-secondary > summary::after { content: ' ▾'; color: var(--lw-text-muted); }
.deal-secondary[open] > summary::after { content: ' ▴'; }
.deal-secondary[open] > summary { margin-bottom: 8px; }


/* ======================================================================
 * CRM WORKSPACE V1.3 — TOP NAVIGATION, DEAL WORKSPACE ONLY
 * ----------------------------------------------------------------------
 * The permanent 232px rail costs the Deal workspace a fifth of a 1180px screen, on the one screen whose
 * whole point is horizontal room. On the Deal workspace at desktop width it becomes a horizontal bar above
 * the canvas instead.
 *
 * THIS IS A RE-LAYOUT, NOT A SECOND NAVIGATION. There is no duplicated destination list anywhere: the same
 * `#appSidebar` markup, the same buttons with the same ids, the same click handlers and — critically — the
 * same role gating, because authorization is expressed as `.hidden` on individual `.nav-link`s and none of
 * these rules touch `hidden` (this file's own comment a few hundred lines up states that rule: "Drawer/
 * collapse state is expressed HERE, never by adding `hidden` to a leaf: `hidden` means role gating and six
 * browser suites read it that way"). A destination a role cannot reach is still absent, by construction,
 * because it is the same element.
 *
 * The domain groups already open and close through `data-open` and the existing document click handler, so
 * dropdown behaviour needs no JavaScript at all — only a different position for `.nav-leaves`.
 *
 * SCOPED TWICE: body.deal-topnav is applied by showView() for the Deal workspace and nothing else, and the
 * whole block sits in the desktop media query. Every other screen, and every narrower viewport, keeps the
 * sidebar exactly as it is today.
 * ================================================================== */
/* THE BREAKPOINT IS 1024px, NOT 1180px, AND ONLY FOR THIS BLOCK.
 *
 * A 1024px-wide viewport is a desktop: it is the landscape iPad and the smaller laptop, and it is the
 * width at which the permanent 232px rail hurts MOST — it takes 23% of the canvas there, against 20% at
 * 1180px. Holding the top navigation back to 1180px left exactly the screens that needed the room the
 * most still paying for the rail, which is the remediation the OWNER approved.
 *
 * THE WORKSPACE GRID ABOVE DELIBERATELY STAYS AT 1180px. The two changes are independent and are kept
 * that way on purpose. Reclaiming the rail is worth doing at 1024px; splitting the canvas into a feed
 * plus a 380px rail is NOT, because the feed would be left under 600px and the deal conversation is the
 * thing this screen exists for. So between 1024px and 1179px the workspace gets the top navigation and
 * the full width, with the right rail stacked underneath the feed rather than beside it.
 *
 * No media query is added or removed by this change — the count stays at 8, which
 * test_studio_ux_v2_mobile_structure.js pins deliberately. */
@media (min-width: 1024px) {
  body.deal-topnav .app-sidebar {
    position: sticky; top: 56px; left: auto; bottom: auto; z-index: 40;
    width: auto; height: auto; max-height: none;
    flex-direction: row; align-items: center; gap: 6px;
    padding: 6px 20px; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--lw-border);
  }
  /* The rail is gone from the canvas — this is the width the workspace gains. */
  body.deal-topnav .app-main,
  body.deal-topnav[data-nav-collapsed="1"] .app-main { padding-left: 0; }
  body.deal-topnav .app-sidebar .app-nav { flex-direction: row; align-items: center; gap: 2px; flex-wrap: nowrap; }
  body.deal-topnav .app-sidebar .nav-create { width: auto; margin-bottom: 0; margin-right: 8px; padding: 7px 14px; white-space: nowrap; }
  body.deal-topnav .nav-domain-group { position: relative; flex-direction: row; }
  body.deal-topnav .nav-domain { padding: 8px 10px; white-space: nowrap; }
  /* '›' points down in a top bar, and across when the group is open. */
  body.deal-topnav .nav-domain::after { content: '▾'; font-size: 10px; }
  body.deal-topnav .nav-domain[aria-expanded="true"]::after { transform: none; }
  /* Same display rule as the sidebar (`[data-open="1"]` reveals it) — only the position differs. */
  body.deal-topnav .nav-leaves {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
    min-width: 210px; padding: 6px; margin-left: 0;
    border: 1px solid var(--lw-border); border-left: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-sm); background: var(--lw-surface-elevated); box-shadow: var(--lw-shadow-md);
  }
  body.deal-topnav .app-sidebar .nav-link.active { box-shadow: inset 0 -2px 0 var(--accent); }
  /* The collapse control is meaningless for a horizontal bar. Hidden as LAYOUT state on a control that
   * carries no role meaning — never by touching `.hidden` on a destination. */
  body.deal-topnav .nav-collapse { display: none; }
  /* Utility destinations (Notifications) are direct children of .app-nav with no domain group, so in a
   * row they need the same inline treatment as a domain head rather than the sidebar's full-width block. */
  body.deal-topnav .app-sidebar .app-nav > .nav-link { white-space: nowrap; padding: 8px 10px; }
  body.deal-topnav .sidebar-identity {
    display: flex; align-items: baseline; gap: 5px; margin-right: 14px; white-space: nowrap;
  }
  body.deal-topnav .sidebar-identity small { display: none; }
}

/* ============================ V1.4 P0.1 / P0.2 — SALES CONTROL ============================
 * Scoped to #dealPipelineView throughout: .pub-counter, .text-button and the card classes are shared with
 * Publications, Jobs and the Revenue Dashboard, and an unscoped rule here would silently restyle screens
 * this milestone was told not to touch. */
#dealPipelineView .pipeline-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
#dealPipelineView .pipeline-toolbar label { color: var(--gray); font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
#dealPipelineView .pipeline-toolbar select { min-width: 0; max-width: 220px; padding: 5px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--white); font-size: 10px; }
#dealPipelineView .pipeline-toolbar-note { color: var(--gray); font-size: 9px; }
#dealPipelineView .pipeline-bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 4px; background: var(--surface); }
#dealPipelineView .pipeline-bulk-bar.hidden { display: none; }
#dealPipelineView .pipeline-bulk-bar > span { color: var(--white); font-size: 10px; font-weight: 700; }
#dealPipelineView .pipeline-bulk-bar select { min-width: 0; max-width: 220px; padding: 5px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--white); font-size: 10px; }
#dealPipelineView .pipeline-bulk-result { margin-top: 4px; font-size: 9px; color: var(--gray); }
#dealPipelineView .pipeline-bulk-result .bulk-ok { color: var(--accent); }
#dealPipelineView .pipeline-bulk-result .bulk-partial,
#dealPipelineView .pipeline-bulk-result .bulk-failed { color: #ff8a7a; }
/* The checkbox sits above the title and must not widen the 180px column: min-width:0 on the row keeps the
 * label from setting a min-content floor, the same automatic-minimum release the card inputs already use. */
#dealPipelineView .pipeline-card .deal-select-row { display: flex; align-items: center; gap: 4px; min-width: 0; margin-bottom: 4px; cursor: pointer; }
#dealPipelineView .pipeline-card .deal-select-row span { color: var(--gray); font-size: 8px; letter-spacing: .4px; text-transform: uppercase; }
#dealPipelineView .pipeline-card .deal-select-checkbox { margin: 0; flex: 0 0 auto; }
/* V1.4 P0.3 — duplicate warning. Scoped by its own class; nothing shared is restyled. */
.dup-warning { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 5px; background: var(--surface); }
.dup-warning.hidden { display: none; }
.dup-warning-title { color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 6px; }
.dup-warning-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.dup-warning-candidate { color: var(--gray); font-size: 9px; }
.dup-warning-candidate strong { color: var(--white); font-weight: 700; }
.dup-warning-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* V1.4.1: scoped Deal ownership in the existing Customer summary. */
.customer-profile-ownership { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border, #e5e7eb); }
.customer-profile-ownership strong { display: block; margin: 4px 0 10px; overflow-wrap: anywhere; }
#customerProfileOwnerControls { display: flex; flex-wrap: wrap; gap: 8px; }
#customerProfileOwnerForm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 100%; }
#customerProfileOwnerForm.hidden { display: none; }
#customerProfileOwnerForm select { max-width: 100%; min-width: 0; }
#customerProfileOwnerMessage { overflow-wrap: anywhere; }
.customer-profile-ownership button, .customer-profile-ownership select {
  font: inherit; min-height: 40px; padding: 8px 12px; border: 1px solid #d8dce3;
  border-radius: 8px; background: #fff; color: #17202c;
}
.customer-profile-ownership button { cursor: pointer; }
.customer-profile-ownership button:focus-visible, .customer-profile-ownership select:focus-visible {
  outline: 2px solid #e61928; outline-offset: 2px;
}
@media (max-width: 600px) {
  .customer-profile-ownership button, .customer-profile-ownership select { min-height: 44px; }
  #customerProfileOwnerForm label { flex-basis: 100%; }
}

/* ======================================================================
 * SALES OFFICE MANAGER SURFACE V1
 * ----------------------------------------------------------------------
 * Brand System 2.0 only defines grey and red, so nothing below introduces a hue. The one distinction this
 * panel genuinely must make visible is CUSTOMER-REPORTED versus AI-INFERRED: collapsing them would let a
 * guess be priced against, which is the defect crm-lead-bot-contract.js exists to prevent. It is therefore
 * drawn the way FAILED is already distinguished from READY above — with a tinted background on an existing
 * token plus a dashed border for the unverified side — never with a new colour.
 * ====================================================================== */
.so-card { border: 1px solid var(--line); border-radius: 5px; padding: 12px; background: var(--surface); }
.so-card + .so-card { margin-top: 8px; }
.so-card-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 6px; }
.so-card-title { color: var(--white); font-size: 12px; font-weight: 700; }
.so-row { color: var(--gray); font-size: 10px; margin-top: 4px; }
.so-row-label { color: var(--gray); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; font-size: 8px; display: block; }
.so-chip { display: inline-block; padding: 1px 5px; border-radius: 2px; font-size: 8px; font-weight: 700; letter-spacing: .4px; border: 1px solid var(--line); color: var(--gray); margin: 0 4px 2px 0; }
.so-chip.so-chip-alert { color: var(--accent); border-color: var(--accent); }
.so-chip.so-chip-strong { color: var(--accent); border-color: var(--accent); background: rgba(215,25,32,.12); }
.so-chip.so-chip-muted { background: rgba(154,154,154,.16); }
/* CUSTOMER-REPORTED: solid, it is a statement. */
.so-reported { border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px; margin-top: 6px; }
/* AI-INFERRED: dashed and tinted, it is a guess, and it may never look like the block above. */
.so-inferred { border: 1px dashed var(--gray); border-radius: 3px; padding: 6px 8px; margin-top: 6px; background: rgba(154,154,154,.10); }
.so-inferred .so-row-label { color: var(--gray); }
.so-payload { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 10px; color: var(--gray); font-size: 10px; overflow-x: auto; white-space: pre; }
.so-confirm-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.so-dismissed { opacity: .45; }
.so-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* Content-only manual draft workspace. */
#cssManualDrafts { margin-top: 24px; }
#cssManualDrafts > label { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
#cssManualDrafts input, #cssManualDrafts textarea, #cssManualDrafts select { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #d5d9df; border-radius: 6px; font: inherit; background: #fff; color: #202631; }
#cssManualDrafts textarea { resize: vertical; min-height: 150px; }
#cssManualDrafts .project-card { display: block; margin-top: 14px; }
#cssManualDrafts .project-card p { white-space: pre-wrap; overflow-wrap: anywhere; }
#cssManualStatus { min-height: 24px; }