@import url('fonts.css');

*{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
::-webkit-scrollbar{width:0;height:0;display:none}

:root{
  --bg:        #F0E7D5;
  --surface:   rgba(255,252,244,.94);
  --surface-2: rgba(255,248,236,.97);
  --surface-3: rgba(255,253,247,.99);
  --line:      rgba(168,108,14,.30);
  --stroke:    2px;
  --surface-solid: rgba(255,253,247,.99);

  --bg-blur: 1px;
  --glow-blur: 4px;

  --gold:      #FCAC10;
  --gold-ink:  #7A4A00;
  --gold-soft: #FFD36B;
  --gold-dim:  rgba(252,172,16,.32);
  --red:       #C62828;

  --text:      #15161A;
  --muted:     #3F434C;

  --radius-lg: 30px;
  --radius:    24px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(90,55,10,.10);
  --shadow:    0 4px 14px -4px rgba(90,55,10,.18);
  --shadow-lg: 0 14px 34px -10px rgba(90,55,10,.26);
  --drop:      0 1px 3px rgba(90,55,10,.12);
  --glow:      0 6px 18px -6px rgba(252,172,16,.25);
  --ring:      0 0 0 2px var(--gold-dim);

--wrap:      1160px;
--wrap-content: 860px;

  --font: 'Vazirmatn',system-ui,'Segoe UI',Tahoma,sans-serif;
  --font-display: 'Vazirmatn',system-ui,'Segoe UI',Tahoma,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:2;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60rem 34rem at 50% -10%, rgba(252,172,16,.08), transparent 62%);
}


@property --blob-peach-x{ syntax:'<percentage>'; inherits:false; initial-value:68.1%; }
@property --blob-peach-y{ syntax:'<percentage>'; inherits:false; initial-value:46.03%; }
@property --blob-butter-x{ syntax:'<percentage>'; inherits:false; initial-value:25.17%; }
@property --blob-butter-y{ syntax:'<percentage>'; inherits:false; initial-value:75.99%; }

#dot-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  overflow:hidden;
  background:#F0E7D5;
}
#dot-bg .db__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(74rem 58rem at var(--blob-peach-x) var(--blob-peach-y), rgba(255,150,40,.95) 0%, rgba(255,150,40,.55) 30%, rgba(255,150,40,.16) 52%, transparent 70%),
    radial-gradient(60rem 50rem at var(--blob-butter-x) var(--blob-butter-y), rgba(255,203,70,1) 0%, rgba(255,203,70,.60) 46%, transparent 70%),
    radial-gradient(78rem 58rem at 53.11% 12.71%, rgba(255,250,240,1) 0%, rgba(255,250,240,.55) 50%, transparent 70%);
  animation:blob-float 10s ease-in-out infinite;
}
@keyframes blob-float{
  0%,100%{
    --blob-peach-x:68.1%;  --blob-peach-y:46.03%;
    --blob-butter-x:25.17%;--blob-butter-y:75.99%;
  }
  25%{
    --blob-peach-x:62%;  --blob-peach-y:42%;
    --blob-butter-x:30%; --blob-butter-y:70%;
  }
  50%{
    --blob-peach-x:72%;  --blob-peach-y:52%;
    --blob-butter-x:20%; --blob-butter-y:80%;
  }
  75%{
    --blob-peach-x:64%;  --blob-peach-y:48%;
    --blob-butter-x:28%; --blob-butter-y:72%;
  }
}
#dot-bg .db__dots{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.305'/></svg>");
  background-size:120px 120px;
  mix-blend-mode:overlay;
  -webkit-mask-image:radial-gradient(120rem 85rem ellipse at 50% 42%, #fff 0%, rgba(255,255,255,.85) 42%, rgba(255,255,255,.55) 72%, rgba(255,255,255,.22) 100%);
  mask-image:radial-gradient(120rem 85rem ellipse at 50% 42%, #fff 0%, rgba(255,255,255,.85) 42%, rgba(255,255,255,.55) 72%, rgba(255,255,255,.22) 100%);
}

#dot-bg .db__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(78rem 58rem ellipse at 50% 45%, rgba(255,247,236,.55) 0%, rgba(255,247,236,.30) 55%, transparent 100%),
    linear-gradient(180deg, rgba(255,247,236,.10) 0%, rgba(255,247,236,.28) 100%);
}

#dot-bg .db__particles{
  position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(120rem 85rem ellipse at 50% 42%, #fff 0%, rgba(255,255,255,.85) 42%, rgba(255,255,255,.55) 72%, rgba(255,255,255,.20) 100%);
  mask-image:radial-gradient(120rem 85rem ellipse at 50% 42%, #fff 0%, rgba(255,255,255,.85) 42%, rgba(255,255,255,.55) 72%, rgba(255,255,255,.20) 100%);
}
.has-particles #dot-bg .db__dots{display:none}

#dot-bg .db__dots,
#dot-bg .db__particles{
  filter:blur(var(--bg-blur));
  inset:-16px;
}
#dot-bg .db__glow{filter:blur(var(--glow-blur));transform:scaleX(-1)}

@media (prefers-reduced-motion: reduce){
  #dot-bg .db__glow{animation:none}
}

.has-shader .nav,
.has-shader .card,
.has-shader .level,
.has-shader .stage,
.has-shader .form,
.has-shader .fee,
.has-shader .success,
.has-shader .chip,
.has-shader .faq details,
.has-shader .cta__inner,
.has-shader .tutorials__cta,
.has-shader .data-table-wrap,
.has-shader .admin-table-wrap,
.has-shader .footer{
  backdrop-filter:blur(8px) saturate(1.1);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{
  line-height:1.55;margin:0;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.2px;
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:rgba(252,172,16,.55);color:#15161A}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}


.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap--narrow{max-width:var(--wrap)}
.wrap--content{max-width:calc(var(--wrap-content) + 48px)}
.gold{color:var(--gold-ink)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 24px;border:var(--stroke) solid var(--line);border-radius:var(--radius-sm);
  background:var(--gold);
  color:#1A1204;font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer;
  box-shadow:none;
  transition:background .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--gold-soft);transform:none;box-shadow:none}
.btn:active{background:#D4750B}
.btn--lg{padding:13px 28px;font-size:15px;border-radius:14px}
.btn--sm{padding:8px 18px;font-size:13px}
.btn--full{width:100%;margin-top:auto}
.btn--ghost{
  background:var(--surface-2);border-color:var(--line);color:var(--text);box-shadow:none;
}
.btn--ghost:hover{border-color:rgba(252,172,16,.5);color:var(--gold-ink);background:var(--gold-dim);box-shadow:none}

.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,247,236,.72);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 0 12px 4px rgba(0,0,0,.28);
  transition:background .25s ease, box-shadow .25s ease;
}
.nav.is-stuck{
  background:rgba(255,247,236,.90);
  box-shadow:0 0 16px 6px rgba(0,0,0,.34);
}
.nav__inner{
  height:56px;
  display:flex;align-items:center;gap:14px;
}

.brand{display:flex;align-items:center;gap:8px}
.brand img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(252,172,16,.35))}

