/* CapCut-grade pass for the pages behind the bottom tabs: Copy, Montage,
   Enhance (2026-10-26, owner: "study CapCut, the home page is good, the other
   tab pages are not"). Loaded after cutflux-mobile-polish.css on those three
   pages only. NOT on home (he likes it), NOT on the beat editor.

   What CapCut does that we did not:
   1. Surfaces are separated by TONE, not outlines. Canvas, then one raised
      tone for cards, one more for things on cards. Borders only mark a
      selected or focused state.
   2. Two radii in the whole app: 16px for cards and sheets, pill for chips.
      Buttons share the home screen radius (12px) so the app stays one thing.
   3. One header everywhere: round icon button on the left, title in the
      middle, one solid action on the right.
   4. One primary action per screen. Everything else is tonal or plain text.
   5. Icons 24px with 11-12px labels, 44px rows, 16px gutters, 8px grid. */

body.lyrc-app {
  --cc-canvas: var(--cf-bg);
  --cc-l1: #141418;            /* card */
  --cc-l2: #1E1E24;            /* on a card */
  --cc-l3: #2A2A32;            /* pressed / hover */
  --cc-ink: #FFFFFF;
  --cc-ink2: rgba(255, 255, 255, .66);
  --cc-ink3: rgba(255, 255, 255, .45);
  --cc-r-card: 16px; --cc-r-btn: 12px; --cc-r-tile: 10px;
  --cc-shadow: none;
}
html[data-theme="light"] body.lyrc-app {
  --cc-l1: #FFFFFF; --cc-l2: #F1F3F7; --cc-l3: #E6E9F0;
  --cc-ink: #0C0E16; --cc-ink2: rgba(12, 14, 22, .66); --cc-ink3: rgba(12, 14, 22, .48);
  --cc-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06);
}

/* ================= 1. header: round button, centred title, one action ================= */
.cf-copy-bar, .pm-app .hdr, .app > .hdr {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
  min-height: 56px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px !important;
  background: var(--cc-canvas) !important; border: 0 !important; box-shadow: none !important;
}
html[data-theme="light"] .cf-copy-bar, html[data-theme="light"] .pm-app .hdr, html[data-theme="light"] .app > .hdr { background: var(--cc-canvas) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* round icon buttons (back / home / close) */
.cf-copy-bar .sb-bt-btn--ghost.sb-bt-btn--xs[href="/home.html"], .pm-app .hdr-close, .app > .hdr .icon-btn, #backBtn {
  width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; border-radius: 50% !important;
  background: var(--cc-l1) !important; border: 0 !important; color: var(--cc-ink) !important; font-size: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: var(--cc-shadow);
}
.cf-copy-bar .sb-bt-btn--ghost.sb-bt-btn--xs[href="/home.html"] .sb-bt-btn-icon { font-size: 18px; line-height: 1; }
/* the title sits in the middle */
.cf-copy-bar .cf-copy-bar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cf-copy-brand { flex: 1; text-align: center; font: 800 16px/1.2 var(--cf-font) !important; letter-spacing: -.01em; color: var(--cc-ink) !important; text-decoration: none !important; pointer-events: none; }
.app > .hdr .hdr-title { text-align: center; }
.app > .hdr .hdr-title strong { font: 800 16px/1.2 var(--cf-font); color: var(--cc-ink); }
.app > .hdr .hdr-title em { display: block; font: 600 12px/1.2 var(--cf-font) !important; color: var(--cc-ink3); font-style: normal; }
/* the one action on the right: solid pill */
.cf-copy-bar .ce-cover-back, .pm-app .hdr-export, .app > .hdr .hdr-export {
  height: 36px !important; padding: 0 16px !important; border-radius: 999px !important; border: 0 !important;
  background: var(--cf-accent) !important; color: #fff !important; font: 800 13.5px var(--cf-font) !important; letter-spacing: -.005em;
  display: inline-flex !important; align-items: center !important; gap: 6px; box-shadow: none !important; background-image: none !important;
}
.pm-app .hdr-export[disabled], .app > .hdr .hdr-export[disabled] { background: var(--cc-l1) !important; color: var(--cc-ink3) !important; opacity: 1 !important; }
.cf-copy-bar .ce-cover-back { background: var(--cc-l1) !important; color: var(--cc-ink) !important; }   /* Preview is secondary here */
.cf-copy-bar .sb-bt-user-bar { gap: 8px; }
.cf-copy-bar #settings-open-btn { width: 36px; height: 36px; border-radius: 50% !important; background: var(--cc-l1) !important; border: 0 !important; color: var(--cc-ink) !important; }

