/* «نُخبتي» — تثبيت قبولات جامعة النخبة */
@font-face{font-family:Alexandria;font-weight:300 900;font-display:swap;src:url(/assets/fonts/alexandria-arabic.woff2) format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Alexandria;font-weight:300 900;font-display:swap;src:url(/assets/fonts/alexandria-latin.woff2) format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-400-arabic.woff2) format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-400-latin.woff2) format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Plex;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-500-arabic.woff2) format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Plex;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-700-arabic.woff2) format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --bg:#F4F7FC; --bg2:#E9EFF9; --surface:#FFFFFF; --surface2:#F7F9FD; --ink:#0C1B36; --ink2:#43557A; --ink3:#7A8AA8;
  --line:rgba(18,40,77,.10); --line2:rgba(18,40,77,.18);
  --navy:#12284D; --blue:#2F69B0; --blue2:#275792; --sky:#4C8CDB;
  --gold:#D9A520; --gold2:#EEC54E; --gold3:#FFE49A; --goldd:#A97A12; --gold-ink:#8A6206;
  --green:#14A06B; --green2:#1FC384; --red:#E04848;
  --card-sh:0 1px 0 rgba(255,255,255,.8) inset,0 24px 60px -28px rgba(18,40,77,.28),0 6px 18px -10px rgba(18,40,77,.14);
  --field:#F3F6FB; --field-focus:#FFFFFF;
  --blob1:rgba(47,105,176,.22); --blob2:rgba(238,197,78,.30); --blob3:rgba(76,140,219,.18);
  --ease:cubic-bezier(.22,1,.36,1); --ease2:cubic-bezier(.65,0,.35,1);
  --display:Alexandria,Plex,system-ui,sans-serif; --body:Plex,Alexandria,system-ui,sans-serif;
  color-scheme:light;
}
html.dark{
  --bg:#050C1C; --bg2:#081430; --surface:#0C1A35; --surface2:#0F2042; --ink:#EEF3FC; --ink2:#AEBEDA; --ink3:#7286A8;
  --line:rgba(170,198,240,.12); --line2:rgba(170,198,240,.22);
  --gold:#EEC54E; --gold2:#F6D677; --gold-ink:#F6D677; --blue:#5B97E3; --sky:#7FB3EE;
  --card-sh:0 1px 0 rgba(255,255,255,.05) inset,0 30px 80px -30px rgba(0,0,0,.8),0 8px 20px -12px rgba(0,0,0,.6);
  --field:rgba(3,9,22,.55); --field-focus:rgba(3,9,22,.8);
  --blob1:rgba(47,105,176,.34); --blob2:rgba(238,197,78,.16); --blob3:rgba(91,151,227,.20);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{min-height:100svh;font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.7;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background-color .5s,color .5s}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:var(--gold2);color:#1a1300}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:10px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(70% 45% at 85% 0%,var(--blob1),transparent 70%),radial-gradient(60% 40% at 0% 100%,var(--blob2),transparent 70%),radial-gradient(120% 80% at 50% -10%,var(--bg2),var(--bg) 60%)}
.bg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.5;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);opacity:.7}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;color:#fff}
.intro-bg{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 42%,#123265 0%,#0a1b3b 55%,#050d1f 100%)}
.intro-in{position:relative}
.intro-in{display:grid;justify-items:center;text-align:center;padding:24px}
.intro-mark{position:relative;width:min(230px,58vw);aspect-ratio:2052/925;will-change:transform,opacity}
.intro-mark svg{width:100%;height:100%;overflow:visible}
.intro-mark .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);background-size:250% 100%;background-position:150% 0;-webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat;opacity:.9;pointer-events:none}
.intro-rule{display:block;margin-top:24px;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#EEC54E,transparent);transform:scaleX(0)}
.intro-word{margin-top:14px;font-family:var(--display);font-weight:800;font-size:clamp(32px,9vw,52px);line-height:1.5;color:#F6D677;opacity:0}
.intro-tag{font-size:clamp(13.5px,3.6vw,16px);color:rgba(220,232,250,.78);opacity:0}
.js .brand img{opacity:var(--brand-o,1)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top);transition:background .4s,box-shadow .4s}
.top.solid{background:var(--bg);box-shadow:0 1px 0 var(--line)}
.top-in{width:min(1120px,100% - 28px);margin-inline:auto;height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:58px;height:auto}
.brand b{display:block;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.45;color:var(--ink)}
.brand small{display:block;font-size:11.5px;color:var(--ink3);line-height:1.2;margin-top:-2px}
.tbtn{position:relative;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 18px -10px rgba(18,40,77,.3);overflow:hidden;transition:transform .3s var(--ease)}
.tbtn:active{transform:scale(.92)}
.tbtn svg{width:22px;height:22px;transition:transform .6s var(--ease),opacity .4s}
.tbtn .sun{position:absolute;color:var(--gold)}
.tbtn .moon{position:absolute;color:var(--sky)}
html:not(.dark) .tbtn .moon{transform:translateY(30px) rotate(-90deg);opacity:0}
html.dark .tbtn .sun{transform:translateY(-30px) rotate(90deg);opacity:0}

/* ---------- views ---------- */
main{width:min(1120px,100% - 28px);margin-inline:auto;padding-bottom:40px}
.view{display:none}
.view.on{display:block}

/* home */
.hero{padding:22px 0 10px;text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 16px;border-radius:99px;font-size:13.5px;font-weight:500;color:var(--gold-ink);background:color-mix(in srgb,var(--gold2) 16%,transparent);border:1px solid color-mix(in srgb,var(--gold) 38%,transparent)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 70%,transparent)}80%,100%{box-shadow:0 0 0 10px transparent}}
.hero h1{margin-top:18px;font-family:var(--display);font-weight:800;font-size:clamp(38px,10.5vw,76px);line-height:1.18;letter-spacing:0}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .l>span{display:inline-block}
.gold-text{background:linear-gradient(100deg,var(--goldd) 0%,var(--gold) 20%,var(--gold3) 34%,var(--gold2) 48%,var(--goldd) 66%,var(--gold) 82%,var(--gold3) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
html:not(.dark) .gold-text{background-image:linear-gradient(100deg,#8F650C 0%,#C99414 22%,#E7B93A 36%,#B5850F 52%,#8F650C 68%,#C99414 84%,#E7B93A 100%)}
@keyframes flow{to{background-position:-220% 0}}
.hero p.lead{margin:14px auto 0;max-width:520px;color:var(--ink2);font-size:clamp(15.5px,4vw,18px)}

.choices{margin:28px auto 0;display:grid;gap:16px;max-width:980px}
@media (min-width:820px){.choices{grid-template-columns:1fr 1fr;gap:22px}}
.choice{--acc:var(--green);--acc2:var(--green2);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;padding:24px 22px 22px;border-radius:28px;background:var(--surface);box-shadow:var(--card-sh);text-align:start;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.choice.b{--acc:var(--blue);--acc2:var(--sky)}
.choice::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 70%,transparent),transparent 40%,transparent 60%,color-mix(in srgb,var(--gold) 60%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.choice::after{content:"";position:absolute;z-index:-2;width:260px;height:260px;border-radius:50%;top:-120px;left:-90px;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%);transition:transform .8s var(--ease)}
.choice .spot{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc) 14%,transparent),transparent 60%)}
@media (hover:hover){.choice:hover{transform:translateY(-6px)}.choice:hover .spot{opacity:1}.choice:hover::after{transform:scale(1.4)}}
.choice:active{transform:scale(.98)}
.choice .ic{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--acc2),var(--acc));box-shadow:0 14px 30px -12px color-mix(in srgb,var(--acc) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.choice .ic svg{width:32px;height:32px}
.choice .tx b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(20px,5.4vw,25px);line-height:1.4}
.choice .tx span{display:block;margin-top:6px;color:var(--ink2);font-size:15px}
.choice .go{position:absolute;top:24px;left:22px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc);transition:transform .5s var(--ease),background .4s,color .4s}
.choice .go svg{width:22px;height:22px}
@media (hover:hover){.choice:hover .go{transform:translateX(-6px);background:var(--acc);color:#fff}}
.choice .step-tags{display:flex;flex-wrap:wrap;gap:6px}
.choice .step-tags i{font-style:normal;font-size:12.5px;font-weight:500;padding:3px 10px;border-radius:99px;background:var(--surface2);border:1px solid var(--line);color:var(--ink2)}

.trust{margin:26px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;color:var(--ink3);font-size:13.5px}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:17px;height:17px;color:var(--gold)}

/* panel (forms) */
.panel{max-width:560px;margin:10px auto 0}
.back{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px 0 16px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-weight:500;font-size:14.5px;color:var(--ink2);box-shadow:0 6px 16px -10px rgba(18,40,77,.3)}
.back svg{width:18px;height:18px}
.card{position:relative;margin-top:14px;padding:26px 20px 22px;border-radius:30px;background:var(--surface);box-shadow:var(--card-sh);overflow:hidden;isolation:isolate}
@media (min-width:600px){.card{padding:32px 30px 28px}}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;background:linear-gradient(140deg,color-mix(in srgb,var(--acc,var(--gold)) 65%,transparent),transparent 35%,transparent 65%,color-mix(in srgb,var(--gold) 55%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card[data-acc=g]{--acc:var(--green);--acc2:var(--green2)}
.card[data-acc=b]{--acc:var(--blue);--acc2:var(--sky)}
.card-head{display:flex;gap:14px;align-items:center}
.card-head .ic{width:52px;height:52px;flex:none;border-radius:17px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--acc2),var(--acc));box-shadow:0 12px 26px -12px color-mix(in srgb,var(--acc) 80%,transparent)}
.card-head .ic svg{width:27px;height:27px}
.card-head h2{font-family:var(--display);font-weight:800;font-size:clamp(19px,5vw,23px);line-height:1.4}
.card-head p{color:var(--ink3);font-size:14px;line-height:1.5}
.fields{margin-top:24px;display:grid;gap:18px}
.field{display:grid;gap:8px}
.field>label,.field>.lbl{font-weight:700;font-size:14.5px}
.field .lnote{color:var(--ink3);font-weight:400;font-size:13px}
.inp-w{position:relative}
.inp{width:100%;min-height:56px;padding:14px 50px 14px 16px;border-radius:18px;background:var(--field);border:1.5px solid transparent;outline:none;font-size:16.5px;transition:border-color .3s,background .3s,box-shadow .3s}
.inp::placeholder{color:var(--ink3);opacity:.85}
.inp:focus{background:var(--field-focus);border-color:var(--acc,var(--gold));box-shadow:0 0 0 5px color-mix(in srgb,var(--acc,var(--gold)) 14%,transparent)}
.inp-w>svg{position:absolute;top:50%;right:17px;width:21px;height:21px;translate:0 -50%;color:var(--ink3);pointer-events:none;transition:color .3s}
.inp-w:focus-within>svg{color:var(--acc,var(--gold))}
.inp[dir=ltr]{text-align:right}
.field .msg{display:none;color:var(--red);font-size:13.5px;font-weight:500}
.field.bad .msg{display:block}
.field.bad .inp,.field.bad .pick,.field.bad .drop{border-color:var(--red)!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 12%,transparent)}
.field.ok .inp-w::after{content:"";position:absolute;left:16px;top:50%;width:20px;height:20px;translate:0 -50%;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;animation:pop .45s var(--ease)}
@keyframes pop{from{transform:scale(0)}}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* dept picker trigger */
.pick{width:100%;min-height:58px;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:18px;background:var(--field);border:1.5px solid transparent;text-align:start;transition:border-color .3s,background .3s}
.pick:hover{border-color:var(--line2)}
.pick>svg{width:21px;height:21px;color:var(--ink3);flex:none}
.pick .pv{flex:1;min-width:0}
.pick .pv b{display:block;font-weight:700;font-size:15.5px;line-height:1.45}
.pick .pv small{display:block;color:var(--ink3);font-size:12.5px;line-height:1.4}
.pick .pv .ph{color:var(--ink3);font-weight:400}
.pick .chev{width:20px;height:20px;color:var(--ink3);transition:transform .4s var(--ease)}
.pick.has{border-color:color-mix(in srgb,var(--acc) 50%,transparent);background:color-mix(in srgb,var(--acc) 7%,var(--field))}
.pick.has>svg:first-child{color:var(--acc)}

