@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root{
  --bg:#06060f;--card:rgba(12,12,28,0.92);--border:rgba(255,255,255,0.06);
  --text:#e0e0ee;--dim:#7070a0;--primary:#6C5CE7;
  --cyan:#00e5ff;--pink:#ff2d78;--green:#00e87b;--orange:#ff8c00;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans SC',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6;min-height:100vh}
a{color:inherit;text-decoration:none}

/* BG EFFECTS */
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(108,92,231,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(108,92,231,0.03) 1px,transparent 1px);background-size:80px 80px;z-index:0;pointer-events:none}
.bg-orb{position:fixed;border-radius:50%;filter:blur(100px);opacity:.15;z-index:0;pointer-events:none}
.bg-orb.a{width:500px;height:500px;background:#6C5CE7;top:5%;left:5%;animation:drift 18s ease-in-out infinite}
.bg-orb.b{width:400px;height:400px;background:#00e5ff;bottom:10%;right:5%;animation:drift 22s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}
#particles{position:fixed;inset:0;z-index:1;pointer-events:none}

.wrap{position:relative;z-index:10;min-height:100vh}

/* PAGE */
.page{display:none;min-height:100vh}
.page.active{display:block}

/* START PAGE */
.start-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px}
.start-tag{display:inline-block;padding:6px 22px;border:1px solid rgba(0,229,255,0.3);border-radius:99px;font-size:12px;color:var(--cyan);letter-spacing:4px;text-transform:uppercase;margin-bottom:28px;background:rgba(0,229,255,0.04);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,0.25)}50%{box-shadow:0 0 0 12px rgba(0,229,255,0)}}
.start-hero h1{font-family:'Orbitron',sans-serif;font-size:clamp(28px,5vw,60px);font-weight:900;background:linear-gradient(135deg,#fff,var(--cyan),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}
.start-hero p{font-size:15px;color:var(--dim);max-width:480px;line-height:1.9}

/* VERSION CARDS */
.versions{display:flex;gap:20px;margin-top:56px;flex-wrap:wrap;justify-content:center;padding:0 20px}
.v-card{width:260px;padding:36px 28px;border:1px solid var(--border);border-radius:16px;background:var(--card);backdrop-filter:blur(12px);text-align:center;cursor:pointer;transition:all .4s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden}
.v-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--vc,var(--primary)),transparent);opacity:0;transition:opacity .3s}
.v-card:hover{transform:translateY(-6px);border-color:var(--vc,var(--primary));box-shadow:0 20px 50px rgba(0,0,0,0.4),0 0 30px var(--vc-g,rgba(108,92,231,0.15))}
.v-card:hover::before{opacity:1}
.v-icon{font-size:36px;margin-bottom:16px;color:var(--vc,var(--primary))}
.v-title{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:6px}
.v-count{font-size:13px;color:var(--vc,var(--primary));margin-bottom:14px}
.v-time{font-size:12px;color:var(--dim);padding:4px 14px;border-radius:20px;border:1px solid var(--border);display:inline-block}
.v-desc{font-size:13px;color:var(--dim);margin-top:14px;line-height:1.7}

/* TEST PAGE */
.test-wrap{max-width:640px;margin:0 auto;padding:32px 20px 80px}
.progress-bar{height:6px;background:rgba(255,255,255,0.04);border-radius:3px;margin-bottom:24px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--cyan));border-radius:3px;transition:width .3s ease}
.progress-info{display:flex;justify-content:space-between;margin-bottom:28px;font-size:13px;color:var(--dim)}
.progress-info .cur{color:var(--cyan);font-family:'Orbitron',sans-serif;font-weight:700}

.q-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:36px 32px;margin-bottom:20px}
.q-num{font-size:12px;color:var(--primary);font-weight:700;letter-spacing:1px;margin-bottom:12px}
.q-text{font-size:18px;color:#fff;line-height:1.7;margin-bottom:32px}
.q-labels{display:flex;justify-content:space-between;margin-bottom:8px}
.q-label{font-size:12px;color:var(--dim);max-width:45%}
.q-label.a{text-align:left;color:var(--primary)}
.q-label.b{text-align:right;color:var(--orange)}
.slider-labels{display:flex;justify-content:space-between;margin-bottom:4px}
.slider-labels span{font-size:10px;color:rgba(255,255,255,0.25)}
input[type="range"]{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,0.06);outline:none;margin:8px 0}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:0 0 12px rgba(108,92,231,0.5);transition:transform .2s}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.q-current{text-align:center;margin-top:16px;font-size:14px;color:var(--primary);font-weight:600}

