/* ============================================================
   Elvar — Design tokens
   Cheerful teal/turquoise palette by default — fully overridable
   from the admin panel (Settings → Colors), which injects a
   matching :root block inline on every page.
   ============================================================ */
:root{
  --bg:            #0a1e2b;
  --bg-soft:       #0f2a3d;
  --card:          #123448;
  --card-border:   #1c4a63;
  --text:          #eaf6f8;
  --text-dim:      #8fb4c2;
  --blue:          #17b6c4;
  --blue-bright:   #3fd8e6;
  --amber:         #ff9f1c;
  --amber-hover:   #ffb84d;
  --green:         #34d399;
  --red:           #f87171;
  --radius:        14px;
  --radius-sm:     8px;
  --shadow:        0 10px 30px rgba(0,0,0,.35);
  --font:          'Vazirmatn', Tahoma, sans-serif;
}

html[data-theme="light"]{
  --bg:            #f4f7fd;
  --bg-soft:       #ffffff;
  --card:          #ffffff;
  --card-border:   #e1e8f7;
  --text:          #241f1f;
  --text-dim:      #252525;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  direction:rtl;
  line-height:1.8;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:999px;font-weight:700;font-size:15px;
  border:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--amber),var(--amber-hover));color:#1a1200;
  box-shadow:0 6px 20px rgba(245,166,35,.35)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid var(--card-border);color:var(--text)}
.btn-outline:hover{border-color:var(--blue-bright)}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,23,48,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--card-border);
  /* The header bar is always this dark navy, in both dark AND light site
     theme (by design, for logo/contrast). So it needs its own fixed
     light-on-dark text palette instead of the theme-aware --text /
     --text-dim tokens, which turn near-black in light theme and were
     making the "ورود" outline button (and nav links) unreadable on top
     of this still-dark bar. */
  --hdr-text:      #f4f9fb;
  --hdr-text-dim:  #a9c2d6;
  --hdr-border:    rgba(255,255,255,.22);
  --hdr-chip-bg:   rgba(255,255,255,.08);
}
.site-header .row{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--hdr-text)}
.logo img{width:34px;height:34px;border-radius:8px}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--hdr-text-dim);font-size:14px;transition:color .15s}
.nav-links a:hover{color:var(--blue-bright)}
.header-actions{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:none;color:var(--hdr-text);font-size:24px}

/* Buttons/icons that live inside the header always use the header's own
   fixed palette, never the page-theme colors — this is what keeps "ورود"
   white/legible in light theme instead of inheriting the dark --text. */
.site-header .btn-outline{color:var(--hdr-text);border-color:var(--hdr-border)}
.site-header .btn-outline:hover{border-color:var(--blue-bright);color:#fff}
.site-header .theme-toggle,
.site-header .bell-btn,
.site-header .user-menu-btn{
  color:var(--hdr-text);border-color:var(--hdr-border);background:var(--hdr-chip-bg);
}
.site-header .avatar-dot{background:rgba(255,255,255,.16);color:var(--hdr-text)}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-links.mobile-open{
    display:flex;flex-direction:column;position:absolute;top:66px;right:0;left:0;
    background:#0a1730;border-bottom:1px solid var(--hdr-border);
    padding:16px 20px;gap:14px;z-index:60;
  }
}

/* ---------- Hero ---------- */
.hero{padding:60px 0 40px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:42px;line-height:1.35;margin:0 0 18px}
.hero h1 span{color:var(--amber)}
.hero p{color:var(--text-dim);font-size:16px;max-width:520px;margin-bottom:26px}
.hero-badges{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap}
.badge-chip{
  display:flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--card-border);padding:10px 16px;border-radius:999px;font-size:13px;color:var(--text-dim);
}
.hero-visual{position:relative}
.speedometer{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:22px;text-align:center;box-shadow:var(--shadow);
}
.speedometer .num{font-size:44px;font-weight:800;color:var(--blue-bright)}
.speedometer .label{color:var(--text-dim);font-size:13px}

@media (max-width:860px){
  .hero .grid{grid-template-columns:1fr}
  .hero h1{font-size:30px}
}

