:root{
--navy:#071827;
--blue:#0d5f92;
--gold:#f4b400;
--gold-bright:#ffd15c;
--white:#fff;
--ink:#162536;
--muted:#65788a;
--danger:#a22323;
--success:#147a45;
}

*{box-sizing:border-box}

body{
margin:0;
min-height:100vh;
padding:28px 14px;
font-family:Arial,Helvetica,sans-serif;
color:#fff;
background:
radial-gradient(circle at 15% 15%,rgba(52,152,219,.3),transparent 30%),
radial-gradient(circle at 85% 10%,rgba(244,180,0,.17),transparent 24%),
linear-gradient(145deg,#04111d,#0a3859 55%,#0d5f92);
overflow-x:hidden;
}

.orb{
position:fixed;
border-radius:50%;
filter:blur(12px);
opacity:.23;
pointer-events:none;
}

.orb.one{
width:250px;
height:250px;
background:#3ba7ff;
top:-85px;
right:-70px;
}

.orb.two{
width:290px;
height:290px;
background:#35d0b4;
bottom:-125px;
left:-90px;
}

.shell{
width:min(840px,100%);
margin:auto;
position:relative;
}

.brand{
text-align:center;
margin-bottom:20px;
}

.logo{
display:block;
max-width:200px;
max-height:110px;
margin:0 auto 14px;
object-fit:contain;
}

.brand h1{
margin:0 0 7px;
font-size:clamp(28px,5vw,42px);
}

.brand p{
margin:0;
opacity:.85;
}

.glass{
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
border-radius:26px;
padding:clamp(22px,5vw,40px);
box-shadow:0 28px 80px rgba(0,0,0,.34);
}

.intro{
text-align:center;
margin-bottom:26px;
}

.intro h2{
margin:0 0 8px;
}

.intro p{
margin:0;
line-height:1.55;
opacity:.82;
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.field{
margin-bottom:18px;
}

.field.full{
grid-column:1/-1;
}

.field label{
display:block;
font-weight:800;
margin-bottom:8px;
}

.field label span{
font-weight:400;
opacity:.7;
}

.field input{
width:100%;
padding:15px 16px;
border:1px solid rgba(255,255,255,.4);
border-radius:14px;
background:rgba(255,255,255,.97);
font-size:16px;
color:var(--ink);
}

.drop{
border:2px dashed rgba(255,255,255,.5);
border-radius:20px;
padding:28px 18px;
text-align:center;
background:rgba(255,255,255,.08);
transition:.2s;
}

.drop.dragging{
border-color:var(--gold);
background:rgba(255,255,255,.18);
transform:scale(1.01);
box-shadow:0 0 0 5px rgba(244,180,0,.12);
}

.cloud{
font-size:52px;
}

.drop h3{
margin:4px 0;
}

.drop p{
margin:6px 0 14px;
opacity:.78;
}

.drop small{
display:block;
margin-top:13px;
opacity:.72;
}

.choose,.clear{
border:0;
border-radius:11px;
padding:11px 15px;
font-weight:800;
cursor:pointer;
}

.choose{
background:var(--gold);
color:var(--ink);
}

.clear{
background:rgba(255,255,255,.12);
color:#fff;
}

.queue{
margin-top:22px;
}

.queue-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

.queue-head h3{
margin:0;
}

.queue-head p{
margin:5px 0 0;
opacity:.76;
font-size:13px;
}

.file-queue{
display:grid;
gap:10px;
margin-top:13px;
}

.file-card{
display:grid;
grid-template-columns:54px 1fr auto;
align-items:center;
gap:12px;
padding:12px;
border-radius:14px;
background:rgba(255,255,255,.11);
border:1px solid rgba(255,255,255,.14);
animation:fileIn .2s ease;
}

@keyframes fileIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}

.preview{
width:54px;
height:54px;
border-radius:10px;
display:grid;
place-items:center;
background:rgba(255,255,255,.1);
font-size:28px;
object-fit:cover;
}

.file-name{
font-weight:800;
word-break:break-word;
}

.file-size{
font-size:12px;
opacity:.72;
margin-top:4px;
}

.remove{
border:0;
border-radius:10px;
width:36px;
height:36px;
background:#b63a3a;
color:#fff;
font-size:17px;
cursor:pointer;
}

.verification{
margin:24px 0 18px;
padding:22px;
border-radius:18px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.16);
}

.verification-title{
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
}

.verification-title h3{
margin:0;
font-size:21px;
}

.verification-title p{
margin:4px 0 0;
font-size:13px;
opacity:.72;
}

.shield{
font-size:28px;
}

.verification-body{
display:flex;
align-items:center;
justify-content:center;
gap:26px;
flex-wrap:wrap;
}

.equation{
font-size:clamp(36px,8vw,58px);
font-weight:900;
line-height:1;
letter-spacing:1px;
text-align:center;
min-width:220px;
}

.answer-wrap{
position:relative;
display:flex;
align-items:center;
}

