/* ============================================================
   SINTEZ — AI Education Platform
   Premium dark / graphite + emerald theme
   ============================================================ */

:root {
  --bg: #04050a;
  --bg-2: #07080f;
  --graphite: #0a0d16;
  --graphite-2: #0e1320;
  --line: rgba(150, 190, 255, 0.08);
  --line-strong: rgba(160, 200, 255, 0.16);

  /* accent kept under --emerald* names for backward-compat, now electric cyan */
  --emerald: #5ec8ff;
  --emerald-2: #2b9cff;
  --emerald-deep: #0a3a66;
  --mint: #bfe9ff;
  --cream: #e7d8bd;

  --txt: #eef4ff;
  --txt-soft: #9fb0c9;
  --txt-mute: #5f7090;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --glow: 0 0 60px -10px rgba(94, 200, 255, 0.5);

  --maxw: 1240px;
  --font: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* ambient background layers */
.bg-fx {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(94, 200, 255, 0.14), transparent 60%),
    radial-gradient(800px 500px at 95% 8%, rgba(20, 90, 150, 0.10), transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, rgba(94, 200, 255, 0.08), transparent 55%),
    var(--bg);
}
#fx-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.65; }
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(94, 200, 255, 0.3); color: #fff; }

a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ============================ NAV ============================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(7, 9, 11, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 10px; position: relative;
  background: conic-gradient(from 200deg, var(--emerald), var(--emerald-deep), var(--mint), var(--emerald));
  box-shadow: var(--glow);
}
.brand .logo::after {
  content: ""; position: absolute; inset: 7px; border-radius: 5px;
  background: var(--bg);
}
.brand .logo::before {
  content: ""; position: absolute; inset: 13px; border-radius: 50%;
  background: var(--emerald); box-shadow: 0 0 14px var(--emerald); z-index: 2;
}
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a { color: var(--txt-soft); font-size: 14.5px; font-weight: 500; transition: color .25s; }
.nav-links a:hover { color: var(--txt); }
.nav-cta { display: flex; gap: 12px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
  padding: 12px 22px; border-radius: 100px; border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .3s, background .3s, border-color .3s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--txt); }
.btn-ghost:hover { border-color: var(--emerald); color: var(--mint); }
.btn-primary {
  background: linear-gradient(135deg, var(--emerald), var(--emerald-2));
  color: #021018; box-shadow: 0 10px 30px -10px rgba(94, 200, 255, 0.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -12px rgba(94, 200, 255, 0.75); }
.btn-lg { padding: 16px 30px; font-size: 16px; }

.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.burger span { width: 24px; height: 2px; background: var(--txt); border-radius: 2px; transition: .3s; }

/* ============================ HERO ============================ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 90px; perspective: 1400px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; width: 100%; }

.tagpill {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 100px;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.02);
  font-size: 13px; color: var(--txt-soft); margin-bottom: 26px;
}
.tagpill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 10px var(--emerald); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.hero h1 {
  font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 800; margin-bottom: 24px;
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--mint), var(--emerald) 45%, var(--emerald-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--txt-soft); max-width: 520px; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hstat .num { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.hstat .num .grad { background: linear-gradient(120deg, var(--mint), var(--emerald)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hstat .lbl { font-size: 13px; color: var(--txt-mute); }

/* 3D hero visual */
.hero-visual { position: relative; height: 520px; transform-style: preserve-3d; }
.orbit-core {
  position: absolute; inset: 0; margin: auto; width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--mint), var(--emerald) 35%, var(--emerald-deep) 75%, #02121f);
  box-shadow: 0 0 90px -10px rgba(94,200,255,0.7), inset -20px -30px 60px rgba(0,0,0,0.6);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: floaty 7s ease-in-out infinite;
}
.orbit-core::after {
  content:""; position:absolute; inset:-2px; border-radius:50%;
  background: radial-gradient(circle at 70% 80%, rgba(255,255,255,0.25), transparent 40%);
}
@keyframes floaty { 0%,100%{transform:translate(-50%,-52%)} 50%{transform:translate(-50%,-48%)} }

.ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid rgba(94,200,255,0.25); transform-style: preserve-3d;
}
.ring.r1 { width: 320px; height: 320px; margin: -160px 0 0 -160px; animation: spin 16s linear infinite; transform: rotateX(72deg); }
.ring.r2 { width: 410px; height: 410px; margin: -205px 0 0 -205px; animation: spin 24s linear infinite reverse; transform: rotateX(72deg) rotateY(20deg); border-color: rgba(191,233,255,0.18); }
.ring.r3 { width: 500px; height: 500px; margin: -250px 0 0 -250px; animation: spin 34s linear infinite; transform: rotateX(80deg); border-style: dashed; border-color: rgba(255,255,255,0.07); }
@keyframes spin { to { transform: rotateX(72deg) rotateZ(360deg); } }
.ring.r2 { animation-name: spin2 } @keyframes spin2 { to { transform: rotateX(72deg) rotateY(20deg) rotateZ(-360deg);} }
.ring.r3 { animation-name: spin3 } @keyframes spin3 { to { transform: rotateX(80deg) rotateZ(360deg);} }

.node {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 16px var(--emerald);
}

.float-card {
  position: absolute; padding: 14px 16px; border-radius: 16px; backdrop-filter: blur(14px);
  background: rgba(17,22,26,0.7); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 11px; font-size: 13px; animation: floaty 6s ease-in-out infinite;
}
.float-card .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(94,200,255,0.14); color: var(--mint); font-size: 17px; }
.float-card .fc-t { font-weight: 700; font-size: 14px; }
.float-card .fc-s { color: var(--txt-mute); font-size: 11.5px; }
.fc1 { top: 6%; left: -4%; animation-delay: .2s; }
.fc2 { bottom: 10%; right: -6%; animation-delay: 1.2s; }
.fc3 { bottom: 28%; left: -8%; animation-delay: .7s; }

/* ============================ SECTION BASE ============================ */
section { position: relative; padding: 120px 0; }
.eyebrow { color: var(--emerald); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 16px; }
.section-head { max-width: 680px; margin-bottom: 60px; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 50px); letter-spacing: -0.03em; line-height: 1.08; font-weight: 800; }
.section-head p { color: var(--txt-soft); font-size: 17px; margin-top: 18px; }
.center { margin-left: auto; margin-right: auto; text-align: center; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(46px) rotateX(8deg); transform-origin: center bottom; transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s } .reveal.d2 { transition-delay: .16s } .reveal.d3 { transition-delay: .24s } .reveal.d4 { transition-delay: .32s }

/* ============================ MARQUEE ============================ */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: marq 28s linear infinite; }
.marquee-track span { font-size: 24px; font-weight: 700; color: var(--txt-mute); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 60px; }
.marquee-track span::after { content: "✦"; color: var(--emerald); font-size: 16px; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ============================ COURSES ============================ */
.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.course-card {
  position: relative; padding: 28px; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line); transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .5s;
  transform-style: preserve-3d;
}
.course-card::before {
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background: radial-gradient(500px 200px at var(--mx,50%) var(--my,0%), rgba(94,200,255,0.16), transparent 60%);
}
.course-card:hover { transform: translateY(-8px); border-color: rgba(94,200,255,0.4); box-shadow: 0 40px 80px -40px rgba(94,200,255,0.4); }
.course-card:hover::before { opacity: 1; }
.cc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 60px; }
.cc-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
  background: rgba(94,200,255,0.12); border: 1px solid rgba(94,200,255,0.25); color: var(--mint); }
.cc-level { font-size: 11.5px; color: var(--txt-mute); border: 1px solid var(--line-strong); padding: 5px 11px; border-radius: 100px; }
.cc-card-h { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.course-card p { color: var(--txt-soft); font-size: 14px; margin-bottom: 22px; }
.cc-meta { display: flex; gap: 18px; font-size: 12.5px; color: var(--txt-mute); border-top: 1px solid var(--line); padding-top: 18px; }
.cc-meta b { color: var(--txt); }
/* equal-height cards + footer pinned to the bottom (fix uneven card levels) */
.course-card { display: flex; flex-direction: column; }
.course-card .cc-top { margin-bottom: 26px; }
.course-card p, .course-card .cc-desc { flex: 0 0 auto; }
.course-card .cc-meta { margin-top: auto; }
.cc-price { margin-left: auto; color: var(--mint); font-weight: 700; }

/* ============================ FEATURES ============================ */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feat {
  padding: 26px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.02);
  border: 1px solid var(--line); transition: transform .4s, background .4s;
}
.feat:hover { transform: translateY(-5px); background: rgba(94,200,255,0.05); }
.feat .ic { font-size: 26px; margin-bottom: 16px; }
.feat h3 { font-size: 17px; margin-bottom: 8px; letter-spacing: -0.01em; }
.feat p { font-size: 13.5px; color: var(--txt-soft); }

