/* ==========================================================================
   Skórka „Soft" (Etap AA) — styl wg design systemu „GAP Scraper": tokeny kolorów (Dzień/Noc), czcionka
   Plus Jakarta Sans, karty z cieniem zamiast obrysu, przyciski-pigułki, kafle liczb, ciemny pasek górny.
   Tylko styl — te same ekrany i te same kontrolki co w skórce „Klasyczny".

   ZASADA: KAŻDA reguła zaczyna się od  :root[data-skin="soft"]  (albo jest @font-face / @media), więc przy
   <html data-skin="classic"> nic z tego pliku nie działa. Wariant ciemny: :root[data-skin="soft"][data-theme="dark"].
   Kolejna skórka = kolejny plik w static/skins/ + wpis w skins.json (zero zmian w dashboard.html).
   Powierzchnie oglądania obrazu (#lb, #gv, .qc-view, .cropstage, --log-bg) są CELOWO ciemne w obu
   motywach i NIE są tu skórkowane. Emoji w etykietach przycisków zostają bez zmian.
   ========================================================================== */

/* ---- czcionka: pliki woff2 pobiera raz scripts/fetch_fonts.py (patrz static/fonts/README_PL.md);
        bez nich działa awaryjnie "Segoe UI" / system-ui ---- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/PlusJakartaSans-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/PlusJakartaSans-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/PlusJakartaSans-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/PlusJakartaSans-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/PlusJakartaSans-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/PlusJakartaSans-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("/static/fonts/PlusJakartaSans-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("/static/fonts/PlusJakartaSans-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================================
   1. TOKENY — Dzień (jasny). Tokeny systemu (--s-*) + mapowanie na zmienne aplikacji.
   ========================================================================== */
:root[data-skin="soft"]{
  color-scheme:light;
  /* tokeny design systemu (Dzień) */
  --panel2:#f2f1ed; --thead:#f5f4f0; --border-strong:#828190; --accent-h:#9c1858;
  --accent-from:#f2664a; --accent-to:#ee4f8e; --on-accent:#141729;
  --ink-fill:#141729; --ink-fill-h:#262b45; --on-ink-fill:#ffffff;
  --bar:#141729; --bar-2:#262b45; --on-bar:#f3f4f8; --on-bar-muted:#a9aec4;
  --green:#0f6b5c; --green-soft:#dcf1ec; --warn-soft:#f8edcf; --danger:#b3350f; --danger-soft:#fbe6dc;
  --src-gap:#1d4fd0; --src-gap-soft:#dfe8fb; --src-zal:#8a3fb5; --src-zal-soft:#f0e3f8;
  --overlay:rgba(20,23,41,.45);
  --shadow-card:0 1px 2px rgba(20,23,41,.04), 0 10px 28px rgba(20,23,41,.07);
  --shadow-pop:0 8px 24px rgba(20,23,41,.14);
  --shadow-modal:0 18px 48px rgba(20,23,41,.16);
  --shadow-accent:0 8px 20px rgba(238,79,142,.32);
  --grad:linear-gradient(120deg,var(--accent-from),var(--accent-to));
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --font-ui:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  /* zmienne aplikacji */
  --bg:#eeedea; --panel:#fcfbf9; --line:#e2e0da; --txt:#141729; --muted:#62657a;
  --accent:#b8216a; --accent-2:#9c1858; --accent-soft:#fce4ec;
  --ok:#0f6b5c; --warn:#855600; --err:#b3350f;
  --center-line:rgba(15,107,92,.9);
  --full:#1d4fd0; --ctop:#8a3fb5; --cbot:#0f6b5c; --det:#855600;
  --radius:20px; --shadow:var(--shadow-card);
  --input-bg:#fcfbf9; --btn-bg:#f2f1ed; --btn-hover:#e8e6df; --danger-border:#b3350f;
  --focus-ring:#b8216a; --bg-soft:#f2f1ed; --th-bg:#f5f4f0; --row-hover:#f0eee8; --row-sel:#fce4ec; --thumb-bg:#f2f1ed;
  --box-bg:#f2f1ed; --ov-bg:#f8edcf; --grp-bg:#f2f1ed; --grp-line:#e2e0da; --sw-border:#828190;
  --tag-blue-bg:#dfe8fb; --tag-blue-tx:#1d4fd0; --tag-ref-tx:#9c1858;
  --tag-done-bg:#dcf1ec; --tag-done-tx:#0f6b5c;
  --tag-err-bg:#fbe6dc; --tag-err-tx:#b3350f;
  --tag-warn-bg:#f8edcf; --tag-warn-tx:#855600;
  --tag-ind-bg:#f0e3f8; --tag-ind-tx:#8a3fb5;
  --tag-rose-bg:#fce4ec; --tag-rose-tx:#9c1858;
  --tag-mag-bg:#fce4ec; --tag-mag-tx:#9c1858;
  --toast-bg:#fcfbf9; --toast-tx:#141729;
  --sec-scan:#b8216a; --sec-scan-bg:#fce4ec;
  --sec-main:#0f6b5c; --sec-main-bg:#dcf1ec;
  --sec-save:#855600; --sec-save-bg:#f8edcf;
  --sec-nav:#62657a;  --sec-nav-bg:#f2f1ed;
  /* Etap AB: kolory funkcji sekcji paneli bocznych (tinta tła / pigułka nagłówka / kolor etykiety i ikony) — pastele z palety, Noc = wartości night */
  --fn-pink-bg:#fce4ec; --fn-pink-pill:#eebdd2; --fn-pink-ink:#b8216a;
  --fn-blue-bg:#dfe8fb; --fn-blue-pill:#b8c9f2; --fn-blue-ink:#1d4fd0;
  --fn-green-bg:#dcf1ec; --fn-green-pill:#b3d6cf; --fn-green-ink:#0f6b5c;
  --fn-violet-bg:#f0e3f8; --fn-violet-pill:#dcc2eb; --fn-violet-ink:#8a3fb5;
  --fn-amber-bg:#f8edcf; --fn-amber-pill:#e1cfa6; --fn-amber-ink:#855600;
  --fn-neutral-bg:#f2f1ed; --fn-neutral-pill:#d5d5d6; --fn-neutral-ink:#62657a;
  --fn-save-bg:#c8e4de; --fn-save-pill:#a3ccc4; --fn-save-ink:#0f6b5c;
  /* kolory zakładek modułów (pasek jest ciemny w obu motywach, więc jasne odcienie z palety Nocy; sky/lime = mieszanki palety) */
  --tab-og:#ff8fb1; --tab-cf:#d3a6f2; --tab-crop:#8fb4ff; --tab-cc:#6fd3be; --tab-sc:#ebc06a; --tab-bc:#ff9a85; --tab-sk:#7fc3de; --tab-ve:#adc994; --tab-qc:#a9aec4;
}

