:root{--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--bg-primary:#0a0f1d;--bg-secondary:#11182c;--bg-tertiary:#1a233d;--bg-elevated:#162038;--bg-glass:#11182cc7;--bg-glass-hover:#1a233de0;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--border-subtle:#ffffff17;--border-strong:#ffffff2e;--border-glow:#6366f159;--primary:#6366f1;--primary-hover:#4f46e5;--primary-glow:#6366f159;--primary-light:#e0e7ff;--primary-gradient:linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);--accent-pink:#ec4899;--accent-coral:#f43f5e;--accent-orange:#f97316;--cyan:#06b6d4;--cyan-glow:#06b6d44d;--cyan-gradient:linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);--success:#10b981;--success-glow:#10b9814d;--success-bg:#10b98124;--success-gradient:linear-gradient(135deg, #10b981 0%, #059669 100%);--warning:#f59e0b;--warning-glow:#f59e0b4d;--warning-bg:#f59e0b24;--warning-gradient:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);--danger:#f43f5e;--danger-glow:#f43f5e4d;--danger-bg:#f43f5e24;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:26px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000004d;--shadow-md:0 4px 8px -1px #0006, 0 2px 4px -1px #0000004d;--shadow-lg:0 12px 28px -3px #00000080, 0 6px 10px -2px #0006;--shadow-glow:0 0 30px var(--primary-glow);--shadow-card:0 10px 32px #0000006b;--transition-fast:.15s ease;--transition-normal:.25s cubic-bezier(.16, 1, .3, 1);--transition-smooth:.4s cubic-bezier(.16, 1, .3, 1)}[data-theme=light]{--bg-primary:#f6f8fd;--bg-secondary:#fff;--bg-tertiary:#edf2f9;--bg-elevated:#fff;--bg-glass:#ffffffe0;--bg-glass-hover:#edf2f9f2;--text-main:#0f172a;--text-muted:#475569;--text-dim:#94a3b8;--border-subtle:#0f172a14;--border-strong:#0f172a24;--border-glow:#6366f140;--shadow-sm:0 1px 3px 0 #0000000d;--shadow-md:0 4px 10px -1px #00000012;--shadow-lg:0 12px 30px -3px #6366f11a;--shadow-card:0 8px 30px #0000000a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(circle at 10% 10%,#6366f129 0%,#0000 45%),radial-gradient(circle at 90% 12%,#ec489924 0%,#0000 45%),radial-gradient(circle,#06b6d41f 0%,#0000 55%),radial-gradient(circle at 85% 85%,#f59e0b1f 0%,#0000 45%);background-attachment:fixed;min-height:100vh;line-height:1.5;overflow-x:hidden}[data-theme=light] body{background-image:radial-gradient(circle at 10% 10%,#6366f114 0%,#0000 50%),radial-gradient(circle at 90% 12%,#ec48990f 0%,#0000 50%),radial-gradient(circle,#06b6d40f 0%,#0000 60%),radial-gradient(circle at 85% 85%,#f59e0b0f 0%,#0000 50%)}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--primary)}.app-container{flex-direction:column;min-height:100vh;display:flex}.main-content{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:1.5rem 2rem 4rem}.navbar{z-index:100;-webkit-backdrop-filter:blur(16px);background:var(--bg-glass);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:.85rem 2rem;display:flex;position:sticky;top:0}.nav-left{align-items:center;gap:1.25rem;display:flex}.brand-logo{color:var(--text-main);letter-spacing:-.02em;align-items:center;gap:.65rem;font-size:1.25rem;font-weight:800;text-decoration:none;display:flex}.brand-icon{border-radius:var(--radius-md);color:#fff;background:linear-gradient(135deg,#6366f1 0%,#4338ca 100%);justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 0 15px #6366f166}.brand-badge{border-radius:var(--radius-full);color:#a5b4fc;text-transform:uppercase;letter-spacing:.05em;background:#6366f126;border:1px solid #6366f14d;padding:.15rem .5rem;font-size:.7rem;font-weight:600}.role-switcher-container{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-full);align-items:center;padding:.25rem;display:flex}.role-btn{border-radius:var(--radius-full);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;align-items:center;gap:.45rem;padding:.4rem 1rem;font-size:.85rem;font-weight:600;display:flex}.role-btn:hover{color:var(--text-main)}.role-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px #6366f166}.nav-right{align-items:center;gap:1rem;display:flex}.user-badge{border-radius:var(--radius-full);background:var(--bg-elevated);border:1px solid var(--border-subtle);align-items:center;gap:.75rem;padding:.35rem .75rem;display:flex}.user-avatar{border-radius:var(--radius-full);color:#fff;background:linear-gradient(135deg,#06b6d4,#3b82f6);justify-content:center;align-items:center;width:32px;height:32px;font-size:.85rem;font-weight:700;display:flex}.user-avatar.lecturer{background:linear-gradient(135deg,#ec4899,#8b5cf6)}.user-info{flex-direction:column;display:flex}.user-name{color:var(--text-main);font-size:.825rem;font-weight:600;line-height:1.2}.user-role-label{color:var(--text-dim);font-size:.7rem}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.15rem;font-size:.875rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);color:#fff;box-shadow:0 4px 14px #6366f159}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f180}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-main);border:1px solid var(--border-subtle)}.btn-secondary:hover{background:var(--bg-glass-hover);border-color:var(--border-strong)}.btn-success{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 4px 14px #10b98159}.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 20px #10b98180}.btn-acc{color:#fff;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);font-weight:700;animation:2s ease-in-out infinite pulse-soft;box-shadow:0 4px 16px #f59e0b59}.btn-acc:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 25px #f59e0b80}.btn-sm{border-radius:var(--radius-sm);padding:.35rem .75rem;font-size:.775rem}.btn-icon{border-radius:var(--radius-md);justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:inline-flex}.card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:all var(--transition-normal);padding:1.5rem;position:relative;overflow:hidden}.card:hover{border-color:var(--border-strong)}.card-glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle)}.glow-accent{background:linear-gradient(90deg, transparent, var(--primary), transparent);height:2px;position:absolute;top:0;left:0;right:0}.milestone-container{border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:linear-gradient(135deg,#1e293b99 0%,#0f172acc 100%);margin-bottom:2rem;padding:1.75rem 2rem;position:relative;overflow:hidden}.milestone-header{justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;display:flex}.milestone-title-wrap{align-items:center;gap:.75rem;display:flex}.milestone-title{letter-spacing:-.02em;background:linear-gradient(135deg,#fff 0%,#cbd5e1 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.35rem;font-weight:800}.streak-pill{border-radius:var(--radius-full);color:#fbbf24;background:#f59e0b26;border:1px solid #f59e0b4d;align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.775rem;font-weight:700;display:flex}.milestone-steps{grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem;display:grid;position:relative}.milestone-step{text-align:center;flex-direction:column;align-items:center;display:flex;position:relative}.step-circle{border-radius:var(--radius-full);background:var(--bg-tertiary);border:2px solid var(--border-strong);width:44px;height:44px;color:var(--text-dim);z-index:2;transition:all var(--transition-normal);justify-content:center;align-items:center;margin-bottom:.75rem;font-size:.9rem;font-weight:700;display:flex}.milestone-step.completed .step-circle{background:var(--success);color:#fff;box-shadow:0 0 15px var(--success-glow);border-color:#34d399}.milestone-step.active .step-circle{background:var(--primary);color:#fff;box-shadow:0 0 20px var(--primary-glow);border-color:#818cf8;animation:2s infinite pulse-ring;transform:scale(1.1)}.step-label{color:var(--text-main);margin-bottom:.2rem;font-size:.825rem;font-weight:700}.step-desc{color:var(--text-muted);font-size:.725rem}.progress-bar-bg{border-radius:var(--radius-full);background:#ffffff14;width:100%;height:6px;margin-bottom:1.5rem;overflow:hidden}.progress-bar-fill{border-radius:var(--radius-full);background:linear-gradient(90deg,#6366f1 0%,#06b6d4 50%,#10b981 100%);height:100%;transition:width .8s cubic-bezier(.16,1,.3,1)}.kanban-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;gap:1.25rem;display:grid}.kanban-column{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:#11182799;flex-direction:column;gap:1rem;padding:1.15rem;display:flex}.kanban-col-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding-bottom:.65rem;display:flex}.kanban-col-title{color:var(--text-main);align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;display:flex}.kanban-count{border-radius:var(--radius-full);background:var(--bg-tertiary);color:var(--text-muted);padding:.15rem .5rem;font-size:.75rem;font-weight:700}.student-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);flex-direction:column;gap:.75rem;padding:1rem;display:flex}.student-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 20px #0000004d}.student-card-header{align-items:center;gap:.65rem;display:flex}.student-avatar{border-radius:var(--radius-full);color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1);justify-content:center;align-items:center;width:34px;height:34px;font-size:.8rem;font-weight:700;display:flex}.student-name-box{flex:1;overflow:hidden}.student-name{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:700;overflow:hidden}.student-nim{color:var(--text-dim);font-size:.725rem;font-family:var(--font-mono)}.student-title-snippet{color:var(--text-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.8rem;line-height:1.4;display:-webkit-box;overflow:hidden}.student-meta{border-top:1px solid var(--border-subtle);color:var(--text-dim);justify-content:space-between;align-items:center;padding-top:.5rem;font-size:.725rem;display:flex}.activity-badge{border-radius:var(--radius-full);align-items:center;gap:.35rem;padding:.15rem .45rem;font-size:.7rem;font-weight:600;display:inline-flex}.activity-badge.active{color:#34d399;background:#10b98126}.activity-badge.idle{color:#fbbf24;background:#f59e0b26}.activity-badge.stagnant{color:#fb7185;background:#f43f5e26}.modal-overlay{z-index:200;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000bf;justify-content:center;align-items:center;padding:1.5rem;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:var(--radius-xl);flex-direction:column;width:100%;max-width:1000px;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #000000b3}.modal-header{border-bottom:1px solid var(--border-subtle);background:var(--bg-tertiary);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-body{flex:1;padding:1.5rem;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-subtle);background:var(--bg-tertiary);justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.5rem;display:flex}.ai-summary-box{border-radius:var(--radius-lg);background:linear-gradient(135deg,#6366f11a 0%,#06b6d414 100%);border:1px solid #6366f140;margin-bottom:1.5rem;padding:1.25rem;position:relative}.ai-badge{border-radius:var(--radius-full);color:#fff;letter-spacing:.04em;background:linear-gradient(135deg,#6366f1,#8b5cf6);align-items:center;gap:.35rem;margin-bottom:.75rem;padding:.2rem .55rem;font-size:.725rem;font-weight:700;display:inline-flex}.voice-recorder-bar{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1rem 1.25rem;display:flex}.voice-waveform{align-items:center;gap:4px;height:28px;display:flex}.wave-bar{background:var(--primary);border-radius:var(--radius-full);width:3px;height:6px;transition:height .1s}.recording .wave-bar{animation:1.2s ease-in-out infinite soundWave}.wave-bar:nth-child(2){animation-delay:.1s}.wave-bar:nth-child(3){animation-delay:.2s}.wave-bar:nth-child(4){animation-delay:.3s}.wave-bar:nth-child(5){animation-delay:.4s}.wave-bar:nth-child(6){animation-delay:.2s}.wave-bar:nth-child(7){animation-delay:.1s}.checklist-item{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);align-items:flex-start;gap:.85rem;margin-bottom:.65rem;padding:.85rem 1rem;display:flex}.checklist-item:hover{border-color:var(--border-strong);background:var(--bg-elevated)}.checklist-item.done{opacity:.6}.checklist-item.done .checklist-text{color:var(--text-dim);text-decoration:line-through}.custom-checkbox{border:2px solid var(--border-strong);cursor:pointer;width:20px;height:20px;transition:all var(--transition-fast);background:0 0;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;display:flex}.custom-checkbox.checked{background:var(--success);border-color:var(--success);color:#fff}@keyframes pulse-ring{0%{box-shadow:0 0 #6366f166}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@keyframes pulse-soft{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes soundWave{0%,to{height:6px}50%{height:26px}}@media (width<=900px){.milestone-steps{grid-template-columns:repeat(2,1fr);gap:1.5rem}.main-content{padding:1rem 1rem 3rem}.navbar{padding:.75rem 1rem}}