/* ==========================================================================
   Studio-Tools — DARK mode  (loaded only on /studio-tools/, after the tool CSS)
   Dark UI/chrome + controls; the CREATIVE PREVIEWS keep a light neutral backdrop
   so ad colours / transparency render true (Figma/Photoshop convention).
   All rules scoped to html.dark.
   ========================================================================== */

/* ---- shell variable remap (the .panel cards + shell text use these) ---- */
html.dark{
  --bg:#0f1216; --panel:#181c22; --ink:#e8ebf2; --muted:#9099a8; --line:#262b33;
  --indigo-soft:#16233c;
}
html.dark body{background:#0f1216 !important;color:#e8ebf2}

/* keep the floating toggle clear of the sticky tool footers */
html.dark .dl-theme-toggle,.dl-theme-toggle{z-index:99990}

/* ---- top chrome ---- */
html.dark .topbar{background:#0f1216 !important;border-bottom:1px solid #20262f}
/* calm, neutral promo card in dark (matches the toned-down light treatment; not a blue accent) */
html.dark .announce-bar{background:#151a22 !important;border-color:#2a2f3a !important;box-shadow:none}
html.dark .announce-pill{background:#1b2130 !important;color:#93a6d6 !important;border-color:#2c3450 !important}
html.dark .announce-txt{color:#8b93a4}
html.dark .announce-txt strong,html.dark .announce-txt b{color:#d3d9e4}
html.dark .announce-txt a{color:#7fb0ff}
html.dark .pill-nudge{background:#1b2026;border-color:#3a3322;color:#e0b063}

/* tool switcher / mode tabs: dark neutral container, keep the coloured active tabs */
html.dark .mode-tabs,html.dark .switcher,html.dark .tool-switcher{background:transparent}
html.dark .mode-tab{background:#181c22;border-color:#262b33;color:#aab2c0}
html.dark .mode-tab:hover{background:#1f2530;color:#e8ebf2}
html.dark .mode-tab .mt-sub,html.dark .mode-tab small{color:#8b94a3}
html.dark .switch-group-label,html.dark .switcher-label{color:#7e8696}

/* ---- panels / cards / sections ---- */
html.dark .panel{background:#181c22;border-color:#262b33;box-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35)}
html.dark .panel h1,html.dark .panel h2,html.dark .panel h3,html.dark .panel h4{color:#eef1f6}
html.dark .step-num,html.dark .step-n,html.dark .stepno{color:#9bbcff}
html.dark hr,html.dark .divider{border-color:#262b33;background:#262b33}

/* ---- form controls / buttons / inputs ---- */
html.dark input,html.dark textarea,html.dark select,
html.dark .ic-custom-field,html.dark .hb-input,html.dark .qa-iframe-url{background:#11151b !important;color:#e8ebf2;border-color:#2a2f3a !important}
html.dark input::placeholder,html.dark textarea::placeholder{color:#7e8696}
html.dark .btn-ghost,html.dark .hb-btn-ghost,html.dark .qa-reset,html.dark .hb-clear,html.dark .hb-change,
html.dark .ic-reset,html.dark .gx-reset,html.dark .bj-reset,html.dark .rz-reset{background:#1b2026 !important;color:#cdd3df !important;border-color:#2f343d !important}
html.dark .chip,html.dark .size-card,html.dark .gx-dur,html.dark .more-card{background:#1b2026;border-color:#2a2f3a;color:#cdd3df}
html.dark .chip.is-active,html.dark .size-card.is-active,html.dark .gx-dur.is-active{background:#16233c;border-color:#2f6fe0;color:#bcd4ff}

/* ---- upload / drop zones ---- */
html.dark [class*="upload-zone"],html.dark [class*="uploadzone"],html.dark [class*="dropzone"],
html.dark [class*="-drop"],html.dark .uploader,html.dark .drop-area{background:#13171d !important;border-color:#2f343d !important;color:#aab2c0}
html.dark [class*="upload-zone"]:hover,html.dark .uploader:hover{border-color:#3f78e6 !important;background:#161b22 !important}

/* ---- file lists / result grids / cards (FRAME = dark) ---- */
html.dark .ic-file-list .ic-file,html.dark .bj-file,html.dark .gx-file,html.dark .qa-file{background:#13171d;border-color:#23282f}
html.dark .ic-card,html.dark .gx-card,html.dark .bj-card,html.dark .qa-card,
html.dark .hb-cf-card,html.dark .hb-vs-card,html.dark .hb-real-card,html.dark .hb-caro-card,html.dark .more-card{
  background:#181c22 !important;border-color:#262b33 !important;color:#e8ebf2}
html.dark .ic-card-meta,html.dark .gx-card-meta-line,html.dark .bj-card-meta,html.dark .hb-tag{color:#9099a8}
html.dark .results-head,html.dark .gx-results-head,html.dark .bj-results-head{color:#e8ebf2;border-color:#262b33}

/* ============================================================
   CREATIVE PREVIEWS — keep a LIGHT NEUTRAL backdrop so the ad's
   real colours + transparency stay accurate. (Never invert images.)
   ============================================================ */
html.dark .ic-card-thumb,html.dark .ic-card-stage,
html.dark .gx-card-thumb,
html.dark .bj-card-stage,html.dark .bj-art-card,html.dark .ic-art-card,html.dark .gx-art-card,
html.dark .hb-frame,html.dark .hb-stage,html.dark .hb-hero-stage,html.dark .hb-var-stage,
html.dark .hb-real-frame,html.dark .hb-real-stage,html.dark .hb-caro-stage,html.dark .hb-mini,
html.dark .qa-iframe,html.dark .qa-stage,html.dark .qa-preview,
html.dark .rz-tile-canvas,html.dark .rz-stage,html.dark .rz-preview,html.dark [class*="-stage"],html.dark [class*="-frame"]{
  background:#eef0f3 !important;background-image:
    linear-gradient(45deg,#e3e6ea 25%,transparent 25%),linear-gradient(-45deg,#e3e6ea 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e3e6ea 75%),linear-gradient(-45deg,transparent 75%,#e3e6ea 75%) !important;
  background-size:16px 16px !important;background-position:0 0,0 8px,8px -8px,-8px 0 !important;
  border-color:#2a2f3a !important}
html.dark img,html.dark canvas,html.dark video,html.dark iframe{filter:none !important}

/* ---- login / premium modal ---- */
html.dark .login-card,html.dark .lock-card,html.dark .legal-card,html.dark .login-card-wide{background:#161b22 !important;border-color:#2a2f3a !important;color:#e8ebf2}
html.dark .login-backdrop,html.dark .legal-backdrop{background:rgba(4,7,12,.72)}
html.dark .lock-card h3,html.dark .login-card h3{color:#eef1f6}
html.dark .lock-sub,html.dark .login-help{color:#9099a8}
html.dark .sub-box{background:#11151b;border-color:#2a2f3a}
html.dark .sub-toggle{background:#0f1318}
html.dark .sub-opt{color:#aab2c0}
html.dark .sub-opt.is-active{background:#222a36;color:#dfe6f2}
html.dark .login-upsell{background:linear-gradient(180deg,#1a1710,#15130d);border-color:#3a3322}
html.dark .login-upsell>strong{color:#e7b864}
html.dark .login-upsell p{color:#c9b58f}
html.dark .login-free-banner{background:#0f2418;border-color:#1f5a3a;color:#8fe0b0}
html.dark .login-lockin{background:#13203a;border-color:#1f3a5f;color:#bcd0f0 !important}
html.dark .login-lockin strong{color:#9bbcff}

/* ---- shell marketing strips / sticky labels / notes (hardcoded light) ---- */
html.dark .team-band{background:#13161b;border-color:#262b33}
html.dark .team-line{color:#aab2c0}
html.dark .team-more{border-color:#13161b;background:#3730a3;color:#fff}
html.dark .trust-bar{background:#0f1216 !important;border-color:#262b33}
html.dark .trust-item{background:transparent;color:#cdd3df}
html.dark .trust-item small{color:#8b94a3}
html.dark .trust-item i{color:#7facff}
html.dark .coming-soon-panel{background:#13171d;border-color:#262b33;color:#c3ccda}
html.dark .dl-note,html.dark .selfserve-note,html.dark .st-load-card{background:#13171d;border-color:#262b33;color:#c3ccda}
html.dark .st-time-note{background:#0f2418;border-color:#1f5a3a;color:#8fe0b0}
html.dark .seg-track{background:#13171d !important;border-color:#262b33}
html.dark .mode-sticky.self{background:#181c22;color:#aab2c0}
html.dark .mode-sticky.daily{background:#0f2418;color:#8fe0b0}
html.dark .announce-free{background:#0f2418;border-color:#1f5a3a;color:#8fe0b0}
html.dark .announce-free:hover{background:#123121}
html.dark .hb-bservice{background:#181c22 !important;border-color:#262b33 !important}
html.dark .hb-bservice strong{color:#e8ebf2}
html.dark .hb-bservice span,html.dark .hb-bservice small{color:#9099a8}

/* active tool tab: dark fill, keep the vivid coloured underline */
html.dark .mode-tab.active{background:#222a36 !important;color:#eef1f6 !important}
/* header copy-email button */
html.dark .mail-copy{background:transparent;color:#8b94a3;border-color:#2a2f3a}
html.dark .mail-copy:hover{color:#cdd3df}
/* resize-tool outline buttons / notes / option chips */
html.dark .btn-outline{background:#1b2026 !important;color:#cdd3df !important;border-color:#2f343d !important}
html.dark .info-note,html.dark .rz-note,html.dark .cm-note,html.dark .tip-note{background:#13171d !important;border-color:#262b33 !important;color:#c3ccda}
html.dark .ac-caro-arrow,html.dark .hb-caro-arrow,html.dark .cf-arrow,html.dark .caro-arrow{background:#1b2026 !important;color:#cdd3df !important;border-color:#2f343d !important}
html.dark .cm-opt{background:#1b2026;color:#aab2c0;border-color:#2a2f3a}
html.dark .cm-opt.is-active{background:#16233c !important;color:#bcd4ff !important;border-color:#2f6fe0 !important}

/* ---- QA Statics / Social Ads (sf-) ---- */
html.dark .sf-hero h2,html.dark .sf-preview-head h3{color:#eef1f6}
html.dark .sf-hero .accent,html.dark .sf-hero-badges i,html.dark .sf-citation a{color:#9b8cff}
html.dark .sf-eyebrow{background:#1a1f3a;border-color:#2c356b;color:#9b8cff}
html.dark .sf-hero-sub,html.dark .sf-spec-row>b{color:#c3ccda}
html.dark .sf-hero-badges,html.dark .sf-flabel,html.dark .sf-preview-label,html.dark .sf-legend,
html.dark .sf-spec-row>span{color:#9099a8}
html.dark .sf-platform-btn,html.dark .sf-size-btn,html.dark .sf-toggle,html.dark .sf-replace{background:#1b2026;border-color:#2a2f3a;color:#cdd3df}
html.dark .sf-platform-btn:hover,html.dark .sf-size-btn:hover{border-color:#4f46e5;background:#1f2530}
html.dark .sf-platform-btn.active{background:#4f46e5;border-color:#4f46e5;color:#fff}
html.dark .sf-size-btn.active{background:#1c233f;border-color:#4f46e5;color:#bcc4ff}
html.dark .sf-toggle-l{color:#cdd3df}
html.dark .sf-replace:hover{border-color:#6b63f0;color:#9b8cff}
html.dark .sf-spec{border-top-color:#262b33}
html.dark .sf-slider{background:#3a414c}
html.dark .sf-citation{background:#13171d;border-color:#262b33}
html.dark .sf-citation .sf-cit-h{color:#cdd3df}
html.dark .sf-citation .sf-cit-sub{color:#9099a8}
html.dark .sf-preview-size{background:#222831;color:#cdd3df}
/* canvas dark, artboard (frame + dropzone empty state) stays light so creatives render true */
html.dark .sf-stage{background:#13171d !important;background-image:none !important;border:1px solid #262b33}
html.dark .sf-frame{background:#ffffff !important;background-image:none !important;box-shadow:0 8px 28px rgba(0,0,0,.55)}

/* ---- Image Converter (cv-) ---- */
html.dark .cv-hero h2,html.dark .cv-card-name,html.dark .cv-sum-rows b{color:#eef1f6}
html.dark .cv-hero-sub .accent,html.dark .cv-hero-badges i,html.dark .cv-plan-note i,
html.dark .cv-target-readout,html.dark .cv-sum-big strong,html.dark .cv-now.ok,html.dark .cv-sum-save,html.dark .cv-step-head .cv-num{color:#a78bfa}
html.dark .cv-hero-sub,html.dark .cv-step-head h2{color:#dfe3ea}
html.dark .cv-hero-note,html.dark .cv-hero-badges,html.dark .cv-step-head p,html.dark .cv-card-meta,
html.dark .cv-was,html.dark .cv-sum-rows span,html.dark .cv-custom-label,html.dark .cv-target-head,html.dark .cv-sum-big span{color:#9099a8}
html.dark .cv-num{background:#241a3d}
html.dark .cv-fmt{background:#1b2026;border-color:#2a2f3a}
html.dark .cv-fmt strong{color:#cdd3df}
html.dark .cv-fmt i,html.dark .cv-fmt small{color:#8b94a3}
html.dark .cv-fmt:hover{border-color:#7c3aed;background:#1f1a30}
html.dark .cv-fmt.active{background:#241a3d;border-color:#7c3aed}
html.dark .cv-fmt.active i,html.dark .cv-fmt.active strong{color:#a78bfa}
html.dark .cv-file{background:#13171d;border-color:#23282f}
html.dark .cv-file-name{color:#cdd3df}
html.dark .cv-file.unsafe{background:#2a1418;border-color:#5a2730}
html.dark .cv-file.unsafe .cv-file-name{color:#f0a5b1}
html.dark .cv-file.safe{background:#1b1730;border-color:#3a2f63}
html.dark .cv-slider{background:linear-gradient(90deg,#7c3aed var(--fill,15%),#2a2f3a var(--fill,15%))}
html.dark .cv-slider:disabled{background:#222831}
html.dark .cv-custom-field{background:#11151b;border-color:#2a2f3a}
html.dark .cv-custom{color:#e8ebf2}
html.dark .cv-live-alert{background:#2a1418;border-color:#5a2730}
html.dark .cv-live-alert span{color:#f0a5b1}
html.dark .cv-live-alert span b{color:#ffd0d8}
html.dark .cv-dim-alert{background:#2a210f;border-color:#5a4a1f}
html.dark .cv-dim-alert-body strong{color:#e8c06a}
html.dark .cv-dim-alert-body span,html.dark .cv-dim-alert-body b{color:#d6b878}
html.dark .cv-plan-note{background:#1b1730;border-color:#3a2f63;color:#c5b8e8}
html.dark .cv-plan-note strong,html.dark .cv-plan-link{color:#c5b8e8}
html.dark .cv-card{background:#181c22;border-color:#262b33}
html.dark .cv-summary{background:#13171d;border-color:#262b33}
html.dark .cv-saved{background:#241a3d;color:#a78bfa}
html.dark .cv-saved.cv-grew{background:#222831;color:#9099a8}
html.dark .cv-file-thumb{background-color:#1b2026;border-color:#2a2f3a}
html.dark .cv-mode-label{color:#9099a8}
html.dark .cv-mode-hint{color:#7a8294}
html.dark .cv-mode-seg{background:#13171d;border-color:#2a2f3a}
html.dark .cv-mode-btn{color:#8b94a3}
html.dark .cv-mode-btn:hover{color:#cdd3df}
html.dark .cv-mode-btn.active{background:#241a3d;color:#a78bfa;box-shadow:none}
html.dark .cv-row-slider{background:linear-gradient(90deg,#7c3aed var(--fill,15%),#2a2f3a var(--fill,15%))}
html.dark .cv-row-readout{color:#a78bfa}
html.dark .cv-row-warn{color:#f0707f}
html.dark .cv-optmin{background:#1b1730;border-color:#3a2f63}
html.dark .cv-optmin span{color:#c5b8e8}
html.dark .cv-optmin span strong{color:#d3c6f5}
html.dark .cv-crosssell{background:#13171d;border-color:#262b33;color:#9099a8}
html.dark .cv-crosssell-link{color:#a78bfa}
/* Image Compressor (ic-) — Global/Individual + thumbnails + per-row sliders (dark) */
html.dark .ic-file-thumb{background-color:#1b2026;border-color:#2a2f3a}
html.dark .ic-file.unsafe{background:#2a1418;border-color:#5a2730}
html.dark .ic-file.unsafe .ic-file-name{color:#f0a5b1}
html.dark .ic-file.safe{background:#10271b;border-color:#235a3a}
html.dark .ic-row-warn{color:#f0707f}
html.dark .ic-mode-label{color:#9099a8}
html.dark .ic-mode-hint{color:#7a8294}
html.dark .ic-mode-seg{background:#0f1318;border-color:#262b33;box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
html.dark .ic-mode-btn{color:#8b94a3}
html.dark .ic-mode-btn:hover:not(.active){color:#cdd3df}
html.dark .ic-mode-btn.active{color:#cdeedd}
html.dark .ic-seg-glass{background:linear-gradient(180deg,rgba(120,205,165,.24),rgba(50,140,100,.13));border-color:rgba(150,220,185,.32);box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.2),inset 0 -3px 6px rgba(0,0,0,.18)}
html.dark .ic-seg-spec{opacity:.35}
html.dark .ic-row-slider{background:linear-gradient(90deg,#0d8f4f var(--fill,15%),#2a2f3a var(--fill,15%))}
html.dark .ic-slider::-webkit-slider-thumb,html.dark .ic-row-slider::-webkit-slider-thumb{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(214,243,230,.78));border-color:#1ec074;box-shadow:0 5px 13px rgba(0,0,0,.55),0 0 0 1px rgba(30,192,116,.35),inset 0 1px 1px rgba(255,255,255,.95)}
html.dark .ic-slider::-moz-range-thumb,html.dark .ic-row-slider::-moz-range-thumb{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(214,243,230,.78));border-color:#1ec074;box-shadow:0 5px 13px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.95)}
html.dark .ic-row-readout{color:#5fcf93}
html.dark .ic-optmin{background:#10271b;border-color:#235a3a}
html.dark .ic-optmin span{color:#9fd4b7}
html.dark .ic-optmin span strong{color:#bfe6cf}
html.dark .ic-file-name{color:#cdd3df}
/* shared bj- free-plan note / reduced-tag (compressor + backup + gif tools) — dark parity */
html.dark .bj-plan-note{background:#2a210f;border-color:#5a4a1f;color:#d6b878}
html.dark .bj-plan-note strong,html.dark .bj-plan-link{color:#e8c06a}
html.dark .bj-reduced-tag{background:#241d10;border-color:#5a4a1f;color:#d6b878}

/* ---- misc readability ---- */
html.dark .muted,html.dark .sub,html.dark .hint,html.dark small{color:#8b94a3}
html.dark a{color:#7facff}
html.dark .warn,html.dark .note-warn{background:#2a210f;border-color:#5a4a1f;color:#e8c06a}