/* ARAVID — استایل اپلیکیشن موبایل */
:root{
  --navy:#0a1330; --navy2:#16204a; --gold:#d1ad8a; --gold-soft:#e8d7c3;
  --bg:#f3f1ec; --card:#ffffff; --text:#16192b; --muted:#8a8f9c;
  --line:#e6e3dc; --radius:18px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Vazirmatn","IRANSans","Shabnam",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;
  font-size:16px; line-height:1.7;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
  overflow-x:hidden;
}
.app{max-width:560px;margin:0 auto;padding:0 16px 40px}

/* ---------- سرصفحه برند ---------- */
.brand{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 100%);
  color:#fff;border-radius:0 0 26px 26px;
  padding:22px 20px 28px;margin:0 -16px 20px;text-align:center;
}
.brand .brand-logo{
  display:block;margin:0 auto 4px;
  width:214px;height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.brand .tag{display:block;font-size:12.5px;color:#c9cfe6;margin-top:6px;letter-spacing:.5px}
.brand .sub{display:block;font-size:11.5px;color:var(--gold);margin-top:8px;letter-spacing:1px}
.brand .pos{display:inline-block;margin-top:12px;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(90deg,#C55A11,#BF9000);padding:4px 12px;border-radius:20px;letter-spacing:.2px;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* ---------- کارت‌ها ---------- */
.card{
  background:var(--card);border-radius:var(--radius);padding:20px 18px;
  box-shadow:0 6px 22px rgba(10,19,48,.07);margin-bottom:14px;
}
.card h2{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--navy)}
.card p{margin:0 0 10px;font-size:14.5px;color:#4a5064;line-height:1.85}

/* ---------- دکمه‌ها ---------- */
.btn{
  display:block;width:100%;border:none;border-radius:14px;padding:15px 18px;
  font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:filter .15s,transform .1s;
}
.btn:active{transform:scale(.985)}
.btn-pri{background:var(--navy);color:#fff}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-ghost{background:transparent;color:var(--navy);border:2px solid var(--line)}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

/* ---------- صفحه خوش‌آمد ---------- */
.hero{text-align:center;padding:6px 0 4px}
.hero .ic{width:88px;height:88px;display:block;margin:0 auto 10px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(10,19,48,.18))}
.hero h1{margin:0 0 8px;font-size:22px;font-weight:800;color:var(--navy)}
.hero p{color:#5a6076;font-size:14px;margin:0 0 18px}
.meta{
  display:flex;justify-content:space-around;gap:8px;margin:16px 0 20px;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.meta div{text-align:center}
.meta b{display:block;font-size:19px;color:var(--gold);font-weight:800}
.meta span{font-size:11.5px;color:var(--muted)}

/* ---------- معرفی آراوید (صفحه‌ی اول) ---------- */
.about{
  background:linear-gradient(180deg,#ffffff 0%,#fbf9f5 100%);
  border:1px solid var(--gold-soft);
}
.about .ah{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.about .ah .mark{width:48px;height:48px;display:block;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(10,19,48,.15))}
.about h2{margin:0;font-size:17.5px;font-weight:800;color:var(--navy)}
.about .atext{
  margin:0;font-size:14.5px;line-height:2.1;color:#3f4557;
  text-align:justify;text-align-last:center;
}
.why .whypts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.why .whypts li{position:relative;padding-inline-start:22px;font-size:13.5px;color:#3a3f52;line-height:1.65}
.why .whypts li:before{content:"✦";position:absolute;inset-inline-start:0;color:#BF9000;font-size:13px}
.whyh{font-size:15px;font-weight:700;color:var(--navy);margin:16px 0 4px;line-height:1.6}

/* ---------- آزمون ---------- */
.progress-wrap{margin:0 0 14px}
.progress-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.progress{height:7px;background:var(--gold-soft);border-radius:6px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--navy2));border-radius:6px;transition:width .3s}
.qnum{font-size:12.5px;color:var(--muted);margin-bottom:8px;letter-spacing:.5px}
.qtext{font-size:20px;font-weight:700;color:var(--navy);line-height:1.65;margin:0 0 20px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{
  background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 16px 52px;text-align:right;position:relative;cursor:pointer;
  font-size:15.5px;line-height:1.7;color:#2a2f45;font-weight:600;
  transition:border-color .15s,background .15s;
}
.opt .key{
  position:absolute;top:14px;left:14px;width:26px;height:26px;border-radius:50%;
  background:var(--gold-soft);color:var(--navy);font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.opt:active{transform:scale(.99)}
.opt.sel{border-color:var(--navy);background:#f7f6f2}
.opt.sel .key{background:var(--gold);color:var(--navy)}
.qnav{display:flex;gap:10px;margin-top:18px}
.qnav .btn{flex:1;padding:13px}
.qnav .btn:disabled{opacity:.45;cursor:default}

/* ---------- پنل تیرهٔ آزمون (متن سفید / تاکید طلایی) ---------- */
.quiz-panel{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 100%);
  border:none;
  box-shadow:0 8px 26px rgba(10,19,48,.20);
}
.quiz-panel .wzq + .wzq{margin-top:16px}
.quiz-panel .ql{color:#fff;font-weight:700}
.quiz-panel .opt{
  background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.16);
  color:#fff;
}
.quiz-panel .opt .opt-text{color:#fff}
.quiz-panel .opt .key{
  background:rgba(255,255,255,.14);
  color:var(--gold);
}
.quiz-panel .opt.sel{
  border-color:var(--gold);
  background:rgba(209,173,138,.18);
}
.quiz-panel .opt.sel .key{
  background:var(--gold);
  color:var(--navy);
}

/* ---------- گراف عنکبوتی (Radar) ---------- */
.radarbox{text-align:center}
.radar-wrap{
  width:100%;max-width:340px;margin:0 auto 6px;
  background:linear-gradient(180deg,#fbfaf7 0%,#f3f1ec 100%);
  border:1px solid var(--line);border-radius:16px;padding:6px;
}
.radar-svg{width:100%;height:auto;display:block;overflow:visible}
.radar-ring{fill:none;stroke:#d9d4c8;stroke-width:1}
.radar-spoke{stroke:#e2ddd1;stroke-width:1}
.radar-poly{
  fill-opacity:.16;stroke-width:1.8;stroke-linejoin:round;
  transition:fill-opacity .15s,stroke-width .15s;
}
.radar-main{fill-opacity:.24;stroke-width:2.6}
.radar-dot{stroke:#fff;stroke-width:1.4}
.radar-lbl{font-size:11.5px;font-weight:700;fill:#2a2f45;font-family:inherit}
.radar-val{font-size:11px;font-weight:800;fill:#8a6a3a;font-family:inherit}

.radar-legend{font-size:12px;color:var(--muted);margin:10px 0 6px;text-align:start}
.radar-toggles{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.rtog{
  display:inline-flex;align-items:center;gap:6px;
  background:#f7f6f2;border:1px solid var(--line);border-radius:20px;
  padding:6px 12px;font-size:12px;font-weight:600;color:#5a6076;
  cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s;
}
.rtog i{width:9px;height:9px;border-radius:50%;display:block;opacity:.45;transition:opacity .15s}
.rtog.on{background:#fff;border-color:currentColor;color:var(--navy);font-weight:700}
.rtog.on i{opacity:1}

/* کارت‌های راهنمای محور */
.axis-cards{
  display:grid;grid-template-columns:1fr;gap:9px;
  margin-top:6px;text-align:start;
}
.axis-card{
  background:#fbfaf7;border:1px solid var(--line);border-radius:14px;padding:11px 13px;
}
.ac-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ac-head b{font-size:13.5px;color:var(--navy);font-weight:700;display:block;flex:1}
.ac-num{
  font-size:12px;font-weight:800;color:#8a6a3a;
  background:#f3ede2;border-radius:8px;padding:1px 8px;flex:none;
}
.ac-band{font-size:11.5px;font-weight:700;color:var(--navy);margin-top:3px}
.ac-hint{font-size:12px;color:#5a6076;line-height:1.7;margin-top:3px}
.ac-pole{font-size:11.5px;color:#BF9000;font-weight:600;margin-top:3px}
.ac-track{height:6px;background:#eceae3;border-radius:5px;overflow:hidden;margin-top:8px}
.ac-track i{display:block;height:100%;background:linear-gradient(90deg,#3B6FD4,#8A5CC4);border-radius:5px}

/* ---------- جدول لایه‌ها با برچسب کیفی ---------- */
.citbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
table.citbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:430px}
.citbl th{
  background:#f3f1ec;color:#5a6076;font-weight:700;font-size:11.5px;
  padding:9px 6px;text-align:center;border-bottom:1px solid var(--line);line-height:1.5;
}
.citbl th:first-child{text-align:start;min-width:104px}
.citbl td{padding:9px 6px;text-align:center;border-bottom:1px solid var(--line);vertical-align:middle}
.citbl-row{
  font-weight:700;color:var(--navy);text-align:start;font-size:12px;
  position:sticky;inset-inline-start:0;background:var(--card);
}
.citbl-row .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-inline-end:6px;vertical-align:middle}
.citbl-cell{white-space:nowrap}
.citbl-cell .lv{font-weight:800;font-size:13px}
.lv-hi{color:#1F6F4A}.lv-mhi{color:#4E8B57}.lv-mid{color:#8a8f9c}
.lv-mlo{color:#B5762A}.lv-lo{color:#B5402F}
.citbl-cell .lb{display:block;font-size:10px;color:var(--muted);font-style:normal;margin-top:1px}
.citbl-note{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.7;text-align:start}

/* ---------- نتیجه ---------- */
.reshead{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 100%);
  color:#fff;border-radius:var(--radius);padding:24px 18px;text-align:center;margin-bottom:14px;
}
.reshead .code{font-size:42px;font-weight:800;letter-spacing:5px;margin:0;line-height:1.2}
.reshead .nm{font-size:19px;font-weight:700;color:var(--gold);margin:6px 0 2px}
.reshead .temp{font-size:13px;color:#c9cfe6;margin:0}

.bars{margin:0 0 6px}
.bar{margin-bottom:14px}
.bar .lbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.bar .lbl b{color:var(--navy);font-size:13.5px}
.bar .lbl span{color:var(--muted);font-size:12px}
.bar .track{height:10px;background:var(--gold-soft);border-radius:6px;overflow:hidden;display:flex}
.bar .track i{display:block;height:100%}
.bar .track i.l{background:linear-gradient(90deg,var(--navy),var(--navy2))}
.bar .track i.r{background:#ffffff}

.pref{list-style:none;margin:0;padding:0}
.pref li{
  padding:11px 0 11px 0;border-bottom:1px dashed var(--line);
  font-size:13.5px;line-height:1.8;color:#3a4055;
}
.pref li:last-child{border-bottom:none}
.pref li b{
  display:inline-block;min-width:20px;color:var(--navy);font-size:13px;
  background:var(--gold-soft);border-radius:6px;padding:1px 7px;margin-left:8px;
}
.desc{font-size:14.5px;line-height:1.95;color:#3a4055;text-align:justify}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  background:#f7f6f2;border:1px solid var(--line);border-radius:20px;
  padding:7px 14px;font-size:13px;color:var(--navy);font-weight:600;
}
.match{display:flex;gap:10px;margin-top:10px}
.match div{
  flex:1;background:#f7f6f2;border:1px solid var(--line);border-radius:14px;
  padding:12px 10px;text-align:center;
}
.match b{display:block;font-size:16px;color:var(--navy);letter-spacing:1px}
.match span{font-size:12px;color:var(--muted)}

/* ---------- پاورقی سایت ---------- */
.sitefoot{
  text-align:center;margin:20px 0 4px;padding:14px 0;
  border-top:1px solid var(--line);
}
.sitefoot .lbl{display:block;font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:5px}
.sitefoot .url{
  display:inline-block;color:var(--navy);font-weight:800;text-decoration:none;font-size:15px;
  background:#f7f6f2;border:1px solid var(--line);border-radius:22px;padding:8px 18px;
}
.sitefoot small{display:block;color:var(--muted);font-size:11.5px;margin-top:8px;letter-spacing:1px}
.disclaimer{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.8;padding:0 8px}

/* ---------- انتخاب زبان ---------- */
.langbar{
  position:fixed;top:calc(var(--safe-t) + 12px);left:14px;z-index:50;
  display:flex;gap:6px;
}
.langbar button{
  background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:20px;
  padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;color:var(--navy);
  font-family:inherit;box-shadow:0 2px 8px rgba(10,19,48,.08);
}
.langbar button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- حالت تاریک (خودکار) ---------- */
@media (prefers-color-scheme: dark){
  :root{--bg:#0e1220;--card:#171c2e;--text:#e8eaf2;--line:#2a3149;--gold-soft:#39352c}
  body{background:var(--bg);color:var(--text)}
  .card{box-shadow:0 6px 22px rgba(0,0,0,.25)}
  .card h2,.hero h1,.qtext,.bar .lbl b,.reshead .code{color:#fff}
  .card p,.hero p,.desc,.pref li{color:#b9bfd0}
  .qtext{color:#fff}
  .opt{background:var(--card);border-color:var(--line);color:#e8eaf2}
  .opt.sel{background:#20263c;border-color:var(--gold)}
  .chip,.match div{background:#20263c;border-color:var(--line);color:#e8eaf2}
  .about{background:linear-gradient(180deg,#171c2e 0%,#141a29 100%);border-color:#3a3529}
  .about h2{color:#fff}
  .about .atext{color:#b9bfd0}
  .why{background:linear-gradient(180deg,#171c2e 0%,#141a29 100%);border-color:#3a3529}
  .why h2{color:#fff}
  .why .atext{color:#b9bfd0}
  .whyh{color:#fff}
  .why .whypts li{color:#cdd3e3}
  .why .whypts li:before{color:#d8b24a}
  .sitefoot .url{background:#20263c;border-color:var(--line);color:#e8eaf2}
  .btn-ghost{border-color:var(--line);color:#e8eaf2}
  .langbar button{background:rgba(30,36,56,.9);color:#e8eaf2;border-color:var(--line)}
  .bar .track i.r{background:#2a3149}
  /* عناصر تزریقی app.js (wizard/result) — رنگ‌های روشن در حالت تاریک */
  .wzq{border-top-color:#2a3149}
  .wzintro{background:linear-gradient(180deg,#171c2e 0%,#141a29 100%);border-color:#3a3529}
  .wzintro .sub,.wzintro .text{color:#cdd3e3}
  .wzintro .tagline{background:#20263c;color:#e8eaf2}
  .cit{color:#b9bfd0}
  .ciarch{color:#fff}
  .cicomp{background:#20263c;color:#e8eaf2}
  .citbl th{background:#20263c}
  .citbl th,.citbl td{border-bottom-color:#2a3149}
  .ciip{color:#cdd3e3}
  .ciip .lbl{color:#fff}
  .interphp{background:#1a2038;border-right-color:#BF9000}
  .interph,.interplbl{color:#fff}
  .interpi,.interptxt,.interphp li{color:#cdd3e3}
  .interpdisc{color:#8a8f9c;border-top-color:#3a3a2c}
  /* گراف عنکبوتی و جدول در حالت تاریک */
  .radar-wrap{background:linear-gradient(180deg,#171c2e 0%,#141a29 100%);border-color:#2a3149}
  .radar-ring{fill:none;stroke:#2f3650;stroke-width:1}
  .radar-spoke{stroke:#262c42}
  .radar-dot{stroke:#171c2e}
  .radar-lbl{fill:#e8eaf2}
  .radar-val{fill:#d8b24a}
  .rtog{background:#20263c;border-color:#2a3149;color:#cdd3e3}
  .rtog.on{background:#2b3350;color:#fff}
  .axis-card{background:#1b2136;border-color:#2a3149}
  .ac-head b{color:#fff}
  .ac-band{color:#d8b24a}
  .ac-num{background:#2f2a22;color:#d8b24a}
  .ac-hint{color:#cdd3e3}
  .ac-pole{color:#d8b24a}
  .ac-track{background:#252b40}
  .citbl th{background:#20263c;color:#cdd3e3;border-bottom-color:#2a3149}
  .citbl td{border-bottom-color:#2a3149}
  .citbl-row{background:var(--card);color:#fff}
  .citbl-cell .lb{color:#8a8f9c}
  .lv-hi{color:#5fc48c}.lv-mhi{color:#8fcf9c}.lv-mid{color:#8a8f9c}
  .lv-mlo{color:#e0a75c}.lv-lo{color:#e8798a}
  .loading p{color:#b9bfd0}
  .wzskip{color:#b9bfd0}
}