/* =========================================================================
   Веб · ОФОРМЛЕНИЯ (2026-11-02) — те же три, что в приложении
   (app/static/skins.css), с теми же палитрами:
   · Standard  — базовый style.css, этот файл его не касается;
   · Aquarelle — тёплая пастель: кремовые панели с тонкой рамкой и мягкой
                 тенью, градиент коралл → персик → мёд на кнопках с
                 «картонной» кромкой; ночью тот же стиль на какао;
   · Grow      — днём фисташково-мятная бумага с шершавостью и травяной
                 акцент, ночью синий с фиолетовым; белые карточки с кромкой
                 снизу, кнопки-пилюли, шрифт Rubik.

   Одно оформление — ОДИН акцент на весь веб: свои цвета разделов
   (розовый чат, фиолетовое обучение…) Standard, здесь их нет.

   Оформление — data-skin на <html> (app.js, prefs.skin), режим — прежний
   data-theme. Внутри id как в приложении: pixel = Aquarelle, toon = Grow.
   Веб красится токенами style.css (--surface, --ink, --prime…): здесь
   сначала переопределяются токены каждого режима, потом идёт слой правил —
   контуры карточек и объёмные кнопки. Подключается ПОСЛЕ style.css.
   ========================================================================= */

/* Rubik для Grow — те же файлы, что в приложении, мостиком /shared/.
   Вес сдвинут вниз, как там: Rubik плотнее Nunito. Грузится, только когда
   Grow включён — браузер не тянет шрифт, пока его никто не просит. */
