/* Base look shared by the account pages (same tokens as the main pages). */

/* Layout: one exam sheet on asphalt; the rules sit above it like a road sign board. Same tokens as the home page. */
:root{
  --asphalt:#17181C;--asphalt-2:#202127;--asphalt-3:#2B2C33;--edge:#3A3B43;
  --paint:#FFD21F;--paint-ink:#17181C;
  --chalk:#F4F1E8;--dust:#B3AFA4;
  --stop:#E5322D;--stop-soft:#FF7A75;--go:#2BD46B;
  --plate:#FFFFFF;
  --f-display:"Noto Sans Armenian","Noto Sans","DejaVu Sans Condensed","Arial Narrow",sans-serif;
  --f-body:"Noto Sans Armenian","Noto Sans","DejaVu Sans",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--asphalt);color:var(--chalk);font:16px/1.6 var(--f-body);
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(rgba(0,0,0,.28) 1px,transparent 1px);
  background-size:5px 5px,7px 7px;background-position:0 0,2px 3px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--asphalt)}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top .wrap{max-width:1200px}
@media(min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--paint);outline-offset:3px}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(23,24,28,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--edge)}
.top .wrap{display:flex;align-items:center;gap:12px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:22px;text-decoration:none;margin-right:auto;white-space:nowrap}
.brand svg{flex:none;display:block}
.back{color:var(--dust);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.back:hover{color:var(--chalk)}
.lang{display:flex;border:1px solid var(--edge);border-radius:8px;overflow:hidden;flex:none}
.lb{background:none;border:0;color:var(--dust);padding:6px 10px;cursor:pointer;font-size:14px;font-weight:700}
.lb[aria-pressed="true"]{background:var(--chalk);color:var(--asphalt)}
@media(max-width:420px){.back{display:none}}

.head{padding-block:36px 24px}
@media(min-width:720px){.head{padding-block:56px 32px}}
.eb{display:inline-flex;align-items:center;gap:8px;color:var(--dust);font-size:14px;font-weight:600;margin:0 0 14px}
.eb i{width:8px;height:8px;border-radius:50%;background:var(--paint)}
h1{font-family:var(--f-display);font-weight:800;font-stretch:75%;font-size:clamp(46px,9vw,84px);line-height:.98;letter-spacing:-.02em;margin:0 0 24px;text-wrap:balance}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--edge);border-radius:12px;overflow:hidden;background:var(--asphalt-2)}
.rules div{padding:12px 14px;border-left:1px solid var(--edge);color:var(--dust);font-size:13px;line-height:1.3;min-width:0}
.rules div:first-child{border-left:0}
.rules b{display:block;font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:30px;line-height:1.1;color:var(--chalk);font-variant-numeric:tabular-nums}
.rules .y b{color:var(--paint)}
@media(max-width:520px){.rules{grid-template-columns:1fr 1fr}.rules div:nth-child(3){border-left:0}.rules div:nth-child(n+3){border-top:1px solid var(--edge)}}

