/* Seasonal themes — visual-only layer. Existing app geometry remains untouched. */
html[data-seasonal-theme]{
  --background:var(--bg);
  --surface-strong:var(--surface);
  --text-primary:var(--text);
  --text-secondary:var(--muted);
  --border:var(--line);
  --button-bg:var(--accent);
  --button-text:var(--accent-text);
  --nav-bg:var(--surface);
}

/* ОСЕННЯЯ СКАЗКА */
html[data-seasonal-theme="autumn"][data-seasonal-mode="day"]{
  --bg:#ead8cc;--surface:#fff8f1;--soft:#eedfd2;--text:#241711;--muted:#60483d;
  --line:#c98f68;--hero:#fff3e8;--bad:#9d3535;--shadow:0 16px 38px rgba(83,45,24,.22);
  --season-bg:url('/static/theme-assets/autumn-day.jpg');
  --season-decor:url('/static/theme-assets/autumn-leaf-01.png');
  --season-overlay:linear-gradient(rgba(255,248,239,.02),rgba(78,37,18,.055));
  --season-edge:rgba(211,126,70,.52);--season-glow:rgba(194,91,35,.18);
  --season-day-panel:rgba(255,247,238,.76);--season-day-strong:rgba(255,242,229,.84);
  color-scheme:light
}
html[data-seasonal-theme="autumn"][data-seasonal-mode="night"]{
  --bg:#151721;--surface:#2d2525;--soft:#45342e;--text:#fff4e8;--muted:#d1ae95;
  --line:#9b664c;--hero:#3f2925;--bad:#ff7d79;--shadow:0 18px 42px rgba(0,0,0,.44);
  --season-bg:url('/static/theme-assets/autumn-night.jpg');
  --season-decor:url('/static/theme-assets/autumn-leaf-01.png');
  --season-overlay:linear-gradient(rgba(5,8,17,.05),rgba(26,12,7,.14));
  --season-edge:rgba(226,135,77,.42);--season-glow:rgba(227,112,49,.24);
  color-scheme:dark
}

/* ЗИМНИЙ ЮГЪ */
html[data-seasonal-theme="winter"][data-seasonal-mode="day"]{
  --bg:#dcebf6;--surface:#f7fcff;--soft:#dceaf5;--text:#0e2743;--muted:#49647e;
  --line:#9dc1de;--hero:#f1f9ff;--bad:#9b3e55;--shadow:0 16px 38px rgba(47,91,130,.18);
  --season-bg:url('/static/theme-assets/winter-day.jpg');
  --season-decor:url('/static/theme-assets/winter-decor.png');
  --season-overlay:linear-gradient(rgba(247,252,255,.01),rgba(62,111,153,.035));
  --season-edge:rgba(155,207,241,.60);--season-glow:rgba(52,143,220,.16);
  --season-day-panel:rgba(245,251,255,.75);--season-day-strong:rgba(237,248,255,.84);
  color-scheme:light
}
html[data-seasonal-theme="winter"][data-seasonal-mode="night"]{
  --bg:#07182f;--surface:#173758;--soft:#21486f;--text:#eff9ff;--muted:#a9c8e0;
  --line:#417ca9;--hero:#113a61;--bad:#ff768b;--shadow:0 18px 44px rgba(1,10,25,.50);
  --season-bg:url('/static/theme-assets/winter-night.jpg');
  --season-decor:url('/static/theme-assets/winter-decor.png');
  --season-overlay:linear-gradient(rgba(2,10,27,.035),rgba(1,16,38,.13));
  --season-edge:rgba(129,204,244,.46);--season-glow:rgba(58,190,255,.23);
  color-scheme:dark
}

/* РАМАДАН */
html[data-seasonal-theme="ramadan"][data-seasonal-mode="day"]{
  --bg:#efe5cf;--surface:#fff9e9;--soft:#ecdfc5;--text:#12332d;--muted:#5b5547;
  --line:#c8aa6b;--hero:#fff5dc;--bad:#9f3e42;--shadow:0 16px 38px rgba(66,51,25,.20);
  --season-bg:url('/static/theme-assets/ramadan-day.jpg');
  --season-decor:url('/static/theme-assets/ramadan-decor.png');
  --season-overlay:linear-gradient(rgba(255,250,232,.005),rgba(20,67,61,.035));
  --season-edge:rgba(218,177,85,.56);--season-glow:rgba(188,142,54,.18);
  --season-day-panel:rgba(255,248,226,.76);--season-day-strong:rgba(255,244,214,.84);
  color-scheme:light
}
html[data-seasonal-theme="ramadan"][data-seasonal-mode="night"]{
  --bg:#071d27;--surface:#12343a;--soft:#19464a;--text:#fff7dd;--muted:#cfbf98;
  --line:#8b7449;--hero:#0d4944;--bad:#ff837c;--shadow:0 18px 44px rgba(0,8,14,.52);
  --season-bg:url('/static/theme-assets/ramadan-night.jpg');
  --season-decor:url('/static/theme-assets/ramadan-decor.png');
  --season-overlay:linear-gradient(rgba(1,12,22,.03),rgba(2,31,35,.12));
  --season-edge:rgba(224,181,88,.45);--season-glow:rgba(232,188,91,.23);
  color-scheme:dark
}

