/* JF-Suite — Bedien-Chrome nach Corporate Design (iter115).
   Geteiltes Stylesheet für ALLE statischen Tools (wie suite-nav.js cross-app geladen:
   <link rel="stylesheet" href="/instagram/cd-chrome.css?v=1">). Betrifft NUR die Bedien-Ebene
   (Buttons, Regler, Upload, Schalter, Felder, Panels) — NICHT die Canvas-/Grafik-Ausgabe.
   Tokens als CSS-Variablen (nie Hex in Controls hardcoden). Dunkel = Standard; data-theme auf <html>.
   Regler-Füllung setzt cd-chrome.js pro Wert inline (Pseudo-Elemente sind nicht inline stylebar). */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root, :root[data-theme="dark"]{
  --red:#D60F3C; --red-hover:#b70c32; --red-active:#9c0a2b;
  --navy:#002953; --mint:#99CFB8; --mint-strong:#7fceac;
  --font-ui:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-brand:'Real Head Pro','Inter',system-ui,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  /* dark */
  --bg-2:#0a131b; --bg:#0e1922; --panel:#14212d; --panel-2:#1b2a38; --raised:#22364a;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.17);
  --text:#eaf0f4; --text-muted:#8497a5; --track:rgba(255,255,255,.13);
  --danger:#ff6a80; --shadow:0 12px 34px rgba(0,0,0,.48); --focus:#99CFB8;
  /* Aliase auf ältere Tool-Variablennamen → damit bestehende Regeln CD-Farben ziehen.
     Familie A (titelbild/wasserzeichen/youtube_thumbnail/anzeigengif): rot/ink/ground/muted/navy/mint.
     Familie B (umfrage/story): accent/jf-red/subtle (+ bg/text/panel/border teilen die CD-Namen). */
  --rot:var(--red); --ink:var(--text); --muted:var(--text-muted); --ground:var(--bg);
  --sans:var(--font-ui); --accent:var(--red); --jf-red:var(--red); --subtle:var(--panel-2);
}
:root[data-theme="light"]{
  --bg-2:#e9edf1; --bg:#f5f2f0; --panel:#ffffff; --panel-2:#f1f4f7; --raised:#ffffff;
  --border:#e3e7eb; --border-strong:#ccd3da;
  --text:#16202a; --text-muted:#5f6d7a; --track:#dbe1e7;
  --danger:#c40d34; --shadow:0 8px 24px rgba(16,32,48,.12); --focus:#002953;
}

/* ── Regler (input[type=range]) — die eine korrekte Bauweise (aus dem CD-Handoff) ── */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;padding:0;
  background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:100% 6px;
  cursor:pointer;outline:none;display:block;}
input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:18px;background:transparent;border:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;margin-top:0;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.45);}
input[type=range]::-moz-range-track{height:18px;background:transparent;border:none;}
input[type=range]::-moz-range-thumb{box-sizing:border-box;width:18px;height:18px;border:2px solid var(--navy);
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 1px 4px rgba(0,0,0,.45),0 0 0 3px var(--focus);}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 1px 4px rgba(0,0,0,.45),0 0 0 3px var(--focus);}

/* Fokus (nur Tastatur) + Platzhalter + Spinner-Keyframe */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
input::placeholder,textarea::placeholder{color:var(--text-muted);}
@keyframes jfspin{to{transform:rotate(360deg);}}

