:root{--bg-primary:#0a0a0a;--bg-secondary:#141414;--text-primary:#fdfcfb;--text-secondary:#fdfcfbbf;--text-muted:#fdfcfb80;--accent-primary:#00e5ff;--accent-secondary:#09c;--accent-glow:#00e5ff66;--glass-bg:#fdfcfb0a;--glass-hover:#fdfcfb14;--border-color:#00e5ff33;--border-hover:#00e5ff80;--error:#ef4444;--success:#00e5ff}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);justify-content:center;min-height:100vh;padding:2rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex;position:relative}.bg-animation{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.bg-orb{filter:blur(80px);opacity:.5;border-radius:50%;animation:20s ease-in-out infinite float;position:absolute}.bg-orb--1{background:radial-gradient(circle,#00e5ff26 0%,#0000 70%);width:600px;height:600px;animation-duration:25s;top:-20%;right:-15%}.bg-orb--2{background:radial-gradient(circle,#0099cc1f 0%,#0000 70%);width:400px;height:400px;animation-duration:30s;animation-direction:reverse;animation-delay:-5s;bottom:-10%;left:-10%}.bg-orb--3{background:radial-gradient(circle,#00e5ff14 0%,#0000 70%);width:300px;height:300px;animation-duration:22s;animation-delay:-10s;top:40%;left:60%}@keyframes float{0%,to{opacity:.5;transform:translate(0)scale(1)}25%{opacity:.6;transform:translate(30px,-40px)scale(1.05)}50%{opacity:.4;transform:translate(-20px,20px)scale(.95)}75%{opacity:.55;transform:translate(40px,30px)scale(1.02)}}.bg-grid{background-image:linear-gradient(#00e5ff08 1px,#0000 1px),linear-gradient(90deg,#00e5ff08 1px,#0000 1px);background-size:60px 60px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 0%,#0000 70%);mask-image:radial-gradient(#000 0%,#0000 70%)}.bg-noise{opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");position:absolute;inset:0}#app{z-index:1;width:100%;max-width:480px;position:relative}header{text-align:center;margin-bottom:2rem}h1{background:linear-gradient(135deg, var(--text-primary) 0%, var(--accent-primary) 50%, var(--text-primary) 100%);-webkit-text-fill-color:transparent;background-size:200%;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:2rem;font-weight:700;animation:8s infinite gradientShift}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.tagline{color:var(--text-muted);font-size:.95rem}main{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:16px;padding:2rem;animation:.6s ease-out cardFadeIn;box-shadow:0 8px 32px #0000004d,inset 0 0 0 1px #00e5ff0d}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}button{cursor:pointer;touch-action:manipulation;border-radius:12px;padding:.875rem 1.5rem;font-family:inherit;font-size:.95rem;font-weight:500;transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s,color .2s;position:relative;overflow:hidden}.btn-primary{background:linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);color:var(--bg-primary);border:none;box-shadow:0 4px 20px #00e5ff33}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 32px #00e5ff4d}.btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 16px #00e5ff33}.btn-secondary{background:var(--glass-bg);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--glass-hover);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 32px #00e5ff1a}.btn-secondary:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed}button:disabled:hover{transform:none}button .spinner{border:2px solid #0000;border-top-color:currentColor;border-radius:50%;width:18px;height:18px;margin-right:.5rem;animation:.8s linear infinite spin;display:none}button.loading .spinner{display:inline-block}button.loading .btn-text{opacity:.8}@keyframes spin{to{transform:rotate(360deg)}}#login-section{text-align:center;padding:2rem 0}#login-section p{color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.6}#login-btn{justify-content:center;align-items:center;gap:.75rem;width:100%;display:inline-flex}#login-btn svg{width:20px;height:20px}#jwt-section{text-align:center;padding:2rem 0}#jwt-section p{color:var(--text-secondary);margin-bottom:1rem;line-height:1.6}#jwt-section .jwt-help{color:var(--text-muted);margin-bottom:1.5rem;font-size:.85rem}#jwt-section .jwt-help a{color:var(--accent-primary);text-decoration:none;transition:opacity .2s}#jwt-section .jwt-help a:hover{opacity:.8}#jwt-section code{background:var(--glass-bg);color:var(--accent-primary);border-radius:4px;padding:.15rem .4rem;font-family:ui-monospace,monospace;font-size:.85em}#jwt-form{flex-direction:column;gap:1rem;display:flex}.input-group{text-align:left}.input-group label{color:var(--text-secondary);margin-bottom:.5rem;font-size:.9rem;font-weight:500;display:block}.input-group input{background:var(--glass-bg);border:1px solid var(--border-color);width:100%;color:var(--text-primary);border-radius:12px;padding:.875rem 1rem;font-family:ui-monospace,monospace;font-size:.9rem;transition:border-color .2s,box-shadow .2s}.input-group input::placeholder{color:var(--text-muted)}.input-group input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow);outline:none}#jwt-submit-btn{justify-content:center;align-items:center;gap:.75rem;width:100%;display:inline-flex}#jwt-submit-btn svg{width:20px;height:20px}#jwt-section[hidden]{display:none}#user-info{background:var(--glass-bg);border:1px solid var(--border-color);border-radius:12px;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1rem;display:flex}.user-avatar{background:linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);width:48px;height:48px;color:var(--bg-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.25rem;font-weight:600;display:flex;overflow:hidden}.user-avatar-img{object-fit:cover;width:100%;height:100%}.user-details{flex:1;min-width:0}.user-name{color:var(--text-primary);margin-bottom:.125rem;font-weight:600}.user-channel{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.logout-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:.5rem;font-size:.85rem;transition:color .2s}.logout-btn:hover{color:var(--error)}fieldset{border:1px solid var(--border-color);border-radius:12px;margin-bottom:1.5rem;padding:1.25rem}legend{color:var(--text-secondary);padding:0 .75rem;font-size:.9rem;font-weight:500}.checkbox-group{flex-direction:column;gap:.25rem;display:flex}.checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;gap:.75rem;padding:.75rem;transition:background .2s;display:flex}.checkbox-label:hover{background:var(--glass-bg)}.checkbox-label input[type=checkbox]{display:none}.checkbox-custom{border:2px solid var(--border-color);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;transition:all .2s;display:flex}.checkbox-custom svg{width:14px;height:14px;stroke:var(--bg-primary);stroke-width:3px;opacity:0;transition:all .2s;transform:scale(.5)}.checkbox-label input:checked+.checkbox-custom{background:var(--accent-primary);border-color:var(--accent-primary);box-shadow:0 0 12px var(--accent-glow)}.checkbox-label input:checked+.checkbox-custom svg{opacity:1;transform:scale(1)}.checkbox-text{color:var(--text-primary);font-size:.95rem}.checkbox-text .desc{color:var(--text-muted);margin-top:.125rem;font-size:.8rem;display:block}#preset-group{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.preset-label{color:var(--text-muted);margin-right:.25rem;font-size:.85rem}.preset-btn{background:var(--glass-bg);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;touch-action:manipulation;border-radius:6px;padding:.375rem .75rem;font-size:.8rem;transition:background-color .2s,border-color .2s,color .2s,transform .2s}.preset-btn:hover{background:var(--glass-hover);border-color:var(--border-hover);color:var(--text-primary)}.preset-btn:active{transform:scale(.95)}#button-group{gap:1rem;display:flex}#button-group button{flex:1}#progress{border-top:1px solid var(--border-color);margin-top:1.5rem;padding-top:1.5rem}#progress-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}#progress-text{align-items:center;gap:.75rem;font-size:.9rem;display:flex}.btn-cancel{border:1px solid var(--error);color:var(--error);cursor:pointer;background:0 0;border-radius:6px;padding:.375rem .75rem;font-size:.8rem;transition:all .2s}.btn-cancel:hover{background:var(--error);color:var(--bg-primary)}#progress-label{color:var(--text-secondary)}#progress-percent{color:var(--accent-primary);font-variant-numeric:tabular-nums;font-weight:600}.progress-track{background:var(--glass-bg);border-radius:4px;width:100%;height:8px;position:relative;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);height:100%;box-shadow:0 0 12px var(--accent-glow);border-radius:4px;transition:width .3s;position:relative}.progress-fill:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff4d 50%,#0000 100%);animation:1.5s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}[hidden],section[hidden],div[hidden],#export-section[hidden],#login-section[hidden],#progress[hidden]{display:none}#toast-container{z-index:1000;flex-direction:column;gap:.75rem;display:flex;position:fixed;top:1.5rem;right:1.5rem}.toast{background:var(--bg-secondary);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:12px;align-items:flex-start;gap:.75rem;min-width:280px;max-width:360px;padding:1rem;animation:.3s slideIn;display:flex;box-shadow:0 8px 32px #0006}.toast-icon{flex-shrink:0;width:20px;height:20px;margin-top:1px}.toast.success{border-left:3px solid var(--accent-primary)}.toast.success .toast-icon{color:var(--accent-primary)}.toast.error{border-left:3px solid var(--error)}.toast.error .toast-icon{color:var(--error)}.toast-content{flex:1;min-width:0}.toast-title{margin-bottom:.25rem;font-size:.9rem;font-weight:600}.toast-message{color:var(--text-secondary);font-size:.85rem;line-height:1.4}.toast.fade-out{animation:.3s forwards fadeSlideOut}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@media (max-width:520px){body{padding:1rem}h1{font-size:1.5rem}main{padding:1.5rem}#button-group{flex-direction:column}#toast-container{left:1rem;right:1rem}.toast{min-width:0;max-width:none}}button:focus-visible,.checkbox-label:focus-within .checkbox-custom{outline:2px solid var(--accent-primary);outline-offset:2px}.checkbox-label:focus-within{background:var(--glass-bg)}footer{text-align:center;color:var(--text-muted);margin-top:1.5rem;font-size:.8rem}footer a{color:var(--accent-primary);text-decoration:none;transition:color .2s}footer a:hover{color:var(--accent-secondary)}footer a:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:2px}.footer-divider{color:var(--text-muted);margin:0 .5rem}.modal{background:0 0;border:none;width:90%;max-width:400px;margin:0;padding:0;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.modal::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;box-shadow:0 8px 32px #0006}.modal-content h2{color:var(--text-primary);margin-bottom:.75rem;font-size:1.25rem;font-weight:600}.modal-content p{color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.5}.modal-actions{justify-content:flex-end;gap:.75rem;display:flex}.modal-actions button{padding:.625rem 1.25rem}.skip-link{background:var(--accent-primary);color:var(--bg-primary);z-index:1000;border-radius:0 0 8px 8px;padding:.75rem 1.5rem;font-weight:600;text-decoration:none;transition:top .2s;position:absolute;top:-100px;left:50%;transform:translate(-50%)}.skip-link:focus{outline:none;top:0}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto;transition-duration:.01ms;animation-duration:.01ms;animation-iteration-count:1}}