/* ============================================================
   style.css — لا تعدل فيه
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --bg:        #07070f;
  --surface:   #0d0d1a;
  --card:      #111120;
  --card2:     #16162a;
  --border:    #1e1e35;
  --border2:   #2a2a45;
  --accent:    #f97316;
  --accent2:   #fb923c;
  --abg:       rgba(249,115,22,.12);
  --abg2:      rgba(249,115,22,.06);
  --text:      #ededf5;
  --muted:     #55557a;
  --muted2:    #8888aa;
  --green:     #22c55e;
  --greenbg:   rgba(34,197,94,.1);
  --gold:      #fbbf24;
  --red:       #ef4444;
  --blue:      #3b82f6;
  --r:         14px;
  --shadow:    0 24px 64px rgba(0,0,0,.55);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Tajawal',sans-serif;
  overflow-x:hidden; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea { font-family:inherit; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:10px; }

/* ── PAGE SYSTEM ─────────────────────────────────── */
.page { display:none; }
.page.active { display:block; }
#coursePage.active { display:flex; flex-direction:column; min-height:100vh; }
#authPage.active   { display:flex; align-items:center; justify-content:center; min-height:100vh; }
#thankYouPage.active { display:flex; align-items:center; justify-content:center; min-height:100vh; }

/* ══════════════ NAV ══════════════ */
.nav {
  position:fixed; top:0; width:100%; z-index:200;
  background:rgba(7,7,15,.9); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  height:62px; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-family:'JetBrains Mono',monospace;
  font-size:1.1rem; color:var(--accent); letter-spacing:-1px;
}
.nav-logo span { color:var(--text); }
.nav-right { display:flex; align-items:center; gap:.8rem; }
.nav-social { display:flex; gap:.4rem; }
.nav-social a {
  width:30px; height:30px; border-radius:7px;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; transition:all .2s;
}
.nav-social a:hover { border-color:var(--accent); transform:translateY(-2px); }
.nav-links { display:flex; gap:1.2rem; align-items:center; }
.nav-links a { color:var(--muted2); font-size:.88rem; transition:color .2s; }
.nav-links a:hover { color:var(--text); }

.btn-nav-cta {
  background:var(--accent); color:#fff;
  padding:.4rem 1.1rem; border-radius:8px;
  font-weight:700; font-size:.85rem; transition:opacity .2s;
}
.btn-nav-cta:hover { opacity:.85; }
.btn-nav-ghost {
  background:var(--card); border:1px solid var(--border);
  color:var(--muted2); padding:.38rem .9rem; border-radius:8px;
  font-size:.82rem; font-weight:600; transition:all .2s;
  display:flex; align-items:center; gap:.35rem;
}
.btn-nav-ghost:hover { border-color:var(--accent); color:var(--accent); }
.user-chip {
  background:var(--card); border:1px solid var(--border);
  padding:.35rem .85rem; border-radius:100px;
  font-size:.78rem; color:var(--muted2);
  display:flex; align-items:center; gap:.35rem;
}

/* ══════════════ HERO ══════════════ */
.hero {
  padding-top:62px; min-height:100vh;
  display:flex; align-items:center;
  position:relative; overflow:hidden;
}
.hero-mesh {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 55% at 15% 50%, rgba(249,115,22,.07),transparent 65%),
    radial-gradient(ellipse 40% 50% at 85% 20%, rgba(251,146,60,.05),transparent 60%),
    radial-gradient(ellipse 30% 40% at 60% 80%, rgba(249,115,22,.04),transparent 55%);
}
.hero-dots {
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(249,115,22,.06) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
}
.hero-inner {
  max-width:1180px; margin:0 auto; padding:5rem 2rem 4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
  position:relative; z-index:1;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--abg); border:1px solid rgba(249,115,22,.22);
  padding:.3rem .95rem; border-radius:100px;
  font-size:.78rem; color:var(--accent2); margin-bottom:1.4rem;
}
.pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pdot 2s infinite; }
@keyframes pdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.7)} }

