/* READABLE EVERYWHERE.
 * The owner, 8 Nov 2026: "Everything must be clear, visible, no same color of font and background ...
 * use white text", and "Make it in every studio, in every place, in all the website."
 *
 * Every rule here came from measuring, not from looking: a contrast audit opened every studio and
 * page at phone and PC size and listed each text below 7:1 against what it actually sits on (the
 * WCAG AAA line). Labels, help lines and captions were mid-greys at 4-6.9:1, and 3D Studio's
 * #52525b on near-black was 1.4-2.4:1. They are lifted to three steps of near-white:
 *   --rd-1 #F8FAFC  headings, labels, values           (~17:1 on the studios' navy)
 *   --rd-2 #E2E8F0  secondary labels, buttons          (~14:1)
 *   --rd-3 #CBD5E1  help lines, captions, footers      (~11:1)
 * Every rule starts with `html:not(#rd1):not(#rd2):not(#rd3) body`: each :not(#id) counts as an id,
 * so these outrank the studios' own !important rules (the strongest use two ids, and some are inline
 * <style> blocks built at runtime). Nothing here changes a layout, only colours, and the add-file
 * buttons' look. */
:root { --rd-1: #F8FAFC; --rd-2: #E2E8F0; --rd-3: #CBD5E1; --rd-accent: #A78BFA; }

/* ── the main studio (image / video / music), phone and PC ── */
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio .field > label, html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio .field label, html:not(#rd1):not(#rd2):not(#rd3) body .form-section .field > label, html:not(#rd1):not(#rd2):not(#rd3) body .two-cols .field > label,
html:not(#rd1):not(#rd2):not(#rd3) body .mh-upload-head strong, html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio .checkbox-row, html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio .checkbox-row span { color: var(--rd-1) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .mh-upload-head small, html:not(#rd1):not(#rd2):not(#rd3) body .result-grid.empty-state p, html:not(#rd1):not(#rd2):not(#rd3) body .empty-card p, html:not(#rd1):not(#rd2):not(#rd3) body .upload-library-head small { color: var(--rd-3) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .prompt-actions .ghost { color: var(--rd-2) !important; border-color: rgba(226, 232, 240, .38) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #ismBackBtn, html:not(#rd1):not(#rd2):not(#rd3) body .ism-lib { color: #C4B5FD !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .music-mobile-model-chip small, html:not(#rd1):not(#rd2):not(#rd3) body .su-model small { color: var(--rd-3) !important; }

/* the reference boxes the model registry builds (Seedance 2.5, Wan 3.0, HeyGen, Vidu voice, MiniMax H3) */
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls, #sd25VideoControls, #lipsyncControls, #reframeControls) label {
  color: var(--rd-1) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .04em !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls, #sd25VideoControls, #lipsyncControls, #reframeControls) :is(.sd25-line, .h3m-camhint, .h3m-note, small) {
  color: var(--rd-3) !important; font-size: 13px !important; line-height: 1.5 !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls) .sd25-line {
  margin-top: 12px !important; padding: 10px 12px !important; border-radius: 12px !important; background: rgba(148, 163, 184, .08) !important; border: 1px solid rgba(148, 163, 184, .16) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls) :is(.sd25-chip, .h3m-chip) {
  color: var(--rd-1) !important; background: rgba(124, 58, 237, .16) !important; border-color: rgba(167, 139, 250, .45) !important; font-size: 13px !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls) :is(.sd25-chip, .h3m-chip) button { color: var(--rd-2) !important; }

/* the add-file buttons: a clear, labelled button instead of a bare "+" square */
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls) button:is(.sd25-add, .h3m-add, .h3m-pick) {
  flex: 0 0 auto !important; width: auto !important; height: 44px !important; padding: 0 16px 0 12px !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  border: 1.5px solid rgba(167, 139, 250, .65) !important; border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(124, 58, 237, .30), rgba(124, 58, 237, .18)) !important; color: #FFFFFF !important;
  font: 700 14px/1 Inter, system-ui, sans-serif !important; letter-spacing: .01em !important; white-space: nowrap !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 6px 18px rgba(124, 58, 237, .18) !important; cursor: pointer !important; transition: background .15s, border-color .15s, transform .1s !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls) button:is(.sd25-add, .h3m-add, .h3m-pick):hover {
  background: linear-gradient(180deg, rgba(124, 58, 237, .45), rgba(124, 58, 237, .28)) !important; border-color: #C4B5FD !important; color: #FFFFFF !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls) button:is(.sd25-add, .h3m-add, .h3m-pick):active { transform: scale(.97) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls) button:is(.sd25-add, .h3m-add, .h3m-pick) svg { width: 18px !important; height: 18px !important; flex: none !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls) .sd25-row { flex-wrap: wrap !important; }

/* ── home: model tiles, the hub, the studio wall, the footer ── */
html:not(#rd1):not(#rd2):not(#rd3) body .mhv4-model small, html:not(#rd1):not(#rd2):not(#rd3) body .hcp-wallTile small, html:not(#rd1):not(#rd2):not(#rd3) body .hub-tool small, html:not(#rd1):not(#rd2):not(#rd3) body .pch-tool small, html:not(#rd1):not(#rd2):not(#rd3) body .hub-h span,
html:not(#rd1):not(#rd2):not(#rd3) body table td small { color: var(--rd-3) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body tr.cat-soon td, html:not(#rd1):not(#rd2):not(#rd3) body tr.cat-soon td b { color: var(--rd-2) !important; opacity: 1 !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .msf-col h2 { color: var(--rd-2) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .msf-legal, html:not(#rd1):not(#rd2):not(#rd3) body .msf-legal a, html:not(#rd1):not(#rd2):not(#rd3) body .hcp3-legal a { color: var(--rd-3) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .hub-badge, html:not(#rd1):not(#rd2):not(#rd3) body .pch-badge { background: #C2410C !important; color: #FFFFFF !important; }

/* ── account menu ── */
html:not(#rd1):not(#rd2):not(#rd3) body .mlv2-logout-all-txt small { color: var(--rd-3) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .mlv2-logout-panel .ml-row b { color: #FF9EA3 !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .mlv2-logout-all-txt b { color: #FBB6BD !important; }

/* ── Cinema, Director, Marketplace (studio-shell) ── */
html:not(#rd1):not(#rd2):not(#rd3) body .cs-field > span, html:not(#rd1):not(#rd2):not(#rd3) body .cs-label, html:not(#rd1):not(#rd2):not(#rd3) body .ds-f label, html:not(#rd1):not(#rd2):not(#rd3) body .ad-f label, html:not(#rd1):not(#rd2):not(#rd3) body .cs-grid label { color: var(--rd-1) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .ad-hint, html:not(#rd1):not(#rd2):not(#rd3) body .ad-drop p, html:not(#rd1):not(#rd2):not(#rd3) body .cs-placeholder p, html:not(#rd1):not(#rd2):not(#rd3) body .ad-stepBody p { color: var(--rd-3) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .ad-num, html:not(#rd1):not(#rd2):not(#rd3) body .ad-quote b { color: #FDA4AF !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .ad-logo b { color: var(--rd-accent) !important; }

/* ── Video Studio page ── */
html:not(#rd1):not(#rd2):not(#rd3) body .vs-label { color: var(--rd-1) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .vs-help, html:not(#rd1):not(#rd2):not(#rd3) body .vs-help .num, html:not(#rd1):not(#rd2):not(#rd3) body .vs-save, html:not(#rd1):not(#rd2):not(#rd3) body .vs-model-btn small { color: var(--rd-3) !important; }

/* ── Creators and Motion Transfer pages ── */
html:not(#rd1):not(#rd2):not(#rd3) body main form label, html:not(#rd1):not(#rd2):not(#rd3) body .earn-rows small, html:not(#rd1):not(#rd2):not(#rd3) body .rc-step small { color: var(--rd-2) !important; }

/* ── 3D Studio: the worst of it (1.4-2.4:1) ── */
html:not(#rd1):not(#rd2):not(#rd3) body .s3-sub, html:not(#rd1):not(#rd2):not(#rd3) body .s3-hint, html:not(#rd1):not(#rd2):not(#rd3) body .s3-journey li, html:not(#rd1):not(#rd2):not(#rd3) body .s3-mat-name, html:not(#rd1):not(#rd2):not(#rd3) body .s3-panel summary,
html:not(#rd1):not(#rd2):not(#rd3) body .s3-tabs button, html:not(#rd1):not(#rd2):not(#rd3) body .s3-seg button { color: var(--rd-3) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .s3-h, html:not(#rd1):not(#rd2):not(#rd3) body .s3-example-chip { color: var(--rd-1) !important; }

/* ── found on the second measuring pass ── */
html:not(#rd1):not(#rd2):not(#rd3) body #workbench :is(.field label, .mode-select-row label, .prompt-card > label) { color: var(--rd-1) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .mh-upload-head strong { color: var(--rd-1) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .mh-upload-head small { color: var(--rd-3) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body :is(.s3-title, .s3-drop span, .s3-toggle) { color: var(--rd-2) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body :is(.md-prompt > span, .md-row > span) { color: var(--rd-1) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body :is(.md-drop p, .md-placeholder p) { color: var(--rd-3) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .vs-nav a { color: var(--rd-3) !important; }
html:not(#rd1):not(#rd2):not(#rd3) body .hcp3-legal a { color: var(--rd-2) !important; }
/* the reference boxes' labels take the full width instead of wrapping into a narrow column */
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls, #h3mControls) .sd25-block > label,
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio #h3mControls .h3m-block > label { display: block !important; width: 100% !important; max-width: none !important; margin: 0 0 10px !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls) { display: block !important; }
html:not(#rd1):not(#rd2):not(#rd3) body #videoStudio :is(#sd25RefControls, #wanRefControls, #viduVoiceControls) > .sd25-block { width: 100% !important; }