/* KICKO console look — the default (console-look.js adds
   html.look-console; ?look=classic opts a browser out). Every rule is scoped
   to that class, so the classic look is untouched. Same language as the
   partner console (tools/partner-demo): flat dark panels, hairlines, lime
   only where it matters, Geist + Geist Mono.
   Restyles only: no layout meaning, state or visibility rule changes here. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

html.look-console {
  --bg: #06090b;
  --surface: #0b1114;
  --surface-2: #10181c;
  --line: #1b252a;
  --line-2: #26333a;
  --text: #e8eef0;
  --muted: #7f8f96;
  --faint: #56656c;
  --accent: #d2ff00;
  --accent-ink: #0a1200;
  --danger: #ff6b6b;
  --pos: #3ddc97;
  --r: 8px;
  --sans: "Geist", "Rubik", "Noto Sans Hebrew", "Segoe UI", system-ui, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
/* The ground, the base font and the focus ring. On the editor page they apply
   only outside Quick Reel mode: in Quick Reel mode the editor is owner-locked
   (QUICK_REEL_LOCKED_AREA_MAP.md) and must look exactly as it does today. */
html.look-console:not([data-page="editor"]) { color-scheme: dark; background: var(--bg); }
html.look-console:not([data-page="editor"]) body,
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
html.look-console:not([data-page="editor"]) :focus-visible,
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- shared page frame (app-pages.css) ---------- */
html.look-console .app-page { width: min(1040px, 100%); padding: 24px 16px 120px; }
html.look-console .page-head { align-items: flex-end; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
html.look-console .page-brand { width: 64px; opacity: .85; }
html.look-console .page-kicker { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
html.look-console .page-title { font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
html.look-console .page-intro { margin-top: 4px; font-size: 13px; }

html.look-console .segmented { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; gap: 2px; margin: 0 0 16px; padding: 3px; border-radius: 9px; border-color: var(--line); background: var(--surface); }
html.look-console .segment { min-height: 30px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 500; }
html.look-console .segment[aria-selected="true"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }

html.look-console .page-section { margin-top: 0; padding: 0; overflow: hidden; border-radius: 10px; border-color: var(--line); background: var(--surface); box-shadow: none; }
html.look-console .page-section > .section-head { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); }
html.look-console .page-section > :not(.section-head) { margin-inline: 16px; }
html.look-console .page-section > .card-list { margin-block: 16px; }
html.look-console .page-section > .page-status { margin-block: 0 12px; }
html.look-console .section-head h2 { font-size: 14px; font-weight: 600; }
html.look-console .section-summary { margin-top: 2px; font-size: 12px; }

html.look-console .primary-action,
html.look-console .secondary-action,
html.look-console .danger-action { min-height: 36px; padding: 0 14px; border-radius: var(--r); font-size: 13px; font-weight: 500; }
html.look-console .primary-action { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 600; }
html.look-console .primary-action:hover { filter: brightness(1.06); }
html.look-console .secondary-action { border-color: var(--line-2); background: var(--surface-2); }
html.look-console .secondary-action:hover { border-color: #33434b; }
html.look-console .danger-action { border-color: #3a2226; background: transparent; }

html.look-console .card-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: start; gap: 12px; }
html.look-console .item-card { border-radius: 10px; border-color: var(--line); background: var(--bg); transition: border-color .15s ease; }
html.look-console .item-card:hover { border-color: var(--line-2); }
html.look-console .item-body { padding: 12px; }
html.look-console .item-title { font-size: 13.5px; font-weight: 600; }
html.look-console .item-meta { margin-top: 5px; color: var(--faint); font-size: 12px; line-height: 1.45; }
html.look-console .item-actions { gap: 6px; margin-top: 12px; }
html.look-console .item-actions .primary-action,
html.look-console .item-actions .secondary-action,
html.look-console .item-actions .ghost-action { min-height: 32px; font-size: 12.5px; }
html.look-console .media-thumb { border-bottom-color: var(--line); background: #030506; }
html.look-console .media-thumb img,
html.look-console .media-thumb video { background: #030506; }
html.look-console .pill { padding: 2px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; }
html.look-console .empty-state { color: var(--muted); font-size: 13px; }
html.look-console .loading-skeleton { border-radius: 10px; }
html.look-console .page-status { font-size: 12px; }
html.look-console .page-section > .page-status:empty { display: none; }

/* Projects: the status pill (Draft / Completed) is the last one; it is a state, not a type. */
html.look-console[data-page="projects"] .item-title-row .pill:last-child { border-color: var(--line-2); background: transparent; color: var(--muted); }

/* ---------- library (inline styles in library.html) ---------- */
html.look-console .plays-filters { gap: 6px; }
html.look-console .plays-filters button { padding: 4px 10px; border-color: var(--line-2); border-radius: 6px; color: var(--muted); font-size: 12.5px; }
html.look-console .plays-filters button:hover { color: var(--text); }
html.look-console .plays-filters button[aria-pressed="true"] { border-color: #3a4a00; background: #10170a; color: var(--accent); font-weight: 500; }
html.look-console .page-section > .plays-filters:not(:empty) { margin-top: 14px; }
html.look-console .select-action { padding: 0 14px; min-height: 32px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 500; }
html.look-console .select-action[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
html.look-console .kicko-action { min-height: 32px; padding: 0 14px; border-radius: var(--r); color: var(--accent-ink); font-size: 13px; font-weight: 600; }
html.look-console .ghost-action { border-color: var(--line-2); border-radius: var(--r); font-weight: 500; }
html.look-console .ghost-action.danger { color: #ff8a8a; border-color: #3a2226; }
html.look-console .item-card.is-selected { outline: 1.5px solid var(--accent); outline-offset: 0; border-color: transparent; }
html.look-console .select-dot { width: 22px; height: 22px; border-width: 1.5px; font-size: 12px; }
html.look-console .play-overlay { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(6, 9, 11, .62); color: #fff; font-size: 16px; line-height: 44px; }
html.look-console .play-overlay:hover { transform: none; border-color: var(--accent); color: var(--accent); }
html.look-console .media-gone { color: var(--faint); background: var(--surface); }
/* The three badge states stay distinct: filed (lime), unrecognised (amber),
   unfiled (the loudest ask, see LIBRARY_UI_MAP.md §4). */
html.look-console .play-badge { padding: 3px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; }
html.look-console .play-badge-empty { border: 1px dashed #4a5a00; background: transparent; color: var(--accent); font-weight: 500; letter-spacing: .02em; }
html.look-console .play-badge-unknown { border: 1px solid rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .1); font-weight: 500; letter-spacing: 0; }
html.look-console .play-phase { padding: 2px 7px; border-color: var(--line-2); border-radius: 4px; color: var(--muted); font-size: 10.5px; font-weight: 500; }
html.look-console .play-rating button { width: 14px; height: 14px; border-color: #3a4a50; }
html.look-console .rating-label { color: var(--muted); font-size: 11px; opacity: 1; }
html.look-console .kicko-report { margin: 14px 16px 0; border-radius: var(--r); border-color: #2c3a00; background: #0d1308; color: var(--text); }
html.look-console .selection-bar { gap: 14px; padding: 10px 12px; border-radius: 10px; border-color: var(--line-2); background: var(--surface-2); box-shadow: 0 16px 44px rgba(0, 0, 0, .5); }
html.look-console .selection-count { font-weight: 600; }
html.look-console .selection-hint { color: var(--muted); opacity: 1; }
html.look-console .selection-actions button { min-height: 36px; padding: 0 14px; font-size: 13px; }
html.look-console .assembly-sheet { background: rgba(4, 8, 10, .66); backdrop-filter: blur(2px); }
html.look-console .assembly-panel { gap: 14px; padding: 18px; border-radius: 12px; border-color: var(--line-2); background: var(--bg); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
html.look-console .assembly-panel h3 { margin: 0; font-size: 16px; font-weight: 600; }
html.look-console .assembly-row { font-size: 13px; }
html.look-console .assembly-row select { padding: 7px 10px; border-color: var(--line-2); border-radius: var(--r); background: var(--surface); }
html.look-console .assembly-note { color: var(--muted); opacity: 1; }
html.look-console .kind-choice label { border-color: var(--line-2); border-radius: var(--r); }
html.look-console .kind-choice label:has(input:checked) { color: var(--accent-ink); }
html.look-console .kicko-modes button { padding: 12px; border-color: var(--line-2); border-radius: var(--r); background: var(--surface); }
html.look-console .kicko-modes button:hover { border-color: #33434b; }
html.look-console .kicko-modes button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
html.look-console .kicko-modes button strong { font-size: 14px; font-weight: 600; }
html.look-console .kicko-modes button small { color: inherit; }
html.look-console .kicko-blocked { border-radius: var(--r); }
html.look-console .sheet-label { color: var(--muted); font-weight: 500; opacity: 1; }
html.look-console .type-options button { padding: 5px 10px; border-color: var(--line-2); border-radius: 6px; font-size: 12.5px; }
html.look-console .type-options button[aria-pressed="true"] { color: var(--accent-ink); font-weight: 600; }
html.look-console .job-badge { border-radius: 10px; border-color: var(--line-2); background: var(--surface-2); }
html.look-console .job-label { font-weight: 500; }
html.look-console .job-pct { font: 500 11px var(--mono); }

/* ---------- account (inline styles in profile.html) ---------- */
html.look-console .profile-shell { width: min(760px, 100%); padding: 20px 16px 120px; }
html.look-console .profile-topbar { gap: 6px; margin-bottom: 18px; }
html.look-console .profile-back,
html.look-console .profile-link { min-height: 32px; padding: 0 12px; border-color: var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 500; }
html.look-console .profile-back:hover,
html.look-console .profile-link:hover { border-color: #33434b; }
html.look-console .profile-back:first-child { margin-inline-end: auto; }
html.look-console .profile-action { min-height: 40px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 13.5px; font-weight: 600; }
html.look-console .profile-action[disabled] { background: var(--surface-2); color: var(--muted); }
html.look-console .profile-back:active,
html.look-console .profile-link:active,
html.look-console .profile-action:active,
html.look-console .profile-mini-action:active { transform: none; }

html.look-console .profile-hero { margin-bottom: 18px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
html.look-console .profile-kicker { display: inline-block; margin: 0 6px 8px 0; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .08em; }
html.look-console .profile-kicker + .profile-kicker { padding: 1px 6px; border: 1px solid #3a4a00; border-radius: 4px; color: #b6db00; font-size: 10px; }
html.look-console .profile-hero h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
html.look-console .profile-muted { color: var(--muted); font-size: 13px; }

html.look-console .profile-grid { gap: 16px; }
html.look-console .profile-card { padding: 0; overflow: hidden; border-color: var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; }
html.look-console .profile-card > h2,
html.look-console .profile-card > .profile-topbar { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
html.look-console .profile-card > .profile-topbar h2 { margin: 0; font-size: 14px; font-weight: 600; }
html.look-console .profile-card > :not(h2):not(.profile-topbar):not(.profile-fields) { margin-inline: 16px; }
html.look-console .profile-card > :last-child { margin-bottom: 16px; }
html.look-console .profile-card > .profile-muted:first-of-type { margin-top: 14px; }

/* Account details read as a definition list, not as tiles. */
html.look-console .profile-fields { gap: 0; }
html.look-console .profile-field { min-height: 0; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
html.look-console .profile-field:nth-child(odd) { border-inline-end: 1px solid var(--line); }
html.look-console .profile-field span { margin-bottom: 3px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
html.look-console .profile-field strong { font-size: 13.5px; font-weight: 500; }
html.look-console .profile-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px; }
html.look-console .profile-actions .profile-action { width: auto; padding: 0 16px; }
html.look-console .profile-actions > .profile-muted { flex-basis: 100%; margin: 0 0 4px; }
html.look-console .profile-actions > .profile-muted:empty { display: none; }

html.look-console .plan-items { gap: 14px; margin-block: 16px; }
html.look-console .plan-item-head { font-size: 13px; }
html.look-console .plan-item-head > :last-child { font-family: var(--mono); color: var(--muted); }
html.look-console .plan-bar { height: 4px; margin-top: 6px; background: var(--line-2); }
html.look-console .plan-bar.full > span { background: var(--danger); }

html.look-console .profile-mini-action { min-height: 30px; padding: 0 10px; border-color: var(--line-2); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 500; }
html.look-console .profile-mini-action.danger { border-color: #3a2226; background: transparent; color: #ff8a8a; }
html.look-console .profile-mini-action-primary { min-height: 36px; border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 600; }
html.look-console .profile-pill,
html.look-console .profile-render-badge { padding: 2px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 500; }
html.look-console .profile-project-item,
html.look-console .profile-media-item,
html.look-console .profile-render-item { border-color: var(--line); border-radius: var(--r); background: var(--bg); animation: none; }
html.look-console .profile-media-item:hover,
html.look-console .profile-project-item:hover { border-color: var(--line-2); background: var(--bg); }
html.look-console .profile-media-thumb { border-radius: 6px; }
html.look-console .profile-render-play { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(6, 9, 11, .62); color: #fff; box-shadow: none; font-size: 14px; }
html.look-console .profile-bulk-bar { border-radius: var(--r); border-color: #2c3a00; background: #0d1308; }
html.look-console .profile-bulk-count { font-weight: 600; }
html.look-console .profile-storage { border-radius: var(--r); border-color: var(--line); background: var(--bg); }
html.look-console .profile-storage-row { color: var(--text); font-weight: 500; }
html.look-console .profile-storage-meter { height: 4px; background: var(--line-2); }
html.look-console .profile-storage-meter span { background: var(--accent); }

@media (max-width: 720px) {
  html.look-console .profile-fields { grid-template-columns: 1fr; }
  html.look-console .profile-field:nth-child(odd) { border-inline-end: 0; }
}

/* ---------- legal, support, accessibility (legal.css) ---------- */
html.look-console .legal-shell { width: min(720px, calc(100% - 32px)); padding: 24px 0 120px; }
html.look-console .legal-topbar { margin-bottom: 16px; }
html.look-console .legal-back,
html.look-console .legal-link { min-height: 32px; padding: 0 12px; border-color: var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 500; }
html.look-console .legal-submit { min-height: 40px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 13.5px; font-weight: 600; }
html.look-console .legal-card { margin-bottom: 16px; padding: 20px; border-color: var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; }
html.look-console .legal-kicker { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .08em; }
html.look-console .legal-card h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
html.look-console .legal-card h2 { margin-top: 4px; font-size: 16px; font-weight: 600; }
html.look-console .legal-muted,
html.look-console .legal-card p,
html.look-console .legal-card li { color: #a9b8be; font-size: 14px; line-height: 1.7; }
html.look-console .legal-card a { color: var(--text); text-decoration-color: var(--faint); text-underline-offset: 3px; }
html.look-console .legal-pill { padding: 3px 8px; border-color: #3a4a00; border-radius: 4px; background: transparent; color: #b6db00; font-size: 11px; font-weight: 500; }
html.look-console .legal-field label { color: var(--muted); font-size: 12px; font-weight: 500; }
html.look-console .legal-field input,
html.look-console .legal-field textarea,
html.look-console .legal-file-picker { min-height: 40px; padding: 9px 12px; border-color: var(--line-2); border-radius: var(--r); background: var(--bg); font-weight: 400; }
html.look-console .legal-field input:focus,
html.look-console .legal-field textarea:focus { border-color: #4a5a00; outline: none; }
html.look-console .legal-file-picker strong { border-radius: 6px; background: var(--surface-2); color: var(--text); font-weight: 500; }
html.look-console .legal-file-remove { min-height: 40px; border-color: #3a2226; border-radius: var(--r); background: transparent; color: #ff8a8a; font-weight: 500; }
html.look-console .legal-status { color: var(--pos); font-size: 13px; font-weight: 500; }

/* ---------- pricing ---------- */
html.look-console[data-page="pricing"] .pricing-shell { width: min(760px, 100%); padding: 20px 16px 120px; }
html.look-console[data-page="pricing"] .pricing-back { min-height: 32px; padding: 0 12px; border-color: var(--line-2); border-radius: var(--r); background: var(--surface); font-size: 12.5px; font-weight: 500; }
html.look-console[data-page="pricing"] .pricing-hero { margin-bottom: 18px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
html.look-console[data-page="pricing"] .pricing-kicker { color: var(--muted); font-weight: 500; letter-spacing: .08em; }
html.look-console[data-page="pricing"] h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
html.look-console[data-page="pricing"] .muted { color: var(--muted); font-size: 13.5px; }
html.look-console[data-page="pricing"] .plans { gap: 16px; }
html.look-console[data-page="pricing"] .pricing-card { padding: 0; overflow: hidden; border-color: var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; }
html.look-console[data-page="pricing"] .plan-head { margin: 0; padding: 16px; border-bottom: 1px solid var(--line); }
html.look-console[data-page="pricing"] .plan-head h2 { font-size: 16px; font-weight: 600; }
html.look-console[data-page="pricing"] .price { color: var(--text); font: 500 26px/1.1 var(--mono); letter-spacing: -.02em; }
html.look-console[data-page="pricing"] .price small { margin-top: 4px; color: var(--muted); font: 400 11.5px var(--sans); letter-spacing: 0; }
html.look-console[data-page="pricing"] .features { gap: 0; padding: 4px 16px; }
html.look-console[data-page="pricing"] .features li { padding: 10px 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: #c4d0d4; font-size: 13.5px; }
html.look-console[data-page="pricing"] .features li:last-child { border-bottom: 0; }
html.look-console[data-page="pricing"] .features li::before { color: var(--accent); font-weight: 600; }
html.look-console[data-page="pricing"] .pricing-card > :not(.plan-head):not(.features) { margin-inline: 16px; }
html.look-console[data-page="pricing"] .cta { width: calc(100% - 32px); min-height: 40px; margin: 12px 16px 16px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 13.5px; font-weight: 600; }

/* One lime button per page: the paid plan. The free plan gets the secondary style. */
html.look-console[data-page="pricing"] #freePlan .cta { border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 500; }

/* ---------- sign in, password reset ---------- */
html.look-console[data-page="login"] body,
html.look-console[data-page="reset-password"] body { background: var(--bg); }
html.look-console[data-page="login"] body::before,
html.look-console[data-page="reset-password"] body::before,
html.look-console[data-page="login"] .card::before,
html.look-console[data-page="reset-password"] .card::before,
html.look-console[data-page="login"] .btn::after,
html.look-console[data-page="reset-password"] .btn::after { content: none; animation: none; }
html.look-console[data-page="login"] .card,
html.look-console[data-page="reset-password"] .card { width: min(100%, 400px); padding: 24px; border-color: var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); animation: none; }
html.look-console[data-page="login"] .brand,
html.look-console[data-page="reset-password"] .brand { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-shadow: none; }
html.look-console[data-page="login"] h1,
html.look-console[data-page="reset-password"] h1 { margin: 6px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
html.look-console[data-page="login"] p,
html.look-console[data-page="reset-password"] p { color: var(--muted); font-size: 13px; font-weight: 400; }
html.look-console[data-page="login"] .tabs { gap: 2px; margin: 18px 0 8px; padding: 3px; border-color: var(--line); border-radius: 9px; background: var(--bg); box-shadow: none; }
html.look-console[data-page="login"] .tab { min-height: 32px; border-radius: 6px; font-size: 13px; font-weight: 500; }
html.look-console[data-page="login"] .tab.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); transform: none; }
html.look-console[data-page="login"] label,
html.look-console[data-page="reset-password"] label { gap: 6px; color: var(--muted); font-size: 12px; font-weight: 500; }
html.look-console[data-page="login"] label.consent { color: var(--muted); font-weight: 400; }
html.look-console[data-page="login"] input,
html.look-console[data-page="login"] select,
html.look-console[data-page="reset-password"] input { min-height: 40px; padding: 9px 12px; border-color: var(--line-2); border-radius: var(--r); background: var(--bg); color: var(--text); font-weight: 400; transition: border-color .15s ease; }
html.look-console[data-page="login"] input:focus,
html.look-console[data-page="login"] select:focus,
html.look-console[data-page="reset-password"] input:focus { border-color: #4a5a00; background: var(--bg); box-shadow: none; transform: none; }
html.look-console[data-page="login"] label.consent input { min-height: 0; accent-color: var(--accent); }
html.look-console[data-page="login"] .btn,
html.look-console[data-page="reset-password"] .btn { min-height: 40px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 13.5px; font-weight: 600; box-shadow: none; }
html.look-console[data-page="login"] .btn:hover,
html.look-console[data-page="reset-password"] .btn:hover { filter: brightness(1.06); box-shadow: none; }
html.look-console[data-page="login"] .btn.secondary,
html.look-console[data-page="reset-password"] .btn.secondary { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }
html.look-console[data-page="login"] .btn:active,
html.look-console[data-page="login"] .tab:active,
html.look-console[data-page="reset-password"] .btn:active { transform: none; }
html.look-console[data-page="login"] .link { color: var(--muted); font-size: 12.5px; font-weight: 500; text-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
html.look-console[data-page="login"] .link:hover { color: var(--text); }
html.look-console[data-page="login"] .status,
html.look-console[data-page="reset-password"] .status { font-size: 12.5px; font-weight: 500; }
html.look-console[data-page="login"] .status.ok,
html.look-console[data-page="reset-password"] .status.ok { color: var(--pos); }

/* ---------- guide ---------- */
html.look-console[data-page="guide"] body { background: var(--bg); }
html.look-console[data-page="guide"] .guide-header { border-bottom-color: var(--line); background: rgba(6, 9, 11, .9); }
html.look-console[data-page="guide"] .guide-back { color: var(--muted); font-size: 13px; font-weight: 500; }
html.look-console[data-page="guide"] .guide-back:hover { color: var(--text); }
html.look-console[data-page="guide"] .guide-header-title { font-size: 14px; font-weight: 600; }
html.look-console[data-page="guide"] .guide-intro h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
html.look-console[data-page="guide"] .guide-intro p { color: var(--muted); }
html.look-console[data-page="guide"] .guide-steps { width: min(720px, 100%); margin: 0 auto; }
html.look-console[data-page="guide"] .guide-step { border-bottom-color: var(--line); }
html.look-console[data-page="guide"] .step-num { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 12px var(--mono); }
html.look-console[data-page="guide"] .step-title { font-size: 15px; font-weight: 600; }
html.look-console[data-page="guide"] .step-badge { border-color: var(--line-2); border-radius: 4px; background: none; color: var(--muted); font-weight: 500; }
html.look-console[data-page="guide"] .step-media { border-color: var(--line); border-radius: 10px; background: var(--surface); }
html.look-console[data-page="guide"] .step-desc { color: #a9b8be; }
html.look-console[data-page="guide"] .step-desc strong { font-weight: 600; }
html.look-console[data-page="guide"] .step-tip { border-color: #2c3a00; border-radius: var(--r); background: #0d1308; color: #a9b8be; }
html.look-console[data-page="guide"] .step-tip strong { font-weight: 600; }

/* ---------- admin: dashboard, users, renders, leads ---------- */
/* These pages define their own tokens on :root; remap them, then flatten. */
html.look-console[data-page="admin-dashboard"],
html.look-console[data-page="admin-users"],
html.look-console[data-page="admin-renders"],
html.look-console[data-page="admin-leads"],
html.look-console[data-page="admin-partner-demo"] {
  --panel: #0b1114; --panel-2: #10181c; --text: #e8eef0; --muted: #7f8f96;
  --accent: #d2ff00; --accent-2: #d2ff00; --line: #1b252a; --radius: 10px;
  --danger: #ff6b6b; --warn: #f5b942; --ok: #3ddc97; --chart-grid: #1b252a; --chart-other: #3a4a50;
}
/* 9 figures: a 3 × 3 strip, so no row is left with a lone tile. */
@media (min-width: 921px) {
  html.look-console[data-page="admin-dashboard"] .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.look-console[data-page="admin-dashboard"] .stat-card:nth-child(3n+1) { border-inline-start: 0; }
  html.look-console[data-page="admin-dashboard"] .stat-card:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  html.look-console[data-page^="admin-"] :is(.stat-card, .summary-card) { border-inline-start: 0; }
  html.look-console[data-page^="admin-"] :is(.stat-card, .summary-card):not(:first-child) { border-top: 1px solid var(--line); }
}
html.look-console[data-page="admin-dashboard"] .stat-value small,
html.look-console[data-page="admin-dashboard"] .stat-value span { font: 400 13px var(--sans); color: var(--muted); }
html.look-console[data-page^="admin-"]:not([data-page="admin-card"]) body { background: var(--bg); font-family: var(--sans); }
html.look-console[data-page^="admin-"] .shell { width: min(1280px, calc(100% - 32px)); padding: 24px 0 64px; }
html.look-console[data-page^="admin-"] .topbar { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
html.look-console[data-page^="admin-"] .topbar h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
html.look-console[data-page^="admin-"] .subtitle { margin-top: 4px; font-size: 13px; }
html.look-console[data-page^="admin-"] :is(.admin-card, .stat-card, .chart-card, .empty, .table-wrap, .summary-card, .lead-card, .toolbar, .modal-card) { border-color: var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; backdrop-filter: none; }
html.look-console[data-page^="admin-"] .btn { min-height: 34px; padding: 0 14px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600; }
html.look-console[data-page^="admin-"] .btn.secondary { border-color: var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 500; }
html.look-console[data-page^="admin-"] :is(input, select, textarea) { min-height: 34px; border-color: var(--line-2); border-radius: var(--r); background: var(--bg); font-weight: 400; }
html.look-console[data-page^="admin-"] :is(input, select, textarea):focus { border-color: #4a5a00; box-shadow: none; outline: none; }
/* KPI tiles become one strip: no accent rail, neutral values, semantic colour on the hint dot only. */
html.look-console[data-page^="admin-"] :is(.stats-grid, .summary-grid) { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
html.look-console[data-page^="admin-"] :is(.stat-card, .summary-card) { border: 0; border-inline-start: 1px solid var(--line); border-radius: 0; background: none; }
html.look-console[data-page^="admin-"] :is(.stat-card, .summary-card):first-child { border-inline-start: 0; }
html.look-console[data-page^="admin-"] :is(.stat-card, .summary-card)::before { inset-block: auto; top: 18px; inset-inline-start: auto; inset-inline-end: 16px; width: 6px; height: 6px; border-radius: 50%; }
html.look-console[data-page^="admin-"] .stat-label,
html.look-console[data-page^="admin-"] .summary-card span { color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
html.look-console[data-page^="admin-"] .stat-value,
html.look-console[data-page^="admin-"] .summary-card b { color: var(--text) !important; font: 500 24px/1.1 var(--mono); letter-spacing: -.02em; }
html.look-console[data-page^="admin-"] .stat-hint { color: var(--faint); font-size: 11.5px; font-weight: 400; }
html.look-console[data-page^="admin-"] .chart-card h2,
html.look-console[data-page^="admin-"] .modal-head h2,
html.look-console[data-page^="admin-"] h3 { font-size: 14px; font-weight: 600; }
html.look-console[data-page^="admin-"] .top-row { border-color: var(--line); border-radius: var(--r); background: var(--bg); }
html.look-console[data-page^="admin-"] .top-row strong { font-weight: 500; }
html.look-console[data-page^="admin-"] .pill { min-height: 0; padding: 2px 7px; border-color: var(--line-2); border-radius: 4px; background: transparent; font-size: 11px; font-weight: 500; }
html.look-console[data-page^="admin-"] table { font-size: 13px; }
html.look-console[data-page^="admin-"] th { color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html.look-console[data-page^="admin-"] :is(th, td) { border-color: var(--line); }
html.look-console[data-page^="admin-"] tbody tr:hover { background: #0e1519; }
html.look-console[data-page^="admin-"] code { font-family: var(--mono); font-size: 12px; }
html.look-console[data-page^="admin-"] :is(.bar, .progress, .quota-bar) { height: 4px; border-radius: 2px; background: var(--line-2); }
html.look-console[data-page^="admin-"] .status-line { font-weight: 400; }
html.look-console[data-page^="admin-"] .link-chip { border-color: var(--line-2); border-radius: 6px; background: var(--surface-2); font-weight: 500; }
html.look-console[data-page^="admin-"] .modal-backdrop.open { background: rgba(4, 8, 10, .66); backdrop-filter: blur(2px); }
html.look-console[data-page^="admin-"] .modal-card { border-color: var(--line-2); background: var(--bg); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
html.look-console[data-page^="admin-"] .modal-grid .field { border-color: var(--line); border-radius: var(--r); background: var(--surface); }
html.look-console[data-page^="admin-"] :is(.mini-row, .asset-row, .access-row, .contact-box) { border-color: var(--line); border-radius: var(--r); background: var(--bg); }
html.look-console[data-page^="admin-"] .lead-card .name { font-weight: 600; }
@media (max-width: 920px) {
  html.look-console[data-page^="admin-"] :is(.stat-card, .summary-card):nth-child(odd) { border-inline-start: 0; }
  html.look-console[data-page^="admin-"] :is(.stat-card, .summary-card):nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Player-card designer: only the control panel. The card itself is the
   product (the Remotion template) and is never restyled here. */
html.look-console[data-page="admin-card"] #sidebar { font-family: var(--sans); }
html.look-console[data-page="admin-card"] #sidebar h1 { color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: .06em; }
html.look-console[data-page="admin-card"] #sidebar .hint { color: var(--faint); font-size: 11px; }
html.look-console[data-page="admin-card"] #sidebar .sec { color: var(--muted); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; border-top-color: var(--line); }
html.look-console[data-page="admin-card"] #sidebar .row label { color: var(--muted); font-size: 11px; }
html.look-console[data-page="admin-card"] #sidebar .row label span { color: var(--text); font-family: var(--mono); font-weight: 500; }
html.look-console[data-page="admin-card"] #sidebar input[type=range] { accent-color: var(--accent); }
html.look-console[data-page="admin-card"] #sidebar :is(input[type=text], input[type=number], select, input[type=color]) { border-color: var(--line-2); border-radius: 6px; background: var(--bg); }
html.look-console[data-page="admin-card"] #sidebar .radio-row label { border-color: var(--line-2); border-radius: 6px; background: var(--surface); color: var(--muted); letter-spacing: .04em; }
html.look-console[data-page="admin-card"] #sidebar .radio-row label.active { border-color: #3a4a00; background: #10170a; color: var(--accent); }
html.look-console[data-page="admin-card"] #sidebar :is(.snap-btn, .frame-btn, .upload-btn, #copyBtn, #loadBtn) { border-color: var(--line-2); border-radius: 6px; background: var(--surface-2); color: var(--text); letter-spacing: .04em; }
/* Inline-styled in the markup, so it needs !important to follow the panel. */
html.look-console[data-page="admin-card"] #sidebar #photoUploadLabel { border: 1px dashed var(--line-2) !important; border-radius: 6px !important; background: var(--surface) !important; color: var(--text) !important; letter-spacing: .04em !important; }
html.look-console[data-page="admin-card"] #sidebar #saveBtn { border-color: var(--accent); border-radius: var(--r); background: var(--accent); color: var(--accent-ink); letter-spacing: .04em; font-weight: 600; }
html.look-console[data-page="admin-card"] #sidebar :is(#authStatus, #valuesOut) { border-color: var(--line); border-radius: 6px; background: var(--bg); font-family: var(--mono); }

/* ---------- player page + public player page: the LIGHT console ----------
   These are the pages clubs and scouts read, a player CV, so they stay light.
   Same principles: hairlines, small radii, 600 max, mono figures, ink buttons
   buttons. --primary is the player's CLUB colour (set at runtime from
   player.clubColor) and is deliberately not overridden. The photo/crest
   artwork in the hero is left as it is. */
html.look-console:is([data-page="player"], [data-page="player-public"]) {
  color-scheme: light;
  --bg: #f5f7f8; --page-bg: #f5f7f8;
  --surface: #ffffff; --surface-soft: #f7f9fa; --surface-2: #f0f3f4;
  --line: #e2e7ea; --line-2: #d3dade;
  --text: #0b1418; --muted: #5b6970; --muted-2: #7c888e; --faint: #8d989d;
  --shadow: 0 1px 2px rgba(11, 20, 24, .04);
  --radius: 10px;
  background: var(--bg);
}
/* The public page's own --accent (red) must survive: lime on white is unreadable. */
html.look-console[data-page="player-public"] { --accent: #c8102e; }
html.look-console:is([data-page="player"], [data-page="player-public"]) body { background: var(--bg); color: var(--text); }
html.look-console:is([data-page="player"], [data-page="player-public"]) :focus-visible { outline-color: #0b1114; }
html.look-console:is([data-page="player"], [data-page="player-public"]) .card { border-color: var(--line); border-radius: 10px; box-shadow: none; }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.identity h1, .summary-copy h2) { font-weight: 600; letter-spacing: -.015em; }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.section-head h2, .list-block h3, .video-year-title, .edit-card summary, .topbar-title) { font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.position, .badge, .duration-pill, .list-row, .season-stats-row, .video-title, .video-lightbox-head, .club-history-name, .top-action, .small-action, .toggle-row, .photo-status, .share-status, label, .form-label, .lang-button) { font-weight: 500; }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.season-stats-head, .tile-label) { color: var(--muted); font-weight: 500; letter-spacing: .02em; }
/* Figures in mono: the numbers are the point of a player CV. */
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.stat-box strong, .action-tile strong, .season-stats-table td, .season-stats-row > :not(:first-child), .club-years, .video-date) { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.stat-box, .action-tile, .info-tile, .summary-card, .season-stats-card, .career-card, .contact-card, .library-card, .key-actions-card, .season-card) { border-color: var(--line); border-radius: var(--r); background: var(--surface); box-shadow: none; }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.badge, .duration-pill, .filter-chip, .jersey-chip) { border-radius: 4px; }
html.look-console:is([data-page="player"], [data-page="player-public"]) .filter-chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: #fff; }
/* Buttons: ink primary, white secondary with a hairline. */
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.save-button, .contact-button, .file-button, .add-row-button) { min-height: 38px; border-radius: var(--r); font-weight: 600; box-shadow: none; }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.top-action, .small-action, .lang-button, .icon-button) { border-radius: var(--r); box-shadow: none; }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(input, select, textarea) { border-color: var(--line-2); border-radius: var(--r); }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(input, select, textarea):focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(11, 17, 20, .06); }
html.look-console:is([data-page="player"], [data-page="player-public"]) :is(.video-card, .featured-video, .video-thumb) { border-radius: var(--r); }
html.look-console:is([data-page="player"], [data-page="player-public"]) .match-dialog { border-radius: 12px; }
html.look-console:is([data-page="player"], [data-page="player-public"]) .kicko-bottom-nav { border-color: #26333a; background: rgba(11, 17, 20, .94); }
html.look-console:is([data-page="player"], [data-page="player-public"]) .kicko-nav-link { color: #7f8f96; }
html.look-console:is([data-page="player"], [data-page="player-public"]) .kicko-nav-link[aria-current="page"] { background: #10181c; color: #e8eef0; }

/* ---------- editor (index.html + styles.css) — GENERATED pattern ----------
   Do not edit by hand: change scripts/generateConsoleLookEditorCss.js and run it.
   Professional mode only: in Quick Reel mode the whole editor is the
   owner-locked Quick Reel editor (QUICK_REEL_LOCKED_AREA_MAP.md), so nothing
   here applies. Every rule also skips anything inside the protected
   containers (player shell, Look preview, Look cards, branding, framing).
   The :is(#…) in each selector carries ID weight, which is what lets these
   rules win over styles.css rules like #gridScreen .clip-card. */
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) {
  --surface-1: #0b1114; --surface-2: #10181c; --surface-3: #0b1114;
  --stroke-soft: #1b252a; --stroke-strong: #3a4a00;
  --text-0: #e8eef0; --text-1: #c4d0d4; --text-2: #7f8f96;
  --radius-card: 12px; --radius-soft: 8px;
  --shadow-xl: 0 16px 44px rgba(0, 0, 0, .45);
  --editor-bg: #06090b; --editor-panel: #0b1114; --editor-panel-strong: #10181c;
  --editor-border: #1b252a; --editor-muted: #7f8f96; --editor-text: #e8eef0; --editor-accent-2: #d2ff00;
  --grid-bg-deep: #06090b; --grid-bg-panel: #0b1114; --grid-bg-card: #0b1114;
  --grid-text: #e8eef0; --grid-text-muted: #7f8f96; --grid-text-dim: #56656c; --grid-divider: #1b252a;
  --grid-accent-2: #d2ff00; --grid-radius: 10px; --grid-radius-sm: 8px;
}
/* Tokens inherit, so the protected containers get their original values back. */
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(#playerShell, #reelBrandingBlock, #quickReelReframeBar) {
  --surface-1: rgba(15, 27, 39, 0.94); --surface-2: rgba(19, 34, 48, 0.94); --surface-3: rgba(10, 19, 29, 0.78);
  --stroke-soft: rgba(142, 185, 204, 0.14); --stroke-strong: rgba(210, 255, 0, 0.26);
  --text-0: #f3fbff; --text-1: #d6e7f1; --text-2: #88a0b2;
  --radius-card: 24px; --radius-soft: 18px; --shadow-xl: 0 24px 70px rgba(0, 0, 0, 0.42);
  --editor-bg: #03080d; --editor-panel: rgba(8, 17, 25, 0.86); --editor-panel-strong: rgba(12, 24, 34, 0.94);
  --editor-border: rgba(255, 255, 255, 0.12); --editor-muted: #8c99a6; --editor-text: #f4f7fa; --editor-accent-2: #82b300;
  font-family: Rubik, "Noto Sans Hebrew", "Segoe UI", sans-serif; color: #f4f7fa;
}
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(h1, h2, h3, h4, h5, strong, b, button):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { font-weight: 600; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) p:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { font-weight: 400; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.header-subtitle, .form-hint):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { font-weight: 400; color: var(--muted); }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.clip-name, .player-card-number):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { font-weight: 600; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.beta-badge, .language-toggle-trigger, em):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { font-weight: 500; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .beta-badge:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-radius: 4px; letter-spacing: .04em; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-section-title:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { font-size: clamp(24px, 3.4vw, 30px); font-weight: 600; letter-spacing: -.015em; text-shadow: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.section-heading, .scout-phase-title, .select-heading, .trim-heading, .step-card-head h3, .zoom-card-head, .rings-head, .save-summary-head, .segment-render-header, .modal-header h2, .modal-header h3):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { font-weight: 600; letter-spacing: -.005em; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.section-kicker, .start-card-kicker, .start-card-meta, .scout-iq-kicker, .wf-label, .meta-key, .trim-label):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { font-weight: 500; letter-spacing: .06em; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.form-hint, .panel-hint, .zoom-hint, .rings-hint, .trim-helper, .scout-phase-subtitle):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { color: var(--muted); font-weight: 400; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.project-panel, .editor-panel, .scout-panel, .zoom-card, .rings-card, .tracking-panel, .metadata-panel, .save-summary, .segment-render-panel, .player-accordion, .clip-card, .transition-option-card):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-color: var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; backdrop-filter: none; }
/* The clip the main player is on keeps its lime frame: the flat rule above
   repaints every card's border, which hid it. Guarded by clipNowPlaying.test.js. */
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) #gridScreen .clip-card.clip-card-active { border-color: var(--accent, #d2ff00); box-shadow: 0 0 0 3px rgba(210, 255, 0, .22); }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.modal-card, .transition-modal-card, .scout-role-modal-card, .scout-rating-modal-card, .scout-iq-modal-card):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.modal-overlay, .transition-modal-overlay):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { background: rgba(4, 8, 10, .66); backdrop-filter: blur(2px); }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.btn-primary, .step-continue-btn, .step-continue-primary, .studio-next-btn, .effect-primary-action, .ls-primary, .scout-pick-role-btn):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border: 1px solid var(--accent); border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-weight: 600; letter-spacing: 0; box-shadow: none; text-shadow: none; filter: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.btn-primary, .step-continue-btn, .step-continue-primary, .studio-next-btn, .effect-primary-action, .ls-primary):hover:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { filter: brightness(1.06); box-shadow: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.btn-ghost, .step-back-btn, .zoom-btn-ghost, .scout-change-role-btn, .scout-disable-btn, .language-toggle-btn, .account-menu-btn, .ls-btn):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-color: var(--line-2); border-radius: var(--r); background: var(--surface-2); color: var(--text); font-weight: 500; box-shadow: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .btn-sm:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { min-height: 30px; padding-inline: 10px; font-size: 12px; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.action-chip, .trim-chip, .ctx-pos-btn, .effect-choice, .trans-style-btn, .scout-rating-option, .zoom-btn, .frame-step-btn, .frame-nav-btn):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-radius: 6px; font-weight: 500; box-shadow: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.form-input, .form-input-sm, .match-score-input):not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-color: var(--line-2); border-radius: var(--r); background: var(--bg); color: var(--text); font-weight: 400; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) :is(.form-input, .form-input-sm, .match-score-input):focus:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-color: #4a5a00; box-shadow: none; outline: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .wf-dot:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { box-shadow: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .wf-line:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { opacity: .6; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-card:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-color: var(--line); border-radius: 14px; background: var(--surface); box-shadow: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-card:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *)::after { content: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-card:hover:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *),
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-card:focus-visible:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-color: var(--line-2); box-shadow: none; transform: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-card-title:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { font-weight: 600; letter-spacing: -.02em; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-card-description:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { color: #a9b8be; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-card-cta:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-choice-vs:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-color: var(--line-2); background: var(--bg); box-shadow: none; font-weight: 600; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .start-secondary-link:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-color: var(--line-2); border-radius: var(--r); background: var(--surface); font-weight: 500; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .app-header:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { box-shadow: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .account-menu-panel:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-color: var(--line-2); border-radius: 10px; background: var(--bg); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) .account-menu-item:not(:is(#playerShell, #remotionLookPreview, #reelBrandingBlock, #lookCards, #quickReelReframeBar, #quickReelFramingScreen) *) { border-radius: 6px; font-weight: 500; }
/* Flat ground: no grid texture, no glow. */
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"])::before { background-image: none; }
html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) #startScreen, html.look-console[data-page="editor"] body:not([data-app-mode="quickReel"]) #startScreen::before { background-image: none; }

/* ---------- bottom navigation (app-nav.css) ---------- */
html.look-console .kicko-bottom-nav { height: 60px; border-color: var(--line-2); border-radius: 14px; background: rgba(11, 17, 20, .94); box-shadow: 0 16px 44px rgba(0, 0, 0, .5); }
html.look-console .kicko-nav-link { min-height: 48px; border-radius: 10px; color: var(--muted); font: 500 10.5px/1.1 var(--sans); }
html.look-console .kicko-nav-link svg { width: 20px; height: 20px; }
html.look-console .kicko-nav-link[aria-current="page"] { color: var(--text); background: var(--surface-2); }
html.look-console .kicko-nav-create { width: 46px; height: 46px; min-height: 46px; margin-top: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); box-shadow: none; }
html.look-console .kicko-nav-fab { width: 48px; height: 48px; border-color: var(--accent); border-radius: 12px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 28px rgba(0, 0, 0, .46); }
html.look-console .kicko-nav-toast { border-color: var(--line-2); border-radius: 10px; background: var(--surface-2); font: 500 13px/1.45 var(--sans); }

@media (prefers-reduced-motion: reduce) {
  html.look-console .item-card { transition: none; }
}