/* Seasonal default wallpaper remains available as “По режиму”, but users may replace or disable it. */
html[data-seasonal-theme] body{
  position:relative;isolation:isolate;background-color:var(--bg)!important;background-image:none!important;
  transition:background-color .28s ease,color .28s ease
}
html[data-seasonal-theme]:not([data-custom-wallpaper="on"]):not([data-wallpaper="plain"]) #lezgchal-wallpaper-layer{
  opacity:1!important;background-image:var(--season-bg)!important;background-position:center center!important;
  background-size:cover!important;background-repeat:no-repeat!important;filter:none!important
}
html[data-seasonal-theme][data-wallpaper="plain"] #lezgchal-wallpaper-layer{
  opacity:0!important;background-image:none!important
}
html[data-seasonal-theme][data-custom-wallpaper="on"] #lezgchal-wallpaper-layer{
  opacity:1!important;background-position:center center!important;background-size:cover!important;
  background-repeat:no-repeat!important;filter:none!important
}
html[data-seasonal-theme] .shell{position:relative;z-index:1;background:transparent!important}
html[data-seasonal-theme] body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--season-overlay)
}
.lezgchal-seasonal-bg-ghost{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;background-position:center;
  background-size:cover;background-repeat:no-repeat;transition:opacity .32s ease
}
.lezgchal-seasonal-bg-ghost.is-fading{opacity:0}

/* Stronger light surfaces keep text readable over photographic wallpapers. */
html[data-seasonal-theme][data-seasonal-mode="day"] :is(.card,.metric,.tile,.lesson,.list-row,.option,.feedback,.badge,.answer-reviewed,.settings-card,.mode-switch,.segmented,.course-cover){
  background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),var(--season-day-panel)!important;
  color:var(--text)!important;
  border-color:var(--season-edge)!important;
  box-shadow:0 9px 25px var(--season-glow)!important
}
html[data-seasonal-theme][data-seasonal-mode="day"] .hero{
  background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),var(--season-day-strong)!important;
  color:var(--text)!important;border-color:var(--season-edge)!important;
  box-shadow:0 12px 30px var(--season-glow)!important
}
html[data-seasonal-theme][data-seasonal-mode="day"] #nav{
  background:var(--season-day-strong)!important;color:var(--text)!important;
  border-color:var(--season-edge)!important;box-shadow:0 10px 28px var(--season-glow)!important
}
html[data-seasonal-theme][data-seasonal-mode="day"] :is(.mode-switch,.segmented){
  color:var(--text)!important
}
html[data-seasonal-theme][data-seasonal-mode="day"] :is(.metric,.hero,.card,.lesson,.settings-card) :is(h1,h2,h3,h4,strong,b,.title,.value,.big){
  color:var(--text)!important
}
html[data-seasonal-theme][data-seasonal-mode="day"] :is(.metric,.hero,.card,.lesson,.settings-card) :is(p,small,.muted,.source,.subtitle){
  color:var(--muted)!important
}

/* Night surfaces keep the existing application material; only palette/border/shadow change. */
html[data-seasonal-theme][data-seasonal-mode="night"] :is(.card,.metric,.tile,.lesson,.list-row,.option,.feedback,.badge,.answer-reviewed,.settings-card,.mode-switch,.segmented,.course-cover){
  border-color:var(--season-edge)!important;box-shadow:0 10px 28px var(--season-glow)!important
}
html[data-seasonal-theme][data-seasonal-mode="night"] .hero{
  border-color:var(--season-edge)!important;box-shadow:0 12px 30px var(--season-glow)!important
}
html[data-seasonal-theme][data-seasonal-mode="night"] #nav{
  border-color:var(--season-edge)!important;box-shadow:0 12px 30px var(--season-glow)!important
}
html[data-seasonal-theme] .header-actions .icon-button{
  border-color:var(--season-edge)!important;box-shadow:0 7px 18px var(--season-glow)!important
}

