/* ============================================================================
   KromeContentPipe operator console — dark theme (P1 walking skeleton).
   ============================================================================ */
:root {
    color-scheme: dark;
    --kcp-bg: #0c0f14;
    --kcp-surface: #14181f;
    --kcp-surface-2: #1b212b;
    --kcp-border: #262d38;
    --kcp-text: #e7edf4;
    --kcp-text-dim: #c2cbd6;
    --kcp-text-muted: #8a95a4;
    --kcp-accent: #6366f1;
    --kcp-accent-text: #a9b0ff;
    --kcp-danger: #ef4444;
    --kcp-danger-text: #ff9a9a;
    --kcp-warn: #f59e0b;
    --kcp-warn-text: #fbc65a;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--kcp-bg);
    color: var(--kcp-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--kcp-accent-text); }

/* --- App shell ------------------------------------------------------------ */
.kcp-shell { display: flex; min-height: 100vh; }

.kcp-sidebar {
    width: 260px;
    flex: 0 0 260px;
    background: var(--kcp-surface);
    border-right: 1px solid var(--kcp-border);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    gap: 24px;
}

.kcp-brand { display: flex; align-items: center; gap: 12px; }
.kcp-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, var(--kcp-accent), #8b5cf6);
    color: #fff; font-weight: 700; letter-spacing: .5px;
}
.kcp-brand-text { display: flex; flex-direction: column; }
.kcp-brand-name { font-weight: 650; }
.kcp-brand-sub { font-size: 12px; color: var(--kcp-text-muted); }

.kcp-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.kcp-nav-heading {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--kcp-text-muted); margin: 10px 8px 4px;
}
.kcp-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    color: var(--kcp-text-dim); text-decoration: none;
    background: none; border: none; width: 100%; cursor: pointer;
    font: inherit; text-align: left;
}
.kcp-nav-item:hover { background: var(--kcp-surface-2); color: var(--kcp-text); }
.kcp-nav-item--active { background: var(--kcp-surface-2); color: var(--kcp-accent-text); }
.kcp-nav-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.kcp-nav-signout { margin-top: auto; }
.kcp-nav-item--action { color: var(--kcp-text-muted); }

.kcp-sidebar-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--kcp-text-muted); }
.kcp-operator-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.kcp-operator { display: flex; flex-direction: column; }
.kcp-operator-name { color: var(--kcp-text-dim); }
.kcp-operator-company { font-size: 12px; color: var(--kcp-accent-text); }

.kcp-main { flex: 1; min-width: 0; }
.kcp-content { padding: 28px 32px; }

/* --- Page ----------------------------------------------------------------- */
.kcp-page { max-width: 1100px; }
.kcp-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.kcp-page-head h1 { margin: 0 0 4px; font-size: 24px; }
.kcp-page-sub { margin: 0; color: var(--kcp-text-muted); }

.kcp-btn {
    padding: 8px 16px; border-radius: 8px; border: 1px solid var(--kcp-border);
    background: var(--kcp-surface-2); color: var(--kcp-text); cursor: pointer; font: inherit;
}
.kcp-btn:hover:not(:disabled) { border-color: var(--kcp-accent); }
.kcp-btn:disabled { opacity: .5; cursor: default; }

.kcp-empty { padding: 40px; text-align: center; color: var(--kcp-text-muted); }
.kcp-empty[role="status"] h2 { color: var(--kcp-text); margin: 0 0 8px; }
.kcp-empty[role="status"] p { max-width: 46ch; margin: 0 auto 16px; }
.kcp-textlink { color: var(--kcp-accent-text); }

