:root{--bg:#f3f5fa;--surface:#fff;--ink:#0d1b3a;--muted:#5d6985;--line:#dfe4ef;--brand:#20427f;--brand-ink:#fff;--accent:#ff8a1f;--ok:#12805c;--err:#c8362f;--soft:#eef2fb;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1226;--surface:#111b36;--ink:#eaf0ff;--muted:#9aa8c7;--line:#233057;--brand:#6c93e6;--brand-ink:#08122b;--soft:#16224a;--ok:#3ccf9b;--err:#ff7b73;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0a1226;--surface:#111b36;--ink:#eaf0ff;--muted:#9aa8c7;--line:#233057;--brand:#6c93e6;--brand-ink:#08122b;--soft:#16224a;--ok:#3ccf9b;--err:#ff7b73;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:15px/1.55 "Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
.app{display:grid;grid-template-columns:minmax(300px,420px) 1fr;min-height:100vh}
/* rail */
.rail{position:sticky;top:0;height:100vh;background:radial-gradient(120% 80% at 0% 0%,#1b3a78 0%,#0a1b44 55%,#060f2a 100%);color:#fff;padding:36px 36px 28px;display:flex;flex-direction:column;overflow:hidden}
.orbits{position:absolute;right:-180px;bottom:-160px;width:560px;height:560px;opacity:.55;pointer-events:none}
.orbits circle{fill:none;stroke:#8fb2ff;stroke-width:1;stroke-dasharray:2 6}
.orbits .sat{fill:var(--accent);stroke:none}
.o1{transform-origin:280px 280px;animation:spin 26s linear infinite}.o2{transform-origin:280px 280px;animation:spin 44s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.brand{display:flex;gap:14px;align-items:center;position:relative}
.badge{width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 0 5px rgba(255,255,255,.12)}
.badge img{width:56px;height:56px}
.brand b{display:block;font-size:17px;letter-spacing:.01em;line-height:1.2}
.brand small{color:#9fb6ea;font-size:11.5px}
.rail h1{font-size:30px;line-height:1.15;margin:44px 0 10px;font-weight:700;position:relative}
.rail h1 em{font-style:normal;color:var(--accent)}
.rail p.lead{color:#b9c8ee;margin:0 0 34px;font-size:14px;max-width:32ch;position:relative}
.track{list-style:none;margin:0;padding:0;position:relative}
.track li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding-bottom:22px;position:relative;opacity:.55;transition:.3s}
.track li::before{content:"";position:absolute;left:16px;top:34px;bottom:2px;width:2px;background:rgba(255,255,255,.18)}
.track li:last-child::before{display:none}
.track .n{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:13px;font-weight:600;background:#0a1b44}
.track b{display:block;font-size:14px}.track span.d{font-size:12px;color:#a9bbe6}
.track li.on{opacity:1}.track li.on .n{border-color:var(--accent);background:var(--accent);color:#1b1000}
.track li.done{opacity:.9}.track li.done .n{border-color:#4fe0b0;background:#4fe0b0;color:#06281d}
.track li.done::before{background:#4fe0b0}
.rail-foot{margin-top:auto;position:relative;font-size:12px;color:#a9bbe6;display:flex;flex-direction:column;gap:4px}
.rail-foot a{color:#fff;text-decoration:none}
/* main */
.main{padding:32px clamp(18px,5vw,64px) 48px;max-width:860px;width:100%;margin:0 auto}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:11.5px;padding:5px 11px;border-radius:99px;background:var(--soft);color:var(--brand);font-weight:600;border:1px solid var(--line)}
.back{font-size:13px;color:var(--muted);text-decoration:none}
.back:hover{color:var(--brand)}
.mprog{display:none;height:5px;background:var(--line);border-radius:9px;overflow:hidden;margin-bottom:22px}
.mprog i{display:block;height:100%;width:25%;background:var(--accent);transition:.35s}
.stephead small{color:var(--accent);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.stephead h2{margin:4px 0 6px;font-size:26px;line-height:1.2}
.stephead p{margin:0 0 24px;color:var(--muted)}
.step{display:none;animation:rise .35s ease}.step.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{margin-bottom:18px}
.f label,.lbl{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px}
.f label i{color:var(--accent);font-style:normal}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=number],.f textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;outline:0;transition:.2s}
.f textarea{resize:vertical;min-height:84px}
.f input:focus,.f textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.f.bad input,.f.bad textarea,.drop.bad{border-color:var(--err)}
.err{display:none;color:var(--err);font-size:12px;margin-top:6px}.f.bad .err,.drop.bad+.err{display:block}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
.prefix{position:relative}.prefix span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600}.prefix input{padding-left:32px!important}
/* payment */
.pay{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start;margin-bottom:22px}
.qr{background:#fff;border-radius:18px;padding:14px;text-align:center;border:1px solid var(--line);box-shadow:0 10px 30px -14px rgba(13,27,58,.35)}
.qr img{width:100%;display:block;border-radius:8px}
.qr p{margin:8px 0 0;color:#33406a;font-size:12px;font-weight:600}
.paynotes{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.paynotes h3{margin:0 0 8px;font-size:14px}
.paynotes ol{margin:0;padding-left:18px;color:var(--muted);font-size:13px}.paynotes li{margin-bottom:5px}
.apps{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.apps span{font-size:11px;border:1px solid var(--line);background:var(--surface);padding:3px 9px;border-radius:99px;color:var(--muted)}
.drop{position:relative;border:2px dashed var(--line);border-radius:16px;padding:22px;text-align:center;background:var(--surface);transition:.2s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--soft)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop b{display:block}.drop small{color:var(--muted)}
.drop svg{width:34px;height:34px;stroke:var(--brand);margin-bottom:6px}
.file{display:none;align-items:center;gap:12px;text-align:left}
.drop.has{border-style:solid;border-color:var(--ok)}.drop.has .empty{display:none}.drop.has .file{display:flex}
.file img{width:48px;height:48px;object-fit:cover;border-radius:10px;background:var(--soft)}
.file .pdf{width:48px;height:48px;border-radius:10px;background:var(--soft);display:grid;place-items:center;font-weight:700;color:var(--brand);font-size:12px}
.file div{flex:1;min-width:0}.file strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.file button{position:relative;z-index:2;border:0;background:var(--soft);color:var(--ink);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}
.opt{position:relative;display:block;border:1.5px solid var(--line);border-radius:14px;padding:14px 14px 14px 46px;cursor:pointer;background:var(--surface);transition:.2s}
.opt input{position:absolute;opacity:0}
.opt::before{content:"";position:absolute;left:14px;top:16px;width:20px;height:20px;border-radius:6px;border:2px solid var(--line);transition:.2s}
.opt:has(input:checked){border-color:var(--brand);background:var(--soft)}
.opt:has(input:checked)::before{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 3px var(--soft)}
.opt:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--brand) 40%,transparent)}
.opt b{display:block;font-size:13.5px}.opt small{color:var(--muted);font-size:12px}
/* review */
.sum{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.sum div.r{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:14px}
.sum div.r:last-child{border:0}.sum .k{color:var(--muted);font-size:12.5px}.sum .v{word-break:break-word}
.sum .tot{background:var(--soft);font-weight:700}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--muted)}
.consent input{margin-top:4px;accent-color:var(--brand);width:16px;height:16px}
/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.btn{font:inherit;font-weight:600;border:0;border-radius:12px;padding:13px 24px;cursor:pointer;transition:.2s;display:inline-flex;gap:8px;align-items:center}
.btn.p{background:var(--brand);color:var(--brand-ink)}.btn.p:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px var(--brand)}
.btn.g{background:transparent;color:var(--muted)}.btn.g:hover{color:var(--ink)}
.btn.go{background:var(--accent);color:#1b1000}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.load .spin{display:inline-block}
/* success */
.done-card{display:none;text-align:center;padding:40px 10px}
.done-card.on{display:block;animation:rise .5s}
.tick{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:color-mix(in srgb,var(--ok) 16%,transparent);display:grid;place-items:center}
.tick svg{width:42px;height:42px;stroke:var(--ok);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:dash .6s .2s forwards}
@keyframes dash{to{stroke-dashoffset:0}}
.done-card h2{font-size:26px;margin:0 0 8px}.done-card p{color:var(--muted);max-width:46ch;margin:0 auto 20px}
.ref{display:inline-block;background:var(--soft);border:1px dashed var(--brand);padding:10px 18px;border-radius:12px;margin-bottom:22px;font-size:14px}
.ribbon-unused{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));background:#ffcf5a;color:#3b2a00;font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:99px;z-index:9;box-shadow:0 6px 16px rgba(0,0,0,.25)}
@media(max-width:900px){
.app{grid-template-columns:1fr}
.rail{position:relative;height:auto;padding:22px 20px 20px}
.rail h1{font-size:23px;margin:20px 0 4px}.rail p.lead,.track,.rail-foot{display:none}.orbits{width:360px;height:360px;right:-120px;bottom:-140px}
.mprog{display:block}.main{padding-top:22px}
}
@media(max-width:640px){.grid2,.opts{grid-template-columns:1fr}.pay{grid-template-columns:1fr}.qr{max-width:260px;margin:0 auto}.sum div.r{grid-template-columns:1fr;gap:2px}.stephead h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.alert{display:none;margin-top:18px;padding:13px 16px;border-radius:12px;background:color-mix(in srgb,var(--err) 12%,var(--surface));border:1px solid var(--err);color:var(--ink);font-size:13.5px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.hint a{color:var(--brand);font-weight:600}
.guide{max-width:760px;margin:0 auto;padding:36px 20px 60px}
.guide h1{font-size:26px;margin:0 0 6px}.guide>p{color:var(--muted);margin:0 0 26px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:14px}
.gcard h3{margin:0 0 8px;font-size:15px}.gcard ol{margin:0;padding-left:20px;color:var(--muted);font-size:14px}.gcard li{margin-bottom:4px}
.gnote{background:var(--soft);border:1px dashed var(--brand);border-radius:14px;padding:14px 18px;font-size:13.5px;margin-top:18px}
.qr-open{all:unset;display:block;position:relative;width:100%;cursor:zoom-in;border-radius:8px}
.qr-open:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.qr-zoom{position:absolute;right:6px;bottom:6px;background:rgba(13,27,58,.86);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;pointer-events:none}
.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,12,32,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:zoom-out;animation:fade .2s ease}
.lightbox[hidden]{display:none}
.lb-card{position:relative;background:#fff;border-radius:22px;padding:18px;text-align:center;width:min(92vw,560px);max-height:92vh;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:pop .25s ease}
.lb-card img{display:block;width:100%;max-height:calc(92vh - 90px);object-fit:contain}
.lb-card p{margin:10px 0 0;color:#33406a;font-size:13px;font-weight:600}
.lb-close{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--accent);color:#1b1000;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.35)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}