/* ============================================================
   Химия · Ашық зертхана — APEC Learning
   Общий стиль стенда 06-chemistry (свой, не физика).
   Палитра: белое стекло + яркие цвета категорий элементов.
   Шрифты: Geologica (заголовки) + Rubik (текст).
   ============================================================ */

:root{
  --bg:#f3f8fb;
  --bg-soft:#eaf6f7;
  --paper:#ffffff;
  --paper-glass:rgba(255,255,255,.72);
  --ink:#0b2530;
  --ink-dim:rgba(11,37,48,.66);
  --ink-faint:rgba(11,37,48,.44);
  --line:rgba(11,37,48,.12);
  --line-soft:rgba(11,37,48,.07);

  --brand:#0ea5b7;
  --brand-2:#06b6a4;
  --brand-dark:#066e7d;
  --coral:#ff6a52;
  --violet:#7c5cff;
  --amber:#f5a524;

  --cat-alkali:#ef4444;
  --cat-alkaline:#f97316;
  --cat-otpeli:#3b82f6;
  --cat-metal2:#14b8a6;
  --cat-metalloid:#ca8a04;
  --cat-nonmetal:#22c55e;
  --cat-halogen:#65a30d;
  --cat-noble:#a855f7;
  --cat-lantan:#ec4899;
  --cat-aktin:#d946ef;
  --cat-unknown:#94a3b8;

  --f-h:"Geologica","Segoe UI",system-ui,sans-serif;
  --f-b:"Rubik","Segoe UI",system-ui,sans-serif;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;
  --tap:44px;
  --dur:200ms; --ease:cubic-bezier(.22,.8,.32,1);
  --shadow-sm:0 2px 10px rgba(11,37,48,.08);
  --shadow-md:0 10px 30px rgba(11,37,48,.12);
  --shadow-lg:0 18px 50px rgba(11,37,48,.18);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-b);
  font-size:16px;
  line-height:1.6;
  min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
  position:relative;
  padding-bottom:calc(96px + var(--safe-b));
}

/* soft blurred color blobs in background, purely decorative */
.lab-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lab-bg span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35}
.lab-bg span:nth-child(1){width:280px;height:280px;background:var(--brand);top:-80px;left:-60px}
.lab-bg span:nth-child(2){width:220px;height:220px;background:var(--coral);top:30%;right:-80px;opacity:.22}
.lab-bg span:nth-child(3){width:260px;height:260px;background:var(--violet);bottom:10%;left:-100px;opacity:.2}
.lab-bg span:nth-child(4){width:180px;height:180px;background:var(--amber);bottom:-60px;right:10%;opacity:.18}

main,.lab-top,.lab-foot,.lab-fab,.lab-sheet{position:relative;z-index:1}