/* ================= 2. surfaces by tone, two radii ================= */
/* copy-edit cards */
.cf-pair .cf-drop { background: var(--cc-l1) !important; border: 1px solid transparent !important; border-radius: var(--cc-r-card) !important; box-shadow: var(--cc-shadow) !important; }
.cf-pair .cf-drop.is-drag, .cf-pair .cf-drop.is-loaded { border-color: var(--cf-accent) !important; }
.cf-pair-art { background: var(--cc-l2) !important; border-radius: 12px !important; }
.cf-pair-tag { color: var(--cc-ink3) !important; }
.cf-pair .cf-drop h2 { color: var(--cc-ink) !important; }
.cf-link-node { background: var(--cc-l1) !important; border: 0 !important; color: var(--cc-ink2) !important; }
.cf-link-text { background: var(--cc-canvas) !important; color: var(--cc-ink3) !important; }
.cf-go { background: var(--cc-canvas) !important; border: 0 !important; border-radius: 0 !important; padding: 10px 0 !important; }
.cf-res-side { background: var(--cc-l1) !important; border: 0 !important; border-radius: var(--cc-r-card) !important; box-shadow: var(--cc-shadow) !important; }
.cf-res-stat { background: var(--cc-l2) !important; border: 0 !important; border-radius: 12px !important; }
.cf-res-stat dt { color: var(--cc-ink3) !important; }
.cf-res-stat dd { color: var(--cc-ink) !important; }
.cf-res-frame { border: 0 !important; border-radius: var(--cc-r-card) !important; box-shadow: var(--cc-shadow) !important; }
.cf-copy-hero h1 { color: var(--cc-ink) !important; font-size: 28px !important; letter-spacing: -.035em !important; }
.cf-copy-hero p { color: var(--cc-ink2) !important; }