/* ============================ PROCESS (3d steps) ============================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { position: relative; padding: 30px 24px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); }
.step .n { font-size: 52px; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(180deg, var(--emerald), transparent); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 14px; }
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--txt-soft); }

/* ============================ MENTORS ============================ */
.mentors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mentor { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--graphite); transition: transform .4s, border-color .4s; }
.mentor:hover { transform: translateY(-6px); border-color: rgba(94,200,255,0.35); }
.mentor .avatar { height: 220px; position: relative; background: linear-gradient(160deg, var(--emerald-deep), var(--graphite)); display: grid; place-items: center; }
.mentor .avatar .mono { font-size: 64px; font-weight: 800; color: rgba(255,255,255,0.85); letter-spacing: -0.04em; }
.mentor .avatar::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 20%, rgba(94,200,255,0.3), transparent 60%); }
.mentor .m-body { padding: 20px; }
.mentor h3 { font-size: 17px; }
.mentor .role { color: var(--mint); font-size: 13px; margin: 4px 0 10px; }
.mentor .m-body p { font-size: 13px; color: var(--txt-soft); }

/* ============================ PRICING ============================ */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { position: relative; padding: 34px 30px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); display: flex; flex-direction: column; }
.plan.featured { border-color: rgba(94,200,255,0.5); box-shadow: var(--glow); transform: scale(1.03); }
.plan.featured::before { content:"Популярный"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: linear-gradient(135deg,var(--emerald),var(--emerald-2)); color:#021018; font-size:12px; font-weight:700; padding:5px 16px; border-radius:100px; }
.plan .p-name { font-size: 15px; color: var(--txt-soft); letter-spacing: 0.04em; text-transform: uppercase; }
.plan .p-price { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; margin: 14px 0 4px; }
.plan .p-price small { font-size: 16px; color: var(--txt-mute); font-weight: 500; }
.plan .p-sub { font-size: 13.5px; color: var(--txt-mute); margin-bottom: 24px; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; flex: 1; }
.plan li { font-size: 14px; color: var(--txt-soft); display: flex; gap: 11px; align-items: flex-start; }
.plan li::before { content: "✓"; color: var(--emerald); font-weight: 800; }
.plan .btn { width: 100%; }

/* ============================ TESTIMONIALS ============================ */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.tcard .stars { color: var(--emerald); margin-bottom: 14px; letter-spacing: 2px; }
.tcard p { font-size: 15px; color: var(--txt); margin-bottom: 20px; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .who .a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: linear-gradient(135deg, var(--emerald-deep), var(--emerald)); color: #fff; }
.tcard .who .nm { font-size: 14px; font-weight: 600; }
.tcard .who .rl { font-size: 12px; color: var(--txt-mute); }

/* ============================ FAQ ============================ */
.faq { max-width: 820px; margin: 0 auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 24px 0; font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; flex: none; transition: .3s; color: var(--mint); }
.qa[open] summary .pm { transform: rotate(45deg); border-color: var(--emerald); }
.qa .a { padding: 0 0 24px; color: var(--txt-soft); font-size: 15px; max-width: 92%; }

/* ============================ CTA ============================ */
.cta-band { position: relative; padding: 90px; border-radius: 36px; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, rgba(94,200,255,0.16), rgba(43,156,255,0.06)); border: 1px solid rgba(94,200,255,0.3); }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 50% 0%, rgba(94,200,255,0.25), transparent 60%); }
.cta-band h2 { font-size: clamp(30px,4vw,52px); letter-spacing: -0.03em; position: relative; }
.cta-band p { color: var(--txt-soft); font-size: 18px; margin: 18px auto 34px; max-width: 540px; position: relative; }

/* ============================ FOOTER ============================ */
footer { border-top: 1px solid var(--line); padding: 70px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.foot-grid p { color: var(--txt-soft); font-size: 14px; margin-top: 16px; max-width: 300px; }
.foot-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--txt-mute); margin-bottom: 18px; }
.foot-col a { display: block; color: var(--txt-soft); font-size: 14.5px; margin-bottom: 12px; transition: color .25s; }
.foot-col a:hover { color: var(--mint); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 30px; color: var(--txt-mute); font-size: 13px; flex-wrap: wrap; gap: 14px; }

/* scroll progress bar */
.scroll-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--emerald), var(--mint)); box-shadow: 0 0 12px var(--emerald); }

