body{margin:0;font-family:Arial,sans-serif;background:#f7f9fc}.container{max-width:900px;margin:auto;padding:20px}.header{position:relative;text-align:center;margin-bottom:20px}.header-buttons{position:absolute;top:10px;right:20px;display:flex;gap:10px}.card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 8px #0000001a;margin-bottom:30px}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.feature{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 6px #0000001a;text-align:center;cursor:pointer;transition:transform .2s}.feature:hover{transform:translateY(-4px);background:#f0faff}.auth-container{display:flex;justify-content:center;align-items:center;height:100vh;background:#f7f9fc}.auth-card{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 8px #0000001a;width:100%;max-width:400px;display:flex;flex-direction:column;gap:15px}.auth-card h2{text-align:center;margin-bottom:10px}.auth-card input{padding:10px;font-size:16px;border:1px solid #ccc;border-radius:8px}.auth-card button{background:#007bff;color:#fff;padding:10px;font-size:16px;border:none;border-radius:8px;cursor:pointer}.auth-card button:hover{background:#0056b3}.top-right-buttons{position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:1000}.profile-btn,.logout-btn{padding:8px 14px;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:background .2s;white-space:nowrap}.profile-btn{background-color:#3498db;color:#fff}.profile-btn:hover{background-color:#2980b9}.logout-btn{background-color:#e74c3c;color:#fff}.logout-btn:hover{background-color:#c0392b}@media (max-width: 600px){.header-buttons{top:8px;right:8px;flex-direction:column;gap:6px}}.profile-container{min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#e0f7fa,#fff);padding:20px}.profile-card{background:#fff;border-radius:16px;padding:30px;width:100%;max-width:400px;text-align:center;box-shadow:0 4px 12px #00000026;transition:transform .2s}.profile-card:hover{transform:translateY(-3px)}.profile-card h2{font-size:22px;margin-bottom:20px;color:#333}.profile-card p{font-size:16px;margin:8px 0;color:#555}.back-btn{margin-top:20px;background:#3498db;color:#fff;padding:10px 18px;border:none;border-radius:8px;font-size:15px;cursor:pointer;transition:background .2s,transform .2s}.back-btn:hover{background:#2980b9;transform:scale(1.05)}.progress-bar{width:100%;height:20px;background-color:#e5e7eb;border-radius:12px;overflow:hidden;margin-bottom:8px;box-shadow:inset 0 2px 4px #0000001a}.progress-bar-inner{height:100%;border-radius:12px;width:0;transition:width 1.2s ease-in-out}.progress-write{background:linear-gradient(90deg,#4caf50,#81c784)}.progress-read{background:linear-gradient(90deg,#2196f3,#64b5f6)}.wp-container{display:flex;flex-direction:column;align-items:center;padding:16px;gap:16px}.wp-topbar{width:100%;display:flex;justify-content:flex-start}.wp-back-btn{background:linear-gradient(90deg,#3498db,#2980b9);border:none;color:#fff;padding:8px 14px;border-radius:8px;font-weight:700;cursor:pointer}.wp-back-btn:hover{opacity:.9}.wp-card{width:100%;max-width:600px;background:#fff;border-radius:14px;box-shadow:0 4px 12px #00000014;padding:20px;text-align:center}.wp-title{margin-bottom:10px;color:#2c3e50}.wp-description{font-size:14px;color:#555;margin-bottom:16px}.wp-mode-selector{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.wp-btn{padding:10px 16px;border:none;border-radius:8px;background:#e0e0e0;cursor:pointer;transition:all .25s}.wp-btn:hover{background:#d5d5d5}.wp-btn.active,.wp-btn.primary{background:#27ae60;color:#fff}.wp-btn.secondary{background:#bdc3c7;color:#2c3e50}.wp-btn-group{display:flex;justify-content:center;gap:12px;margin-top:12px}.wp-upload-btn{display:inline-block;background:#3498db;color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer}.wp-filename,.wp-loading{margin-top:10px;font-size:14px;color:#555}.wp-video{width:100%;border-radius:12px;background:#000;margin-top:10px}.wp-result{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.wp-result-info{text-align:left}.wp-pass{color:#27ae60;font-weight:700}.wp-fail{color:#e74c3c;font-weight:700}.wp-circle{width:120px;height:120px}.wp-circle svg{width:100%;height:100%;transform:rotate(-90deg)}.wp-bg{fill:none;stroke:#eee;stroke-width:3}.wp-bar{fill:none;stroke:#27ae60;stroke-width:3;stroke-linecap:round}.wp-feedback{margin-top:16px;text-align:left;background:#fafafa;padding:10px;border-radius:8px}.readpractice-container{max-width:700px;margin:0 auto;padding:20px;position:relative}.readpractice-container .back-btn{position:absolute;top:10px;right:10px;background:#4cafef;color:#fff;border:none;padding:8px 14px;border-radius:20px;font-size:14px;cursor:pointer;transition:.3s}.readpractice-container .back-btn:hover{background:#3a8edb}.readpractice-card{background:#fff;padding:18px;margin-top:45px;border-radius:14px;box-shadow:0 4px 12px #00000014;text-align:center}.readpractice-card h3,.readpractice-card h4{margin:0 0 10px;color:#333}.recorder-card{margin-top:20px}.recorder-actions{display:flex;justify-content:center;gap:12px;margin-top:12px}.readpractice-card .btn{padding:10px 20px;border:none;border-radius:12px;cursor:pointer;font-size:14px;background:#4caf50;color:#fff;transition:.3s}.readpractice-card .btn:hover{background:#45a049}.readpractice-card .btn.secondary{background:#f44336}.readpractice-card .btn.secondary:hover{background:#d7382c}.loading-text{margin-top:12px;font-size:13px;color:#555;font-style:italic}.tab-buttons{display:flex;gap:10px;margin:20px 0}.tab-buttons button{padding:8px 16px;margin:0 5px;border:none;border-radius:6px;cursor:pointer}.tab-buttons .active{background:#3498db;color:#fff}.chapter-card{margin:12px 0;padding:12px;border:1px solid #eee;border-radius:8px;background:#fafafa}textarea{width:100%;height:100px;border-radius:8px;border:1px solid #ccc;padding:10px;font-size:15px;resize:none;margin-bottom:10px}button{background-color:#2ecc71;color:#fff;padding:8px 16px;border:none;border-radius:6px;cursor:pointer}button:hover{background-color:#27ae60}.answer-box{background:#f7f9fa;padding:12px;border-radius:8px;margin-top:10px}.camera-viewport-container{position:relative;width:100%;border-radius:8px;overflow:hidden}.wp-video{width:100%;height:auto;display:block;border-radius:8px}.cropping-guide-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;pointer-events:none}.cropping-line{height:35%;width:90%;margin:0 auto;border:3px dashed #FFF;background:#0000004d;box-shadow:0 0 0 9999px #000000b3}.wp-btn-group.camera-controls{position:static;width:100%;display:flex;justify-content:center;gap:12px;margin-top:20px;transform:none;z-index:auto;bottom:auto;left:auto}.chapter-card-konten{background:#fff;border-radius:10px;box-shadow:0 4px 8px #0000001a;padding:15px;margin-bottom:15px;transition:transform .2s}.chapter-card-konten:hover{transform:scale(1.02)}.pdf-viewer canvas{border-radius:12px;box-shadow:0 4px 10px #0003;margin:10px auto}