.hero h1 {
  font-size:clamp(2rem,3.8vw,3.1rem); font-weight:900; line-height:1.2;
  margin-bottom:1.2rem; letter-spacing:-.4px;
}
.hero h1 em { font-style:normal; color:var(--accent); }
.hero-sub { font-size:1rem; color:var(--muted2); line-height:1.85; margin-bottom:2rem; max-width:440px; }

.hero-stats { display:flex; gap:2.2rem; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.stat-num { font-size:1.9rem; font-weight:900; color:var(--accent); font-family:'JetBrains Mono',monospace; line-height:1; }
.stat-lbl { font-size:.75rem; color:var(--muted); margin-top:.2rem; }

.hero-btns { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.hero-social-proof { display:flex; align-items:center; gap:.8rem; font-size:.82rem; color:var(--muted2); }
.tiny-avatars { display:flex; }
.tiny-avatars span {
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--bg); margin-left:-7px;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:700;
}
.ta1 { background:linear-gradient(135deg,#f97316,#ea580c); }
.ta2 { background:linear-gradient(135deg,#3b82f6,#2563eb); }
.ta3 { background:linear-gradient(135deg,#22c55e,#16a34a); }
.ta4 { background:linear-gradient(135deg,#a855f7,#7c3aed); }

/* ── Video Card ─ */
.v-wrap { position:relative; }
.v-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow), 0 0 0 1px var(--border);
  position:relative;
}
.v-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.v-thumb { width:100%; aspect-ratio:16/9; background:#000; position:relative; overflow:hidden; }
.v-thumb iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.v-foot {
  padding:1rem 1.3rem; display:flex; align-items:center; gap:.8rem;
  border-top:1px solid var(--border);
}
.v-ava {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#ea580c);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.v-t { font-weight:700; font-size:.88rem; }
.v-s { font-size:.73rem; color:var(--muted); }
.v-pill {
  margin-right:auto; background:var(--abg); color:var(--accent2);
  border:1px solid rgba(249,115,22,.22); padding:.18rem .6rem;
  border-radius:100px; font-size:.7rem; font-weight:700;
}
.ft {
  position:absolute; background:var(--card2); border:1px solid var(--border2);
  border-radius:9px; padding:.4rem .85rem; font-size:.7rem; font-weight:600;
  display:flex; align-items:center; gap:.3rem;
  box-shadow:0 8px 24px rgba(0,0,0,.4); animation:fy 3s ease-in-out infinite;
}
.ft1{top:-16px;right:-14px} .ft2{bottom:60px;right:-38px;animation-delay:1s} .ft3{top:32%;left:-42px;animation-delay:2s}
@keyframes fy{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ══════════════ BUTTONS ══════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.9rem; border-radius:11px; font-size:.95rem; font-weight:700;
  transition:all .2s; cursor:pointer; white-space:nowrap;
}
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 0 28px rgba(249,115,22,.22); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 38px rgba(249,115,22,.38); }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--border2); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-ghost { background:transparent; color:var(--muted2); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--text); border-color:var(--border2); }
.btn-green { background:var(--greenbg); color:var(--green); border:1px solid rgba(34,197,94,.25); }
.btn-green:hover { background:rgba(34,197,94,.18); }
.btn-sm { padding:.5rem 1.1rem; font-size:.83rem; border-radius:9px; }
.btn-full { width:100%; }

/* ══════════════ SECTIONS ══════════════ */
.sec { max-width:1180px; margin:0 auto; padding:5rem 2rem; }
.sec-lbl { font-size:.73rem; font-weight:700; color:var(--accent); letter-spacing:3px; text-transform:uppercase; margin-bottom:.55rem; }
.sec-title { font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:900; line-height:1.2; margin-bottom:.75rem; }
.sec-sub { color:var(--muted2); font-size:.97rem; line-height:1.75; max-width:540px; }

/* ── features ─ */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.8rem; }
.feat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.5rem; transition:all .3s;
}
.feat-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 36px rgba(249,115,22,.07); }
.feat-ic { width:42px; height:42px; border-radius:10px; background:var(--abg); border:1px solid rgba(249,115,22,.14); display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:1rem; }
.feat-card h3 { font-size:.95rem; font-weight:700; margin-bottom:.45rem; }
.feat-card p { font-size:.85rem; color:var(--muted2); line-height:1.7; }

/* ── curriculum ─ */
.cur-list { margin-top:2.2rem; }
.cur-row {
  display:flex; align-items:center; gap:.9rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:11px; padding:.95rem 1.3rem; margin-bottom:.55rem;
  cursor:pointer; transition:border-color .2s;
}
.cur-row:hover { border-color:var(--accent); }
.cur-num { font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--muted); min-width:24px; }
.cur-name { flex:1; font-weight:600; font-size:.9rem; }
.cur-badge { font-size:.67rem; font-weight:700; padding:.17rem .6rem; border-radius:100px; letter-spacing:.5px; white-space:nowrap; }
.cb-free { background:var(--greenbg); color:var(--green); border:1px solid rgba(34,197,94,.22); }
.cb-paid { background:rgba(122,122,154,.07); color:var(--muted); border:1px solid var(--border); }
.more-hint { text-align:center; padding:.75rem; color:var(--muted); font-size:.82rem; border:1px dashed var(--border); border-radius:11px; margin-top:.4rem; }

/* ── counter band ─ */
.count-band { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:3rem 2rem; text-align:center; }
.big-count { font-size:4.5rem; font-weight:900; color:var(--accent); font-family:'JetBrains Mono',monospace; line-height:1; }
.count-lbl { color:var(--muted2); font-size:.95rem; margin-top:.4rem; }

/* ── pricing ─ */
.price-card {
  max-width:480px; margin:2.5rem auto 0;
  background:var(--card); border:1px solid var(--accent);
  border-radius:20px; padding:2.3rem; text-align:center;
  position:relative; overflow:hidden;
  box-shadow:0 0 80px rgba(249,115,22,.07);
}
.price-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--gold)); }
.price-hot { position:absolute; top:1.3rem; left:1.3rem; background:linear-gradient(135deg,var(--accent),var(--gold)); color:#fff; font-size:.68rem; font-weight:800; padding:.25rem .75rem; border-radius:100px; letter-spacing:1px; }
.price-big { font-size:3.6rem; font-weight:900; color:var(--accent); font-family:'JetBrains Mono',monospace; line-height:1; margin-top:1rem; }
.price-sm { color:var(--muted2); font-size:.85rem; margin-top:.25rem; margin-bottom:1.6rem; }
.pf-list { text-align:right; margin-bottom:1.8rem; }
.pf-list li { list-style:none; padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.9rem; display:flex; align-items:center; gap:.65rem; }
.pf-list li:last-child { border:none; }
.pfc { color:var(--green); font-size:.8rem; }

/* ── guarantee ─ */
.guar {
  max-width:680px; margin:1.8rem auto 0;
  background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(34,197,94,.02));
  border:1px solid rgba(34,197,94,.18); border-radius:14px;
  padding:1.8rem; display:flex; gap:1.3rem; align-items:flex-start;
}
.guar-ic { font-size:2.3rem; flex-shrink:0; }
.guar-title { font-size:1.05rem; font-weight:800; color:var(--green); margin-bottom:.35rem; }
.guar-text { color:var(--muted2); font-size:.87rem; line-height:1.7; }

