/* TheBSMU 1.7: материалы. Одна механика поверхностей, пять наборов токенов.
   Подключается последним. Уровни: объекты (hero, карточки предметов, кнопки),
   плиты (панели, списки, статистика), читаемое (вопросы и ответы теста). */

/* ───────── 1. Токены: общие для материала ───────── */
body[data-material=gold]{
  --m-metal:linear-gradient(115deg,#8a5d17 0%,#e9c96f 16%,#fff0b8 28%,#c99a3f 42%,#f6dd93 54%,#a97a28 70%,#e8c871 86%,#8a5d17 100%);
  --m-btn-ink:#2a1c05;--m-sheen-c:rgba(255,244,200,.55);--m-sheen-w:44%;--m-sheen-t:11s;
  --m-tex-size:512px 160px;
}
body[data-material=diamond]{
  --m-metal:linear-gradient(115deg,#ffd0ec 0%,#d6c2ff 22%,#ffffff 36%,#aee6ff 52%,#e4c6ff 68%,#ffc8ea 86%,#d6c2ff 100%);
  --m-btn-ink:#1a2150;--m-sheen-c:rgba(255,255,255,.85);--m-sheen-w:16%;--m-sheen-t:7s;
  --m-tex-size:288px 288px;
}
body[data-material=carbon]{
  --m-metal:linear-gradient(115deg,#6b7a88 0%,#cfdbe6 18%,#f5f9fc 30%,#9fb0bf 44%,#dbe6ef 56%,#74838f 72%,#c1cfdb 88%,#6b7a88 100%);
  --m-btn-ink:#0d141b;--m-sheen-c:rgba(225,238,250,.5);--m-sheen-w:9%;--m-sheen-t:13s;
  --m-tex-size:28px 28px;
}
body[data-material=pink]{
  --m-metal:linear-gradient(115deg,#a84f73 0%,#f4b9ce 20%,#fff0f5 33%,#e394b2 48%,#f7c6d8 60%,#b95b80 76%,#f1b0c9 90%,#a84f73 100%);
  --m-btn-ink:#3b1228;--m-sheen-c:rgba(255,236,245,.6);--m-sheen-w:52%;--m-sheen-t:10s;
  --m-tex-size:80px 80px;
}
body[data-material=violet]{
  --m-metal:linear-gradient(115deg,#4a2a8a 0%,#9e78ec 20%,#e6d6ff 34%,#8e63df 48%,#c3a4ff 60%,#5a34ab 76%,#b497f5 90%,#4a2a8a 100%);
  --m-btn-ink:#1d0f38;--m-sheen-c:rgba(232,214,255,.55);--m-sheen-w:34%;--m-sheen-t:12s;
  --m-tex-size:auto;
}

/* ───────── 2. Токены: материал × режим ───────── */
/* Золото */
body[data-material=gold][data-theme=dark]{
  --m-hi:rgba(255,226,150,.30);--m-hi-soft:rgba(255,226,150,.11);--m-lo:rgba(0,0,0,.7);--m-lo-soft:rgba(0,0,0,.4);
  --m-line:rgba(232,195,106,.14);--m-glow:rgba(232,195,106,.10);--m-sh:#000;--m-spec:rgba(255,236,170,.5);
  --m-rim:linear-gradient(145deg,#fff0b8 0%,#c9a24a 16%,#5a4217 40%,#2a1f0a 58%,#8f6d27 80%,#f3d98a 100%);
  --m-tex:url('./assets/tex/brushed.png') 0 0/512px 160px;
  --m-ambient:radial-gradient(60% 45% at 88% 100%,rgba(232,195,106,.13),transparent 70%),radial-gradient(45% 40% at 0 62%,rgba(232,195,106,.06),transparent 70%);
}
body[data-material=gold][data-theme=light]{
  --m-hi:rgba(255,255,255,.95);--m-hi-soft:rgba(255,255,255,.6);--m-lo:rgba(120,82,14,.34);--m-lo-soft:rgba(120,82,14,.16);
  --m-line:rgba(160,116,34,.22);--m-glow:rgba(255,238,190,.7);--m-sh:#5c3e0a;--m-spec:rgba(255,255,255,.8);
  --m-rim:linear-gradient(145deg,#fff8dc 0%,#e2bf68 22%,#8d6420 48%,#6e4b14 60%,#c9a24c 82%,#fff0b8 100%);
  --m-tex:url('./assets/tex/brushed.png') 0 0/512px 160px;
  --m-ambient:radial-gradient(60% 45% at 88% 100%,rgba(214,170,70,.22),transparent 70%),radial-gradient(45% 40% at 0 62%,rgba(214,170,70,.10),transparent 70%);
}
/* Бриллиант */
body[data-material=diamond][data-theme=dark]{
  --m-hi:rgba(210,225,255,.30);--m-hi-soft:rgba(210,225,255,.12);--m-lo:rgba(0,0,10,.7);--m-lo-soft:rgba(0,0,10,.4);
  --m-line:rgba(180,196,255,.14);--m-glow:rgba(150,170,255,.12);--m-sh:#000;--m-spec:rgba(255,255,255,.6);
  --m-rim:conic-gradient(from var(--m-spin,210deg),#ff9fd6,#c3a6ff,#7fd6ff,#b6ffe8,#ffb3e6,#ff9fd6);
  --m-tex:url('./assets/tex/facets.svg') 0 0/288px 288px;
  --m-ambient:radial-gradient(55% 45% at 85% 100%,rgba(150,160,255,.16),transparent 70%),radial-gradient(40% 40% at 5% 55%,rgba(255,150,220,.08),transparent 70%);
}
body[data-material=diamond][data-theme=light]{
  --m-hi:rgba(255,255,255,.95);--m-hi-soft:rgba(255,255,255,.65);--m-lo:rgba(80,86,170,.30);--m-lo-soft:rgba(80,86,170,.14);
  --m-line:rgba(110,118,200,.22);--m-glow:rgba(255,255,255,.75);--m-sh:#3c3a96;--m-spec:rgba(255,255,255,.9);
  --m-rim:conic-gradient(from var(--m-spin,210deg),#ff9fd6,#b99cff,#6fcfff,#a5f5dc,#ffb3e6,#ff9fd6);
  --m-tex:url('./assets/tex/facets.svg') 0 0/288px 288px;
  --m-ambient:radial-gradient(55% 45% at 85% 100%,rgba(140,150,255,.20),transparent 70%),radial-gradient(40% 40% at 5% 55%,rgba(255,150,220,.12),transparent 70%);
}
/* Карбон */
body[data-material=carbon][data-theme=dark]{
  --m-hi:rgba(205,222,236,.24);--m-hi-soft:rgba(205,222,236,.09);--m-lo:rgba(0,0,0,.8);--m-lo-soft:rgba(0,0,0,.5);
  --m-line:rgba(190,206,220,.10);--m-glow:rgba(160,185,205,.07);--m-sh:#000;--m-spec:rgba(220,236,250,.5);
  --m-rim:linear-gradient(145deg,#e8f1f8 0%,#7f93a4 16%,#2a3239 40%,#0b0e11 58%,#5f7080 82%,#dfeaf3 100%);
  --m-tex:url('./assets/tex/twill-dark.svg') 0 0/28px 28px;
  --m-ambient:radial-gradient(55% 40% at 90% 100%,rgba(150,180,205,.10),transparent 70%);
}
body[data-material=carbon][data-theme=light]{
  --m-hi:rgba(255,255,255,.95);--m-hi-soft:rgba(255,255,255,.6);--m-lo:rgba(40,56,70,.30);--m-lo-soft:rgba(40,56,70,.14);
  --m-line:rgba(60,80,98,.20);--m-glow:rgba(255,255,255,.7);--m-sh:#1e2a36;--m-spec:rgba(255,255,255,.85);
  --m-rim:linear-gradient(145deg,#ffffff 0%,#b9c5cf 22%,#586672 48%,#3a4650 60%,#9fadba 82%,#f4f8fb 100%);
  --m-tex:url('./assets/tex/twill-light.svg') 0 0/28px 28px;
  --m-ambient:radial-gradient(55% 40% at 90% 100%,rgba(90,115,140,.16),transparent 70%);
}
/* Сакура */
body[data-material=pink][data-theme=dark]{
  --m-hi:rgba(255,200,226,.28);--m-hi-soft:rgba(255,200,226,.11);--m-lo:rgba(10,0,6,.68);--m-lo-soft:rgba(10,0,6,.38);
  --m-line:rgba(247,168,204,.16);--m-glow:rgba(247,168,204,.10);--m-sh:#000;--m-spec:rgba(255,225,240,.55);
  --m-rim:linear-gradient(145deg,#ffe6f0 0%,#f2a3c4 20%,#6a2b48 44%,#2d1220 58%,#c46b92 80%,#ffd7e8 100%);
  --m-tex:url('./assets/tex/seigaiha-dark.svg') 0 0/80px 80px;
  --m-ambient:radial-gradient(60% 45% at 90% 100%,rgba(247,140,190,.15),transparent 70%),radial-gradient(40% 40% at 0 55%,rgba(247,168,204,.07),transparent 70%);
}
body[data-material=pink][data-theme=light]{
  --m-hi:rgba(255,255,255,.95);--m-hi-soft:rgba(255,255,255,.65);--m-lo:rgba(150,40,95,.26);--m-lo-soft:rgba(150,40,95,.13);
  --m-line:rgba(190,70,120,.20);--m-glow:rgba(255,255,255,.75);--m-sh:#8c2860;--m-spec:rgba(255,255,255,.9);
  --m-rim:linear-gradient(145deg,#ffffff 0%,#f5b9d0 22%,#c0527e 48%,#9b3a63 60%,#e49bb8 82%,#fff0f6 100%);
  --m-tex:url('./assets/tex/seigaiha-light.svg') 0 0/80px 80px;
  --m-ambient:radial-gradient(60% 45% at 90% 100%,rgba(240,130,175,.22),transparent 70%),radial-gradient(40% 40% at 0 55%,rgba(247,168,204,.14),transparent 70%);
}
/* Аметист */
body[data-material=violet][data-theme=dark]{
  --m-hi:rgba(215,195,255,.30);--m-hi-soft:rgba(215,195,255,.12);--m-lo:rgba(4,0,14,.72);--m-lo-soft:rgba(4,0,14,.42);
  --m-line:rgba(197,168,255,.16);--m-glow:rgba(160,120,255,.14);--m-sh:#000;--m-spec:rgba(230,215,255,.6);
  --m-rim:linear-gradient(145deg,#efe3ff 0%,#a784ee 20%,#4a2a8a 44%,#1a0f33 58%,#7b53d0 80%,#e6d6ff 100%);
  --m-tex:repeating-linear-gradient(62deg,transparent 0 22px,rgba(197,168,255,.045) 22px 23px,transparent 23px 47px,rgba(0,0,0,.14) 47px 48px);
  --m-ambient:radial-gradient(60% 45% at 85% 100%,rgba(140,90,240,.20),transparent 70%),radial-gradient(40% 40% at 0 55%,rgba(180,130,255,.08),transparent 70%);
}
body[data-material=violet][data-theme=light]{
  --m-hi:rgba(255,255,255,.95);--m-hi-soft:rgba(255,255,255,.65);--m-lo:rgba(80,44,150,.28);--m-lo-soft:rgba(80,44,150,.14);
  --m-line:rgba(100,57,187,.20);--m-glow:rgba(255,255,255,.75);--m-sh:#46288c;--m-spec:rgba(255,255,255,.9);
  --m-rim:linear-gradient(145deg,#ffffff 0%,#cdb8f5 22%,#7b4fd0 48%,#55309f 60%,#a98af0 82%,#f3ecff 100%);
  --m-tex:repeating-linear-gradient(62deg,transparent 0 22px,rgba(100,57,187,.05) 22px 23px,transparent 23px 47px,rgba(255,255,255,.5) 47px 48px);
  --m-ambient:radial-gradient(60% 45% at 85% 100%,rgba(120,80,220,.22),transparent 70%),radial-gradient(40% 40% at 0 55%,rgba(170,130,255,.12),transparent 70%);
}

/* ───────── 3. Hero: цвет и фон «объекта» ───────── */
body[data-material=gold]{
  --m-hero:radial-gradient(120% 90% at 6% 0,rgba(255,247,214,.8),transparent 55%),radial-gradient(90% 95% at 100% 100%,rgba(98,64,12,.5),transparent 62%),url('./assets/tex/brushed.png') 0 0/512px 160px,linear-gradient(135deg,#b8862d,#e6c36a 30%,#f6e2a0 48%,#d1a448 62%,#a9762a);
  --m-hero-ink:#2a1c05;--m-hero-muted:#33240a;--m-hero-accent:#4a2f05;
  --m-em:linear-gradient(100deg,#4a2f05,#7a5210 30%,#2d1c03 52%,#6b470c 72%,#4a2f05);
  --m-glare:conic-gradient(from 0deg at var(--mx,50%) var(--my,50%),transparent 0 18%,rgba(255,250,225,.5) 25%,transparent 32% 68%,rgba(255,250,225,.5) 75%,transparent 82% 100%);
}
body[data-material=diamond][data-theme=dark]{
  --m-hero:radial-gradient(120% 90% at 0 0,rgba(255,255,255,.2),transparent 50%),url('./assets/tex/facets.svg') 0 0/288px 288px,linear-gradient(125deg,#2a2f6e 0%,#4a3c94 28%,#24508a 52%,#5a3a8c 76%,#2a2f6e 100%);
  --m-hero-ink:#f3f5ff;--m-hero-muted:#c3c9e6;--m-hero-accent:#d3dbff;
  --m-em:linear-gradient(100deg,#ffc2e6,#c9b3ff 25%,#ffffff 42%,#9fe0ff 60%,#e6c2ff 80%,#ffc2e6);
}
body[data-material=diamond][data-theme=light]{
  --m-hero:radial-gradient(120% 90% at 0 0,rgba(255,255,255,.9),transparent 50%),url('./assets/tex/facets.svg') 0 0/288px 288px,linear-gradient(125deg,#dfe4ff 0%,#f7dff6 32%,#d7edff 58%,#ecdcff 82%,#e3e6ff 100%);
  --m-hero-ink:#1e2140;--m-hero-muted:#4d5380;--m-hero-accent:#4a50b4;
  --m-em:linear-gradient(100deg,#c0388a,#6a4fd8 28%,#2f6fd0 52%,#7a4fd8 76%,#c0388a);
}
body[data-material=carbon]{
  --m-hero:linear-gradient(180deg,rgba(255,255,255,.1),transparent 42%),url('./assets/tex/twill-dark.svg') 0 0/28px 28px,#0b0e11;
  --m-hero-ink:#eef3f7;--m-hero-muted:#a9b6c2;--m-hero-accent:#cbd8e4;
  --m-em:linear-gradient(100deg,#8fa2b3,#eef5fb 30%,#b4c3d1 50%,#f7fbff 70%,#8fa2b3);
  --m-glare:linear-gradient(105deg,transparent calc(var(--mx,50%) - 22%),rgba(225,238,250,.4) var(--mx,50%),transparent calc(var(--mx,50%) + 22%));
}
body[data-material=pink][data-theme=dark]{
  --m-hero:radial-gradient(100% 85% at 92% 0,rgba(247,168,204,.34),transparent 60%),radial-gradient(95% 85% at 0 0,rgba(43,21,35,.72),transparent 72%),url('./assets/tex/seigaiha-dark.svg') 0 0/80px 80px,linear-gradient(135deg,#3d1b30,#2b1523 58%,#4b2139);
  --m-hero-ink:#fff0f6;--m-hero-muted:#dcb6c9;--m-hero-accent:#f7a8cc;
  --m-em:linear-gradient(100deg,#f7a8cc,#fff0f6 32%,#f2b4cf 52%,#fff7fa 70%,#f7a8cc);
}
body[data-material=pink][data-theme=light]{
  --m-hero:radial-gradient(95% 85% at 0 0,rgba(255,240,246,.82),transparent 72%),url('./assets/tex/seigaiha-light.svg') 0 0/80px 80px,linear-gradient(135deg,#ffd6e6,#ffeef5 42%,#ffcde0 72%,#ffe2ed);
  --m-hero-ink:#3d1f31;--m-hero-muted:#7a4a63;--m-hero-accent:#a32a65;
  --m-em:linear-gradient(100deg,#a32a65,#d9588f 32%,#8c2058 54%,#c24a80 74%,#a32a65);
}
body[data-material=violet]{
  --m-hero:radial-gradient(95% 80% at 0 0,rgba(26,14,58,.88),transparent 72%),radial-gradient(55% 45% at 76% 108%,rgba(196,150,255,.5),transparent 70%),conic-gradient(from 318deg at 76% 112%,#4a2a8e 0deg 4.5deg,rgba(226,208,255,.4) 4.5deg 5deg,#22104a 5deg 7.5deg,rgba(226,208,255,.4) 7.5deg 8deg,#6b3fc4 8deg 14.5deg,rgba(226,208,255,.4) 14.5deg 15deg,#321a6a 15deg 18.5deg,rgba(226,208,255,.4) 18.5deg 19deg,#8e63df 19deg 24.5deg,rgba(226,208,255,.4) 24.5deg 25deg,#2a1558 25deg 27.5deg,rgba(226,208,255,.4) 27.5deg 28deg,#5a34ab 28deg 35.5deg,rgba(226,208,255,.4) 35.5deg 36deg,#3a1f78 36deg 39.5deg,rgba(226,208,255,.4) 39.5deg 40deg,#4a2a8e 40deg 44.5deg,rgba(226,208,255,.4) 44.5deg 45deg,#22104a 45deg 50.5deg,rgba(226,208,255,.4) 50.5deg 51deg,#6b3fc4 51deg 53.5deg,rgba(226,208,255,.4) 53.5deg 54deg,#321a6a 54deg 60.5deg,rgba(226,208,255,.4) 60.5deg 61deg,#8e63df 61deg 65.5deg,rgba(226,208,255,.4) 65.5deg 66deg,#2a1558 66deg 69.5deg,rgba(226,208,255,.4) 69.5deg 70deg,#5a34ab 70deg 75.5deg,rgba(226,208,255,.4) 75.5deg 76deg,#3a1f78 76deg 78.5deg,rgba(226,208,255,.4) 78.5deg 79deg,transparent 79deg),linear-gradient(140deg,#2c1760,#1b0f3d 55%,#3a1d7a);
  --m-hero-ink:#f5efff;--m-hero-muted:#c9bbe6;--m-hero-accent:#d6c0ff;
  --m-em:linear-gradient(100deg,#c5a8ff,#f3eaff 30%,#b996ff 52%,#f7f0ff 72%,#c5a8ff);
}

/* ───────── 4. Фаска и глубина (общие стеки теней) ───────── */
body[data-material]{
  --m-bevel:
    inset 0 1px 0 var(--m-hi),inset 1px 0 0 var(--m-hi-soft),
    inset 0 2px 1px -1px var(--m-hi-soft),
    inset 0 -1px 0 var(--m-lo),inset -1px 0 0 var(--m-lo-soft),
    inset 0 0 0 1px var(--m-line),
    0 1px 2px color-mix(in srgb,var(--m-sh) 55%,transparent),
    0 8px 18px -8px color-mix(in srgb,var(--m-sh) 48%,transparent),
    0 24px 38px -26px color-mix(in srgb,var(--m-sh) 55%,transparent);
  --m-bevel-small:
    inset 0 1px 0 var(--m-hi),inset 0 -1px 0 var(--m-lo),inset 0 0 0 1px var(--m-line),
    0 1px 2px color-mix(in srgb,var(--m-sh) 55%,transparent),
    0 4px 10px -3px color-mix(in srgb,var(--m-sh) 45%,transparent);
  --m-bevel-hero:
    inset 0 1.5px 0 var(--m-hi),inset 1.5px 0 0 var(--m-hi-soft),
    inset 0 3px 2px -2px var(--m-hi-soft),
    inset 0 -2px 0 var(--m-lo),inset -1.5px 0 0 var(--m-lo-soft),
    0 2px 3px color-mix(in srgb,var(--m-sh) 55%,transparent),
    0 18px 30px -12px color-mix(in srgb,var(--m-sh) 55%,transparent),
    0 44px 70px -34px color-mix(in srgb,var(--m-sh) 65%,transparent);
  --m-bevel-in:
    inset 0 2px 5px color-mix(in srgb,var(--m-sh) 42%,transparent),
    inset 0 -1px 0 var(--m-hi-soft),inset 0 0 0 1px var(--m-line);
}

/* ───────── 5. Плиты ───────── */
body[data-material] :is(.panel,.stat,.study-card,.test-row,.settings-group,.account-service,.pet-choice,.font-tile){
  --m-veil:color-mix(in srgb,var(--surface) 80%,transparent);
  position:relative;isolation:isolate;
  background:
    linear-gradient(180deg,var(--m-glow),transparent 46%),
    linear-gradient(var(--m-veil),var(--m-veil)),
    var(--m-tex),
    linear-gradient(160deg,color-mix(in srgb,var(--surface) 90%,var(--m-hi-soft)),var(--surface) 58%,color-mix(in srgb,var(--surface) 95%,var(--m-lo-soft)));
  box-shadow:var(--m-bevel);
}
body[data-material] .settings-row{background:none}
body[data-material] .settings-row+.settings-row{border-top-color:var(--m-line)}
body[data-material] .account-service{overflow:hidden}
body[data-material] .stat{--m-veil:color-mix(in srgb,var(--surface) 70%,transparent)}
/* Интерактивные плиты: блик следует за курсором, фаска углубляется. */
body[data-material] :is(.test-row,.study-card):hover{box-shadow:var(--m-bevel),0 14px 26px -14px color-mix(in srgb,var(--m-sh) 60%,transparent)}

/* ───────── 6. Объекты: hero и карточки предметов ───────── */
body[data-material] :is(.hero,.subject){position:relative;isolation:isolate;overflow:hidden;border:0}
body[data-material] .hero{
  background:var(--m-hero);color:var(--m-hero-ink);box-shadow:var(--m-bevel-hero);
}
body[data-material] .subject{
  --m-veil:color-mix(in srgb,var(--surface) 62%,transparent);
  background:
    linear-gradient(180deg,var(--m-glow),transparent 52%),
    linear-gradient(var(--m-veil),var(--m-veil)),
    var(--m-tex),
    linear-gradient(160deg,color-mix(in srgb,var(--surface) 88%,var(--m-hi-soft)),var(--surface) 58%,color-mix(in srgb,var(--surface) 94%,var(--m-lo-soft)));
  box-shadow:var(--m-bevel);
}
body[data-material] .subject>*,body[data-material] .hero>*{z-index:1}

/* Кромка-фаска: градиентный контур по периметру, светлый сверху-слева и тёмный снизу-справа. */
body[data-material] :is(.hero,.subject,#sidebar,dialog)::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:var(--rim-w,1.2px);pointer-events:none;z-index:3;
  background:var(--m-rim);opacity:.85;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;
}
body[data-material] .hero::before{--rim-w:1.6px;opacity:1}
body[data-material] .hero:before{content:''}
/* Блик под курсором (подставляется скриптом) */
body[data-material] :is(.hero,.subject,.stat,.study-card,.test-row)::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:var(--m-glare,radial-gradient(circle at var(--mx,50%) var(--my,0%),var(--m-spec),transparent 56%));
  opacity:var(--glare,0);
}
body[data-material] .hero.is-tilting::after{mix-blend-mode:soft-light}
body[data-material] :is(.subject,.stat,.study-card,.test-row)::after{opacity:calc(var(--glare,0)*.45)}
/* Автономный блик: полоса света, проходящая по hero. Только transform — без перерисовки. */
.m-sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent calc(50% - var(--m-sheen-w,30%)/2),var(--m-sheen-c,rgba(255,255,255,.5)) 50%,transparent calc(50% + var(--m-sheen-w,30%)/2));
  transform:translateX(-100%);animation:m-sheen var(--m-sheen-t,10s) cubic-bezier(.45,.05,.25,1) infinite;
}
@keyframes m-sheen{0%,52%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Наклон: переменные ведёт скрипт, CSS их только читает. */
body[data-material] :is(.hero,.subject,.stat,.study-card){
  transform:none;translate:none;
  transition:box-shadow .45s var(--ease),background-color .25s,color .25s;
}
body[data-material] :is(.hero,.subject,.stat,.study-card).is-tilting{
  transform:perspective(var(--persp,1000px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  translate:0 var(--lift,0px);will-change:transform;
}

/* ───────── 7. Hero: типографика на материале ───────── */
body[data-material] .hero h1{color:var(--m-hero-ink)}
body[data-material] .hero p{color:var(--m-hero-muted)}
body[data-material] .hero .eyebrow{color:var(--m-hero-accent)}
body[data-material] .hero h1 em{
  background:var(--m-em);background-size:240% 100%;background-position:50% 50%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.06em;
}
body[data-material] .hero.is-tilting h1 em{background-position:calc(50% + var(--px,0)*45%) 50%}
body[data-material=gold] .hero h1 em{filter:drop-shadow(0 1px 0 rgba(255,244,200,.65))}
/* Превью внутри hero остаётся «окном приложения» в цветах интерфейса */
body[data-material] .hero .mini-browser{color:var(--ink);box-shadow:var(--m-bevel),0 26px 44px -18px rgba(0,0,0,.45)}
body[data-material] .hero .mini-browser .eyebrow{color:var(--accent)}
body[data-material] .hero .mini-browser p,body[data-material] .hero .mini-browser .mini-browser-head{color:var(--muted)}
body[data-material] .hero .mini-browser h3{color:var(--ink)}
body[data-material] .mini-browser{animation:m-float 9s ease-in-out infinite}
@keyframes m-float{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* ───────── 8. Кнопки: металлическая клавиша ───────── */
body[data-material] .btn{
  position:relative;isolation:isolate;overflow:hidden;border:0;color:var(--m-btn-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 46%,rgba(0,0,0,.16) 100%),var(--m-metal);
  background-size:100% 100%,240% 100%;background-position:0 0,0% 50%;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.28),inset 1px 0 0 rgba(255,255,255,.3),inset -1px 0 0 rgba(0,0,0,.14),
    0 1px 2px color-mix(in srgb,var(--m-sh) 55%,transparent),0 9px 16px -7px color-mix(in srgb,var(--m-sh) 60%,transparent);
}
body[data-material] .btn::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.62) 50%,transparent 66%);transform:translateX(-125%);
}
body[data-material] .btn:active:not(:disabled){
  translate:0 1px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.35),0 1px 1px color-mix(in srgb,var(--m-sh) 50%,transparent);
}
body[data-material] .btn.secondary{
  background:linear-gradient(180deg,var(--m-glow),transparent 60%),var(--surface);color:var(--ink);text-shadow:none;box-shadow:var(--m-bevel-small);
}
body[data-material] .btn.ghost{background:transparent;color:var(--muted);box-shadow:none;text-shadow:none}
body[data-material] .btn.danger{background:var(--bad-soft);color:var(--bad);text-shadow:none;box-shadow:inset 0 1px 0 var(--m-hi-soft),inset 0 0 0 1px color-mix(in srgb,var(--bad) 22%,transparent)}
body[data-material] :is(.btn.secondary,.btn.ghost,.btn.danger)::after{display:none}
/* Кнопка на hero подбирается под его поверхность */
body[data-material=gold] .hero .btn{
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 50%),linear-gradient(180deg,#3b2a0d,#171004);color:#f3d88a;text-shadow:0 -1px 0 rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,225,150,.45),inset 0 -2px 0 rgba(0,0,0,.6),0 1px 2px rgba(60,40,5,.5),0 12px 20px -8px rgba(60,40,5,.65);
}
body[data-material=diamond][data-theme=light] .hero .btn{background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 50%),linear-gradient(180deg,#5a60c8,#343a96);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.3)}
body[data-material=pink][data-theme=light] .hero .btn{background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 50%),linear-gradient(180deg,#cf5a8c,#9a2560);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.3)}
@media(any-hover:hover){
  body[data-material] .btn:not(.secondary,.ghost,.danger):hover{filter:none;background-position:0 0,100% 50%;transition:background-position .9s var(--ease),box-shadow .3s var(--ease)}
  body[data-material] .btn:not(.secondary,.ghost,.danger):hover::after{transform:translateX(125%);transition:transform .85s var(--ease)}
  body[data-material] .icon-btn:hover{filter:brightness(1.07)}
}

/* ───────── 9. Кабошоны, чипы, поля ввода ───────── */
body[data-material] :is(.icon-btn,.avatar){
  border:0;background:radial-gradient(120% 120% at 28% 10%,var(--m-hi-soft),transparent 58%),var(--surface);box-shadow:var(--m-bevel-small);
}
body[data-material] :is(.subject-mark,.setting-symbol,.big-symbol,.test-no){
  border:0;background:radial-gradient(120% 120% at 28% 10%,var(--m-hi),transparent 60%),linear-gradient(160deg,var(--tint),color-mix(in srgb,var(--tint) 86%,var(--m-lo-soft)));
  color:var(--accent);box-shadow:var(--m-bevel-small);
}
body[data-material] .chip{background:var(--surface);box-shadow:var(--m-bevel-small)}
body[data-material] .chip.active{background:linear-gradient(180deg,var(--m-glow),transparent),var(--tint);color:var(--accent);box-shadow:var(--m-bevel-small),inset 0 0 0 1.5px var(--accent)}
body[data-material] :is(.search,.review-search){background:color-mix(in srgb,var(--surface) 55%,var(--tint));box-shadow:var(--m-bevel-in)}
body[data-material] :is(.search,.review-search):focus-within{box-shadow:var(--m-bevel-in),0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
body[data-material] #start-form :is(input:not(.switch):not([type=radio]),select){box-shadow:var(--m-bevel-in)}
body[data-material] .switch{box-shadow:var(--m-bevel-in)}
body[data-material] .switch:checked{background:var(--m-metal);background-size:240% 100%;box-shadow:var(--m-bevel-in),inset 0 0 0 1px var(--m-line)}
body[data-material] .switch:before{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 5px rgba(0,0,0,.3)}
body[data-material] .soft-segments input:checked+span,body[data-material] .attempt-segments input:checked+span{box-shadow:var(--m-bevel-small)}
body[data-material] :is(.font-tile,.pet-choice)[aria-pressed=true]{--m-veil:color-mix(in srgb,var(--tint) 86%,transparent);box-shadow:var(--m-bevel),inset 0 0 0 2px var(--accent)}
body[data-material] .progress-track{background:var(--tint);box-shadow:var(--m-bevel-in)}
body[data-material] .progress-track span{background:var(--m-metal);background-size:240% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.22)}
body[data-material] .result-ring{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 38%,transparent))}
body[data-material] .result-ring>div{box-shadow:var(--m-bevel-in);background:radial-gradient(120% 90% at 50% 0,var(--m-glow),transparent 60%),var(--surface)}

/* ───────── 10. Навигация ───────── */
body[data-material] #sidebar{
  --rim-w:1.2px;border:0;box-shadow:var(--m-bevel);
  background:linear-gradient(180deg,var(--m-glow),transparent 40%),linear-gradient(color-mix(in srgb,var(--surface) 86%,transparent),color-mix(in srgb,var(--surface) 86%,transparent)),var(--m-tex),var(--surface);
}
body[data-material] #sidebar .nav-item.active{
  color:var(--accent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),color-mix(in srgb,var(--accent) 7%,var(--surface)));
  box-shadow:var(--m-bevel-small),inset 0 0 18px -6px color-mix(in srgb,var(--accent) 45%,transparent);
}
body[data-material] #header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--m-line) 18%,var(--m-hi) 50%,var(--m-line) 82%,transparent);
}
body[data-material] #nav{box-shadow:inset 0 1px 1px var(--m-hi),inset 0 -1px 0 var(--m-lo-soft),0 18px 38px -12px color-mix(in srgb,var(--m-sh) 62%,transparent)}
body[data-material] #nav .dock-indicator{
  background:radial-gradient(120% 140% at 30% 0,var(--m-hi),transparent 60%),linear-gradient(140deg,color-mix(in srgb,var(--accent) 26%,var(--surface)),color-mix(in srgb,var(--accent) 9%,var(--surface)));
  box-shadow:inset 0 1px 1px var(--m-hi),inset 0 -1px 1px var(--m-lo-soft),inset 0 0 0 1px var(--m-line),0 4px 12px -2px color-mix(in srgb,var(--accent) 35%,transparent);
}
body[data-material] #nav.touching .dock-indicator{box-shadow:inset 0 1px 1px var(--m-hi),inset 0 0 0 1px var(--m-line),-2px 0 7px #86b7ff35,2px 0 7px #d39eef30,0 7px 20px -2px color-mix(in srgb,var(--accent) 45%,transparent)}

/* ───────── 11. Учебные поверхности: фаска без текстуры ───────── */
body[data-material] .practice .answer{background:linear-gradient(180deg,var(--m-glow),transparent 60%),var(--surface);box-shadow:var(--m-bevel-small)}
body[data-material] .practice .answer:hover:not(:disabled){background:linear-gradient(180deg,var(--m-glow),transparent 60%),var(--tint)}
body[data-material] .practice .answer.selected{
  background:linear-gradient(180deg,var(--m-glow),transparent 60%),var(--tint);
  box-shadow:var(--m-bevel-small),inset 0 0 0 1.5px var(--accent),0 0 22px -6px color-mix(in srgb,var(--accent) 55%,transparent);
}
body[data-material] .practice .answer.correct{background:var(--good-soft);box-shadow:var(--m-bevel-small),inset 3px 0 var(--good)}
body[data-material] .practice .answer.wrong{background:var(--bad-soft);box-shadow:var(--m-bevel-small),inset 3px 0 var(--bad)}
body[data-material] .thread-node{box-shadow:var(--m-bevel-small)}
body[data-material] .thread-node.pair-active{box-shadow:var(--m-bevel-small),inset 0 0 0 2px var(--accent)}

/* ───────── 12. Окна ───────── */
body[data-material] dialog{
  --rim-w:1.2px;
  background:linear-gradient(180deg,var(--m-glow),transparent 28%),var(--surface);
  box-shadow:var(--m-bevel),0 40px 100px -24px rgba(0,0,0,.55);
}
body[data-material] .modal-head{background:transparent}
body[data-material] #toast{box-shadow:inset 0 1px 0 var(--m-hi-soft),0 14px 30px -10px color-mix(in srgb,var(--m-sh) 70%,transparent)}
body[data-material] #splash img{box-shadow:0 20px 55px var(--glass-shade),0 0 0 1px var(--m-line),0 0 80px -8px color-mix(in srgb,var(--accent) 55%,transparent)}

/* ───────── 13. Выбор материала: образцы ───────── */
body[data-material] .material-picker{gap:12px}
body[data-material] .material-tile{
  position:relative;isolation:isolate;overflow:hidden;min-height:122px;padding:0;display:flex;flex-direction:column;justify-content:flex-end;
  border:0;border-radius:19px;background:var(--surface);box-shadow:var(--m-bevel);
}
body[data-material] .material-tile>*{position:relative;z-index:1}
body[data-material] .material-swatch{
  position:absolute;inset:0;z-index:0;width:auto;height:auto;margin:0;border:0;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.12);
}
body[data-material] .material-tile strong{padding:0 15px;font-size:.84rem;font-weight:600}
body[data-material] .material-tile small{padding:3px 15px 15px;margin:0;font-size:.66rem;opacity:.9}
body[data-material] .material-tile::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 66%);transform:translateX(-125%);
}
@media(any-hover:hover){body[data-material] .material-tile:hover::before{transform:translateX(125%);transition:transform .9s var(--ease)}}
body[data-material] .material-tile[aria-pressed=true]{box-shadow:var(--m-bevel),0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
body[data-material] .material-tile[aria-pressed=true]::after{
  content:'✓';right:11px;top:11px;z-index:2;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface);color:var(--accent);font-size:.78rem;box-shadow:var(--m-bevel-small);
}
[data-swatch=violet]{background:radial-gradient(55% 50% at 74% 106%,rgba(196,150,255,.5),transparent 70%),conic-gradient(from 318deg at 74% 118%,#4a2a8e 0deg 4.5deg,rgba(226,208,255,.4) 4.5deg 5deg,#22104a 5deg 7.5deg,rgba(226,208,255,.4) 7.5deg 8deg,#6b3fc4 8deg 14.5deg,rgba(226,208,255,.4) 14.5deg 15deg,#321a6a 15deg 18.5deg,rgba(226,208,255,.4) 18.5deg 19deg,#8e63df 19deg 24.5deg,rgba(226,208,255,.4) 24.5deg 25deg,#2a1558 25deg 27.5deg,rgba(226,208,255,.4) 27.5deg 28deg,#5a34ab 28deg 35.5deg,rgba(226,208,255,.4) 35.5deg 36deg,#3a1f78 36deg 39.5deg,rgba(226,208,255,.4) 39.5deg 40deg,#4a2a8e 40deg 44.5deg,rgba(226,208,255,.4) 44.5deg 45deg,#22104a 45deg 50.5deg,rgba(226,208,255,.4) 50.5deg 51deg,#6b3fc4 51deg 53.5deg,rgba(226,208,255,.4) 53.5deg 54deg,#321a6a 54deg 60.5deg,rgba(226,208,255,.4) 60.5deg 61deg,#8e63df 61deg 65.5deg,rgba(226,208,255,.4) 65.5deg 66deg,#2a1558 66deg 69.5deg,rgba(226,208,255,.4) 69.5deg 70deg,#5a34ab 70deg 75.5deg,rgba(226,208,255,.4) 75.5deg 76deg,#3a1f78 76deg 78.5deg,rgba(226,208,255,.4) 78.5deg 79deg,transparent 79deg),linear-gradient(140deg,#2c1760,#1b0f3d 55%,#3a1d7a)}
[data-swatch=pink]{background:radial-gradient(100% 85% at 8% 0,rgba(255,255,255,.85),transparent 55%),url('./assets/tex/seigaiha-light.svg') 0 0/60px 60px,linear-gradient(135deg,#ffc3dc,#ffeaf2 45%,#ffb9d4)}
[data-swatch=gold]{background:radial-gradient(120% 90% at 6% 0,rgba(255,247,214,.8),transparent 55%),radial-gradient(90% 95% at 100% 100%,rgba(98,64,12,.5),transparent 62%),url('./assets/tex/brushed.png') 0 0/512px 160px,linear-gradient(135deg,#b8862d,#e6c36a 30%,#f6e2a0 48%,#d1a448 62%,#a9762a)}
[data-swatch=carbon]{background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.16) 46%,transparent 64%),linear-gradient(180deg,rgba(255,255,255,.1),transparent 45%),url('./assets/tex/twill-dark.svg') 0 0/22px 22px,#0b0e11}
[data-swatch=diamond]{background:radial-gradient(100% 80% at 0 0,rgba(255,255,255,.6),transparent 55%),url('./assets/tex/facets.svg') 0 0/200px 200px,linear-gradient(120deg,#ffb3e0,#c5b0ff 30%,#a6e3ff 60%,#f1c0ff)}
.material-swatch[data-swatch=violet]~:is(strong,small){color:#f5efff}
.material-swatch[data-swatch=pink]~:is(strong,small){color:#3d1f31}
.material-swatch[data-swatch=gold]~:is(strong,small){color:#2a1c05}
.material-swatch[data-swatch=carbon]~:is(strong,small){color:#eef3f7}
.material-swatch[data-swatch=diamond]~:is(strong,small){color:#1a2150}

/* ───────── 14. Атмосфера: фон и частицы ───────── */
#theme-atmosphere{
  background:var(--m-ambient,none);
}
.fx{position:absolute;left:var(--x);top:0;width:var(--s,10px);height:var(--s,10px);opacity:0;pointer-events:none}
@keyframes fx-rise{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:var(--o,.6)}88%{opacity:var(--o,.6)}100%{opacity:0;transform:translate3d(var(--dx,20px),-112vh,0)}}
@keyframes fx-fall{
  0%{opacity:0;transform:perspective(520px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)}
  8%{opacity:var(--o,.8)}
  25%{transform:perspective(520px) translate3d(calc(var(--dx)*.3),28vh,0) rotateX(160deg) rotateY(70deg) rotateZ(40deg)}
  50%{transform:perspective(520px) translate3d(calc(var(--dx)*-.2),56vh,0) rotateX(320deg) rotateY(190deg) rotateZ(110deg)}
  75%{transform:perspective(520px) translate3d(calc(var(--dx)*.6),84vh,0) rotateX(470deg) rotateY(260deg) rotateZ(180deg)}
  92%{opacity:var(--o,.8)}
  100%{opacity:0;transform:perspective(520px) translate3d(var(--dx),112vh,0) rotateX(640deg) rotateY(360deg) rotateZ(250deg)}
}
@keyframes fx-twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%,55%{opacity:var(--o,.9);transform:scale(1) rotate(45deg)}}
@keyframes fx-sweep{0%,30%{transform:translateX(0) skewX(-14deg)}100%{transform:translateX(420%) skewX(-14deg)}}
.fx-dust{top:auto;bottom:-24px;border-radius:50%;background:radial-gradient(circle,rgba(255,238,180,.95) 0,rgba(232,195,106,.5) 40%,transparent 70%);animation:fx-rise var(--t) linear var(--d) infinite}
body[data-theme=light] .fx-dust{background:radial-gradient(circle,rgba(232,178,64,.9) 0,rgba(196,146,36,.4) 45%,transparent 70%)}
.fx-petal{top:-44px;height:calc(var(--s)*1.15);background:url('./assets/tex/petal.svg') center/contain no-repeat;animation:fx-fall var(--t) linear var(--d) infinite}
.fx-spark{top:var(--y);--spark:#fff;--halo:rgba(180,195,255,.4);background:radial-gradient(circle,var(--halo),transparent 70%),radial-gradient(circle,var(--spark) 0 14%,transparent 52%),linear-gradient(90deg,transparent,var(--spark),transparent) center/100% 1.5px no-repeat,linear-gradient(0deg,transparent,var(--spark),transparent) center/1.5px 100% no-repeat;animation:fx-twinkle var(--t) ease-in-out var(--d) infinite}
body[data-theme=light] .fx-spark{--spark:#7a80e0;--halo:rgba(122,128,224,.32)}
.fx-crystal{top:var(--y);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,rgba(240,228,255,.95),rgba(160,110,240,.55));animation:fx-twinkle var(--t) ease-in-out var(--d) infinite}
body[data-theme=light] .fx-crystal{background:linear-gradient(135deg,rgba(160,120,235,.9),rgba(100,57,187,.5))}
body[data-theme=light] .fx-sweep{left:-45%;top:-10%;width:40%;height:120%;opacity:1;background:linear-gradient(100deg,transparent,rgba(220,235,250,.075) 50%,transparent);animation:fx-sweep 17s ease-in-out infinite}
body[data-theme=light] .fx-sweep{background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 50%,transparent)}

/* ───────── 15. Безопасность движения ───────── */
body[data-motion=reduced] :is(#theme-atmosphere .fx,.m-sheen){display:none}
body[data-motion=reduced] :is(.hero,.subject,.stat,.study-card){transform:none;translate:none}
@media(prefers-reduced-motion:reduce){#theme-atmosphere .fx,.m-sheen{display:none}body[data-material] :is(.hero,.subject,.stat,.study-card){transform:none;translate:none}}
.motion-paused :is(.fx,.m-sheen,.mini-browser,.hero h1 em){animation-play-state:paused!important}
@media(max-width:700px){body[data-material] .hero .mini-browser{animation-duration:11s}}

/* ───────── 16. Смена темы и параллакс превью ───────── */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
@media(min-width:1001px){
  body[data-material] .hero .mini-browser{transform:rotateY(calc(-8deg + var(--px,0)*7deg)) rotateX(calc(var(--py,0)*-6deg)) rotateZ(2deg)}
}

.m-veil{position:fixed;inset:0;z-index:2000;pointer-events:none}
body[data-motion=reduced] .m-veil{display:none}

/* Во время теста атмосфера приглушена, чтобы не отвлекать от вопроса */
body[data-page=quiz] #theme-atmosphere{opacity:.4;transition:opacity .6s var(--ease)}