@font-face{font-family:Rubik;font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/shared/vendor/fonts/rubik-400-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Rubik;font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/shared/vendor/fonts/rubik-400-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:Rubik;font-style:normal;font-weight:501 650;font-display:swap;
  src:url(/shared/vendor/fonts/rubik-500-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Rubik;font-style:normal;font-weight:501 650;font-display:swap;
  src:url(/shared/vendor/fonts/rubik-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:Rubik;font-style:normal;font-weight:651 1000;font-display:swap;
  src:url(/shared/vendor/fonts/rubik-600-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Rubik;font-style:normal;font-weight:651 1000;font-display:swap;
  src:url(/shared/vendor/fonts/rubik-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}

/* ===================== AQUARELLE · токены ===================== */
:root[data-skin="pixel"]{
  --sk-acc:#ec6f57; --sk-acc-rgb:236,111,87;
  --sk-mix-a:100%; --sk-mix-b:100%;
  --sk-grad:linear-gradient(135deg,#ff8f7a 0%,#f7a86b 52%,#f6c85f 100%);
  --sk-acc-edge:rgba(190,100,80,.55);
  --sk-line:rgba(92,64,51,.1);
  --sk-shadow:0 18px 40px -20px rgba(120,80,50,.45),0 2px 0 rgba(120,80,50,.08),inset 0 1px 0 rgba(255,255,255,.9);
  --sk-bg:radial-gradient(520px 420px at 6% -8%,rgba(255,205,190,.75),transparent 62%),
    radial-gradient(520px 460px at 104% 110%,rgba(180,225,205,.7),transparent 58%),
    linear-gradient(160deg,#fbf3e6 0%,#f5e8d4 55%,#f1e1c9 100%);
  --ground:#f5e8d4; --canvas:#f5e8d4; --surface:#fffaf2; --surface-2:#f6ecdf;
  --ink:#4b3b34; --muted:#7a675d; --line:rgba(92,64,51,.12); --ring:rgba(92,64,51,.1);
  --ok:#2e7d5b; --amber:#d9931f; --tint:.14; --glow:0;
  --shadow-base:0 2px 0 rgba(120,80,50,.06); --shadow-a:.12;
}
:root[data-skin="pixel"][data-theme="dark"]{
  --sk-acc:#ff8f7a; --sk-acc-rgb:255,143,122;
  --sk-mix-a:88%; --sk-mix-b:86%;
  --sk-acc-edge:rgba(120,45,30,.8);
  --sk-line:rgba(255,235,215,.09);
  --sk-shadow:0 18px 40px -20px rgba(0,0,0,.7),0 2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
  --sk-bg:radial-gradient(520px 420px at 6% -8%,rgba(242,120,100,.16),transparent 62%),
    radial-gradient(520px 460px at 104% 110%,rgba(108,190,170,.1),transparent 58%),
    linear-gradient(160deg,#2a201b 0%,#221a16 55%,#1c1512 100%);
  --ground:#221a16; --canvas:#221a16; --surface:#33281f; --surface-2:#3c3027;
  --ink:#f6e9da; --muted:#c0b0a1; --line:rgba(255,235,215,.1); --ring:rgba(255,235,215,.08);
  --ok:#7cc68e; --amber:#f6c85f; --tint:.18; --glow:0;
  --shadow-base:0 2px 0 rgba(0,0,0,.25); --shadow-a:.2;
}
@media (prefers-color-scheme:dark){
  :root[data-skin="pixel"]:not([data-theme="light"]){
    --sk-acc:#ff8f7a; --sk-acc-rgb:255,143,122;
  --sk-mix-a:88%; --sk-mix-b:86%;
    --sk-acc-edge:rgba(120,45,30,.8);
    --sk-line:rgba(255,235,215,.09);
    --sk-shadow:0 18px 40px -20px rgba(0,0,0,.7),0 2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
    --sk-bg:radial-gradient(520px 420px at 6% -8%,rgba(242,120,100,.16),transparent 62%),
      radial-gradient(520px 460px at 104% 110%,rgba(108,190,170,.1),transparent 58%),
      linear-gradient(160deg,#2a201b 0%,#221a16 55%,#1c1512 100%);
    --ground:#221a16; --canvas:#221a16; --surface:#33281f; --surface-2:#3c3027;
    --ink:#f6e9da; --muted:#c0b0a1; --line:rgba(255,235,215,.1); --ring:rgba(255,235,215,.08);
    --ok:#7cc68e; --amber:#f6c85f; --tint:.18; --glow:0;
    --shadow-base:0 2px 0 rgba(0,0,0,.25); --shadow-a:.2;
  }
}

/* ===================== GROW · токены ===================== */
:root[data-skin="toon"]{
  --sk-acc:#4d9a2a; --sk-acc-rgb:77,154,42;
  --sk-grad:linear-gradient(180deg,#a5d65a 0%,#5aa83a 100%);
  --sk-acc-edge:#3e7f20; --sk-btn-ink:rgba(30,80,15,.5);
  --sk-card-edge:#c7e0c4; --sk-pill:#eaf5ec; --sk-pill-edge:#cbe3d1; --sk-pill-ink:#557a5e;
  --sk-bg:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%3Cfilter%20id%3D'd'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.9'%20numOctaves%3D'3'%20seed%3D'7'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.15%20%200%200%200%200%200.36%20%200%200%200%200%200.25%20%203.2%200%200%200%20-1.55'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'l'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.9'%20numOctaves%3D'3'%20seed%3D'7'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%20-3.2%200%200%200%201.45'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'm'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.035'%20numOctaves%3D'2'%20seed%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.15%20%200%200%200%200%200.36%20%200%200%200%200%200.25%20%201.4%200%200%200%20-.62'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23m)'%20opacity%3D'.10'%2F%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23d)'%20opacity%3D'.13'%2F%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23l)'%20opacity%3D'.45'%2F%3E%3C%2Fsvg%3E") #e1f2de;
  --ground:#e1f2de; --canvas:#e1f2de; --surface:#fff; --surface-2:#f0f8f1;
  --ink:#2f3a22; --muted:#5f6c48; --line:#e2f0e5; --ring:transparent;
  --ok:#4d9a2a; --amber:#dc8a00; --tint:.14; --glow:0;
  --shadow-base:0 0 0 transparent; --shadow-a:0;
  --r-lg:1.6rem; --r-md:1.2rem;
}
:root[data-skin="toon"][data-theme="dark"]{
  --sk-acc:#8b8cff; --sk-acc-rgb:139,140,255;
  --sk-grad:linear-gradient(180deg,#8a9bff 0%,#6b55f0 100%);
  --sk-acc-edge:#3b2db0; --sk-btn-ink:rgba(30,20,110,.4);
  --sk-card-edge:#0f1330; --sk-pill:#2b3062; --sk-pill-edge:#171a40; --sk-pill-ink:#bcbff4;
  --sk-bg:radial-gradient(460px 400px at 10% 4%,rgba(80,110,230,.34),transparent 70%),
    radial-gradient(440px 440px at 98% 62%,rgba(150,90,235,.32),transparent 70%),
    radial-gradient(380px 340px at 18% 100%,rgba(120,70,210,.26),transparent 70%),
    linear-gradient(180deg,#151b3a 0%,#1b1840 55%,#241a48 100%);
  --ground:#181a3d; --canvas:#181a3d; --surface:#242a52; --surface-2:#2b3062;
  --ink:#eef0ff; --muted:#a8a8dc; --line:#2f3566; --ring:transparent;
  --ok:#4fd18b; --amber:#ffb547; --tint:.2; --glow:0;
}
@media (prefers-color-scheme:dark){
  :root[data-skin="toon"]:not([data-theme="light"]){
    --sk-acc:#8b8cff; --sk-acc-rgb:139,140,255;
    --sk-grad:linear-gradient(180deg,#8a9bff 0%,#6b55f0 100%);
    --sk-acc-edge:#3b2db0; --sk-btn-ink:rgba(30,20,110,.4);
    --sk-card-edge:#0f1330; --sk-pill:#2b3062; --sk-pill-edge:#171a40; --sk-pill-ink:#bcbff4;
    --sk-bg:radial-gradient(460px 400px at 10% 4%,rgba(80,110,230,.34),transparent 70%),
      radial-gradient(440px 440px at 98% 62%,rgba(150,90,235,.32),transparent 70%),
      radial-gradient(380px 340px at 18% 100%,rgba(120,70,210,.26),transparent 70%),
      linear-gradient(180deg,#151b3a 0%,#1b1840 55%,#241a48 100%);
    --ground:#181a3d; --canvas:#181a3d; --surface:#242a52; --surface-2:#2b3062;
    --ink:#eef0ff; --muted:#a8a8dc; --line:#2f3566; --ring:transparent;
    --ok:#4fd18b; --amber:#ffb547; --tint:.2; --glow:0;
  }
}

/* ===================== Общее: один акцент на всё ===================== */
/* Разделы переобъявляют акцент на .canvas[data-screen] — сводим и там;
   пункты меню несут свой цвет в style="--nav-rgb", поэтому !important. */
:root[data-skin] [data-screen],
:root[data-skin] .panel{--prime:var(--sk-acc);--prime-rgb:var(--sk-acc-rgb)}
:root[data-skin] .nav button{--nav-rgb:var(--sk-acc-rgb)!important}
/* Полоса прокрутки страницы — тоже акцентом оформления. */
:root[data-skin]{--sb-rgb:var(--sk-acc-rgb)}
:root[data-skin] body{background:var(--ground)}
:root[data-skin] .canvas{background:var(--sk-bg);background-color:var(--canvas);background-attachment:fixed}
:root[data-skin] .canvas::before{display:none}
:root[data-skin] .rail{background:var(--surface)}
:root[data-skin] .ini{background:var(--sk-grad)}
:root[data-skin] .rail-out:hover{background:rgba(var(--sk-acc-rgb),.12);color:var(--sk-acc)}

/* ===================== AQUARELLE · правила ===================== */
/* Панели — рамка, скругление 24px, мягкая тень. */
:root[data-skin="pixel"] .card{border-radius:1.5rem;
  box-shadow:inset 0 0 0 2px var(--sk-line),var(--sk-shadow)}
:root[data-skin="pixel"] .mode.on{box-shadow:inset 0 0 0 2px rgba(var(--sk-acc-rgb),.45),var(--sk-shadow)}
/* Кнопки — градиент и «картонная» кромка, нажатие вниз. */
:root[data-skin="pixel"] :is(.btn:not(.quiet),.send){background:var(--sk-grad);color:#fff;
  box-shadow:0 4px 0 var(--sk-acc-edge),inset 0 1px 0 rgba(255,255,255,.5)}
:root[data-skin="pixel"] :is(.btn:not(.quiet),.send):active{transform:translateY(3px);
  box-shadow:0 1px 0 var(--sk-acc-edge)}
:root[data-skin="pixel"] .seg-ctl button.on{background:var(--sk-grad);color:#fff;
  box-shadow:0 2px 0 var(--sk-acc-edge),inset 0 1px 0 rgba(255,255,255,.5)}
:root[data-skin="pixel"] .tile-ic{border-radius:1rem}
:root[data-skin="pixel"] .pill.prime{background:var(--sk-grad);color:#fff}

/* ===================== GROW · правила ===================== */
/* Шрифт — Rubik. Нулевой вес селектора: правила с классом (моноширинный
   код, шрифт читалки) остаются при своём. */
:where(:root[data-skin="toon"]) body,
:where(:root[data-skin="toon"]) :is(button,input,select,textarea){font-family:Rubik,Nunito,system-ui,-apple-system,sans-serif}
:root[data-skin="toon"] :is(h1,h2,h3,h4){font-weight:700;letter-spacing:-.01em}
/* Карточки — белые, крупное скругление, плотная кромка снизу. */
:root[data-skin="toon"] .card{box-shadow:0 6px 0 var(--sk-card-edge),0 18px 30px -18px rgba(30,50,40,.25)}
:root[data-skin="toon"] .tiles,:root[data-skin="toon"] .modes{gap:1.1rem}
:root[data-skin="toon"] .tile:hover{transform:translateY(-.1rem)}
:root[data-skin="toon"] .tile:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sk-card-edge)}
:root[data-skin="toon"] .mode.on{background:var(--surface);
  box-shadow:inset 0 0 0 .14rem rgba(var(--sk-acc-rgb),.55),0 6px 0 var(--sk-card-edge)}
/* Кнопки — пилюли с градиентом и кромкой. */
:root[data-skin="toon"] :is(.btn:not(.quiet),.send){background:var(--sk-grad);color:#fff;
  text-shadow:0 2px 0 var(--sk-btn-ink);
  box-shadow:0 5px 0 var(--sk-acc-edge),inset 0 2px 0 rgba(255,255,255,.35)}
:root[data-skin="toon"] .btn{border-radius:999em}
:root[data-skin="toon"] :is(.btn:not(.quiet),.send):active{transform:translateY(4px);
  box-shadow:0 1px 0 var(--sk-acc-edge)}
:root[data-skin="toon"] .btn.quiet{background:var(--sk-pill);color:var(--sk-pill-ink);
  box-shadow:inset 0 -3px 0 var(--sk-pill-edge)}
/* Круглые кнопки в шапке — белые, с кромкой. */
:root[data-skin="toon"] .icon-btn{color:var(--sk-acc);box-shadow:0 4px 0 var(--sk-card-edge)}
/* Переключатели — светлые пилюли, выбранное — акцент с кромкой. */
:root[data-skin="toon"] .seg-ctl{background:var(--sk-pill);box-shadow:inset 0 -3px 0 var(--sk-pill-edge)}
:root[data-skin="toon"] .seg-ctl button{color:var(--sk-pill-ink)}
:root[data-skin="toon"] .seg-ctl button.on{background:var(--sk-grad);color:#fff;
  box-shadow:0 3px 0 var(--sk-acc-edge)}
:root[data-skin="toon"] .field{box-shadow:inset 0 0 0 .12rem rgba(var(--sk-acc-rgb),.45),0 4px 0 var(--sk-card-edge)}
:root[data-skin="toon"] .msg.eva .bubble{background:var(--surface);box-shadow:0 4px 0 var(--sk-card-edge)}
:root[data-skin="toon"] .tile-ic{border-radius:1rem}
:root[data-skin="toon"] .pill.prime{background:var(--sk-grad);color:#fff}

/* ============ Обложки книг и значки разделов — палитры приложения ============ */
/* Aquarelle — пастель с какао-текстом, Grow — кубики с белыми буквами; у
   каждого уровня (и своей книги, MY) свой тон и кромка снизу. Фон обложки
   приходит в style= из app.js, поэтому !important. */
:root[data-skin] :is(.cover,.mini){background:linear-gradient(160deg,var(--bk-a),var(--bk-b))!important}
:root[data-skin] .cover::before{display:none}

:root[data-skin="pixel"] :is(.cover,.mini)[data-lvl="A1"]{--bk-a:#b6e0c5;--bk-b:#8cc9a3;--bk-e:#6aa883}
:root[data-skin="pixel"] :is(.cover,.mini)[data-lvl="A2"]{--bk-a:#addaf2;--bk-b:#84bde3;--bk-e:#6198c2}
:root[data-skin="pixel"] :is(.cover,.mini)[data-lvl="B1"]{--bk-a:#ffdc9e;--bk-b:#f7c06a;--bk-e:#d39a3e}
:root[data-skin="pixel"] :is(.cover,.mini)[data-lvl="B2"]{--bk-a:#f9b9b6;--bk-b:#ef9196;--bk-e:#c96b72}
:root[data-skin="pixel"] :is(.cover,.mini)[data-lvl="C1"]{--bk-a:#d3c3ec;--bk-b:#b49edc;--bk-e:#8f78ba}
:root[data-skin="pixel"] :is(.cover,.mini)[data-lvl="MY"]{--bk-a:#f8cda6;--bk-b:#eea878;--bk-e:#c98352}
/* В тёмном режиме пастель чуть приглушена, чтобы не слепила на какао. */
:root[data-skin="pixel"] :is(.cover,.mini){
  background:linear-gradient(160deg,color-mix(in oklab,var(--bk-a) var(--sk-mix-a),#221a16),
    color-mix(in oklab,var(--bk-b) var(--sk-mix-b),#221a16))!important}
:root[data-skin="pixel"] .cover{color:#4b3b34;box-shadow:0 4px 0 var(--bk-e),0 16px 30px -18px rgba(90,55,35,.55)}
:root[data-skin="pixel"] .mini{box-shadow:0 3px 0 var(--bk-e),0 10px 20px -14px rgba(90,55,35,.55)}
:root[data-skin="pixel"] .cover::after{border-color:rgba(255,255,255,.6)}
:root[data-skin="pixel"] .cover .aut{color:rgba(75,59,52,.74);opacity:1}
:root[data-skin="pixel"] .cover .lvl{background:rgba(255,255,255,.55)}

:root[data-skin="toon"] :is(.cover,.mini)[data-lvl="A1"]{--bk-a:#52c93e;--bk-b:#1a7016;--bk-e:#125210}
:root[data-skin="toon"] :is(.cover,.mini)[data-lvl="A2"]{--bk-a:#4fc3ff;--bk-b:#1468b5;--bk-e:#0e4f8a}
:root[data-skin="toon"] :is(.cover,.mini)[data-lvl="B1"]{--bk-a:#b98aff;--bk-b:#7a42dc;--bk-e:#5a2fac}
:root[data-skin="toon"] :is(.cover,.mini)[data-lvl="B2"]{--bk-a:#ff6f87;--bk-b:#cf2a4a;--bk-e:#a01e38}
:root[data-skin="toon"] :is(.cover,.mini)[data-lvl="C1"]{--bk-a:#ffa73a;--bk-b:#9a4a00;--bk-e:#743700}
:root[data-skin="toon"] :is(.cover,.mini)[data-lvl="MY"]{--bk-a:#ff5aa0;--bk-b:#c21d66;--bk-e:#93154d}
:root[data-skin="toon"] .cover{border-radius:1rem;box-shadow:0 6px 0 var(--bk-e),0 18px 30px -18px rgba(40,60,160,.4)}
:root[data-skin="toon"] .mini{border-radius:.6rem;box-shadow:0 4px 0 var(--bk-e),0 10px 20px -14px rgba(40,60,160,.4)}
:root[data-skin="toon"] .cover::after{border-radius:.6rem}
:root[data-skin="toon"] .cover :is(.ttl,.aut,.lvl){text-shadow:0 2px 0 rgba(0,0,0,.22)}

/* Значки разделов: свой тон у каждого — чат, сценарии, слова, грамматика,
   глаголы, книги; одинаково на «Говорить», «Учиться» и «Прогрессе». */
:root[data-skin="pixel"] .mode[data-mode="free"]{--ic-a:#f9b9b6;--ic-b:#ef9196;--ic-e:#c96b72}
:root[data-skin="pixel"] :is(.mode[data-mode="scenarios"],[data-sec="books"]){--ic-a:#d3c3ec;--ic-b:#b49edc;--ic-e:#8f78ba}
:root[data-skin="pixel"] [data-sec="words"]{--ic-a:#b6e0c5;--ic-b:#8cc9a3;--ic-e:#6aa883}
:root[data-skin="pixel"] :is(.mode[data-mode="grammar"],[data-sec="grammar"]){--ic-a:#addaf2;--ic-b:#84bde3;--ic-e:#6198c2}
:root[data-skin="pixel"] [data-sec="verbs"]{--ic-a:#ffdc9e;--ic-b:#f7c06a;--ic-e:#d39a3e}
:root[data-skin="pixel"] [data-sec="scenario"]{--ic-a:#f8cda6;--ic-b:#eea878;--ic-e:#c98352}
:root[data-skin="pixel"] :is(.tile-ic,.pcard-ic){
  background:linear-gradient(160deg,color-mix(in oklab,var(--ic-a,#f8cda6) var(--sk-mix-a),#221a16),
    color-mix(in oklab,var(--ic-b,#eea878) var(--sk-mix-b),#221a16));
  color:#4b3b34;box-shadow:0 3px 0 var(--ic-e,#c98352),inset 0 1px 0 rgba(255,255,255,.55)}

:root[data-skin="toon"] :is(.mode[data-mode="free"],[data-sec="scenario"]){--ic-a:#ff8398;--ic-b:#ff4e6e;--ic-e:#cc2f4f}
:root[data-skin="toon"] :is(.mode[data-mode="scenarios"],[data-sec="books"]){--ic-a:#c49aff;--ic-b:#a96bff;--ic-e:#7c44d4}
:root[data-skin="toon"] [data-sec="words"]{--ic-a:#6fd0ff;--ic-b:#2fb5ff;--ic-e:#1786c9}
:root[data-skin="toon"] :is(.mode[data-mode="grammar"],[data-sec="grammar"]){--ic-a:#ffc35a;--ic-b:#ffa51f;--ic-e:#cc7c00}
:root[data-skin="toon"] [data-sec="verbs"]{--ic-a:#5ae8cf;--ic-b:#12c9ad;--ic-e:#0b9984}
:root[data-skin="toon"] :is(.tile-ic,.pcard-ic){
  background:linear-gradient(180deg,var(--ic-a,#ff8398),var(--ic-b,#ff4e6e));
  color:#fff;box-shadow:0 4px 0 var(--ic-e,#cc2f4f),inset 0 2px 0 rgba(255,255,255,.35)}
:root[data-skin="toon"] .pcard-ic{border-radius:.8rem}
/* Полоса прогресса раздела — в цвет его значка. */
/* --c приходит в style= из app.js, поэтому !important; в Aquarelle берём
   кромку — пастель на светлой дорожке не читается. */
:root[data-skin="toon"] .pcard[data-sec]{--c:var(--ic-b)!important}
:root[data-skin="pixel"] .pcard[data-sec]{--c:var(--ic-e)!important}