/* montage shell */
.pm-app .stage-wrap .stage, .pm-app .stage-empty { border-radius: var(--cc-r-card); }
.pm-app .stage-empty-step { background: var(--cc-l2) !important; border: 0 !important; border-radius: 12px !important; }
.pm-app .sheet { background: var(--cc-l1) !important; border: 0 !important; border-radius: var(--cc-r-card) var(--cc-r-card) 0 0 !important; }
.pm-app .chip, .pm-app .len-chip { background: var(--cc-l2) !important; border: 1px solid transparent !important; border-radius: 999px !important; color: var(--cc-ink2) !important; }
.pm-app .chip.selected, .pm-app .len-chip.selected { border-color: var(--cf-accent) !important; color: var(--cc-ink) !important; background: var(--cf-accent-soft) !important; }
.pm-app .add-chip { border: 0 !important; background: var(--cc-l1) !important; border-radius: var(--cc-r-btn) !important; color: var(--cc-ink) !important; box-shadow: var(--cc-shadow); }
.pm-app .add-chip.filled { background: var(--cf-accent) !important; color: #fff !important; }
.pm-app .dk-box { background: var(--cc-l1) !important; border: 0 !important; border-radius: var(--cc-r-btn) !important; }
.pm-app .dk.active .dk-box { background: var(--cf-accent) !important; }

/* enhance */
.pick { background: var(--cc-l1) !important; border: 1.5px dashed color-mix(in srgb, var(--cc-ink) 18%, transparent) !important; border-radius: var(--cc-r-card) !important; box-shadow: var(--cc-shadow) !important; }
.pick.hot { border-color: var(--cf-accent) !important; }
.pick-icon { border-radius: 20px !important; box-shadow: none !important; }
.pick h1 { color: var(--cc-ink) !important; }
.pick p { color: var(--cc-ink2) !important; }
.pick-hint { background: var(--cf-accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--cc-r-btn) !important; }
.pick-formats { color: var(--cc-ink3) !important; }
.feat { background: var(--cc-l2) !important; border: 0 !important; color: var(--cc-ink2) !important; }
.pe-intro { background: var(--cc-l1) !important; border: 0 !important; border-radius: var(--cc-r-card) !important; box-shadow: var(--cc-shadow) !important; }
.pe-intro-n { background: var(--cf-accent) !important; color: #fff !important; }
.pe-intro-x { background: var(--cc-l2) !important; border: 0 !important; color: var(--cc-ink2) !important; border-radius: 50% !important; }
.preview, .section, .tune-panel { background: var(--cc-l1) !important; border: 0 !important; border-radius: var(--cc-r-card) !important; box-shadow: var(--cc-shadow) !important; }
.pv-bar { background: transparent !important; border-top: 1px solid color-mix(in srgb, var(--cc-ink) 7%, transparent) !important; }
.pv-btn { background: var(--cc-l2) !important; border: 1px solid transparent !important; color: var(--cc-ink) !important; }
.pv-btn.on { border-color: var(--cf-accent) !important; color: var(--cf-accent) !important; background: var(--cf-accent-soft) !important; }
.preset { background: var(--cc-l2) !important; border: 1.5px solid transparent !important; border-radius: 12px !important; }
.preset.on { border-color: var(--cf-accent) !important; background: var(--cf-accent-soft) !important; }
.preset .p-swatch { border: 0 !important; border-radius: 9px !important; }
.preset .p-name { color: var(--cc-ink2) !important; }
.preset.on .p-name { color: var(--cc-ink) !important; }
.preset-caption { background: var(--cc-l2) !important; border: 0 !important; border-radius: 12px !important; color: var(--cc-ink2) !important; }
.tune-toggle { background: var(--cc-l1) !important; border: 0 !important; border-radius: var(--cc-r-card) !important; color: var(--cc-ink) !important; box-shadow: var(--cc-shadow); }
.section h3 { color: var(--cc-ink) !important; }
.section h3 .badge { background: var(--cf-accent-soft) !important; border: 0 !important; color: var(--cf-accent) !important; }
.slider-label strong { color: var(--cc-ink); }
.slider-label .val { color: var(--cc-ink3) !important; }
.exp-btn { border-radius: var(--cc-r-btn) !important; }
.app > .bg .orb { opacity: .12 !important; }

/* light-theme wins over the earlier polish rules (same specificity prefix) */
html[data-theme="light"] .pe-intro { background: var(--cc-l1) !important; border: 0 !important; }
html[data-theme="light"] .pm-app .dk-box { background: var(--cc-l2) !important; }
html[data-theme="light"] .pm-app .dk.active .dk-box { background: var(--cf-accent) !important; }
html[data-theme="light"] .pm-app .add-chip { background: var(--cc-l1) !important; }
html[data-theme="light"] .pm-app .add-chip.filled { background: var(--cf-accent) !important; }
html[data-theme="light"] .pick { background: var(--cc-l1) !important; }
html[data-theme="light"] .feat, html[data-theme="light"] .pv-btn, html[data-theme="light"] .preset, html[data-theme="light"] .preset-caption { background: var(--cc-l2) !important; border-color: transparent !important; }
html[data-theme="light"] .preset.on, html[data-theme="light"] .pv-btn.on { border-color: var(--cf-accent) !important; background: var(--cf-accent-soft) !important; }
html[data-theme="light"] .section, html[data-theme="light"] .preview, html[data-theme="light"] .tune-toggle, html[data-theme="light"] .cf-res-side, html[data-theme="light"] .cf-pair .cf-drop { background: var(--cc-l1) !important; border-color: transparent !important; }
html[data-theme="light"] .cf-pair .cf-drop.is-loaded, html[data-theme="light"] .cf-pair .cf-drop.is-drag { border-color: var(--cf-accent) !important; }

html[data-theme="light"] .pm-app .stage { background: var(--cc-l1) !important; border-color: transparent !important; box-shadow: var(--cc-shadow) !important; }
html[data-theme="light"] .pm-app .stage-empty { background: var(--cc-l1) !important; }

html[data-theme="light"] .pm-app .stage-canvas { background: var(--cc-l1) !important; }

/* the empty panel sits 6px inside the stage; the canvas under it is painted black by script, so in light the panel covers the whole stage */
html[data-theme="light"] .pm-app .stage { overflow: hidden !important; }
html[data-theme="light"] .pm-app .stage-empty { inset: 0 !important; border: 0 !important; border-radius: inherit !important; }

/* ================= 3. type and rhythm ================= */
.cf-copy-main, .pm-app .editor-main, .app > main { padding-left: 16px !important; padding-right: 16px !important; }
.cf-copy-main > * + *, .app > main > * + * { margin-top: 16px; }
.pick { gap: 14px !important; }
.feats { gap: 8px !important; }
.section { padding: 16px !important; }
.pe-intro { padding: 16px !important; }

/* ================= 4. press feel, no outlines on focus by mouse ================= */
.cf-pair .cf-drop:active, .preset:active, .pv-btn:active, .feat:active, .pm-app .chip:active { transform: scale(.985); }
:where(.cf-copy-page, .pm-app, .app) button:focus:not(:focus-visible) { outline: none; }