.card{background:var(--asphalt-2);border:1px solid var(--edge);border-radius:16px;padding:22px;margin-bottom:64px}
@media(min-width:720px){.card{padding:32px}}
small{display:block;color:var(--dust);font-weight:600;font-size:14px;margin-bottom:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:10px;font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;border:2px solid var(--edge);background:transparent;color:var(--chalk)}
.btn:hover{border-color:var(--dust)}
.btn.y{background:var(--paint);border-color:var(--paint);color:var(--paint-ink)}
.btn.y:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.35;cursor:default;filter:none}
.vars{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:6px}
.var{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1/1;max-width:100%;border-radius:12px;border:2px solid var(--edge);background:var(--asphalt-3);color:var(--chalk);cursor:pointer;padding:6px}
.var:hover{border-color:var(--paint)}
.var b{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:clamp(30px,7vw,44px);line-height:1}
.var span{font-size:12px;color:var(--dust)}
@media(max-width:420px){.var span{display:none}}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.qhead small{margin:0}
#tm{flex:none;font-weight:800;font-variant-numeric:tabular-nums;background:var(--paint);color:var(--paint-ink);border-radius:999px;padding:3px 12px;font-size:15px}
#tm.low{background:var(--stop);color:var(--chalk)}
.bar{height:6px;background:var(--asphalt-3);border-radius:6px;overflow:hidden;margin-bottom:16px}
.bar i{display:block;height:100%;background:var(--paint);transition:width .3s}
.q2{font-size:20px;font-weight:700;line-height:1.35;margin:0 0 16px;text-wrap:pretty}
.eo{display:block;width:100%;text-align:left;background:var(--asphalt-3);color:var(--chalk);border:2px solid transparent;border-radius:10px;padding:13px 16px;margin-bottom:10px;cursor:pointer;font-size:16px}
.eo:hover{border-color:var(--edge)}
.eo.sel{border-color:var(--paint)}
.card .btn{margin-top:6px}
.plate{display:block;width:min(240px,100%);height:auto;margin:4px auto 18px;border-radius:50%;background:var(--plate)}
.sg{width:140px;max-width:100%;margin:2px auto 18px}
.sg svg{width:100%;height:auto;display:block;border-radius:10px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.score{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:72px;line-height:1;margin:0 0 10px;font-variant-numeric:tabular-nums}
.sub{color:var(--dust);margin:0 0 10px}
.verdict{display:inline-block;font-weight:800;font-size:20px;padding:8px 16px;border:3px solid;border-radius:10px;transform:rotate(-2deg);margin:0 0 12px}
.verdict.ok{color:var(--go)}.verdict.no{color:var(--stop-soft)}
.card h3{margin:26px 0 10px;font-size:16px}
.row{display:flex;justify-content:space-between;gap:12px;font-weight:600;padding-top:10px;font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:6px;background:var(--asphalt-3);overflow:hidden;margin-top:4px}
.meter i{display:block;height:100%}
.mq{margin:14px 0 2px}
.mc{margin:0;color:var(--go);font-weight:700}
.tks{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:6px}
.tk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:64px;border-radius:10px;border:2px solid var(--edge);background:var(--asphalt-3);color:var(--chalk);cursor:pointer;padding:6px 2px}
.tk:hover{border-color:var(--paint)}
.tk b{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.tk span{font-size:11px;color:var(--dust);font-variant-numeric:tabular-nums}
.tk.ok{border-color:var(--go)}.tk.ok span{color:var(--go);font-weight:700}
.tk.no{border-color:var(--stop)}.tk.no span{color:var(--stop-soft);font-weight:700}
.qimg{max-width:560px;margin:2px auto 18px;aspect-ratio:2/1;background:#fff;border-radius:10px;overflow:hidden}
.qimg img{display:block;width:100%;height:100%;object-fit:contain}
.qimg:has(img:not([src])){background:linear-gradient(90deg,#2B2C33,#34353D,#2B2C33);background-size:200% 100%;animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.qimg.err{display:none}
.note{margin:0 0 12px;font-size:13px;color:var(--dust);border-left:3px solid var(--paint);padding-left:10px}
.src{color:var(--dust);font-size:13px;margin:-8px 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}
.chip{width:38px;height:38px;border-radius:8px;border:2px solid var(--edge);background:var(--asphalt-3);color:var(--chalk);font-weight:800;cursor:pointer;font-variant-numeric:tabular-nums;padding:0}
.chip.ok{border-color:var(--go);color:var(--go)}
.chip.no{border-color:var(--stop);color:var(--stop-soft)}
.chip.cur{background:var(--paint);color:var(--paint-ink);border-color:var(--paint)}
.badge{display:inline-block;font-weight:800;margin:0 0 12px;padding:4px 12px;border-radius:999px;font-size:15px}
.badge.ok{background:rgba(43,212,107,.15);color:var(--go)}
.badge.no{background:rgba(229,50,45,.15);color:var(--stop-soft)}
.badge.na{background:var(--asphalt-3);color:var(--dust)}
.mine{font-weight:700;font-size:14px}
.exp{background:var(--asphalt-3);border-left:4px solid var(--paint);border-radius:8px;padding:14px 16px;margin:6px 0 18px}
.exp b{display:block;margin-bottom:4px;color:var(--paint)}
.exp p{margin:0;line-height:1.55}
.qc{border-top:1px solid var(--edge);padding:20px 0 6px}
.qc:first-of-type{border-top:0}
.qo{list-style:none;padding:0;margin:0 0 10px}
.qo li{padding:11px 14px;border-radius:8px;background:var(--asphalt-3);margin-bottom:8px;border:2px solid transparent;line-height:1.45}
.qo li.ok{border-color:var(--go);background:rgba(43,212,107,.12)}
.qo li.ok::before{content:"✓ ";color:var(--go);font-weight:800}
.qsearch{display:block;width:100%;margin:6px 0 14px;padding:13px 14px;border:1px solid var(--edge);border-radius:10px;background:var(--asphalt);color:var(--chalk);font:inherit}
.qsearch::placeholder{color:var(--dust)}
.found{margin-top:4px}
.alink{background:none;border:0;color:var(--paint);cursor:pointer;padding:0;font:inherit;font-weight:700;text-decoration:underline}
.qh{margin:10px 0 4px!important;font-size:20px!important}
.chip.pg{width:auto;min-width:38px;padding:0 6px}
.modes{display:flex;gap:4px;margin-bottom:20px;background:var(--asphalt-3);padding:4px;border-radius:10px}
.modes{display:grid;grid-template-columns:repeat(5,1fr)}
@media(max-width:620px){.modes{grid-template-columns:repeat(3,1fr)}}
.tk.lock{opacity:.55}
.tk.lock span{font-size:13px}
.md{flex:1 1 0;min-width:0;border:0;background:none;color:var(--dust);font-weight:700;padding:10px 6px;border-radius:8px;cursor:pointer;font-size:14px}
.md[aria-pressed="true"]{background:var(--paint);color:var(--paint-ink)}
.glist{display:grid;gap:8px;grid-template-columns:1fr;margin-top:6px}
@media(min-width:600px){.glist{grid-template-columns:1fr 1fr}}
.gbtn{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;text-align:left;background:var(--asphalt-3);border:2px solid transparent;border-radius:10px;padding:12px 14px;color:var(--chalk);cursor:pointer}
.gbtn:hover{border-color:var(--paint)}
.gbtn b{color:var(--paint);font-size:13px}
.gbtn span{font-weight:600;min-width:0;grid-column:1}
.gbtn i{font-style:normal;color:var(--dust);font-size:13px;white-space:nowrap;grid-column:2;grid-row:1/3}
.eo.ok{border-color:var(--go);background:rgba(43,212,107,.12)}
.eo.no{border-color:var(--stop);background:rgba(229,50,45,.12)}
.eo:disabled{cursor:default;color:var(--chalk)}
.fb{font-weight:700;margin:4px 0 10px}
.fb.ok{color:var(--go)}.fb.no{color:var(--stop-soft)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.tgl{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;padding:8px 14px 8px 8px;border:1px solid var(--edge);border-radius:999px;background:var(--asphalt-3);font-weight:700;margin:6px 0 10px;transition:border-color .2s}
.tgl:hover{border-color:var(--paint)}
.tgl input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tgl .sl{flex:none;width:44px;height:26px;border-radius:999px;background:#4A4B55;position:relative;transition:background .25s}
.tgl .sl::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.3,1.4,.5,1);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.tgl input:checked+.sl{background:var(--go)}
.tgl input:checked+.sl::after{transform:translateX(18px)}
.tgl input:focus-visible+.sl{outline:3px solid var(--paint);outline-offset:2px}
.tally{color:var(--dust);font-size:14px;margin:0 0 6px}
.tally b{color:var(--go)}
/* motion: hover, press, feedback */
@keyframes rise{from{transform:translateY(28px)}}
.rv:not(.in){transform:translateY(28px)}
.rv.in{animation:rise .7s cubic-bezier(.2,.8,.2,1)}
.btn,.play,.login,.lb,.ts,.tab,.md,.tk,.gbtn,.chip,.menu-btn,.eo,.var{transition:transform .18s cubic-bezier(.3,1.3,.5,1),box-shadow .2s,background-color .2s,border-color .2s,color .2s}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease;z-index:-1;pointer-events:none}
.btn:hover::after{transform:translateX(120%)}
.btn:disabled::after{display:none}
.btn:not(:disabled):hover,.play:hover,.login:hover,.tk:hover,.gbtn:hover,.chip:not(:disabled):hover,.menu-btn:hover,.var:hover{transform:translateY(-2px)}
.btn.y:not(:disabled):hover,.play:hover,.login:hover{box-shadow:0 10px 26px rgba(255,210,31,.3)}
.btn:not(:disabled):active,.play:active,.login:active,.tk:active,.gbtn:active,.chip:active,.md:active,.lb:active,.ts:active,.tab:active,.menu-btn:active{transform:translateY(0) scale(.96)}
.lb:hover,.md:hover,.ts:hover,.tab:hover{color:var(--chalk)}
.eo:not(:disabled):hover{transform:translateX(6px);border-color:var(--paint)}
nav.main a,.fnav a,.drawer a,.back,.ol b{background:linear-gradient(var(--paint),var(--paint)) 0 100%/0 2px no-repeat;transition:background-size .25s ease,color .2s}
nav.main a:hover,.fnav a:hover,.drawer a:hover,.back:hover,.ol:hover b{background-size:100% 2px;color:var(--chalk)}
.tlink,.alink{transition:color .2s}.tlink:hover,.alink:hover{color:var(--paint)}
.brand svg{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}.brand:hover svg{transform:rotate(90deg)}
.topic,.plan,.sgn,.post,details,.qc,.cell{transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.topic:hover,.plan:hover,.sgn:hover,.post:hover{transform:translateY(-4px);border-color:rgba(255,210,31,.55);box-shadow:0 18px 36px rgba(0,0,0,.35)}
.plan.best:hover{border-color:var(--paint)}
.topic svg,.sgn svg{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.topic:hover svg{transform:rotate(-6deg) scale(1.08)}
.sgn:hover svg{transform:scale(1.1) rotate(4deg)}
.adv h3,.chap li span,.route h3,summary{transition:color .2s}
.adv div:hover h3,.chap li:hover span,.route li:hover h3,summary:hover{color:var(--paint)}
.chap li{transition:transform .2s}.chap li:hover{transform:translateX(6px)}
.pin{transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.route li:hover .pin{transform:scale(1.15)}
.signs svg:hover{animation:wob .5s ease}
@keyframes wob{30%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}
details:hover{border-color:rgba(255,210,31,.45)}
summary::after{display:inline-block;transition:transform .25s}
.qo li{transition:transform .2s,border-color .2s}.qo li:hover{transform:translateX(4px)}
.qimg img{transition:transform .5s ease}.qimg:hover img{transform:scale(1.04)}
@keyframes pop{40%{transform:scale(1.035)}}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes fadeUp{from{transform:translateY(8px)}}
@keyframes popIn{from{transform:scale(.6)}}
.eo.ok.anim{animation:pop .45s ease}
.eo.no.anim{animation:shake .45s ease}
.fb,.exp{animation:fadeUp .35s ease}
.score{animation:popIn .55s cubic-bezier(.3,1.5,.5,1)}
.verdict{animation:popIn .5s .15s cubic-bezier(.3,1.5,.5,1) backwards}
#tm.low{animation:beat 1s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.08)}}
.hero-text>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards}
.hero-text>:nth-child(2){animation-delay:.08s}.hero-text>:nth-child(3){animation-delay:.16s}.hero-text>:nth-child(4){animation-delay:.24s}.hero-text>:nth-child(5){animation-delay:.32s}
@media(prefers-reduced-motion:reduce){.rv:not(.in){transform:none}*,*::after{animation:none!important;transition:none!important}}