/* HSE v8 theme: 3 photo styles (site / cosmos / bloom) + plain, each in day & night.
   Text always sits on solid-ish "sheet" cards; colours are tokens by category:
   --head (titles)  --ink (body)  --mute (secondary)  --accent (actions/links)  --gh (section labels)  ok/bad/flag (status) */
:root{
 color-scheme:light;
 --bg:#e9eef3;--scrim:rgba(233,238,243,.55);--sheet:rgba(250,252,253,.95);--sheet2:#eef3f7;
 --head:#0b1b2a;--ink:#14212e;--mute:#44566a;--line:#c3cfdb;
 --accent:#0b5a8f;--accent-ink:#ffffff;--accentSoft:#dcebf6;--gh:#9a3412;
 --ok:#16743f;--okSoft:#dcf1e4;--bad:#b3261e;--badSoft:#fbe4e1;--flag:#9a4a00;--flagSoft:#fdebd3;--hi:#f4c20d;
 --shadow:0 2px 4px rgba(10,25,40,.08),0 10px 30px rgba(10,25,40,.14);
 --f:'Vazirmatn',Tahoma,'Segoe UI','DejaVu Sans',sans-serif;
 --fs-base:clamp(15.5px,.28vw + 14.6px,18px);--r:14px}
:root[data-theme="dark"]{
 color-scheme:dark;
 --bg:#0b1118;--scrim:rgba(6,10,16,.58);--sheet:rgba(18,27,38,.95);--sheet2:#1a2634;
 --head:#ffffff;--ink:#e8edf2;--mute:#a9b6c3;--line:#344860;
 --accent:#ffcf4a;--accent-ink:#1a1500;--accentSoft:#33301b;--gh:#7dd3fc;
 --ok:#6fdc9c;--okSoft:#17382a;--bad:#ff9a90;--badSoft:#3d1c1a;--flag:#ffb072;--flagSoft:#3d2a16;--hi:#ffcf4a;
 --shadow:0 10px 30px rgba(0,0,0,.5)}
