/* Yuan Academy — «Алтан үүл» theme: cream paper, gold line-art, red seal accent.
   Loaded on every student page (after the page's own styles); only colours and the page ground change,
   so lessons stay as readable as before. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@600;700&family=Noto+Serif+SC:wght@600;700&display=swap');
:root:root{
  --paper:#FBF6EA; --grid:rgba(184,137,58,.07); --card:#FFFDF7; --ink:#2B2118; --muted:#6E5F4B; --line:#E7D9BC;
  --accent:#B8222E; --accent-soft:rgba(184,34,46,.08); --warn-soft:rgba(184,34,46,.07);
  --blue:#8A5A12; --blue-soft:rgba(184,137,58,.14); --on-blue:#FFFFFF;
  --go:#B8222E; --go-soft:rgba(184,34,46,.08); --on-go:#FFFFFF; --on-accent:#FFFFFF;
  --gold:#B8893A; --gold-soft:rgba(184,137,58,.12);
  --ya-serif:"Noto Serif","Golos Text",Georgia,serif; --ya-han:"Noto Serif SC","Songti SC","SimSun",serif;
}
@media (prefers-color-scheme:dark){
  :root:root:not([data-theme="light"]){
    --paper:#17120C; --grid:rgba(217,174,98,.05); --card:#211A12; --ink:#F3E9D6; --muted:#BFAE90; --line:#3A2E1F;
    --accent:#E0545F; --accent-soft:rgba(224,84,95,.12); --warn-soft:rgba(224,84,95,.10);
    --blue:#D9AE62; --blue-soft:rgba(217,174,98,.14); --on-blue:#17120C;
    --go:#E0545F; --go-soft:rgba(224,84,95,.12); --on-go:#17120C; --on-accent:#17120C;
    --gold:#D9AE62; --gold-soft:rgba(217,174,98,.14); color-scheme:dark}
}
:root:root[data-theme="dark"]{
  --paper:#17120C; --grid:rgba(217,174,98,.05); --card:#211A12; --ink:#F3E9D6; --muted:#BFAE90; --line:#3A2E1F;
  --accent:#E0545F; --accent-soft:rgba(224,84,95,.12); --blue:#D9AE62; --blue-soft:rgba(217,174,98,.14); --on-blue:#17120C;
  --go:#E0545F; --go-soft:rgba(224,84,95,.12); --on-go:#17120C; --gold:#D9AE62; --gold-soft:rgba(217,174,98,.14)}
html body{background-color:var(--paper)!important; background-image:radial-gradient(var(--grid) 1px,transparent 1.3px)!important; background-size:22px 22px!important}

/* ---------- story banner (one historical scene per page) ---------- */
.ya-scene{position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--line); border-radius:20px; margin:8px 0 22px; min-height:300px; background:var(--card)}
.ya-scene img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:85% 50%; z-index:-2}
.ya-scene::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(251,246,234,.96) 0%,rgba(251,246,234,.9) 48%,rgba(251,246,234,0) 72%)}
.ya-scene .in{max-width:min(540px,55%); padding:28px clamp(18px,4vw,34px) 26px}
.ya-scene .seal{display:inline-grid; place-items:center; min-width:46px; height:46px; padding:0 6px; border-radius:7px; background:var(--accent); color:#fff; font-family:var(--ya-han); font-size:13px; line-height:1.1; text-align:center; transform:rotate(-4deg); box-shadow:0 3px 10px rgba(184,34,46,.25); margin-bottom:12px; writing-mode:horizontal-tb}
.ya-scene .ey{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.ya-scene h2{font-family:var(--ya-serif); font-weight:700; font-size:clamp(22px,3.4vw,30px); line-height:1.2; margin:6px 0 8px; color:var(--ink); text-wrap:balance}
.ya-scene p{color:var(--muted); font-size:15.5px; line-height:1.6; margin:0}
.ya-scene .hz{font-family:var(--ya-han); color:var(--accent)}
.ya-scene .x{position:absolute; top:10px; right:12px; border:0; background:rgba(255,253,247,.8); color:var(--muted); width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1}
.ya-scene[hidden]{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ya-scene img{filter:brightness(.42) sepia(.35)}
  :root:not([data-theme="light"]) .ya-scene::after{background:linear-gradient(90deg,rgba(23,18,12,.94) 0%,rgba(23,18,12,.75) 40%,rgba(23,18,12,0) 70%)}
  :root:not([data-theme="light"]) .ya-scene .x{background:rgba(33,26,18,.8)}
}
@media (max-width:700px){
  .ya-scene{min-height:0}
  .ya-scene img{position:relative; display:block; height:170px; object-position:80% 50%}
  .ya-scene::after{display:none}
  .ya-scene .in{max-width:none; padding:16px 18px 18px}
  .ya-scene .seal{position:absolute; top:128px; left:16px; margin:0}
  .ya-scene .ey{margin-top:8px}
}

/* ---------- study backdrop: faint scenes in the page margins (course pages) ---------- */
.ya-bg{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.ya-bg img{position:absolute; top:0; height:100%; width:calc(50% - 400px); max-width:none; object-fit:cover; object-position:84% 55%; opacity:.42;
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 40%); mask-image:linear-gradient(270deg,transparent 0,#000 40%)}
.ya-bg img.l{left:0}
.ya-bg img.r{right:0; transform:scaleX(-1)}
@media (max-width:1100px){
  .ya-bg img{top:auto; bottom:0; height:34vh; width:100%; opacity:.14; object-position:84% 60%;
    -webkit-mask-image:linear-gradient(0deg,#000 15%,transparent); mask-image:linear-gradient(0deg,#000 15%,transparent)}
  .ya-bg img.l{display:none}
  .ya-bg img.r{transform:none}
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ya-bg img{filter:brightness(.55) sepia(.4); opacity:.3} }
:root[data-theme="dark"] .ya-bg img{filter:brightness(.55) sepia(.4); opacity:.3}
@media print{ .ya-bg{display:none} }

/* green = go: buy / price buttons stand out in jade against the red and gold */
:root:root{--buy:#1E7B57; --buy-dark:#17684A}
[data-buy]{background:var(--buy)!important; border-color:var(--buy)!important; color:#fff!important}
[data-buy]:hover{background:var(--buy-dark)!important; border-color:var(--buy-dark)!important}
.pkg .price, .ya-buyprice{color:var(--buy)!important}
@media (prefers-color-scheme:dark){:root:root:not([data-theme="light"]){--buy:#2E9E72; --buy-dark:#25875F}}

/* ---------- /exam/ pages (certificate exams): their boxes are fixed white, so follow the theme in dark mode ---------- */
:root[data-theme="dark"] body:has(#ex) :is(.card, .btn.ghost, header.top){background:var(--card)!important; color:var(--ink)!important; border-color:var(--line)!important}
:where(:root[data-theme="dark"] body:has(#ex)) .dots i{background:var(--line)}
:where(:root[data-theme="dark"] body:has(#ex)) .opt{background:var(--card); color:var(--ink); border-color:var(--line)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body:has(#ex) :is(.card, .btn.ghost, header.top){background:var(--card)!important; color:var(--ink)!important; border-color:var(--line)!important}
  :where(:root:not([data-theme="light"]) body:has(#ex)) .dots i{background:var(--line)}
  :where(:root:not([data-theme="light"]) body:has(#ex)) .opt{background:var(--card); color:var(--ink); border-color:var(--line)}
}