/* ============================ AUTH PAGE ============================ */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-side { position: relative; padding: 60px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  background: linear-gradient(160deg, var(--graphite-2), #03101c); border-right: 1px solid var(--line); }
.auth-side .quote { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; max-width: 460px; }
.auth-side .quote .grad { background: linear-gradient(120deg,var(--mint),var(--emerald)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-side .a-stats { display: flex; gap: 36px; margin-top: 30px; }
.auth-side .a-stats .num { font-size: 26px; font-weight: 800; color: var(--mint); }
.auth-side .a-stats .lbl { font-size: 12.5px; color: var(--txt-mute); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 32px; letter-spacing: -0.03em; margin-bottom: 8px; }
.auth-card .sub { color: var(--txt-soft); margin-bottom: 32px; font-size: 15px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; color: var(--txt-soft); margin-bottom: 8px; }
.field input {
  width: 100%; padding: 14px 16px; border-radius: 13px; font-family: inherit; font-size: 15px;
  background: var(--graphite); border: 1px solid var(--line-strong); color: var(--txt); transition: border-color .25s, box-shadow .25s;
}
.field input:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 4px rgba(94,200,255,0.12); }
.auth-card .btn-primary { width: 100%; margin-top: 8px; }
.auth-switch { text-align: center; margin-top: 22px; font-size: 14px; color: var(--txt-soft); }
.auth-switch a { color: var(--mint); font-weight: 600; cursor: pointer; }
.auth-msg { font-size: 13.5px; padding: 12px 14px; border-radius: 11px; margin-bottom: 18px; display: none; }
.auth-msg.err { display: block; background: rgba(255,80,80,0.1); border: 1px solid rgba(255,80,80,0.3); color: #ff9a9a; }
.auth-msg.ok { display: block; background: rgba(94,200,255,0.1); border: 1px solid rgba(94,200,255,0.3); color: var(--mint); }
.divider { display: flex; align-items: center; gap: 14px; color: var(--txt-mute); font-size: 12.5px; margin: 24px 0; }
.divider::before, .divider::after { content:""; height:1px; flex:1; background: var(--line); }
.back-home { position: absolute; top: 30px; left: 30px; font-size: 14px; color: var(--txt-soft); z-index: 5; }
.back-home:hover { color: var(--mint); }

/* ============================ DASHBOARD ============================ */
.dash { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { border-right: 1px solid var(--line); padding: 28px 20px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: rgba(11,15,18,0.6); }
.sidebar .brand { margin-bottom: 40px; padding: 0 8px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 12px; color: var(--txt-soft); font-size: 14.5px; font-weight: 500; transition: .2s; }
.side-nav a:hover { background: rgba(255,255,255,0.04); color: var(--txt); }
.side-nav a.active { background: rgba(94,200,255,0.12); color: var(--mint); }
.side-nav a .si { width: 20px; text-align: center; }
.side-foot { margin-top: auto; padding: 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(94,200,255,0.12), transparent); border: 1px solid var(--line); }
.side-foot .pt { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.side-foot .ps { font-size: 11.5px; color: var(--txt-mute); margin-bottom: 12px; }

.dash-main { padding: 32px 40px; }
.dash-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; flex-wrap: wrap; gap: 16px; }
.dash-top h1 { font-size: 28px; letter-spacing: -0.03em; }
.dash-top .greet { color: var(--txt-soft); font-size: 14.5px; margin-top: 4px; }
.dash-user { display: flex; align-items: center; gap: 12px; }
.dash-user .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: linear-gradient(135deg,var(--emerald-deep),var(--emerald)); color:#fff; }
.dash-user .nm { font-size: 14px; font-weight: 600; } .dash-user .em { font-size: 12px; color: var(--txt-mute); }

.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 28px; }
.kpi { padding: 22px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: linear-gradient(180deg,var(--graphite-2),var(--graphite)); }
.kpi .kt { font-size: 12.5px; color: var(--txt-mute); display: flex; align-items: center; gap: 8px; }
.kpi .kv { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; }
.kpi .kd { font-size: 12px; color: var(--emerald); margin-top: 4px; }

.dash-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
.panel { padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg,var(--graphite-2),var(--graphite)); margin-bottom: 22px; }
.panel h2 { font-size: 18px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.panel h2 a { font-size: 13px; color: var(--mint); }

.course-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.course-row:last-child { border-bottom: none; }
.course-row .ci { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(94,200,255,0.12); border: 1px solid rgba(94,200,255,0.22); flex: none; }
.course-row .cm { flex: 1; }
.course-row .cm .ct { font-size: 15px; font-weight: 600; }
.course-row .cm .cs { font-size: 12.5px; color: var(--txt-mute); margin-top: 2px; }
.progress { height: 7px; border-radius: 100px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 10px; }
.progress > i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg,var(--emerald),var(--mint)); }
.course-row .pct { font-size: 14px; font-weight: 700; color: var(--mint); width: 46px; text-align: right; }

.timeline .ev { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.timeline .ev:last-child { border: none; }
.timeline .ev .tm { font-size: 12.5px; color: var(--mint); font-weight: 600; width: 56px; flex: none; }
.timeline .ev .te { font-size: 14px; font-weight: 600; }
.timeline .ev .td { font-size: 12.5px; color: var(--txt-mute); }

.achv { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.badge { padding: 16px; border-radius: 14px; border: 1px solid var(--line); text-align: center; background: rgba(255,255,255,0.02); }
.badge .bi { font-size: 26px; } .badge .bn { font-size: 12px; color: var(--txt-soft); margin-top: 8px; }
.badge.locked { opacity: .4; }

/* donut */
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--emerald) 0 72%, rgba(255,255,255,0.07) 72% 100%); position: relative; }
.donut::after { content:""; position: absolute; inset: 14px; border-radius: 50%; background: var(--graphite); }
.donut .dv { position: relative; z-index: 2; font-size: 26px; font-weight: 800; }
.donut-legend .li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--txt-soft); margin-bottom: 10px; }
.donut-legend .sw { width: 11px; height: 11px; border-radius: 3px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; } .hero-visual { height: 420px; order: -1; }
  .courses-grid, .tgrid, .pricing { grid-template-columns: 1fr 1fr; }
  .feat-grid, .steps, .mentors { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .dash-cols { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; }
  .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; }
  .dash { grid-template-columns: 1fr; }
  /* sidebar becomes a horizontal, scrollable top nav on mobile */
  .sidebar { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; gap: 10px;
    padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--line); overflow-x: auto;
    z-index: 50; background: rgba(9,12,18,0.94); backdrop-filter: blur(10px); }
  .sidebar .brand { margin-bottom: 0; padding: 0; white-space: nowrap; font-size: 15px; }
  .side-nav { flex-direction: row; gap: 6px; flex: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .side-nav a { white-space: nowrap; padding: 9px 13px; font-size: 13px; }
  .side-nav a .si { display: none; }
  .side-foot { display: none; }
  .dash-main { padding: 22px 16px; }
  .dash-top h1 { font-size: 23px; }
  .plan.featured { transform: none; }
}
@media (max-width: 640px) {
  .nav-links { display: none; } .burger { display: flex; }
  .courses-grid, .tgrid, .pricing, .feat-grid, .steps, .mentors, .foot-grid, .kpis { grid-template-columns: 1fr; }
  .cta-band { padding: 50px 26px; } .wrap { padding: 0 20px; }
  section { padding: 80px 0; }
}
@media (max-width: 560px) {
  .dash-main { padding: 18px 12px; }
  .dash-top { margin-bottom: 22px; gap: 12px; }
  .dash-top h1 { font-size: 20px; }
  .dash-user { width: 100%; justify-content: flex-start; }
  .achv { grid-template-columns: repeat(2,1fr); }
  .ref-kpis { grid-template-columns: 1fr 1fr; }
  .link-box { flex-direction: column; align-items: stretch; }
  .link-box input, .link-box .btn { width: 100%; }
  .panel, .ref-card { padding: 18px 16px; }
}
/* password show/hide toggle */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 32px; height: 32px;
  display: grid; place-items: center; background: none; border: none; cursor: pointer; color: var(--txt-mute);
  border-radius: 8px; transition: color .15s, background .15s; }
.pw-eye:hover { color: var(--txt-soft); background: rgba(255,255,255,0.05); }
.pw-eye svg { width: 20px; height: 20px; display: block; }

/* landing header: more breathing room */
.nav-links { gap: 30px; }
.nav .wrap.nav-inner { padding-top: 4px; padding-bottom: 4px; }
.faq .section-head p { margin-top: 8px; }

/* dashboard mobile: further polish */
@media (max-width: 640px) {
  .dash-top { flex-direction: column; align-items: flex-start; }
  .dash-user { width: 100%; justify-content: flex-start; gap: 10px; }
  .dash-user .btn { margin-left: auto; }
  .kpi { padding: 16px 16px; }
  .kpi .kv { font-size: 24px; }
  .panel, .ref-card, .about-card { padding: 16px 15px; }
  .panel h2, .ref-card h2 { font-size: 18px; }
  .tbl th, .tbl td { padding: 10px 12px; font-size: 12.5px; white-space: nowrap; }
  .ref-kpi .v { font-size: 20px; }
  .chart-box { height: 220px; }
  .side-nav a { padding: 8px 11px; font-size: 12.5px; }
  .lm-card, .cmp-proj-cols { }
}
@media (max-width: 400px) {
  .kpis { grid-template-columns: 1fr; }
  .dash-top h1 { font-size: 19px; }
}
/* ============================================================
   CINEMATIC SCROLL EXPERIENCE
   ============================================================ */
.cine-mode { cursor: none; background: #020306; }
.cine-mode .grain { opacity: 0.05; }

/* custom cursor */
.cursor-ring { position: fixed; top: 0; left: 0; width: 34px; height: 34px; border: 1px solid rgba(191,233,255,0.7);
  border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 9999; mix-blend-mode: difference;
  transition: width .25s, height .25s, background .25s, border-color .25s; }
.cursor-dot { position: fixed; top: 0; left: 0; width: 4px; height: 4px; background: var(--mint); border-radius: 50%;
  transform: translate(-50%,-50%); pointer-events: none; z-index: 9999; }
.cursor-ring.hot { width: 56px; height: 56px; border-color: var(--emerald); background: rgba(94,200,255,0.08); }
@media (max-width: 900px) { .cursor-ring, .cursor-dot { display: none; } .cine-mode { cursor: auto; } }

/* ONE fixed full-page animation canvas */
#cine { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }

/* full-screen hero over the animation */
.hero-cine { position: relative; min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 90px 24px 0; }
.hero-cine .kicker { font-size: 12px; letter-spacing: 0.55em; text-transform: uppercase; color: var(--emerald);
  margin-bottom: 30px; padding-left: 0.55em; animation: fadeUp 1.1s .1s both; }
.wordmark { font-weight: 200; letter-spacing: 0.5em; text-transform: uppercase; font-size: clamp(48px,11vw,150px);
  padding-left: 0.5em; color: #fff; text-shadow: 0 0 60px rgba(94,200,255,0.45); animation: fadeUp 1.1s .2s both; line-height: 1; }
.hero-cine .sub { margin-top: 28px; max-width: 560px; color: var(--txt-soft); font-size: clamp(15px,1.6vw,18px);
  font-weight: 300; letter-spacing: 0.02em; animation: fadeUp 1.1s .35s both; }
.hero-cine .hero-actions { margin-top: 40px; animation: fadeUp 1.1s .5s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* narration bands between content (scroll-revealed) */
.narration { min-height: 86vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px; position: relative; }
.narration .kicker { font-size: 12px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--emerald); margin-bottom: 24px; padding-left: 0.5em; }
.narration h2 { font-weight: 200; letter-spacing: 0.12em; text-transform: uppercase; font-size: clamp(28px,5.5vw,72px); line-height: 1.08; }
.narration h2 b { font-weight: 500; color: var(--mint); }
.narration .sub { margin-top: 24px; max-width: 560px; color: var(--txt-soft); font-weight: 300; font-size: clamp(14px,1.5vw,17px); }

/* content sits over the fixed animation with a soft scrim for legibility */
.content-scrim { position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(2,3,8,0) 0%, rgba(3,5,11,0.66) 7%, rgba(3,5,11,0.82) 22%, rgba(3,5,11,0.9) 100%); }

/* scroll hint */
.scroll-hint { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none;
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--txt-soft); transition: opacity .5s; }
.scroll-hint .mouse { width: 24px; height: 38px; border: 1px solid var(--line-strong); border-radius: 14px; position: relative; }
.scroll-hint .mouse::after { content:""; position: absolute; top: 7px; left: 50%; width: 3px; height: 7px; border-radius: 3px;
  background: var(--mint); transform: translateX(-50%); animation: wheel 1.6s infinite; }