/* ---- Noc (ciemny): granat, nie czerń ---- */
:root[data-skin="soft"][data-theme="dark"]{
  color-scheme:dark;
  --panel2:#20253e; --thead:#1b2036; --border-strong:#7c84a6; --accent-h:#ffb1c8;
  --accent-from:#f4714f; --accent-to:#f25c9e; --on-accent:#141729;
  --ink-fill:#eef0f8; --ink-fill-h:#ffffff; --on-ink-fill:#141729;
  --bar:#0a0c18; --bar-2:#1b2036; --on-bar:#f3f4f8; --on-bar-muted:#a9aec4;
  --green:#6fd3be; --green-soft:#16302e; --warn-soft:#372c12; --danger:#ff9a85; --danger-soft:#3d1d17;
  --src-gap:#8fb4ff; --src-gap-soft:#17233f; --src-zal:#d3a6f2; --src-zal-soft:#2c1d3a;
  --overlay:rgba(0,0,0,.62);
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
  --shadow-pop:0 8px 24px rgba(0,0,0,.5);
  --shadow-modal:0 18px 48px rgba(0,0,0,.55);
  --shadow-accent:0 8px 20px rgba(242,92,158,.28);
  --bg:#0e1120; --panel:#171b2f; --line:#2a3050; --txt:#eef0f8; --muted:#a3a9c0;
  --accent:#ff8fb1; --accent-2:#ffb1c8; --accent-soft:#3a1f33;
  --ok:#6fd3be; --warn:#ebc06a; --err:#ff9a85;
  --center-line:rgba(111,211,190,.9);
  --full:#8fb4ff; --ctop:#d3a6f2; --cbot:#6fd3be; --det:#ebc06a;
  --shadow:var(--shadow-card);
  --input-bg:#171b2f; --btn-bg:#20253e; --btn-hover:#2a3050; --danger-border:#ff9a85;
  --focus-ring:#ff8fb1; --bg-soft:#20253e; --th-bg:#1b2036; --row-hover:#222843; --row-sel:#3a1f33; --thumb-bg:#20253e;
  --box-bg:#20253e; --ov-bg:#372c12; --grp-bg:#20253e; --grp-line:#2a3050; --sw-border:#7c84a6;
  --tag-blue-bg:#17233f; --tag-blue-tx:#8fb4ff; --tag-ref-tx:#ffb1c8;
  --tag-done-bg:#16302e; --tag-done-tx:#6fd3be;
  --tag-err-bg:#3d1d17; --tag-err-tx:#ff9a85;
  --tag-warn-bg:#372c12; --tag-warn-tx:#ebc06a;
  --tag-ind-bg:#2c1d3a; --tag-ind-tx:#d3a6f2;
  --tag-rose-bg:#3a1f33; --tag-rose-tx:#ffb1c8;
  --tag-mag-bg:#3a1f33; --tag-mag-tx:#ffb1c8;
  --toast-bg:#171b2f; --toast-tx:#eef0f8;
  --sec-scan:#ff8fb1; --sec-scan-bg:#3a1f33;
  --sec-main:#6fd3be; --sec-main-bg:#16302e;
  --sec-save:#ebc06a; --sec-save-bg:#372c12;
  --sec-nav:#a3a9c0;  --sec-nav-bg:#20253e;
  --fn-pink-bg:#3a1f33; --fn-pink-pill:#61354c; --fn-pink-ink:#ff8fb1;
  --fn-blue-bg:#17233f; --fn-blue-pill:#2f4065; --fn-blue-ink:#8fb4ff;
  --fn-green-bg:#16302e; --fn-green-pill:#28514b; --fn-green-ink:#6fd3be;
  --fn-violet-bg:#2c1d3a; --fn-violet-pill:#4d385f; --fn-violet-ink:#d3a6f2;
  --fn-amber-bg:#372c12; --fn-amber-pill:#5b4a24; --fn-amber-ink:#ebc06a;
  --fn-neutral-bg:#20253e; --fn-neutral-pill:#3a3f58; --fn-neutral-ink:#a3a9c0;
  --fn-save-bg:#1f403c; --fn-save-pill:#2f5d56; --fn-save-ink:#6fd3be;
}