/* ── A · Buttons ──────────────────────────────────────────────────────────────
   Bare .btn = Sekundär (Rahmen). .btn.primary/.danger/.ghost = Varianten. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
  border-radius:6px;font:600 14px var(--font-ui);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
  background:transparent;border:1px solid var(--border-strong);color:var(--text);}
.btn:hover{background:var(--panel-2);border-color:var(--text-muted);}
.btn.primary{background:var(--red);border:none;color:#fff;}
.btn.primary:hover{background:var(--red-hover);}
.btn.primary:active{background:var(--red-active);}
.btn.ghost{background:transparent;border:1px solid transparent;color:var(--text-muted);padding:0 14px;}
.btn.ghost:hover{background:var(--panel-2);color:var(--text);}
.btn.danger{background:transparent;border:1px solid var(--danger);color:var(--danger);}
.btn.danger:hover{background:var(--danger);color:#fff;}
.btn:disabled,.btn.disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;}
.btn.small{height:32px;padding:0 12px;font:600 13px var(--font-ui);}
.btn.icon{height:32px;width:32px;padding:0;}
.btn.full{width:100%;}
.btn.full.primary,.btn.primary.full{height:48px;font:600 15px var(--font-ui);}
/* Lade-Zustand: <span class="jf-spin"></span> im Button */
.jf-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:jfspin .7s linear infinite;display:inline-block;}

/* ── F · Panels / Karten / Sektionen ── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;}
.jf-kicker{font:600 11px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}
.jf-card-title{font:700 16px var(--font-brand);color:var(--text);}
.jf-sep{height:1px;background:var(--border);border:0;margin:16px 0;}

/* ── C · Datei-Upload (label umschließt verstecktes input[type=file]) ── */
.jf-upload{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border:1.5px dashed var(--border-strong);
  border-radius:8px;background:transparent;color:var(--text-muted);font:600 13px var(--font-ui);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;text-align:center;}
.jf-upload:hover{border-color:var(--mint);color:var(--text);background:var(--panel-2);}
.jf-upload .jf-plus{color:var(--red);font-size:17px;font-weight:700;}
.jf-upload.chosen{border-style:solid;border-color:var(--border-strong);background:var(--panel-2);justify-content:flex-start;padding:10px;color:var(--text);}
.jf-upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

/* ── D · iOS-Schalter + CD-Checkbox ── */
.jf-switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none;font:500 14px var(--font-ui);color:var(--text);}
.jf-switch input{position:absolute;opacity:0;width:0;height:0;}
.jf-switch .track{width:44px;height:24px;border-radius:12px;background:var(--track);position:relative;transition:background .15s;flex:none;}
.jf-switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .15s;}
.jf-switch input:checked + .track{background:var(--mint);}
.jf-switch input:checked + .track::after{transform:translateX(20px);}
.jf-switch input:focus-visible + .track{outline:2px solid var(--focus);outline-offset:2px;}
.jf-check{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--border-strong);background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:transparent;font:700 12px var(--font-ui);flex:none;}
.jf-check.on{background:var(--red);border-color:var(--red);color:#fff;}

/* ── E · Eingabefeld / Suche + Chips ── */
.jf-field{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;background:var(--panel-2);
  border:1px solid var(--border-strong);border-radius:6px;color:var(--text);}
.jf-field:focus-within{border-color:var(--focus);box-shadow:0 0 0 2px var(--focus) inset;}
.jf-field input{border:0;background:transparent;color:var(--text);font:500 14px var(--font-ui);outline:none;flex:1;min-width:0;}
.jf-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;background:var(--panel-2);
  border:1px solid var(--border);border-radius:6px;font:500 13px var(--font-ui);color:var(--text);}
.jf-chip button{width:20px;height:20px;border-radius:4px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;}
.jf-chip button:hover{background:var(--danger);color:#fff;}

/* Native Datei-Inputs ZENTRAL restylen — der „Datei auswählen"-Knopf (::file-selector-button) als
   CD-Sekundärbutton. Wirkt in JEDEM Tool ohne Markup-Änderung (auch React). */
input[type=file]{font:500 13px var(--font-ui);color:var(--text-muted);max-width:100%;}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  margin-right:10px;padding:7px 12px;cursor:pointer;font-family:var(--font-ui);font-weight:600;font-size:13px;
  border:1px solid var(--border-strong);border-radius:6px;background:transparent;color:var(--text);
  transition:background .12s,border-color .12s;}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover{background:var(--panel-2);border-color:var(--text-muted);}

/* Wert-Badge (Regler) + Label */
.jf-val{font:600 13px var(--mono);color:var(--text);padding:3px 8px;background:var(--panel-2);border-radius:5px;}