/* cosmos: violet / teal, space-navy night */
:root[data-style="cosmos"]{--bg:#ecebf7;--scrim:rgba(236,235,247,.5);--sheet:rgba(247,246,254,.95);--sheet2:#efedfb;--head:#1a1445;--ink:#1e1a3a;--mute:#4a4670;--line:#c9c4e6;--accent:#5434c0;--accent-ink:#fff;--accentSoft:#e4defa;--gh:#0b6585}
:root[data-style="cosmos"][data-theme="dark"]{--bg:#070b1c;--scrim:rgba(4,7,20,.5);--sheet:rgba(14,20,44,.95);--sheet2:#18213f;--head:#fff;--ink:#e9ecfa;--mute:#aeb7dc;--line:#33406e;--accent:#7fe3ff;--accent-ink:#04202a;--accentSoft:#12324a;--gh:#ffd27a}
/* bloom: magenta / plum, petal-pink day, deep-berry night */
:root[data-style="bloom"]{--bg:#f9eef4;--scrim:rgba(249,238,244,.52);--sheet:rgba(255,248,251,.95);--sheet2:#fbeef5;--head:#3a0f27;--ink:#33152a;--mute:#6a4259;--line:#e5c6d8;--accent:#a3185a;--accent-ink:#fff;--accentSoft:#fbdcec;--gh:#5f3a9e}
:root[data-style="bloom"][data-theme="dark"]{--bg:#150a14;--scrim:rgba(18,6,16,.5);--sheet:rgba(32,15,29,.95);--sheet2:#2b1626;--head:#fff;--ink:#f6e9f1;--mute:#d3b4c6;--line:#5a3150;--accent:#ff9ccb;--accent-ink:#35051e;--accentSoft:#4a1c38;--gh:#f2c6ff}
/* plain = no image: flat colour, same tokens */
:root[data-style="plain"]{--scrim:var(--bg)}

*{box-sizing:border-box}
html{font-size:var(--fs-base);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:1rem;line-height:1.9;direction:rtl;padding-inline:clamp(10px,3vw,24px);padding-block:0 28px;position:relative;min-height:100vh;overflow-wrap:anywhere}
:root[dir="ltr"] body{direction:ltr}
h1,h2,h3,h4{color:var(--head);line-height:1.5;margin:0;text-wrap:balance;font-weight:800}
b,strong{color:var(--head)}
a{color:var(--accent);text-underline-offset:3px}
.mute,.fine{color:var(--mute)}
.fine{font-size:.86rem}
code,.ltr,.big,.num{font-variant-numeric:tabular-nums}
/* background layer */
#bgl{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg);pointer-events:none}
.bgs{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.6s ease;transform:scale(1.02)}
.bgs.on{opacity:1;animation:kb 28s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.bgscrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:saturate(1.1)}
#bgl[hidden]{display:none}
:root[data-style="plain"] #bgl{display:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:1rem;background:var(--sheet2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-height:44px}
::placeholder{color:var(--mute);opacity:.85}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1120px;margin-inline:auto}
/* top bar: [brand][nav] ... [EN/FA][🌗][👨🏻‍🎨] */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--sheet);backdrop-filter:blur(10px);padding:8px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow)}
.brand{font-weight:800;font-size:1.05rem;margin-inline-end:auto;display:flex;gap:8px;align-items:center;color:var(--head)}
.brand i{width:12px;height:12px;border-radius:3px;background:var(--hi);display:inline-block;box-shadow:0 0 0 2px var(--ink) inset}
.tools{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.tools .tb{min-width:42px;height:42px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:var(--sheet2);font-size:1.15rem;line-height:1;display:inline-grid;place-items:center;font-weight:700}
#lang{font-size:.92rem;font-weight:800;letter-spacing:.02em}
.tools .tb:hover{border-color:var(--accent);background:var(--accentSoft)}
#theme.spin{animation:spin .6s ease}
@keyframes spin{from{transform:rotate(-180deg)}to{transform:none}}
.bgmenu{position:fixed;z-index:60;min-width:230px;background:var(--sheet);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;backdrop-filter:blur(12px)}
.bgm-h{font-weight:800;color:var(--head);padding:4px 8px 8px;font-size:.92rem}
.bgm-i{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:6px;border:2px solid transparent;border-radius:12px;background:transparent;margin-top:4px;min-height:52px}
.bgm-i:hover{background:var(--accentSoft)}.bgm-i.on{border-color:var(--accent);background:var(--accentSoft)}
.bgm-t{width:64px;height:42px;border-radius:8px;background-size:cover;background-position:center;flex:0 0 auto;border:1px solid var(--line)}
.bgm-t.plain{background:linear-gradient(135deg,var(--bg),var(--sheet2))}
.bgm-n b{color:var(--head);font-size:.95rem}
.chip{font-variant-numeric:tabular-nums;background:var(--sheet2);border:1px solid var(--line);border-radius:8px;padding:2px 12px;font-size:.9rem;white-space:nowrap}
.btn{border:1px solid var(--line);background:var(--sheet2);color:var(--ink);border-radius:12px;padding:8px 18px;font-weight:600;min-height:42px;transition:transform .12s,box-shadow .12s,border-color .12s}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:800;box-shadow:0 6px 18px -8px var(--accent)}
.btn.danger{background:var(--bad);color:var(--sheet2);border-color:var(--bad);font-weight:700}
.btn.sm{padding:4px 12px;font-size:.9rem;min-height:36px}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.sheet{background:var(--sheet);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(14px,2.4vw,26px)}
.center{min-height:62vh;display:grid;place-items:center;padding-top:30px}
.center .sheet{max-width:560px;text-align:center}
.center h1{font-size:1.5rem;margin-bottom:10px}
.center p{margin:8px 0}
.sign{margin:28px auto 0;max-width:680px;background:var(--sheet);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;padding:10px 16px;text-align:center;font-size:.92rem;line-height:1.8;box-shadow:var(--shadow)}
.sign span{display:block}.sign .en{direction:ltr;unicode-bidi:isolate}
@media (max-width:640px){
 .bar{padding:6px 10px;gap:6px}
 .tools .tb{min-width:40px;height:40px}
 .bgmenu{min-width:min(280px,calc(100vw - 16px))}
}
@media (min-width:1500px){.wrap{max-width:1240px}}
@media print{#bgl,.bar,.sign{display:none}}