/* upload */
.drop{position:relative;display:grid;place-items:center;gap:8px;min-height:190px;padding:22px;border-radius:22px;border:2px dashed color-mix(in srgb,var(--acc) 45%,transparent);background:radial-gradient(300px circle at 50% 0%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 70%),var(--field);text-align:center;cursor:pointer;transition:border-color .3s,transform .3s var(--ease)}
.drop:active{transform:scale(.985)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop .up{width:60px;height:60px;border-radius:19px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--acc2),var(--acc));box-shadow:0 14px 28px -12px color-mix(in srgb,var(--acc) 80%,transparent)}
.drop .up svg{width:28px;height:28px}
@keyframes bob{50%{transform:translateY(-7px)}}
.drop b{font-family:var(--display);font-size:16.5px;font-weight:700}
.drop small{color:var(--ink3);font-size:13px}
.preview{position:relative;border-radius:22px;overflow:hidden;background:#02060e;border:1.5px solid color-mix(in srgb,var(--acc) 55%,transparent)}
.preview img{width:100%;max-height:360px;object-fit:contain}
.preview .scan{position:absolute;inset-inline:0;top:0;height:60px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc2) 45%,transparent),transparent);border-bottom:2px solid var(--acc2);opacity:.9;pointer-events:none}
.preview .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:rgba(5,12,28,.92);color:#cfdaee;font-size:13.5px}
.preview .bar span{display:inline-flex;align-items:center;gap:6px}
.preview .bar span svg{width:17px;height:17px;color:var(--green2)}
.preview .bar button{color:var(--gold2);font-weight:700;padding:4px 6px}
.tip{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--blue) 8%,transparent);border:1px solid color-mix(in srgb,var(--blue) 20%,transparent);color:var(--ink2);font-size:13.5px;line-height:1.6}
.tip svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--blue)}