.answer-wrap input{
width:140px;
height:70px;
border:3px solid rgba(255,255,255,.45);
border-radius:14px;
font-size:30px;
font-weight:900;
text-align:center;
color:var(--ink);
background:#fff;
padding:8px 38px 8px 12px;
}

.answer-wrap input.correct{
border-color:#4ade80;
box-shadow:0 0 0 4px rgba(74,222,128,.18);
}

.answer-wrap input.incorrect{
border-color:#f87171;
box-shadow:0 0 0 4px rgba(248,113,113,.14);
}

.answer-status{
position:absolute;
right:12px;
font-size:24px;
font-weight:900;
}

.answer-status.correct{
color:#159447;
}

.answer-status.incorrect{
color:#b42323;
}

.submit{
width:100%;
border:0;
border-radius:14px;
padding:16px 18px;
background:linear-gradient(135deg,#9e9b5b,#a8a55d);
color:#25405b;
font-size:17px;
font-weight:900;
cursor:not-allowed;
opacity:.72;
transition:.2s ease;
box-shadow:none;
}

.submit.ready{
background:linear-gradient(135deg,var(--gold-bright),var(--gold));
color:var(--ink);
cursor:pointer;
opacity:1;
box-shadow:0 14px 30px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.12);
transform:translateY(-1px);
}

.submit.ready:hover{
transform:translateY(-2px);
box-shadow:0 18px 36px rgba(0,0,0,.26);
}

.submit:disabled{
cursor:not-allowed;
}

.progress{
margin-top:17px;
}

.progress-head{
display:flex;
justify-content:space-between;
font-size:13px;
margin-bottom:8px;
}

.track{
height:13px;
border-radius:99px;
overflow:hidden;
background:rgba(255,255,255,.17);
}

.fill{
height:100%;
width:0;
background:linear-gradient(90deg,#53e48f,#b7ff7b);
transition:width .15s;
}

.alert{
margin-bottom:18px;
padding:14px 16px;
border-radius:13px;
background:#fff0f0;
color:var(--danger);
border:1px solid #efc1c1;
}

.success{
text-align:center;
}

.check{
width:86px;
height:86px;
margin:0 auto 12px;
border-radius:50%;
display:grid;
place-items:center;
font-size:54px;
font-weight:900;
color:#fff;
background:linear-gradient(135deg,#1ea85a,#6fe49a);
box-shadow:0 18px 38px rgba(0,0,0,.22);
}

.success h2{
margin:8px 0 10px;
font-size:clamp(26px,5vw,38px);
}

.reference{
max-width:560px;
margin:22px auto;
padding:18px;
border-radius:14px;
background:rgba(255,255,255,.11);
border:1px dashed rgba(255,255,255,.45);
}

.reference small{
display:block;
text-transform:uppercase;
letter-spacing:1px;
opacity:.7;
}

.reference strong{
display:block;
margin-top:7px;
font-size:clamp(20px,4vw,28px);
word-break:break-word;
}

.reference span{
display:block;
margin-top:8px;
font-size:13px;
opacity:.75;
}

.success-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-top:20px;
text-align:left;
}

.success-card{
padding:18px;
border-radius:16px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
}

.success-card h3{
margin:0 0 14px;
}

.success-card dl{
margin:0;
}

.success-card dl div{
display:flex;
justify-content:space-between;
gap:14px;
padding:9px 0;
border-bottom:1px solid rgba(255,255,255,.1);
}

.success-card dl div:last-child{
border-bottom:0;
}

.success-card dt{
opacity:.68;
}

.success-card dd{
margin:0;
font-weight:800;
text-align:right;
word-break:break-word;
}

.notification-card{
display:flex;
align-items:flex-start;
gap:13px;
margin:18px 0;
padding:16px;
text-align:left;
border-radius:15px;
background:rgba(41,180,91,.15);
border:1px solid rgba(109,231,151,.35);
}

.notification-card.warning{
background:rgba(244,180,0,.14);
border-color:rgba(255,209,92,.35);
}

.notification-icon{
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
background:#33b76a;
font-weight:900;
flex:0 0 auto;
}

.notification-card.warning .notification-icon{
background:#d99a00;
}

.notification-card p{
margin:5px 0 0;
font-size:13px;
opacity:.82;
}

.close-note{
opacity:.78;
font-size:14px;
}

footer{
text-align:center;
margin-top:18px;
font-size:12px;
line-height:1.7;
opacity:.72;
}

@media(max-width:640px){
body{
padding:18px 10px;
}

.grid{
grid-template-columns:1fr;
}

.field.full{
grid-column:auto;
}

.glass{
border-radius:21px;
}

.queue-head{
align-items:flex-start;
}

.file-card{
grid-template-columns:46px 1fr auto;
}

.preview{
width:46px;
height:46px;
}

.verification{
padding:18px 14px;
}

.verification-title{
justify-content:center;
text-align:center;
}

.verification-body{
gap:16px;
}

.equation{
font-size:48px;
min-width:auto;
width:100%;
}

.answer-wrap input{
width:130px;
height:64px;
font-size:28px;
}

.success-grid{
grid-template-columns:1fr;
}
}