/* ---------- Sections ---------- */
.section{padding:60px 0}
.section-title{font-size:26px;font-weight:800;text-align:center;margin-bottom:8px}
.section-sub{text-align:center;color:var(--text-dim);margin-bottom:40px}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:24px;transition:transform .15s ease, border-color .15s ease;
  display:flex;flex-direction:column;gap:8px;
}
/* Push each card's action button to the bottom of the card, so buttons
   line up across a row of cards regardless of how much title/description
   text is above them (grid rows already stretch cards to equal height). */
.card > .btn-block{margin-top:auto !important}
.card:hover{transform:translateY(-4px);border-color:var(--blue)}
.card .icon{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(47,124,246,.15);color:var(--blue-bright);font-size:22px;margin-bottom:14px;
}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0;color:var(--text-dim);font-size:14px}
.card-cover-img{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:14px}
.card-cover-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Steps (course path) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-sm);
  padding:18px;text-align:center;position:relative;
}
.step:hover {
  transform: 
  translateY(-5px);
  border-color: var(--blue-bright);
}
.step .icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(47,124,246,.12);color:var(--blue-bright);margin:0 auto 10px;
}
.step .n{
  width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;
  margin:0 auto 8px;
}
/* 4 steps per row on desktop/tablet (4 top + 4 bottom for the 8-step
   path), collapsing to 2 per row then 1 per row on narrow screens. */
@media (max-width:860px){
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .steps{grid-template-columns:1fr}
}

/* ---------- Forms ---------- */
.auth-wrap{
  min-height:calc(100vh - 66px);display:flex;align-items:center;justify-content:center;padding:40px 16px;
}
.auth-card{
  width:100%;max-width:420px;background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);
}
.auth-card h2{margin:0 0 22px;text-align:center;font-size:20px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px}
.field-checkbox label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.field-checkbox input[type="checkbox"]{width:auto}
.field input{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--card-border);
  background:var(--bg-soft);color:var(--text);font-family:inherit;font-size:14px;
}
.field input:focus{outline:none;border-color:var(--blue-bright)}
.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--card-border);
  background:var(--bg-soft);color:var(--text);font-family:inherit;font-size:14px;resize:vertical;line-height:1.8;
}
.field textarea:focus{outline:none;border-color:var(--blue-bright)}
.auth-switch{text-align:center;margin-top:16px;font-size:13px;color:var(--text-dim)}
.auth-switch a{color:var(--blue-bright);font-weight:600}
.captcha-row{display:flex;align-items:center;gap:10px}
.captcha-row img{border-radius:var(--radius-sm);border:1px solid var(--card-border);background:var(--card)}
.captcha-row .btn{padding:8px 14px;font-size:16px;line-height:1}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:14px}
.alert-success{background:rgba(52,211,153,.12);color:var(--green);border:1px solid rgba(52,211,153,.3)}
.alert-error{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.3)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--card-border);padding:30px 0;color:var(--text-dim);font-size:13px;text-align:center}
.footer-links{display:flex;gap:8px;justify-content:center;margin-bottom:10px;color:var(--text-dim)}
.footer-links a{color:var(--text-dim);text-decoration:underline}
.footer-links a:hover{color:var(--blue-bright)}

/* ---------- Typing lesson ---------- */
.lesson-wrap{padding:40px 0}
.lesson-stats{display:flex;gap:14px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.lesson-stats .stat{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-sm);
  padding:12px 20px;text-align:center;min-width:90px;
}
.lesson-stats .stat .v{font-size:22px;font-weight:800;color:var(--blue-bright)}
.lesson-stats .stat .l{font-size:12px;color:var(--text-dim)}

#typing-target,.preview-target{
  direction:ltr;text-align:left;font-family:'Courier New',monospace;font-size:22px;
  line-height:2.3;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:26px;letter-spacing:1px;user-select:none;word-break:break-word;white-space:normal;
}
#typing-target span{padding:1px 0;border-radius:3px;transition:transform .1s ease}
.ty-pending{color:var(--text-dim)}
.ty-correct{color:var(--green)}
.ty-corrected{color:var(--amber);text-decoration:underline;text-decoration-style:dotted}
.ty-wrong{color:var(--red);background:rgba(248,113,113,.18)}
.ty-current{border-bottom:2px solid var(--blue-bright)}
.ty-shake{animation:tyShake .2s ease}
@keyframes tyShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}