@keyframes wheel { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/
/* legibility scrim behind full-screen text over the animation */
.hero-cine::before, .narration::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 50%, rgba(2,4,9,0.72), rgba(2,4,9,0) 75%); }
/* lighter centre on hero so the crystal core glows between N and T */
.hero-cine::before { background: radial-gradient(34% 42% at 50% 48%, rgba(2,4,9,0) 0%, rgba(2,4,9,0.32) 55%, rgba(2,4,9,0.6) 85%, rgba(2,4,9,0) 100%); }
.hero-cine > *, .narration > * { position: relative; }
.narration .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.narration .reveal.in { opacity: 1; transform: none; }

/* referral promo on landing */
.ref-promo { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.ref-stat { padding: 30px 24px; border-radius: var(--radius); border: 1px solid var(--line); text-align: center;
  background: linear-gradient(180deg, rgba(94,200,255,0.08), rgba(8,11,20,0.6)); }
.ref-stat .rv { font-size: clamp(30px,3vw,44px); font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(120deg,var(--mint),var(--emerald)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ref-stat .rl { font-size: 13px; color: var(--txt-soft); margin-top: 10px; }
@media (max-width: 900px){ .ref-promo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .ref-promo { grid-template-columns: 1fr; } }

/* referral invited-by banner on auth */
.invited { font-size: 13px; padding: 12px 14px; border-radius: 11px; margin-bottom: 18px;
  background: rgba(94,200,255,0.1); border: 1px solid rgba(94,200,255,0.3); color: var(--mint); }

/* ============================================================
   DASHBOARD v2 — views, referral, materials, table
   ============================================================ */
.view { display: none; }
.view.active { display: block; animation: viewIn .5s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.side-nav a { cursor: pointer; }

/* referral hero card */
.ref-card { padding: 28px; border-radius: var(--radius); border: 1px solid rgba(94,200,255,0.28);
  background: linear-gradient(135deg, rgba(94,200,255,0.14), rgba(8,11,20,0.7)); margin-bottom: 22px; position: relative; overflow: hidden; }
.ref-card::after { content:""; position:absolute; inset:0; background: radial-gradient(500px 220px at 90% -10%, rgba(94,200,255,0.22), transparent 60%); pointer-events:none; }
.ref-card h2 { font-size: 22px; margin-bottom: 6px; position: relative; }
.ref-card p { color: var(--txt-soft); font-size: 14px; max-width: 520px; position: relative; }
.ref-badge { display:inline-block; font-size: 12px; font-weight: 700; color: #021018; background: linear-gradient(135deg,var(--mint),var(--emerald));
  padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; }

.link-box { display: flex; gap: 10px; margin-top: 20px; position: relative; flex-wrap: wrap; }
.link-box input { flex: 1; min-width: 220px; padding: 13px 16px; border-radius: 12px; font-family: inherit; font-size: 14px;
  background: rgba(2,4,9,0.6); border: 1px solid var(--line-strong); color: var(--txt); }
.link-box input:focus { outline: none; border-color: var(--emerald); }

/* stat tiles row */
.ref-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 22px; }
.ref-kpi { padding: 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: linear-gradient(180deg,var(--graphite-2),var(--graphite)); }
.ref-kpi .t { font-size: 12px; color: var(--txt-mute); }
.ref-kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.ref-kpi .v.accent { background: linear-gradient(120deg,var(--mint),var(--emerald)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* table */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
table.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-mute);
  padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 600; }
table.tbl td { padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--line); }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr:hover td { background: rgba(94,200,255,0.04); }
.cell-name { display: flex; align-items: center; gap: 11px; }
.cell-name .a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg,var(--emerald-deep),var(--emerald)); color: #fff; flex: none; }
.comm { color: var(--mint); font-weight: 700; }
.pill { font-size: 11.5px; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--line-strong); color: var(--txt-soft); }
.pill.ok { color: var(--mint); border-color: rgba(94,200,255,0.4); background: rgba(94,200,255,0.08); }

.chart-box { position: relative; height: 240px; }

/* materials */
.mat-group { margin-bottom: 24px; }
.mat-group h3 { font-size: 15px; margin-bottom: 12px; color: var(--txt-soft); font-weight: 600; }
.mat-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.02); margin-bottom: 8px; transition: border-color .2s, background .2s; }
.mat-row:hover { border-color: rgba(94,200,255,0.3); background: rgba(94,200,255,0.04); }
.mat-row .mi { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none;
  background: rgba(94,200,255,0.12); border: 1px solid rgba(94,200,255,0.22); }
.mat-row .mt { flex: 1; } .mat-row .mt .n { font-size: 14.5px; font-weight: 600; } .mat-row .mt .s { font-size: 12px; color: var(--txt-mute); }
.mat-row .lock { font-size: 12px; color: var(--txt-mute); }
.copied-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--emerald); color: #021018; font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 100px; z-index: 999;
  transition: opacity .3s, transform .3s; pointer-events: none; }
.copied-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px){ .ref-kpis { grid-template-columns: 1fr 1fr; } }

/* hero text legibility over the digital sphere */
.hero-cine::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 38% at 50% 70%, rgba(3,6,12,0.66), rgba(3,6,12,0) 72%); }
.hero-cine .sub { text-shadow: 0 2px 26px rgba(0,0,0,0.75); }
.hero-cine .kicker { text-shadow: 0 2px 18px rgba(0,0,0,0.7); }
.wordmark { text-shadow: 0 2px 34px rgba(0,0,0,0.5), 0 0 60px rgba(94,200,255,0.32); }

/* stronger legibility over the flow currents on scroll */
.hero-cine::after { background: radial-gradient(50% 42% at 50% 70%, rgba(3,6,12,0.78), rgba(3,6,12,0) 74%); }
.narration::before { background: radial-gradient(62% 54% at 50% 50%, rgba(3,6,12,0.88), rgba(3,6,12,0) 78%); }
.narration h2, .narration .sub, .narration .kicker { text-shadow: 0 2px 30px rgba(0,0,0,0.72); }

/* full text-block band so narration subtitle never merges with currents */
.narration::before { background: linear-gradient(180deg,
  rgba(3,6,12,0) 0%, rgba(3,6,12,0.55) 18%, rgba(3,6,12,0.92) 38%,
  rgba(3,6,12,0.92) 64%, rgba(3,6,12,0.5) 82%, rgba(3,6,12,0) 100%); }
.hero-cine::after { background: radial-gradient(56% 46% at 50% 68%, rgba(3,6,12,0.82), rgba(3,6,12,0) 76%); }
.narration .sub, .hero-cine .sub { color: #c4d3ea; }

/* centre narration text block (kicker/heading/subtitle aligned) */
.narration .reveal { display: flex; flex-direction: column; align-items: center; }
.narration .sub, .hero-cine .sub { margin-left: auto; margin-right: auto; }

/* ============================================================
   COURSE FINDER (landing)
   ============================================================ */
.finder { margin-bottom: 30px; padding: 26px; border-radius: var(--radius);
  border: 1px solid rgba(94,200,255,0.28); background: linear-gradient(135deg, rgba(94,200,255,0.1), rgba(8,11,20,0.7)); }
.finder-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.finder-badge { font-size: 12px; font-weight: 700; color: #021018; background: linear-gradient(135deg,var(--mint),var(--emerald)); padding: 5px 12px; border-radius: 100px; }
.finder-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.finder-q { display: flex; gap: 12px; flex-wrap: wrap; }
.finder-q input { flex: 1; min-width: 240px; padding: 15px 18px; border-radius: 14px; font-family: inherit; font-size: 15px;
  background: rgba(2,4,9,0.6); border: 1px solid var(--line-strong); color: var(--txt); }
.finder-q input:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 4px rgba(94,200,255,0.12); }
.finder-results { display: grid; gap: 12px; margin-top: 18px; }
.finder-results.has { padding-top: 4px; }
.finder-card { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 16px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.02); transition: border-color .25s, transform .25s, background .25s; }
.finder-card:hover { border-color: rgba(94,200,255,0.45); transform: translateX(4px); background: rgba(94,200,255,0.05); }
.finder-card .fc-ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; font-size: 24px; flex: none;
  background: rgba(94,200,255,0.12); border: 1px solid rgba(94,200,255,0.22); }
