:root{--neon-blue:#00f0ff;--neon-purple:#a855f7;--neon-pink:#ff0080;--neon-green:#10b981;--neon-orange:#f59e0b;--dark-bg:#0a0a0a;--card-bg:#14141ecc;--border-color:#00f0ff4d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--dark-bg);color:#fff;min-height:100vh;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;position:relative;overflow-x:hidden}body.centered{justify-content:center;align-items:center;display:flex}body:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#00f0ff1a 1px,#0000 1px),linear-gradient(90deg,#00f0ff1a 1px,#0000 1px);background-size:50px 50px;animation:20s linear infinite gridMove;position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#a855f726 0%,#00f0ff1a 25%,#0000 50%);width:200%;height:200%;animation:30s linear infinite rotate;position:fixed;top:-50%;left:-50%}@keyframes gridMove{to{transform:translateY(50px)}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scan{0%{transform:translateY(-100px)}to{transform:translateY(100vh)}}@keyframes cardGlow{0%{box-shadow:0 8px 32px #00000080,inset 0 0 0 1px #ffffff1a,0 0 20px #00f0ff1a}to{box-shadow:0 8px 32px #00000080,inset 0 0 0 1px #ffffff1a,0 0 40px #a855f733}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.scanline{pointer-events:none;z-index:10;background:linear-gradient(#0000,#00f0ff0d,#0000);height:100px;animation:4s linear infinite scan;position:fixed;top:0;left:0;right:0}.container{z-index:1;width:100%;max-width:1000px;margin:0 auto;position:relative}.container.wide{max-width:1400px}.header{text-align:center;margin-bottom:40px;animation:.8s fadeInDown}.header h1{background:linear-gradient(135deg, var(--neon-blue), var(--neon-purple));letter-spacing:2px;text-shadow:0 0 30px #00f0ff80;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:15px;font-size:48px;font-weight:700}.header p{color:#fff9;letter-spacing:1px;font-size:18px}.nav-links{justify-content:center;gap:20px;margin-bottom:40px;animation:1s .2s backwards fadeIn;display:flex}.nav-link{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--card-bg);border:2px solid var(--border-color);color:#fffc;border-radius:25px;padding:12px 30px;font-weight:500;text-decoration:none;transition:all .3s;position:relative;overflow:hidden}.nav-link:before,.btn:before{content:"";background:linear-gradient(90deg,#0000,#00f0ff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.nav-link:hover:before,.nav-link.active:before{left:100%}.nav-link:hover,.nav-link.active{border-color:var(--neon-blue);color:var(--neon-blue);transform:translateY(-2px);box-shadow:0 0 20px #00f0ff80,inset 0 0 20px #00f0ff1a}.progress-bar,.progress-bar-container{background:#ffffff1a;border-radius:4px;width:100%;position:relative;overflow:hidden}.progress-bar{height:6px;margin-bottom:50px;animation:1s .4s backwards fadeIn}.progress-bar-container{height:8px;margin:30px 0}.progress-fill,.progress-bar-fill,.stat-progress-fill{border-radius:inherit;height:100%;transition:width .5s;position:relative}.progress-fill{background:linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-pink));box-shadow:0 0 15px var(--neon-blue)}.progress-bar-fill{background:linear-gradient(90deg, var(--neon-blue), var(--neon-purple));box-shadow:0 0 10px var(--neon-blue)}.progress-fill:after,.progress-bar-fill:after,.stat-progress-fill:after{content:"";background:linear-gradient(90deg,#0000,#ffffff59,#0000);animation:2s infinite shimmer;position:absolute;inset:0}.steps-container{justify-content:space-between;margin-bottom:30px;animation:1s .6s backwards fadeIn;display:flex}.step-indicator{text-align:center;flex:1}.step-number{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--card-bg);color:#fff6;border:2px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;margin:0 auto 10px;font-weight:600;transition:all .3s;display:flex}.step-indicator.active .step-number{border-color:var(--neon-blue);box-shadow:0 0 20px var(--neon-blue);color:var(--neon-blue);background:#00f0ff1a}.step-indicator.completed .step-number{background:var(--neon-purple);border-color:var(--neon-purple);box-shadow:0 0 20px var(--neon-purple);color:#fff}.step-label{color:#ffffff80;font-size:14px}.step-indicator.active .step-label{color:var(--neon-blue);font-weight:600}.card-wrapper{perspective:1500px;min-height:450px;position:relative}.card,.panel,.stat-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--card-bg);border:2px solid var(--border-color);border-radius:20px;box-shadow:0 8px 32px #00000080}.card{opacity:0;pointer-events:none;width:100%;padding:40px 50px;transition:all .6s cubic-bezier(.68,-.55,.265,1.55);position:absolute;transform:translate(100px)rotateY(20deg)}.card.active{opacity:1;pointer-events:all;animation:2s ease-in-out infinite alternate cardGlow;position:relative;transform:translate(0)rotateY(0)}.card.exit-left{opacity:0;transform:translate(-100px)rotateY(-20deg)}.panel{margin-bottom:30px;padding:30px;animation:1s .4s backwards fadeIn}.panel h2,.data-title{color:var(--neon-blue);margin-bottom:20px;font-size:22px}.form-group{margin-bottom:30px}.form-group label{color:#ffffffe6;letter-spacing:.5px;margin-bottom:12px;font-size:16px;font-weight:500;display:block}.form-group input,.form-group textarea,.search-box input{border:2px solid var(--border-color);color:#fff;background:#0006;border-radius:12px;width:100%;font-family:inherit;font-size:16px;transition:all .3s}.form-group input,.form-group textarea{padding:15px 20px}.form-group textarea{resize:vertical;min-height:120px;font-family:Courier New,monospace}.form-group input:focus,.form-group textarea:focus,.search-box input:focus{border-color:var(--neon-blue);background:#0009;outline:none;box-shadow:0 0 20px #00f0ff4d}.hint{color:#ffffff80;margin-top:8px;font-size:13px;line-height:1.6}.hint a{color:var(--neon-blue);border-bottom:1px solid #0000;text-decoration:none}.hint a:hover{border-bottom-color:var(--neon-blue)}.buttons{gap:15px;margin-top:40px;display:flex}.panel .buttons{margin-top:0}.btn{border:2px solid var(--border-color);color:#fffc;cursor:pointer;background:0 0;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:10px;padding:16px 32px;font-size:16px;font-weight:600;transition:all .3s;display:flex;position:relative;overflow:hidden}.panel .btn,.data-actions .btn{flex:none;padding:12px 28px}.btn:before{border-radius:50%;width:0;height:0;transition:width .6s,height .6s;top:50%;left:50%;transform:translate(-50%,-50%)}.btn:hover:before{width:300px;height:300px}.btn-primary{border-color:var(--neon-blue);color:var(--neon-blue)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 30px #00f0ff99}.btn-secondary{color:#ffffffb3;border-color:#ffffff4d}.btn-secondary:hover:not(:disabled){color:#fff;border-color:#ffffff80}.btn:disabled{cursor:not-allowed;opacity:.5}.btn span{z-index:2;align-items:center;gap:8px;display:inline-flex;position:relative}.alert{border-left:4px solid;border-radius:10px;margin-bottom:20px;padding:15px 20px;animation:.3s fadeInDown;display:none}.alert.show{display:block}.alert-success{color:#6ee7b7;background:#10b98133;border-color:#10b981}.alert-error{color:#fca5a5;background:#ef444433;border-color:#ef4444}.alert-warning{color:#fcd34d;background:#f59e0b33;border-color:#f59e0b}.status-badge{border:1px solid var(--neon-blue);color:var(--neon-blue);background:#00f0ff33;border-radius:20px;align-items:center;gap:8px;margin-top:10px;padding:8px 16px;font-size:14px;display:inline-flex;box-shadow:0 0 15px #00f0ff4d}.confirm-box{border:2px solid var(--border-color);background:#0006;border-radius:12px;margin-bottom:25px;padding:25px}.confirm-box h3{color:var(--neon-blue);margin-bottom:15px;font-size:18px}.confirm-box p{color:#fffc;margin-bottom:10px;line-height:1.6}.confirm-box strong{color:#fff}.spinner{border:3px solid #ffffff4d;border-top-color:var(--neon-blue);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin;display:inline-block}.result-section{text-align:center;padding:40px 20px}.result-icon{border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin:0 auto 25px;font-size:50px;display:flex;position:relative}.result-icon:before{background:linear-gradient(135deg, var(--neon-blue), var(--neon-purple));content:"";-webkit-mask-composite:xor;border-radius:50%;padding:3px;animation:3s linear infinite rotate;position:absolute;inset:-5px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.result-icon.processing{color:var(--neon-blue);background:#00f0ff33;box-shadow:0 0 40px #00f0ff80}.result-icon.success{color:#10b981;background:#10b98133;box-shadow:0 0 40px #10b98180}.result-icon.error{color:#ef4444;background:#ef444433;box-shadow:0 0 40px #ef444480}.result-title{color:#fff;margin-bottom:15px;font-size:28px;font-weight:600}.result-message{color:#ffffffb3;font-size:16px}.modal-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;background:#000c;justify-content:center;align-items:center;animation:.3s fadeIn;display:none;position:fixed;inset:0}.modal-box{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--card-bg);border:2px solid var(--border-color);border-radius:20px;width:90%;max-width:450px;padding:40px;animation:.4s cubic-bezier(.68,-.55,.265,1.55) scaleIn;box-shadow:0 0 50px #00f0ff4d}.modal-icon{filter:drop-shadow(0 0 20px var(--neon-purple));text-align:center;margin-bottom:20px;font-size:60px}.modal-title{color:#fff;text-align:center;margin-bottom:15px;font-size:24px;font-weight:600}.modal-message{color:#ffffffb3;text-align:center;margin-bottom:30px;font-size:16px;line-height:1.6}.modal-buttons{gap:15px;display:flex}.dashboard{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px;animation:1s .6s backwards fadeIn;display:none}.stat-card{padding:25px;transition:all .3s;position:relative;overflow:hidden}.stat-card:before{background:linear-gradient(90deg, var(--card-color), transparent);content:"";opacity:0;height:4px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.stat-card:hover{box-shadow:0 12px 40px #0009, 0 0 30px var(--card-glow);transform:translateY(-5px)}.stat-card:hover:before{opacity:1}.stat-card.total{--card-color:var(--neon-blue);--card-glow:#00f0ff4d}.stat-card.valid{--card-color:var(--neon-green);--card-glow:#10b9814d}.stat-card.used{--card-color:var(--neon-purple);--card-glow:#a855f74d}.stat-card.invalid{--card-color:var(--neon-orange);--card-glow:#f59e0b4d}.stat-header{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.stat-title{color:#fff9;letter-spacing:1px;text-transform:uppercase;font-size:14px;font-weight:500}.stat-icon{opacity:.5;font-size:28px}.stat-value{color:var(--card-color);text-shadow:0 0 20px var(--card-glow);margin-bottom:10px;font-size:42px;font-weight:700}.stat-progress{background:#ffffff1a;border-radius:3px;width:100%;height:6px;overflow:hidden}.stat-progress-fill{background:var(--card-color);box-shadow:0 0 10px var(--card-glow)}.data-section{animation:1s .8s backwards fadeIn;display:none}.data-section.show{display:block}.data-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px;display:flex}.data-title{margin-bottom:0;font-size:24px}.data-actions{align-items:center;gap:10px;display:flex}.search-box{position:relative}.search-box input{min-width:250px;padding:10px 40px 10px 15px;font-size:14px}.search-box:after{content:"🔍";opacity:.5;position:absolute;top:50%;right:15px;transform:translateY(-50%)}.filter-buttons{flex-wrap:wrap;gap:10px;margin-bottom:20px;display:flex}.filter-btn,.copy-btn{border:2px solid var(--border-color);color:#ffffffb3;cursor:pointer;background:#0006;border-radius:20px;padding:8px 18px;font-size:14px;font-weight:500;transition:all .3s}.filter-btn:hover{border-color:var(--neon-blue);color:var(--neon-blue)}.filter-btn.active{background:var(--neon-blue);border-color:var(--neon-blue);color:#fff;box-shadow:0 0 20px #00f0ff80}.filter-btn.valid.active{background:var(--neon-green);border-color:var(--neon-green);box-shadow:0 0 20px #10b98180}.filter-btn.invalid.active{background:var(--neon-orange);border-color:var(--neon-orange);box-shadow:0 0 20px #f59e0b80}.table-container{border:1px solid var(--border-color);border-radius:12px;overflow-x:auto}table{border-collapse:collapse;background:#0000004d;width:100%}thead{background:#00f0ff1a}th{border-bottom:2px solid var(--border-color);color:var(--neon-blue);letter-spacing:1px;text-align:left;text-transform:uppercase;padding:15px;font-size:14px;font-weight:600}td{color:#fffc;border-bottom:1px solid #ffffff0d;padding:15px;font-size:14px}tr{transition:background .3s}tr:hover{background:#00f0ff0d}.table-status{border:1px solid;border-radius:15px;padding:6px 14px;font-size:12px;font-weight:600;display:inline-block}.table-status.valid{border-color:var(--neon-green);color:var(--neon-green);background:#10b98133;box-shadow:0 0 10px #10b9814d}.table-status.redeemed{border-color:var(--neon-purple);color:var(--neon-purple);background:#a855f733;box-shadow:0 0 10px #a855f74d}.table-status.disabled,.table-status.invalid{border-color:var(--neon-orange);color:var(--neon-orange);background:#f59e0b33;box-shadow:0 0 10px #f59e0b4d}.copy-btn{border-color:var(--neon-blue);color:var(--neon-blue);border-radius:8px;padding:6px 14px;font-size:12px}.copy-btn:hover{background:var(--neon-blue);color:#fff;box-shadow:0 0 15px #00f0ff80}.card-code{color:#fff;font-family:Courier New,monospace;font-weight:600}.empty-state{color:#ffffff80;text-align:center;padding:60px 20px}.empty-state-icon{opacity:.3;margin-bottom:20px;font-size:80px}@media (width<=768px){body{padding:18px 14px}body.centered{align-items:flex-start}.header h1{font-size:32px}.header p{font-size:14px}.nav-links{gap:12px}.nav-link{padding:10px 18px}.card,.panel{padding:28px 22px}.buttons,.modal-buttons,.data-actions{flex-direction:column}.panel .btn,.data-actions .btn,.btn{width:100%}.steps-container{gap:10px}.step-number{width:40px;height:40px;font-size:14px}.step-label{font-size:12px}.dashboard{grid-template-columns:1fr}.data-header{flex-direction:column;align-items:stretch}.search-box input{min-width:auto}th,td{min-width:120px}}
