:root{--b:#1264C5;--db:#103B70;--lb:#EAF4FF;--sb:#D6EAFE;--tx:#172B45}
*{box-sizing:border-box}html,body{height:100%;overflow:hidden;margin:0}
body{font-family:Poppins,Inter,sans-serif;color:var(--tx);font-size:clamp(1rem,2.2vh,1.3rem);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
#bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(135deg,#fff,#EAF4FF 50%,#D6EAFE);overflow:hidden}
#bg .b1,#bg .b2,#bg .b3{position:absolute;border-radius:42% 58% 63% 37%/45% 40% 60% 55%;filter:blur(40px);opacity:.55;animation:morph 18s ease-in-out infinite}
.b1{width:48vmax;height:48vmax;background:#8cc4ff;left:-12vmax;top:-14vmax}.b2{width:40vmax;height:40vmax;background:#bfe0ff;right:-10vmax;bottom:-12vmax;animation-delay:-6s!important}.b3{width:22vmax;height:22vmax;background:#1264c540;left:45%;top:30%;animation-delay:-11s!important;box-shadow:0 0 120px #1264c566}
@keyframes morph{50%{transform:translate(6vmax,4vmax) rotate(40deg) scale(1.1);border-radius:60% 40% 35% 65%/55% 60% 40% 45%}}
.grid{position:absolute;inset:0;background-image:linear-gradient(#1264c512 1px,transparent 1px),linear-gradient(90deg,#1264c512 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%);-webkit-mask-image:radial-gradient(circle,#000,transparent 75%)}
.flow{position:absolute;left:-10%;right:-10%;bottom:0;height:34%;background:repeating-linear-gradient(100deg,transparent 0 40px,#1264c514 40px 42px);transform:skewY(-4deg);animation:fw 14s linear infinite;mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000)}
@keyframes fw{to{background-position:420px 0}}
#pt i{position:absolute;width:6px;height:6px;border-radius:50%;background:#1264c5;opacity:.35;box-shadow:0 0 10px #1264c5;animation:up linear infinite}
@keyframes up{from{transform:translateY(0)}to{transform:translateY(-110vh)}}
header{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;gap:1rem;padding:0 1.2rem;z-index:20;background:#ffffffcc;backdrop-filter:blur(8px);box-shadow:0 2px 14px #1264c522}
.logo{color:var(--b);font-size:1.5rem}#prog{flex:1;display:flex;gap:8px;justify-content:center}#prog i{height:8px;width:clamp(24px,6vw,70px);border-radius:6px;background:var(--sb);transition:.4s}#prog i.on{background:var(--b)}
.hb{display:flex;gap:.5rem}
.btn{min-height:56px;border-radius:14px;font-weight:700;padding:.5rem 1.5rem}.btn-primary{background:var(--b);border-color:var(--b)}.btn-xl{min-height:clamp(56px,9vh,76px);font-size:1.2rem}
#app{position:fixed;inset:72px 0 0 0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2vh;padding:2vh 4vw;text-align:center;opacity:0;visibility:hidden;transform:translateX(80px) scale(.98);transition:.5s cubic-bezier(.2,.8,.2,1);overflow:hidden;overflow-y:auto}
.screen.on{opacity:1;visibility:visible;transform:none}.screen.left{transform:translateX(-80px) scale(.98)}
h1{font-weight:800;color:var(--db);font-size:clamp(2.2rem,8vh,4.6rem);line-height:1.1}h2{font-weight:800;color:var(--db);font-size:clamp(1.5rem,5vh,2.6rem)}
.lead{max-width:760px}.tag{color:var(--b);font-weight:600;letter-spacing:1px;margin:0}
#heroImg{max-height:26vh;border-radius:22px;box-shadow:0 12px 40px #1264c533}
.gc{background:#ffffffe6;border-radius:26px;box-shadow:0 12px 40px #1264c524;padding:clamp(1rem,3vh,2rem);width:min(720px,100%);backdrop-filter:blur(6px)}.gc.wide{width:min(1000px,100%)}
.form-control,.form-select{min-height:clamp(56px,9vh,72px);border-radius:14px;font-size:1.3rem;border:2px solid var(--sb)}.form-check-input{width:1.6rem;height:1.6rem;flex:none}
.nav{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2vh}.err{color:#DB4242;font-size:1rem;min-height:1.2em}
.ring{width:min(30vh,200px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--b),transparent 70%,var(--b));display:grid;place-items:center;animation:spin 1.4s linear infinite;position:relative}
.ring::before{content:"";position:absolute;inset:12px;background:#fff;border-radius:50%}.ring i{position:relative;font-size:4rem;color:var(--b);animation:spin 1.4s linear infinite reverse}
@keyframes spin{to{transform:rotate(1turn)}}.scan{width:min(420px,70vw);height:6px;border-radius:6px;background:linear-gradient(90deg,transparent,var(--b),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:sc 1.2s ease-in-out infinite alternate;box-shadow:0 0 16px var(--b)}
@keyframes sc{from{background-position:-20% 0}to{background-position:120% 0}}
.big{font-size:clamp(1.8rem,6vh,3.2rem);font-weight:800;color:var(--b)}
.res{display:flex;gap:1.5rem;width:min(1200px,100%);align-items:stretch;flex-wrap:wrap;justify-content:center}.res .gc{flex:1 1 380px;width:auto}
.rc.reveal{animation:pop .8s cubic-bezier(.2,.9,.3,1.2)}.rc.g{animation-name:popg}.rc.o{animation-name:popo}.rc.r{animation-name:popr}
@keyframes popg{from{opacity:0;transform:scale(.7) translateY(40px)}}@keyframes popo{from{opacity:0;transform:translateX(-80px) rotate(-4deg)}}@keyframes popr{from{opacity:0;transform:translateY(-60px) scale(1.15)}}
#ricon{font-size:clamp(2.4rem,7vh,4rem)}
.light{display:flex;gap:10px;justify-content:center;margin-bottom:.5rem}.light span{width:clamp(28px,5vh,42px);aspect-ratio:1;border-radius:50%;background:#dde5ee}.light span.on{animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 14px transparent}}
.mc{background:var(--lb);border-radius:16px;padding:.6rem}.mc .big{font-size:clamp(1.3rem,4vh,2.2rem)}
.sc{background:#fff;border-radius:22px;padding:1.2rem;box-shadow:0 8px 28px #1264c51f;height:100%;border-top:6px solid var(--c)}.sc i{font-size:2.4rem;color:var(--c)}
.tabs{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.tabs .btn{min-height:52px}
.pane{text-align:left}.pane i{color:var(--b);font-size:2rem}.cell{background:var(--lb);border-radius:16px;padding:.8rem;height:100%}
#idle{position:fixed;inset:0;background:#103b70ee;color:#fff;display:none;place-items:center;text-align:center;z-index:99}
@media(max-width:700px){.hb span,.logo{display:none}header{padding:0 .5rem}}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}