/* سنجه — آزمون‌های روانشناسی، شخصیت و هوش */
.sj-hero{--h:250;position:relative;overflow:hidden;border-radius:calc(var(--r) + 10px);margin-top:16px;padding:36px 32px;color:#fff;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;
  background:radial-gradient(90% 120% at 100% 0%,hsl(var(--h) 55% 42%),hsl(calc(var(--h) + 40) 60% 18%) 70%)}
.sj-hero::before{content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.14;
  background:repeating-radial-gradient(circle at 30% 60%,transparent 0 22px,#fff 22px 23px)}
.sj-hero>*{position:relative}
.sj-hero .kicker{display:inline-flex;gap:8px;align-items:center;font-size:13px;background:rgb(255 255 255 / .14);padding:4px 12px;border-radius:99px}
.sj-hero h1{font-family:var(--f-display);font-weight:400;font-size:58px;line-height:1.15;margin-top:10px}
.sj-hero h1 small{display:block;font-family:var(--f-body);font-size:20px;font-weight:700;opacity:.92;margin-top:6px}
.sj-hero p{opacity:.9;max-width:52ch;margin-top:12px}
.sj-stats{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.sj-stats b{display:block;font-family:var(--f-display);font-weight:400;font-size:32px;line-height:1.2}
.sj-stats span{font-size:12.5px;opacity:.85}
.sj-hero .btn{background:#fff;color:hsl(var(--h) 50% 25%);border-color:#fff;font-weight:700}
.sj-hero .btn.ghost{background:transparent;color:#fff;border-color:rgb(255 255 255 / .5)}
.sj-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* پیش‌نمایش گواهی در سربرگ */
.mini-cert{background:#FBF7EE;color:#26222E;border-radius:10px;padding:18px 18px 14px;box-shadow:0 18px 40px rgb(0 0 0 / .35);
  transform:rotate(-3deg);border:6px solid hsl(var(--h) 45% 24%);outline:1.5px solid #B28A34;outline-offset:-12px;text-align:center;display:grid;gap:4px}
.mini-cert .l{font-family:var(--f-display);font-size:16px;color:hsl(var(--h) 45% 26%)}
.mini-cert .t{font-family:var(--f-display);font-size:26px;line-height:1.3}
.mini-cert .n{font-family:var(--f-display);font-size:22px;color:hsl(var(--h) 45% 30%)}
.mini-cert .r{background:hsl(var(--h) 60% 95%);border-radius:10px;padding:10px;display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:6px}
.mini-cert .r b{font-family:var(--f-display);font-weight:400;font-size:18px;color:hsl(var(--h) 45% 26%)}
.mini-cert .g{width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:900;font-size:15px;
  background:conic-gradient(hsl(var(--h) 45% 50%) 0 78%,hsl(var(--h) 25% 88%) 0);position:relative}
.mini-cert .g::before{content:"";position:absolute;inset:7px;background:#fff;border-radius:50%}
.mini-cert .g span{position:relative}
.mini-cert .f{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:#766e62;margin-top:6px}
.mini-cert .seal{width:40px;height:40px;border-radius:50%;background:radial-gradient(#E0C17A 55%,#B28A34 56% 62%,#E0C17A 63%);display:grid;place-items:center;font-family:var(--f-display);font-size:10px;color:#6E4E14}

/* گروه‌ها و کارت‌ها */
.sj-nav{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 4px}
.sj-nav a{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 14px;font-size:13.5px;font-weight:600}
.sj-group{margin-top:40px;scroll-margin-top:16px}
.sj-group>header{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.sj-group h2{font-size:24px;font-weight:900}
.sj-group header p{color:var(--muted);font-size:14px}
.sj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.sj-card{--h:230;position:relative;overflow:hidden;border-radius:var(--r);padding:18px;min-height:190px;display:grid;align-content:space-between;gap:10px;color:#fff;
  background:radial-gradient(120% 100% at 100% 0%,hsl(var(--h) 58% 52%),hsl(calc(var(--h) + 28) 55% 26%));transition:transform .2s,box-shadow .2s}
.sj-card::after{content:"";position:absolute;width:160px;height:160px;inset-inline-end:-50px;bottom:-60px;border-radius:50%;
  border:18px solid rgb(255 255 255 / .08);box-shadow:0 0 0 22px rgb(255 255 255 / .05)}
.sj-card:hover{color:#fff;transform:translateY(-3px);box-shadow:0 14px 30px hsl(var(--h) 50% 30% / .35)}
.sj-card .based{font-size:12px;opacity:.82;line-height:1.6}
.sj-card h3{font-size:19px;font-weight:900;line-height:1.55}
.sj-card .meta{display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px}
.sj-card .meta span{background:rgb(255 255 255 / .16);border-radius:99px;padding:1px 9px}
.sj-card .meta .cert{background:#F2D58E;color:#5A3E07;font-weight:700}
.sj-card.article{background:var(--surface);color:var(--ink);border:1px dashed var(--line)}
.sj-card.article:hover{color:var(--ink)}
.sj-card.article .meta span{background:var(--surface-2)}
.sj-card.article::after{border-color:hsl(var(--h) 40% 60% / .12);box-shadow:none}

.sj-verify{margin-top:44px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.sj-verify form{display:flex;gap:8px}
.sj-verify input,.qz input[type=text]{font:inherit;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;background:var(--paper);color:var(--ink);min-width:0}
.sj-verify input{direction:ltr;text-align:center;letter-spacing:.1em;width:210px}

/* صفحهٔ آزمون */
.tz-head{--h:230;border-radius:calc(var(--r) + 6px);padding:26px;color:#fff;display:grid;gap:10px;
  background:radial-gradient(110% 120% at 100% 0%,hsl(var(--h) 58% 50%),hsl(calc(var(--h) + 30) 58% 22%))}
.tz-head .chip{justify-self:start;font-size:12.5px;background:rgb(255 255 255 / .16);border-radius:99px;padding:2px 12px}
.tz-head h1{font-family:var(--f-display);font-weight:400;font-size:40px;line-height:1.3}
.tz-head .based{opacity:.88;font-size:14px}
.tz-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:13px}
.tz-meta span{background:rgb(255 255 255 / .14);border-radius:99px;padding:3px 12px}
.tz-meta .cert{background:#F2D58E;color:#5A3E07;font-weight:700}

.qz{--h:230;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:24px;display:grid;gap:18px;margin-top:18px;box-shadow:var(--shadow)}
.qz .intro p{margin:0 0 10px;color:var(--ink)}
.qz .field{display:grid;gap:6px;max-width:360px}
.qz .field label{font-size:13.5px;font-weight:700}
.qz .field small{color:var(--muted);font-size:12px}
.qz .go{justify-self:start;font-size:16px;padding:10px 28px;font-weight:800;background:hsl(var(--h) 55% 42%);border-color:hsl(var(--h) 55% 42%);color:#fff}
.qz .go:hover{color:#fff;filter:brightness(1.08)}
.qz .perks{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.qz .perks span::before{content:"✓ ";color:var(--ok);font-weight:900}
.qz-top{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.qz-bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;grid-column:1/-1}
.qz-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,hsl(var(--h) 60% 55%),hsl(calc(var(--h) + 30) 60% 45%));transition:width .35s}
.qz-count{font-size:13px;color:var(--muted)}
.qz-timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;background:var(--surface-2);border-radius:99px;padding:2px 14px}
.qz-timer.low{background:var(--bad-soft);color:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
.qz-sec{font-size:12.5px;font-weight:800;color:hsl(var(--h) 50% 45%);letter-spacing:.02em}
.qz-q{font-size:19px;font-weight:800;line-height:1.95;white-space:pre-line}
.qz-q .grid{display:block;font-family:ui-monospace,Consolas,monospace;direction:ltr;text-align:center;font-size:24px;line-height:1.5;letter-spacing:.2em;background:var(--surface-2);border-radius:var(--r-sm);padding:12px;margin-top:8px;white-space:pre}
.qz-ch{display:grid;gap:10px}
.qz-ch button{display:flex;gap:12px;align-items:center;text-align:start;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:12px 14px;font-size:15.5px;line-height:1.7;transition:border-color .15s,background .15s}
.qz-ch button .k{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:13px;font-weight:800}
.qz-ch button:hover{border-color:hsl(var(--h) 55% 50%)}
.qz-ch button.on{border-color:hsl(var(--h) 55% 45%);background:hsl(var(--h) 70% 95%)}
.qz-ch button.on .k{background:hsl(var(--h) 55% 45%);color:#fff}
@media (prefers-color-scheme:dark){.qz-ch button.on{background:hsl(var(--h) 35% 22%)}}
.qz-ch [dir=ltr]{flex:1;text-align:left}
.qz-ch .sym{font-size:22px;letter-spacing:.12em;direction:ltr;unicode-bidi:isolate}
.qz-lk{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:8px}
.qz-lk button{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:12px 6px;font-size:13.5px;line-height:1.6;display:grid;gap:8px;justify-items:center}
.qz-lk button i{width:22px;height:22px;border-radius:50%;border:2px solid hsl(var(--h) 50% 50%);display:block}
.qz-lk button:nth-child(1) i{width:30px;height:30px}.qz-lk button:last-child i{width:30px;height:30px}
.qz-lk button:hover{border-color:hsl(var(--h) 55% 50%)}
.qz-lk button.on{border-color:hsl(var(--h) 55% 45%);background:hsl(var(--h) 70% 95%)}
.qz-lk button.on i{background:hsl(var(--h) 55% 45%)}
.qz-nav{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.qz-pal{display:flex;flex-wrap:wrap;gap:5px}
.qz-pal button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--paper);font-size:12px;font-weight:700;padding:0}
.qz-pal button.done{background:hsl(var(--h) 55% 45%);color:#fff;border-color:transparent}
.qz-pal button.cur{outline:2px solid hsl(var(--h) 55% 45%);outline-offset:1px}
.qz-end{display:grid;gap:14px;justify-items:start}
.qz-end h2{font-family:var(--f-display);font-weight:400;font-size:30px}
.qz-warn{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);padding:8px 12px;font-size:13.5px}

.tz-body{margin-top:34px}
.tz-body .prose h2{font-size:22px}
.faq-box{margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 20px}
.faq-box h2{font-size:20px;font-weight:900;margin:12px 0 4px}
.cert-promo{background:linear-gradient(160deg,#FBF7EE,#F3E6C4);color:#3b2f14;border:1px solid #E7D4A2;border-radius:var(--r);padding:16px;display:grid;gap:8px}
.cert-promo h3{font-family:var(--f-display);font-weight:400;font-size:21px}
.cert-promo p{font-size:13.5px}

/* گواهی و نتیجه */
.rz-result{--h:230;border-radius:calc(var(--r) + 8px);padding:28px;color:#fff;display:grid;gap:10px;position:relative;overflow:hidden;
  background:radial-gradient(110% 130% at 100% 0%,hsl(var(--h) 58% 50%),hsl(calc(var(--h) + 30) 58% 20%))}
.rz-result::after{content:"";position:absolute;inset-inline-end:-80px;top:-80px;width:260px;height:260px;border-radius:50%;border:30px solid rgb(255 255 255 / .07)}
.rz-result .k{font-size:13.5px;opacity:.9}
.rz-result h1{font-family:var(--f-display);font-weight:400;font-size:46px;line-height:1.25}
.rz-result .sub{font-size:16px;opacity:.92}
.rz-result .pct{justify-self:start;background:#F2D58E;color:#5A3E07;font-weight:800;border-radius:99px;padding:3px 14px;font-size:14px}
.cert-frame{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:16px;display:grid;gap:14px;scroll-margin-top:12px}
.cert-frame img{display:block;width:100%;border-radius:8px;box-shadow:0 10px 30px rgb(0 0 0 / .18);aspect-ratio:1600/1131;background:#FBF7EE}
.cert-frame h2{font-size:18px;font-weight:900}
.cert-actions{display:flex;flex-wrap:wrap;gap:8px}
.cert-actions .btn{font-weight:700}
.btn.gold{background:#B28A34;border-color:#B28A34;color:#fff}.btn.gold:hover{color:#fff;filter:brightness(1.08)}
.btn.tg{background:#229ED9;border-color:#229ED9;color:#fff}.btn.wa{background:#1FA855;border-color:#1FA855;color:#fff}
.btn.tg:hover,.btn.wa:hover{color:#fff;filter:brightness(1.07)}
.name-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--saffron-soft);border-radius:var(--r-sm);padding:10px 12px}
.name-form input{font:inherit;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px;background:var(--surface);color:var(--ink);flex:1;min-width:160px}
.verified{display:flex;gap:12px;align-items:center;background:var(--ok-soft);color:var(--ok);border-radius:var(--r-sm);padding:12px 14px;font-weight:700}
.verified svg{flex:none}
.rz-bars{display:grid;gap:14px}
.rz-bar{display:grid;gap:5px}
.rz-bar .t{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.rz-bar .t b{font-weight:700}
.rz-bar .t span{color:var(--muted);font-size:13px}
.rz-bar .tr{height:10px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.rz-bar .tr i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,hsl(var(--h) 60% 55%),hsl(calc(var(--h) + 30) 55% 42%))}
.dim{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.dim p{color:var(--ink);font-size:15px;line-height:2}
.lvl{font-size:12px;border-radius:99px;padding:1px 10px;font-weight:700}
.lvl.low{background:var(--lapis-soft);color:var(--lapis)}.lvl.mid{background:var(--surface-2);color:var(--muted)}.lvl.high{background:var(--saffron-soft);color:var(--saffron-ink)}
.card-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:14px;margin-top:18px}
.card-box>h2{font-size:19px;font-weight:900}
.review li{border-bottom:1px solid var(--line);padding-block:10px;list-style:none;display:grid;gap:6px}
.review ol{padding:0;margin:0}
.review .q{white-space:pre-line;font-weight:700}
.review .ok{color:var(--ok)}.review .no{color:var(--bad)}
.review .ex{font-size:13.5px;color:var(--muted)}

/* نتیجهٔ خصوصی سلامت روان */
.sev{border-radius:calc(var(--r) + 6px);padding:26px;display:grid;gap:10px;border:1px solid var(--line);background:var(--surface)}
.sev h1{font-family:var(--f-display);font-weight:400;font-size:38px;line-height:1.3}
.sev.none{border-top:6px solid var(--ok)}.sev.mild{border-top:6px solid #C9A227}.sev.moderate{border-top:6px solid var(--warn)}.sev.severe{border-top:6px solid var(--bad)}
.private-note{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.help-box{background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);border-radius:var(--r);padding:18px;display:grid;gap:10px}
.help-box h2{font-size:19px;font-weight:900;color:var(--bad)}
.help-lines{display:flex;gap:10px;flex-wrap:wrap}
.help-lines a{background:var(--surface);border-radius:12px;padding:8px 14px;display:grid;text-align:center;border:1px solid var(--line)}
.help-lines b{font-size:22px;font-weight:900;color:var(--bad)}
.help-lines span{font-size:12px;color:var(--muted)}

/* بازی‌های عصب‌شناختی */
.games{margin-top:22px;display:grid;gap:16px}
.game{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:12px}
.game h3{font-size:18px;font-weight:900}
.game .stage{min-height:220px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;text-align:center;padding:16px;user-select:none;-webkit-user-select:none;touch-action:manipulation;position:relative}
.game .stage.go{background:#1E8A5A;color:#fff;cursor:pointer}
.game .stage.wait{background:#C23A3A;color:#fff;cursor:pointer}
.game .big{font-size:46px;font-weight:900;line-height:1.3}
.game .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.game .row button{min-width:90px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:800;font-size:16px}
.game .done{color:var(--ok);font-weight:800}
.game .pad{display:grid;grid-template-columns:repeat(5,52px);gap:6px;justify-content:center;direction:ltr}
.game .pad button{height:48px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:20px;font-weight:800}
.games-final{background:linear-gradient(160deg,#FBF7EE,#F3E6C4);color:#3b2f14;border-radius:var(--r);padding:20px;display:grid;gap:12px;justify-items:start}

@media (max-width:900px){
  .sj-hero{grid-template-columns:1fr;padding:28px 20px}
  .mini-cert{transform:none;max-width:380px}
  .sj-hero h1{font-size:44px}
}
@media (max-width:640px){
  .qz{padding:16px}
  .qz-q{font-size:17px}
  .qz-lk{grid-template-columns:1fr;gap:6px}
  .qz-lk button{grid-template-columns:auto 1fr;justify-items:start;align-items:center;padding:10px 12px;text-align:start}
  .qz-lk button i,.qz-lk button:nth-child(1) i,.qz-lk button:last-child i{width:20px;height:20px}
  .tz-head h1,.rz-result h1{font-size:32px}
  .sj-verify{grid-template-columns:1fr}
  .sj-verify form{flex-wrap:wrap}.sj-verify input{width:100%}
  .sj-stats{gap:18px}
}