: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}*{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:#fff;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}.avatar-btn:hover{background:var(--primary-dark)}.profile-avatar{margin:0 auto;width:72px;height:72px;font-size:1.8em}.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:#fff;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 #E5E7EB;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}.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}.notif-card{background:#f9fafb;border:1px solid #E5E7EB;border-left:4px solid var(--primary);border-radius:8px;padding:14px;margin-top:12px;text-align:left}.card{background:#fff;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:#fff}.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:#fff;color:var(--danger-dark);border:1px solid var(--danger)}.btn-danger-outline:hover{background:#fef2f2}.btn-warn-outline{background:#fff;color:#b45309;border:1px solid var(--warning)}.btn-warn-outline:hover{background:#fffbeb}.button-group{display:flex;justify-content:space-between;margin-top:10px}.role-picker{display:flex;gap:10px}.btn-role{flex:1;background:#fff;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:#fff;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:#f9fafb}.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:#f9fafb;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:#fff;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:#e5e7eb}.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:#fff;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:#fff;box-shadow:0 4px 6px #0000001a;border-radius:8px;overflow:hidden}th,td{padding:12px;text-align:left;border-bottom:1px solid #E5E7EB}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:#fff;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:#f3f4f6;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:#fff;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 #E5E7EB;padding-top:15px;text-align:left}.parent-row{display:flex;justify-content:space-between;align-items:center;background:#f9fafb;border:1px solid #E5E7EB;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}}