/* =========================================================
   Sanaa Sciences — Stylesheet
   Design tokens + components. Supports Light/Dark and RTL/LTR.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;600;700;800&family=Tajawal:wght@400;500;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- brand palette, sampled from the Sanaa Sciences logo ---- */
  --purple:        #6D28D9;
  --purple-deep:   #4C1D95;
  --purple-soft:   #B79CF0;
  --teal:          #0F9B8E;
  --teal-deep:     #0B6F65;
  --blue:          #1D4ED8;
  --orange:        #F2600A;
  --yellow:        #F0B93E;
  --green:         #16A34A;
  --pink:          #F472B6;

  /* ---- light theme (default) ---- */
  --bg:            #FAF9FD;
  --bg-alt:        #F3EEFB;
  --surface:       #FFFFFF;
  --surface-2:     #F6F2FC;
  --line:          #E7DEF8;
  --text:          #241A38;
  --text-soft:     #6C6280;
  --text-faint:    #9C93AF;
  --shadow:        0 10px 30px rgba(76, 29, 149, 0.10);
  --shadow-lg:     0 20px 50px rgba(76, 29, 149, 0.16);
  --glass-bg:      rgba(255,255,255,0.6);
  --glass-border:  rgba(255,255,255,0.5);
  --focus:         var(--purple);
  --correct-bg:    #E6F6EC;
  --correct-text:  #1C7A3F;
  --wrong-bg:      #FDE9EF;
  --wrong-text:    #B3406B;

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --font-ar-head: 'Cairo', sans-serif;
  --font-ar-body: 'Tajawal', sans-serif;
  --font-en-head: 'Cairo', 'Inter', sans-serif;
  --font-en-body: 'Inter', sans-serif;

  --ease: cubic-bezier(.22,.85,.4,1);
  --dur-fast: .2s;
  --dur-med: .45s;
  --dur-slow: .8s;
}

/* ---- dark theme: "night lab" — deep indigo/navy with glowing purple & blue ---- */
[data-theme="dark"]{
  --bg:            #100B22;
  --bg-alt:        #171034;
  --surface:       #1B1440;
  --surface-2:     #211A4C;
  --line:          #362A6E;
  --text:          #EDE8FB;
  --text-soft:     #B3A9D6;
  --text-faint:    #7E739E;
  --shadow:        0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg:     0 25px 60px rgba(0,0,0,0.55);
  --glass-bg:      rgba(27, 20, 64, 0.55);
  --glass-border:  rgba(150, 120, 255, 0.18);
  --purple-soft:   #7C5FE0;
  --focus:         #9C7CF0;
  --correct-bg:    #143526;
  --correct-text:  #6FE3A0;
  --wrong-bg:      #3A1B2E;
  --wrong-text:    #F291B4;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
html.no-smooth{scroll-behavior:auto;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ar-body);
  line-height:1.75;
  transition:background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
  overflow-x:hidden;
}
html[lang="en"] body{font-family:var(--font-en-body);}
h1,h2,h3,h4,.brand-text b,.btn,.nav-link,.tab,.pill-btn{font-family:var(--font-ar-head);}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4,
html[lang="en"] .brand-text b,html[lang="en"] .btn,html[lang="en"] .nav-link,
html[lang="en"] .tab,html[lang="en"] .pill-btn{font-family:var(--font-en-head);}

img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button,input,select,textarea{font-family:inherit;color:inherit;}
button{cursor:pointer;border:none;background:none;}
.container{max-width:1240px;margin:0 auto;padding:0 24px;}
section{position:relative;padding:88px 0;}

::selection{background:var(--purple-soft);color:#fff;}

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}

/* reduced motion: kill everything non-essential */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}
body.reduced-motion *{
  animation:none !important;
}

/* =========================================================
   TOP PROGRESS BAR
   ========================================================= */
.scroll-progress{
  position:fixed;top:0;inset-inline-start:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--purple),var(--pink));
  width:0%;z-index:1000;transition:width .1s linear;
}

/* =========================================================
   LOADER
   ========================================================= */