/* ── faq ─ */
.faq-wrap { max-width:740px; margin:2.3rem auto 0; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:11px; margin-bottom:.6rem; overflow:hidden; transition:border-color .2s; }
.faq-item.open { border-color:var(--border2); }
.faq-q { padding:1rem 1.3rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:.92rem; gap:1rem; }
.faq-ic { color:var(--accent); font-size:1.1rem; transition:transform .3s; flex-shrink:0; font-style:normal; }
.faq-item.open .faq-ic { transform:rotate(45deg); }
.faq-a { padding:0 1.3rem; max-height:0; overflow:hidden; transition:max-height .35s ease, padding .3s; color:var(--muted2); font-size:.87rem; line-height:1.75; }
.faq-item.open .faq-a { max-height:200px; padding:0 1.3rem 1.1rem; }

/* ── testimonials ─ */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.3rem; }
.testi-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.4rem; }
.stars { color:var(--gold); font-size:.82rem; margin-bottom:.8rem; }
.testi-txt { color:var(--muted2); font-size:.86rem; line-height:1.7; margin-bottom:.9rem; }
.testi-name { font-weight:700; font-size:.86rem; }
.testi-role { font-size:.75rem; color:var(--muted); }

/* ── community ─ */
.comm-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; max-width:620px; margin:2.3rem auto 0; }
.comm-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.8rem; text-align:center;
  transition:all .3s; display:block;
}
.comm-card:hover { transform:translateY(-4px); }
.comm-card.tg:hover { border-color:#24a1de; box-shadow:0 12px 36px rgba(36,161,222,.1); }
.comm-card.wa:hover { border-color:#25d366; box-shadow:0 12px 36px rgba(37,211,102,.1); }
.comm-ic { font-size:2.3rem; margin-bottom:.7rem; }
.comm-nm { font-weight:800; font-size:.95rem; margin-bottom:.25rem; }
.comm-desc { font-size:.8rem; color:var(--muted2); }

/* ── footer ─ */
.footer { background:var(--surface); border-top:1px solid var(--border); padding:3rem 2rem 1.8rem; }
.footer-inner { max-width:1180px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.f-brand .flogo { font-family:'JetBrains Mono',monospace; font-size:1.1rem; color:var(--accent); margin-bottom:.65rem; }
.f-brand p { color:var(--muted2); font-size:.84rem; line-height:1.7; max-width:240px; }
.f-social { display:flex; gap:.45rem; margin-top:1.1rem; flex-wrap:wrap; }
.fsoc { width:32px; height:32px; border-radius:7px; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:all .2s; }
.fsoc:hover { border-color:var(--accent); transform:translateY(-2px); }
.f-col h4 { font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:.9rem; }
.f-col a { display:block; color:var(--muted2); font-size:.84rem; margin-bottom:.45rem; transition:color .2s; }
.f-col a:hover { color:var(--text); }
.footer-bot { padding-top:1.3rem; display:flex; justify-content:space-between; align-items:center; font-size:.77rem; color:var(--muted); flex-wrap:wrap; gap:.5rem; }

/* ══════════════ AUTH PAGE ══════════════ */
.auth-wrap { position:relative; width:100%; display:flex; align-items:center; justify-content:center; padding:2rem; }
.auth-glow { position:fixed; inset:0; background:radial-gradient(ellipse 50% 50% at 50% 40%, rgba(249,115,22,.05),transparent); pointer-events:none; }
.auth-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:2.3rem; width:100%; max-width:400px;
  position:relative; z-index:1; box-shadow:var(--shadow);
}
.auth-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:20px 20px 0 0; }
.auth-logo { text-align:center; margin-bottom:1.6rem; }
.auth-logo-txt { font-family:'JetBrains Mono',monospace; font-size:1.35rem; color:var(--accent); }
.auth-logo-sub { color:var(--muted2); font-size:.8rem; margin-top:.25rem; }
.auth-tabs { display:flex; background:var(--bg); border-radius:9px; padding:3px; margin-bottom:1.6rem; }
.a-tab { flex:1; padding:.55rem; border-radius:7px; background:transparent; color:var(--muted2); font-size:.87rem; font-weight:600; transition:all .2s; cursor:pointer; }
.a-tab.active { background:var(--card2); color:var(--text); }
.f-grp { margin-bottom:1rem; }
.f-lbl { font-size:.78rem; color:var(--muted2); margin-bottom:.35rem; display:block; font-weight:600; }
.f-inp {
  width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:9px; padding:.7rem .95rem; color:var(--text);
  font-size:.9rem; outline:none; transition:border-color .2s;
}
.f-inp:focus { border-color:var(--accent); }
.f-inp::placeholder { color:var(--muted); }
.auth-or { text-align:center; color:var(--muted); font-size:.77rem; margin:1rem 0; position:relative; }
.auth-or::before,.auth-or::after { content:''; position:absolute; top:50%; width:43%; height:1px; background:var(--border); }
.auth-or::before { right:0; } .auth-or::after { left:0; }
.btn-google {
  width:100%; background:var(--card2); border:1px solid var(--border2);
  color:var(--text); padding:.72rem; border-radius:9px;
  font-size:.9rem; font-weight:600; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
}
.btn-google:hover { border-color:var(--blue); }
.err-msg { color:var(--red); font-size:.78rem; margin-top:.4rem; display:none; }
.ok-msg  { color:var(--green); font-size:.78rem; margin-top:.4rem; display:none; }
.auth-note { text-align:center; font-size:.78rem; color:var(--muted2); margin-top:1rem; }
.auth-note a { color:var(--accent); }
.spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; display:none; }
@keyframes sp { to{transform:rotate(360deg)} }