.finder-card .fc-t { font-size: 16px; font-weight: 600; }
.finder-card .fc-s { font-size: 13px; color: var(--txt-soft); margin: 4px 0 8px; }
.finder-card .fc-meta { display: flex; gap: 14px; font-size: 12px; color: var(--txt-mute); }
.finder-card .fc-go { margin-left: auto; color: var(--mint); font-weight: 600; flex: none; }

/* course card description + discount (dashboard) */
.cc-desc { font-size: 13px; color: var(--txt-soft); margin: 8px 0 14px; line-height: 1.5; }
.cc-old { color: var(--txt-mute); text-decoration: line-through; font-size: 13px; margin-right: 6px; }
.cc-price.owned { color: var(--mint); }
.disc { font-size: 11px; font-weight: 700; color: #021018; background: var(--mint); padding: 2px 7px; border-radius: 6px; margin-left: 6px; }

/* consent checkbox (auth) */
.consent { display: none; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--txt-soft); margin: 4px 0 18px; cursor: pointer; }
.consent input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--emerald); flex: none; }
.consent a { color: var(--mint); }

/* about grid + social (cabinet) */
.about-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 22px; }
.about-card { padding: 24px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: linear-gradient(180deg,var(--graphite-2),var(--graphite)); }
.about-card .ai { font-size: 26px; margin-bottom: 12px; }
.about-card h3 { font-size: 16px; margin-bottom: 8px; }
.about-card p { font-size: 13.5px; color: var(--txt-soft); }
.socials { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.social { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.02); transition: transform .25s, border-color .25s, background .25s; }
.social:hover { transform: translateY(-4px); }
.social .s-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; color: #fff; flex: none; }
.social.ig .s-ic { background: linear-gradient(135deg,#feda75,#d62976,#962fbf); }
.social.max .s-ic { background: linear-gradient(135deg,#2f8fff,#1f4fd6); font-weight: 800; }
.social.tg .s-ic { background: linear-gradient(135deg,#2aabee,#229ed9); }
.social.ig:hover { border-color: #d62976; } .social.max:hover { border-color: #2f8fff; } .social.tg:hover { border-color: #229ed9; }
.social .s-n { font-size: 15px; font-weight: 600; } .social .s-d { font-size: 12px; color: var(--txt-mute); }
.social .s-go { margin-left: auto; color: var(--txt-mute); font-size: 18px; }

/* course program (materials) */
.course-program { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg,var(--graphite-2),var(--graphite)); margin-bottom: 18px; }
.cp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cp-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; flex: none;
  background: rgba(94,200,255,0.12); border: 1px solid rgba(94,200,255,0.22); }
.cp-meta { flex: 1; } .cp-t { font-size: 17px; font-weight: 600; } .cp-s { font-size: 13px; color: var(--txt-soft); margin-top: 3px; }
.module { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.015); margin-bottom: 10px; }
.m-h { font-size: 14.5px; font-weight: 600; margin-bottom: 10px; color: var(--mint); }
.m-lessons { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.m-lessons li { font-size: 13.5px; color: var(--txt-soft); }
.m-task { font-size: 13px; color: var(--txt); background: rgba(94,200,255,0.08); border: 1px solid rgba(94,200,255,0.2);
  padding: 10px 13px; border-radius: 10px; }
.cp-cta { margin-top: 8px; }

@media (max-width: 900px){ .about-grid, .socials { grid-template-columns: 1fr; } }

/* landing course "open" link in card meta */
.cc-more { margin-left: auto; color: var(--mint); font-weight: 600; font-size: 13px; }

/* ============================================================
   AUTO-SUPPORT widget
   ============================================================ */
.sup-btn { position: fixed; right: 24px; bottom: 24px; z-index: 500; width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 26px; color: #021018;
  background: linear-gradient(135deg, var(--mint), var(--emerald)); box-shadow: 0 14px 36px -10px rgba(94,200,255,0.7);
  transition: transform .25s, opacity .25s; }
.sup-btn:hover { transform: translateY(-3px) scale(1.05); }
.sup-btn.hide { opacity: 0; pointer-events: none; transform: scale(.6); }
.sup-panel { position: fixed; right: 24px; bottom: 24px; z-index: 501; width: 360px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  box-shadow: var(--shadow); opacity: 0; transform: translateY(20px) scale(.96); pointer-events: none; transition: opacity .3s, transform .3s; }
.sup-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.sup-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px;
  background: linear-gradient(135deg, rgba(94,200,255,0.16), transparent); border-bottom: 1px solid var(--line); }
.sup-t { font-size: 15px; font-weight: 700; } .sup-s { font-size: 12px; color: var(--mint); margin-top: 2px; }
.sup-x { background: none; border: none; color: var(--txt-soft); font-size: 24px; cursor: pointer; line-height: 1; }
.sup-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.sup-msg { max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.sup-msg.bot { align-self: flex-start; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.sup-msg.me { align-self: flex-end; background: linear-gradient(135deg, var(--emerald), var(--emerald-2)); color: #021018; border-bottom-right-radius: 5px; }
.sup-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 10px; }
.sup-chip { font-size: 12px; padding: 7px 12px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(94,200,255,0.06); color: var(--txt-soft); transition: .2s; }
.sup-chip:hover { border-color: var(--emerald); color: var(--mint); }
.sup-foot { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
.sup-foot input { flex: 1; padding: 12px 14px; border-radius: 12px; font-family: inherit; font-size: 14px;
  background: rgba(2,4,9,0.6); border: 1px solid var(--line-strong); color: var(--txt); }
.sup-foot input:focus { outline: none; border-color: var(--emerald); }
.sup-foot button { width: 44px; border: none; border-radius: 12px; cursor: pointer; font-size: 18px; color: #021018;
  background: linear-gradient(135deg, var(--mint), var(--emerald)); }
@media (max-width: 480px){ .sup-panel { right: 8px; bottom: 8px; height: calc(100vh - 90px); } .sup-btn { right: 16px; bottom: 16px; } }

/* clickable lessons + lesson reader (owned course) */
.m-lessons li button.lesson-open { width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--txt-soft); padding: 7px 10px; border-radius: 9px; transition: .2s; }
.m-lessons li button.lesson-open:hover { background: rgba(94,200,255,0.1); color: var(--mint); }

.lesson-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(2,4,9,0.72); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.lesson-modal.on { opacity: 1; pointer-events: auto; }
.lm-card { width: 100%; max-width: 640px; max-height: 86vh; overflow-y: auto; position: relative;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border: 1px solid var(--line-strong);
  border-radius: 22px; padding: 34px; box-shadow: var(--shadow); animation: viewIn .35s ease both; }
.lm-x { position: absolute; top: 18px; right: 20px; background: none; border: none; color: var(--txt-soft); font-size: 26px; cursor: pointer; line-height: 1; }
.lm-tag { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--emerald); margin-bottom: 10px; }
.lm-h { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; max-width: 92%; }
.lm-video { height: 200px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; color: var(--mint); margin-bottom: 22px; border: 1px solid rgba(94,200,255,0.25);
  background: radial-gradient(420px 200px at 50% 40%, rgba(94,200,255,0.16), rgba(8,11,20,0.6)); }
.lm-video span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
  color: #021018; background: linear-gradient(135deg,var(--mint),var(--emerald)); }
.lm-text { font-size: 15px; line-height: 1.65; color: var(--txt-soft); white-space: pre-line; margin-bottom: 26px; }
.lm-done { width: 100%; }

/* ===== course tiers (premium / mini) ===== */
#courses-grid, #home-courses { display: block; }
.tier-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; flex-wrap: wrap; gap: 12px; }
.tier-badge { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; padding: 5px 12px; border-radius: 100px; }
.tier-badge.prem { color: #1a1205; background: linear-gradient(135deg, #ffd479, #f2a93b); }
.tier-badge.mini { color: #021018; background: linear-gradient(135deg, var(--mint), var(--emerald)); }
.tier-t { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin-top: 10px; }
.tier-s { font-size: 13.5px; color: var(--txt-soft); margin-top: 3px; }

/* materials: progress + video badge + footer */
.cp-prog { display: flex; align-items: center; gap: 10px; }
.cp-prog .progress { height: 7px; }
.cp-prog span { font-size: 13px; font-weight: 700; color: var(--mint); }
.cp-done { font-size: 12.5px; color: var(--txt-mute); margin-top: 6px; }
.m-video { font-size: 11px; color: var(--mint); border: 1px solid rgba(94,200,255,0.3); border-radius: 100px; padding: 1px 8px; margin-left: 6px; }
.lesson-open.done { color: var(--mint); }
.cp-cta { margin-top: 10px; }

/* lesson reader: text-first */
.lm-text { white-space: normal; }
.lm-text p { margin: 0 0 13px; }
.lm-bonus { font-size: 13px; color: var(--mint); border: 1px solid rgba(94,200,255,0.28);
  background: rgba(94,200,255,0.06); border-radius: 12px; padding: 12px 14px; margin: 4px 0 22px; }

/* ============================================================
   COURSE PLAYER + QUIZ
   ============================================================ */
.player { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.player-side { position: sticky; top: 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg,var(--graphite-2),var(--graphite)); padding: 18px; max-height: calc(100vh - 60px); overflow-y: auto; }
.pl-course { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pl-ct { font-size: 15px; font-weight: 700; line-height: 1.2; }
.player-nav { display: flex; flex-direction: column; gap: 4px; }
.pl-mod { margin-bottom: 12px; }
.pl-mod-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--txt-mute); margin: 8px 6px; }
.pl-l { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13.5px; color: var(--txt-soft); padding: 9px 11px; border-radius: 10px; transition: .2s; line-height: 1.35; }
.pl-l:hover { background: rgba(94,200,255,0.08); color: var(--txt); }
.pl-l.active { background: rgba(94,200,255,0.16); color: #fff; }
.pl-l.done { color: var(--mint); }
.pl-l.pl-quiz { font-weight: 600; color: var(--emerald); }

.player-main { border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg,var(--graphite-2),var(--graphite)); padding: 34px; min-height: 60vh; }
.ls-tag { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emerald); margin-bottom: 12px; }
.ls-title { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; }
.ls-video { height: 150px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 15px; color: var(--mint); margin-bottom: 22px; border: 1px solid rgba(94,200,255,0.25);
  background: radial-gradient(420px 180px at 50% 40%, rgba(94,200,255,0.16), rgba(8,11,20,0.6)); }
.ls-video span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: #021018; background: linear-gradient(135deg,var(--mint),var(--emerald)); }
.ls-body { font-size: 15.5px; line-height: 1.7; color: var(--txt-soft); }
.ls-body p { margin: 0 0 14px; }
.ls-key { margin: 18px 0 24px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; color: var(--txt);
  background: rgba(94,200,255,0.08); border: 1px solid rgba(94,200,255,0.25); }
.ls-actions { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; }

.quiz-slide .q { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); margin-bottom: 12px; transition: border-color .2s; }
.quiz-slide .q.right { border-color: rgba(94,200,255,0.6); background: rgba(94,200,255,0.06); }
.quiz-slide .q.wrong { border-color: rgba(255,90,90,0.5); background: rgba(255,90,90,0.06); }
.q-t { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.q-o { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--txt-soft); transition: background .15s; }
.q-o:hover { background: rgba(94,200,255,0.06); }
.q-o input { accent-color: var(--emerald); width: 16px; height: 16px; }
.quiz-res { margin: 10px 0 4px; }
.qr { padding: 12px 14px; border-radius: 11px; font-size: 14px; }
.qr.ok { background: rgba(94,200,255,0.12); border: 1px solid rgba(94,200,255,0.4); color: var(--mint); }
.qr.no { background: rgba(255,90,90,0.1); border: 1px solid rgba(255,90,90,0.35); color: #ff9a9a; }

@media (max-width: 900px){ .player { grid-template-columns: 1fr; } .player-side { position: static; max-height: none; } }

/* structured lesson content */
.ls-h { font-size: 18px; font-weight: 700; color: var(--mint); margin: 22px 0 10px; }
.ls-list { margin: 6px 0 14px; padding-left: 4px; list-style: none; }
.ls-list li { position: relative; padding-left: 22px; margin: 8px 0; font-size: 15px; line-height: 1.6; color: var(--txt-soft); }
.ls-list li::before { content: "▸"; position: absolute; left: 2px; color: var(--emerald); }
.ls-ex { margin: 14px 0; padding: 13px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.6; color: var(--txt);
  background: rgba(94,200,255,0.07); border-left: 3px solid var(--emerald); }
.ls-warn { margin: 14px 0; padding: 12px 15px; border-radius: 12px; font-size: 14px; color: #ffd9a8;
  background: rgba(255,170,80,0.08); border-left: 3px solid #ffb86b; }
.ls-body .ls-key { margin: 16px 0; padding: 13px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--txt);
  background: linear-gradient(135deg, rgba(94,200,255,0.14), rgba(8,11,20,0.4)); border: 1px solid rgba(94,200,255,0.3); }

/* ===== slide-based lesson player ===== */
.slide-meta { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; gap: 12px; }
.slide-h { font-size: 17px; font-weight: 700; color: var(--mint); }
.slide-n { font-size: 12px; color: var(--txt-mute); white-space: nowrap; }
.slidewrap { min-height: 300px; animation: slideIn .35s ease both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.slide-dots { display: flex; gap: 7px; justify-content: center; margin: 18px 0 22px; flex-wrap: wrap; }
.slide-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(150,190,255,0.18); transition: .25s; }
.slide-dots .dot.past { background: rgba(94,200,255,0.5); }
.slide-dots .dot.on { background: var(--emerald); width: 24px; border-radius: 6px; }

/* copyable prompt block */
.ls-prompt { margin: 14px 0; border-radius: 12px; border: 1px solid rgba(94,200,255,0.3); background: rgba(2,8,16,0.6); overflow: hidden; }
.lp-code { padding: 14px 16px; font-family: "Courier New", monospace; font-size: 13.5px; line-height: 1.6; color: var(--mint); white-space: pre-wrap; }
.copy-prompt { width: 100%; border: none; border-top: 1px solid rgba(94,200,255,0.2); background: rgba(94,200,255,0.1); color: var(--mint);
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px; cursor: pointer; transition: background .2s; }
.copy-prompt:hover { background: rgba(94,200,255,0.18); }

/* practice slide */
.ls-practice { padding: 24px; border-radius: 16px; border: 1px solid rgba(94,200,255,0.35);
  background: linear-gradient(135deg, rgba(94,200,255,0.12), rgba(8,11,20,0.4)); }
.ls-practice .lp-h { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.ls-practice p { font-size: 16px; line-height: 1.6; color: var(--txt); margin-bottom: 14px; }
.ls-practice .lp-tip { font-size: 13.5px; color: var(--txt-soft); border-top: 1px solid var(--line); padding-top: 12px; }

/* ===== Lesson figures (SVG illustrations) ===== */
.ls-fig { margin: 20px 0; padding: 18px; border-radius: 16px; border: 1px solid var(--line-strong);
  background: radial-gradient(120% 120% at 30% 0%, rgba(94,200,255,0.06), rgba(2,8,16,0.4)); text-align: center; }
.ls-fig svg { width: 100%; height: auto; max-width: 560px; display: block; margin: 0 auto; }
.ls-fig figcaption { margin-top: 12px; font-size: 13px; color: var(--txt-mute); font-style: italic; }

/* ===== Lesson comparison tables ===== */
.ls-tblwrap { margin: 18px 0; overflow-x: auto; border-radius: 14px; border: 1px solid var(--line-strong); }
.ls-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.ls-tbl th { text-align: left; padding: 12px 14px; background: rgba(94,200,255,0.1); color: var(--mint);
  font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line-strong); }
.ls-tbl td { padding: 11px 14px; color: var(--txt-soft); border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.ls-tbl tr:last-child td { border-bottom: none; }
.ls-tbl tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
.ls-tbl td:first-child { color: var(--txt); font-weight: 600; }

/* ===== Model-response card (shows real AI output) ===== */
.ls-resp { margin: 16px 0; border-radius: 14px; border: 1px solid rgba(94,200,255,0.22);
  background: linear-gradient(180deg, rgba(94,200,255,0.05), rgba(2,8,16,0.35)); overflow: hidden; }
.ls-resp .lr-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--emerald); padding: 9px 16px; border-bottom: 1px solid var(--line);
  background: rgba(94,200,255,0.07); display: flex; align-items: center; gap: 7px; }
.ls-resp .lr-tag::before { content: "✦"; font-size: 12px; }
.ls-resp .lr-body { padding: 13px 16px; }
.ls-resp .lr-body p { margin: 0 0 9px; color: var(--txt); font-size: 14.5px; line-height: 1.65; }
.ls-resp .lr-body p:last-child { margin-bottom: 0; }

/* ===== Locked lessons/quizzes in player nav ===== */
.pl-l.locked { opacity: .5; cursor: not-allowed; color: var(--txt-mute); }
.pl-l.locked:hover { background: transparent; border-color: transparent; transform: none; }

/* ===== course completion screen ===== */
.cmp-wrap{display:flex;justify-content:center;padding:10px 0 40px}
.cmp-card{position:relative;max-width:720px;width:100%;text-align:center;background:linear-gradient(165deg,rgba(94,200,255,.10),rgba(124,240,200,.05));border:1px solid rgba(124,240,200,.28);border-radius:24px;padding:46px 44px 40px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.cmp-burst{font-size:58px;line-height:1;margin-bottom:8px;animation:cmp-pop .6s ease}
@keyframes cmp-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.cmp-badge{display:inline-block;letter-spacing:3px;font-size:12px;font-weight:700;color:#7cf0c8;background:rgba(124,240,200,.12);border:1px solid rgba(124,240,200,.35);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.cmp-title{font-size:30px;font-weight:800;margin:0 0 12px;line-height:1.2}
.cmp-sub{color:var(--txt-soft);font-size:15px;line-height:1.6;max-width:540px;margin:0 auto 26px}
.cmp-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.cmp-stat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px 20px;min-width:96px}
.cmp-stat b{display:block;font-size:26px;font-weight:800;color:var(--mint)}
.cmp-stat span{font-size:12px;color:var(--txt-mute)}
.cmp-cert{font-size:13px;color:var(--txt-soft);background:rgba(255,255,255,.03);border:1px dashed var(--line);border-radius:12px;padding:11px 16px;margin-bottom:24px}
.cmp-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.cmp-tip{font-size:13px;color:var(--txt-mute);line-height:1.5;max-width:520px;margin:0 auto}

/* ===== collapsible materials modules ===== */
.cp-modules{margin-top:6px}
.cp-modtoggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:11px 16px;cursor:pointer;color:var(--txt);font-size:14px;font-weight:600;text-align:left;margin-top:8px;transition:background .15s,border-color .15s}
.cp-modtoggle:hover{background:rgba(94,200,255,.07);border-color:rgba(94,200,255,.3)}
.cp-modtoggle .cp-modmeta{font-size:12px;color:var(--txt-mute);font-weight:500;white-space:nowrap}
.cp-modtoggle .cp-chev{transition:transform .2s;color:var(--txt-mute)}
.cp-modtoggle.open .cp-chev{transform:rotate(90deg)}
.cp-modbody{display:none;padding:4px 2px 2px}
.cp-modbody.open{display:block}
.cp-allbtns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px}

/* ===================== ADMIN CABINET ===================== */
.adm-gate{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.adm-gate-card{width:100%;max-width:380px;background:rgba(12,22,34,.7);border:1px solid var(--line);border-radius:20px;padding:34px 28px;text-align:center;backdrop-filter:blur(10px);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.adm-logo{font-weight:800;letter-spacing:3px;font-size:18px;color:var(--mint)}
.adm-gate-sub{color:var(--txt-soft);font-size:14px;margin:10px 0 18px}
.adm-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--txt);font-size:15px;font-family:inherit;outline:none}
.adm-input:focus{border-color:rgba(94,200,255,.5)}
.adm-input-sm{padding:8px 12px;font-size:13px;width:230px}
.adm-gate-err{color:#ff8fb1;font-size:13px;margin-top:10px;min-height:16px}
.adm-gate-note{margin-top:18px;font-size:11.5px;color:var(--txt-mute);line-height:1.5;text-align:left;background:rgba(255,211,110,.07);border:1px solid rgba(255,211,110,.2);border-radius:10px;padding:10px 12px}

.adm-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:26px 22px 60px}
.adm-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.adm-title{font-size:26px;font-weight:800}
.adm-sub{color:var(--txt-mute);font-size:13px;margin-top:3px}
.adm-sub2{color:var(--txt-soft);font-size:13px;font-weight:600}
.adm-top-btns{display:flex;gap:8px;flex-wrap:wrap}
.adm-top-btns .btn{padding:8px 14px;font-size:13px}

.adm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.adm-kpi{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:15px;padding:15px 16px}
.adm-kpi-l{color:var(--txt-mute);font-size:12px}
.adm-kpi-v{font-size:23px;font-weight:800;margin:4px 0 2px}
.adm-kpi-s{color:var(--mint);font-size:11.5px}

.adm-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-bottom:18px}
.adm-card-h{font-size:15px;font-weight:700;margin-bottom:14px}
.adm-card-h-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.adm-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.adm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.adm-grid2 .adm-card{margin-bottom:0}
.adm-grid2{margin-bottom:18px}

.adm-tablewrap{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{text-align:left;color:var(--txt-mute);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.adm-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:top}
.adm-table tr:hover td{background:rgba(94,200,255,.04)}
.adm-table .comm{color:#7cf0c8;font-weight:600;white-space:nowrap}
.adm-em{color:var(--txt-mute);font-size:11.5px}
.adm-buys{font-size:12px;line-height:1.5;max-width:220px}
.adm-req{font-family:monospace;font-size:12px;color:var(--txt-soft)}
.adm-mute,.adm-empty{color:var(--txt-mute)}
.adm-empty{text-align:center;padding:22px}
.adm-hint{color:var(--txt-mute);font-size:12.5px;line-height:1.5;margin:-4px 0 12px}

.adm-chip{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt-soft);border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:inherit}
.adm-chip.active{background:rgba(94,200,255,.16);border-color:rgba(94,200,255,.45);color:#bfe9ff}

.adm-badge{display:inline-block;font-size:11.5px;padding:3px 9px;border-radius:999px;white-space:nowrap}
.adm-badge.ok{background:rgba(124,240,200,.13);color:#7cf0c8;border:1px solid rgba(124,240,200,.3)}
.adm-badge.warn{background:rgba(255,211,110,.12);color:#ffd36e;border:1px solid rgba(255,211,110,.3)}
.adm-badge.mute{background:rgba(255,255,255,.06);color:var(--txt-mute);border:1px solid var(--line)}

.adm-activity{display:flex;flex-direction:column;gap:9px}
.adm-act{display:flex;align-items:center;gap:10px;font-size:13px}
.adm-act-i{flex:none;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.adm-act-i.buy{background:rgba(124,240,200,.14);color:#7cf0c8}
.adm-act-i.reg{background:rgba(94,200,255,.14);color:#5ec8ff}
.adm-act-t{flex:1;color:var(--txt-soft)}
.adm-act-d{color:var(--txt-mute);font-size:11.5px;white-space:nowrap}

.adm-modal{position:fixed;inset:0;z-index:100;background:rgba(4,10,18,.72);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.adm-modal-card{width:100%;max-width:440px;background:#0c1622;border:1px solid var(--line);border-radius:18px;padding:24px}
.adm-modal-h{font-size:18px;font-weight:800;margin-bottom:16px}
.adm-pm-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}
.adm-pm-row span{color:var(--txt-mute)}
.adm-pm-note{margin-top:12px;font-size:12.5px;border-radius:10px;padding:9px 12px;line-height:1.45}
.adm-pm-note.ok{background:rgba(124,240,200,.1);color:#aef0d8;border:1px solid rgba(124,240,200,.25)}
.adm-pm-note.warn{background:rgba(255,211,110,.1);color:#ffe0a0;border:1px solid rgba(255,211,110,.28)}
.adm-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--txt-soft);margin:16px 0;line-height:1.4;cursor:pointer}
.adm-check input{margin-top:2px}
.adm-modal-btns{display:flex;gap:10px;justify-content:flex-end}

@media(max-width:860px){.adm-kpis{grid-template-columns:repeat(2,1fr)}.adm-grid2{grid-template-columns:1fr}.adm-input-sm{width:100%}}

/* admin — referral clarity additions */
.adm-disc{display:inline-block;font-size:11px;color:#ffd36e;background:rgba(255,211,110,.12);border:1px solid rgba(255,211,110,.3);border-radius:6px;padding:0 5px;margin-left:3px}
.adm-caret{color:var(--mint);font-size:11px;display:inline-block;width:10px}
.adm-rowexp:hover td{background:rgba(94,200,255,.06)}
.adm-detbox{background:rgba(94,200,255,.05);border:1px solid rgba(94,200,255,.18);border-radius:12px;padding:12px 14px;margin:2px 0}
.adm-deth{font-size:12.5px;color:var(--txt-soft);margin-bottom:8px;font-weight:600}
.adm-refhead,.adm-refrow{display:grid;grid-template-columns:1.4fr 2fr 1fr 1fr;gap:10px;font-size:12.5px;padding:5px 0}
.adm-refhead{color:var(--txt-mute);font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line)}
.adm-refrow{border-bottom:1px solid rgba(255,255,255,.04)}
.adm-refn{color:var(--txt)}
.adm-refc{color:var(--txt-soft)}
.adm-refm{color:var(--txt-soft)}

/* partner row → opens profile modal */
.adm-rrow:hover td{background:rgba(94,200,255,.06)}
.adm-openhint{font-size:11px;color:var(--txt-mute);margin-left:6px;opacity:.7}
.adm-vdot{font-size:9px;vertical-align:middle}
.adm-vdot.ok{color:#7cf0c8}
.adm-vdot.warn{color:#ffd36e}

/* partner profile modal */
.adm-modal-wide{max-width:600px;max-height:86vh;overflow-y:auto}
.adm-modal-wide .adm-refhead,.adm-modal-wide .adm-refrow{padding:6px 0}
.adm-pm-head{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.cell-name .a.big,.adm-pm-head .a.big{width:48px;height:48px;min-width:48px;font-size:16px;border-radius:13px}
.adm-pm-name{font-size:18px;font-weight:800;line-height:1.2}
.adm-em{font-size:12.5px;color:var(--txt-mute)}
.adm-pm-req{display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(94,200,255,.06);border:1px solid rgba(94,200,255,.18);border-radius:13px;padding:12px 15px;margin-bottom:16px;flex-wrap:wrap}
.adm-pm-req>div span{display:block;color:var(--txt-mute);font-size:11.5px;margin-bottom:3px}
.adm-pm-req>div b{font-family:ui-monospace,Menlo,monospace;font-size:15px;letter-spacing:.3px}
.adm-pm-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:6px}
.adm-pm-kpis>div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;padding:10px 5px;text-align:center}
.adm-pm-kpis b{display:block;font-size:15px;font-weight:800;margin-bottom:2px}
.adm-pm-kpis span{font-size:10px;color:var(--txt-mute)}
.adm-pm-sec{font-size:13px;font-weight:700;color:var(--txt);margin:18px 0 9px}
.adm-payrow{display:grid;grid-template-columns:1fr 1.2fr auto;gap:10px;align-items:center;padding:9px 12px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;margin-bottom:6px;font-size:13px}
.adm-payd{color:var(--txt-soft)}
.adm-paym{color:var(--txt-mute);font-size:12px}
.adm-paya{font-weight:700;text-align:right}
.adm-refrow.paid{background:rgba(124,240,200,.10);border-radius:8px;margin:2px -8px;padding-left:8px;padding-right:8px;border-bottom:1px solid rgba(124,240,200,.18)}
.adm-refrow.paid .adm-refn{color:var(--txt);font-weight:600}
.adm-refrow.pending{background:rgba(255,211,110,.05);border-radius:8px;margin:2px -8px;padding-left:8px;padding-right:8px}
.adm-paidtick{color:#7cf0c8;font-weight:800;margin-right:1px}
.adm-paidcnt{color:#7cf0c8;font-weight:600}
.adm-paidlbl{display:inline-block;font-size:10px;font-weight:700;color:#021018;background:#7cf0c8;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.adm-pendlbl{display:inline-block;font-size:10px;font-weight:700;color:#ffd36e;background:rgba(255,211,110,.14);border:1px solid rgba(255,211,110,.3);border-radius:5px;padding:0 6px;margin-left:6px;vertical-align:middle}
@media(max-width:560px){.adm-pm-kpis{grid-template-columns:repeat(2,1fr)}}

/* project-step block (наш проект + проект ученика) */
.ls-proj{background:linear-gradient(180deg,rgba(124,168,255,.08),rgba(124,240,200,.04));border:1px solid rgba(124,168,255,.28);border-radius:14px;padding:14px 16px;margin:16px 0}
.ls-proj .lp-tag{font-size:11.5px;font-weight:700;letter-spacing:1px;color:#9db8ff;margin-bottom:11px}
.ls-proj .lp-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ls-proj .lp-our,.ls-proj .lp-you{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;line-height:1.55;color:var(--txt-soft)}
.ls-proj .lp-our{border-left:3px solid #6f9bff}
.ls-proj .lp-you{border-left:3px solid #7cf0c8}
.ls-proj .lp-cap{font-size:12px;font-weight:600;color:var(--txt);margin-bottom:6px}
@media(max-width:640px){.ls-proj .lp-cols{grid-template-columns:1fr}}

/* real-photo slot (📷) */
.ls-photo{margin:16px 0}
.ls-photo img{max-width:100%;border-radius:12px;border:1px solid var(--line);display:block}
.ls-photo .ph-empty{background:rgba(94,200,255,.06);border:1px dashed rgba(94,200,255,.35);border-radius:12px;padding:14px 16px;font-size:13px;color:var(--txt-soft);line-height:1.55}
.ls-photo .ph-prompt{margin-top:8px;background:#0f1c2b;color:#cfe6ff;border-radius:8px;padding:9px 12px;font-family:Consolas,monospace;font-size:12px;line-height:1.5;border-left:3px solid #5ec8ff;white-space:pre-wrap}
.ls-photo figcaption{margin-top:8px;font-size:12.5px;color:var(--txt-mute)}

/* starter recommendation block (🎯) */
.ls-rec{background:linear-gradient(180deg,rgba(124,240,200,.10),rgba(94,200,255,.04));border:1px solid rgba(124,240,200,.32);border-radius:14px;padding:13px 16px;margin:16px 0}
.ls-rec .rec-h{font-size:12.5px;font-weight:700;color:#7cf0c8;margin-bottom:6px;letter-spacing:.3px}
.ls-rec .rec-b{font-size:14px;line-height:1.6;color:var(--txt-soft)}

/* completion: project result comparison */
.cmp-proj{margin:6px 0 22px;text-align:left}
.cmp-proj-h{font-size:13px;font-weight:700;color:#9db8ff;letter-spacing:.3px;margin-bottom:12px;text-align:center}
.cmp-proj-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp-pcol{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.cmp-pcol.our{border-left:3px solid #6f9bff}
.cmp-pcol.you{border-left:3px solid #7cf0c8}
.cpc-cap{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:10px}
.cmp-pcol ul{list-style:none;margin:0;padding:0}
.cmp-pcol li{font-size:13.5px;line-height:1.5;color:var(--txt-soft);padding:4px 0 4px 22px;position:relative}
.cmp-pcol.our li:before{content:'•';position:absolute;left:6px;color:#6f9bff;font-weight:700}
.cmp-pcol.you ul.chk li:before{content:'☐';position:absolute;left:2px;color:#7cf0c8}
@media(max-width:640px){.cmp-proj-cols{grid-template-columns:1fr}}

/* interactive project checklist */
.cmp-pcol.you ul.chk li.chk-item{padding-left:26px;cursor:pointer;list-style:none}
.cmp-pcol.you ul.chk li.chk-item:before{content:none}
.chk-item .cbx{position:absolute;left:0;top:3px;width:16px;height:16px;border:1.6px solid #7cf0c8;border-radius:4px;box-sizing:border-box;transition:background .12s}
.chk-item.done .cbx{background:#7cf0c8}
.chk-item.done .cbx:after{content:"✓";position:absolute;left:2px;top:-3px;color:#08231a;font-size:13px;font-weight:800}
.chk-item.done{color:var(--txt)}
.chk-item:hover .cbx{box-shadow:0 0 0 3px rgba(124,240,200,.15)}