#loader{
  position:fixed;inset:0;z-index:2000;
  background:radial-gradient(circle at 50% 30%, #221850, #0d0a1e);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader-flask{width:88px;height:110px;position:relative;}
.loader-flask svg{width:100%;height:100%;}
.loader-liquid{animation:fillUp 1.6s ease-in-out infinite;}
@keyframes fillUp{
  0%{transform:translateY(14px) scaleY(0.2);}
  50%{transform:translateY(0) scaleY(1);}
  100%{transform:translateY(14px) scaleY(0.2);}
}
.loader-text{color:#E4DBFF;font-family:var(--font-ar-head);font-size:14px;letter-spacing:.5px;}
.loader-bubbles circle{animation:bubbleUp 2.2s ease-in infinite;}
@keyframes bubbleUp{
  0%{opacity:0;transform:translateY(0);}
  20%{opacity:1;}
  100%{opacity:0;transform:translateY(-40px);}
}

/* =========================================================
   BACKGROUND MOLECULE FIELD (decorative, behind everything)
   ========================================================= */
.molecule-field{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.22;
}
[data-theme="dark"] .molecule-field{opacity:.32;}
.molecule-field .m{position:absolute;opacity:.5;animation:drift linear infinite;}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(14px,-18px) rotate(8deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
.cursor-glow{
  position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(109,40,217,0.10), transparent 70%);
  transform:translate(-50%,-50%);
  transition:left .25s linear, top .25s linear;
  display:none;
}
[data-theme="dark"] .cursor-glow{background:radial-gradient(circle, rgba(156,124,240,0.16), transparent 70%);}
@media (hover:hover) and (pointer:fine){
  body.motion-ok .cursor-glow{display:block;}
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
header{
  position:sticky;top:0;z-index:100;
  background:var(--glass-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--glass-border);
  transition:background var(--dur-med) var(--ease);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1240px;margin:0 auto;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand img{width:42px;height:42px;object-fit:contain;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text b{font-size:19px;color:var(--purple);font-weight:800;}
.brand-text span{font-size:10.5px;color:var(--teal);font-weight:700;}

.nav-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.nav-link{font-size:14.5px;font-weight:600;color:var(--text-soft);transition:color var(--dur-fast);position:relative;padding:4px 0;}
.nav-link:hover,.nav-link.active{color:var(--purple);}
.nav-link.active::after{
  content:'';position:absolute;bottom:-4px;inset-inline-start:0;width:100%;height:2px;
  background:var(--teal);border-radius:2px;
}

.nav-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--purple);transition:.25s;flex-shrink:0;
}
.icon-btn:hover{background:var(--purple);color:#fff;transform:translateY(-1px);}
.icon-btn svg{width:18px;height:18px;}

.pill-toggle{
  display:flex;align-items:center;border-radius:var(--radius-pill);background:var(--surface-2);
  padding:3px;gap:2px;
}
.pill-toggle button{
  padding:7px 12px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:700;color:var(--text-soft);
  transition:.25s;
}
.pill-toggle button.active{background:var(--purple);color:#fff;}

.hamburger{display:none;flex-direction:column;gap:5px;width:30px;height:24px;justify-content:center;}
.hamburger span{height:2.5px;background:var(--purple);border-radius:2px;transition:.3s;}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

.mobile-menu{
  display:none;flex-direction:column;gap:2px;background:var(--surface);
  border-top:1px solid var(--line);padding:10px 24px 18px;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:13px 2px;font-weight:600;color:var(--text-soft);border-bottom:1px dashed var(--line);font-size:14.5px;}
.mobile-menu .mm-controls{display:flex;gap:10px;padding-top:14px;}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  padding:14px 28px;border-radius:var(--radius-pill);font-weight:700;font-size:14.5px;
  display:inline-flex;align-items:center;gap:8px;transition:transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 12px 28px rgba(109,40,217,.30);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(109,40,217,.38);}
.btn-outline{background:transparent;color:var(--purple);border:1.5px solid var(--purple-soft);}
.btn-outline:hover{background:var(--surface-2);}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 12px 26px rgba(15,155,142,.28);}
.btn-teal:hover{transform:translateY(-2px);}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none !important;}
.btn-sm{padding:9px 16px;font-size:12.5px;}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding-top:64px;overflow:hidden;}
.hero .container{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--teal-deep);font-size:12.5px;font-weight:700;margin-bottom:18px;
}
[data-theme="dark"] .eyebrow{color:#7FE0D2;}
.hero h1{font-size:clamp(32px,4.4vw,54px);font-weight:800;color:var(--purple);line-height:1.22;margin-bottom:18px;}
.hero h1 span{color:var(--teal);}
.hero p{font-size:17px;color:var(--text-soft);max-width:480px;margin-bottom:30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.hero-stats{display:flex;gap:26px;flex-wrap:wrap;}
.hero-stats div b{display:block;font-size:22px;color:var(--purple);font-weight:800;}
.hero-stats div span{font-size:12px;color:var(--text-faint);}

.hero-art{position:relative;height:420px;overflow:hidden;}
.hero-art svg{width:100%;height:100%;display:block;}
/* SVG <text> inherits the page's RTL direction, which flips its anchor point
   and pushes it outside the notebook shape in Arabic. Chemical notation
   should stay LTR regardless of interface language. */
.hero-art svg text{direction:ltr;unicode-bidi:bidi-override;text-anchor:start;}
.float{animation:floaty 5s ease-in-out infinite;}
.float2{animation:floaty 6.5s ease-in-out infinite;animation-delay:.6s;}
.float3{animation:floaty 4.2s ease-in-out infinite;animation-delay:1.1s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* =========================================================
   SECTION HEAD
   ========================================================= */
.section-head{text-align:center;max-width:620px;margin:0 auto 44px;}
.section-head .eyebrow{margin-inline:auto;}
.section-head h2{font-size:clamp(24px,3vw,34px);color:var(--purple);font-weight:800;margin-bottom:10px;}
.section-head p{color:var(--text-soft);font-size:15px;}

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* =========================================================
   FEATURE STRIP
   ========================================================= */
.feat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.feat-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:24px 16px;text-align:center;box-shadow:var(--shadow);transition:transform var(--dur-fast), box-shadow var(--dur-fast);
}
.feat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.feat-icon{width:50px;height:50px;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;}
.feat-icon svg{width:24px;height:24px;}
.feat-card h3{font-size:14.5px;color:var(--purple);margin-bottom:5px;}
.feat-card p{font-size:12.5px;color:var(--text-soft);}

/* =========================================================
   CARDS (generic)
   ========================================================= */
.card{
  background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--line);
  padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast);
}
.card:hover{box-shadow:var(--shadow-lg);}
.card h3{font-size:18px;color:var(--purple);margin-bottom:16px;}

.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* level card */
.progress-ring-wrap{display:flex;justify-content:center;margin-bottom:16px;}
.progress-ring{position:relative;width:130px;height:130px;}
.progress-ring svg{transform:rotate(-90deg);}
.progress-ring .bg-ring{stroke:var(--surface-2);}
.progress-ring .fg-ring{stroke:var(--purple);stroke-linecap:round;transition:stroke-dashoffset 1.4s ease;}
.progress-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.progress-label b{font-size:26px;color:var(--purple);}
.progress-label span{font-size:10.5px;color:var(--text-faint);}
.point-list{margin:4px 0 16px;font-size:13.5px;}
.point-list li{display:flex;align-items:center;gap:8px;padding:5px 0;color:var(--text-soft);}
.dot-good{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;}
.dot-bad{width:8px;height:8px;border-radius:50%;background:var(--pink);flex-shrink:0;}

