:root{--primary: #10B981;--primary-dark: #059669;--primary-light: #D1FAE5;--danger: #EF4444;--danger-dark: #DC2626;--info: #3B82F6;--info-dark: #2563EB;--warning: #F59E0B;--bg: #F3F4F6;--text: #1F2937;--text-muted: #6B7280;--border: #D1D5DB;--card: #FFFFFF;--card-2: #F9FAFB;--line: #E5E7EB}[data-theme=dark]{--primary-dark: #34D399;--primary-light: #064E3B;--bg: #0F172A;--text: #E5E7EB;--text-muted: #94A3B8;--border: #334155;--card: #1E293B;--card-2: #273449;--line: #334155}[data-theme=dark] .msg-info{background:#172554;color:#93c5fd;border-color:#1e3a8a}[data-theme=dark] .msg-error{background:#450a0a;color:#fca5a5}[data-theme=dark] .msg-success{background:#064e3b;color:#6ee7b7}[data-theme=dark] .pengesahan-box{background-color:#172554;border-color:#1e3a8a}[data-theme=dark] .badge-student{background:#064e3b;color:#6ee7b7}[data-theme=dark] .badge-parent{background:#172554;color:#93c5fd}[data-theme=dark] .badge-admin{background:#451a03;color:#fcd34d}[data-theme=dark] .badge-banned{background:#450a0a;color:#fca5a5}[data-theme=dark] .btn-role.active{background:#064e3b;color:#6ee7b7}[data-theme=dark] .live-box{background-color:#064e3b}*{box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg);color:var(--text);margin:0;min-height:100vh}#root{display:flex;flex-direction:column;align-items:center;padding:20px}.app-header{width:100%;max-width:800px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}.app-header h1{color:var(--primary-dark);margin:0;font-size:1.5em}.app-header .user-info{font-size:.85em;color:var(--text-muted)}.hamburger{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:4px;cursor:pointer}.hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px}.avatar-btn,.profile-avatar{width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:1.1em;display:flex;align-items:center;justify-content:center;border:none;padding:0}.avatar-btn{cursor:pointer;flex-shrink:0}.header-name{font-weight:600;color:var(--text);text-align:right;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 400px){.header-name{max-width:100px}}.avatar-btn:hover{background:var(--primary-dark)}.profile-avatar{margin:0 auto;width:72px;height:72px;font-size:1.8em}.avatar-img{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block}.avatar-wrap{position:relative;width:72px;margin:0 auto}.avatar-wrap .profile-avatar-img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block}.avatar-edit{position:absolute;bottom:-2px;right:-6px;width:30px;height:30px;border-radius:50%;background:var(--card);border:1px solid var(--border);box-shadow:0 2px 4px #00000026;font-size:.8em;padding:0;display:flex;align-items:center;justify-content:center}.avatar-edit:hover{background:var(--bg)}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px}.avatar-option{background:var(--card);border:2px solid var(--border);border-radius:12px;padding:6px;display:flex;align-items:center;justify-content:center}.avatar-option img{width:56px;height:56px;border-radius:50%;object-fit:cover}.avatar-option:hover{border-color:var(--primary)}.avatar-option.selected{border-color:var(--primary);background:var(--primary-light)}.drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:40}.drawer{position:fixed;top:0;left:-290px;width:280px;height:100vh;background:var(--card);box-shadow:4px 0 12px #00000026;z-index:50;display:flex;flex-direction:column;transition:left .25s ease;padding:20px 14px}.drawer.open{left:0}.drawer-profile{display:flex;align-items:center;gap:12px;padding:6px 8px 20px;border-bottom:1px solid var(--line);margin-bottom:12px;text-align:left}.drawer-profile .profile-avatar{margin:0}.drawer-sub{font-size:.8em;color:var(--text-muted)}.drawer-item{background:none;color:var(--text);text-align:left;padding:12px 14px;border-radius:8px;font-size:1em;font-weight:400;margin-bottom:4px}.drawer-item:hover{background:var(--bg)}.drawer-item.active{background:var(--primary-light);color:var(--primary-dark);font-weight:700}.theme-picker{padding:10px 8px;border-top:1px solid var(--line);margin-bottom:6px}.theme-icons{display:flex;gap:8px;justify-content:center}.btn-theme-icon{width:44px;height:44px;border-radius:50%;background:var(--card);border:2px solid var(--border);font-size:1.15em;padding:0;display:flex;align-items:center;justify-content:center}.btn-theme-icon:hover{border-color:var(--primary)}.btn-theme-icon.active{border-color:var(--primary);background:var(--primary-light)}.drawer-logout{color:var(--danger-dark)}.drawer-logout:hover{background:#fef2f2}.hamburger{position:relative}.notif-dot{position:absolute;top:6px;right:6px;width:9px!important;height:9px!important;border-radius:50%;background:var(--danger)!important;animation:pulse 1.5s infinite}.notif-count{display:inline-block;margin-left:8px;background:var(--danger);color:#fff;border-radius:10px;padding:1px 8px;font-size:.75em;font-weight:700}.dlg-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.dlg-box{background:var(--card);border-radius:14px;box-shadow:0 10px 30px #00000040;width:100%;max-width:380px;overflow:hidden;animation:dlgPop .15s ease-out}@keyframes dlgPop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.dlg-header{background:var(--primary);color:#fff;font-weight:700;font-size:1.05em;padding:12px 18px}.dlg-body{padding:18px;font-size:.95em;text-align:left}.dlg-input{margin-top:12px;width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;font-size:1em}.dlg-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 16px}.dlg-btn{padding:9px 22px;font-size:.95em;border-radius:8px}.dlg-btn-primary{background:var(--primary)}.dlg-btn-primary:hover{background:var(--primary-dark)}.dlg-btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--border)}.dlg-btn-secondary:hover{background:var(--bg)}.notif-card{background:var(--card-2);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:8px;padding:14px;margin-top:12px;text-align:left}.card{background:var(--card);padding:30px;border-radius:12px;box-shadow:0 4px 6px #0000001a;width:100%;max-width:500px;text-align:center;margin-bottom:20px}.card-wide{max-width:800px;text-align:left}h1.brand{color:var(--primary-dark);margin-bottom:5px}p.subtitle{color:var(--text-muted);margin-bottom:25px;font-size:.9em}.form-group{margin-bottom:15px;text-align:left}label{display:block;font-weight:700;margin-bottom:5px}select,input{width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;font-size:1em;background:var(--card);color:var(--text)}.timer-display{font-size:3.5em;font-weight:700;margin:20px 0;color:var(--text);font-variant-numeric:tabular-nums}.timer-display.live{color:var(--primary-dark)}button{padding:12px 24px;font-size:1.1em;font-weight:700;border:none;border-radius:6px;cursor:pointer;color:#fff;transition:.2s}button:disabled{opacity:.5;cursor:not-allowed}.btn-half{width:48%}.btn-full{width:100%}.btn-start{background-color:var(--primary)}.btn-start:hover:not(:disabled){background-color:var(--primary-dark)}.btn-stop{background-color:var(--danger)}.btn-stop:hover:not(:disabled){background-color:var(--danger-dark)}.btn-save{background-color:var(--info);margin-top:10px}.btn-save:hover{background-color:var(--info-dark)}.btn-link-text{background:none;color:var(--info-dark);font-size:.9em;font-weight:400;text-decoration:underline;padding:4px}.btn-small{padding:6px 12px;font-size:.85em;border-radius:6px}.btn-danger-outline{background:var(--card);color:var(--danger-dark);border:1px solid var(--danger)}.btn-danger-outline:hover{background:#fef2f2}.btn-warn-outline{background:var(--card);color:#b45309;border:1px solid var(--warning)}.btn-warn-outline:hover{background:#fffbeb}.btn-info-outline{background:var(--card);color:var(--info-dark);border:1px solid var(--info)}.btn-info-outline:hover{background:#eff6ff}.row-click{cursor:pointer}.row-click:hover td{background:var(--primary-light)}.button-group{display:flex;justify-content:space-between;margin-top:10px}.role-picker{display:flex;gap:10px}.btn-role{flex:1;background:var(--card);color:var(--text);border:2px solid var(--border);padding:12px;font-size:.95em;font-weight:400}.btn-role.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark);font-weight:700}.btn-google{background:var(--card);color:var(--text);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:10px;font-size:1em}.btn-google:hover:not(:disabled){background:var(--card-2)}.divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--text-muted);font-size:.85em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.pengesahan-box{background-color:#eff6ff;border:1px solid #BFDBFE;padding:15px;border-radius:8px;margin-top:20px}.pengesahan-box h3{margin-top:0;color:var(--info-dark)}.live-box{background-color:var(--primary-light);border:1px solid var(--primary);padding:20px;border-radius:8px;margin-top:10px}.idle-box{background-color:var(--card-2);border:1px dashed var(--border);padding:20px;border-radius:8px;margin-top:10px;color:var(--text-muted)}.history-section{margin-top:40px;width:100%;max-width:800px}.history-section h2{text-align:center;color:var(--text)}.filter-container{display:flex;gap:10px;margin-bottom:15px;justify-content:center;flex-wrap:wrap}.btn-filter{background-color:var(--card);color:var(--text);border:1px solid var(--border);padding:8px 16px;font-size:.9em;border-radius:20px;font-weight:400}.btn-filter:hover{background-color:var(--line)}.btn-filter.active{background-color:var(--primary);color:#fff;border-color:var(--primary);font-weight:700}.filter-select{width:auto;padding:8px 14px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-size:.9em;cursor:pointer}.filter-select:focus{outline:2px solid var(--primary-light)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;background:var(--card);box-shadow:0 4px 6px #0000001a;border-radius:8px;overflow:hidden}th,td{padding:12px;text-align:left;border-bottom:1px solid var(--line)}th{background-color:var(--primary);color:#fff}td .target{color:var(--primary-dark);font-weight:700}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-bottom:20px}.stat-card{background:var(--card);border-radius:12px;padding:20px;box-shadow:0 4px 6px #0000001a;text-align:center}.stat-card .value{font-size:2.2em;font-weight:700;color:var(--primary-dark);font-variant-numeric:tabular-nums}.stat-card .label{color:var(--text-muted);font-size:.85em}.badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:.75em;font-weight:700}.badge-student{background:var(--primary-light);color:var(--primary-dark)}.badge-parent{background:#eff6ff;color:var(--info-dark)}.badge-admin{background:#fef3c7;color:#b45309}.badge-banned{background:#fee2e2;color:var(--danger-dark)}.badge-waktu{background:var(--card-2);color:var(--text-muted);border:1px solid var(--border)}.badge-live{background:var(--danger);color:#fff;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.msg{padding:10px 14px;border-radius:8px;margin:10px 0;font-size:.9em;text-align:left}.msg-error{background:#fee2e2;color:var(--danger-dark)}.msg-success{background:var(--primary-light);color:var(--primary-dark)}.msg-info{background:#eff6ff;color:var(--info-dark)}.tab-row{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.btn-tab{background:var(--card);color:var(--text);border:1px solid var(--border);padding:8px 18px;font-size:.9em;border-radius:8px;font-weight:400}.btn-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700}.link-parent-box{margin-top:25px;border-top:1px solid var(--line);padding-top:15px;text-align:left}.parent-row{display:flex;justify-content:space-between;align-items:center;background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:10px}.parent-row .parent-email{color:var(--text-muted);font-size:.85em}@media (max-width: 560px){#root{padding:12px}.card{padding:20px}.timer-display{font-size:2.6em}th,td{padding:8px;font-size:.85em}}