/* ══════════════════════════════════════════════════════════════
   nfsyn-tools.css — الثيم الموحّد لأدوات نفسياً دوت كوم
   يُستخدم في: صفحة الاختبارات + كل أداة.
   أي تعديل هنا يسري على كل الأدوات دفعة واحدة.
   ══════════════════════════════════════════════════════════════ */

:root{
  --amber:#E8A33D;
  --violet:#5B4B8A;
  --bg:#0A0A14;
  --ivory:#F2EFE9;
  --muted:rgba(242,239,233,.55);
  --line:rgba(242,239,233,.12);
  --card:rgba(242,239,233,.045);
  --font:'Cairo','Tajawal','Noto Kufi Arabic','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ivory);font-family:var(--font)}
body{
  min-height:100vh;line-height:1.85;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(232,163,61,.10), transparent 55%),
    radial-gradient(120% 80% at 88% 100%, rgba(91,75,138,.16), transparent 55%),
    var(--bg);
}
.wrap{max-width:820px;margin:0 auto;padding:38px 20px 70px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── الشاشات ── */
.screen{display:none;animation:rise .45s ease both}
.screen.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── العناوين ── */
.brand{font-size:13px;letter-spacing:.14em;color:var(--amber);font-weight:600;margin-bottom:26px}
h1,.hero{font-size:clamp(29px,6.6vw,44px);font-weight:900;line-height:1.35;letter-spacing:-.01em}
.tagline{color:var(--amber);font-size:16px;font-weight:600;margin-top:14px}
.lead{color:var(--muted);font-size:17px;margin-top:16px;max-width:56ch}
.rule{height:1px;background:var(--line);margin:30px 0}
a{color:var(--amber)}

/* ── الأزرار ── */
.btn{display:inline-block;border:0;cursor:pointer;font-family:var(--font);font-weight:900;
  font-size:18px;padding:15px 40px;border-radius:999px;background:var(--amber);color:#12100a;
  text-decoration:none;transition:transform .15s ease, box-shadow .15s ease}
.btn.ghost{background:transparent;color:var(--ivory);border:1px solid var(--line);
  font-weight:600;font-size:15px;padding:12px 28px}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(232,163,61,.22)}
  .btn.ghost:hover{border-color:var(--amber);color:var(--amber);box-shadow:none}
}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.note{font-size:13px;color:var(--muted);margin-top:22px;line-height:1.9;
  border-right:2px solid var(--violet);padding-right:14px}

/* ── شريط التقدّم ── */
.bar{height:3px;background:rgba(242,239,233,.09);border-radius:3px;overflow:hidden;margin-bottom:14px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--amber));transition:width .5s ease}
.step{font-size:13px;color:var(--muted);letter-spacing:.05em}
.ask{font-size:clamp(21px,4.6vw,28px);font-weight:900;margin:18px 0 6px;line-height:1.5}
.asksub{color:var(--muted);font-size:15px;margin-bottom:24px}

/* ── شبكة بطاقات الاختيار (أداة الإسقاط) ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.v{text-align:right;font-family:var(--font);color:var(--ivory);cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease, opacity .35s ease}
@media (hover:hover){
  .v:hover{border-color:var(--violet);background:rgba(91,75,138,.14);transform:translateY(-2px)}
}
.v:active{border-color:var(--violet);background:rgba(91,75,138,.18)}
.v b{display:block;font-size:19px;font-weight:900;margin-bottom:5px}
.v span{display:block;font-size:14px;color:var(--muted);line-height:1.7}
.v.gone{opacity:0;transform:scale(.94);pointer-events:none}

/* ── مواقف بثمن (أداة الحدود) ── */
.domain{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--violet);
  border:1px solid rgba(91,75,138,.5);border-radius:999px;padding:4px 14px;margin:16px 0 10px}
.situation{font-size:clamp(19px,4.2vw,25px);font-weight:900;line-height:1.65;margin-bottom:26px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){ .opts{grid-template-columns:1fr} }
.opt{text-align:right;font-family:var(--font);color:var(--ivory);cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease, opacity .3s ease}
.opt b{display:block;font-size:20px;font-weight:900;margin-bottom:8px}
.opt .cost{display:block;font-size:14px;color:var(--muted);line-height:1.7}
.opt .costlbl{color:rgba(242,239,233,.38);font-size:12px;letter-spacing:.08em;display:block;margin-bottom:3px}
@media (hover:hover){ .opt:hover{border-color:var(--violet);background:rgba(91,75,138,.14);transform:translateY(-2px)} }
.opt:active{border-color:var(--violet);background:rgba(91,75,138,.18)}
.opt.yes b{color:rgba(242,239,233,.92)}
.opt.no b{color:var(--amber)}
.opt.gone{opacity:0;transform:scale(.96);pointer-events:none}