/* streak badge */
.streak-badge{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--orange);
  padding:6px 12px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:700;margin-bottom:14px;
}

/* tabs */
.tabs{display:flex;gap:6px;margin-bottom:18px;background:var(--surface-2);padding:4px;border-radius:var(--radius-pill);}
.tab{flex:1;padding:9px 4px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:700;color:var(--purple);text-align:center;transition:.25s;}
.tab.active{background:var(--purple);color:#fff;}
.mini-cal{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px;margin-bottom:16px;}
.mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.mini-cal-grid span{aspect-ratio:1;border-radius:7px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--text-soft);}
.mini-cal-grid span.on{background:var(--purple);color:#fff;font-weight:700;}
.mini-cal-grid span.mid{background:var(--purple-soft);color:#fff;}

/* study-plan modal checklist rows */
.plan-item{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);
  border:1.5px solid var(--line);font-size:13px;transition:.2s;
}
.plan-item.done{background:var(--correct-bg);border-color:transparent;}
.plan-item.done .plan-item-title{text-decoration:line-through;opacity:.75;}
.plan-item input{accent-color:var(--purple);width:17px;height:17px;margin-top:2px;flex-shrink:0;}
.plan-item-title{font-weight:600;color:var(--text);display:block;}
.plan-item-range{font-size:11px;color:var(--text-faint);}

/* daily question mini widget in hub */
.quiz-q{font-size:14px;color:var(--text);margin-bottom:14px;font-weight:600;}
.quiz-options{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;}
.quiz-opt{
  display:flex;align-items:center;gap:9px;padding:10px 13px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);font-size:13px;transition:.2s;cursor:pointer;
}
.quiz-opt:hover{border-color:var(--purple-soft);}
.quiz-opt input{accent-color:var(--purple);width:16px;height:16px;}
.quiz-feedback{display:none;font-size:12.5px;font-weight:700;border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:10px;}
.quiz-feedback.correct{display:block;background:var(--correct-bg);color:var(--correct-text);}
.quiz-feedback.wrong{display:block;background:var(--wrong-bg);color:var(--wrong-text);}
.quiz-explain{font-size:12px;color:var(--text-soft);margin-top:6px;}

/* =========================================================
   PERIODIC TABLE
   ========================================================= */
.pt-controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;align-items:center;justify-content:center;}
.pt-search{
  display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--radius-pill);padding:9px 16px;min-width:220px;
}
.pt-search svg{width:16px;height:16px;color:var(--text-faint);flex-shrink:0;}
.pt-search input{background:none;border:none;outline:none;width:100%;font-size:13.5px;color:var(--text);}
.pt-filters{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.pt-filter{
  padding:8px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;
  background:var(--surface);border:1.5px solid var(--line);color:var(--text-soft);transition:.2s;
}
.pt-filter.active{background:var(--purple);color:#fff;border-color:var(--purple);}

.pt-grid{
  display:grid;grid-template-columns:repeat(9,1fr);gap:6px;max-width:900px;margin:0 auto;
}
.pt-el{
  aspect-ratio:1;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .18s var(--ease), box-shadow .18s;border:1px solid var(--glass-border);
  padding:2px;position:relative;
}
.pt-el:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-lg);z-index:2;}
.pt-el .num{position:absolute;top:2px;inset-inline-start:4px;font-size:7px;opacity:.75;}
.pt-el .sym{font-size:15px;font-weight:800;font-family:var(--font-en-head);}
.pt-el .name{font-size:6.5px;margin-top:1px;text-align:center;line-height:1.1;}
.pt-el.dim{opacity:.18;pointer-events:none;}
.pt-empty-msg{text-align:center;color:var(--text-soft);padding:30px;display:none;}