.kcp-banner { padding: 12px 16px; border-radius: 8px; margin: 12px 0; }
.kcp-banner--error { background: rgba(239,68,68,.12); color: var(--kcp-danger-text); border: 1px solid rgba(239,68,68,.4); }
.kcp-banner--info { background: rgba(99,102,241,.12); color: var(--kcp-info-text); border: 1px solid rgba(99,102,241,.4); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kcp-banner--warn { background: rgba(245,158,11,.12); color: var(--kcp-warn-text); border: 1px solid rgba(245,158,11,.4); display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.kcp-table { width: 100%; border-collapse: collapse; background: var(--kcp-surface); border-radius: 10px; overflow: hidden; }
.kcp-table th, .kcp-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--kcp-border); font-size: 14px; }
.kcp-table th { color: var(--kcp-text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.kcp-table tbody tr:last-child td { border-bottom: none; }
.kcp-cell-strong { color: var(--kcp-text); font-weight: 600; }

/* Named-entity table cell: the human title leads, a secondary line carries the author/channel, and the
   entity id lives in the cell's title= tooltip. Titles are platform captions and can run to ~2000 chars,
   so they clamp to two lines — the tooltip keeps the full text reachable (truncate-with-full-text rule). */
.kcp-obs-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
/* One column holds both: an observation with a canonical URL renders an <a>, one without renders a
   <span> (Research.razor:249-257). Colour alone cannot carry that difference — --kcp-accent-text
   against --kcp-text is 1.70:1, far below WCAG 1.4.1's 3:1 for a non-text distinction — so the
   underline is always on and hover/focus thickens it rather than introducing it (F-260903-UNRI-43). */
a.kcp-obs-title { color: var(--kcp-accent-text); text-decoration: underline; text-underline-offset: 2px; }
a.kcp-obs-title:hover, a.kcp-obs-title:focus-visible { text-decoration-thickness: 2px; }
.kcp-obs-author { display: block; margin: 2px 0 0; font-weight: 400; }

/* --- Sign-in -------------------------------------------------------------- */
.kcp-signin-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(1200px 600px at 50% -10%, #1a2030, var(--kcp-bg));
    padding: 24px;
}
.lg-card {
    width: 100%; max-width: 420px; background: var(--kcp-surface);
    border: 1px solid var(--kcp-border); border-radius: 16px; padding: 32px;
}
.lg-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.lg-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, var(--kcp-accent), #8b5cf6); color: #fff; font-weight: 700;
}
.lg-brand-text { display: flex; flex-direction: column; }
.lg-brand-name { font-weight: 650; }
.lg-brand-sub { font-size: 12px; color: var(--kcp-text-muted); }
.lg-title { margin: 0 0 6px; font-size: 22px; }
.lg-subtitle { margin: 0 0 20px; color: var(--kcp-text-muted); font-size: 14px; }
.lg-form { display: flex; flex-direction: column; gap: 16px; }
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-label { font-size: 13px; color: var(--kcp-text-dim); }
.lg-input {
    padding: 10px 12px; border-radius: 8px; border: 1px solid var(--kcp-border);
    background: var(--kcp-bg); color: var(--kcp-text); font: inherit;
}
.lg-input:focus { outline: none; border-color: var(--kcp-accent); }
.lg-hint { font-size: 12px; color: var(--kcp-text-muted); }
.lg-submit {
    margin-top: 8px; padding: 11px; border-radius: 8px; border: none;
    background: linear-gradient(135deg, var(--kcp-accent), #8b5cf6); color: #fff;
    font: inherit; font-weight: 600; cursor: pointer;
}
.lg-banner { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.lg-banner--error { background: rgba(239,68,68,.12); color: var(--kcp-danger-text); border: 1px solid rgba(239,68,68,.4); }
.lg-banner--warn { background: rgba(245,158,11,.12); color: var(--kcp-warn-text); border: 1px solid rgba(245,158,11,.4); }

/* ============================================================================
   P6 operator console — section shells (Research / Library / Studio / Publishing /
   Settings). Extends the P1 token system; no new dependencies, all custom CSS.
   ============================================================================ */
:root {
    --kcp-ok: #22c55e;
    --kcp-ok-text: #86efac;
    --kcp-info-text: #93c5fd;
}

.kcp-page--wide { max-width: 1280px; }
.kcp-page--full { max-width: none; }

/* Focus visibility (a11y) — every interactive control shows a ring. */
.kcp-btn:focus-visible, .kcp-chip:focus-visible, .kcp-nav-item:focus-visible,
.kcp-stat:focus-visible, .kcp-board-card:focus-visible, .kcp-settings-card:focus-visible,
.lg-input:focus-visible, a:focus-visible,
.kcp-frame:focus-visible {
    outline: 2px solid var(--kcp-accent); outline-offset: 2px;
}

/* --- Buttons (variants) --------------------------------------------------- */
.kcp-btn--primary { background: linear-gradient(135deg, var(--kcp-accent), #8b5cf6); border-color: transparent; color: #fff; font-weight: 600; }
.kcp-btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.kcp-btn--danger { border-color: rgba(239,68,68,.5); color: var(--kcp-danger-text); }
.kcp-btn--danger:hover:not(:disabled) { border-color: var(--kcp-danger); background: rgba(239,68,68,.1); }
.kcp-btn--sm { padding: 5px 10px; font-size: 13px; }

/* --- Cards ---------------------------------------------------------------- */
.kcp-card {
    background: var(--kcp-surface); border: 1px solid var(--kcp-border);
    border-radius: 12px; padding: 20px; margin: 16px 0;
}
.kcp-card--accent { border-color: rgba(99,102,241,.5); box-shadow: 0 0 0 1px rgba(99,102,241,.25) inset; }
.kcp-card-title { margin: 0 0 12px; font-size: 16px; font-weight: 650; }
.kcp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kcp-card-head .kcp-card-title { margin: 0; }

/* --- Stat tiles ----------------------------------------------------------- */
.kcp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 8px 0 4px; }
.kcp-stat {
    display: flex; flex-direction: column; gap: 6px; padding: 18px;
    background: var(--kcp-surface); border: 1px solid var(--kcp-border); border-radius: 12px;
    text-decoration: none; color: inherit;
}
.kcp-stat:hover { border-color: var(--kcp-accent); }
.kcp-stat--warn { border-color: rgba(245,158,11,.5); }
.kcp-stat-num { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kcp-stat-label { font-size: 13px; color: var(--kcp-text-muted); }

/* --- Pipeline snapshot ---------------------------------------------------- */
.kcp-pipeline { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.kcp-pipeline-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kcp-pipeline-count { font-variant-numeric: tabular-nums; color: var(--kcp-text-dim); font-weight: 600; }

/* --- Badges (text + colour, never colour alone) --------------------------- */
.kcp-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
    border: 1px solid transparent;
}
.kcp-badge--neutral { background: var(--kcp-surface-2); color: var(--kcp-text-dim); border-color: var(--kcp-border); }
.kcp-badge--info { background: rgba(99,102,241,.14); color: var(--kcp-info-text); border-color: rgba(99,102,241,.35); }
.kcp-badge--ok { background: rgba(34,197,94,.14); color: var(--kcp-ok-text); border-color: rgba(34,197,94,.35); }
.kcp-badge--warn { background: rgba(245,158,11,.14); color: var(--kcp-warn-text); border-color: rgba(245,158,11,.35); }
.kcp-badge--danger { background: rgba(239,68,68,.14); color: var(--kcp-danger-text); border-color: rgba(239,68,68,.35); }

/* --- Chips (niche/platform/variant selectors) ----------------------------- */
.kcp-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.kcp-chiprow--sm { margin: 0; }
.kcp-chip {
    padding: 7px 14px; border-radius: 999px; border: 1px solid var(--kcp-border);
    background: var(--kcp-surface-2); color: var(--kcp-text-dim); cursor: pointer; font: inherit; font-size: 14px;
}
.kcp-chip:hover { border-color: var(--kcp-accent); color: var(--kcp-text); }
.kcp-chip--active { background: rgba(99,102,241,.18); border-color: var(--kcp-accent); color: var(--kcp-accent-text); }
.kcp-chip--sm { padding: 4px 10px; font-size: 12px; }

/* --- Meta text / numbers -------------------------------------------------- */
.kcp-meta { color: var(--kcp-text-muted); font-size: 13px; margin: 6px 0; }
/* One niche platform in the meta line: keeps the name and its "unsupported" flag together, spaced. */
.kcp-inline-platform { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px; }
.kcp-inline-platform .kcp-badge { font-size: 10px; }
.kcp-meta--danger { color: var(--kcp-danger-text); }
.kcp-num { text-align: right; font-variant-numeric: tabular-nums; }
.kcp-narrative { margin: 4px 0 8px; color: var(--kcp-text-dim); }

/* --- Two-column layout ---------------------------------------------------- */
.kcp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 960px) { .kcp-two-col { grid-template-columns: 1fr; } }

/* --- Style pattern list --------------------------------------------------- */
.kcp-pattern-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 12px; }
.kcp-pattern { border-top: 1px solid var(--kcp-border); padding-top: 12px; }
.kcp-pattern-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcp-pattern-conf { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--kcp-text-muted); font-variant-numeric: tabular-nums; }
.kcp-meter { width: 80px; height: 6px; border-radius: 3px; background: var(--kcp-surface-2); overflow: hidden; }
.kcp-meter-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--kcp-accent), #8b5cf6); }
.kcp-pattern-desc { margin: 6px 0 2px; }

/* --- Idea queue ----------------------------------------------------------- */
.kcp-idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.kcp-idea { background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.kcp-idea-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcp-idea-angle { margin: 4px 0 0; font-size: 15px; }
.kcp-idea-hook { margin: 0; color: var(--kcp-text-dim); font-style: italic; }
.kcp-idea-actions { margin-top: 8px; display: flex; gap: 8px; }

/* --- Beats / shot list ---------------------------------------------------- */
.kcp-beat-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; counter-reset: beat; }
.kcp-beat { display: flex; gap: 14px; padding: 12px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; }
.kcp-beat-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 64px; }
.kcp-beat-order { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--kcp-surface); border: 1px solid var(--kcp-border); font-weight: 700; font-variant-numeric: tabular-nums; }
.kcp-beat-body { flex: 1; min-width: 0; }
.kcp-beat-shot { margin: 0 0 4px; font-weight: 500; }
.kcp-beat-vo { margin: 0 0 4px; color: var(--kcp-accent-text); font-size: 14px; }

