*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f6f8fb;color:#1e293b}h1{margin:0;font-size:48px}h2{margin:0}h3{margin-bottom:20px}p{color:#64748b;line-height:1.6}button{padding:10px 18px;border:none;border-radius:12px;cursor:pointer;font-weight:600;transition:.2s ease}button:hover{transform:translateY(-2px);opacity:.9}.container{max-width:1000px;margin:0 auto;padding:60px 20px}.card-base{background:#fff;border-radius:18px;box-shadow:0 6px 16px #0000000f}.btn-base{padding:8px 14px;border:none;border-radius:10px;cursor:pointer;font-weight:600}.flash{background:#e0e7ff;color:#3730a3}.quiz{background:#dcfce7;color:#065f46}.essay{background:#fef3c7;color:#92400e}.no-top-gap{padding-top:20px}.nav-auth{min-width:260px;display:flex;justify-content:flex-end}.language-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(15,23,42,.08);border-radius:999px;background:#0f172a0f}.language-switch button{padding:7px 11px;border:none;border-radius:999px;background:transparent;color:#64748b;font-size:.76rem;font-weight:600;cursor:pointer;transition:all .2s ease}.language-switch button:hover{color:#4f46e5;background:#ffffffb3}.language-switch button.active{color:#4f46e5;background:#ffffffe6;box-shadow:0 6px 16px #0f172a1f}.hero{margin-bottom:50px}.hero p{margin-top:10px;font-size:18px}.recommendation-header{display:flex;justify-content:space-between;align-items:center}.recommendation-message{margin-top:-8px;margin-bottom:12px;font-size:14px}.update-btn{margin-bottom:20px;padding:8px 16px;border:none;border-radius:20px;background:#eef2f7;cursor:pointer}.recommendations{margin-top:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.recommend-card{padding:20px;display:flex;align-items:center;gap:15px}.recommend-card-button{width:100%;border:none;text-align:left;cursor:pointer}.recommend-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:700}.recommend-icon.blue{background:#e0e7ff}.recommend-icon.green{background:#dcfce7}.recommend-icon.orange{background:#fef3c7}.recommend-content h4{margin:4px 0 6px}.recommend-content p{margin:0;font-size:14px}.recommend-empty{grid-column:1 / -1;padding:24px}.difficulty-panel{margin-bottom:18px;padding:24px;display:flex;justify-content:space-between;align-items:center;gap:24px}.difficulty-panel h3{margin:0 0 8px}.difficulty-panel p{margin:0;font-size:14px}.difficulty-panel-text{max-width:360px}.difficulty-options{display:flex;flex-wrap:wrap;gap:12px}.difficulty-option{min-width:135px;padding:14px 18px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc;text-align:left;cursor:pointer;transition:.2s ease}.difficulty-option:hover{transform:translateY(-2px);box-shadow:0 6px 14px #0f172a14}.difficulty-option strong{display:block;margin-bottom:4px;color:#1e293b}.difficulty-option span{color:#64748b;font-size:13px}.difficulty-option.active{background:#e0e7ff;border-color:#6366f1;box-shadow:0 6px 14px #6366f12e}.selected-difficulty-note{margin-bottom:35px;color:#64748b;font-size:14px}.selected-difficulty-note strong{color:#1e293b}.difficulty-badge{display:inline-block;width:fit-content;margin-top:8px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}.difficulty-badge.easy{background:#dcfce7;color:#166534}.difficulty-badge.medium{background:#fef3c7;color:#92400e}.difficulty-badge.hard{background:#fee2e2;color:#991b1b}.chapter-header{margin-top:40px;display:flex;justify-content:space-between;align-items:center;font-size:20px}.chapters{margin-top:40px;margin-bottom:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.chapter-card{padding:30px}.chapter-card-header{margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.chapter-card-header .difficulty-badge{margin-top:0}.chapter-top{color:#6366f1;font-size:14px;font-weight:700}.chapter-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}.button1{background:#e0e7ff}.button2{background:#dcfce7}.button3{background:#fef3c7}.quiz-page{max-width:1100px;margin:0 auto;padding:10px}.quiz-header{margin-bottom:50px;text-align:center}.quiz-section{margin-bottom:50px}.section-title{margin-bottom:20px;font-size:20px;font-weight:600}.quiz-list{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}.quiz-card{position:relative;padding:30px}.quiz-card h3{padding-right:100px}.quiz-card .difficulty-badge{position:absolute;top:18px;right:18px;margin-top:0}.quiz-btn{margin-top:15px;background:#4f46e5;color:#fff}.quiz-btn:hover{background-color:#4338ca}.text-area-karangan{width:100%}.text-area-karangan textarea{width:100%;height:200px;margin-bottom:40px;padding:15px;border:1px solid #e5e7eb;border-radius:12px;font-size:16px;resize:vertical}.text-area-bina-ayat textarea{width:100%;height:45px;padding:10px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;resize:none}.text-area-pemahaman textarea{width:100%;height:100px;padding:12px;border:1px solid #e5e7eb;border-radius:12px;font-size:16px;resize:vertical}.text-input-kesalahan{width:100%;max-width:500px;margin-top:5px;padding:10px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;resize:none}.select-wrapper{width:100%;display:flex;justify-content:flex-start}.styled-select{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background-color:#f9fafb;font-size:16px;transition:border-color .2s,box-shadow .2s}.styled-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.essay-image{width:100%;border-radius:12px}.highlight-isi{padding:4px 8px;border-radius:6px;background:#fef3c7;font-weight:600}.dashboard-header{margin-top:10px;margin-bottom:20px;font-size:15px}.dashboard-top-grid{margin-bottom:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.dashboard-top-card{padding:25px;display:flex;align-items:center;gap:20px}.dashboard-icon{width:55px;height:55px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px}.dashboard-icon.purple{background:#e0e7ff}.dashboard-icon.green{background:#dcfce7}.dashboard-icon.gray{background:#f1f5f9}.dashboard-label{margin:0;color:#64748b;font-size:14px}.dashboard-subtext{margin:6px 0 0;font-size:13px}.dashboard-section-head{margin-bottom:22px;display:flex;justify-content:space-between;align-items:center;gap:20px}.dashboard-section-head span{color:#64748b;font-size:14px}.dashboard-bottom-grid{margin-top:24px;margin-bottom:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.dashboard-info-card{padding:24px}.dashboard-info-card h3{margin-top:0;margin-bottom:14px}.performance-panel{padding:30px}.performance-panel h2{margin-bottom:30px}.performance-placeholder{height:250px;border:2px dashed #e2e8f0;border-radius:12px;background:#f8fafc;display:flex;align-items:center;justify-content:center;color:#94a3b8}.trend-chart-shell{padding:18px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}.trend-chart-wrap{position:relative}.trend-chart-svg{width:100%;height:260px;display:block}.trend-grid-line{stroke:#dbe4ef;stroke-width:1}.trend-line{fill:none;stroke:#4f46e5;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.trend-dot{fill:#4f46e5}.trend-dot-hit-area{fill:transparent;cursor:pointer;outline:none}.trend-dot-hit-area:hover+.trend-dot,.trend-dot-hit-area:focus+.trend-dot{r:7}.trend-axis-label{fill:#64748b;font-size:12px}.trend-tooltip{position:absolute;z-index:2;min-width:170px;max-width:240px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;border:1px solid #dbe4ef;border-radius:12px;background:#fff;box-shadow:0 12px 28px #0f172a24;color:#1e293b;pointer-events:none;transform:translate(-50%,calc(-100% - 12px))}.trend-tooltip span,.trend-tooltip small{color:#64748b;font-size:12px}.trend-legend{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.trend-legend-item{padding:12px;display:flex;flex-direction:column;gap:4px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.trend-legend-item span{color:#64748b;font-size:13px}.ai-chatbar{position:fixed;bottom:20px;left:50%;z-index:1000;width:600px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 10px 30px #0000001a;display:flex;align-items:center;gap:10px;transform:translate(-50%)}.ai-chatbar input{flex:1;padding:10px;border:none;outline:none;font-size:14px}.ai-chatbar button{padding:8px 16px;border:none;border-radius:10px;background:#4f46e5;color:#fff;cursor:pointer}.ai-chatbar button:hover{opacity:.9}.ai-chat-panel{position:fixed;top:10%;right:-430px;z-index:1001;width:380px;height:80%;padding:1rem;background:#fff;box-shadow:-5px 0 20px #00000026;border-radius:12px;display:flex;flex-direction:column;transition:right .3s ease-in-out;box-sizing:border-box;overflow:hidden}.ai-chat-panel.open{right:20px}.ai-chat-header{margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;font-weight:700;color:#111827}.ai-chat-close{width:48px;height:48px;border:none;border-radius:16px;background:#eee;color:#000;font-size:20px;font-weight:700;cursor:pointer}.ai-chat-close:hover{background:#e5e7eb}.ai-chat-messages{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;padding-right:4px}.ai-chat-message{max-width:85%;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.45;box-shadow:0 1px 3px #0000001a;overflow-wrap:break-word;word-break:break-word;box-sizing:border-box}.ai-chat-message.user{align-self:flex-end;background:#4f46e5;color:#fff}.ai-chat-message.ai{align-self:flex-start;background:#f3f4f6;color:#111827}.ai-chat-markdown{color:inherit;max-width:100%;overflow-wrap:break-word;word-break:break-word}.ai-chat-markdown p{margin:4px 0;color:inherit}.ai-chat-markdown strong{color:inherit;font-weight:700}.ai-chat-markdown ul,.ai-chat-markdown ol{margin:4px 0;padding-left:18px}.ai-chat-markdown ul ul,.ai-chat-markdown ol ol,.ai-chat-markdown ul ol,.ai-chat-markdown ol ul{margin:2px 0;padding-left:14px}.ai-chat-markdown li{margin:2px 0;padding-left:0;color:inherit;line-height:1.35}.ai-chat-markdown li p{margin:2px 0}.ai-chat-markdown h1,.ai-chat-markdown h2,.ai-chat-markdown h3,.ai-chat-markdown h4{margin:8px 0 6px;color:inherit;line-height:1.25}.ai-chat-markdown code{white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word}.ai-typing{margin:0;font-size:12px;color:#64748b}.ai-agent-actions{margin-top:10px;display:flex;flex-direction:column;gap:8px}.ai-agent-action-btn{width:100%;padding:8px 10px;border:1px solid #c7d2fe;border-radius:10px;background:#eef2ff;color:#3730a3;font-size:13px;font-weight:700;text-align:left;cursor:pointer;transition:background-color .2s ease,transform .2s ease}.ai-agent-action-btn:hover{background:#e0e7ff;transform:translateY(-1px);opacity:1}.login-page-shell{position:fixed;inset:0;z-index:9999;padding:24px;background:#f8fafc;display:flex;align-items:center;justify-content:center}.login-card{width:100%;max-width:505px;padding:42px 56px 38px;border:1px solid #dfe5ec;border-radius:8px;background:#fff;box-shadow:0 12px 32px #0f172a0a}.login-header{margin-bottom:52px}.login-header p{margin:0 0 8px;color:#9ca3af;font-size:16px;font-weight:600}.login-header h1{margin:0;color:#2b3040;font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-1.3px}.login-form{display:flex;flex-direction:column;gap:0}.login-input{width:100%;height:52px;padding:0 14px;border:1px solid #dce2e8;border-radius:7px;outline:none;background:#fff;color:#2b3040;font-size:15px;font-weight:500;transition:border-color .2s ease,box-shadow .2s ease}.login-input::placeholder{color:#9ca3af}.login-input:focus{border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f61f}.login-row{margin-top:-8px;display:flex;align-items:center;justify-content:space-between;gap:16px}.remember-label{display:inline-flex;align-items:center;gap:8px;color:#374151;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer}.remember-label input{width:16px;height:16px;accent-color:#3b82f6;cursor:pointer}.forgot-button,.signup-link{padding:0;border:none;background:transparent;color:#3b82f6;font-size:14px;font-weight:600;text-decoration:underline;cursor:pointer}.primary-login-button{width:100%;height:52px;margin-top:22px;border:none;border-radius:7px;background:#3b82f6;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.primary-login-button:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 10px 22px #2563eb33}.primary-login-button:active{transform:translateY(0);box-shadow:none}.google-button-wrap{width:100%;min-height:46px;margin-top:28px;border-radius:7px;display:flex;justify-content:center}.google-button-slot{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center}.login-status{margin:14px 0 0;color:#64748b;font-size:14px;text-align:center}.login-error{width:100%;color:red;font-size:12px}.login-modal-error{margin-top:14px;padding:10px 12px;border-radius:7px;background:#fef2f2;color:#dc2626;font-size:13px;font-weight:500;text-align:center}.signup-text{margin:18px 0 0;color:#9ca3af;font-size:14px;font-weight:600;text-align:center}.login-modal-overlay{position:fixed;inset:0;z-index:9999;padding:24px;background:#0f172a94;display:flex;align-items:center;justify-content:center}@media(max-width:900px){.dashboard-top-grid,.dashboard-bottom-grid{grid-template-columns:1fr}.dashboard-section-head,.difficulty-panel{flex-direction:column;align-items:flex-start}.difficulty-options{width:100%}.difficulty-option{flex:1}}@media(max-width:768px){.navbar-inner{flex-wrap:wrap;gap:12px}.nav-right{width:100%;justify-content:space-between}.language-switch{order:1}.nav-auth{order:2}}@media(max-width:600px){h1{font-size:36px}.recommendations,.chapters,.quiz-list{grid-template-columns:1fr}.difficulty-options{flex-direction:column}.difficulty-option{width:100%}.chapter-card-header{align-items:flex-start;gap:10px}}@media(max-width:640px){.ai-chatbar{left:12px;right:12px;bottom:12px;width:auto;transform:none}.ai-chat-panel{top:12px;right:-100%;bottom:84px;width:calc(100vw - 24px);height:auto;max-height:calc(100vh - 110px)}.ai-chat-panel.open{right:12px}.ai-chat-message{max-width:92%}.ai-chat-markdown ul,.ai-chat-markdown ol{padding-left:16px}.ai-chat-markdown ul ul,.ai-chat-markdown ol ol,.ai-chat-markdown ul ol,.ai-chat-markdown ol ul{padding-left:12px}}@media(max-width:560px){.login-page-shell{padding:16px}.login-card{padding:34px 24px 30px}.login-header{margin-bottom:36px}.login-header h1{font-size:32px}.login-row{flex-direction:column;align-items:flex-start;gap:10px}.primary-login-button{margin-top:12px}}.navbar{width:100%;background:#fff;border-bottom:1px solid #e5e7eb}.navbar-inner{max-width:1010px;margin:0 auto;padding:18px 20px;display:flex;justify-content:space-between;align-items:center}.logo a{display:flex;align-items:center;color:#111827;font-size:20px;font-weight:700;text-decoration:none}.logo-img{height:30px;margin-right:10px;border-radius:8px}.nav-center{display:flex;gap:10px;padding:6px;background:#eef2f7;border-radius:30px}.nav-center a{padding:8px 20px;border-radius:20px;color:#475569;text-decoration:none;cursor:pointer}.nav-center .active{background:#fff;box-shadow:0 2px 6px #00000014}.nav-right{display:flex;align-items:center;gap:14px}.nav-auth{min-width:96px;display:flex;justify-content:flex-end}.login-btn,.logout-btn{padding:10px 14px;border:none;border-radius:10px;cursor:pointer;font-weight:600}.user-box{display:flex;align-items:center;gap:10px}.profile-avatar-img,.profile-avatar-fallback{width:40px;height:40px;border-radius:50%;flex:0 0 auto}.profile-avatar-img{object-fit:cover;display:block;border:2px solid #ffffff;box-shadow:0 4px 14px #0f172a2e}.profile-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4f46e5,#06b6d4);color:#fff;font-size:16px;font-weight:700;-webkit-user-select:none;user-select:none;box-shadow:0 4px 14px #0f172a2e}.logout-icon-btn{width:40px;height:40px;padding:0;border:none;border-radius:50%;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:#64748b;cursor:pointer;transition:color .2s ease,background-color .2s ease,transform .2s ease}.logout-icon-btn:hover{color:#dc2626;background-color:#fee2e2;transform:translateY(-2px)}.logout-svg{width:22px;height:22px;display:block}.profile-avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4f46e5,#06b6d4);color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;box-shadow:0 4px 12px #4f46e538;-webkit-user-select:none;user-select:none}.logout-icon-btn{width:38px;height:38px;padding:0;border:none;border-radius:50%;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:#64748b;cursor:pointer;transition:color .2s ease,background .2s ease,transform .2s ease}.logout-icon-btn:hover{color:#dc2626;background:#fee2e2;opacity:1;transform:translateY(-2px)}.logout-icon{width:22px;height:22px;display:block;background:currentColor;mask:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAmCAYAAACsyDmTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAI3SURBVFhH7ZbfS1NhHIef7cw5f6Rti1aWQYZBTihSc0EhKYY3GoVX/XFdeC1Y0C8C0SQIK2VQtLrRmuZ00+PcznS6zXWxNjgv297j1tSL88B7cb7fzznn4T3ve3gt2Ww2yynCKhZOGlNIhikkwxSSYTHyH1KjGh8WfhCKREmnM4V6nU3h0XAfHnerLl8NhoQmpt4TTyRxnW3GUW8v1O02hYH+LpobHbp8NUiF9pIHPJucwdnaxNPRe2L7vyNdQ/lP1OCoF1slUaMa6o4mlg0hFaqEV7OLTL6dZz0SFVtSaiJ023uVVCrNi+kvrK6rYrssNRHydrYzcKeLdDrDy5kFfq9tipGS1EQIoPt6TiqTOeT1zCLLK2ExUhTpLotre0w8n6PN4+LxcF+hHopE8X9f1mWLsRPfZSuaW+A93R34bnWKER0Vz1AovM3SSlg68jIAwbWI7hnFqHiGADa3Y7prkeT+AdMfv6ElkridZ3jysB97nU2M6ah4hgDOOVtKjqYGB7PzAbTEPm3nXYyP+KQyVCtUir3kAVPvPrET3+XyBTdjQ73YFEWMFaUmQm/m/GzHEnRc8TA62IOiGH+N8eQRcLY0cePaJUbu38RqtYjtssiFLP8eWH7t63jg8zJ4txtL/t4jIBVqdOSOGxE1xlJwgz8bamFE1PK7rBKk2x5g7nOArz+DYhmAsaFe2i+6xXLFGBIC8Ad+sRraIpU5LNRO5IB23EjX0HFjCskwhWSYQjJMIRmnTugvZVTl8CFNvV8AAAAASUVORK5CYII=) center / contain no-repeat;-webkit-mask:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAmCAYAAACsyDmTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAI3SURBVFhH7ZbfS1NhHIef7cw5f6Rti1aWQYZBTihSc0EhKYY3GoVX/XFdeC1Y0C8C0SQIK2VQtLrRmuZ00+PcznS6zXWxNjgv297j1tSL88B7cb7fzznn4T3ve3gt2Ww2yynCKhZOGlNIhikkwxSSYTHyH1KjGh8WfhCKREmnM4V6nU3h0XAfHnerLl8NhoQmpt4TTyRxnW3GUW8v1O02hYH+LpobHbp8NUiF9pIHPJucwdnaxNPRe2L7vyNdQ/lP1OCoF1slUaMa6o4mlg0hFaqEV7OLTL6dZz0SFVtSaiJ023uVVCrNi+kvrK6rYrssNRHydrYzcKeLdDrDy5kFfq9tipGS1EQIoPt6TiqTOeT1zCLLK2ExUhTpLotre0w8n6PN4+LxcF+hHopE8X9f1mWLsRPfZSuaW+A93R34bnWKER0Vz1AovM3SSlg68jIAwbWI7hnFqHiGADa3Y7prkeT+AdMfv6ElkridZ3jysB97nU2M6ah4hgDOOVtKjqYGB7PzAbTEPm3nXYyP+KQyVCtUir3kAVPvPrET3+XyBTdjQ73YFEWMFaUmQm/m/GzHEnRc8TA62IOiGH+N8eQRcLY0cePaJUbu38RqtYjtssiFLP8eWH7t63jg8zJ4txtL/t4jIBVqdOSOGxE1xlJwgz8bamFE1PK7rBKk2x5g7nOArz+DYhmAsaFe2i+6xXLFGBIC8Ad+sRraIpU5LNRO5IB23EjX0HFjCskwhWSYQjJMIRmnTugvZVTl8CFNvV8AAAAASUVORK5CYII=) center / contain no-repeat}.practice-question-text{margin:16px 0 18px;color:#526b8a;font-size:16px;font-weight:400;line-height:1.6;white-space:pre-line}.practice-question-text strong{font-weight:600}.latihan-highlight-word{color:#4f46e5;font-weight:700}