:root{--blue:#79b7ff;--cyan:#7cf0ff;--muted:#9ba9c7;--red:#ff4058}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 15% 12%,#225eb038,transparent 42%),radial-gradient(ellipse at 90% 82%,#753ebe29,transparent 38%),linear-gradient(145deg,#050814,#0a1530 55%,#050815);color:#f3f6ff;font-family:"Segoe UI",Tahoma,Arial,sans-serif;overflow-x:hidden;padding:24px 0}
.ambient{position:fixed;width:35rem;height:35rem;border-radius:50%;filter:blur(100px);opacity:.12;pointer-events:none;animation:float 13s ease-in-out infinite alternate}
.a{background:#167cff;top:-20rem;left:-15rem}.b{background:#9e4bff;bottom:-25rem;right:-12rem;animation-delay:-6s}
@keyframes float{to{transform:translate(70px,45px) scale(1.15)}}
.shell{position:relative;width:min(92vw,520px);padding:24px 0 20px;z-index:1}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;margin-bottom:16px;color:#dbe8ff}
.brand span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #7cf0ff70;border-radius:10px;color:var(--cyan)}
.demo-note{text-align:center;font-size:11px;color:#b8d4ff;border:1px solid #79b7ff38;border-radius:10px;padding:9px;margin-bottom:15px;background:#071329a8}
.progress{display:flex;gap:7px;margin-bottom:14px}
.progress i{height:3px;flex:1;border-radius:8px;background:#96b1e622;transition:background .3s,box-shadow .3s}
.progress i.on{background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 12px #4ba8ff}
.panel{display:none;padding:clamp(25px,6vw,42px);border:1px solid #7da4ff33;border-radius:25px;background:linear-gradient(145deg,#111b36f0,#070c1cf5);box-shadow:0 28px 90px #0006,inset 0 1px #ffffff09;backdrop-filter:blur(18px);animation:appear .4s ease both}
.panel.active{display:block}
@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
small{display:block;text-align:center;letter-spacing:2px;color:#83baff;font-size:10px;font-weight:bold}
.icon{width:58px;height:58px;display:grid;place-items:center;margin:23px auto 17px;border-radius:19px;border:1px solid #79b7ff5c;background:#4386e72e;color:var(--cyan);font-size:27px;box-shadow:0 0 32px #3587ff22}
h1{text-align:center;font-size:clamp(25px,6vw,33px);margin:0 0 11px}
p{color:var(--muted);text-align:center;line-height:1.9;font-size:14px;margin:0 auto 25px}
label{display:block;color:#d8e5ff;font-size:13px;margin-bottom:9px}
input{width:100%;height:54px;border-radius:13px;border:1px solid #8caff03b;background:#030815b3;color:white;padding:0 16px;font:inherit;outline:none;direction:ltr;text-align:left}
input:focus{border-color:#68baff;box-shadow:0 0 0 3px #4e9fff1f}
input::placeholder{color:#657391}
.error{min-height:23px;margin:7px 0 0;color:#ff91aa;font-size:12px}
button{width:100%;min-height:52px;border:0;border-radius:13px;background:linear-gradient(105deg,#397de4,#4bc9ec);color:#061226;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 9px 25px #257de838;transition:filter .2s,transform .2s}
button:hover{filter:brightness(1.1);transform:translateY(-1px)}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
button b{margin-right:10px;font-size:18px}
.back{display:block;margin:13px auto 0;background:transparent;color:#9fb9e8;box-shadow:none;font-size:13px;min-height:34px}
.message{padding:22px 20px;border:1px solid #79b7ff38;border-radius:16px;background:#03091770;margin:22px 0 20px;min-height:110px;line-height:2;color:#e3edff;white-space:pre-wrap;overflow-wrap:anywhere}
.message p{margin:0;color:#e3edff;text-align:right;direction:rtl}
.highlight-amount{color:#55baff;font-weight:800;text-shadow:0 0 8px #168bff,0 0 18px #168bff,0 0 28px #168bff80;white-space:nowrap}
.foot{text-align:center;color:#7083a7;font-size:11px;margin-top:25px}
footer{text-align:center;color:#586785;font-size:9px;letter-spacing:2px;margin-top:20px}
footer span{color:#6ab8ff}
.final-panel{border-color:#ff405855;background:radial-gradient(ellipse at 50% 25%,#ff29451b,transparent 55%),linear-gradient(145deg,#20101ff5,#0b0c1cf5);box-shadow:0 28px 90px #0008,0 0 35px #ff284414,inset 0 1px #ffffff09}
.final-panel small{color:#ff8293}
.warning-icon{width:88px;height:88px;display:grid;place-items:center;margin:28px auto 22px;border:2px solid var(--red);border-radius:50%;color:var(--red);box-shadow:0 0 18px #ff405855,inset 0 0 20px #ff40581c;animation:warningPulse 2s ease-in-out infinite}
.warning-icon span{font-size:54px;font-weight:800;line-height:1}
@keyframes warningPulse{0%,100%{box-shadow:0 0 18px #ff405855,inset 0 0 20px #ff40581c}50%{box-shadow:0 0 34px #ff4058a0,inset 0 0 25px #ff405833}}
.final-title{color:#ff5269;text-shadow:0 0 18px #ff284455}
.final-message{border-color:#ff40583b;background:#160a1470}
.final-message p{text-align:center;font-size:19px;font-weight:800;color:#ffdfe4}
.final-note{font-size:12px;margin:0 0 20px;color:#c5a9b0}
.final-panel button{background:linear-gradient(105deg,#a92442,#ff6577);color:#fff;box-shadow:0 9px 25px #ff28442b}
@media(max-width:420px){.panel{padding:26px 21px}.message{padding:18px 15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}