/* --- Inline forms --------------------------------------------------------- */
.kcp-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kcp-inline-form .lg-input { flex: 1 1 auto; min-width: 120px; }
.kcp-inline-form--sm { margin-top: 8px; }
.kcp-inline-form--sm .lg-input { padding: 6px 10px; font-size: 13px; }
.kcp-file { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 180px; }
.kcp-file input[type=file] { max-width: 200px; font-size: 13px; }
.kcp-file-name { color: var(--kcp-muted, #94a3b8); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Filter bar ----------------------------------------------------------- */
.kcp-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.kcp-filterbar-sep { width: 1px; height: 20px; background: var(--kcp-border); margin: 0 4px; }

/* --- Clip grid ------------------------------------------------------------ */
.kcp-clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.kcp-clip { background: var(--kcp-surface); border: 1px solid var(--kcp-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.kcp-clip-thumb { position: relative; aspect-ratio: 9 / 16; max-height: 200px; background: linear-gradient(160deg, #1b212b, #0c0f14); display: flex; align-items: flex-end; justify-content: flex-start; }
.kcp-clip-dur { margin: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.55); font-size: 12px; font-variant-numeric: tabular-nums; }
.kcp-clip-flag { position: absolute; top: 8px; right: 8px; }
.kcp-clip-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.kcp-clip-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcp-tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.kcp-tag { padding: 2px 8px; border-radius: 6px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); font-size: 12px; color: var(--kcp-text-dim); }

/* --- Studio board (kanban) ------------------------------------------------ */
.kcp-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.kcp-board-col { flex: 0 0 260px; background: var(--kcp-surface); border: 1px solid var(--kcp-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.kcp-board-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcp-board-count { font-variant-numeric: tabular-nums; color: var(--kcp-text-muted); font-weight: 600; }
.kcp-board-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 9px; text-decoration: none; color: inherit; }
.kcp-board-card:hover { border-color: var(--kcp-accent); }
.kcp-board-card-title { font-weight: 600; }

/* --- Review / approval scrubber ------------------------------------------- */
.kcp-review { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: 18px; }
@media (max-width: 820px) { .kcp-review { grid-template-columns: 1fr; } }
.kcp-preview { position: relative; aspect-ratio: 9 / 16; max-height: 420px; border-radius: 12px; background: linear-gradient(160deg, #12161d, #05070a); display: flex; align-items: center; justify-content: center; border: 1px solid var(--kcp-border); }
.kcp-preview-play { width: 56px; height: 56px; color: rgba(255,255,255,.65); }
.kcp-preview-key { position: absolute; bottom: 10px; left: 10px; right: 10px; font-size: 11px; color: var(--kcp-text-muted); word-break: break-all; }
.kcp-preview--empty { pointer-events: none; }
video.kcp-preview { width: 100%; object-fit: contain; background: #000; }
.kcp-review-side { display: flex; flex-direction: column; gap: 8px; }
.kcp-encode-list { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.kcp-encode-list code { color: var(--kcp-text-dim); word-break: break-all; }
.kcp-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }

/* --- Toggle switch (draft-first opt-in) ----------------------------------- */
.kcp-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.kcp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.kcp-switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); transition: background .15s; }
.kcp-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--kcp-text-muted); transition: transform .15s, background .15s; }
.kcp-switch input:checked + .kcp-switch-track { background: rgba(99,102,241,.35); border-color: var(--kcp-accent); }
.kcp-switch input:checked + .kcp-switch-track::after { transform: translateX(16px); background: var(--kcp-accent-text); }
.kcp-switch-text { font-size: 13px; color: var(--kcp-text-dim); }

/* --- Manual publish queue ------------------------------------------------- */
.kcp-queue { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 10px; }
.kcp-queue-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; }
.kcp-queue-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(160deg, #1b212b, #0c0f14); border: 1px solid var(--kcp-border); display: flex; align-items: center; justify-content: center; color: var(--kcp-text-muted); overflow: hidden; }
.kcp-queue-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kcp-queue-thumb svg { width: 20px; height: 20px; }
.kcp-queue-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.kcp-queue-title { font-weight: 600; }
.kcp-queue-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* --- Success banner ------------------------------------------------------- */
.kcp-banner--ok { background: rgba(34,197,94,.12); color: var(--kcp-ok-text); border: 1px solid rgba(34,197,94,.4); }

/* --- Footnote / contract-gap note ----------------------------------------- */
.kcp-note { margin-top: 12px; font-size: 12px; color: var(--kcp-text-muted); border-left: 2px solid var(--kcp-border); padding-left: 10px; }

/* --- Multi-step progress (ingest / publish) ------------------------------- */
.kcp-steps { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.kcp-step { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kcp-text-muted); }
.kcp-step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); }
.kcp-step--active { color: var(--kcp-accent-text); font-weight: 600; }
.kcp-step--active .kcp-step-dot { background: var(--kcp-accent); border-color: var(--kcp-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
.kcp-step--done { color: var(--kcp-ok-text); }
.kcp-step--done .kcp-step-dot { background: var(--kcp-ok); border-color: var(--kcp-ok); }

/* --- Channel picker (publish fan-out) ------------------------------------- */
.kcp-checkrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.kcp-check { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); cursor: pointer; font-size: 14px; }
.kcp-check:hover { border-color: var(--kcp-accent); }
.kcp-check--on { background: rgba(99,102,241,.14); border-color: var(--kcp-accent); color: var(--kcp-accent-text); }
.kcp-check input { accent-color: var(--kcp-accent); width: 16px; height: 16px; }
.kcp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.kcp-field-label { font-size: 13px; color: var(--kcp-text-dim); }

/* --- New-project create surface (P10 Format-selectable) ------------------- */
.kcp-actions { display: flex; gap: 8px; align-items: center; }
.kcp-actions--center { justify-content: center; }
.kcp-niche-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0; }
.kcp-create { margin: 12px 0 16px; padding: 16px; }
.kcp-create-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.kcp-create-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* --- Per-target publish results ------------------------------------------- */
.kcp-target-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.kcp-target { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 9px; }
.kcp-target-platform { font-weight: 600; flex: 0 0 auto; }

/* --- Inline confirmation (destructive / irreversible actions) ------------- */
.kcp-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.4); }
.kcp-confirm-text { font-size: 13px; color: var(--kcp-warn-text); }
.kcp-confirm-actions { display: flex; gap: 8px; }