/* ==========================================================================
   2. PODSTAWY: typografia, fokus, przewijanie
   ========================================================================== */
:root[data-skin="soft"] body{font-family:var(--font-ui);font-size:13px;line-height:20px;font-weight:500;color:var(--txt);background:var(--bg);scrollbar-color:var(--border-strong) var(--panel2)}
:root[data-skin="soft"] ::selection{background:var(--accent-soft);color:var(--txt)}
:root[data-skin="soft"] *:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root[data-skin="soft"] input:focus,:root[data-skin="soft"] select:focus,:root[data-skin="soft"] textarea:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
:root[data-skin="soft"] .mono{font-family:var(--font-mono)}
:root[data-skin="soft"] label{font-size:12px;line-height:16px;font-weight:600;color:var(--muted)}
:root[data-skin="soft"] .hint{font-size:12px;line-height:16px;font-weight:500}
:root[data-skin="soft"] details summary{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600}
:root[data-skin="soft"] .subh{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600}
:root[data-skin="soft"] a{color:var(--accent)}
:root[data-skin="soft"] a:hover{color:var(--accent-h)}
:root[data-skin="soft"] input[type=checkbox],:root[data-skin="soft"] input[type=radio],:root[data-skin="soft"] input.rowchk{accent-color:var(--accent)}

/* ==========================================================================
   3. GÓRNY PASEK (ciemny w obu motywach) + zakładki-pigułki
   ========================================================================== */
:root[data-skin="soft"] header{background:var(--bar);color:var(--on-bar);border-bottom:0;min-height:56px;padding:8px 20px;gap:12px;box-shadow:0 2px 14px rgba(20,23,41,.18)}
:root[data-skin="soft"] header h1{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--on-bar)}
:root[data-skin="soft"] header .sub{color:var(--on-bar-muted)}
:root[data-skin="soft"] header .brand .sub{font-size:11px;line-height:14px;max-width:340px}
:root[data-skin="soft"] header .tabs{background:transparent;padding:0;gap:4px;border-radius:var(--radius-lg);flex-wrap:wrap}
:root[data-skin="soft"] header .tabs .tab{color:var(--on-bar-muted);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px}
:root[data-skin="soft"] header .tabs .tab:hover{color:var(--on-bar);background:var(--bar-2)}
:root[data-skin="soft"] header .tabs .tab::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--tabc,var(--on-bar-muted))}
:root[data-skin="soft"] header .tabs .tab.active{background:color-mix(in srgb,var(--tabc,var(--bar-2)) 24%,var(--bar-2));color:var(--on-bar);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tabc,var(--bar-2)) 55%,transparent)}
:root[data-skin="soft"] header #tabbtn_og{--tabc:var(--tab-og)}
:root[data-skin="soft"] header #tabbtn_cf{--tabc:var(--tab-cf)}
:root[data-skin="soft"] header #tabbtn_crop{--tabc:var(--tab-crop)}
:root[data-skin="soft"] header #tabbtn_cc{--tabc:var(--tab-cc)}
:root[data-skin="soft"] header #tabbtn_sc{--tabc:var(--tab-sc)}
:root[data-skin="soft"] header #tabbtn_bc{--tabc:var(--tab-bc)}
:root[data-skin="soft"] header #tabbtn_sk{--tabc:var(--tab-sk)}
:root[data-skin="soft"] header #tabbtn_ve{--tabc:var(--tab-ve)}
:root[data-skin="soft"] header #tabbtn_qc{--tabc:var(--tab-qc)}
:root[data-skin="soft"] header .btn{background:var(--bar-2);color:var(--on-bar)}
:root[data-skin="soft"] header .btn:hover{background:var(--ink-fill-h);color:var(--on-ink-fill)}
:root[data-skin="soft"] header #skin_select{background:var(--bar-2);color:var(--on-bar);border-color:var(--on-bar-muted);width:auto;min-width:0;padding:5px 10px;font-weight:700;border-radius:999px}
:root[data-skin="soft"] header label{color:var(--on-bar-muted);margin:0}
:root[data-skin="soft"] header .tag{background:var(--bar-2);color:var(--on-bar)}
:root[data-skin="soft"] .tabs{background:var(--panel2);padding:3px;border-radius:999px}
:root[data-skin="soft"] .tabs .tab{border-radius:999px;font-weight:700}
:root[data-skin="soft"] .tabs .tab.active{background:var(--ink-fill);color:var(--on-ink-fill);box-shadow:none}