#typing-input{
  position:absolute;opacity:0;pointer-events:none;height:1px;width:1px;
}
.typing-focus-hint{
  text-align:center;color:var(--text-dim);font-size:13px;margin-top:10px;
}

#typing-root{position:relative}
.ty-pause-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;background:var(--bg);opacity:.94;
  border:1px solid var(--card-border);border-radius:var(--radius);color:var(--text);
  font-weight:700;font-size:15px;z-index:5;animation:tyFadeIn .15s ease;
}
@keyframes tyFadeIn{from{opacity:0}to{opacity:.94}}

/* ---------- Live virtual keyboard (below the typing box) ----------
   Shows the physical key being pressed going "down" like a real
   keyboard, colored green for a correct keystroke and red for a
   wrong one, with the next expected key gently highlighted so the
   user's eye knows where to go. Uses KeyboardEvent.code (physical
   key position) rather than e.key, so it works the same whether the
   OS keyboard layout is set to English or Persian. */
.vkb{
  direction:ltr;user-select:none;margin:22px auto 0;max-width:720px;
  display:flex;flex-direction:column;gap:6px;
}
.vkb-row{display:flex;gap:6px;justify-content:center}
.vkb-key{
  flex:1 1 0;min-width:26px;max-width:56px;height:44px;border-radius:8px;
  background:linear-gradient(180deg,var(--card),var(--bg-soft));
  border:1px solid var(--card-border);border-bottom-width:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text-dim);font-family:'Courier New',monospace;
  transition:transform .06s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.vkb-key.vkb-w15{flex-grow:1.5}
.vkb-key.vkb-w2{flex-grow:2}
.vkb-key.vkb-w625{flex-grow:6.25;max-width:none}
.vkb-key.vkb-home::after{
  content:'';position:absolute;width:14px;height:2px;background:var(--blue-bright);
  margin-top:15px;border-radius:2px;
}
.vkb-key-space{position:relative}

/* next expected key: soft glowing outline, guides the finger */
.vkb-key.vkb-target{
  border-color:var(--blue-bright);color:var(--text);
  box-shadow:0 0 0 2px rgba(63,216,230,.35);
}

/* key physically held down right now */
.vkb-key.vkb-down{transform:translateY(2px);border-bottom-width:1px}

/* feedback flash: correct keystroke */
.vkb-key.vkb-correct{
  background:linear-gradient(180deg,var(--green),#1fae7d);border-color:#1fae7d;color:#06281c;
  box-shadow:0 0 14px rgba(52,211,153,.55);
}
/* feedback flash: wrong keystroke */
.vkb-key.vkb-wrong{
  background:linear-gradient(180deg,var(--red),#d64545);border-color:#d64545;color:#2c0808;
  box-shadow:0 0 14px rgba(248,113,113,.55);
}

@media (max-width:640px){
  .vkb-key{height:34px;font-size:10px;min-width:18px;border-radius:6px}
  .vkb-row{gap:4px}
}
@media (max-width:420px){
  .vkb{display:none} /* real typing on a phone happens via the OS keyboard anyway */
}

/* ---------- Speed-test result gauge panel ---------- */
.gauge-panel{
  display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:14px;align-items:stretch;
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:26px 20px;
}
.gauge-col{display:flex;flex-direction:column;justify-content:center;gap:12px}
.gauge-stats,.gauge-record{gap:14px}
.gauge-stat{
  background:var(--bg-soft);border:1px solid var(--card-border);border-radius:var(--radius-sm);
  padding:12px;text-align:center;
}
.gauge-stat-v{font-size:20px;font-weight:800;color:var(--blue-bright)}
.gauge-stat-l{font-size:12px;color:var(--text-dim);margin-top:2px}
.gauge-center{align-items:center;text-align:center}
.gauge-title{font-size:14px;font-weight:700;color:var(--text-dim);margin-bottom:4px}
.gauge-wpm{font-size:34px;font-weight:800;color:var(--text);margin-top:-18px}
.gauge-wpm span{font-size:14px;font-weight:600;color:var(--text-dim);margin-inline-start:6px}
.gauge-rating{font-size:15px;font-weight:700;color:var(--green)}
.gauge-stars{font-size:18px;letter-spacing:2px}

@media (max-width:720px){
  .gauge-panel{grid-template-columns:1fr;text-align:center}
  .gauge-stats,.gauge-record{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .gauge-stats .gauge-stat,.gauge-record .gauge-stat{flex:1 1 120px}
}

/* ---------- Dashboard (professional user panel) ---------- */
.dash-profile-card{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:22px 26px;margin-bottom:22px;
}
.dash-avatar{
  width:60px;height:60px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-bright));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;
}
.dash-profile-info{flex:1;min-width:160px}
.dash-profile-info h2{margin:0 0 4px;font-size:19px}
.dash-profile-info p{margin:0;color:var(--text-dim);font-size:13px}
.dash-level{flex:1;min-width:200px;max-width:280px}
.dash-level-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);margin-bottom:6px}
.dash-level-label span{color:var(--blue-bright);font-weight:700}
.dash-level-bar{height:8px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--card-border);overflow:hidden}
.dash-level-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-bright));border-radius:999px}