/* category colors (soft, on both themes) */
.cat-alkali{background:#FDE7D8;color:#9A4A12;}
.cat-alkaline{background:#FCEFC8;color:#8A6C09;}
.cat-transition{background:#E1EEFD;color:#1C4E8A;}
.cat-post{background:#E3F6EA;color:#1D6E3E;}
.cat-metalloid{background:#EAE6FB;color:#4B3592;}
.cat-nonmetal{background:#DFF7F1;color:#0D6E5D;}
.cat-halogen{background:#FBE4EE;color:#9A3564;}
.cat-noble{background:#F1E4FB;color:#6B2FBF;}
.cat-lanth{background:#FCE6EE;color:#A03A63;}
[data-theme="dark"] .cat-alkali{background:#3A2414;color:#F3B27C;}
[data-theme="dark"] .cat-alkaline{background:#37300F;color:#F0D06A;}
[data-theme="dark"] .cat-transition{background:#152A46;color:#8FC2F5;}
[data-theme="dark"] .cat-post{background:#123322;color:#83E0AA;}
[data-theme="dark"] .cat-metalloid{background:#241C46;color:#B7A4F2;}
[data-theme="dark"] .cat-nonmetal{background:#0F332C;color:#7DE8CE;}
[data-theme="dark"] .cat-halogen{background:#3A1B2C;color:#F2A0C4;}
[data-theme="dark"] .cat-noble{background:#2A1D4A;color:#C6A6F5;}
[data-theme="dark"] .cat-lanth{background:#341A26;color:#F2A0BE;}

.pt-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px;}
.pt-legend span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-soft);}
.pt-legend i{width:11px;height:11px;border-radius:4px;display:inline-block;}

/* element modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(16,11,34,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:900;padding:20px;
  opacity:0;pointer-events:none;transition:opacity var(--dur-fast);
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{
  background:var(--surface);border-radius:var(--radius-lg);padding:30px;max-width:420px;width:100%;
  box-shadow:var(--shadow-lg);transform:scale(.92) translateY(10px);transition:transform var(--dur-fast) var(--ease);
  position:relative;max-height:85vh;overflow-y:auto;
}
.modal-overlay.open .modal{transform:scale(1) translateY(0);}
.modal-close{position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;}
.modal .el-sym{font-size:44px;font-weight:800;font-family:var(--font-en-head);}
.modal .el-name{font-size:19px;font-weight:700;color:var(--purple);margin-top:4px;}
.modal .el-meta{display:flex;gap:16px;margin:16px 0;flex-wrap:wrap;}
.modal .el-meta div{font-size:12px;color:var(--text-faint);}
.modal .el-meta div b{display:block;font-size:15px;color:var(--text);font-weight:700;}
.modal .el-fact{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px;font-size:13.5px;color:var(--text-soft);margin-top:8px;}

/* =========================================================
   DAILY-LIFE CHEMISTRY CARDS
   ========================================================= */
.life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.life-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);}
.life-icon{width:48px;height:48px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.life-icon svg{width:24px;height:24px;color:var(--purple);}
.life-card h4{font-size:15.5px;color:var(--purple);margin-bottom:8px;}
.life-card p{font-size:13px;color:var(--text-soft);margin-bottom:14px;}
.life-card button{font-size:12.5px;font-weight:700;color:var(--teal-deep);}
[data-theme="dark"] .life-card button{color:#7FE0D2;}
.life-more{display:none;font-size:12.5px;color:var(--text-soft);margin-top:-6px;margin-bottom:14px;line-height:1.7;}
.life-more.show{display:block;}

/* =========================================================
   MINI LAB
   ========================================================= */
.lab-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;}
.lab-stage{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:18px;
}
.lab-beaker{width:160px;height:200px;position:relative;}
.lab-beaker svg{width:100%;height:100%;}
#labLiquid{transition:fill 0.5s var(--ease);}
#labBubbleGroup circle{animation:labBubble 3s ease-in infinite;}
@keyframes labBubble{
  0%{opacity:0;transform:translateY(0);}
  15%{opacity:.8;}
  100%{opacity:0;transform:translateY(-70px);}
}
.lab-controls{width:100%;display:flex;flex-direction:column;gap:14px;}
.lab-row{display:flex;align-items:center;gap:10px;}
.lab-row label{font-size:12.5px;color:var(--text-soft);width:90px;flex-shrink:0;}
.lab-row input[type=range]{flex:1;accent-color:var(--purple);}
.lab-swatches{display:flex;gap:8px;}
.lab-swatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);cursor:pointer;transition:.2s;}
.lab-swatch.selected{border-color:var(--purple);transform:scale(1.12);}
.lab-readout{font-size:12.5px;color:var(--text-soft);background:var(--surface-2);border-radius:var(--radius-sm);padding:12px;}
.lab-readout b{color:var(--purple);}
.lab-disclaimer{font-size:11.5px;color:var(--text-faint);display:flex;gap:6px;align-items:flex-start;margin-top:6px;}
.lab-disclaimer svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;}

/* =========================================================
   ACHIEVEMENTS
   ========================================================= */
.ach-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.ach-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px 14px;text-align:center;transition:.25s;position:relative;
}
.ach-card.locked{opacity:.45;}
.ach-icon{width:46px;height:46px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.ach-icon svg{width:22px;height:22px;color:var(--purple);}
.ach-card.unlocked .ach-icon{background:linear-gradient(135deg,var(--teal),var(--purple));}
.ach-card.unlocked .ach-icon svg{color:#fff;}
.ach-card h4{font-size:12.5px;color:var(--purple);margin-bottom:4px;}
.ach-card p{font-size:10.5px;color:var(--text-faint);}
.points-banner{
  display:flex;align-items:center;justify-content:center;gap:10px;background:var(--surface-2);
  border-radius:var(--radius-pill);padding:10px 20px;margin:0 auto 30px;width:fit-content;font-size:13.5px;font-weight:700;color:var(--purple);
}

/* =========================================================
   RANDOM FACT
   ========================================================= */
.fact-box{
  max-width:640px;margin:0 auto;background:linear-gradient(135deg,var(--purple),var(--teal));
  border-radius:var(--radius-lg);padding:36px;text-align:center;color:#fff;box-shadow:var(--shadow-lg);
}
.fact-box p{font-size:16px;margin:16px 0 22px;min-height:52px;}
.fact-box .btn{background:#fff;color:var(--purple);}

/* =========================================================
   QUIZ CHALLENGE (full section)
   ========================================================= */
.quiz-panel{max-width:640px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow);}
.quiz-progress-bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-bottom:22px;}
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--purple));width:0%;transition:width .4s var(--ease);}
.quiz-result{display:none;text-align:center;}
.quiz-result.show{display:block;}
.quiz-result .score{font-size:44px;font-weight:800;color:var(--purple);}
.quiz-review{text-align:start;margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.quiz-review-item{font-size:12.5px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);}
.quiz-review-item.wrong-item{background:var(--wrong-bg);color:var(--wrong-text);}
.quiz-review-item.correct-item{background:var(--correct-bg);color:var(--correct-text);}

/* =========================================================
   SURVEY
   ========================================================= */
.survey-panel{max-width:680px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:13px;font-weight:700;color:var(--text);}
.form-field .optional{font-weight:400;color:var(--text-faint);font-size:11.5px;}
.form-field input[type=text],.form-field input[type=email],.form-field select,.form-field textarea{
  padding:11px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--surface);
  font-size:13.5px;color:var(--text);transition:.2s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--purple);}
.form-field textarea{resize:vertical;min-height:90px;}
.form-error{font-size:11.5px;color:var(--wrong-text);display:none;}
.form-field.invalid input,.form-field.invalid select,.form-field.invalid textarea{border-color:var(--wrong-text);}
.form-field.invalid .form-error{display:block;}

.rating-row{display:flex;gap:8px;}
.rating-star{width:32px;height:32px;color:var(--line);transition:.15s;cursor:pointer;}
.rating-star.active{color:var(--yellow);}

.consent-row{display:flex;align-items:flex-start;gap:10px;margin:18px 0;font-size:12.5px;color:var(--text-soft);}
.consent-row input{margin-top:3px;accent-color:var(--purple);}

.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;}

.survey-privacy{font-size:11.5px;color:var(--text-faint);margin-top:14px;line-height:1.7;}
.survey-status{display:none;margin-top:18px;padding:14px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;}
.survey-status.show{display:block;}
.survey-status.info{background:var(--surface-2);color:var(--purple);}
.survey-status.success{background:var(--correct-bg);color:var(--correct-text);}
.survey-status.error{background:var(--wrong-bg);color:var(--wrong-text);}

/* =========================================================
   CONFETTI CANVAS
   ========================================================= */
#confettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:1500;}

/* =========================================================
   TOAST (achievement unlocked)
   ========================================================= */
.toast{
  position:fixed;bottom:24px;inset-inline-end:24px;z-index:1600;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px 18px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;
  transform:translateY(120%);transition:transform .4s var(--ease);max-width:300px;
}
.toast.show{transform:translateY(0);}
.toast .toast-icon{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--purple));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toast .toast-icon svg{width:18px;height:18px;color:#fff;}
.toast b{display:block;font-size:13px;color:var(--purple);}
.toast span{font-size:11.5px;color:var(--text-soft);}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--surface);border-top:1px solid var(--line);padding:60px 0 24px;position:relative;z-index:2;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px;}
.foot-grid h5{font-size:14px;color:var(--purple);margin-bottom:14px;}
.foot-grid li{padding:5px 0;}
.foot-grid a{font-size:13px;color:var(--text-soft);}
.foot-grid a:hover{color:var(--purple);}
.foot-about p{font-size:13px;color:var(--text-soft);margin:12px 0 16px;max-width:280px;}
.social-row{display:flex;gap:9px;}
.social-row a{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--purple);}
.social-row a:hover{background:var(--purple);color:#fff;}
.foot-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;font-size:12px;color:var(--text-faint);flex-wrap:wrap;gap:8px;}

/* =========================================================
   VISUALLY HIDDEN (a11y helper)
   ========================================================= */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-60px;inset-inline-start:12px;background:var(--purple);color:#fff;
  padding:10px 16px;border-radius:var(--radius-sm);z-index:2000;transition:top .2s;
}
.skip-link:focus{top:12px;}

/* =========================================================
   JOURNEY PAGE — "Your Chemistry Journey" (journey.html)
   ========================================================= */
.station-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:36px;}
.station-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:16px 10px;border-radius:var(--radius-md);border:1.5px solid var(--line);
  background:var(--surface);transition:.25s;
}
.station-btn:hover{border-color:var(--purple-soft);}
.station-btn.active{background:var(--purple);border-color:var(--purple);}
.station-btn.active .station-num{background:#fff;color:var(--purple);}
.station-btn.active .station-text b, .station-btn.active .station-text span{color:#fff;}
.station-num{
  width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--purple);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;
}
.station-text{display:flex;flex-direction:column;gap:2px;}
.station-text b{font-size:12.5px;color:var(--purple);}
.station-text span{font-size:10.5px;color:var(--text-faint);}

.station-panel{display:none;}
.station-panel.active{display:block;animation:fadeIn .4s var(--ease);}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.jp-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.jp-badge{
  display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--purple);font-size:12px;font-weight:700;
}
.jp-badge-muted{color:var(--text-soft);}
.jp-badge-verified{background:var(--correct-bg);color:var(--correct-text);}
.jp-badge-needs{background:var(--wrong-bg);color:var(--wrong-text);}
.jp-badge-grad{background:#E1EEFD;color:#1C4E8A;}
[data-theme="dark"] .jp-badge-grad{background:#152A46;color:#8FC2F5;}
.jp-badge-none{background:var(--surface-2);color:var(--text-faint);}

.jp-desc{color:var(--text-soft);font-size:14px;margin-bottom:18px;line-height:1.8;}
.jp-subhead{font-size:14px;color:var(--purple);margin-bottom:10px;}
.jp-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.jp-chip{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:7px 13px;font-size:12px;color:var(--text);
}
.jp-chip-sm{padding:5px 10px;font-size:11px;}
.jp-callout{
  background:var(--surface-2);border-radius:var(--radius-md);padding:16px 18px;margin-bottom:14px;
}
.jp-callout b{display:block;font-size:12.5px;color:var(--purple);margin-bottom:6px;}
.jp-callout p{font-size:13px;color:var(--text-soft);}
.jp-callout-warn{background:var(--wrong-bg);}
.jp-callout-warn b{color:var(--wrong-text);}
.jp-callout-warn p{color:var(--wrong-text);}
.jp-callout-note{background:var(--surface-2);}
.jp-subcard{padding:20px 0;border-bottom:1px dashed var(--line);}
.jp-subcard:last-child{border-bottom:none;}

.jp-fields-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px;}
.jp-field-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;}
.jp-field-card h4{font-size:14.5px;color:var(--purple);margin-bottom:8px;}
.jp-field-card p{font-size:12.5px;color:var(--text-soft);margin-bottom:12px;}
.jp-field-note{font-size:11.5px;color:var(--text-faint);font-style:italic;}
.jp-compare-box{background:var(--surface-2);border-radius:var(--radius-lg);padding:24px;}
.jp-compare-item{font-size:13.5px;color:var(--text);padding:8px 0;border-bottom:1px dashed var(--line);}
.jp-compare-item:last-child{border-bottom:none;}

.jp-last-reviewed{font-size:12px;color:var(--text-faint);text-align:center;margin-bottom:10px;}
.jp-disclaimer{
  background:var(--surface-2);border-radius:var(--radius-md);padding:14px 18px;
  text-align:center;font-size:12.5px;color:var(--text-soft);margin-bottom:26px;
}
.jp-map-title{font-size:13px;color:var(--purple);font-weight:700;margin-bottom:4px;text-align:center;}
.jp-map-note{font-size:11px;color:var(--text-faint);text-align:center;margin-bottom:14px;}
.region-map{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px;}
.region-chip{
  padding:8px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;
  background:var(--surface);border:1.5px solid var(--line);color:var(--text-soft);transition:.2s;
}
.region-chip.active{background:var(--purple);color:#fff;border-color:var(--purple);}

.jp-uni-controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;align-items:center;justify-content:center;}
.jp-uni-controls select{
  padding:9px 14px;border-radius:var(--radius-pill);border:1.5px solid var(--line);
  background:var(--surface);color:var(--text);font-size:12.5px;
}
.jp-uni-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.jp-uni-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;}
.jp-uni-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px;}
.jp-uni-head h4{font-size:14.5px;color:var(--purple);}
.jp-uni-prev{font-size:11px;color:var(--text-faint);margin-top:2px;}
.jp-uni-city{font-size:12px;color:var(--text-soft);margin-top:2px;}
.jp-uni-programs{padding-inline-start:18px;margin-bottom:10px;}
.jp-uni-programs li{font-size:12.5px;color:var(--text-soft);padding:2px 0;}
.jp-uni-note{font-size:11.5px;color:var(--text-faint);font-style:italic;margin:8px 0;}
.jp-uni-empty{text-align:center;color:var(--text-soft);padding:30px;display:none;}
.jp-no-standalone{margin-top:40px;background:var(--surface-2);border-radius:var(--radius-lg);padding:24px;}
.jp-no-standalone h4{font-size:14.5px;color:var(--purple);margin-bottom:10px;}
.jp-no-standalone ul{columns:2;padding-inline-start:18px;}
.jp-no-standalone li{font-size:12.5px;color:var(--text-soft);padding:4px 0;}
.jp-no-standalone p{font-size:11.5px;color:var(--text-faint);margin-top:12px;}