/* submit */
.submit{position:relative;margin-top:24px;width:100%;min-height:60px;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:17.5px;color:#fff;background:linear-gradient(135deg,var(--acc2),var(--acc));box-shadow:0 18px 36px -16px color-mix(in srgb,var(--acc) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),filter .3s}
.submit::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 66%);transform:translateX(120%);transition:transform .9s var(--ease)}
@media (hover:hover){.submit:hover::after{transform:translateX(-120%)}}
@keyframes sweep{0%,50%{transform:translateX(120%)}100%{transform:translateX(-120%)}}
.submit:active{transform:scale(.97)}
.submit svg{width:22px;height:22px}
.submit[disabled]{filter:saturate(.6) brightness(.95);pointer-events:none}
.spin{width:22px;height:22px;border-radius:50%;border:2.6px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rot .75s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.ferr{margin-top:14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--red) 10%,transparent);border:1px solid color-mix(in srgb,var(--red) 30%,transparent);color:var(--red);font-size:14px;font-weight:500}
.closed{margin-top:18px;padding:14px;border-radius:16px;text-align:center;background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold-ink);font-weight:600}

/* ---------- success ---------- */
.done{text-align:center;padding:26px 20px 24px}
.done .seal{position:relative;width:132px;height:132px;margin:4px auto 0}
.done .seal .halo{position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 30%,transparent),transparent 68%)}
.done .seal svg{position:relative;width:100%;height:100%}
.done .seal .c1{fill:color-mix(in srgb,var(--acc) 12%,transparent);stroke:var(--acc);stroke-width:3.5;stroke-dasharray:1;stroke-dashoffset:1}
.done .seal .ck{fill:none;stroke:var(--acc);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.done h2{margin-top:18px;font-family:var(--display);font-weight:800;font-size:clamp(25px,7vw,34px);line-height:1.35}
.done .sub{margin-top:8px;color:var(--ink2);font-size:16px}
.done .who{margin:20px auto 0;display:grid;gap:4px;padding:16px;border-radius:20px;background:var(--surface2);border:1px solid var(--line)}
.done .who b{font-family:var(--display);font-size:18px;font-weight:700}
.done .who span{color:var(--ink2);font-size:14px}
.done .ref{margin-top:12px;display:inline-flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-radius:14px;background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px dashed color-mix(in srgb,var(--gold) 50%,transparent)}
.done .ref small{color:var(--ink3);font-size:12.5px}
.done .ref b{font-family:var(--display);font-size:19px;letter-spacing:1px;color:var(--gold-ink);direction:ltr}
.visit{margin-top:18px;padding:18px 16px;border-radius:22px;text-align:center;background:linear-gradient(150deg,color-mix(in srgb,var(--blue) 14%,transparent),color-mix(in srgb,var(--gold) 10%,transparent));border:1px solid color-mix(in srgb,var(--blue) 25%,transparent)}
.visit .vt{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue);font-size:14px}
.visit .vt svg{width:19px;height:19px}
.visit p{margin-top:8px;font-family:var(--display);font-weight:700;font-size:clamp(18px,5vw,22px);line-height:1.5}
.days{margin-top:14px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.day{min-width:112px;padding:12px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 24px -16px rgba(18,40,77,.4)}
.day small{display:block;font-size:12.5px;font-weight:700;color:var(--gold-ink)}
.day b{display:block;font-family:var(--display);font-size:20px;line-height:1.3}
.day span{display:block;font-size:12.5px;color:var(--ink3)}
.visit .note{margin-top:12px;font-size:14px;color:var(--ink2);font-family:var(--body);font-weight:500}
.hint-shot{margin-top:14px;font-size:13px;color:var(--ink3)}
.done .home{margin-top:22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:99px;background:var(--surface2);border:1px solid var(--line2);font-weight:700}
.done .home svg{width:19px;height:19px}
#confetti{position:fixed;inset:0;z-index:150;pointer-events:none;width:100%;height:100%}

/* ---------- sheet (dept picker) ---------- */
.sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(3,8,20,.6)}
.sheet-box{position:relative;width:min(620px,100%);height:min(86svh,760px);display:flex;flex-direction:column;border-radius:30px 30px 0 0;background:var(--surface);box-shadow:0 -30px 80px -30px rgba(0,0,0,.5);overflow:hidden;will-change:transform}
@media (min-width:700px){.sheet{align-items:center}.sheet-box{border-radius:30px;height:min(80svh,720px)}}
.sheet-grab{width:44px;height:5px;border-radius:5px;background:var(--line2);margin:10px auto 0;flex:none}
.sheet-head{padding:12px 18px 12px;display:grid;gap:12px;flex:none;border-bottom:1px solid var(--line)}
.sheet-head .row{display:flex;align-items:center;justify-content:space-between}
.sheet-head h3{font-family:var(--display);font-weight:800;font-size:19px}
.sheet-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line)}
.sheet-x svg{width:18px;height:18px}
.sheet-list{flex:1;overflow:auto;padding:8px 14px calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.grp{margin-top:12px}
.grp h4{display:flex;align-items:center;gap:8px;padding:0 6px 8px;font-size:13px;font-weight:700;color:var(--gold-ink)}
.grp h4::after{content:"";flex:1;height:1px;background:var(--line)}
.opt{width:100%;display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:6px;border-radius:16px;background:var(--surface2);border:1.5px solid transparent;text-align:start;font-weight:500;font-size:15.5px;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.opt:active{transform:scale(.98)}
.opt .rd{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);flex:none;display:grid;place-items:center;transition:all .25s}
.opt.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--surface2))}
.opt.on .rd{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 4px var(--surface2)}
.opt mark{background:color-mix(in srgb,var(--gold2) 45%,transparent);color:inherit;border-radius:4px}
.empty{padding:40px 10px;text-align:center;color:var(--ink3)}