.wordmark{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.2px;
  line-height:1.4;
  color:var(--text);
  white-space:nowrap;
}
.wordmark .gold{color:var(--gold);-webkit-text-stroke:2px #000;text-shadow:0 0 1.5px rgba(0,0,0,.5);paint-order:stroke fill;position:relative;top:-2px}
.hero__title .gold{color:var(--gold);-webkit-text-stroke:5px #000;text-shadow:none;paint-order:stroke fill;position:relative;top:-2px}
.brand__name .gold{top:2px}
.brand__name,.dash-brand b,.auth-logo h1,.admin-login-brand h2,.admin-sidebar__brand b{
  font-size:21px;
}

.nav__links{flex:1;display:flex;align-items:center;gap:4px}
.nav__links a:not(.btn){
  position:relative;
  padding:9px 13px;
  color:var(--muted);
  font-size:14.5px;font-weight:500;
  transition:color .18s;
}
.nav__links a:not(.btn)::after{
  content:'';position:absolute;
  inset-inline:13px;bottom:1px;height:2px;border-radius:2px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease;
}
.nav__links a:not(.btn):hover{color:var(--text)}
.nav__links a:not(.btn):hover::after{transform:scaleX(.5)}
.nav__links a.active{color:var(--gold-ink)}
.nav__links a.active::after{transform:scaleX(1)}
.nav__links a.btn{color:#1A1204;background:var(--gold);border:var(--stroke) solid var(--line);box-shadow:none}
.nav__links a.btn:hover{color:#1A1204;background:var(--gold-soft)}
.nav__links a.btn--ghost{color:var(--text);background:var(--surface-2);border-color:var(--line);box-shadow:none}
.nav__links a.btn--ghost:hover{color:var(--gold-ink);background:var(--gold-dim)}

.nav__auth{margin-inline-start:auto;display:flex;align-items:center;gap:8px}

.nav__theme{
  flex:none;width:46px;height:46px;display:grid;place-items:center;
  align-self:center;
  padding:0;line-height:1;font-size:13px;
  border:var(--stroke) solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text);cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.nav__theme .nav__theme-icon{
  position:absolute;width:16px;height:16px;display:grid;place-items:center;
  transition:opacity .2s, transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.nav__theme .nav__theme-icon svg{display:block}
.nav__theme .moon{opacity:0;transform:rotate(40deg) scale(.4)}
.nav__theme .sun{opacity:1;transform:none}
[data-theme="dark"] .nav__theme .moon{opacity:1;transform:none}
[data-theme="dark"] .nav__theme .sun{opacity:0;transform:rotate(-40deg) scale(.4)}
.nav__theme:hover{border-color:rgba(252,172,16,.5);color:var(--gold-ink)}
.dash-sidebar .nav__theme,
.admin-sidebar__foot .nav__theme{width:100%;height:44px;margin:14px 0 10px}
.nav__toggle{
  display:none;width:44px;height:44px;padding:0;margin-inline-start:auto;
  background:var(--surface-2);border:var(--stroke) solid var(--line);border-radius:12px;cursor:pointer;
}
.nav__toggle span{display:block;width:18px;height:2px;margin:4px auto;background:var(--text);border-radius:2px;transition:.25s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.hero{position:relative;padding:48px 0 32px;overflow:hidden}
.hero__glow{
  position:absolute;inset:-80px -80px auto auto;width:400px;
  height:250px;pointer-events:none;
  background:radial-gradient(circle at 60% 40%, rgba(252,172,16,.05), transparent 60%);
  filter:blur(18px);
}
.hero__inner{
  position:relative;
  display:grid;grid-template-columns:1.04fr .96fr;gap:36px;align-items:center;
}

.hero__text{
  display:flex;flex-direction:column;align-items:flex-start;
  width:fit-content;max-width:100%;
  justify-self:start;
  align-self:center;
  transform:translateY(-12px);
}

.ide{
  direction:ltr;text-align:left;
  border:2px solid rgba(252,172,16,.55);border-radius:12px;
  background:linear-gradient(180deg,#FFF3DE,#FCDFB0);
  box-shadow:0 0 30px 2px rgba(90,55,10,.32), 0 0 10px 1px rgba(90,55,10,.18);
  overflow:hidden;
  transform:rotate(-1.2deg);
  transition:transform .3s ease;
  font-family:'Cascadia Code',ui-monospace,Consolas,'Vazirmatn',monospace;
  font-size:9px;
}
.ide:hover{transform:rotate(0)}
.ide__bar{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(90,55,10,.05);
}
.ide__dots{display:flex;gap:4px}
.ide__dots i{width:7px;height:7px;border-radius:50%}
.ide__dots i:nth-child(1){background:#ff5f57}
.ide__dots i:nth-child(2){background:#febc2e}
.ide__dots i:nth-child(3){background:#28c840}
.ide__tab{
  align-self:flex-end;margin-left:8px;margin-bottom:-6px;
  display:inline-flex;align-items:center;
  padding:4px 14px;border-radius:8px 8px 0 0;
  background:rgba(0,0,0,.05);
  color:var(--muted);font-size:9px;font-weight:600;
}
.ide__file{margin-left:auto;color:var(--muted);font-size:9px}
.ide__body{padding:8px 0;overflow-x:auto}
.ide__code{margin:0;padding:0;list-style:none;counter-reset:ln}
.ide__code li{
  counter-increment:ln;
  white-space:pre;line-height:1.5;
  padding:0 6px;
  color:var(--text);
}
.ide__code li::before{
  content:counter(ln);
  display:inline-block;width:18px;margin-right:10px;
  color:#9AA0AA;text-align:right;user-select:none;
}
.ide__code li:hover{background:rgba(0,0,0,.04)}
.tok-c{color:#8A9099;font-style:italic}
.tok-k{color:#7C3AED}
.tok-t{color:#B45309}
.tok-f{color:#1D4ED8}
.tok-s{color:#15803D}
.ide__cursor{
  display:inline-block;width:6px;height:12px;vertical-align:-2px;
  background:#15161A;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.ide__status{
  display:flex;align-items:center;gap:10px;
  padding:4px 8px;border-top:1px solid rgba(0,0,0,.08);
  background:rgba(90,55,10,.05);
  font-size:9px;color:var(--muted);
}
.ide__status-ok{margin-left:auto;color:#16A34A}

.chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 18px;border:var(--stroke) solid var(--line);border-radius:13px;
  background:var(--surface);color:var(--muted);font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-sm);
}
.chip .dot{width:8px;height:8px;border-radius:3px;background:var(--gold);box-shadow:0 0 0 4px var(--gold-dim)}
@media (hover: hover) and (pointer: fine){
  .chip .dot{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--gold-dim)}50%{box-shadow:0 0 0 6px rgba(252,172,16,.07)}}

.hero__headline{
  display:grid;
  width:fit-content;max-width:100%;
  justify-items:start;
}
.hero__title{
  margin:24px 0 18px;
  font-size:clamp(30px,4.4vw,52px);letter-spacing:-1px;line-height:1.3;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;
  width:fit-content;
}
.hero__title .line{display:block;text-align:start}
.hero__title .line:last-of-type .gold{
  color:var(--gold);
  -webkit-text-stroke:5px #000;
  text-shadow:0 0 1.5px rgba(0,0,0,.5);
  paint-order:stroke fill;
  position:relative;top:-2px;font-size:1.05em;
}
.hero__lead{width:0;min-width:100%;color:var(--muted);font-size:16.5px;line-height:2.15}
.hero__lead b{color:var(--text);font-weight:600}

.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__note{margin-top:18px;color:var(--muted);font-size:13.5px}

.hero__stats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:44px;
}
.hero__stats li{
  min-width:158px;padding:18px 26px;
  border:var(--stroke) solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
}
.hero__stats b{
  display:block;color:var(--gold-ink);font-family:var(--font-display);
  font-size:26px;line-height:1.5;font-weight:800;
}
.hero__stats span{color:var(--muted);font-size:13.5px}

.hero__lead,.head__sub,.card p,.level__desc,.faq details p,.cta p{
  text-align:justify;
}

.hero__lead,.hero__note,.head__sub,.hero__stats span,
.footer__tagline,.footer__links a,.footer__bottom{
  text-shadow:none;
}

.section{padding:clamp(64px,8.5vw,110px) 0}
.section--alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.015),transparent)}

body > section:first-of-type:not(.hero):not(.auth-page){padding-top:44px}

.head{max-width:680px;margin:0 auto 52px;text-align:start}
.head__kicker{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--gold-ink);
  font-size:13px;font-weight:700;letter-spacing:.3px;
}
.head__kicker::before{
  content:'';width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.head__title{margin:14px 0 12px;font-size:clamp(26px,3.6vw,38px);letter-spacing:0}
.head__sub{color:var(--muted);font-size:16px;line-height:2.15}

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

.card{
  padding:32px 28px;text-align:center;
  border:var(--stroke) solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform, box-shadow, border-color;
}
.card:hover{transform:translateY(-4px);border-color:rgba(252,172,16,.3);box-shadow:var(--shadow)}
.card__icon{
  display:grid;place-items:center;margin:0 auto 14px;
  color:var(--text);
}
.card__icon svg{width:28px;height:28px;display:block}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px;line-height:2.1;text-align:center;text-align-last:center}

.level{
  display:flex;flex-direction:column;text-align:start;
  padding:32px 28px;border:var(--stroke) solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform, box-shadow, border-color;
}
.level:hover{transform:translateY(-6px);border-color:rgba(252,172,16,.32);box-shadow:var(--shadow)}
.level--accent{
  border-color:rgba(252,172,16,.35);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(252,172,16,.1), transparent 62%),
    var(--surface);
  box-shadow:var(--shadow), 0 0 60px -30px rgba(252,172,16,.4);
}
.level__badge{
  align-self:center;padding:6px 18px;border-radius:12px;
  background:var(--surface-2);border:var(--stroke) solid var(--line);
  color:var(--gold-ink);font-size:12.5px;font-weight:700;
  box-shadow:var(--shadow-sm);
}
.level__title{margin:0 0 10px;font-size:27px}
.level__desc{color:var(--muted);font-size:15px;line-height:2.1}
.level__list{margin:16px 0 0;display:grid;gap:12px;text-align:start}
.level__list li{position:relative;padding-inline-start:18px;color:var(--text);font-size:14.5px}
.level__list li::before{
  content:"";position:absolute;inset-inline-start:0;top:12px;
  width:7px;height:7px;border-radius:50%;background:var(--gold);
}

.stages{display:grid;gap:24px}
.stage{
  position:relative;display:flex;gap:24px;align-items:flex-start;
  padding:34px 32px;border:var(--stroke) solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform, box-shadow;
}
.stage:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stage__num{
  flex:none;display:grid;place-items:center;width:54px;height:54px;
  border-radius:17px;background:var(--gold-dim);border:1px solid rgba(252,172,16,.25);
  color:var(--gold-ink);font-family:var(--font-display);font-size:21px;font-weight:800;
  box-shadow:0 0 26px -12px rgba(252,172,16,.4);
}
.stage__body h3{margin:12px 0 10px;font-size:21px}
.stage__body p{color:var(--muted);font-size:15px;line-height:2.15}
.stage__meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.stage__meta li{
  padding:6px 14px;border:var(--stroke) solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--muted);font-size:13px;
}
.tag{
  display:inline-block;padding:5px 15px;border-radius:10px;
  font-size:12.5px;font-weight:700;
  box-shadow:var(--drop);
}
.tag--online{background:var(--gold-dim);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(252,172,16,.16), var(--drop)}
.tag--onsite{background:rgba(226,59,46,.14);color:#FF8577;box-shadow:inset 0 0 0 1px rgba(226,59,46,.18), var(--drop)}

.fee{
  margin:0 auto 26px;padding:22px 30px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;
  text-align:center;
  border:1px solid rgba(252,172,16,.32);border-radius:var(--radius);
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(252,172,16,.1), transparent 62%),
    var(--surface);
  box-shadow:var(--shadow), 0 0 70px -34px rgba(252,172,16,.45);
}
.fee__label{
  padding:6px 16px;border-radius:11px;
  background:var(--gold-dim);color:var(--gold-ink);
  font-size:13px;font-weight:700;
}
.fee b{color:var(--gold-ink);font-family:var(--font-display);font-size:17px;font-weight:800}
.fee small{flex:1 1 100%;color:var(--muted);font-size:13.5px;line-height:1.9}

.form{
  margin-inline:auto;padding:clamp(28px,3.4vw,40px) clamp(22px,3vw,36px);
  border:var(--stroke) solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field[hidden]{display:none}
.field--full{grid-column:1 / -1}
.field label,.field .label{font-size:14.5px;font-weight:600;color:var(--text)}
.req{color:var(--red)}

input, select, textarea, button, optgroup, option {
  font-family: inherit;
}

input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:13px 17px;
  border:var(--stroke) solid var(--line);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);color:var(--text);
  font-family:inherit;font-size:15px;line-height:1.9;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
textarea{resize:vertical;min-height:100px}
select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A6AAB8' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 17px center;
}
/* Native dropdown lists: keep the options readable in dark theme. */
option,optgroup{background:#FFFFFF;color:#15161A}
[data-theme="dark"] option,[data-theme="dark"] optgroup{background:#1C1F2C;color:#F2F3F7}
input::placeholder,textarea::placeholder{color:#5D6070}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(252,172,16,.65);background:rgba(252,172,16,.045);
  box-shadow:var(--ring), 0 0 26px -14px rgba(252,172,16,.4);
}
input.is-error,select.is-error,textarea.is-error{border-color:var(--red)}
.err{min-height:0;color:var(--red);font-size:12.5px;line-height:1.8}

.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice__box{
  display:block;padding:17px 19px;text-align:center;
  border:var(--stroke) solid var(--line);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.choice__box b{display:block;font-size:15.5px}
.choice__box small{color:var(--muted);font-size:13px}
.choice:hover .choice__box{border-color:rgba(252,172,16,.4)}
.choice input:checked + .choice__box{
  border-color:rgba(252,172,16,.6);background:var(--gold-dim);
  box-shadow:0 0 28px -14px rgba(252,172,16,.45);
}
.choice input:focus-visible + .choice__box{box-shadow:var(--ring)}

.check{display:flex;align-items:flex-start;gap:11px;font-weight:400!important;cursor:pointer}
.check input{
  width:20px;height:20px;margin-top:9px;flex:none;
  accent-color:var(--gold-ink);cursor:pointer;
}
.check span{font-size:14.5px;color:var(--muted)}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-top:32px;text-align:center}
.form__hint{color:var(--muted);font-size:13.5px}
.form__hint.is-error{color:var(--red)}

.success{
  max-width:640px;margin:0 auto;padding:48px 34px;text-align:center;
  border:1px solid rgba(252,172,16,.35);border-radius:var(--radius-lg);
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(252,172,16,.1), transparent 62%),
    var(--surface);
  box-shadow:var(--shadow-lg), 0 0 90px -40px rgba(252,172,16,.5);
}
.success__mark{
  width:42px;height:42px;margin:0 auto 16px;display:grid;place-items:center;
  border-radius:13px;background:var(--gold-dim);color:var(--gold-ink);
  box-shadow:inset 0 0 0 1px rgba(252,172,16,.25), 0 12px 28px -14px rgba(252,172,16,.45);
}
.success__mark svg{width:20px;height:20px;display:block}
.success h3{font-size:23px;margin-bottom:10px}
.success p{color:var(--muted);font-size:15px}
.success b{
  color:var(--gold-ink);font-family:ui-monospace,'Vazirmatn', monospace;
  font-size:19px;letter-spacing:1.5px;
}
.success__note{margin:8px 0 26px!important;font-size:13.5px!important}

.faq{display:grid;gap:14px;max-width:680px;margin-inline:auto}
.faq details{
  border:var(--stroke) solid var(--line);border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.faq details[open]{border-color:rgba(252,172,16,.28);box-shadow:var(--shadow)}
.faq summary{
  padding:18px 24px;cursor:pointer;list-style:none;
  font-size:15.5px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:color .18s;
}
.faq summary:hover{color:var(--gold-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:22px;height:22px;border-radius:7px;
  background-color:var(--gold-dim);
  background-image:
    linear-gradient(var(--gold-ink),var(--gold-ink)),
    linear-gradient(var(--gold-ink),var(--gold-ink));
  background-size:10px 2px,2px 10px;
  background-position:center,center;background-repeat:no-repeat;
  transition:background-size .22s cubic-bezier(.2,.8,.3,1),transform .2s;
}
.faq summary:hover::after{transform:scale(1.07)}
.faq details[open] summary::after{background-size:10px 2px,2px 0}
.faq details p{padding:0 24px 22px;color:var(--muted);font-size:15px;line-height:2.1}

.tutorials__cta{
  margin-top:64px;padding:44px 32px;text-align:center;
  border:1px solid rgba(252,172,16,.28);border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(252,172,16,.11), transparent 60%),
    var(--surface);
  box-shadow:var(--shadow), 0 0 80px -40px rgba(252,172,16,.5);
}
.tutorials__cta p{color:var(--muted);font-size:16px;margin-bottom:22px}

.cta{padding:30px 24px 96px}
.cta__inner{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  text-align:center;
  max-width:680px;margin-inline:auto;
  padding:48px 40px;border:1px solid rgba(252,172,16,.3);border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(252,172,16,.13), transparent 58%),
    var(--surface);
  box-shadow:var(--shadow-lg), 0 0 110px -46px rgba(252,172,16,.55);
}
.cta h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:6px;text-align:center}
.cta p{color:var(--muted);font-size:15.5px;text-align:center}

.footer{
  padding:56px 0 30px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.80));
}
.footer__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;
}
.footer__brand{display:flex;flex-direction:column;align-items:center;gap:12px}
.footer__brand img{
  width:66px;height:66px;object-fit:contain;
  filter:drop-shadow(0 14px 32px rgba(252,172,16,.35));
}
.footer__brand b{display:block;font-family:var(--font-display);font-size:21px;font-weight:800}
.footer__brand .footer__tagline{color:var(--muted);font-size:13.5px}
.footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.footer__links a{color:var(--muted);font-size:14.5px;transition:color .18s}
.footer__links a:hover{color:var(--gold-ink)}

.footer__credits{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  margin-top:34px;padding-top:30px;
}
.credit{text-align:center}
.credit__title{
  margin-bottom:14px;color:var(--gold-ink);
  font-size:13.5px;font-weight:700;letter-spacing:.3px;
}
.credit__list{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px 42px}
.credit__list li{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--text);
  font-size:14.5px;font-weight:500;line-height:1.45;
  transition:color .18s;
}
.credit__logo{width:62px;height:62px;object-fit:contain;object-position:top;opacity:1;filter:invert(1)}
.credit__logo--park{width:56px;object-position:50% 2px}
.sponsors__logo{width:110px;filter:invert(1)}
[data-theme="dark"] .credit__logo,
[data-theme="dark"] .sponsors__logo{filter:none}
.credit__list li:hover{color:var(--gold-ink)}

.footer__bottom{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:32px;padding-top:24px;
  text-align:center;color:var(--muted);font-size:13px;
}


.data-table-wrap,.admin-table-wrap{
  overflow-x:auto;
  border:var(--stroke) solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.data-table,.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}
.data-table th,.admin-table th{
  padding:13px 16px;
  text-align:right;
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
  background:var(--surface-2);
  border-bottom:var(--stroke) solid var(--line);
  white-space:nowrap;
}
.data-table td,.admin-table td{
  padding:14px 16px;
  border-bottom:var(--stroke) solid var(--line);
  vertical-align:middle;
  white-space:nowrap;
}
.data-table tr:last-child td,.admin-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover,.admin-table tbody tr:hover{background:rgba(252,172,16,.04)}
.data-table__empty,.admin-table__empty{
  text-align:center;
  color:var(--muted);
  padding:40px!important;
}

.track-code{
  font-family:ui-monospace,'Vazirmatn', monospace;
  font-size:12.5px;
  color:var(--gold-ink);
  letter-spacing:.5px;
}

.badge-level{
  display:inline-block;
  padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:700;
  white-space:nowrap;
}
.badge-level--1{background:rgba(96,165,250,.15);color:#60a5fa}
.badge-level--2{background:var(--gold-dim);color:var(--gold-ink)}

.status-badge{
  display:inline-block;
  padding:4px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;
}
.status-badge--green {background:rgba(74,222,128,.15);color:#4ade80}
.status-badge--yellow{background:rgba(232,164,77,.15);color:#E8A44D}
.status-badge--red   {background:rgba(248,113,113,.15);color:#f87171}
.status-badge--gray  {background:var(--surface-3);color:var(--muted)}
.status-badge--blue  {background:rgba(96,165,250,.15);color:#60a5fa}

.reveal{
  opacity:0;
  transform:translateY(18px);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay, 0ms);
}

.ide.reveal{transform:translateY(18px) rotate(-1.2deg)}
.ide.reveal.is-in{transform:rotate(-1.2deg)}

.ide__code li.is-typing{background:rgba(0,0,0,.05)}
.ide__code li{
  min-height:1.85em;
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  .reveal.is-in{transition:none}
}

@media (min-width:1025px) and (max-width:1440px){
  .ide .ln-skip{display:none}
}
@media (min-width:1441px){
  .hero{min-height:calc(100vh - 56px);display:flex;align-items:center;padding:44px 0}
  .ide{font-size:12.5px}
  .ide__tab,.ide__file{font-size:11px}
  .ide__status{font-size:11px}
  .ide__cursor{height:15px;width:8px}
  .hero__title{font-size:clamp(44px,4.2vw,64px)}
  .hero__lead{font-size:17.5px}
}

@media (max-width:1024px){
  .hero{padding:64px 0 48px}
  .hero__inner{grid-template-columns:1fr;gap:44px}
  .hero__glow{inset:-160px -120px auto auto;width:640px;height:420px}
  .ide{display:none}
  .hero__inner{justify-items:center;text-align:center}
  .hero__text{display:flex;flex-direction:column;align-items:center;justify-self:center;transform:none}
  .hero__headline{width:100%;max-width:520px;justify-items:center}
  .hero__title{align-items:center}
  .hero__lead{width:auto;min-width:0;max-width:520px;text-align:justify;text-align-last:center}
  .hero__actions{justify-content:center}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .stage{flex-direction:column;gap:18px}
}

@media (max-width:940px){
  .nav__toggle{display:block}
  .nav__links{
    position:absolute;inset-inline:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:12px 16px 18px;
    background:rgba(26,22,26,.97);backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:0 0 10px 4px rgba(0,0,0,.24);
    display:none;
  }
  .nav__links.is-open{
    display:flex;
    animation:navDrop .3s cubic-bezier(.2,.9,.35,1.15) both;
  }
  @keyframes navDrop{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:none}
  }
  .nav__links>a:not(.btn){
    text-align:start;padding:13px 14px;border-radius:12px;
    font-size:15.5px;font-weight:600;color:var(--muted);
    transition:background .16s, color .16s;
  }
  .nav__links>a:not(.btn)::after{display:none}
  .nav__links>a:not(.btn):hover{background:var(--surface-2);color:var(--text)}
  .nav__links>a.active{color:var(--gold-ink);background:var(--gold-dim)}
  .nav__auth{margin-inline-start:0;display:flex;gap:8px;margin-top:8px;padding-top:12px}
  .nav__auth .btn{flex:1;text-align:center;margin:0}
}

@media (max-width:760px){
  html{scroll-padding-top:88px}

  .section{padding:78px 0}
  .person{flex:0 0 auto;width:min(248px,100%)}
  .grid--3,.grid--2,.form__grid,.choices{grid-template-columns:1fr}
  .form{padding:28px 22px}
  .fee{padding:20px 22px}
  .cta__inner{padding:40px 24px}
  .footer__bottom{flex-direction:column;text-align:center}
}

@media (max-width:560px){
  .hero{padding:52px 0 40px}
  .hero__title{margin-top:20px;font-size:clamp(30px,9vw,40px)}
  .hero__lead{font-size:15.5px}
  .ide{font-size:11.5px}
  .section{padding:64px 0}
  .head{margin-bottom:40px}
  .card,.level{padding:30px 22px}
  .stage{padding:26px 22px}
  .fee{padding:18px}
  .form{padding:26px 18px}
  .success{padding:38px 22px}
  .cta{padding:16px 24px 72px}
  .cta__inner{padding:36px 20px}
  .tutorials__cta{padding:34px 20px}
  .excard{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .excard__info{flex-direction:column;text-align:center;gap:8px}
  .excard__info h3{margin:0}
}

@media (max-width:420px){
  .btn--lg{width:100%}
  .hero__actions{flex-direction:column;width:100%}
}

.fee-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:680px;margin:0 auto 30px;
}
.fee-card{
  position:relative;
  padding:24px 22px;text-align:center;
  border:var(--stroke) solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:border-color .2s, box-shadow .2s, background .2s, transform .2s;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.fee-card:hover{
  transform:translateY(-3px);
  border-color:rgba(252,172,16,.45);
  box-shadow:var(--shadow), 0 0 50px -28px rgba(252,172,16,.4);
}
.fee-card:focus-visible{
  outline:none;
  border-color:rgba(252,172,16,.65);
  box-shadow:var(--ring), var(--shadow);
}
.fee-card:active{transform:translateY(-1px) scale(.99)}
.fee-card__tag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:4px 14px;border-radius:10px;white-space:nowrap;
  background:var(--surface-3);border:var(--stroke) solid var(--line);
  color:var(--muted);font-size:11.5px;font-weight:700;
  transition:background .2s, color .2s, border-color .2s;
}
.fee-card__amount{
  display:block;margin:8px 0 2px;
  color:var(--gold-ink);font-family:var(--font-display);
  font-size:27px;font-weight:800;line-height:1.5;
}
.fee-card__amount small{font-size:14px;color:var(--muted);font-weight:600}
.fee-card__note{color:var(--muted);font-size:13px}
.fee-card.is-active{
  border-color:rgba(252,172,16,.55);
  background:
    radial-gradient(130% 130% at 50% 0%, rgba(252,172,16,.12), transparent 60%),
    var(--surface);
  box-shadow:var(--shadow), 0 0 60px -30px rgba(252,172,16,.45);
}
.fee-card.is-active .fee-card__tag{
  background:var(--gold);border-color:var(--gold-ink);color:#2A1704;
}
@media (max-width:560px){
  .fee-cards{grid-template-columns:1fr}
}

.pay-info{
  max-width:680px;margin:0 auto 30px;
  border:1px solid rgba(252,172,16,.3);border-radius:var(--radius);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(252,172,16,.08), transparent 60%),
    var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.pay-info__head{
  display:flex;align-items:center;gap:12px;
  padding:16px 22px;border-bottom:1px dashed var(--line);
}
.pay-info__head b{font-size:15.5px}
.pay-info__head .icon{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:12px;background:var(--gold-dim);color:var(--gold-ink);
}
.pay-info__amount{
  margin-inline-start:auto;text-align:center;
  color:var(--gold-ink);font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.4;
}
.pay-info__amount small{display:block;color:var(--muted);font-size:11.5px;font-family:var(--font);font-weight:600}
.pay-info__rows{padding:10px 22px 16px}
.pay-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px dashed var(--line);
}
.pay-row:last-child{border-bottom:none}
.pay-row__key{color:var(--muted);font-size:13.5px;flex:none}
.pay-row__val{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-family:ui-monospace,'Vazirmatn', monospace;font-size:14.5px;letter-spacing:.4px;color:var(--text);
  direction:ltr;
}
.copy-btn{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  border:var(--stroke) solid var(--line);border-radius:8px;
  background:var(--surface-2);color:var(--muted);cursor:pointer;
  transition:color .15s, border-color .15s;
}
.copy-btn:hover{color:var(--gold-ink);border-color:rgba(252,172,16,.5)}
.copy-btn.copied{color:#4ade80;border-color:rgba(74,222,128,.5)}
.copy-btn svg{width:14px;height:14px}

.upload-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:30px 20px;text-align:center;cursor:pointer;
  border:1.5px dashed rgba(252,172,16,.4);border-radius:var(--radius-sm);
  background:rgba(252,172,16,.04);
  transition:background .18s, border-color .18s;
}
.upload-zone:hover{background:rgba(252,172,16,.08)}
.upload-zone.has-file{border-style:solid;border-color:rgba(74,222,128,.5)}
.upload-zone__icon{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:14px;background:var(--gold-dim);color:var(--gold-ink);
}
.upload-zone__icon svg{width:20px;height:20px}
.upload-zone b{font-size:14.5px}
.upload-zone span{color:var(--muted);font-size:12.5px}
.upload-zone input{display:none}
.receipt-preview{
  margin-top:12px;max-height:220px;border-radius:var(--radius-sm);
  border:var(--stroke) solid var(--line);display:none;
}
.receipt-preview.show{display:block;margin-inline:auto}

.vplay{
  position:relative;width:64px;height:64px;border:0;cursor:pointer;
  border-radius:22px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold) 60%,#C86A05);
  color:#2A1704;
  display:grid;place-items:center;
  box-shadow:0 18px 40px -12px rgba(252,172,16,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4), box-shadow .22s;
}
.vplay::before{
  content:'';position:absolute;inset:-8px;border-radius:28px;
  border:1.5px solid rgba(252,172,16,.45);
  animation:vplay-pulse 2.2s ease-out infinite;
}
.vplay::after{
  content:'';position:absolute;inset:-8px;border-radius:28px;
  border:1.5px solid rgba(252,172,16,.3);
  animation:vplay-pulse 2.2s .9s ease-out infinite;
}
@keyframes vplay-pulse{
  0%{transform:scale(.82);opacity:.9}
  70%{transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}
.vplay svg{width:26px;height:26px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.vcard__thumb:hover .vplay{transform:scale(1.12)}
@media (prefers-reduced-motion: reduce){
  .vplay::before,.vplay::after{animation:none;opacity:0}
  .chip .dot{animation:none}
}

.people{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:22px;
}
.person{
  flex:0 0 248px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 18px 20px;
  box-shadow:var(--shadow);
}
.person__photo{
  position:relative;width:120px;height:120px;margin:0 auto 14px;
}
.person__photo img,
.person__photo .person__initials{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:2.5px solid rgba(252,172,16,.5);
  box-shadow:0 0 7px 3px rgba(0,0,0,.24), 0 0 0 6px rgba(252,172,16,.07);
  display:grid;place-items:center;
  transition:transform .25s ease, border-color .25s ease;
}
.person__photo .person__initials{
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(252,172,16,.35), transparent 55%),
    var(--surface-3);
  color:var(--gold-ink);font-family:var(--font-display);
  font-size:34px;font-weight:800;
}
.person:hover .person__photo img,
.person:hover .person__photo .person__initials{transform:scale(1.06);border-color:var(--gold-ink)}
.person__name{font-size:16.5px;font-weight:800;letter-spacing:.3px}
.person__role{color:var(--gold-ink);font-size:13px;font-weight:700;margin-top:2px}
.person__traits{
  display:block;margin-top:12px;
  color:var(--muted);font-size:13px;line-height:1.9;
}
.person__traits span{display:inline}
.person__traits span:not(:last-child)::after{content:"،"}

.kodplayer{position:fixed;inset:0;z-index:1000;display:none}
.kodplayer.is-open{display:block}
.kodplayer__backdrop{position:absolute;inset:0;background:rgba(8,6,8,.82);backdrop-filter:blur(8px)}
.kodplayer__dialog{
  position:relative;z-index:1;
  width:min(980px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  margin:24px auto;border-radius:var(--radius);overflow:auto;
  border:var(--stroke) solid var(--line);
  background:var(--surface);
  box-shadow:0 0 16px 8px rgba(0,0,0,.32);
  animation:kp-in .28s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes kp-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.kodplayer__head{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:var(--stroke) solid var(--line);
}
.kodplayer__title{flex:1;min-width:0;text-align:start}
.kodplayer__title b{display:block;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kodplayer__title span{color:var(--muted);font-size:12.5px}
.kp-btn{
  display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;
  border:0;border-radius:10px;background:transparent;color:var(--text);
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:background .15s,color .15s;
}
.kp-btn:hover{background:rgba(255,255,255,.08)}
.kp-close:hover{color:#f87171}
.kodplayer__stage{position:relative;background:#000;direction:ltr;aspect-ratio:16/9;overflow:hidden}
.kodplayer__stage:fullscreen{aspect-ratio:auto;display:grid;place-items:center}
.kodplayer__stage:fullscreen video{width:100%;height:auto;max-height:100vh}
.kodplayer__stage video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.kodplayer__bigplay{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.kodplayer.is-playing .kodplayer__bigplay{display:none}
.kp-loading{position:absolute;inset:0;display:none;place-items:center;pointer-events:none;z-index:3}
.kodplayer.is-loading .kp-loading{display:grid}
.kodplayer.is-loading .kodplayer__bigplay{display:none}
.kp-loading i{width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:var(--gold);animation:kpspin .8s linear infinite}
@keyframes kpspin{to{transform:rotate(360deg)}}
.kodplayer__bigplay .vplay{pointer-events:auto}
.kodplayer__controls{
  position:absolute;inset-inline:0;bottom:0;
  padding:26px 14px 10px;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);
  transition:opacity .25s;
}
.kodplayer.is-idle .kodplayer__controls{opacity:0;pointer-events:none}
.kp-seek{
  position:relative;height:14px;cursor:pointer;margin-bottom:4px;
  direction:ltr;touch-action:none;
}
.kp-seek::before{
  content:'';position:absolute;top:6px;left:0;right:0;height:4px;border-radius:4px;
  background:rgba(255,255,255,.22);
}
.kp-seek__buf,.kp-seek__fill{
  position:absolute;top:6px;height:4px;border-radius:4px;
}
.kp-seek__buf{left:0;background:rgba(255,255,255,.35);width:0}
.kp-seek__fill{left:0;background:var(--gold);width:0}
.kp-seek__knob{
  position:absolute;right:-6px;top:50%;translate:0 -50%;
  width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 4px 1px rgba(0,0,0,.30);
  opacity:0;transition:opacity .15s;
}
.kp-seek:hover .kp-seek__knob,.kp-seek.is-drag .kp-seek__knob{opacity:1}
.kodplayer__embed{position:absolute;inset:0;z-index:1}
.kodplayer__embed iframe{width:100%;height:100%;border:0;display:block}
.kodplayer.is-embed .kp-media,
.kodplayer.is-embed .kodplayer__bigplay,
.kodplayer.is-embed .kodplayer__controls,
.kodplayer.is-embed .kp-loading{display:none}
.kp-err{
  position:absolute;inset:0;display:grid;place-items:center;z-index:4;
  background:rgba(0,0,0,.72);pointer-events:none;padding:20px;
}
.kp-err p{
  color:#fff;background:rgba(180,40,40,.85);border:1px solid rgba(255,120,120,.4);
  padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:700;text-align:center;
  max-width:420px;line-height:1.9;
}
.kp-row{display:flex;align-items:center;gap:6px}
.kp-play svg,.kp-mute svg{width:20px;height:20px;display:block}
.kp-time{color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;font-family:inherit}
.kp-spacer{flex:1}
.kp-volume{display:flex;align-items:center;gap:4px}
.kp-vol{
  -webkit-appearance:none;appearance:none;
  width:76px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.28);cursor:pointer;direction:ltr;
}
.kp-vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .15s;
}
.kp-vol:hover::-webkit-slider-thumb,.kp-vol:active::-webkit-slider-thumb{transform:scale(1.25)}
.kp-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0}
.kp-vol::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.28)}
.kp-menu-wrap{position:relative}
.kp-menu{
  position:absolute;bottom:44px;right:0;min-width:110px;
  padding:6px;border-radius:12px;
  background:var(--surface-2);border:var(--stroke) solid var(--line);
  display:none;flex-direction:column;gap:2px;
  box-shadow:0 0 32px 3px rgba(0,0,0,.26);
}
.kp-menu.is-open{display:flex}
.kp-menu button{
  padding:8px 12px;border:0;border-radius:8px;
  background:transparent;color:var(--text);
  font-family:inherit;font-size:13px;font-weight:600;text-align:start;cursor:pointer;
}
.kp-menu button:hover{background:rgba(255,255,255,.09)}
.kp-menu button.is-active{color:var(--gold-ink);background:rgba(252,172,16,.12)}
.kodplayer__meta{padding:18px 20px 20px;border-top:var(--stroke) solid var(--line)}
.kodplayer__desc{color:var(--muted);font-size:14px;line-height:2;text-align:justify}
.kodplayer__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;
}
.kodplayer__attach{display:flex;flex-wrap:wrap;gap:8px}
.kp-attach{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:10px;
  border:var(--stroke) solid var(--line);background:var(--surface-2);
  color:var(--text);font-size:13px;font-weight:600;
  transition:border-color .15s,color .15s;
}
.kp-attach:hover{border-color:rgba(252,172,16,.5);color:var(--gold-ink)}
.kodplayer__actions{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
@media (max-width:640px){
  .kodplayer__dialog{margin:12px auto;width:calc(100vw - 24px)}
  .kp-vol{width:56px}
  .kp-time{display:none}
}

.kodplayer__controls .kp-btn{color:#fff}
.kodplayer__controls .kp-btn:hover{background:rgba(255,255,255,.14)}
.kodplayer__controls .kp-time{color:#fff}
[data-theme="light"] .kodplayer__backdrop{background:rgba(40,36,46,.5)}
[data-theme="light"] .kodplayer__dialog{background:var(--surface);box-shadow:0 0 16px 8px rgba(0,0,0,.18)}
[data-theme="light"] .kp-btn:hover{background:rgba(0,0,0,.06)}
[data-theme="light"] .kp-menu{background:var(--surface);border-color:var(--line)}
[data-theme="light"] .kp-menu button{color:var(--text)}
[data-theme="light"] .kp-menu button:hover{background:rgba(0,0,0,.06)}

[data-theme="dark"]{
  --bg:        #10121B;
  --surface:   #151722;
  --surface-2: #1C1F2C;
  --surface-3: #242836;
  --surface-solid: rgba(21,23,34,.98);
  --line:      rgba(255,255,255,.10);
  --gold:      #FCAC10;
  --gold-ink:  #FFD36B;
  --gold-soft: #FFC85C;
  --gold-dim:  rgba(252,172,16,.16);
  --red:       #E23B2E;
  --text:      #F2F3F7;
  --muted:     #A9AFBD;
  --shadow-sm: 0 4px 16px -4px rgba(0,0,0,.45);
  --shadow:    0 20px 50px -18px rgba(0,0,0,.55);
  --shadow-lg: 0 34px 90px -26px rgba(0,0,0,.65);
  --drop:      0 2px 7px rgba(0,0,0,.4);
  --glow:      0 14px 42px -12px rgba(252,172,16,.5);
  --ring:      0 0 0 2px var(--gold-dim);
  --bg-blur:   2px;
  --glow-blur: 6px;
}

[data-theme="dark"] body::before{
  background:radial-gradient(60rem 34rem at 50% -10%, rgba(252,172,16,.06), transparent 62%);
}

[data-theme="dark"] #dot-bg{background:#10121B}
[data-theme="dark"] #dot-bg .db__glow{
  transform:none;
  background:
    radial-gradient(76rem 60rem at var(--blob-peach-x) var(--blob-peach-y), rgba(124,92,255,.32) 0%, rgba(124,92,255,.15) 42%, transparent 70%),
    radial-gradient(62rem 52rem at var(--blob-butter-x) var(--blob-butter-y), rgba(64,132,255,.26) 0%, rgba(64,132,255,.12) 50%, transparent 72%),
    linear-gradient(125deg, rgba(112,86,214,.16) 0%, rgba(58,86,168,.10) 45%, rgba(30,38,72,.06) 100%);
}
[data-theme="dark"] #dot-bg .db__scrim{
  background:
    radial-gradient(78rem 58rem ellipse at 50% 45%, rgba(16,18,27,.55) 0%, rgba(16,18,27,.30) 55%, transparent 100%),
    linear-gradient(180deg, rgba(16,18,27,.10) 0%, rgba(16,18,27,.28) 100%);
}
[data-theme="dark"] #dot-bg .db__dots{
  filter:blur(var(--bg-blur));
  opacity:.6;
}

[data-theme="dark"] ::selection{background:rgba(252,172,16,.32);color:#fff}
[data-theme="dark"] .nav{
  background:rgba(21,23,34,.94);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
[data-theme="dark"] .nav.is-stuck{background:rgba(21,23,34,.98)}
[data-theme="dark"] .nav__links a:not(.btn){color:var(--muted)}
[data-theme="dark"] .nav__links a:not(.btn):hover{color:var(--text)}
[data-theme="dark"] .nav__links a.active{color:var(--gold-ink)}
[data-theme="dark"] .nav__links a.btn--ghost{background:var(--surface-2);border-color:var(--line);color:var(--text)}
[data-theme="dark"] .nav__links a.btn--ghost:hover{color:var(--gold-ink);background:var(--gold-dim)}
[data-theme="dark"] .brand img{filter:drop-shadow(0 4px 10px rgba(252,172,16,.4))}

[data-theme="dark"] .hero__lead,
[data-theme="dark"] .hero__note,
[data-theme="dark"] .head__sub,
[data-theme="dark"] .hero__stats span,
[data-theme="dark"] .footer__tagline,
[data-theme="dark"] .footer__links a,
[data-theme="dark"] .footer__bottom{
  text-shadow:none;
}

[data-theme="dark"] .wordmark .gold{
  color:var(--gold);
  -webkit-text-stroke:0;
  text-shadow:none;
}
[data-theme="dark"] .hero__title .gold,
[data-theme="dark"] .hero__title .line:last-of-type .gold{
  color:var(--gold);
  -webkit-text-stroke:0;
  text-shadow:none;
}

[data-theme="dark"] .ide{
  border:1px solid rgba(255,255,255,.09);
  background:#151722;
  box-shadow:0 18px 38px -12px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .ide__bar{background:rgba(255,255,255,.045);border-bottom-color:rgba(255,255,255,.07)}
[data-theme="dark"] .ide__tab{background:rgba(255,255,255,.08);color:#C6CBD6}
[data-theme="dark"] .ide__code li{color:#E6E9F0}
[data-theme="dark"] .ide__code li::before{color:#7A8193}
[data-theme="dark"] .tok-c{color:#8A9099;font-style:italic}
[data-theme="dark"] .tok-k{color:#C4B5FD}
[data-theme="dark"] .tok-t{color:#FBBF24}
[data-theme="dark"] .tok-f{color:#7DD3FC}
[data-theme="dark"] .tok-s{color:#86EFAC}
[data-theme="dark"] .ide__cursor{background:#F2F3F7}
[data-theme="dark"] .ide__status{background:rgba(255,255,255,.045);border-top-color:rgba(255,255,255,.07)}

[data-theme="dark"] .footer{
  background:linear-gradient(180deg, rgba(16,18,27,.55), rgba(16,18,27,.80));
}

[data-theme="dark"] .nav__theme{background:var(--surface-2);border-color:var(--line);color:var(--text)}

[class^="tox-"],
[class*=" tox-"],
[class^="tox-"] *,
[class*=" tox-"] * {
  font-family: var(--font) !important;
}
[class^="tox-"] textarea,
[class*=" tox-"] textarea,
[class^="tox-"] code,
[class*=" tox-"] code,
[class^="tox-"] pre,
[class*=" tox-"] pre {
  font-family: ui-monospace, Consolas, 'Vazirmatn', monospace !important;
}
.CodeMirror,
.CodeMirror *,
.CodeMirror-placeholder,
.cm-editor,
.cm-editor * {
  font-family: ui-monospace, Consolas, 'Vazirmatn', monospace !important;
}
.CodeMirror pre.CodeMirror-line,
.cm-editor .cm-content {
  font-size: 14px;
}
.tox .tox-textarea,
.tox .tox-textfield.tox-textfield--code,
.tox code,
.tox kbd,
.tox pre {
  font-family: ui-monospace, Consolas, 'Vazirmatn', monospace !important;
}
.CodeMirror,
.CodeMirror *,
.CodeMirror-placeholder,
.cm-editor,
.cm-editor * {
  font-family: ui-monospace, Consolas, 'Vazirmatn', monospace !important;
}
.CodeMirror pre.CodeMirror-line,
.cm-editor .cm-content {
  font-size: 14px;
}

[class^="tox-"],
[class*=" tox-"] {
  --tox-light-bg: #FFFFFF;
  --tox-light-surface: #F4F5F7;
  --tox-light-line: #D0D3DA;
  --tox-light-text: #23252B;
  --tox-light-muted: #6B6E78;
}
[class^="tox-"] .tox-toolbar,
[class*=" tox-"] .tox-toolbar,
[class^="tox-"] .tox-toolbar-overlord,
[class*=" tox-"] .tox-toolbar-overlord,
[class^="tox-"] .tox-menubar,
[class*=" tox-"] .tox-menubar {
  background: var(--tox-light-bg) !important;
  border-bottom: 1px solid var(--tox-light-line) !important;
}
[class^="tox-"] .tox-tbtn,
[class*=" tox-"] .tox-tbtn {
  border: 1px solid var(--tox-light-line) !important;
  border-radius: 6px !important;
  background: var(--tox-light-surface) !important;
  color: var(--tox-light-text) !important;
}
[class^="tox-"] .tox-tbtn svg,
[class*=" tox-"] .tox-tbtn svg { fill: var(--tox-light-text) !important; }
[class^="tox-"] .tox-tbtn:hover,
[class*=" tox-"] .tox-tbtn:hover {
  border-color: #C08A12 !important;
  background: #FFF6E3 !important;
}
[class^="tox-"] .tox-tbtn--enabled,
[class*=" tox-"] .tox-tbtn--enabled {
  border-color: #C08A12 !important;
  background: #FFF0D2 !important;
}
[class^="tox-"] .tox-listbox,
[class*=" tox-"] .tox-listbox,
[class^="tox-"] .tox-listboxfield .tox-listbox--select,
[class*=" tox-"] .tox-listboxfield .tox-listbox--select {
  border: 1px solid var(--tox-light-line) !important;
  border-radius: 6px !important;
  background-color: var(--tox-light-surface) !important;
  color: var(--tox-light-text) !important;
}
[class^="tox-"] .tox-textfield,
[class*=" tox-"] .tox-textfield,
[class^="tox-"] .tox-textarea,
[class*=" tox-"] .tox-textarea,
[class^="tox-"] .tox-selectfield select,
[class*=" tox-"] .tox-selectfield select {
  border: 1px solid var(--tox-light-line) !important;
  border-radius: 6px !important;
  background: var(--tox-light-surface) !important;
  color: var(--tox-light-text) !important;
}
[class^="tox-"] .tox-edit-area__iframe,
[class*=" tox-"] .tox-edit-area__iframe {
  border: 1px solid var(--tox-light-line) !important;
  border-radius: 0 0 8px 8px !important;
  background: var(--tox-light-bg) !important;
}
[class^="tox-"] .tox-statusbar,
[class*=" tox-"] .tox-statusbar {
  border-top: 1px solid var(--tox-light-line) !important;
  background: var(--tox-light-bg) !important;
  color: var(--tox-light-muted) !important;
}
[class^="tox-"] .tox-statusbar a,
[class*=" tox-"] .tox-statusbar a { color: var(--tox-light-muted) !important; }
[class^="tox-"] .tox-dialog,
[class*=" tox-"] .tox-dialog {
  border: 1px solid var(--tox-light-line) !important;
  border-radius: 12px !important;
  background: var(--tox-light-bg) !important;
  color: var(--tox-light-text) !important;
}
[class^="tox-"] .tox-dialog__title,
[class*=" tox-"] .tox-dialog__title,
[class^="tox-"] .tox-dialog__body,
[class*=" tox-"] .tox-dialog__body,
[class^="tox-"] .tox-label,
[class*=" tox-"] .tox-label,
[class^="tox-"] .tox-collection__item,
[class*=" tox-"] .tox-collection__item {
  color: var(--tox-light-text) !important;
}
[class^="tox-"] .tox-menu,
[class*=" tox-"] .tox-menu {
  background: var(--tox-light-bg) !important;
  border: 1px solid var(--tox-light-line) !important;
  color: var(--tox-light-text) !important;
}
[class^="tox-"] .tox-collection__item--active,
[class*=" tox-"] .tox-collection__item--active {
  background: #FFF0D2 !important;
  color: #7A5400 !important;
}
[class^="tox-"] .tox-button:not(.tox-button--secondary),
[class*=" tox-"] .tox-button:not(.tox-button--secondary) {
  background: #E9A400 !important;
  border-color: #E9A400 !important;
  color: #1A1204 !important;
}
[class^="tox-"] .tox-button--secondary,
[class*=" tox-"] .tox-button--secondary {
  background: var(--tox-light-surface) !important;
  border-color: var(--tox-light-line) !important;
  color: var(--tox-light-text) !important;
}
[class^="tox-"] .tox-tooltip__body,
[class*=" tox-"] .tox-tooltip__body {
  background: #23252B !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}
.math-modal label { display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text); }
.math-modal__row { margin-bottom:14px; }
.math-modal textarea,
.math-modal .math-modal__preview {
  width:100%; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); color:var(--text);
  font-family:ui-monospace,Consolas,monospace; font-size:14px;
  padding:10px 12px; direction:ltr;
}
.math-modal .math-modal__preview {
  min-height:60px; display:flex; align-items:center; justify-content:center;
  color:var(--text);
}
.math-modal__keys { display:flex; flex-wrap:wrap; gap:6px; }
.math-key {
  padding:6px 10px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text);
  font-family:ui-monospace,Consolas,monospace; font-size:12.5px;
}
.math-key:hover { border-color:var(--gold-ink); background:var(--gold-dim); color:var(--gold-ink); }
.math-modal__block { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }