:root{--primary:#10b981;--primary-light:#34d399;--primary-dark:#059669;--primary-glow:#10b9814d;--accent:#f59e0b;--accent-light:#fbbf24;--accent-dark:#d97706;--danger:#ef4444;--danger-light:#f87171;--success:#10b981;--warning:#f59e0b;--info:#3b82f6;--bg-0:#0a0f1a;--bg-1:#111827;--bg-2:#1e293b;--bg-3:#334155;--bg-card:#1e293bb3;--bg-input:#0f172acc;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-accent:var(--primary-light);--border:#94a3b81f;--border-focus:var(--primary);--glass-bg:#1e293b99;--glass-border:#94a3b81a;--glass-shadow:0 8px 32px #0006;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.4s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-0);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}#app{min-height:100vh;position:relative}.bg-particles{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.particle{background:var(--primary);opacity:.04;border-radius:50%;animation:20s ease-in-out infinite float;position:absolute}.particle:first-child{width:400px;height:400px;animation-delay:0s;top:-100px;left:-100px}.particle:nth-child(2){width:300px;height:300px;animation-duration:25s;animation-delay:-5s;top:50%;right:-80px}.particle:nth-child(3){width:200px;height:200px;animation-duration:18s;animation-delay:-10s;bottom:-50px;left:30%}.particle:nth-child(4){background:var(--accent);width:350px;height:350px;animation-duration:22s;animation-delay:-8s;top:20%;left:60%}.particle:nth-child(5){width:150px;height:150px;animation-duration:15s;animation-delay:-12s;bottom:10%;right:20%}@keyframes float{0%,to{transform:translate(0)scale(1)}25%{transform:translate(30px,-30px)scale(1.05)}50%{transform:translate(-20px,20px)scale(.95)}75%{transform:translate(10px,-10px)scale(1.02)}}.app-header{z-index:100;padding:var(--space-md) var(--space-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);background:#0a0f1ad9;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.logo-section{align-items:center;gap:var(--space-md);display:flex}.logo-icon{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;width:44px;height:44px;box-shadow:0 4px 12px var(--primary-glow);justify-content:center;align-items:center;display:flex}.app-title{background:linear-gradient(135deg, var(--text-primary), var(--primary-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.2rem;font-weight:700}.app-subtitle{color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;font-size:.75rem;font-weight:400}.header-status{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);background:var(--bg-2);color:var(--text-secondary);font-size:.8rem;display:flex}.status-dot{width:8px;height:8px;transition:background var(--transition-normal);border-radius:50%}.status-dot.offline{background:var(--text-muted)}.status-dot.online{background:var(--success);box-shadow:0 0 8px var(--success);animation:2s infinite pulse-dot}.status-dot.working{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:1s infinite pulse-dot}.status-dot.error{background:var(--danger);box-shadow:0 0 8px var(--danger)}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}.main-content{z-index:1;max-width:900px;padding:var(--space-xl);gap:var(--space-lg);flex-direction:column;margin:0 auto;display:flex;position:relative}.card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);transition:all var(--transition-normal);box-shadow:var(--glass-shadow);overflow:hidden}.card:hover{border-color:#94a3b833}.card-header{align-items:flex-start;gap:var(--space-md);padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--border);display:flex}.card-body{padding:var(--space-lg) var(--space-xl)}.card-title{color:var(--text-primary);font-size:1.1rem;font-weight:600}.card-desc{color:var(--text-secondary);margin-top:2px;font-size:.85rem}.card-actions{gap:var(--space-sm);flex-shrink:0;margin-left:auto;display:flex}.step-badge{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;width:32px;min-width:32px;height:32px;box-shadow:0 2px 8px var(--primary-glow);justify-content:center;align-items:center;font-size:.85rem;font-weight:700;display:flex}.step-badge.done{background:linear-gradient(135deg, var(--success), #047857)}.input-group{margin-bottom:var(--space-lg)}.input-label{color:var(--text-secondary);margin-bottom:var(--space-sm);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:500;display:block}.input-wrapper{position:relative}.token-textarea{width:100%;padding:var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);resize:vertical;min-height:80px;transition:border-color var(--transition-fast);outline:none;padding-right:48px;font-family:Inter,monospace;font-size:.85rem}.token-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.token-textarea::placeholder{color:var(--text-muted)}.btn-paste{top:var(--space-sm);right:var(--space-sm);padding:var(--space-sm);background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);position:absolute}.btn-paste:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.auth-tabs{margin-bottom:var(--space-lg);background:var(--bg-input);border-radius:var(--radius-md);border:1px solid var(--border);gap:4px;padding:4px;display:flex}.auth-tab{justify-content:center;align-items:center;gap:var(--space-sm);padding:10px var(--space-md);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex:1;font-family:inherit;font-size:.85rem;font-weight:500;display:flex}.auth-tab:hover{color:var(--text-secondary);background:#ffffff08}.auth-tab.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px var(--primary-glow)}.auth-content{animation:.2s fade-in}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.input-field{width:100%;padding:12px var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--transition-fast);outline:none;padding-right:44px;font-family:inherit;font-size:.9rem}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.input-field::placeholder{color:var(--text-muted)}.input-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.btn-toggle-pw{border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;padding:6px;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.btn-toggle-pw:hover{color:var(--primary-light);background:#10b9811a}.login-hint{align-items:flex-start;gap:var(--space-sm);padding:10px var(--space-md);margin-bottom:var(--space-lg);border-radius:var(--radius-sm);color:var(--text-secondary);background:#3b82f614;border:1px solid #3b82f633;font-size:.78rem;line-height:1.5;display:flex}.login-hint svg{color:var(--info);flex-shrink:0;margin-top:2px}.btn{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:1px solid #0000;outline:none;font-family:inherit;font-size:.85rem;font-weight:600;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{border-radius:var(--radius-sm);padding:6px 12px;font-size:.78rem}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:.95rem}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;box-shadow:0 4px 12px var(--primary-glow)}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg, var(--primary-light), var(--primary));box-shadow:0 6px 20px var(--primary-glow);transform:translateY(-1px)}.btn-accent{background:var(--bg-3);color:var(--text-primary);border-color:var(--border)}.btn-accent:hover:not(:disabled){background:var(--bg-2);border-color:var(--primary);color:var(--primary-light)}.btn-outline{color:var(--primary-light);border-color:var(--primary);background:0 0}.btn-outline:hover:not(:disabled){background:var(--primary);color:#fff}.btn-danger{background:linear-gradient(135deg, var(--danger), #dc2626);color:#fff;box-shadow:0 4px 12px #ef44444d}.btn-danger:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #ef444466}.btn-connect{justify-content:center;width:100%}.user-stats{gap:var(--space-md);grid-template-columns:repeat(3,1fr);display:grid}.stat-item{padding:var(--space-lg);background:var(--bg-input);border-radius:var(--radius-md);border:1px solid var(--border);flex-direction:column;align-items:center;display:flex}.stat-value{color:var(--text-primary);font-size:2rem;font-weight:800;line-height:1}.stat-item.completed .stat-value{color:var(--success)}.stat-item.pending .stat-value{color:var(--accent)}.stat-label{color:var(--text-muted);margin-top:var(--space-xs);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.course-list{gap:var(--space-sm);flex-direction:column;display:flex}.course-group{margin-bottom:var(--space-md)}.course-group-title{color:var(--primary-light);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-sm) 0;border-bottom:1px solid var(--border);margin-bottom:var(--space-sm);font-size:.8rem;font-weight:600}.course-category{margin-bottom:var(--space-lg);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);overflow:hidden}.category-header{padding:var(--space-md) var(--space-lg);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition-fast);justify-content:space-between;align-items:center;gap:var(--space-md);background:linear-gradient(135deg,#10b98114,#6366f10d);display:flex}.category-header:hover{background:linear-gradient(135deg,#10b9811f,#6366f114)}.category-header-left{align-items:center;gap:var(--space-md);min-width:0;display:flex}.category-icon{flex-shrink:0;font-size:1.5rem}.category-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:700;overflow:hidden}.category-stats{color:var(--text-muted);margin-top:2px;font-size:.75rem}.category-header-right{align-items:center;gap:var(--space-md);flex-shrink:0;display:flex}.category-progress-bar{border-radius:var(--radius-full);background:#ffffff1a;width:80px;height:6px;overflow:hidden}.category-progress-fill{border-radius:var(--radius-full);height:100%;transition:width .5s}.category-pct{color:var(--primary-light);text-align:right;min-width:30px;font-size:.75rem;font-weight:700}.category-chevron{color:var(--text-muted);transition:transform var(--transition-fast);font-size:.7rem}.category-body{padding:var(--space-sm);gap:var(--space-xs);flex-direction:column;display:flex}.step-num{color:var(--primary);font-size:.8rem;font-weight:700}.badge-notstarted{color:var(--text-muted);background:#64748b26}.btn-select-all{border-radius:var(--radius-md);width:100%;color:var(--primary-light);cursor:pointer;transition:all var(--transition-fast);background:#10b9810f;border:1px dashed #10b9814d;align-items:center;gap:6px;margin-bottom:4px;padding:12px;font-size:.98rem;font-weight:600;display:flex}.btn-select-all:hover{border-color:var(--primary);background:#10b9811f}.category-all-done{text-align:center;color:var(--success);padding:8px 12px;font-size:.8rem;font-weight:600}.course-item{align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}.course-item:hover{border-color:var(--primary);background:#10b9810d}.course-item.selected{border-color:var(--primary);background:#10b9811a}.course-item.completed{opacity:.6}.course-item.processing{border-color:var(--accent);background:#f59e0b14}.course-item.success{border-color:var(--success);background:#10b98114}.course-item.error{border-color:var(--danger);background:#ef444414}.course-checkbox{border:2px solid var(--text-muted);width:20px;height:20px;transition:all var(--transition-fast);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.course-item.selected .course-checkbox,.course-item.completed .course-checkbox{background:var(--primary);border-color:var(--primary)}.course-checkbox svg{opacity:0;transition:opacity var(--transition-fast)}.course-item.selected .course-checkbox svg,.course-item.completed .course-checkbox svg{opacity:1}.course-info{flex:1;min-width:0}.course-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:500;overflow:hidden}.course-meta{align-items:center;gap:var(--space-md);color:var(--text-muted);margin-top:2px;font-size:.75rem;display:flex}.course-status-badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:4px;padding:2px 8px;font-size:.7rem;font-weight:600;display:inline-flex}.badge-completed{color:var(--success);background:#10b98126}.badge-incomplete{color:var(--accent);background:#f59e0b26}.badge-processing{color:var(--info);background:#3b82f626}.badge-error{color:var(--danger);background:#ef444426}.course-spinner{border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;flex-shrink:0;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.progress-section{margin-bottom:var(--space-lg)}.progress-bar-container{align-items:center;gap:var(--space-md);display:flex}.progress-bar{background:var(--bg-3);border-radius:var(--radius-full);flex:1;height:12px;position:relative;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light));border-radius:var(--radius-full);height:100%;transition:width var(--transition-slow);position:relative}.progress-bar-fill:after{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);animation:2s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-text{color:var(--primary-light);text-align:right;min-width:40px;font-size:.85rem;font-weight:700}.progress-log{margin-top:var(--space-md);max-height:200px;padding:var(--space-md);background:var(--bg-input);border-radius:var(--radius-md);border:1px solid var(--border);font-family:JetBrains Mono,Fira Code,monospace;font-size:.75rem;line-height:1.8;overflow-y:auto}.progress-log::-webkit-scrollbar{width:6px}.progress-log::-webkit-scrollbar-track{background:0 0}.progress-log::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:3px}.log-entry{gap:var(--space-sm);display:flex}.log-time{color:var(--text-muted);flex-shrink:0}.log-msg{color:var(--text-secondary)}.log-msg.success{color:var(--success)}.log-msg.error{color:var(--danger)}.log-msg.warning{color:var(--warning)}.log-msg.info{color:var(--info)}.action-buttons{gap:var(--space-md);display:flex}.btn-start,.btn-stop{flex:1;justify-content:center}.toast-container{top:80px;right:var(--space-xl);z-index:1000;gap:var(--space-sm);flex-direction:column;display:flex;position:fixed}.toast{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:300px;max-width:420px;font-size:.85rem;animation:.3s slide-in;display:flex;box-shadow:0 8px 24px #00000080}.toast.toast-success{border-left:3px solid var(--success)}.toast.toast-error{border-left:3px solid var(--danger)}.toast.toast-warning{border-left:3px solid var(--warning)}.toast.toast-info{border-left:3px solid var(--info)}.toast.removing{animation:.3s forwards slide-out}@keyframes slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slide-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.hidden{display:none!important}@media (width<=768px){.main-content,.app-header{padding:var(--space-md)}.card-header{padding:var(--space-md);flex-wrap:wrap}.card-body{padding:var(--space-md)}.card-actions{width:100%;margin-left:0;margin-top:var(--space-sm)}.user-stats{gap:var(--space-sm);grid-template-columns:repeat(3,1fr)}.stat-value{font-size:1.5rem}.action-buttons{flex-direction:column}.toast-container{right:var(--space-md);left:var(--space-md)}.toast{min-width:unset}}.mfa-section{margin-top:var(--space-lg)}.mfa-divider{background:linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);height:1px;margin-bottom:var(--space-lg)}.mfa-header{align-items:center;gap:var(--space-sm);color:var(--accent);margin-bottom:var(--space-md);font-size:.95rem;font-weight:600;display:flex}.mfa-header svg{stroke:var(--accent)}.mfa-desc{color:var(--text-secondary);margin-bottom:var(--space-md);font-size:.85rem}.mfa-options{gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.btn-mfa-option{padding:var(--space-sm) var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);cursor:pointer;flex:1;font-size:.85rem;transition:all .2s}.btn-mfa-option:hover{border-color:var(--accent);background:#f59e0b1a;box-shadow:0 0 12px #f59e0b26}.btn-mfa-option:disabled{opacity:.6;cursor:not-allowed}
