*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #060d1a;--surface: #0a1525;--card: #0f1e35;--card2: #132440;--border: #1b304f;--border2: #254470;--teal: #00c8e0;--teal-dim: #0099b0;--teal-glow: rgba(0,200,224,.18);--gold: #ffc847;--gold-dim: #d49a00;--gold-glow: rgba(255,200,71,.18);--white: #e4f2fd;--muted: #6b8fb8;--danger: #f06565;--success: #4fc97e;--warning: #ffaa40;--font-h: "Sora", sans-serif;--font-b: "Nunito", sans-serif;--r: 12px;--r-sm: 8px}body{background:var(--bg);color:var(--white);font-family:var(--font-b);min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 60% 40% at 15% 60%,rgba(0,180,210,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 50% at 85% 30%,rgba(255,200,71,.04) 0%,transparent 70%);pointer-events:none;z-index:0}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}.app-wrap{display:flex;min-height:100vh;position:relative;z-index:1}.sidebar{width:236px;min-height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;overflow-y:auto;flex-shrink:0}.sb-logo{padding:22px 18px 20px;border-bottom:1px solid var(--border)}.sb-logo-title{font-family:var(--font-h);font-size:18px;font-weight:800;color:var(--teal);letter-spacing:-.3px;display:flex;align-items:center;gap:8px}.sb-logo-sub{font-size:10.5px;color:var(--muted);margin-top:3px;letter-spacing:.2px}.sb-nav{padding:12px 10px;flex:1}.sb-section-label{font-size:9.5px;font-weight:700;letter-spacing:1.8px;color:var(--muted);text-transform:uppercase;padding:12px 8px 5px}.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted);border:1px solid transparent;margin-bottom:2px;transition:all .15s;-webkit-user-select:none;user-select:none}.nav-item:hover{background:var(--card);color:var(--white)}.nav-item.active{background:#00c8e01a;color:var(--teal);border-color:#00c8e038}.nav-item .ni{font-size:17px;flex-shrink:0}.sb-footer{padding:14px 18px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);line-height:1.6}.main-content{margin-left:236px;flex:1;padding:36px 40px;min-height:100vh}.page-hdr{margin-bottom:28px}.page-hdr-top{display:flex;align-items:flex-start;gap:14px}.page-hdr-icon{font-size:36px;line-height:1;margin-top:2px}.page-hdr h2{font-family:var(--font-h);font-size:26px;font-weight:700;color:var(--white);letter-spacing:-.5px;line-height:1.2}.page-hdr p{color:var(--muted);font-size:14px;margin-top:4px;line-height:1.5}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px}.card-sm{padding:16px}.card-glass{background:#0f1e35b3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--r);padding:24px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 20px;border-radius:var(--r-sm);font-family:var(--font-b);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;border:1px solid transparent;white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-teal{background:var(--teal);color:#001820;border-color:var(--teal)}.btn-teal:hover:not(:disabled){background:#00ddf8;box-shadow:0 0 18px var(--teal-glow)}.btn-gold{background:var(--gold);color:#1a0f00;border-color:var(--gold)}.btn-gold:hover:not(:disabled){background:#ffd76a;box-shadow:0 0 18px var(--gold-glow)}.btn-outline{background:transparent;border-color:var(--border2);color:var(--muted)}.btn-outline:hover:not(:disabled){border-color:var(--teal);color:var(--teal);background:var(--teal-glow)}.btn-danger{background:#f065651f;border-color:#f065654d;color:var(--danger)}.btn-danger:hover:not(:disabled){background:#f0656538}.btn-success{background:#4fc97e26;border-color:#4fc97e59;color:var(--success)}.btn-success:hover:not(:disabled){background:#4fc97e40}.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn-ghost:hover:not(:disabled){color:var(--white);background:var(--card2)}.btn-sm{padding:6px 14px;font-size:13px;gap:5px}.btn-lg{padding:12px 28px;font-size:15px;gap:9px}.btn-xl{padding:14px 36px;font-size:16px;font-weight:800;gap:10px}.btn-block{width:100%}.form-group{margin-bottom:18px}.form-label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:7px;text-transform:uppercase;letter-spacing:.8px}input[type=text],input[type=number],textarea,select{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;color:var(--white);font-family:var(--font-b);font-size:14px;transition:border-color .15s,box-shadow .15s;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px #00c8e01a}input::placeholder,textarea::placeholder{color:var(--border2)}textarea{resize:vertical;min-height:80px;line-height:1.6}select option{background:var(--card)}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.3px}.badge-teal{background:#00c8e026;color:var(--teal);border:1px solid rgba(0,200,224,.25)}.badge-gold{background:#ffc84726;color:var(--gold);border:1px solid rgba(255,200,71,.25)}.badge-muted{background:#6b8fb81f;color:var(--muted);border:1px solid var(--border)}.badge-success{background:#4fc97e1f;color:var(--success);border:1px solid rgba(79,201,126,.25)}.badge-danger{background:#f065651f;color:var(--danger);border:1px solid rgba(240,101,101,.25)}.divider{border:none;border-top:1px solid var(--border);margin:20px 0}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-gap{display:flex;align-items:center;gap:10px}.flex-wrap{display:flex;flex-wrap:wrap;gap:10px}.glow-teal{box-shadow:0 0 24px var(--teal-glow);border-color:#00c8e066!important}.glow-gold{box-shadow:0 0 24px var(--gold-glow);border-color:#ffc84766!important}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes countDown{0%{stroke-dashoffset:0}to{stroke-dashoffset:251}}@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes waveFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.anim-fade-up{animation:fadeUp .35s ease forwards}.anim-pop{animation:pop .3s ease forwards}.anim-spin{animation:spin 1s linear infinite}.anim-pulse{animation:pulse 1.5s ease infinite}.anim-float{animation:waveFloat 3s ease-in-out infinite}.phase-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;flex-shrink:0}.phase-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.phase-setup{background:#6b8fb826;color:var(--muted);border:1px solid var(--border)}.phase-active{background:#00c8e026;color:var(--teal);border:1px solid rgba(0,200,224,.3)}.phase-results{background:#ffc84726;color:var(--gold);border:1px solid rgba(255,200,71,.3)}.phase-dot-active{background:var(--teal);animation:pulse 1s infinite}.phase-dot-results{background:var(--gold)}.phase-dot-setup{background:var(--muted)}.progress-bar-wrap{background:var(--surface);border-radius:99px;height:10px;overflow:hidden;border:1px solid var(--border)}.progress-bar-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(90deg,var(--teal-dim),var(--teal))}.progress-bar-fill.gold{background:linear-gradient(90deg,var(--gold-dim),var(--gold))}.progress-bar-fill.danger{background:linear-gradient(90deg,#c0392b,var(--danger))}.timer-ring{position:relative;display:inline-block}.timer-ring svg{transform:rotate(-90deg)}.timer-ring-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700}.display-big{font-family:var(--font-h);font-size:clamp(20px,3vw,32px);font-weight:700;line-height:1.4;color:var(--white);text-align:center}.present-mode{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:1000;display:flex;flex-direction:column;padding:40px;overflow-y:auto}.present-close{position:fixed;top:16px;right:20px;z-index:1001}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.tool-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),transparent);opacity:0;transition:opacity .2s}.tool-card:hover{border-color:var(--border2);background:var(--card2);transform:translateY(-2px);box-shadow:0 8px 28px #00000059}.tool-card:hover:before{opacity:1}.tool-card-icon{font-size:32px;margin-bottom:12px}.tool-card-title{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--white);margin-bottom:6px}.tool-card-desc{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px}.tool-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.tool-card-tags span{font-size:10.5px;padding:3px 9px;border-radius:20px;background:#6b8fb81a;color:var(--muted);border:1px solid var(--border);font-weight:600}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}.stat-chip{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center}.stat-chip-num{font-family:var(--font-h);font-size:28px;font-weight:800;color:var(--teal);line-height:1}.stat-chip-label{font-size:11px;color:var(--muted);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.option-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:10px;position:relative;overflow:hidden;transition:all .2s;cursor:default}.option-row.clickable{cursor:pointer}.option-row.clickable:hover{border-color:var(--teal);background:#00c8e00d}.option-row-bar{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(0,200,224,.12),transparent);transform-origin:left;transition:width .5s cubic-bezier(.34,1.3,.64,1);border-radius:var(--r-sm)}.option-row-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}.option-row-text{font-weight:600;font-size:14px}.option-row-votes{display:flex;align-items:center;gap:8px}.option-pct{font-family:var(--font-h);font-size:20px;font-weight:800;color:var(--teal);min-width:54px;text-align:right}.option-count{font-size:12px;color:var(--muted)}.word-cloud-area{min-height:200px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;padding:24px;background:var(--surface);border-radius:var(--r);border:1px solid var(--border)}.cloud-word{cursor:default;font-family:var(--font-h);font-weight:700;transition:transform .2s;line-height:1.1;animation:pop .3s ease}.cloud-word:hover{transform:scale(1.1)}.quiz-option-btn{width:100%;text-align:left;background:var(--surface);border:2px solid var(--border);border-radius:var(--r-sm);padding:14px 18px;font-family:var(--font-b);font-size:14px;font-weight:600;color:var(--white);cursor:pointer;transition:all .15s;margin-bottom:10px;display:flex;align-items:center;gap:12px}.quiz-option-btn:hover:not(:disabled){border-color:var(--teal);background:#00c8e00f}.quiz-option-btn.correct{border-color:var(--success);background:#4fc97e1f;color:var(--success)}.quiz-option-btn.wrong{border-color:var(--danger);background:#f065651f;color:var(--danger)}.quiz-option-btn.revealed{border-color:var(--success);background:#4fc97e14}.quiz-opt-letter{width:28px;height:28px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;font-family:var(--font-h)}.quiz-option-btn.correct .quiz-opt-letter{background:var(--success);color:#001a08}.quiz-option-btn.wrong .quiz-opt-letter{background:var(--danger);color:#1a0000}.quiz-option-btn.revealed .quiz-opt-letter{background:var(--success);color:#001a08}.quiz-num-bubble{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#001820;font-size:13px;font-weight:800;font-family:var(--font-h);flex-shrink:0}.omp-prompt-card{background:linear-gradient(135deg,#00c8e01a,#00c8e008);border:1px solid rgba(0,200,224,.25);border-radius:var(--r);padding:28px;margin-bottom:16px}.omp-prompt-num{font-family:var(--font-h);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);margin-bottom:10px}.omp-prompt-text{font-family:var(--font-h);font-size:clamp(16px,2.5vw,22px);font-weight:700;line-height:1.4;color:var(--white)}.opinion-col{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;text-align:center;transition:all .2s}.opinion-col.setuju{border-top:3px solid var(--success)}.opinion-col.netral{border-top:3px solid var(--muted)}.opinion-col.tidak{border-top:3px solid var(--danger)}.opinion-col-count{font-family:var(--font-h);font-size:48px;font-weight:800;line-height:1;margin:10px 0}.opinion-col.setuju .opinion-col-count{color:var(--success)}.opinion-col.netral .opinion-col-count{color:var(--muted)}.opinion-col.tidak .opinion-col-count{color:var(--danger)}.opinion-label{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.8px}.opinion-col.setuju .opinion-label{color:var(--success)}.opinion-col.netral .opinion-label{color:var(--muted)}.opinion-col.tidak .opinion-label{color:var(--danger)}.vote-btn-big{flex:1;padding:24px;border-radius:var(--r);font-family:var(--font-h);font-size:20px;font-weight:800;cursor:pointer;transition:all .2s;border:2px solid transparent;display:flex;flex-direction:column;align-items:center;gap:8px}.vote-btn-big.benar{background:#4fc97e1f;border-color:#4fc97e4d;color:var(--success)}.vote-btn-big.benar:hover{background:#4fc97e33;box-shadow:0 0 20px #4fc97e33}.vote-btn-big.salah{background:#f065651f;border-color:#f065654d;color:var(--danger)}.vote-btn-big.salah:hover{background:#f0656533;box-shadow:0 0 20px #f0656533}.vote-btn-big .vote-icon{font-size:36px}.vote-btn-big .vote-count{font-size:36px;line-height:1}.ai-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px;text-align:center}.ai-loading p{color:var(--muted);font-size:14px}.case-card{background:linear-gradient(135deg,#ffc84714,#ffc84705);border:1px solid rgba(255,200,71,.22);border-radius:var(--r);padding:28px}.case-scenario{font-size:15px;line-height:1.8;color:var(--white);margin-bottom:20px}.discussion-prompt{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--surface);border-radius:var(--r-sm);border:1px solid var(--border);margin-bottom:8px;font-size:14px;color:var(--muted);line-height:1.6}.discussion-prompt .dp-num{background:var(--gold);color:#1a0f00;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.reveal-box{background:linear-gradient(135deg,#4fc97e1a,#4fc97e08);border:1px solid rgba(79,201,126,.3);border-radius:var(--r);padding:20px;animation:pop .4s ease}.reveal-box.wrong-reveal{background:linear-gradient(135deg,#f065651a,#f0656508);border-color:#f065654d}.toast{position:fixed;bottom:24px;right:24px;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r);padding:12px 18px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;z-index:9999;animation:fadeUp .3s ease;box-shadow:0 8px 24px #00000080}.text-teal{color:var(--teal)}.text-gold{color:var(--gold)}.text-muted{color:var(--muted)}.text-danger{color:var(--danger)}.text-success{color:var(--success)}.text-center{text-align:center}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.fw-700{font-weight:700}.fw-800{font-weight:800}.fs-h{font-family:var(--font-h)}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-16{font-size:16px}.mobile-header{display:none}@media (max-width: 900px){.mobile-header{display:flex;position:fixed;top:0;left:0;right:0;height:56px;background:var(--surface);border-bottom:1px solid var(--border);align-items:center;justify-content:space-between;padding:0 16px;z-index:200}.sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;transform:translate(-100%);transition:transform .25s ease;z-index:300}.sidebar.open{transform:translate(0)}.main-content{margin-left:0;padding:80px 16px 24px}.grid-2,.grid-3{grid-template-columns:1fr}.stat-row{grid-template-columns:1fr 1fr}.tool-grid{grid-template-columns:1fr}}