/* ── منصّة النتائج ── */
.podium{display:grid;gap:12px;margin:26px 0 34px}
.podium .p{display:flex;align-items:baseline;gap:14px;border:1px solid var(--line);
  border-radius:16px;padding:18px 20px;background:var(--card)}
.podium .p .n{font-size:15px;font-weight:900;color:var(--violet);min-width:26px}
.podium .p b{font-size:22px;font-weight:900}
.podium .p span{font-size:14px;color:var(--muted);display:block;margin-top:2px}
.podium .p.first{border-color:rgba(232,163,61,.5);background:rgba(232,163,61,.08)}
.podium .p.first .n,.podium .p.first b{color:var(--amber)}

/* ── خريطة أشرطة ── */
.map{margin:26px 0 8px}
.map .row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.map .row .nm{width:78px;flex:0 0 78px;font-size:16px;font-weight:900}
.map .row .tr{flex:1;height:12px;background:rgba(242,239,233,.07);border-radius:999px;overflow:hidden}
.map .row .fl{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--amber));transition:width .8s ease}
.map .row .st{width:74px;flex:0 0 74px;font-size:13px;color:var(--muted);text-align:left}
.map .row.hd{margin-bottom:10px}
.map .row.hd .nm,.map .row.hd .st{font-size:11.5px;letter-spacing:.14em;
  color:rgba(242,239,233,.35);font-weight:600}

/* ── صناديق النتيجة ── */
.kv{border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:var(--card);margin-top:18px}
.kv .lbl{font-size:12px;letter-spacing:.16em;color:var(--amber);font-weight:600;margin-bottom:8px}
.kv .val{font-size:22px;font-weight:900;line-height:1.5}
.kv p{font-size:15.5px;color:var(--muted);margin-top:10px}

.reveal{border-right:3px solid var(--amber);background:rgba(232,163,61,.07);
  border-radius:0 16px 16px 0;padding:20px 22px;margin-top:18px}
.reveal .q{font-size:15px;color:var(--muted);margin-bottom:10px;line-height:1.75}
.reveal .a{font-size:20px;font-weight:900;line-height:1.55}

.read p{margin-bottom:15px;font-size:17px}
.read .sub{font-size:13px;letter-spacing:.14em;color:var(--amber);font-weight:600;margin:30px 0 12px}
.read .dropped{font-size:14px;color:var(--muted);margin-top:8px}
.read .dropped em{font-style:normal;color:rgba(242,239,233,.8)}

/* ── التدريبة والخطة ── */
.phr{display:grid;gap:12px;margin-top:20px}
.ph{text-align:right;font-family:var(--font);color:var(--ivory);cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px;
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.ph .tone{display:block;font-size:12px;letter-spacing:.1em;color:var(--violet);font-weight:600;margin-bottom:6px}
.ph .say{display:block;font-size:18px;font-weight:600;line-height:1.65}
@media (hover:hover){ .ph:hover{border-color:var(--amber);background:rgba(232,163,61,.07);transform:translateY(-2px)} }
.ph.sel{border-color:var(--amber);background:rgba(232,163,61,.10)}

.plan{border:1px solid rgba(232,163,61,.45);background:rgba(232,163,61,.08);
  border-radius:18px;padding:24px;margin-top:26px}
.plan .lbl{font-size:12px;letter-spacing:.16em;color:var(--amber);font-weight:600;margin-bottom:12px}
.plan .txt{font-size:20px;font-weight:900;line-height:1.7}
.plan .txt em{font-style:normal;color:var(--amber)}

/* ── نداء التعليقات والتوقيع ── */
.cta{border:1px solid var(--line);border-radius:18px;padding:24px;margin-top:34px;background:var(--card)}
.cta h3{font-size:19px;font-weight:900;margin-bottom:8px}
.cta p{font-size:15px;color:var(--muted)}
.sign{text-align:center;margin-top:46px;font-size:15px;color:var(--muted);letter-spacing:.04em}
.sign b{color:var(--ivory);font-weight:900;display:block;font-size:19px;margin-bottom:4px}
.disc{font-size:12.5px;color:rgba(242,239,233,.4);margin-top:30px;line-height:1.9;text-align:center}

/* ── الإعلانات ── */
.adzone{margin:56px 0 10px;padding:16px;border-radius:16px;
  background:rgba(242,239,233,.03);border:1px solid var(--line);min-height:130px;overflow:hidden}
.adzone .lbl{display:block;font-size:11px;letter-spacing:.22em;color:rgba(242,239,233,.32);
  margin-bottom:12px;text-align:center;font-weight:600}
.adzone ins{display:block}

/* ── المقال ── */
.article{border-top:1px solid var(--line);margin-top:80px;padding-top:56px}
.article h2{font-size:clamp(24px,5.2vw,32px);font-weight:900;line-height:1.45;margin-bottom:20px}
.article h3{font-size:clamp(19px,4vw,23px);font-weight:900;margin:42px 0 14px;color:var(--amber)}
.article p{font-size:17px;margin-bottom:17px;color:rgba(242,239,233,.86)}
.article strong{color:var(--ivory);font-weight:900}
.article ul,.article ol{margin:0 20px 20px 0;padding:0}
.article li{font-size:16.5px;margin-bottom:11px;color:rgba(242,239,233,.8)}
.article li b{color:var(--ivory)}
.pull{border-right:3px solid var(--amber);background:rgba(232,163,61,.06);
  border-radius:0 14px 14px 0;padding:20px 22px;margin:28px 0;
  font-size:18.5px;font-weight:600;color:var(--ivory);line-height:1.75}
.faq{margin-top:50px}
.faq details{border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:12px;background:var(--card)}
.faq summary{cursor:pointer;font-weight:900;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'＋ ';color:var(--amber)}
.faq details[open] summary::before{content:'－ ';color:var(--violet)}
.faq p{margin-top:12px;font-size:16px;color:var(--muted)}

/* ── بطاقات الأدوات (صفحة الاختبارات) ── */
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin-top:30px}
.tool{display:flex;flex-direction:column;text-decoration:none;color:var(--ivory);background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:22px 22px 18px;
  transition:border-color .2s ease,background .2s ease,transform .2s ease}
