*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#000;--card-bg:#0d0d0d;--input-bg:#141414;--text:#fff;--text-muted:#999;--border:#222;--accent:#53fc18;--totp-bg:#1a3d1a}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{text-shadow:0 0 10px #53fc184d}50%{text-shadow:0 0 20px #53fc1899,0 0 30px #53fc1866}}@keyframes checkmark{0%{transform:scale(0)rotate(45deg)}50%{transform:scale(1.2)rotate(45deg)}to{transform:scale(1)rotate(45deg)}}.page{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.logo{margin-bottom:16px;animation:.6s ease-out fadeIn}.logo svg{transition:transform .3s}.logo:hover svg{transform:scale(1.1)rotate(5deg)}.logo-large{margin-bottom:24px;animation:.8s ease-out fadeIn}.logo-large svg{filter:drop-shadow(0 0 20px #53fc1866)}.brand{letter-spacing:.05em;margin-bottom:4px;font-size:42px;font-weight:700;animation:.8s ease-out .1s both fadeIn}.brand span{color:var(--accent);text-shadow:0 0 20px #53fc184d}.brand-large{margin-bottom:12px;font-size:52px}.welcome-text{color:var(--text-muted);margin-bottom:40px;font-size:14px;animation:1s ease-out .3s both fadeIn}.subtitle{color:var(--text-muted);letter-spacing:.15em;text-transform:uppercase;margin-bottom:32px;font-size:13px;animation:1s ease-out .2s both fadeIn}.help-btn{color:var(--accent);cursor:pointer;background:#53fc181a;border:1px solid #53fc184d;border-radius:8px;margin-bottom:16px;padding:8px 20px;font-size:13px;font-weight:600;transition:all .3s;animation:1s ease-out .3s both fadeIn;display:inline-block}.help-btn:hover{border-color:var(--accent);background:#53fc1833;transform:scale(1.05)}.modal-overlay{z-index:1000;background:#000000d9;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;width:90%;max-width:500px;max-height:80vh;padding:32px;animation:.3s slideDown;position:relative;overflow-y:auto}.modal-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:28px;line-height:1;transition:color .2s;position:absolute;top:16px;right:16px}.modal-close:hover{color:var(--text)}.modal-title{color:var(--text);margin-bottom:24px;font-size:24px;font-weight:700}.modal-steps{flex-direction:column;gap:20px;margin-bottom:24px;display:flex}.modal-step{align-items:flex-start;gap:16px;display:flex}.modal-step-number{background:var(--totp-bg);color:var(--accent);border:1px solid #53fc184d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-weight:700;display:flex}.modal-step-text{flex:1}.modal-step-text strong{color:var(--text);margin-bottom:4px;display:block}.modal-step-text p{color:var(--text-muted);margin:0;font-size:14px;line-height:1.5}.modal-ok{background:var(--accent);color:#000;cursor:pointer;border:none;border-radius:10px;width:100%;padding:14px;font-size:16px;font-weight:700;transition:all .3s}.modal-ok:hover{transform:scale(1.02);box-shadow:0 4px 16px #53fc1866}.guide-link-main{background:var(--accent);color:#000;border-radius:10px;margin-top:24px;padding:14px 28px;font-size:15px;font-weight:700;text-decoration:none;transition:all .3s;animation:1.2s ease-out 1.2s both fadeIn;display:inline-block;box-shadow:0 4px 16px #53fc184d}.guide-link-main:hover{transform:scale(1.05);box-shadow:0 6px 24px #53fc1880}.guide-link-main:active{transform:scale(.98)}.guide-link{color:var(--accent);background:#53fc181a;border:1px solid #53fc184d;border-radius:8px;margin-bottom:24px;padding:10px 24px;font-size:14px;font-weight:600;text-decoration:none;transition:all .3s;animation:1s ease-out .25s both fadeIn;display:inline-block}.guide-link:hover{border-color:var(--accent);background:#53fc1833;transform:translateY(-2px);box-shadow:0 4px 12px #53fc1833}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;width:100%;max-width:480px;padding:32px;transition:transform .3s,box-shadow .3s;animation:1.2s ease-out .3s both fadeIn;box-shadow:0 4px 24px #0006}.card:hover{transform:translateY(-2px);box-shadow:0 8px 32px #53fc181a}.lang-card{background:var(--card-bg);border:1px solid var(--border);text-align:center;border-radius:16px;width:100%;max-width:420px;padding:40px 32px;animation:1.2s ease-out .4s both fadeIn;box-shadow:0 4px 24px #0006}.lang-icon{justify-content:center;margin-bottom:20px;animation:1s ease-out .6s both fadeIn;display:flex}.lang-title{margin-bottom:8px;font-size:24px;font-weight:600;animation:1s ease-out .7s both fadeIn}.lang-subtitle{color:var(--text-muted);margin-bottom:32px;font-size:13px;animation:1s ease-out .8s both fadeIn}.card-title{margin-bottom:4px;font-size:24px;font-weight:600}.card-subtitle{color:var(--text-muted);margin-bottom:28px;font-size:14px}.field{margin-bottom:20px;animation:.4s ease-out both slideDown}.field:nth-child(2){animation-delay:.5s}.field:nth-child(3){animation-delay:.6s}.field label{color:var(--text-muted);margin-bottom:8px;font-size:13px;transition:color .2s;display:block}.input-group{background:var(--input-bg);border:1px solid var(--border);border-radius:8px;align-items:center;gap:8px;padding:4px 4px 4px 16px;transition:all .3s;display:flex;position:relative}.input-group:focus-within{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 0 0 3px #53fc181a}.input-group:hover{border-color:#333}.input-group input{color:var(--text);background:0 0;border:none;outline:none;flex:1;padding:10px 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px}.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex;position:relative}.icon-btn:hover{color:var(--text);background:#ffffff0d;transform:scale(1.1)}.icon-btn:active{transform:scale(.95)}.icon-btn.copied{color:var(--accent);animation:.5s pulse}.icon-btn.copied svg{animation:.5s checkmark}.totp-block{background:var(--totp-bg);border:1px solid #53fc1833;border-radius:12px;margin-top:8px;padding:20px;transition:all .3s;animation:.5s ease-out .7s both slideDown}.totp-block:hover{border-color:#53fc1866;box-shadow:0 0 20px #53fc181a}.totp-header{color:var(--accent);justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;font-weight:600;display:flex}.timer{justify-content:center;align-items:center;display:flex;position:relative}.timer-circle{transform:rotate(0)}.timer-text{color:var(--accent);font-size:11px;font-weight:700;position:absolute}.totp-code-wrapper{justify-content:space-between;align-items:center;gap:16px;display:flex}.totp-code{letter-spacing:.15em;color:var(--accent);text-shadow:0 0 15px #53fc184d;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:48px;font-weight:800;transition:all .3s}.totp-code.updated{animation:.6s glow,.4s pulse}.copy-totp{color:var(--accent)}.copy-totp:hover{background:#53fc181a;transform:scale(1.15)}.copy-totp.copied{background:#53fc1833;animation:.5s pulse}.lang-options{flex-direction:column;gap:12px;display:flex}.lang-btn{background:var(--input-bg);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:10px;align-items:center;gap:16px;padding:16px 24px;font-size:16px;font-weight:500;transition:all .3s;animation:.4s both slideDown;display:flex}.lang-btn:first-child{animation-delay:.9s}.lang-btn:nth-child(2){animation-delay:1s}.lang-btn:nth-child(3){animation-delay:1.1s}.lang-btn:hover{border-color:var(--accent);background:#53fc180d;transform:translate(8px)}.lang-btn:active{transform:scale(.98)}.lang-flag{background:var(--totp-bg);color:var(--accent);text-align:center;border:1px solid #53fc184d;border-radius:6px;min-width:48px;padding:6px 12px;font-size:14px;font-weight:700}.lang-name{text-align:left;flex:1}.slider-page{background:var(--bg);flex-direction:column;justify-content:space-between;align-items:center;min-height:100vh;padding:40px 20px;display:flex}.slider-header{text-align:center;width:100%;max-width:800px;margin-bottom:32px}.slider-icon{margin:0 auto 20px;animation:.6s ease-out fadeIn}.slider-icon svg{filter:drop-shadow(0 0 20px #ffa50066)}.slider-title{margin-bottom:8px;font-size:32px;font-weight:700;animation:.8s ease-out fadeIn}.slider-subtitle{color:var(--text-muted);margin-bottom:24px;font-size:14px;animation:1s ease-out fadeIn}.progress-container{width:100%;max-width:600px;margin:0 auto}.progress-bar{background:var(--border);border-radius:2px;width:100%;height:4px;margin-bottom:8px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:2px;height:100%;transition:width .3s}.progress-text{text-align:center;color:var(--text-muted);font-size:13px;font-weight:600}.slider-content{flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;max-width:800px;margin:20px 0;display:flex}.slide-image{border:1px solid var(--border);background:var(--card-bg);border-radius:16px;width:100%;max-width:700px;margin-bottom:24px;animation:.5s ease-out fadeIn;overflow:hidden;box-shadow:0 8px 32px #0006}.slide-image img{width:100%;height:auto;display:block}.slide-info{text-align:center;max-width:600px;padding:0 20px}.slide-title{color:var(--text);margin-bottom:12px;font-size:24px;font-weight:600}.slide-desc{color:var(--text-muted);font-size:15px;line-height:1.6}.slider-controls{gap:12px;width:100%;max-width:700px;padding:20px 0;display:flex}.control-btn{cursor:pointer;border:none;border-radius:10px;flex:1;padding:14px 24px;font-size:15px;font-weight:600;transition:all .3s}.back-btn{background:var(--card-bg);color:var(--text);border:1px solid var(--border)}.back-btn:hover:not(:disabled){border-color:var(--text-muted);background:#ffffff0d}.back-btn:disabled{opacity:.3;cursor:not-allowed}.skip-btn{color:var(--text-muted);border:1px solid var(--border);background:0 0}.skip-btn:hover{color:var(--text);border-color:var(--text-muted)}.next-btn{background:var(--accent);color:#000;font-weight:700;box-shadow:0 4px 16px #53fc184d}.next-btn:hover{transform:scale(1.02);box-shadow:0 6px 20px #53fc1866}.next-btn:active{transform:scale(.98)}.guide-page{background:var(--bg);min-height:100vh;padding:40px 20px}.guide-header{text-align:center;margin-bottom:48px;animation:.8s ease-out fadeIn}.guide-title{margin-bottom:8px;font-size:36px;font-weight:700}.guide-subtitle{color:var(--text-muted);font-size:14px}.guide-container{max-width:1200px;margin:0 auto}.guide-section{margin-bottom:64px}.section-title{color:var(--accent);align-items:center;gap:12px;margin-bottom:32px;font-size:28px;font-weight:600;animation:1s ease-out fadeIn;display:flex}.steps-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:32px;display:grid}.step-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:20px;transition:all .3s;animation:.6s ease-out both fadeIn}.step-card:hover{border-color:#53fc1866;transform:translateY(-4px);box-shadow:0 8px 24px #0000004d}.step-number{background:var(--totp-bg);color:var(--accent);border:1px solid #53fc184d;border-radius:6px;margin-bottom:16px;padding:4px 12px;font-size:12px;font-weight:700;display:inline-block}.step-image{aspect-ratio:3/2;background:var(--input-bg);border-radius:8px;width:100%;margin-bottom:16px;position:relative;overflow:hidden}.step-image img{object-fit:cover;width:100%;height:100%}.step-title{color:var(--text);margin-bottom:8px;font-size:18px;font-weight:600}.step-desc{color:var(--text-muted);font-size:14px;line-height:1.5}.back-link{background:var(--card-bg);border:1px solid var(--border);color:var(--text);border-radius:8px;align-items:center;gap:8px;margin-top:24px;padding:12px 24px;font-size:15px;font-weight:500;text-decoration:none;transition:all .3s;display:inline-flex}.back-link:hover{border-color:var(--accent);color:var(--accent);transform:translate(-4px)}.continue-btn{background:var(--accent);color:#000;cursor:pointer;border:none;border-radius:10px;margin-top:32px;padding:16px 40px;font-size:16px;font-weight:700;transition:all .3s;display:inline-block;box-shadow:0 4px 16px #53fc184d}.continue-btn:hover{transform:scale(1.05);box-shadow:0 6px 24px #53fc1880}.continue-btn:active{transform:scale(.98)}.toast{background:var(--accent);color:#000;z-index:1000;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;animation:.3s slideDown,.3s fadeIn;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #53fc1866}@media (max-width:560px){.brand{font-size:32px}.card{padding:24px}.totp-code{font-size:36px}}