/* ══════════════ COURSE PAGE ══════════════ */
.c-nav {
  background:var(--surface); border-bottom:1px solid var(--border);
  height:56px; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100; flex-shrink:0;
}
.c-logo { font-family:'JetBrains Mono',monospace; color:var(--accent); font-size:.9rem; }
.c-nav-r { display:flex; align-items:center; gap:.7rem; }
.c-btn { background:var(--card); border:1px solid var(--border); color:var(--muted2); padding:.33rem .85rem; border-radius:7px; font-size:.8rem; font-weight:600; transition:all .2s; }
.c-btn:hover { border-color:var(--accent); color:var(--accent); }

.c-body { display:grid; grid-template-columns:295px 1fr; flex:1; overflow:hidden; height:calc(100vh - 56px); }

/* sidebar */
.c-side { background:var(--surface); border-left:1px solid var(--border); overflow-y:auto; display:flex; flex-direction:column; }
.c-side::-webkit-scrollbar { width:3px; }
.c-side::-webkit-scrollbar-thumb { background:var(--border); }
.c-side-head { padding:1.1rem 1.2rem .9rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.c-side-title { font-size:.85rem; font-weight:800; margin-bottom:.7rem; }
.prog-bar { background:var(--border); border-radius:100px; height:4px; }
.prog-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width .5s; }
.prog-txt { font-size:.7rem; color:var(--muted); margin-top:.28rem; }
.c-search { margin:.7rem 1.2rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.45rem .75rem; display:flex; align-items:center; gap:.45rem; }
.c-search input { flex:1; background:none; border:none; color:var(--text); font-size:.8rem; outline:none; }
.c-search input::placeholder { color:var(--muted); }