/* --- Settings grid -------------------------------------------------------- */
.kcp-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kcp-settings-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--kcp-surface); border: 1px solid var(--kcp-border); border-radius: 12px; text-decoration: none; color: inherit; }
.kcp-settings-card:hover:not(.kcp-settings-card--pending) { border-color: var(--kcp-accent); }
.kcp-settings-card--pending { opacity: .6; }
.kcp-settings-title { font-weight: 650; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* --- Provider connections editor (Settings → provider-connections) -------- */
.pc-head-actions { display: flex; gap: 8px; align-items: center; }
.pc-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pc-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 9px; }
.pc-status-name { font-size: 13px; font-weight: 600; color: var(--kcp-text-dim); }

.pc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 4px; }
.pc-field--wide { grid-column: 1 / -1; }
.pc-textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.lg-field .lg-label .kcp-badge { margin-left: 6px; }

.pc-extra { margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--kcp-border); }
.pc-subhead { margin: 0; font-size: 14px; font-weight: 600; color: var(--kcp-text-dim); }
.pc-extra-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }

.pc-toggles { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 4px; }
.pc-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--kcp-text-dim); cursor: pointer; }
.pc-check input { accent-color: var(--kcp-accent); width: 16px; height: 16px; }

.pc-form-actions { display: flex; gap: 10px; margin-top: 16px; }