@media (hover:hover){
  .tool:hover{border-color:rgba(232,163,61,.55);background:rgba(232,163,61,.06);transform:translateY(-3px)}
}
.tool .kind{font-size:11px;letter-spacing:.16em;color:var(--violet);font-weight:600}
.tool h3{font-size:21px;font-weight:900;margin:8px 0 7px;color:var(--ivory);line-height:1.4}
.tool p{font-size:14.5px;color:var(--muted);line-height:1.7}
.tool .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tool .meta span{font-size:12px;color:rgba(242,239,233,.5);border:1px solid var(--line);
  border-radius:999px;padding:3px 12px}
.tool .go{display:inline-block;margin-top:auto;padding-top:14px;color:var(--amber);font-weight:900;font-size:14.5px}
.soon{border-style:dashed;opacity:.55}
.soon h3{color:rgba(242,239,233,.6)}
.soon .kind{color:rgba(242,239,233,.35)}

/* شريط العودة أعلى كل أداة */
.back{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;
  letter-spacing:.04em;margin-bottom:18px}
@media (hover:hover){ .back:hover{color:var(--amber)} }

/* ── التذييل ── */
.foot{margin-top:76px;border-top:1px solid var(--line);padding-top:44px;text-align:center}
.foot .mark{font-size:30px;font-weight:900}
.foot .mark em{font-style:normal;color:var(--amber)}
.foot .tag{color:var(--muted);font-size:15px;margin-top:6px}
.links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:32px auto 0;max-width:620px}
.lnk{flex:1 1 200px;display:flex;align-items:center;gap:13px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 18px;
  text-align:right;color:var(--ivory);transition:border-color .2s ease,background .2s ease,transform .2s ease}
@media (hover:hover){ .lnk:hover{transform:translateY(-3px)} }
.lnk .ic{flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(232,163,61,.12)}
.lnk .ic svg{width:21px;height:21px;fill:var(--amber)}
.lnk .tx b{display:block;font-size:16px;font-weight:900}
.lnk .tx span{display:block;font-size:12.5px;color:var(--muted);letter-spacing:.04em}
@media (hover:hover){
  .lnk.site:hover{border-color:rgba(232,163,61,.55);background:rgba(232,163,61,.07)}
  .lnk.fb:hover{border-color:rgba(91,75,138,.75);background:rgba(91,75,138,.14)}
  .lnk.tool2:hover{border-color:rgba(232,163,61,.55);background:rgba(232,163,61,.07)}
}
.lnk.fb .ic{background:rgba(91,75,138,.2)}
.lnk.fb .ic svg{fill:#9b87d6}
.foot .rights{margin-top:34px;font-size:12.5px;color:rgba(242,239,233,.34)}
.foot .rights a{color:rgba(242,239,233,.5);text-decoration:none}
@media (hover:hover){ .foot .rights a:hover{color:var(--amber)} }

canvas.card{display:none}