.ll {
  display:flex; align-items:center; gap:.65rem;
  padding:.7rem 1.2rem; cursor:pointer; transition:background .12s;
  border-bottom:1px solid rgba(30,30,53,.6); position:relative;
}
.ll:hover { background:rgba(249,115,22,.04); }
.ll.active { background:rgba(249,115,22,.07); }
.ll.active::after { content:''; position:absolute; right:0; top:0; bottom:0; width:3px; background:var(--accent); }
.ll-n { font-family:'JetBrains Mono',monospace; font-size:.64rem; color:var(--muted); min-width:19px; }
.ll-ic { width:36px; height:22px; border-radius:5px; background:var(--card); display:flex; align-items:center; justify-content:center; font-size:.68rem; flex-shrink:0; }
.ll-ic.free { background:var(--greenbg); }
.ll-inf { flex:1; min-width:0; }
.ll-nm { font-size:.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ll-dr { font-size:.68rem; color:var(--muted); }
.ll-st { font-size:.72rem; flex-shrink:0; }

/* main */
.c-main { overflow-y:auto; background:var(--bg); }
.c-main::-webkit-scrollbar { width:3px; }
.pl-wrap { background:#000; width:100%; aspect-ratio:16/9; position:relative; max-height:62vh; }
.pl-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.lock-scr {
  position:absolute; inset:0; background:rgba(7,7,15,.93);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
}
.lock-scr .lic { font-size:2.8rem; }
.lock-scr h3 { font-size:1.15rem; font-weight:800; }
.lock-scr p { color:var(--muted2); text-align:center; max-width:280px; font-size:.87rem; line-height:1.65; }
.l-panel { padding:1.7rem; max-width:840px; }
.l-title { font-size:1.35rem; font-weight:900; margin-bottom:.45rem; }
.l-meta { display:flex; gap:1.1rem; color:var(--muted2); font-size:.8rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.l-desc { color:var(--muted2); font-size:.88rem; line-height:1.8; }
.l-acts { display:flex; gap:.7rem; margin-top:1.3rem; flex-wrap:wrap; }
.notes-area { margin-top:1.1rem; display:none; }
.notes-area.open { display:block; }
.n-ta {
  width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:9px; padding:.9rem; color:var(--text); font-family:inherit;
  font-size:.87rem; resize:vertical; min-height:90px; outline:none;
  transition:border-color .2s; line-height:1.7;
}
.n-ta:focus { border-color:var(--accent); }

/* admin */
.adm-fab { position:fixed; bottom:1.5rem; left:1.5rem; background:var(--card); border:1px solid var(--border); color:var(--muted2); padding:.55rem 1rem; border-radius:100px; font-size:.78rem; font-weight:600; z-index:300; transition:all .2s; display:flex; align-items:center; gap:.35rem; }
.adm-fab:hover { border-color:var(--accent); color:var(--accent); }
.adm-drw { position:fixed; bottom:4.2rem; left:1.5rem; background:var(--card2); border:1px solid var(--border); border-radius:14px; padding:1.3rem; width:280px; z-index:300; display:none; box-shadow:var(--shadow); max-height:72vh; overflow-y:auto; }
.adm-drw.open { display:block; }
.adm-drw h3 { font-size:.82rem; font-weight:800; color:var(--accent); margin-bottom:.9rem; }
.adm-row { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.78rem; gap:.5rem; }
.adm-row:last-of-type { border:none; }
.adm-nm { flex:1; color:var(--muted2); font-size:.75rem; }
.tog { position:relative; width:36px; height:19px; cursor:pointer; flex-shrink:0; }
.tog input { display:none; }
.tog-sl { position:absolute; inset:0; background:var(--border); border-radius:100px; transition:.3s; }
.tog-sl::before { content:''; position:absolute; width:13px; height:13px; border-radius:50%; background:var(--muted); top:3px; right:3px; transition:.3s; }
.tog input:checked + .tog-sl { background:var(--green); }
.tog input:checked + .tog-sl::before { background:#fff; transform:translateX(-17px); }
.adm-save { width:100%; margin-top:.8rem; background:var(--accent); color:#fff; padding:.58rem; border-radius:8px; font-weight:700; font-size:.82rem; transition:opacity .2s; }
.adm-save:hover { opacity:.85; }

/* ══════════════ THANK YOU PAGE ══════════════ */
.ty-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:2.8rem; width:90%; max-width:460px;
  text-align:center; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.ty-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green),var(--accent)); }
.ty-ic { font-size:3.2rem; margin-bottom:1rem; }
.ty-title { font-size:1.5rem; font-weight:900; margin-bottom:.6rem; }
.ty-sub { color:var(--muted2); font-size:.9rem; line-height:1.7; margin-bottom:2rem; }
.ty-code-box { background:var(--bg); border:1px solid var(--green); border-radius:11px; padding:1.2rem; margin-bottom:1.8rem; }
.ty-code-lbl { font-size:.72rem; color:var(--muted2); margin-bottom:.35rem; }
.ty-code { font-size:1.9rem; font-weight:900; color:var(--green); font-family:'JetBrains Mono',monospace; letter-spacing:5px; }
.ty-code-note { font-size:.75rem; color:var(--muted); margin-top:.4rem; }

/* ══════════════ MODALS ══════════════ */
.m-ov { display:none; position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:500; align-items:center; justify-content:center; }
.m-ov.open { display:flex; }
.modal {
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:2.3rem; width:90%; max-width:430px;
  text-align:center; position:relative; box-shadow:0 40px 80px rgba(0,0,0,.6);
}
.modal::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:20px 20px 0 0; }
.m-x { position:absolute; top:.9rem; left:.9rem; color:var(--muted); font-size:1rem; transition:color .2s; }
.m-x:hover { color:var(--text); }
.m-ic { font-size:2.3rem; margin-bottom:.9rem; }
.modal h2 { font-size:1.35rem; font-weight:900; margin-bottom:.55rem; }
.modal p { color:var(--muted2); line-height:1.7; margin-bottom:1.3rem; font-size:.9rem; }
.m-price { background:var(--abg2); border:1px solid rgba(249,115,22,.15); border-radius:11px; padding:.95rem; margin-bottom:1.3rem; }
.m-big { font-size:2rem; font-weight:900; color:var(--accent); font-family:'JetBrains Mono',monospace; }
.m-sm { color:var(--muted2); font-size:.8rem; }
.m-note { font-size:.75rem; color:var(--muted); margin-top:.9rem; }
.gum-btn { display:block; width:100%; background:var(--accent); color:#fff; padding:.92rem; border-radius:11px; font-size:.97rem; font-weight:800; text-align:center; transition:all .2s; box-shadow:0 0 28px rgba(249,115,22,.22); }
.gum-btn:hover { opacity:.9; transform:translateY(-1px); }

/* ══════════════ TOAST ══════════════ */
.toast { position:fixed; bottom:1.8rem; left:50%; transform:translateX(-50%); background:var(--card2); border:1px solid var(--border2); color:var(--text); padding:.65rem 1.4rem; border-radius:100px; font-size:.82rem; font-weight:600; z-index:999; box-shadow:0 10px 28px rgba(0,0,0,.4); animation:tin .3s ease; white-space:nowrap; }
@keyframes tin { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ══════════════ ANIMATIONS ══════════════ */
.fi  { animation:fu .55s ease both; }
.fi1 { animation:fu .55s .08s ease both; }
.fi2 { animation:fu .55s .16s ease both; }
@keyframes fu { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.rv { opacity:0; transform:translateY(24px); transition:all .6s ease; }
.rv.on { opacity:1; transform:translateY(0); }

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:960px) {
  .hero-inner { grid-template-columns:1fr; gap:2.5rem; }
  .v-wrap { max-width:500px; margin:0 auto; }
  .ft { display:none; }
  .feat-grid { grid-template-columns:1fr 1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .c-body { grid-template-columns:1fr; }
  .c-side { display:none; }
  .comm-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .feat-grid { grid-template-columns:1fr; }
  .hero-inner { padding:2rem 1.2rem 3rem; }
  .nav-links a:not(.btn-nav-cta):not(.btn-nav-ghost) { display:none; }
  .nav-social { display:none; }
  .footer-grid { grid-template-columns:1fr; }
}