h1,h2,h3,h4{font-family:var(--f-h);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
a{color:inherit}
button{font-family:var(--f-b)}

/* ---------- header ---------- */
.lab-top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:calc(var(--s3) + env(safe-area-inset-top,0px)) var(--s4) var(--s3);
  background:rgba(243,248,251,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.lab-brand{display:flex; align-items:center; gap:var(--s2); text-decoration:none; min-height:var(--tap)}
.lab-brand-icon{width:34px;height:34px;flex:none}
.lab-brand-text{font-family:var(--f-h);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--brand-dark)}
.lab-brand-text small{display:block;font-family:var(--f-b);font-weight:500;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.lab-top-apec{display:flex;align-items:center;flex:none;padding:9px 6px;margin:-9px -6px}
.lab-top-apec img{display:block;width:74px;height:26px}

/* ---------- language switcher (apec-core injects .apec-lang into [data-apec-lang]) ---------- */
.lab-top{flex-wrap:wrap;row-gap:8px}
.lab-top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.lab-top-right .apec-lang{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.lab-top-right .apec-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:0 8px;border-radius:999px;color:var(--ink-dim);text-decoration:none;font-family:var(--f-h);font-weight:700;font-size:.72rem;opacity:.72;transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.lab-top-right .apec-lang a:hover{opacity:1;background:var(--paper)}
.lab-top-right .apec-lang a[aria-current=true]{opacity:1;background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff}

/* ---------- footer ---------- */
.lab-foot{
  padding:var(--s7) var(--s4) var(--s6);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
}
.lab-foot img{width:120px;height:42px;display:block}
.lab-foot p{font-size:.82rem;color:var(--ink-faint);max-width:320px}
.lab-foot a.home-link{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 var(--s4);
  border-radius:999px;background:var(--paper);border:1px solid var(--line);
  font-weight:600;font-size:.9rem;text-decoration:none;color:var(--brand-dark);box-shadow:var(--shadow-sm);
}

/* ---------- FAB + bottom sheet nav ---------- */
.lab-fab{
  position:fixed; right:var(--s4); bottom:calc(var(--s4) + var(--safe-b));
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(145deg,var(--brand-2),var(--brand));
  box-shadow:0 10px 26px rgba(6,110,125,.42);
  border:none; display:flex; align-items:center; justify-content:center;
  z-index:50; cursor:pointer; color:#fff;
  transition:transform var(--dur) var(--ease);
}
.lab-fab:active{transform:scale(.92)}
.lab-fab svg{width:28px;height:28px}
.lab-fab-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:var(--coral);border:2px solid #fff}

.lab-sheet-backdrop{
  position:fixed; inset:0; background:rgba(8,25,32,.45);
  opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease); z-index:60;
  backdrop-filter:blur(2px);
}
.lab-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61;
  background:var(--paper); border-radius:26px 26px 0 0;
  padding:var(--s3) var(--s4) calc(var(--s6) + var(--safe-b));
  transform:translateY(105%); visibility:hidden;
  transition:transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  box-shadow:0 -20px 60px rgba(11,37,48,.28);
  max-height:82vh; overflow-y:auto;
}
body.nav-open .lab-sheet-backdrop{opacity:1; pointer-events:auto}
body.nav-open .lab-sheet{transform:translateY(0); visibility:visible; transition:transform var(--dur) var(--ease)}
.lab-sheet-handle{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto var(--s4)}
.lab-sheet h3{font-size:1.1rem;margin-bottom:var(--s2)}
.lab-sheet-sub{color:var(--ink-faint);font-size:.85rem;margin-bottom:var(--s4)}
.lab-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.lab-sheet-item{
  display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--ink);
  padding:var(--s4) var(--s3); border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--bg); min-height:88px; justify-content:center;
}
.lab-sheet-item .ic{font-size:1.6rem}
.lab-sheet-item b{font-family:var(--f-h);font-size:.95rem}
.lab-sheet-item span{font-size:.76rem;color:var(--ink-faint)}
.lab-sheet-item.active{background:linear-gradient(145deg,rgba(14,165,183,.14),rgba(124,92,255,.12));border-color:var(--brand)}
.lab-sheet-close{
  position:absolute; top:var(--s3); right:var(--s3); width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line); background:var(--paper); display:flex;align-items:center;justify-content:center;
  font-size:1.1rem; color:var(--ink-dim);
}

/* ---------- generic building blocks ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--s4)}
.eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-dark);
  background:rgba(14,165,183,.1); padding:6px 12px; border-radius:999px; margin-bottom:var(--s3);
}
.hero{padding:var(--s6) var(--s4) var(--s5); text-align:center}
.hero h1{font-size:clamp(2.1rem,9vw,3.2rem); line-height:1.06; margin-bottom:var(--s3)}
.hero h1 em{font-style:normal; background:linear-gradient(120deg,var(--brand),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lead{color:var(--ink-dim); font-size:1.02rem; max-width:520px; margin:0 auto}

.card{
  background:var(--paper-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.section{padding:var(--s6) var(--s4)}
.section h2{font-size:clamp(1.5rem,6vw,2rem); margin-bottom:var(--s2)}
.section .sec-lead{color:var(--ink-dim); margin-bottom:var(--s5); max-width:560px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 var(--s5); border-radius:999px; border:none;
  font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 10px 24px rgba(14,165,183,.35)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{background:var(--paper); border:1px solid var(--line); color:var(--ink)}
.btn-ghost:active{transform:scale(.97)}
.btn[disabled]{opacity:.45; pointer-events:none}

.pagenav{display:flex; gap:var(--s2); flex-wrap:wrap; padding:0 var(--s4) var(--s2)}
.pagenav a{
  flex:1 1 auto; text-align:center; min-height:var(--tap); display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--line); background:var(--paper); text-decoration:none;
  font-weight:600; font-size:.86rem; color:var(--ink-dim); padding:0 var(--s3);
}
.pagenav a.active{background:linear-gradient(120deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent}

.chip{
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 var(--s3);
  border-radius:999px; border:1px solid var(--line); background:var(--paper);
  font-size:.8rem; font-weight:600; color:var(--ink-dim); cursor:pointer; user-select:none;
}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.chip .sw{width:10px;height:10px;border-radius:50%;flex:none}

.fade-in{opacity:1; transform:none}
[data-reveal]{opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease)}
[data-reveal].pre{opacity:0; transform:translateY(14px)}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; z-index:100}
.skip-link:focus{left:0}

@media (min-width:760px){
  .lab-sheet{left:50%; right:auto; bottom:var(--s5); width:420px; border-radius:var(--r-xl); transform:translate(-50%,120%)}
  body.nav-open .lab-sheet{transform:translate(-50%,0)}
}