/* CTA accents follow the user's accent choice in every seasonal theme. */
html[data-seasonal-theme] :is(.primary,.hero .primary){
  color:var(--accent-text)!important;
  background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 82%,#000 18%),var(--accent) 68%,color-mix(in srgb,var(--accent) 74%,#fff 26%))!important;
  border-color:color-mix(in srgb,var(--accent) 66%,#fff 34%)!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 24%,transparent)!important
}
html[data-seasonal-theme] #nav a.active,
html[data-seasonal-theme] .eyebrow{color:var(--accent)!important}

/* Real PNG decor moves with its card because nodes are children of the cards. */
.seasonal-local-decor{
  position:absolute;display:none;pointer-events:none;z-index:2;
  background-image:var(--season-decor);background-repeat:no-repeat;background-size:430px auto;
  opacity:.55
}
html[data-seasonal-theme] .seasonal-local-decor{display:block}
html[data-seasonal-theme="autumn"] .seasonal-local-decor{mix-blend-mode:normal;filter:saturate(1.06)}
html[data-seasonal-theme="winter"] .seasonal-local-decor{mix-blend-mode:screen;opacity:.48}
html[data-seasonal-theme="ramadan"] .seasonal-local-decor{mix-blend-mode:normal;opacity:.52}

/* Three stat cards intentionally use different crops. */
.metric-1-decor.decor-1{width:70px;height:76px;right:2px;bottom:0;background-position:96% 72%;transform:rotate(7deg)}
.metric-2-decor.decor-1{width:62px;height:68px;right:5px;top:6px;background-position:44% 30%;transform:rotate(-10deg);opacity:.46}
.metric-3-decor.decor-1{width:76px;height:80px;right:-4px;bottom:-2px;background-position:76% 58%;transform:rotate(12deg)}

/* Hero gets several different small accents like the reference. */
.hero-decor.decor-1{width:102px;height:106px;right:-5px;top:4px;background-position:96% 8%;transform:rotate(8deg);opacity:.50}
.hero-decor.decor-2{width:82px;height:86px;left:2px;bottom:2px;background-position:8% 84%;transform:rotate(-13deg);opacity:.44}
.hero-decor.decor-3{width:52px;height:58px;right:31%;bottom:27%;background-position:52% 48%;transform:rotate(9deg);opacity:.38}

/* Small accents near bottom navigation and mode switch. */
.nav-decor.decor-1{width:72px;height:70px;left:0;bottom:0;background-position:8% 82%;transform:rotate(-8deg);opacity:.30}
.nav-decor.decor-2{width:70px;height:70px;right:0;top:0;background-position:90% 16%;transform:rotate(10deg);opacity:.28}
.switch-decor.decor-1{width:56px;height:58px;right:3px;top:2px;background-position:62% 28%;transform:rotate(7deg);opacity:.28}

/* A few screen-edge pieces; no interaction and no layout effect. */
#lezgchal-seasonal-decor{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none
}
html[data-seasonal-theme] #lezgchal-seasonal-decor{display:block}
#lezgchal-seasonal-decor .seasonal-decor-piece{
  position:absolute;display:block;pointer-events:none;background-image:var(--season-decor);
  background-repeat:no-repeat;background-size:500px auto;opacity:.34
}
#lezgchal-seasonal-decor .p1{width:105px;height:118px;left:-38px;top:17%;background-position:0 0;transform:rotate(-17deg)}
#lezgchal-seasonal-decor .p2{width:96px;height:108px;right:-32px;top:48%;background-position:100% 14%;transform:rotate(13deg)}
#lezgchal-seasonal-decor .p3{width:88px;height:94px;left:-24px;bottom:13%;background-position:8% 88%;transform:rotate(10deg);opacity:.25}
#lezgchal-seasonal-decor .p4{width:88px;height:94px;right:-25px;bottom:10%;background-position:92% 88%;transform:rotate(-10deg);opacity:.25}
html[data-seasonal-theme="winter"] #lezgchal-seasonal-decor .seasonal-decor-piece{mix-blend-mode:screen;opacity:.27}
html[data-seasonal-theme="ramadan"] #lezgchal-seasonal-decor .seasonal-decor-piece{opacity:.32}

/* Kept for backward compatibility with older cached markup; current seasonal themes do not apply it to accent/wallpaper controls. */
.seasonal-setting-hidden{display:none!important}

/* Day/night toggle exists only for the three seasonal themes. */
html:not([data-seasonal-theme]) #theme-toggle{display:none!important}
html[data-seasonal-theme] #theme-toggle{
  transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease
}