.pc-row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-test { display: inline-block; font-size: 12px; padding: 4px 8px; border-radius: 7px; max-width: 320px; }
.pc-test--ok { background: rgba(34,197,94,.12); color: var(--kcp-ok-text); border: 1px solid rgba(34,197,94,.35); }
.pc-test--warn { background: rgba(245,158,11,.12); color: var(--kcp-warn-text); border: 1px solid rgba(245,158,11,.4); }
.pc-test--err { background: rgba(239,68,68,.12); color: var(--kcp-danger-text); border: 1px solid rgba(239,68,68,.35); }
.pc-no-test { font-style: italic; }

/* Schema-driven form: field stack, model custom hatch, JSON error, webhook display. */
.pc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 4px 0; }
.pc-field--wide { grid-column: 1 / -1; }
.pc-model-custom { margin-top: 8px; }
.pc-field-error { font-size: 12px; color: var(--kcp-danger-text); }
.lg-input--readonly { opacity: .7; cursor: not-allowed; }
.pc-webhook { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; padding: 12px 14px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 9px; }
.pc-webhook-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--kcp-text-dim); word-break: break-all; }

/* --- Identity & security (Settings → users / roles / account / audit) ------ */
/* Toolbar: filter controls + right-aligned actions above a table. */
.id-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.id-toolbar .id-spacer { flex: 1 1 auto; }
.id-search { min-width: 220px; padding: 8px 11px; background: var(--kcp-surface); border: 1px solid var(--kcp-border); border-radius: 8px; color: var(--kcp-text); font-size: 14px; }
.id-select { padding: 8px 11px; background: var(--kcp-surface); border: 1px solid var(--kcp-border); border-radius: 8px; color: var(--kcp-text); font-size: 14px; }

/* Segment / tab bar for detail sub-views (roles, permissions, module access). */
.id-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--kcp-border); margin: 4px 0 18px; }
.id-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--kcp-text-muted); cursor: pointer; }
.id-tab:hover { color: var(--kcp-text-dim); }
.id-tab--active { color: var(--kcp-text); border-bottom-color: var(--kcp-accent); }

/* Two-column key/value detail. */
.id-detail-grid { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; align-items: baseline; }
.id-detail-grid dt { color: var(--kcp-text-muted); font-size: 13px; }
.id-detail-grid dd { margin: 0; color: var(--kcp-text); font-size: 14px; }

/* Permission catalog: one group per module, a checkbox grid within. */
.id-perm-group { margin-bottom: 18px; }
.id-perm-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.id-perm-group-title { font-size: 14px; font-weight: 600; color: var(--kcp-text-dim); }
.id-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.id-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--kcp-text-dim); cursor: pointer; }
.id-check input { accent-color: var(--kcp-accent); width: 16px; height: 16px; }

/* A right-aligned save/actions bar under an editor. */
.id-form-actions { display: flex; gap: 10px; margin-top: 18px; }
.id-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.id-field--wide { grid-column: 1 / -1; }

/* Blazor error UI */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: #2b0f10; color: #ffb4b4; padding: 12px 20px; border-top: 1px solid var(--kcp-danger);
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color: #fff; cursor: pointer; margin-left: 12px; }

/* --- Personas (Library → personas) ---------------------------------------- */
.pk-head-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--kcp-text-dim); cursor: pointer; }
.pk-check input { accent-color: var(--kcp-accent); width: 16px; height: 16px; }

/* Editor: fields beside the live prompt preview; stacks on narrow screens. */
.pk-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .pk-form { grid-template-columns: 1fr; } }
.pk-form-fields { display: flex; flex-direction: column; }
.pk-textarea { resize: vertical; line-height: 1.5; }

.pk-preview-panel { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; align-self: start; }
.pk-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pk-sample { display: flex; flex-direction: column; gap: 4px; }
.pk-preview { margin: 0; padding: 12px; background: var(--kcp-bg); border: 1px solid var(--kcp-border); border-radius: 8px; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--kcp-text-dim); max-height: 320px; overflow: auto; }
.pk-preview code { color: inherit; }

.pk-form-actions { display: flex; gap: 10px; margin-top: 16px; }

/* Kit list — one card per persona, each with its reference gallery. */
.pk-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.pk-kit { background: var(--kcp-surface); border: 1px solid var(--kcp-border); border-radius: 12px; padding: 18px; }
.pk-kit--archived { opacity: .72; }
.pk-kit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pk-kit-title { display: flex; align-items: center; gap: 10px; }
.pk-kit-name { margin: 0; font-size: 17px; font-weight: 650; }
.pk-kit-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pk-kit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; }