/* ==========================================================================
   4. KARTY (panel): cień zamiast obrysu, nagłówek jak etykieta, kropka koloru sekcji
   ========================================================================== */
:root[data-skin="soft"] .panel{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
:root[data-skin="soft"] .panel h2{font-size:12px;line-height:16px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;border-bottom:0;padding:16px 16px 2px}
/* ---- Etap AB: panele boczne — każda sekcja to osobna karta w kolorze FUNKCJI (tinta pastelowa), nagłówek = pigułka z ikoną, grupy pól (.fg) = neutralne karty w środku ---- */
:root[data-skin="soft"] aside.panel.side{background:transparent;border:0;box-shadow:none;border-radius:0}
:root[data-skin="soft"] aside.panel.side > h2{--fn-bg:var(--fn-neutral-bg);--fn-pill:var(--fn-neutral-pill);--fn-ink:var(--fn-neutral-ink);--fn-ring:var(--line);margin:14px 0 0;padding:10px 10px 2px;background:var(--fn-bg);color:var(--txt);border:1px solid var(--fn-ring);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;text-transform:none;letter-spacing:0;display:block}
:root[data-skin="soft"] aside.panel.side > h2:first-child{margin-top:0}
:root[data-skin="soft"] aside.panel.side > h2 + .body{background:var(--fn-bg);border:1px solid var(--fn-ring);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:6px 6px 10px}
:root[data-skin="soft"] aside.panel.side > .body{padding:6px 6px 10px;min-width:0}
:root[data-skin="soft"] aside.panel.side > .body:empty{display:none}
:root[data-skin="soft"] aside.panel.side > h2 + .body{--fn-bg:var(--fn-neutral-bg);--fn-ink:var(--fn-neutral-ink)}
/* mapowanie klasy funkcji -> rodzina kolorów (pink / blue / green / violet / amber / neutral / save); h2 i następny .body dostają te same zmienne */
:root[data-skin="soft"] aside.panel.side > h2:is(.sc-client,.sc-color),:root[data-skin="soft"] aside.panel.side > h2:is(.sc-client,.sc-color) + .body{--fn-bg:var(--fn-pink-bg);--fn-pill:var(--fn-pink-pill);--fn-ink:var(--fn-pink-ink);--fn-ring:transparent}
:root[data-skin="soft"] aside.panel.side > h2:is(.sc-scan,.sc-session),:root[data-skin="soft"] aside.panel.side > h2:is(.sc-scan,.sc-session) + .body{--fn-bg:var(--fn-blue-bg);--fn-pill:var(--fn-blue-pill);--fn-ink:var(--fn-blue-ink);--fn-ring:transparent}
:root[data-skin="soft"] aside.panel.side > h2.sc-frame,:root[data-skin="soft"] aside.panel.side > h2.sc-frame + .body{--fn-bg:var(--fn-green-bg);--fn-pill:var(--fn-green-pill);--fn-ink:var(--fn-green-ink);--fn-ring:transparent}
:root[data-skin="soft"] aside.panel.side > h2.sc-mask,:root[data-skin="soft"] aside.panel.side > h2.sc-mask + .body{--fn-bg:var(--fn-violet-bg);--fn-pill:var(--fn-violet-pill);--fn-ink:var(--fn-violet-ink);--fn-ring:transparent}
:root[data-skin="soft"] aside.panel.side > h2:is(.sc-shadow,.sc-tone),:root[data-skin="soft"] aside.panel.side > h2:is(.sc-shadow,.sc-tone) + .body{--fn-bg:var(--fn-amber-bg);--fn-pill:var(--fn-amber-pill);--fn-ink:var(--fn-amber-ink);--fn-ring:transparent}
:root[data-skin="soft"] aside.panel.side > h2.sc-save,:root[data-skin="soft"] aside.panel.side > h2.sc-save + .body{--fn-bg:var(--fn-save-bg);--fn-pill:var(--fn-save-pill);--fn-ink:var(--fn-save-ink);--fn-ring:transparent}
:root[data-skin="soft"] aside.panel.side > h2:is(.sc-naming,.sc-nav),:root[data-skin="soft"] aside.panel.side > h2:is(.sc-naming,.sc-nav) + .body{--fn-bg:var(--fn-neutral-bg);--fn-pill:var(--fn-neutral-pill);--fn-ink:var(--fn-neutral-ink);--fn-ring:var(--line)}
/* nagłówek sekcji: pigułka z ikoną + tytuł (t-label, bez wersalików) */
:root[data-skin="soft"] .sc-pill{display:inline-flex;align-items:center;gap:7px;max-width:100%;background:var(--fn-pill);color:var(--txt);border-radius:999px;padding:4px 12px 4px 9px;font-size:12px;line-height:16px;font-weight:700}
:root[data-skin="soft"] .sc-ico{display:inline-flex;flex:0 0 auto;color:var(--fn-ink)}
:root[data-skin="soft"] .sc-ico svg{width:16px;height:16px}
:root[data-skin="soft"] .sc-t{min-width:0;overflow-wrap:anywhere}
/* grupy pól: neutralna karta wewnątrz tintowanej sekcji, etykieta grupy w kolorze funkcji */
:root[data-skin="soft"] .fg{background:var(--panel);border:0;border-radius:var(--radius-md);padding:10px 8px;margin:0 0 8px;box-shadow:0 1px 2px rgba(20,23,41,.05)}
:root[data-skin="soft"] .fg:first-child{padding-top:10px}
/* cloud: pole „Folder na udziale” ma inline obramowanie/odstęp — wewnątrz karty .fg niepotrzebne */
:root[data-skin="soft"] .fg > #sess_sync_box{border-bottom:0 !important;padding-bottom:0 !important;margin-bottom:0 !important}
:root[data-skin="soft"] aside.panel.side .fg .row > .btn:not(.tiny){padding-left:9px;padding-right:9px;font-size:12px}
:root[data-skin="soft"] aside.panel.side .fg .row{gap:6px}
:root[data-skin="soft"] aside.panel.side > .body:not([id^="preset_host"]){padding-bottom:2px}
:root[data-skin="soft"] aside.panel.side > .body[id^="preset_host"]{background:var(--panel);border-radius:var(--radius-lg);margin-top:14px;padding:12px;box-shadow:var(--shadow-card)}
:root[data-skin="soft"] .fg .fg{background:transparent;box-shadow:none;border-radius:0;padding:8px 0 0;margin:8px 0 0;border-top:1px solid var(--line)}
:root[data-skin="soft"] .fg .fg:first-child{border-top:0;padding-top:0;margin-top:0}
:root[data-skin="soft"] .fg-h{font-size:12px;line-height:16px;font-weight:700;color:var(--fn-ink,var(--muted));letter-spacing:0;text-transform:none;margin:0 0 4px}
:root[data-skin="soft"] .fg-h + :is(label,.row,select,input):not(.chk){margin-top:2px}
/* grupy zwijane (<details class="fg fg-details">): przycisk-pigułka z szewronem */
:root[data-skin="soft"] details.fg-details{padding:6px 8px}
:root[data-skin="soft"] details.fg-details > summary,:root[data-skin="soft"] .fg details > summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;margin:0;padding:6px 10px;border-radius:999px;background:var(--panel2);color:var(--txt);font-size:12px;line-height:16px;font-weight:700;text-transform:none;letter-spacing:0}
:root[data-skin="soft"] details.fg-details > summary::-webkit-details-marker,:root[data-skin="soft"] .fg details > summary::-webkit-details-marker{display:none}
:root[data-skin="soft"] details.fg-details > summary::after,:root[data-skin="soft"] .fg details > summary::after{content:"";flex:0 0 auto;width:6px;height:6px;margin:-3px 2px 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
:root[data-skin="soft"] details.fg-details[open] > summary::after,:root[data-skin="soft"] .fg details[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
:root[data-skin="soft"] details.fg-details > summary:hover,:root[data-skin="soft"] .fg details > summary:hover{background:var(--btn-hover)}
:root[data-skin="soft"] details.fg-details[open] > summary{margin-bottom:8px}
:root[data-skin="soft"] details.fg-details > .fg-h{color:var(--fn-ink,var(--muted));margin-top:10px}
:root[data-skin="soft"] .panel .body{padding:10px 16px 14px}
:root[data-skin="soft"] .prog{border-bottom:1px solid var(--line)}
:root[data-skin="soft"] .prog .bar,:root[data-skin="soft"] .bar{height:8px;border-radius:999px;background:var(--panel2)}
:root[data-skin="soft"] .prog .bar>i,:root[data-skin="soft"] .bar>i{background:var(--grad);border-radius:999px}
:root[data-skin="soft"] .log{border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* ==========================================================================
   5. KAFLE LICZB (.kpi): pastele z palety; pierwszy kafel = bohater z gradientem
   ========================================================================== */
:root[data-skin="soft"] .kpis{gap:12px}
:root[data-skin="soft"] .kpi{background:var(--panel2);border:0;border-radius:var(--radius-xl);box-shadow:none;padding:14px 16px}
:root[data-skin="soft"] .kpi.full{background:var(--src-gap-soft)}
:root[data-skin="soft"] .kpi.ctop{background:var(--src-zal-soft)}
:root[data-skin="soft"] .kpi.cbot,:root[data-skin="soft"] .kpi.done{background:var(--green-soft)}
:root[data-skin="soft"] .kpi.det{background:var(--warn-soft)}
:root[data-skin="soft"] .kpi.err{background:var(--danger-soft)}
:root[data-skin="soft"] .kpi .v{font-size:clamp(24px,2.4vw,34px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--txt)}
:root[data-skin="soft"] .kpi .l{font-size:12px;line-height:16px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:4px}
:root[data-skin="soft"] .kpi.full .l,:root[data-skin="soft"] .kpi.ctop .l,:root[data-skin="soft"] .kpi.cbot .l,:root[data-skin="soft"] .kpi.det .l,:root[data-skin="soft"] .kpi.done .l,:root[data-skin="soft"] .kpi.err .l{color:var(--txt)}
:root[data-skin="soft"] .kpis > .kpi:first-child{background:var(--grad);box-shadow:var(--shadow-accent)}
:root[data-skin="soft"] .kpis > .kpi:first-child .v,:root[data-skin="soft"] .kpis > .kpi:first-child .l{color:var(--on-accent)}

/* ==========================================================================
   6. PRZYCISKI-PIGUŁKI, POLA, PRZEŁĄCZNIKI
   ========================================================================== */
:root[data-skin="soft"] .btn{border:0;border-radius:999px;background:var(--panel2);color:var(--txt);font-weight:700}
:root[data-skin="soft"] .btn:hover{background:var(--btn-hover)}
:root[data-skin="soft"] .btn:disabled{opacity:.5}
:root[data-skin="soft"] .btn.primary{background:var(--ink-fill);color:var(--on-ink-fill)}
:root[data-skin="soft"] .btn.primary:hover{background:var(--ink-fill-h)}
:root[data-skin="soft"] .btn.danger{background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
:root[data-skin="soft"] .btn.danger:hover{background:var(--danger-soft);filter:brightness(.97)}
:root[data-skin="soft"] .btn.tiny{border-radius:999px}
/* przyciski z kolorem wpisanym inline w znaczniku (Seedream / harmonizacja): kolor z tokenów, czytelny w obu motywach */
:root[data-skin="soft"] :is(#btn_sdr_batch,#fit_sdr_btn){color:var(--green) !important}
:root[data-skin="soft"] #fit_btn_bgf_prev{color:var(--src-zal) !important}
:root[data-skin="soft"] :is(#fit_sdr_btn,#fit_btn_bgf_prev){border-radius:var(--radius-md)}
:root[data-skin="soft"] #fit_modal #fit_sdr_btn.sdr-armed{background:var(--warn-soft);color:var(--warn) !important;box-shadow:inset 0 0 0 1px var(--warn)}
/* jedna akcja bohatera na ekran: „Przetwórz wszystkie" / „Generuj" / „Kopiuj modelki" (gradient + tekst on-accent) */
:root[data-skin="soft"] #btn_process,:root[data-skin="soft"] #cc_btn_process,:root[data-skin="soft"] #sc_btn_process,:root[data-skin="soft"] #bc_btn_process,:root[data-skin="soft"] #sk_btn_process,:root[data-skin="soft"] #ve_btn_process,:root[data-skin="soft"] #og_btn_process,:root[data-skin="soft"] #cf_btn_process{background:var(--grad);color:var(--on-accent);box-shadow:var(--shadow-accent)}
:root[data-skin="soft"] #btn_process:hover,:root[data-skin="soft"] #cc_btn_process:hover,:root[data-skin="soft"] #sc_btn_process:hover,:root[data-skin="soft"] #bc_btn_process:hover,:root[data-skin="soft"] #sk_btn_process:hover,:root[data-skin="soft"] #ve_btn_process:hover,:root[data-skin="soft"] #og_btn_process:hover,:root[data-skin="soft"] #cf_btn_process:hover{background:var(--grad);filter:brightness(1.05)}
/* wybrany segment (.btn.on) = granatowa pigułka; selektor z ID bije reguły zasięgowe typu #fit_modal .fitside .btn.on */
:root[data-skin="soft"] :is(#fit_modal,#crop_modal,#mask_modal,#editimg_modal,#tab_og,#tab_cf,#cc_filterbar,body) .btn.on{background:var(--ink-fill);border-color:var(--ink-fill);color:var(--on-ink-fill)}
:root[data-skin="soft"] :is(#fit_modal,#crop_modal,#mask_modal,#editimg_modal,#tab_og,#tab_cf,#cc_filterbar,body) .btn.on:hover{background:var(--ink-fill-h);color:var(--on-ink-fill)}
:root[data-skin="soft"] :is(#lb,#gv) .btn.on{box-shadow:0 0 0 1px var(--on-bar-muted)}
:root[data-skin="soft"] .lb-abind.on{background:var(--ink-fill);border-color:var(--ink-fill);color:var(--on-ink-fill)}
:root[data-skin="soft"] .lb-seg{gap:2px}
:root[data-skin="soft"] .lb-seg .btn{margin-left:0}
:root[data-skin="soft"] .lb-seg .btn:first-child,:root[data-skin="soft"] .lb-seg .btn:last-child{margin-left:0}
:root[data-skin="soft"] :is(input[type=text],input[type=number],input[type=search],input[type=password],input[type=email],input:not([type]),select,textarea){border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--input-bg);color:var(--txt);font-family:inherit}
:root[data-skin="soft"] :is(input[type=text],input[type=number],input[type=search],input[type=password],input[type=email],input:not([type]),select,textarea)::placeholder{color:var(--muted);opacity:.85}
:root[data-skin="soft"] select.shot{border-radius:999px}
:root[data-skin="soft"] select.shot.ov{border-color:var(--warn);background:var(--ov-bg)}
:root[data-skin="soft"] input[type=color]{border-radius:var(--radius-sm);border-color:var(--border-strong)}

/* ==========================================================================
   7. TABELE, KAFELKI PLIKÓW, ZNACZNIKI
   ========================================================================== */
:root[data-skin="soft"] th{background:var(--thead);color:var(--muted);text-transform:none;letter-spacing:0;font-size:12px;line-height:16px;font-weight:600}
:root[data-skin="soft"] tr.grp td{background:var(--panel2);border-top:1px solid var(--line)}
:root[data-skin="soft"] tr.grp:hover td{background:var(--panel2)}
:root[data-skin="soft"] tr.sel td{background:var(--accent-soft)}
:root[data-skin="soft"] td img.th,:root[data-skin="soft"] #sess_table td.sess-file img.th{border-radius:var(--radius-sm);border-color:var(--line)}
:root[data-skin="soft"] .tile-card{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
:root[data-skin="soft"] .tile-card:hover{box-shadow:var(--shadow-card)}
:root[data-skin="soft"] .tile-card.sel{box-shadow:0 0 0 2px var(--accent),var(--shadow-card)}
:root[data-skin="soft"] .tile-card.drop-before{box-shadow:inset 3px 0 0 0 var(--accent),var(--shadow-card)}
:root[data-skin="soft"] .tile-card.drop-after{box-shadow:inset -3px 0 0 0 var(--accent),var(--shadow-card)}
:root[data-skin="soft"] .tile-card.sku-locked-other{box-shadow:inset 3px 0 0 var(--err),var(--shadow-card)}
:root[data-skin="soft"] .tile-card.sku-locked-own{box-shadow:inset 3px 0 0 var(--accent),var(--shadow-card)}
:root[data-skin="soft"] .tile-media{border-radius:var(--radius-sm)}
:root[data-skin="soft"] .tag{font-size:12px;line-height:16px;padding:2px 10px;font-weight:600}
:root[data-skin="soft"] .tag.pending,:root[data-skin="soft"] .tag.scanning,:root[data-skin="soft"] .tag.packshot,:root[data-skin="soft"] .tag.model{background:var(--panel2);color:var(--muted)}
:root[data-skin="soft"] .tag.processing,:root[data-skin="soft"] .tag.queued{background:var(--panel2);color:var(--accent)}
:root[data-skin="soft"] .tag.error{box-shadow:inset 0 0 0 1px var(--danger)}
:root[data-skin="soft"] .sess-badge,:root[data-skin="soft"] .sync-badge,:root[data-skin="soft"] .ordbadge{border:0;border-radius:999px;background:var(--panel2);color:var(--muted);font-size:12px;line-height:16px;font-weight:600;padding:2px 9px}
:root[data-skin="soft"] .sess-badge.stale{background:var(--warn-soft);color:var(--warn)}
:root[data-skin="soft"] .sess-badge.err{background:var(--danger-soft);color:var(--danger)}
:root[data-skin="soft"] .ordbadge{color:var(--txt)}
:root[data-skin="soft"] .shot-tools .st-row,:root[data-skin="soft"] .sku-tools .st-row{border:0;border-radius:var(--radius-md);background:var(--panel2)}
:root[data-skin="soft"] .legend{font-size:12px}
:root[data-skin="soft"] .pv .box{background:var(--panel2);border-radius:var(--radius-lg)}

/* ==========================================================================
   8. PASEK SESJI, MENU, TOASTY
   ========================================================================== */
:root[data-skin="soft"] .sessbar{background:var(--panel);border-bottom:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin:14px 20px 0;padding:10px 16px}
:root[data-skin="soft"] .sessbar .sess-actions{gap:8px}
:root[data-skin="soft"] .sess-cols-menu,:root[data-skin="soft"] .sess-brand-menu,:root[data-skin="soft"] #sess_sync_pop,:root[data-skin="soft"] .qc-pinform,:root[data-skin="soft"] .qc-pinpopup{background:var(--panel);border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);color:var(--txt)}
:root[data-skin="soft"] .toast{background:var(--toast-bg);color:var(--toast-tx);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);font-weight:600}
:root[data-skin="soft"] .toast.sync.warn{background:var(--warn-soft);color:var(--warn)}
:root[data-skin="soft"] .toast-action-btn{border-radius:999px}

/* ==========================================================================
   9. MODALE: radius-xl, cień modala, nagłówek jak tytuł, stopka z linią; overlay z tokenu
   ========================================================================== */
:root[data-skin="soft"] :is(#cc_cmp_modal,#sk_cmp_modal,#sc_cmp_modal,#og_pack_modal,#bs_bg_modal,#bs_naming_modal,#cp_modal,#fit_modal,#crop_modal,#editimg_modal,#mask_modal,#sess_modal,#admin_modal,#cloud_pick_modal){background:var(--overlay)}
:root[data-skin="soft"] :is(#cc_cmp_modal,#sk_cmp_modal,#sc_cmp_modal) .ccmodal,:root[data-skin="soft"] #tab_og .ogmodal,:root[data-skin="soft"] .bsmodal,:root[data-skin="soft"] #fit_modal .fitmodal,:root[data-skin="soft"] #crop_modal .fitmodal,:root[data-skin="soft"] #mask_modal .fitmodal,:root[data-skin="soft"] #editimg_modal .eimodal{background:var(--panel);border:0;border-radius:var(--radius-xl);box-shadow:var(--shadow-modal)}
:root[data-skin="soft"] .bsmodal .bshead,:root[data-skin="soft"] #fit_modal .fithead,:root[data-skin="soft"] #crop_modal .fithead,:root[data-skin="soft"] #mask_modal .fithead,:root[data-skin="soft"] #editimg_modal .eihead,:root[data-skin="soft"] :is(#cc_cmp_modal,#sk_cmp_modal,#sc_cmp_modal) .cmp-head{padding:14px 20px;border-bottom:1px solid var(--line)}
:root[data-skin="soft"] .bsmodal .bshead > b:first-child,:root[data-skin="soft"] .fithead > b:first-child,:root[data-skin="soft"] .cmp-head > b:first-child{font-size:16px;line-height:24px;font-weight:700}
:root[data-skin="soft"] .bsmodal .bsfoot{padding:14px 20px;border-top:1px solid var(--line)}
:root[data-skin="soft"] .bsmodal .bsbody{padding:16px 20px}
:root[data-skin="soft"] #fit_modal .fitside,:root[data-skin="soft"] #crop_modal .fitside,:root[data-skin="soft"] #mask_modal .fitside,:root[data-skin="soft"] #mask_modal .maskside,:root[data-skin="soft"] #editimg_modal .eiside{background:var(--panel2)}
:root[data-skin="soft"] #admin_modal .adm-form{border-bottom-color:var(--line)}
:root[data-skin="soft"] .bstbl th{background:transparent}

/* ==========================================================================
   10. LOGOWANIE (login.html dostaje ten plik wstrzykiwany przez serwer; ten sam font i karta z cieniem)
   ========================================================================== */
:root[data-skin="soft"] #f.box{background:var(--panel);border:0;border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);width:340px}
:root[data-skin="soft"] #f h1{font-size:18px;line-height:24px;font-weight:800;color:var(--txt)}
:root[data-skin="soft"] #f label{color:var(--muted);font-size:12px;font-weight:600}
:root[data-skin="soft"] #f input{border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--input-bg);color:var(--txt);font-family:inherit;font-size:13px}
:root[data-skin="soft"] #f input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
:root[data-skin="soft"] #f button{border-radius:999px;background:var(--ink-fill);color:var(--on-ink-fill);font-family:inherit;font-weight:700}
:root[data-skin="soft"] #f button:hover:not(:disabled){background:var(--ink-fill-h)}
:root[data-skin="soft"] #f .err{color:var(--danger);font-weight:600}

/* ==========================================================================
   11. RUCH
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  :root[data-skin="soft"] .tag.processing{animation:none}
  :root[data-skin="soft"] *{scroll-behavior:auto;transition-duration:.01ms}
}