@media(prefers-reduced-motion:reduce){
  html[data-seasonal-theme] *,html[data-seasonal-theme] *::before,html[data-seasonal-theme] *::after{transition:none!important}
  .lezgchal-seasonal-bg-ghost{display:none!important}
}


/* Autumn decor v3 — source leaf cutouts, visible but kept away from text/actions. */
html[data-seasonal-theme="autumn"] :is(.metric,.hero){isolation:isolate}
html[data-seasonal-theme="autumn"] .seasonal-local-decor{
  z-index:1;pointer-events:none;filter:none;mix-blend-mode:normal;
  background-repeat:no-repeat!important;background-size:contain!important;background-position:center!important
}
html[data-seasonal-theme="autumn"] :is(.nav-decor,.switch-decor){display:none!important}

html[data-seasonal-theme="autumn"] .metric-1-decor.decor-1{
  background-image:url('/static/theme-assets/autumn-leaf-v2-01.png');
  width:58px;height:62px;right:2px;bottom:-3px;top:auto;left:auto;
  transform:rotate(9deg);opacity:.42
}
html[data-seasonal-theme="autumn"] .metric-2-decor.decor-1{
  background-image:url('/static/theme-assets/autumn-leaf-v2-02.png');
  width:54px;height:58px;right:3px;top:5px;bottom:auto;left:auto;
  transform:rotate(-10deg);opacity:.38
}
html[data-seasonal-theme="autumn"] .metric-3-decor.decor-1{
  background-image:url('/static/theme-assets/autumn-leaf-v2-03.png');
  width:56px;height:66px;right:1px;bottom:-4px;top:auto;left:auto;
  transform:rotate(8deg);opacity:.40
}
html[data-seasonal-theme="autumn"] .hero-decor.decor-1{
  background-image:url('/static/theme-assets/autumn-leaf-v2-04.png');
  width:72px;height:78px;right:2px;top:2px;left:auto;bottom:auto;
  transform:rotate(10deg);opacity:.34
}
html[data-seasonal-theme="autumn"] .hero-decor.decor-2{
  background-image:url('/static/theme-assets/autumn-leaf-v2-05.png');
  width:58px;height:66px;left:1px;bottom:1px;right:auto;top:auto;
  transform:rotate(-12deg);opacity:.30
}
html[data-seasonal-theme="autumn"] .hero-decor.decor-3{
  background-image:url('/static/theme-assets/autumn-leaf-v2-06.png');
  width:52px;height:58px;right:1px;bottom:8px;left:auto;top:auto;
  transform:rotate(7deg);opacity:.28
}

html[data-seasonal-theme="autumn"] #lezgchal-seasonal-decor .seasonal-decor-piece{
  pointer-events:none;filter:none;mix-blend-mode:normal;
  background-repeat:no-repeat!important;background-size:contain!important;background-position:center!important
}
html[data-seasonal-theme="autumn"] #lezgchal-seasonal-decor .p1{
  background-image:url('/static/theme-assets/autumn-leaf-v2-07.png');
  width:64px;height:76px;left:-24px;top:18%;right:auto;bottom:auto;
  transform:rotate(-12deg);opacity:.21
}
html[data-seasonal-theme="autumn"] #lezgchal-seasonal-decor .p2{
  background-image:url('/static/theme-assets/autumn-leaf-v2-08.png');
  width:62px;height:72px;right:-22px;top:50%;left:auto;bottom:auto;
  transform:rotate(12deg);opacity:.21
}
html[data-seasonal-theme="autumn"] #lezgchal-seasonal-decor .p3{
  background-image:url('/static/theme-assets/autumn-leaf-v2-03.png');
  width:56px;height:66px;left:-18px;bottom:14%;top:auto;right:auto;
  transform:rotate(8deg);opacity:.18
}
html[data-seasonal-theme="autumn"] #lezgchal-seasonal-decor .p4{
  background-image:url('/static/theme-assets/autumn-leaf-v2-05.png');
  width:58px;height:66px;right:-18px;bottom:12%;top:auto;left:auto;
  transform:rotate(-9deg);opacity:.18
}

/* Legacy autumn sprite is retained as a repository asset only; the autumn theme does not render it: /static/theme-assets/autumn-decor.png */

/* Autumn v3: keep screen-edge pieces off; decor is card-local only. */
html[data-seasonal-theme="autumn"] #lezgchal-seasonal-decor{display:none!important}

/* Taps on header buttons always reach the button (its icon may be redrawn under the finger). */
.header-actions .icon-button,#theme-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.header-actions .icon-button *,#theme-toggle *{pointer-events:none}