@media (max-width:900px){
  .station-nav{grid-template-columns:repeat(3,1fr);}
  .jp-fields-grid{grid-template-columns:repeat(2,1fr);}
  .jp-uni-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .station-nav{grid-template-columns:repeat(2,1fr);}
  .jp-fields-grid{grid-template-columns:1fr;}
  .jp-no-standalone ul{columns:1;}
}

/* =========================================================
   LAWS LAB PAGE — "قوانين ومعادلات الكيمياء" (laws.html)
   ========================================================= */
.bank-statement{
  max-width:620px;margin:14px auto 0;padding:12px 18px;border-radius:var(--radius-md);
  background:var(--surface-2);color:var(--text-soft);font-size:12.5px;text-align:center;
}
.track-tabs{display:flex;gap:10px;max-width:640px;margin:0 auto 34px;background:var(--surface-2);padding:5px;border-radius:var(--radius-pill);}
.track-tab{flex:1;padding:12px 14px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;color:var(--purple);text-align:center;transition:.25s;}
.track-tab.active{background:var(--purple);color:#fff;}
.track-panel{display:none;}
.track-panel.active{display:block;animation:fadeIn .4s var(--ease);}

.law-controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:22px;}
.law-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:10px;}
.law-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px;cursor:pointer;transition:.2s;text-align:start;
}
.law-card:hover{border-color:var(--purple-soft);transform:translateY(-3px);}
.law-card h4{font-size:14px;color:var(--purple);margin-bottom:4px;}
.law-card .law-formula{font-size:12.5px;color:var(--text-soft);font-family:'Inter',monospace;margin-bottom:10px;}
.law-card .law-cat-tag{font-size:10.5px;color:var(--text-faint);background:var(--surface-2);padding:3px 10px;border-radius:var(--radius-pill);display:inline-block;}
.law-card.mastered{border-color:var(--correct-text);}
.law-card .mastered-badge{float:inline-end;color:var(--correct-text);font-size:11px;font-weight:700;}

/* workspace */
.law-workspace{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);margin-top:10px;}
.workspace-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:10px;}
.workspace-head h3{font-size:19px;color:var(--purple);}
.workspace-close{width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ws-formula-display{
  font-size:20px;text-align:center;padding:16px;background:var(--surface-2);border-radius:var(--radius-md);
  margin-bottom:18px;font-family:'Inter',monospace;color:var(--purple-deep);
}
[data-theme="dark"] .ws-formula-display{color:var(--purple-soft);}
.var-table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:12.5px;}
.var-table th{text-align:start;color:var(--text-faint);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);}
.var-table td{padding:8px;border-bottom:1px dashed var(--line);color:var(--text);}
.var-table .sym-cell{font-family:'Inter',monospace;font-weight:700;color:var(--purple);}

.mistake-list{padding-inline-start:18px;margin-top:6px;}
.mistake-list li{font-size:12.5px;color:var(--text-soft);padding:4px 0;}