/* footer */
.foot{padding:26px 0 calc(26px + env(safe-area-inset-bottom));text-align:center;color:var(--ink3);font-size:12.5px;line-height:1.8}
.foot img{width:44px;margin:0 auto 8px;opacity:.85}

/* reveal helpers */
.js .rv{opacity:0}
.rm .rv{opacity:1!important;transform:none!important}

/* view transition (theme) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- v2 additions ---------- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.choices{perspective:1200px}
.choice{transform-style:preserve-3d}

.why{margin:26px auto 0;max-width:980px;padding:22px 20px;border-radius:26px;background:var(--surface);box-shadow:var(--card-sh);text-align:start;position:relative;overflow:hidden}
.why::after{content:"";position:absolute;inset:auto -80px -120px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--blue) 16%,transparent),transparent 70%);pointer-events:none}
.why-h{display:flex;gap:14px;align-items:flex-start}
.why-h .ic{width:46px;height:46px;flex:none;border-radius:15px;display:grid;place-items:center;color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}
.why-h .ic svg{width:24px;height:24px}
.why-h b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(17px,4.6vw,20px);line-height:1.5}
.why-h span{display:block;color:var(--ink2);font-size:14.5px;line-height:1.7}
.why-s{list-style:none;margin-top:18px;display:grid;gap:10px;position:relative}
@media (min-width:820px){.why-s{grid-template-columns:repeat(3,1fr)}}
.why-s li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:var(--surface2);border:1px solid var(--line)}
.why-s em{font-style:normal;width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px;color:#fff;background:linear-gradient(140deg,var(--sky),var(--blue));box-shadow:0 8px 18px -8px color-mix(in srgb,var(--blue) 80%,transparent)}
.why-s b{display:block;font-weight:700;font-size:15px;line-height:1.5}
.why-s span{display:block;color:var(--ink3);font-size:13.5px;line-height:1.6}

.decl{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--field);cursor:pointer;font-size:14px;color:var(--ink2);line-height:1.65;border:1.5px solid transparent;transition:border-color .3s}
.decl input{width:21px;height:21px;flex:none;margin-top:1px;accent-color:var(--acc,var(--gold))}
.field.bad .decl{border-color:var(--red)}
.card>.field[data-f=decl]{margin-top:18px}

.done .who small{color:var(--ink3);font-size:12px}
.stamp{margin-top:12px;font-size:12.5px;color:var(--ink3)}
.intro-skip{font-family:var(--body)}