.pk-blocks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pk-block { margin: 0; color: var(--kcp-text-dim); font-size: 14px; line-height: 1.5; }
.pk-block-lead { display: inline-block; min-width: 74px; color: var(--kcp-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }

.pk-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pk-ref-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .pk-ref-grid { grid-template-columns: 1fr; } }
.pk-ref { margin: 0; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.pk-ref-thumb { aspect-ratio: 3 / 4; background: linear-gradient(160deg, #1b212b, #0c0f14); display: flex; align-items: center; justify-content: center; }
.pk-ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-ref-fallback, .pk-ref-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; color: var(--kcp-text-dim); font-weight: 600; font-size: 14px; }
.pk-ref-empty { background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255,255,255,.03) 8px, rgba(255,255,255,.03) 16px); color: var(--kcp-text-muted); }
.pk-ref-fallback { background: linear-gradient(160deg, #2a2140, #12161d); }
.pk-ref-fallback-sub { font-size: 11px; font-weight: 500; color: var(--kcp-text-muted); }
.pk-ref-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 13px; color: var(--kcp-text-dim); }

/* PE2 — structured identity editor: mode toggle, attribute panels, calibrated chips, compiled preview. */
.pk-identity-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pk-mode-toggle { display: inline-flex; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 8px; padding: 2px; gap: 2px; }
.pk-mode-btn { appearance: none; border: 0; background: transparent; color: var(--kcp-text-dim); font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.pk-mode-btn:hover { color: var(--kcp-text); }
.pk-mode-btn--active { background: var(--kcp-surface); color: var(--kcp-text); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pk-mode-btn:focus-visible { outline: 2px solid var(--kcp-accent); outline-offset: 2px; }

.pk-convert-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.pk-attr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.pk-attr-grid .kcp-field { margin: 0; }
.pk-attr-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .pk-attr-grid { grid-template-columns: 1fr; } }

.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pk-chip { appearance: none; border: 1px solid var(--kcp-border); background: var(--kcp-surface-2); color: var(--kcp-text-dim); font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.pk-chip:hover { border-color: var(--kcp-accent); color: var(--kcp-text); background: var(--kcp-surface); }
.pk-chip:focus-visible { outline: 2px solid var(--kcp-accent); outline-offset: 2px; }

.pk-compiled { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pk-compiled-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pk-preview--compiled { max-height: 160px; }
.pk-bytes { font-variant-numeric: tabular-nums; }

/* Version stamp + edited-since indicator (editor header + kit card + picker). */
.pk-stamp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pk-version { font-variant-numeric: tabular-nums; }
.pk-stale-refs { margin: 8px 0; }

/* Studio per-project persona picker. */
.pk-picker { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.pk-picker-stamp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* #27 — project outfit/appearance anchor sub-panel (inside the persona card). */
.pk-guidance { margin: 6px 0 0; }
.pk-anchor { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kcp-border); display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.pk-anchor-head { display: flex; align-items: center; gap: 8px; }
.pk-anchor-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--kcp-text); }
.pk-anchor-current { display: flex; gap: 12px; align-items: flex-start; }
.pk-anchor-thumb { width: 96px; min-width: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--kcp-border); }
.pk-anchor-meta { display: flex; flex-direction: column; gap: 6px; }
.pk-anchor-desc { margin: 0; }
.pk-anchor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }

/* Physique reference (2026-09-01) — editor sub-panel: attestation gate + upload/remove + thumbnails. */
.pk-physique { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kcp-border); display: flex; flex-direction: column; gap: 10px; }
.pk-physique-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pk-physique-note { margin: 0; max-width: 720px; line-height: 1.5; }
.pk-physique-attest { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 8px; font-size: 13px; line-height: 1.45; max-width: 720px; }
.pk-physique-attest input { margin-top: 2px; }
.pk-physique-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .pk-physique-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pk-physique-item { margin: 0; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.pk-physique-thumb { aspect-ratio: 3 / 4; background: linear-gradient(160deg, #1b212b, #0c0f14); display: flex; align-items: center; justify-content: center; }
.pk-physique-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-physique-cap { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 10px; font-size: 13px; color: var(--kcp-text-dim); }
.pk-physique-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pk-look { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kcp-border); display: flex; flex-direction: column; gap: 10px; }
.pk-look-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pk-look-attest-basis { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 12px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 8px; }
.pk-look-attest-basis legend { padding: 0 4px; }
.pk-look-consent { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pk-look-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pk-look-item { display: flex; flex-direction: column; gap: 10px; max-width: 360px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; padding: 12px; }
.pk-look-thumb { aspect-ratio: 3 / 4; max-width: 160px; background: linear-gradient(160deg, #1b212b, #0c0f14); display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden; }
.pk-look-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-look-attestation { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.pk-look-attestation dt { color: var(--kcp-text-dim); }
.pk-look-attestation dd { margin: 0; }

/* P8d — StoryboardReview batch AI generation panel. */
.kcp-batch { background: var(--kcp-surface); border: 1px solid var(--kcp-border); border-radius: 14px; padding: 18px 20px; margin: 16px 0 20px; display: flex; flex-direction: column; gap: 14px; }
.kcp-batch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kcp-batch-title { margin: 0 0 2px; font-size: 17px; }
.kcp-batch-cost { display: flex; flex-direction: column; gap: 2px; background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; padding: 12px 14px; }
.kcp-batch-figure { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kcp-text); }
.kcp-batch-tier { font-size: 12px; color: var(--kcp-text-muted); }
.kcp-batch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kcp-batch-beat-reason { color: var(--kcp-danger-text); }

/* #29 — frame-sampled trim panel (pick Scene In/Out from sampled frames). */
.kcp-scene-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.kcp-scene { background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 12px; padding: 14px; }
.kcp-scene-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.kcp-scene-order {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--kcp-surface); border: 1px solid var(--kcp-border);
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kcp-text-dim);
}
.kcp-scene-window { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.kcp-scene-noframes { margin: 4px 0 0; }

/* The strip: horizontally scrollable so a wide clip never forces the page to scroll sideways. */
.kcp-framestrip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; }
.kcp-frame {
    position: relative; flex: 0 0 auto; width: 92px; padding: 0;
    background: var(--kcp-surface); border: 2px solid var(--kcp-border); border-radius: 8px;
    cursor: pointer; overflow: hidden; color: var(--kcp-text-dim);
    transition: border-color .15s ease, transform .15s ease;
}
.kcp-frame:hover:not(:disabled) { border-color: var(--kcp-accent); }
.kcp-frame:disabled { opacity: .5; cursor: default; }
.kcp-frame-img { display: block; width: 100%; height: 116px; object-fit: cover; background: var(--kcp-bg); }
.kcp-frame-time {
    display: block; padding: 3px 4px; font-size: 11px; text-align: center;
    font-variant-numeric: tabular-nums; color: var(--kcp-text-muted);
}
/* In/Out markers use colour AND a text tag (never colour alone). */
.kcp-frame--in { border-color: var(--kcp-ok); }
.kcp-frame--out { border-color: var(--kcp-accent); }
.kcp-frame--within { border-color: rgba(99,102,241,.5); background: rgba(99,102,241,.08); }
.kcp-frame-tag {
    position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff;
}
.kcp-frame-tag--in { background: var(--kcp-ok); color: #06210f; }
.kcp-frame-tag--out { background: var(--kcp-accent); }

.kcp-scene-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.kcp-scene-buttons { display: flex; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
    .kcp-frame { transition: none; }
}
.pk-gen-error { color: var(--kcp-danger-text); }

/* ── PE3 instruction-based image edits ──────────────────────────────────────────────────── */
.pk-ref-edit { display: flex; gap: 6px; padding: 8px 10px 10px; align-items: center; }
.pk-edit-input {
    flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 13px; border-radius: 8px;
    background: var(--kcp-surface); border: 1px solid var(--kcp-border); color: var(--kcp-text);
}
.pk-edit-input::placeholder { color: var(--kcp-text-muted); }
.pk-edit-input:focus-visible { outline: 2px solid var(--kcp-accent); outline-offset: 1px; border-color: var(--kcp-accent); }
.pk-edit-input:disabled { opacity: .5; }

.pk-edits { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.pk-edit { background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; padding: 12px; }
.pk-edit--failed { border-color: rgba(239,68,68,.4); }
.pk-edit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk-edit-angle { font-weight: 600; color: var(--kcp-text); }
.pk-edit-instr { color: var(--kcp-text-dim); font-size: 13px; }
.pk-edit-compare { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.pk-edit-tile { width: 150px; max-width: 45%; }
.pk-edit-cost { font-variant-numeric: tabular-nums; color: var(--kcp-text-dim); }
.pk-edit-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* The warn banner is flex-row by default (space-between); the sync-check stacks its items. */
.pk-sync-check { flex-direction: column; align-items: stretch; gap: 8px; }
.pk-sync-title { color: var(--kcp-warn-text); }
.pk-sync-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk-sync-instr { color: var(--kcp-text); font-size: 13px; }
.pk-sync-fields { display: flex; gap: 6px; flex-wrap: wrap; }
.pk-sync-generic { color: var(--kcp-text-dim); font-size: 13px; font-style: italic; }

/* ── Candidate history (accepted/discarded image edits, CRUD P1 wave 1) ─────────────────────────────── */
.pk-history { margin-top: 14px; }
.pk-history-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-history-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; background: var(--kcp-surface-2); border-radius: 8px; }
.pk-history-angle { font-weight: 600; color: var(--kcp-text); }
.pk-history-instr { color: var(--kcp-text-dim); font-size: 13px; }
.pk-history-time, .pk-history-cost { color: var(--kcp-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── DC3 named persona looks (FR-DC-KCP-2/-3) ────────────────────────────────────────────────────────── */
.pk-looks { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kcp-border); display: flex; flex-direction: column; gap: 12px; }
.pk-looks-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pk-look { background: var(--kcp-surface-2); border: 1px solid var(--kcp-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pk-look--default { background: var(--kcp-surface); }
.pk-look-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk-look-name { font-weight: 600; color: var(--kcp-text); }
.pk-look-hex { font-variant-numeric: tabular-nums; color: var(--kcp-text-dim); font-size: 12px; }
/* Swatch is always paired with the visible hex text above/beside it — never colour alone. */
.pk-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--kcp-border); flex: none; }
.pk-look-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pk-look-color-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pk-look-edit-form { display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.pk-look-add-form { padding-top: 8px; border-top: 1px dashed var(--kcp-border); }
.pk-look-edit-actions { display: flex; gap: 8px; }
.pk-look-gallery { display: flex; flex-direction: column; gap: 8px; }
.pk-ref-grid--look { grid-template-columns: repeat(3, minmax(90px, 1fr)); }

/* ============================================================================
   Page-load affordances — skeletons, shimmer, nav progress, inline spinner.
   Paint-first: the shell + a shape-matched skeleton render on the FIRST byte
   (prerender) and stay up through the first interactive data load, so a slow
   API never leaves the operator staring at an empty panel (operator complaint
   2026-09-03: "Research takes several seconds with no indication of progress").
   All motion is transform/opacity only and is disabled under reduced-motion.
   ============================================================================ */

/* Screen-reader-only text — the single role=status label a skeleton announces. */
.kcp-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skeleton primitives. Each shape is a --kcp-surface-2 block swept by a shimmer;
   the shapes live under aria-hidden so assistive tech reads the role=status
   sibling ("Loading <page>…") instead of a wall of empty boxes. */
.kcp-skel { display: flex; flex-direction: column; gap: 12px; }
.kcp-skel-line, .kcp-skel-cell, .kcp-skel-circle {
    position: relative; overflow: hidden; background: var(--kcp-surface-2);
}
.kcp-skel-line { height: 12px; border-radius: 6px; }
.kcp-skel-line--title { height: 18px; width: 42%; border-radius: 7px; }
.kcp-skel-line--sm { height: 10px; }
.kcp-skel-line--w30 { width: 30%; } .kcp-skel-line--w40 { width: 40%; }
.kcp-skel-line--w50 { width: 50%; } .kcp-skel-line--w60 { width: 60%; }
.kcp-skel-line--w70 { width: 70%; } .kcp-skel-line--w80 { width: 80%; }
.kcp-skel-circle { border-radius: 50%; flex: 0 0 auto; }

/* The shimmer sweep — animates transform only (never a layout property). */
.kcp-skel-line::after, .kcp-skel-cell::after, .kcp-skel-circle::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
    animation: kcp-shimmer 1.4s ease-in-out infinite;
}
@keyframes kcp-shimmer { to { transform: translateX(100%); } }

/* Skeleton card — mirrors .kcp-card's box so swapping in real content never
   shifts the layout (reserve-space / low CLS). */
.kcp-skel-card {
    background: var(--kcp-surface); border: 1px solid var(--kcp-border);
    border-radius: 12px; padding: 20px; margin: 16px 0;
    display: flex; flex-direction: column; gap: 12px;
}
.kcp-skel-card--flush { margin: 0; }

/* Skeleton table — same cell rhythm as .kcp-table. */
.kcp-skel-table { width: 100%; border-collapse: collapse; background: var(--kcp-surface); border-radius: 10px; overflow: hidden; }
.kcp-skel-table td { padding: 13px 14px; border-bottom: 1px solid var(--kcp-border); }
.kcp-skel-table tr:last-child td { border-bottom: none; }
.kcp-skel-cell { display: block; height: 12px; border-radius: 6px; }

/* Card-grid skeleton (idea queue / clip grid / settings cards). */
.kcp-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kcp-skel-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.kcp-skel-chip { width: 92px; height: 32px; border-radius: 999px; background: var(--kcp-surface-2); position: relative; overflow: hidden; }
.kcp-skel-chip::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
    animation: kcp-shimmer 1.4s ease-in-out infinite;
}
.kcp-skel-row { display: flex; align-items: center; gap: 12px; }
.kcp-skel-fill { flex: 1 1 auto; }

/* Inline progress strip — for refreshes that keep stale data visible (a subtle
   two-line bar under a header) rather than replacing it with a skeleton. */
.kcp-inline-progress { position: relative; height: 2px; border-radius: 2px; background: var(--kcp-surface-2); overflow: hidden; margin: 8px 0; }
.kcp-inline-progress::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(90deg, transparent, var(--kcp-accent), transparent);
    transform: translateX(-100%); animation: kcp-indeterminate 1.1s ease-in-out infinite;
}
@keyframes kcp-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }

/* Top navigation progress bar — indeterminate, appears on LocationChanging. */
.kcp-navprogress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; overflow: hidden; pointer-events: none; }
.kcp-navprogress-bar {
    position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--kcp-accent), var(--kcp-accent-text), transparent);
    animation: kcp-navprogress 1.1s ease-in-out infinite;
}
@keyframes kcp-navprogress { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Inline spinner for async buttons — rotation only. */
.kcp-spinner {
    display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: kcp-spin .7s linear infinite; margin-right: 7px;
}
@keyframes kcp-spin { to { transform: rotate(360deg); } }

/* Blazor reconnect overlay — themed to the dark console (the default is a bare
   white strip). Container-only theming; deeper restyle is follow-up. */
#components-reconnect-modal {
    position: fixed; inset: 0; z-index: 3000; display: none;
    align-items: center; justify-content: center; padding: 24px; text-align: center;
    background: rgba(6, 8, 12, .72); color: var(--kcp-text); font: inherit;
    backdrop-filter: blur(3px);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }

@media (prefers-reduced-motion: reduce) {
    .kcp-skel-line::after, .kcp-skel-cell::after, .kcp-skel-circle::after, .kcp-skel-chip::after,
    .kcp-inline-progress::after, .kcp-navprogress-bar, .kcp-spinner {
        animation: none;
    }
    /* Static, still-legible placeholders when motion is suppressed. */
    .kcp-navprogress-bar { transform: none; opacity: .85; }
    /* Reduced-motion refresh strip: a static tinted fill instead of a sweep parked off-screen. */
    .kcp-inline-progress::after { transform: none; width: 100%; opacity: .5; }
    .kcp-spinner { border-right-color: currentColor; opacity: .6; }
}