.calc-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.calc-row label{font-size:12.5px;color:var(--text-soft);min-width:110px;}
.calc-row input[type=number], .calc-row select{
  padding:9px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--surface);
  color:var(--text);font-size:13px;flex:1;min-width:100px;
}
.calc-target-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.calc-target-btn{padding:8px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--line);font-size:12.5px;font-weight:700;color:var(--text-soft);}
.calc-target-btn.active{background:var(--purple);color:#fff;border-color:var(--purple);}
.calc-result-box{background:var(--correct-bg);color:var(--correct-text);border-radius:var(--radius-md);padding:16px;font-size:15px;font-weight:700;text-align:center;margin-top:14px;display:none;}
.calc-result-box.show{display:block;}

.diff-picker{display:flex;gap:8px;margin-bottom:16px;}
.diff-btn{flex:1;padding:9px;border-radius:var(--radius-sm);border:1.5px solid var(--line);font-size:12px;font-weight:700;color:var(--text-soft);text-align:center;}
.diff-btn.active{background:var(--purple-soft);color:#fff;border-color:var(--purple-soft);}

.practice-given-box{background:var(--surface-2);border-radius:var(--radius-md);padding:16px;margin-bottom:16px;font-size:13.5px;}
.practice-given-box b{color:var(--purple);}
.hint-row{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap;}
.hint-panel{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;color:var(--text-soft);margin-bottom:12px;display:none;}
.hint-panel.show{display:block;}
.feedback-box{border-radius:var(--radius-md);padding:16px;margin:14px 0;font-size:13.5px;display:none;}
.feedback-box.show{display:block;}
.feedback-box.good{background:var(--correct-bg);color:var(--correct-text);}
.feedback-box.bad{background:var(--wrong-bg);color:var(--wrong-text);}
.feedback-box.neutral{background:var(--surface-2);color:var(--text);}
.full-solution-box{background:var(--surface-2);border-radius:var(--radius-md);padding:16px;margin-top:12px;font-size:13px;color:var(--text-soft);}
.full-solution-box ol{padding-inline-start:20px;}
.full-solution-box li{padding:3px 0;}

/* balancer */
.balancer-eq-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:20px 0;font-size:16px;}
.balancer-species{display:flex;align-items:center;gap:8px;background:var(--surface-2);padding:10px 14px;border-radius:var(--radius-md);}
.balancer-species input{
  width:44px;text-align:center;border-radius:var(--radius-sm);border:1.5px solid var(--line);
  padding:6px;font-size:14px;font-weight:700;color:var(--purple);
}
.balancer-formula{font-family:'Inter',monospace;font-weight:700;}
.balancer-state{font-size:10px;color:var(--text-faint);}
.balancer-arrow{font-size:20px;color:var(--text-faint);}
.balancer-plus{font-size:16px;color:var(--text-faint);}
.atom-counts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0;}
.atom-chip{
  display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:700;background:var(--wrong-bg);color:var(--wrong-text);
}
.atom-chip.balanced{background:var(--correct-bg);color:var(--correct-text);}
.atom-chip .chip-icon{font-size:11px;}

.eq-topic-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;margin-bottom:14px;}
.eq-topic-card h4{font-size:14.5px;color:var(--purple);margin-bottom:8px;}
.eq-topic-card p{font-size:13px;color:var(--text-soft);margin-bottom:8px;}
.eq-topic-card .eq-example{font-size:12.5px;background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px;font-family:'Inter',monospace;}

.quiz-gen-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;}
.quiz-gen-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.quiz-gen-row select, .quiz-gen-row input[type=number]{
  padding:9px 12px;border-radius:var(--radius-pill);border:1.5px solid var(--line);background:var(--surface);font-size:12.5px;
}
.error-tally{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.error-tally span{background:var(--surface-2);border-radius:var(--radius-pill);padding:6px 12px;font-size:11.5px;color:var(--text-soft);}

.law-ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;}

.settings-privacy-note{background:var(--surface-2);color:var(--text-soft);font-size:12px;padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:14px;}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}

/* flashcards */
.flip-card{width:100%;max-width:420px;height:220px;margin:0 auto;perspective:1200px;cursor:pointer;}
.flip-card-inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d;}
.flip-card.flipped .flip-card-inner{transform:rotateY(180deg);}
.flip-card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;font-size:16px;font-weight:700;box-shadow:var(--shadow);}
.flip-card-front{background:var(--surface);border:1px solid var(--line);color:var(--text);}
.flip-card-back{background:var(--purple);color:#fff;transform:rotateY(180deg);}
.flashcard-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.flashcard-stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
@media (prefers-reduced-motion: reduce){ .flip-card-inner{transition:none;} }
.reduced-motion .flip-card-inner{transition:none;}

/* notebook */
.notebook-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px;margin-bottom:12px;}
.notebook-note h4{font-size:14px;color:var(--purple);margin-bottom:4px;}
.notebook-note p{font-size:13px;color:var(--text-soft);white-space:pre-wrap;}
.notebook-note-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:var(--text-faint);}
.notebook-tag{background:var(--surface-2);border-radius:var(--radius-pill);padding:3px 10px;font-size:10.5px;}
.notebook-note-actions{display:flex;gap:8px;}
.notebook-note-actions button{font-size:11px;color:var(--text-faint);}
.notebook-note-actions button:hover{color:var(--purple);}

/* mistake coach */
.error-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.error-bar-label{width:150px;font-size:12px;color:var(--text-soft);flex-shrink:0;}
.error-bar-track{flex:1;height:10px;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden;}
.error-bar-fill{height:100%;background:var(--purple);border-radius:var(--radius-pill);}
.error-bar-count{width:28px;text-align:end;font-size:12px;font-weight:700;color:var(--text);flex-shrink:0;}
.trend-chip{font-size:11px;padding:3px 8px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-soft);}
.trend-chip.up{background:var(--wrong-bg);color:var(--wrong-text);}
.trend-chip.down{background:var(--correct-bg);color:var(--correct-text);}

/* tools hub */
.tool-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;text-align:center;transition:.2s;}
.tool-card:hover{transform:translateY(-3px);border-color:var(--purple-soft);}
.tool-card h4{font-size:14.5px;color:var(--purple);margin:10px 0 6px;}
.tool-card p{font-size:12.5px;color:var(--text-soft);margin-bottom:14px;}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:700px){ .tools-grid{grid-template-columns:1fr;} }

/* daily challenge calendar */
.cal-dot{display:inline-block;width:14px;height:14px;border-radius:4px;margin:2px;background:var(--surface-2);}
.cal-dot.done-correct{background:var(--correct-text);}
.cal-dot.done-wrong{background:var(--wrong-text);}
.streak-label{text-align:center;font-size:14px;font-weight:700;color:var(--purple);margin-bottom:10px;}