.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:20px}
.dash-chart-card,.dash-next-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:22px;
}
.dash-chart-card h3{margin:0 0 14px;font-size:15px;display:flex;align-items:center;gap:8px}
.dash-chart-svg{width:100%;height:auto;display:block}
.dash-next-card{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dash-next-icon{
  width:52px;height:52px;border-radius:14px;background:rgba(255,159,28,.15);color:var(--amber);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.dash-next-card h3{margin:0 0 6px;font-size:16px}
.dash-next-card p{margin:0 0 16px;color:var(--text-dim);font-size:13px}
.dash-rank{margin-top:14px;font-size:12px;color:var(--text-dim)}
.dash-rank b{color:var(--blue-bright)}

@media (max-width:860px){
  .dash-grid{grid-template-columns:1fr}
  .dash-profile-card{justify-content:center;text-align:center}
}
@media (max-width:480px){
  .dash-profile-card{padding:18px}
  .dash-avatar{width:50px;height:50px;font-size:20px}
  .dash-chart-card,.dash-next-card{padding:16px}
}

/* ---------- Visa card simulator ---------- */
.visa-card{
  width:100%;max-width:380px;margin:0 auto 26px;aspect-ratio:1.586;border-radius:18px;
  background:linear-gradient(135deg,#1a3d8f,#0d1f52 55%,#132a6b);
  color:#fff;padding:22px 26px;position:relative;box-shadow:0 16px 40px rgba(10,25,70,.5);
  display:flex;flex-direction:column;justify-content:space-between;
  font-family:'Courier New',monospace;overflow:hidden;
}
.visa-card::before{
  content:'';position:absolute;inset:0;border-radius:18px;
  background:radial-gradient(circle at 85% 10%, rgba(255,255,255,.14), transparent 55%);
}
.visa-card::after{
  content:'';position:absolute;top:0;bottom:0;width:60%;
  background:linear-gradient(75deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);
  transform:translateX(-140%);animation:cardShine 5s ease-in-out infinite;
}
@keyframes cardShine{0%,60%{transform:translateX(-140%)}100%{transform:translateX(220%)}}
.visa-card .chip{
  width:44px;height:34px;border-radius:6px;position:relative;z-index:1;
  background:linear-gradient(135deg,#f3d98a,#c9a13b);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.visa-card .chip::before{
  content:'';position:absolute;inset:5px;border:1px solid rgba(0,0,0,.2);border-radius:3px;
}
.visa-card .num{font-size:21px;letter-spacing:3px;direction:ltr;text-align:left;margin:14px 0;position:relative;z-index:1}
.visa-card .bottom{display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;direction:ltr;position:relative;z-index:1}
.visa-card .holder{text-transform:uppercase;letter-spacing:1px;font-size:14px}
.visa-card .brand{font-style:italic;font-weight:800;font-size:22px;letter-spacing:1px}
.copy-hint{text-align:center;color:var(--text-dim);font-size:13px;margin-bottom:24px}

/* ---------- Certificate ---------- */
.certificate{
  max-width:760px;margin:0 auto;background:#f8f4ea;color:#1a1a2e;border-radius:10px;
  padding:50px 60px;position:relative;box-shadow:var(--shadow);
  border:10px solid transparent;
  background-image:
    linear-gradient(#f8f4ea,#f8f4ea),
    linear-gradient(135deg,#c9a13b,#e8d189 50%,#c9a13b);
  background-origin:border-box;background-clip:padding-box, border-box;
  text-align:center;font-family:Tahoma,sans-serif;
}
.certificate .brand{font-size:14px;letter-spacing:2px;color:#8a7a3f;text-transform:uppercase;margin-bottom:6px}
.certificate h2{font-size:28px;margin:6px 0 4px;color:#1a1a2e}
.certificate .sub{color:#6b6b6b;margin-bottom:26px;font-size:14px}
.certificate .name{font-size:32px;font-weight:800;margin:16px 0;color:#0d1f52;border-bottom:2px solid #c9a13b;display:inline-block;padding-bottom:8px}
.certificate .stats{display:flex;justify-content:center;gap:40px;margin:28px 0;flex-wrap:wrap}
.certificate .stats div{font-size:14px;color:#4a4a4a}
.certificate .stats b{display:block;font-size:20px;color:#0d1f52}
.certificate .footer-row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px;font-size:12px;color:#6b6b6b}
.certificate .seal{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#e8d189,#c9a13b);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 6px}

@media print{
  body *{visibility:hidden}
  .certificate,.certificate *{visibility:visible}
  .certificate{position:absolute;inset:0;margin:0;box-shadow:none}
}

/* ---------- Admin panel ---------- */
.admin-wrap{display:flex;min-height:100vh}
.admin-sidebar{
  width:230px;flex-shrink:0;background:var(--bg-soft);border-left:1px solid var(--card-border);
  padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.admin-sidebar .brand{padding:0 20px 20px;font-weight:800;font-size:17px;border-bottom:1px solid var(--card-border);margin-bottom:14px}
.admin-sidebar a{
  display:flex;align-items:center;gap:10px;padding:11px 20px;color:var(--text-dim);font-size:14px;
  border-right:3px solid transparent;
}
.admin-sidebar a:hover,.admin-sidebar a.active{color:var(--text);background:rgba(47,124,246,.08);border-right-color:var(--blue)}
.admin-sidebar .back{margin-top:14px;border-top:1px solid var(--card-border);padding-top:14px}
.admin-main{flex:1;padding:30px 34px;max-width:1100px}
.admin-main h1{margin:0 0 22px;font-size:22px}

.admin-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden}
.admin-table th,.admin-table td{padding:12px 14px;text-align:right;font-size:13px;border-bottom:1px solid var(--card-border)}
.admin-table th{background:var(--bg-soft);color:var(--text-dim);font-weight:700}
.admin-table tr:last-child td{border-bottom:none}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill-green{background:rgba(52,211,153,.15);color:var(--green)}
.pill-red{background:rgba(248,113,113,.15);color:var(--red)}
.pill-amber{background:rgba(245,166,35,.15);color:var(--amber)}
.pill-gray{background:rgba(147,166,207,.15);color:var(--text-dim)}

.admin-form .field{max-width:520px}
.admin-form textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--card-border);
  background:var(--bg-soft);color:var(--text);font-family:'Courier New',monospace;font-size:13px;min-height:130px;
}
.admin-form select{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--card-border);
  background:var(--bg-soft);color:var(--text);font-family:inherit;font-size:14px;
}
.inline-actions{display:flex;gap:8px}
.icon-btn{padding:6px 12px;font-size:12px;border-radius:6px}

@media (max-width:780px){
  .admin-wrap{flex-direction:column}
  .admin-sidebar{width:100%;height:auto;position:static;display:flex;overflow-x:auto;padding:10px}
  .admin-sidebar .brand{display:none}
  .admin-sidebar a{white-space:nowrap;border-right:none;border-bottom:3px solid transparent}
  .admin-sidebar a.active{border-bottom-color:var(--blue)}
  .admin-main{padding:20px}
}

/* ---------- Popup / announcement modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(5,10,25,.7);display:flex;align-items:center;justify-content:center;
  z-index:200;padding:16px;
}
.modal-box{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  max-width:420px;width:100%;padding:26px;text-align:center;box-shadow:var(--shadow);
}
.modal-box h3{margin-top:0}
.modal-box .btn{margin-top:16px}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  background:var(--card);border:1px solid var(--card-border);border-radius:999px;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;
}

/* ---------- Support tickets ---------- */
.ticket-thread{max-width:640px;margin:0 auto}
.ticket-msg{
  max-width:80%;margin-bottom:14px;padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.8;
}
.ticket-msg.from-user{background:var(--blue);color:#fff;margin-left:auto;border-bottom-left-radius:4px}
.ticket-msg.from-admin{background:var(--card);border:1px solid var(--card-border);margin-right:auto;border-bottom-right-radius:4px}
.ticket-msg .meta{font-size:11px;opacity:.75;margin-top:6px}

/* ---------- Icons ---------- */
.icon{display:inline-block;vertical-align:-4px;flex-shrink:0}
.card .icon svg,.step .icon svg{width:26px;height:26px}
.card .icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(47,124,246,.12);color:var(--blue-bright);margin-bottom:16px;
}

/* ---------- Nav active state ---------- */
.nav-links a.active{color:var(--hdr-text);font-weight:700;position:relative}
.nav-links a.active::after{
  content:'';position:absolute;bottom:-22px;left:0;right:0;height:2px;background:var(--blue-bright);
}

/* ---------- User menu dropdown ---------- */
.user-menu{position:relative}
.user-menu-btn{
  display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--card-border);
  border-radius:999px;padding:8px 16px 8px 10px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;
}
.avatar-dot{
  width:26px;height:26px;border-radius:50%;background:rgba(47,124,246,.18);color:var(--blue-bright);
  display:flex;align-items:center;justify-content:center;
}
.user-menu-dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:200px;background:var(--card);
  border:1px solid var(--card-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  padding:8px;display:none;flex-direction:column;gap:2px;z-index:60;
}
.user-menu-dropdown.open{display:flex}
.user-menu-dropdown a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--text-dim);font-size:13px;
}
.user-menu-dropdown a:hover{background:rgba(47,124,246,.1);color:var(--text)}
.user-menu-dropdown a.danger:hover{background:rgba(248,113,113,.1);color:var(--red)}

/* ---------- Modal polish ---------- */
.modal-box{position:relative}
.modal-close{
  position:absolute;top:14px;left:14px;background:none;border:none;color:var(--text-dim);
  font-size:22px;cursor:pointer;line-height:1;
}
.modal-icon{
  width:56px;height:56px;border-radius:50%;background:rgba(245,166,35,.15);color:var(--amber);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.modal-overlay{animation:fadeIn .2s ease}
.modal-box{animation:popIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ---------- Plans page ---------- */
.plan-price{font-size:28px;font-weight:800;color:var(--blue-bright);margin:10px 0}
.plan-price span{font-size:14px;font-weight:500;color:var(--text-dim)}
.plan-highlight{border-color:var(--amber);position:relative}
.plan-highlight::before{
  content:'محبوب‌ترین';position:absolute;top:-12px;right:20px;background:var(--amber);color:#1a1200;
  font-size:11px;font-weight:800;padding:3px 12px;border-radius:999px;
}

/* ---------- Coming-soon badge ---------- */
.badge-soon{
  display:inline-block;background:rgba(245,166,35,.15);color:var(--amber);font-size:11px;font-weight:700;
  padding:2px 10px;border-radius:999px;margin-inline-start:8px;
}

/* ---------- Hero keyboard illustration ---------- */
.hero-visual{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}
.kb-illustration{
  background:linear-gradient(160deg,#132a5c,#0c1c40);border:1px solid var(--card-border);
  border-radius:20px;padding:26px 22px;box-shadow:var(--shadow);width:100%;max-width:420px;
}
.kb-row{display:flex;gap:6px;margin-bottom:6px;justify-content:center}
.kb-row[style*="--indent:1"]{padding-inline-start:14px}
.kb-row[style*="--indent:2"]{padding-inline-start:28px}
.kb-key{
  width:32px;height:32px;border-radius:6px;background:#1b3768;border:1px solid #26438a;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#9fb3de;font-weight:700;
  font-family:'Courier New',monospace;
}
.kb-key-home{background:var(--blue);border-color:var(--blue-bright);color:#fff;box-shadow:0 0 14px rgba(47,124,246,.6)}
.kb-space-row{margin-top:4px}
.kb-space{width:70%;font-size:9px;letter-spacing:2px}

.floating-badge{position:absolute;z-index:5}
.floating-badge-1{top:-18px;right:-10px}
.floating-badge-2{bottom:-18px;left:-10px;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:16px 20px;
  box-shadow:var(--shadow);color:var(--blue-bright);text-align:center}
.focus-badge .label{color:var(--text-dim);font-size:12px;line-height:1.5}

@media (max-width:860px){
  .floating-badge-1,.floating-badge-2{position:static;margin-top:16px}
  .hero-visual{flex-direction:column}
}

/* ---------- Leaderboard medal badges ---------- */
.medal-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%}
.medal-1{background:rgba(245,166,35,.18);color:#f5c343}
.medal-2{background:rgba(192,192,192,.18);color:#c9d1d9}
.medal-3{background:rgba(205,127,50,.18);color:#cd8a4f}

/* ---------- Notification feed (separate from popup) ---------- */
.notif-feed{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden}
.notif-item{padding:22px 26px;border-bottom:1px solid var(--card-border)}
.notif-item:last-child{border-bottom:none}
.notif-item h3{margin:0 0 8px;font-size:16px}
.notif-item p{margin:0 0 8px;color:var(--text-dim);font-size:14px;line-height:1.9}
.notif-more{background:none;border:none;color:var(--amber);font-weight:700;font-size:13px;cursor:pointer;padding:0;margin-bottom:8px}
.notif-date{font-size:12px;color:var(--text-dim);opacity:.8}

/* ---------- Header bell ---------- */
.bell-btn{
  position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:999px;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);
}
.bell-dot{position:absolute;top:8px;left:9px;width:8px;height:8px;border-radius:50%;background:var(--red)}

/* ---------- Error log page ---------- */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.log-trace{
  background:var(--bg-soft);border:1px solid var(--card-border);border-radius:var(--radius-sm);
  padding:16px;font-family:'Courier New',monospace;font-size:12px;line-height:1.7;color:var(--text-dim);
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;direction:ltr;text-align:left;
}
.footer-tagline{max-width:760px;margin:0 auto 14px;font-size:12px;line-height:2;color:var(--text-dim);opacity:.85}

/* ---------- Small-screen refinements (phones) ----------
   Broader breakpoints above already reflow layout to 1 column;
   this pass tightens spacing/type-size and fixes two concrete
   mobile issues: iOS Safari auto-zooming on form focus (needs
   16px+ inputs) and admin tables overflowing the viewport. */
@media (max-width:480px){
  .container{padding:0 14px}
  .hero{padding:36px 0 24px}
  .hero h1{font-size:26px;line-height:1.4}
  .hero p{font-size:14px}
  .section{padding:38px 0}
  .section-title{font-size:21px}
  .card{padding:18px}
  .btn{padding:11px 20px;font-size:14px}
  .field input{font-size:16px}
  .admin-main{padding:16px}
  .admin-table th,.admin-table td{padding:9px 10px;font-size:12px}
  .auth-card{padding:22px}
  .ticket-msg{max-width:90%;font-size:13px}
  .certificate{padding:26px 18px}
  .certificate h2{font-size:21px}
  .certificate .name{font-size:23px}
  .certificate .stats{gap:18px}
  .certificate .footer-row{flex-direction:column;gap:10px;align-items:center;text-align:center}
  #typing-target,.preview-target{font-size:17px;padding:16px;line-height:2}
  .visa-card{padding:16px 18px}
  .modal-box{padding:20px}
  .league-card-head{flex-direction:column;align-items:flex-start;gap:10px}
  .resume-head{flex-direction:column;text-align:center}
  .resume-head .league-badge{margin-inline-start:0 !important}
  .pb-choices{flex-direction:column}
}

/* ==========================================================
   League badges (Bronze -> Silver -> Gold -> Diamond -> Master)
   ========================================================== */
.league-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  font-weight:800;font-size:14px;border:1px solid transparent;white-space:nowrap;
}
.league-bronze{background:rgba(176,141,87,.15);color:#c99a5b;border-color:rgba(176,141,87,.35)}
.league-silver{background:rgba(185,194,204,.15);color:#c7ced6;border-color:rgba(185,194,204,.35)}
.league-gold{background:rgba(242,201,76,.15);color:#f2c94c;border-color:rgba(242,201,76,.35)}
.league-diamond{background:rgba(90,214,242,.15);color:#5ad6f2;border-color:rgba(90,214,242,.35)}
.league-master{background:linear-gradient(90deg,rgba(255,122,89,.2),rgba(242,201,76,.2));color:#ff8f6b;border-color:rgba(255,122,89,.4)}

.league-card,.streak-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.league-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dash-level-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);margin:14px 0 6px}

/* League legend table (leaderboard.php) */
.league-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0 30px}
.league-legend-item{
  text-align:center;padding:16px 10px;border-radius:var(--radius);border:1px solid var(--card-border);background:var(--card);
}
.league-legend-item .league-badge{margin-bottom:8px}
.league-legend-item p{margin:0;font-size:12px;color:var(--text-dim)}

/* ==========================================================
   Streak card
   ========================================================== */
.streak-dots{display:flex;gap:8px;margin-top:14px}
.streak-dot{
  flex:1;height:10px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--card-border);
}
.streak-dot.filled{background:linear-gradient(90deg,#ff9d5c,#ff6b6b);border-color:#ff6b6b}

/* ==========================================================
   Weak-key / custom-practice builder
   ========================================================== */
.weak-key-widget{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:18px 20px;margin:0 0 26px;box-shadow:var(--shadow);
}
.weak-key-hint{margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--bg-soft);border:1px solid var(--card-border)}
.weak-key-hint-title{font-size:13px;color:var(--text-dim);margin-bottom:8px}
.weak-key-hint a{display:inline-block;margin-top:10px;font-size:13px;color:var(--blue-bright);font-weight:700}
.weak-key-chips{display:flex;flex-wrap:wrap;gap:8px}
.weak-key-chip{
  display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;font-size:13px;
  background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.28);font-weight:700;
}
.weak-key-chip b{font-weight:800}

.practice-builder{max-width:640px;margin:0 auto}
.pb-block{margin-bottom:26px}
.pb-label{font-weight:700;margin-bottom:12px;font-size:15px}
.pb-choices{display:flex;flex-wrap:wrap;gap:10px}
.pb-chip{
  display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--card-border);background:var(--bg-soft);cursor:pointer;font-size:14px;transition:.15s;flex:1;min-width:140px;justify-content:center;
}
.pb-chip:has(input:checked){border-color:var(--blue-bright);background:rgba(59,130,246,.1);color:var(--blue-bright);font-weight:700}
.pb-chip input{position:absolute;opacity:0;width:0;height:0}
.wkp-panel{margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg-soft);border:1px solid var(--card-border);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wkp-title{font-size:12px;color:var(--text-dim)}

/* ==========================================================
   Resume ("رزومه من") page
   ========================================================== */
.resume-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);
}
.resume-head{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--card-border)}
.resume-head h2{margin:0 0 4px;font-size:20px}
.resume-head p{margin:0;font-size:13px;color:var(--text-dim)}
.resume-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-bottom:26px}
.resume-stat{text-align:center;padding:16px 8px;border-radius:var(--radius-sm);background:var(--bg-soft);border:1px solid var(--card-border)}
.resume-stat .v{font-size:20px;font-weight:800;color:var(--blue-bright)}
.resume-stat .l{font-size:12px;color:var(--text-dim);margin-top:4px}
.resume-section{margin-top:22px}
.resume-section h3{display:flex;align-items:center;gap:8px;font-size:15px;margin:0}
.resume-list{margin:10px 0 0;padding-inline-start:20px;font-size:13px;color:var(--text-dim);line-height:2}

@media print{
  .site-header,.site-footer,#printResumeBtn,.btn{display:none !important}
  .resume-card{box-shadow:none;border:none}
}