: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). */
  --bg: var(--lw-black);
  --accent: var(--lw-red);
  --white: var(--lw-white);
  --gray: var(--lw-grey);
  --surface: var(--lw-graphite);
  --line: #2a2a30;
}

* { 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: #101014; 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% 20%, #19191e, var(--bg) 65%); }.preview-panel .panel-heading { width: min(100%, 540px); }.canvas-shell { width: min(540px, 100%); aspect-ratio: 4 / 5; box-shadow: 0 22px 52px rgba(0,0,0,.5); background: var(--bg); }.canvas-shell canvas { width: 100%; height: 100%; display: block; }.preview-note { color: #74747b; 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 #55555e; 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: #101014; }.export-bar button { padding: 10px 14px; cursor: pointer; border-radius: 4px; font-size: 11px; font-weight: 700; }.secondary { color: var(--white); border: 1px solid #3a3a42; background: transparent; }.primary { color: var(--white); border: 1px solid var(--accent); background: var(--accent); }
@media (max-width: 1100px) { .studio { grid-template-columns: 300px minmax(500px, 1fr) 190px; }.preview-panel { padding-left: 18px; padding-right: 18px; } }

/* ======================================================================
 * 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: #101014; 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. */
.media-library-toolbar { display: flex; 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; min-width: 220px; }
.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: #74747b; 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; }

/* 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: #101014; }
.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: #101014; 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: #101014; }
.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: #101014; }
.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: #74747b; 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: #101014; }
.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; }
@media (max-width: 900px) { .prepare-grid { grid-template-columns: 1fr; } }

/* 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(--white); 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(--white); 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); }
.pipeline-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.pipeline-column { flex: 0 0 220px; 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. */
.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); }