/* achievement profile */
.profile-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.profile-stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px;text-align:center;}
.profile-stat-card .stat-num{font-size:22px;font-weight:800;color:var(--purple);}
.profile-stat-card .stat-label{font-size:11px;color:var(--text-faint);margin-top:4px;}
@media (max-width:700px){ .profile-stat-grid{grid-template-columns:repeat(2,1fr);} }
@media print{
  header, footer, .modal-overlay, #settingsOpenBtn, .back-link, #profilePrintBtn{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* gas laws simulator */
.gas-container{width:120px;height:220px;border:3px solid var(--text-soft);border-radius:0 0 10px 10px;position:relative;margin:0 auto 20px;overflow:hidden;background:var(--surface-2);}
.gas-piston{position:absolute;bottom:0;left:0;right:0;background:var(--purple-soft);opacity:.55;transition:height .3s ease;}

/* pH simulator */
.ph-meter-track{width:100%;height:26px;border-radius:var(--radius-pill);background:var(--surface-2);position:relative;margin:14px 0;overflow:hidden;}
.ph-meter-fill{position:absolute;inset-inline-start:0;top:0;bottom:0;transition:width .2s, background .2s;border-radius:var(--radius-pill);}

/* molecule builder */
#moleculeWorkspace{position:relative;width:100%;height:280px;border:2px dashed var(--line);border-radius:var(--radius-md);background:var(--surface-2);margin:14px 0;overflow:hidden;}
.molecule-atom{
  position:absolute;width:40px;height:40px;border-radius:50%;background:var(--purple);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  transform:translate(-50%,-50%);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.molecule-atom.selected{outline:3px solid var(--teal);}
#atomPalette{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;}

/* =========================================================
   LAB SAFETY PAGE
   ========================================================= */
.safety-disclaimer{
  background:var(--wrong-bg);color:var(--wrong-text);border-radius:var(--radius-md);
  padding:16px 20px;font-size:13px;line-height:1.8;max-width:760px;margin:0 auto 40px;text-align:center;
  border:1.5px solid var(--wrong-text);
}
.safety-section{margin-bottom:56px;}
.safety-section h2{font-size:20px;color:var(--purple);margin-bottom:6px;}
.safety-rule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px;}
.safety-rule-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;font-size:13px;color:var(--text);display:flex;gap:10px;align-items:flex-start;}
.safety-rule-card .rule-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--purple-soft);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}

/* PPE diagram */
.ppe-diagram-wrap{position:relative;max-width:280px;margin:20px auto;}
.ppe-hotspot{
  position:absolute;width:30px;height:30px;border-radius:50%;background:var(--purple);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;cursor:pointer;border:3px solid var(--surface);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.ppe-hotspot:hover{transform:scale(1.12);}

/* GHS pictograms */
.ghs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;}
.ghs-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;text-align:center;cursor:pointer;transition:.2s;}
.ghs-card:hover{transform:translateY(-3px);border-color:var(--purple-soft);}
.ghs-diamond{width:72px;height:72px;margin:0 auto 10px;}
.ghs-card h4{font-size:13px;color:var(--text);}

/* SDS */
.sds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0;}
.sds-chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;font-size:11.5px;text-align:center;color:var(--text-soft);}
.sds-chip.key{border-color:var(--purple);color:var(--purple);font-weight:700;}
.sds-drop-target{background:var(--surface-2);border:2px dashed var(--line);border-radius:var(--radius-sm);padding:10px;font-size:11px;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center;}
.sds-drop-target.matched{border-color:var(--correct-text);background:var(--correct-bg);border-style:solid;}
.sds-drag-chip{background:var(--purple);color:#fff;border-radius:var(--radius-pill);padding:8px 16px;font-size:12px;cursor:grab;display:inline-block;margin:4px;}

/* emergency accordion */
.emergency-accordion-item{border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden;}
.emergency-accordion-head{padding:14px 18px;background:var(--surface);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--text);}
.emergency-accordion-body{padding:0 18px;max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--surface-2);}
.emergency-accordion-item.open .emergency-accordion-body{max-height:600px;padding:14px 18px;}

/* equipment map */
.equipment-map{position:relative;width:100%;max-width:560px;height:320px;margin:20px auto;background:var(--surface-2);border-radius:var(--radius-md);border:2px dashed var(--line);}
.equipment-marker{
  position:absolute;width:34px;height:34px;border-radius:8px;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.equipment-marker.correct{background:var(--correct-text);}

/* badge */
.safety-badge{width:110px;height:110px;margin:0 auto 14px;}

.reveal-hidden{opacity:0;}

@media (max-width:900px){
  .law-grid{grid-template-columns:repeat(2,1fr);}
  .law-ach-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .law-grid{grid-template-columns:1fr;}
  .law-ach-grid{grid-template-columns:1fr;}
  .track-tabs{flex-direction:column;}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .hero .container{grid-template-columns:1fr;}
  .hero-art{height:300px;order:-1;}
  .feat-grid{grid-template-columns:repeat(3,1fr);}
  .hub-grid{grid-template-columns:1fr;}
  .life-grid{grid-template-columns:repeat(2,1fr);}
  .ach-grid{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .lab-wrap{grid-template-columns:1fr;}
  .pt-grid{grid-template-columns:repeat(9,1fr);}
}
@media (max-width:760px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .hero h1{font-size:32px;}
  .feat-grid{grid-template-columns:repeat(2,1fr);}
  .life-grid{grid-template-columns:1fr;}
  .ach-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr;gap:26px;}
  section{padding:56px 0;}
  .pt-grid{grid-template-columns:repeat(6,1fr);}
  .pt-el .name{display:none;}
  .form-grid{grid-template-columns:1fr;}
  .quiz-panel,.survey-panel{padding:22px;}
  .toast{inset-inline:12px;max-width:none;}
}
@media (max-width:420px){
  .pt-grid{grid-template-columns:repeat(5,1fr);}
}