.nav-row{display:flex;justify-content:space-between;gap:12px}
.nav-btn{flex:1;padding:14px;border-radius:12px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;font-family:'Noto Sans SC',sans-serif}
.nav-prev{background:rgba(255,255,255,0.05);color:var(--dim);border:1px solid var(--border)}
.nav-prev:hover{background:rgba(255,255,255,0.08);color:#fff}
.nav-prev:disabled{opacity:.3;cursor:not-allowed}
.nav-next{background:var(--primary);color:#fff;box-shadow:0 4px 20px rgba(108,92,231,0.3)}
.nav-next:hover{box-shadow:0 4px 30px rgba(108,92,231,0.5)}
.nav-submit{background:linear-gradient(135deg,var(--green),#00b894);color:#fff;box-shadow:0 4px 20px rgba(0,232,123,0.3)}

/* RESULT PAGE */
.result{max-width:860px;margin:0 auto;padding:32px 20px 80px}
.r-head{position:relative;border-radius:20px;overflow:hidden;padding:48px 40px;text-align:center;margin-bottom:2px}
.r-head::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--gc),var(--gc2,#3d2a9e));opacity:.12}
.r-head::after{content:'';position:absolute;top:-60%;left:-20%;width:140%;height:200%;background:conic-gradient(from 0deg,transparent,var(--gc) 60deg,transparent 120deg);animation:spin 10s linear infinite;opacity:.06}
@keyframes spin{to{transform:rotate(360deg)}}
.r-head-inner{position:relative;z-index:2}
.r-avatar{width:150px;height:150px;margin:0 auto 20px;position:relative}
.r-avatar img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 30px var(--gc,rgba(108,92,231,0.5)));animation:avPulse 3.5s ease-in-out infinite}
@keyframes avPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 30px var(--gc,rgba(108,92,231,0.5)))}50%{transform:scale(1.04);filter:drop-shadow(0 0 50px var(--gc,rgba(108,92,231,0.8)))}}
.r-avatar::after{content:'';position:absolute;inset:-12px;border:2px solid var(--gc);border-radius:50%;opacity:.3;animation:ring 3.5s ease-in-out infinite}
@keyframes ring{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.08);opacity:.1}}
.r-code{font-family:'Orbitron',sans-serif;font-size:48px;font-weight:900;color:#fff;text-shadow:0 0 40px var(--gc);letter-spacing:10px}
.r-name{font-size:20px;color:var(--gc);margin-top:4px}
.r-desc{font-size:13px;color:var(--dim);margin-top:10px;max-width:440px;margin-left:auto;margin-right:auto;line-height:1.8}

.r-body{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-radius:0 0 20px 20px;overflow:hidden}
@media(max-width:768px){.r-body{grid-template-columns:1fr}.versions{flex-direction:column;align-items:center}.v-card{width:100%;max-width:320px}}
.r-pane{background:var(--card);padding:28px}
.r-pane-title{font-size:12px;color:var(--dim);margin-bottom:16px;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.r-pane-title::before{content:'';width:3px;height:12px;background:var(--gc,var(--primary));border-radius:2px}

.risk-bar{height:8px;background:rgba(255,255,255,0.04);border-radius:4px;overflow:hidden;margin-bottom:12px}
.risk-fill{height:100%;border-radius:4px;transition:width 1.2s cubic-bezier(.23,1,.32,1)}
.risk-row{display:flex;justify-content:space-between;align-items:center}
.risk-num{font-family:'Orbitron',sans-serif;font-size:30px;font-weight:900}
.risk-tag{font-size:12px;padding:3px 12px;border-radius:16px;font-weight:600}

.dim{margin-bottom:16px}
.dim-top{display:flex;justify-content:space-between;margin-bottom:5px}
.dim-l{font-size:12px;color:var(--dim)}
.dim-v{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700}
.dim-track{display:flex;height:6px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,0.04)}
.dim-fl{height:100%;transition:width 1s cubic-bezier(.23,1,.32,1)}
.dim-fr{height:100%;transition:width 1s cubic-bezier(.23,1,.32,1);margin-left:auto}
.dim-bot{display:flex;justify-content:space-between;margin-top:4px}
.dim-s{font-size:10px;color:var(--dim)}.dim-s.on{color:#fff;font-weight:700}

.pie-wrap{display:flex;align-items:center;gap:20px}
.pie-svg{width:120px;height:120px;transform:rotate(-90deg)}
.pie-svg circle{fill:none;stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.23,1,.32,1)}
.pie-legend .li{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:var(--dim)}
.pie-legend .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

.fraud-badge{display:inline-block;padding:5px 14px;background:rgba(255,45,120,0.06);border:1px solid rgba(255,45,120,0.2);border-radius:16px;font-size:13px;color:var(--pink);font-weight:600;margin-bottom:12px}
.fraud-desc{font-size:12px;color:var(--dim);line-height:1.9;margin-bottom:12px}
.fraud-tags{display:flex;flex-wrap:wrap;gap:6px}
.ft{padding:4px 12px;background:rgba(255,140,0,0.06);border:1px solid rgba(255,140,0,0.12);border-radius:12px;font-size:11px;color:var(--orange)}

.adv{display:flex;gap:10px;margin-bottom:12px;align-items:flex-start}
.adv-n{width:20px;height:20px;min-width:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.adv-t{font-size:12px;color:var(--dim);line-height:1.7}

.r-actions{display:flex;gap:12px;margin-top:24px}
.r-btn{flex:1;padding:14px;border-radius:12px;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:'Noto Sans SC',sans-serif;transition:all .3s}
.r-btn-home{background:rgba(255,255,255,0.05);color:var(--dim);border:1px solid var(--border)}
.r-btn-home:hover{background:rgba(255,255,255,0.08);color:#fff}
.r-btn-share{background:var(--primary);color:#fff;box-shadow:0 4px 20px rgba(108,92,231,0.3)}

/* ANIMATIONS */
.fade-in{opacity:0;transform:translateY(20px);transition:all .6s cubic-bezier(.23,1,.32,1)}
.fade-in.show{opacity:1;transform:translateY(0)}