:root{--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--border-radius-sm: 8px;--border-radius-md: 14px;--border-radius-lg: 24px;--color-primary: hsl(262, 83%, 58%);--color-primary-light: hsl(262, 83%, 68%);--color-secondary: hsl(291, 70%, 50%);--accent-gradient: linear-gradient(135deg, var(--color-primary), var(--color-secondary));--accent-gradient-hover: linear-gradient(135deg, var(--color-primary-light), hsl(291, 70%, 60%));--color-success: hsl(142, 71%, 45%);--color-danger: hsl(350, 89%, 60%);--color-warning: hsl(38, 92%, 50%);--color-info: hsl(200, 95%, 48%);--bg-primary: hsl(222, 47%, 6%);--bg-secondary: hsl(223, 47%, 10%);--bg-tertiary: hsl(222, 40%, 15%);--text-primary: hsl(210, 40%, 98%);--text-secondary: hsl(215, 20%, 65%);--text-tertiary: hsl(215, 15%, 45%);--glass-bg: rgba(13, 20, 38, .6);--glass-border: rgba(255, 255, 255, .08);--glass-glow: rgba(124, 58, 237, .15);--card-shadow: 0 8px 32px 0 rgba(0, 0, 0, .5);--input-bg: rgba(7, 11, 22, .5);--input-border: rgba(255, 255, 255, .12);--input-focus-shadow: rgba(124, 58, 237, .3);--scrollbar-track: hsl(222, 47%, 8%);--scrollbar-thumb: hsl(222, 20%, 25%);--scrollbar-thumb-hover: hsl(262, 83%, 58%);--divider-color: rgba(255, 255, 255, .08);--card-header-icon: hsl(262, 83%, 68%)}body.light-mode{--bg-primary: hsl(210, 40%, 95%);--bg-secondary: hsl(0, 0%, 100%);--bg-tertiary: hsl(210, 40%, 90%);--text-primary: hsl(222, 47%, 12%);--text-secondary: hsl(215, 20%, 40%);--text-tertiary: hsl(215, 12%, 55%);--glass-bg: rgba(255, 255, 255, .75);--glass-border: rgba(0, 0, 0, .08);--glass-glow: rgba(124, 58, 237, .08);--card-shadow: 0 12px 40px 0 rgba(31, 38, 135, .08);--input-bg: hsl(210, 40%, 98%);--input-border: rgba(0, 0, 0, .12);--input-focus-shadow: rgba(124, 58, 237, .15);--scrollbar-track: hsl(210, 40%, 93%);--scrollbar-thumb: hsl(210, 10%, 80%);--scrollbar-thumb-hover: hsl(262, 83%, 58%);--divider-color: rgba(0, 0, 0, .06);--card-header-icon: hsl(262, 83%, 58%)}*{margin:0;padding:0;box-content:border-box;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;transition:background-color var(--transition-normal),color var(--transition-normal)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;letter-spacing:-.02em}.scrollbar-custom::-webkit-scrollbar{width:8px;height:8px}.scrollbar-custom::-webkit-scrollbar-track{background:var(--scrollbar-track)}.scrollbar-custom::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}.scrollbar-custom::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.lucide{width:20px;height:20px;stroke-width:2px;vertical-align:middle}.app-container{display:flex;flex-direction:column;width:100vw;max-width:1600px;margin:0 auto;min-height:100vh;padding:0 24px 24px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:20px 0 16px;border-bottom:1px solid var(--divider-color);margin-bottom:24px}.header-logo{display:flex;align-items:center;gap:12px}.logo-icon{background:var(--accent-gradient);color:#fff;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px #7c3aed66;animation:logo-float 4s ease-in-out infinite alternate}@keyframes logo-float{0%{transform:translateY(0)}to{transform:translateY(-4px)}}.logo-icon i{width:22px;height:22px}.logo-text h1{font-size:1.5rem;line-height:1.1;font-weight:800}.logo-text h1 span{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.logo-text p{font-size:.8rem;color:var(--text-secondary)}.header-actions{display:flex;align-items:center;gap:12px}.icon-btn{background:var(--bg-secondary);border:1px solid var(--glass-border);color:var(--text-primary);width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all var(--transition-fast)}.icon-btn:hover{background:var(--bg-tertiary);transform:translateY(-2px);border-color:var(--color-primary);box-shadow:0 4px 12px #7c3aed26}body.dark-mode .sun-icon{display:block}body.dark-mode .moon-icon,body.light-mode .sun-icon{display:none}body.light-mode .moon-icon{display:block}.api-status-badge{position:absolute;bottom:-6px;right:-6px;font-size:.55rem;font-weight:800;padding:2px 6px;border-radius:6px;letter-spacing:.05em;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 6px #0003}.api-status-badge.active{background:var(--color-success);color:#fff}.api-status-badge.inactive{background:var(--color-warning);color:#fff}.app-main{display:grid;grid-template-columns:380px 1fr;gap:24px;flex:1;min-height:0}@media (max-width: 992px){.app-main{grid-template-columns:1fr}}.card{border-radius:var(--border-radius-lg);border:1px solid var(--glass-border);box-shadow:var(--card-shadow);transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.glass-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:relative;overflow:hidden}.glass-card:before{content:"";position:absolute;top:0;left:0;right:0;height:200px;background:radial-gradient(circle at 50% 0%,var(--glass-glow),transparent 70%);pointer-events:none}.card-header{padding:20px 24px;border-bottom:1px solid var(--divider-color);display:flex;align-items:center;gap:12px}.card-header h2{font-size:1.15rem;font-weight:600;color:var(--text-primary)}.card-header i{color:var(--card-header-icon)}.form-card{height:fit-content}.menu-tabs{display:flex;background:var(--input-bg);border-bottom:1px solid var(--divider-color);padding:6px 12px;gap:8px}.menu-tab-btn{flex:1;background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-heading);font-size:.85rem;font-weight:700;padding:10px 14px;border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition-fast)}.menu-tab-btn i{width:16px;height:16px;transition:transform var(--transition-fast)}.menu-tab-btn:hover{color:var(--text-primary);background:#ffffff08}.menu-tab-btn:hover i{transform:scale(1.1)}.menu-tab-btn.active{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 12px #7c3aed40}.label-with-btn{display:flex;justify-content:space-between;align-items:center;width:100%}.text-action-btn{background:transparent;border:none;color:var(--color-primary-light);font-size:.72rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all var(--transition-fast);padding:2px 6px;border-radius:4px}.text-action-btn:hover{color:#fff;background:#7c3aed26;transform:translateY(-.5px)}.text-action-btn i{width:12px;height:12px}.form-row-2{display:grid;grid-template-columns:1fr;gap:16px;width:100%}@media (min-width: 576px){.form-row-2{grid-template-columns:1fr 1fr}}.menu-fields-group{display:flex;flex-direction:column;gap:20px}.soal-info-box{background:#7c3aed0a;border:1px solid rgba(124,58,237,.15);border-radius:var(--border-radius-md);padding:14px;display:flex;gap:12px;align-items:flex-start}.soal-info-box i{color:var(--color-primary-light);flex-shrink:0;width:20px;height:20px}.soal-info-box h4{font-size:.8rem;font-weight:700;margin-bottom:4px;color:var(--text-primary)}.soal-info-box p{font-size:.72rem;color:var(--text-secondary);line-height:1.4;margin-bottom:0}.form-content{padding:24px;display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{font-size:.85rem;font-weight:600;color:var(--text-secondary);letter-spacing:.01em}.input-wrapper,.select-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:14px;color:var(--text-tertiary);pointer-events:none;transition:color var(--transition-fast)}input[type=text],input[type=number],input[type=password],input[type=email],select{width:100%;padding:14px 16px 14px 44px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-md);color:var(--text-primary);font-size:.9rem;font-family:var(--font-body);transition:all var(--transition-fast);outline:none}select{padding-right:40px;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}select:disabled{opacity:.5;cursor:not-allowed}input[type=text]:focus,input[type=number]:focus,input[type=password]:focus,input[type=email]:focus,select:focus:not(:disabled){border-color:var(--color-primary);background:var(--bg-tertiary);box-shadow:0 0 0 4px var(--input-focus-shadow)}input[type=text]:focus+.input-icon,input[type=number]:focus+.input-icon,input[type=password]:focus+.input-icon,input[type=email]:focus+.input-icon{color:var(--color-primary-light)}.select-arrow{position:absolute;right:14px;color:var(--text-secondary);pointer-events:none}.segmented-control{display:flex;background:var(--input-bg);border:1px solid var(--input-border);padding:4px;border-radius:var(--border-radius-md);position:relative;z-index:1}.segmented-control input[type=radio]{display:none}.segment-label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;font-size:.85rem;font-weight:600;color:var(--text-secondary);cursor:pointer;border-radius:10px;z-index:2;transition:color var(--transition-normal)}.segment-label i{width:16px;height:16px}.segmented-control input[type=radio]:checked+.segment-label{color:#fff}.segment-slider{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--accent-gradient);border-radius:10px;z-index:0;transition:transform var(--transition-normal) cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #7c3aed59}.segmented-control input[type=radio]#outputModul:checked~.segment-slider{transform:translate(0)}.segmented-control input[type=radio]#outputSoal:checked~.segment-slider{transform:translate(100%)}.quick-pills{display:flex;gap:8px;margin-top:4px}.pill-btn{background:#7c3aed0f;border:1px dashed var(--input-border);color:var(--text-secondary);font-size:.75rem;padding:6px 12px;border-radius:20px;cursor:pointer;transition:all var(--transition-fast)}.pill-btn:hover{background:#7c3aed26;border-color:var(--color-primary);color:var(--text-primary)}.submit-btn{background:var(--accent-gradient);border:none;color:#fff;padding:16px;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:700;font-family:var(--font-heading);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 20px #7c3aed59;transition:all var(--transition-fast)}.submit-btn:hover{background:var(--accent-gradient-hover);transform:translateY(-2px);box-shadow:0 6px 24px #7c3aed80}.submit-btn:active{transform:translateY(0)}.submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.submit-btn i{animation:btn-sparkle 3s ease-in-out infinite}@keyframes btn-sparkle{0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}50%{transform:scale(1.15);filter:drop-shadow(0 0 6px rgba(255,255,255,.8))}to{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}}.logo-upload-container{display:flex;align-items:center;gap:12px;width:100%}.logo-upload-label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--input-bg);border:1px dashed var(--input-border);border-radius:var(--border-radius-md);color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);text-align:center}.logo-upload-label:hover{border-color:var(--color-primary);color:var(--text-primary);background:var(--bg-tertiary)}.logo-preview-container{position:relative;width:50px;height:50px;border-radius:var(--border-radius-sm);border:1px solid var(--input-border);overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.logo-preview-container img{max-width:100%;max-height:100%;object-fit:contain}.logo-preview-container button{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;border:none;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;cursor:pointer;transition:opacity var(--transition-fast)}.logo-preview-container:hover button{opacity:1}.logo-preview-container button i{width:16px;height:16px}.section-card{background:#ffffff05;border:1px solid var(--input-border);border-radius:var(--border-radius-md);padding:16px;display:flex;flex-direction:column;gap:14px;position:relative;transition:all var(--transition-normal);text-align:left}.section-card:hover{border-color:#7c3aed4d;box-shadow:0 4px 16px #0003}.section-card-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--divider-color);padding-bottom:8px}.section-card-header h4{font-size:.85rem;font-weight:700;color:var(--color-primary-light);margin-bottom:0}.remove-section-btn{background:transparent;border:none;color:var(--text-tertiary);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.remove-section-btn:hover{color:var(--color-danger);background:#ef44441a}.remove-section-btn i{width:16px;height:16px}.section-card-body{display:flex;flex-direction:column;gap:12px}.checkbox-wrapper{display:flex;align-items:center}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-secondary);cursor:pointer}.checkbox-label input[type=checkbox]{accent-color:var(--color-primary);width:16px;height:16px;cursor:pointer}.kop-surat{display:flex;align-items:center;justify-content:center;border-bottom:3px double var(--text-primary);padding-bottom:12px;margin-bottom:20px;gap:20px}.kop-logo{width:80px;height:80px;object-fit:contain;flex-shrink:0;background:transparent}.kop-detail{text-align:center;flex:1}.kop-detail h2{font-size:1.3rem;font-weight:800;margin:0 0 2px;text-transform:uppercase;color:var(--text-primary)}.kop-detail p{font-size:.85rem;margin:0;color:var(--text-secondary);line-height:1.4}.kop-detail .school-info{font-size:.75rem;font-style:italic;margin-top:4px}.ujian-header-table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:.85rem;border:1px solid var(--divider-color)}.ujian-header-table td{padding:6px 12px;border:1px solid var(--divider-color);vertical-align:middle;color:var(--text-primary)}.ujian-header-table td.label-cell{font-weight:600;width:18%;background:#ffffff05}.ujian-header-table td.value-cell{width:32%}body.light-mode .kop-surat{border-bottom-color:#000}body.light-mode .ujian-header-table td.label-cell{background:#f8f9fa}.output-card{display:flex;flex-direction:column;height:calc(100vh - 120px)}@media (max-width: 992px){.output-card{height:700px}}.output-header{padding:12px 24px;border-bottom:1px solid var(--divider-color);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.tabs{display:flex;gap:6px;background:var(--input-bg);border:1px solid var(--input-border);padding:4px;border-radius:10px}.tab-btn{background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-body);font-size:.8rem;font-weight:600;padding:8px 14px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all var(--transition-fast)}.tab-btn i{width:14px;height:14px}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{background:var(--bg-tertiary);color:var(--text-primary);box-shadow:0 2px 6px #00000026}.output-header .actions{display:flex;gap:10px}.action-btn{background:var(--bg-secondary);border:1px solid var(--glass-border);color:var(--text-primary);padding:8px 16px;border-radius:var(--border-radius-sm);font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all var(--transition-fast)}.action-btn i{width:16px;height:16px;color:var(--text-secondary)}.action-btn:hover{background:var(--bg-tertiary);border-color:var(--color-primary);transform:translateY(-1px)}.action-btn.accent-action{background:var(--accent-gradient);color:#fff;border:none;box-shadow:0 2px 10px #7c3aed40}.action-btn.accent-action:hover{background:var(--accent-gradient-hover);box-shadow:0 4px 14px #7c3aed66}.action-btn.accent-action i{color:#fff}.output-viewport{flex:1;padding:24px;overflow-y:auto;position:relative;display:flex;flex-direction:column}.empty-state{margin:auto;max-width:550px;text-align:center;display:flex;flex-direction:column;align-items:center;padding:20px;position:relative;z-index:1}.empty-glow{position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(124,58,237,.12),transparent 70%);z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%)}.empty-icon-ring{background:#7c3aed14;border:1px solid rgba(124,58,237,.2);width:72px;height:72px;border-radius:24px;display:flex;align-items:center;justify-content:center;color:var(--color-primary-light);margin-bottom:20px;box-shadow:inset 0 0 12px #7c3aed1a}.empty-icon-ring i{width:36px;height:36px}.empty-state h2{font-size:1.4rem;font-weight:700;margin-bottom:12px}.empty-state p{font-size:.9rem;color:var(--text-secondary);line-height:1.6;margin-bottom:32px}.features-grid{display:grid;grid-template-columns:1fr;gap:16px;width:100%;text-align:left;margin-bottom:32px}@media (min-width: 576px){.features-grid{grid-template-columns:repeat(3,1fr)}}.feature-item{background:#ffffff05;border:1px solid var(--glass-border);padding:16px;border-radius:var(--border-radius-md);transition:all var(--transition-fast)}.feature-item:hover{background:#7c3aed0a;border-color:#7c3aed33;transform:translateY(-2px)}.feature-item i{color:var(--color-primary-light);margin-bottom:10px}.feature-item h4{font-size:.85rem;font-weight:700;margin-bottom:6px}.feature-item p{font-size:.72rem;color:var(--text-tertiary);line-height:1.4;margin-bottom:0}.btn-secondary{background:#ffffff0d;border:1px solid var(--glass-border);color:var(--text-primary);padding:10px 20px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all var(--transition-fast)}.btn-secondary:hover{background:#7c3aed1a;border-color:var(--color-primary);transform:translateY(-1px)}.loading-state{margin:auto;max-width:450px;text-align:center;display:flex;flex-direction:column;align-items:center;padding:20px}.loader-spinner{position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.spinner-ring{position:absolute;width:100%;height:100%;border:4px solid rgba(124,58,237,.15);border-top-color:var(--color-primary);border-radius:50%;animation:spinner-spin 1.2s linear infinite}@keyframes spinner-spin{to{transform:rotate(360deg)}}.spinner-icon{color:var(--color-primary-light);width:28px;height:28px;animation:spinner-pulse 1.5s ease-in-out infinite alternate}@keyframes spinner-pulse{0%{transform:scale(.9);opacity:.7}to{transform:scale(1.1);opacity:1}}.loading-state h3{font-size:1.25rem;font-weight:700;margin-bottom:8px}.loading-state p{font-size:.85rem;color:var(--text-secondary);margin-bottom:32px}.stepper{display:flex;flex-direction:column;gap:16px;width:100%;text-align:left}.step{display:flex;align-items:center;gap:14px;opacity:.4;transition:all var(--transition-normal)}.step-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--text-tertiary);display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;transition:all var(--transition-normal)}.step-dot i{width:12px;height:12px;display:none}.step-text{font-size:.85rem;font-weight:500;color:var(--text-secondary)}.step.active{opacity:1}.step.active .step-dot{border-color:var(--color-primary-light);box-shadow:0 0 10px #7c3aed66;background:var(--bg-tertiary)}.step.active .step-text{color:var(--text-primary);font-weight:600}.step.completed{opacity:.85}.step.completed .step-dot{border-color:var(--color-success);background:var(--color-success)}.step.completed .step-dot i{display:block}.step.completed .step-text{color:var(--text-secondary);text-decoration:line-through;opacity:.7}.raw-content{display:flex;flex:1;height:100%}.raw-content textarea{width:100%;height:100%;flex:1;background:#0003;border:1px solid var(--glass-border);border-radius:var(--border-radius-md);padding:16px;color:#a78bfa;font-family:Courier New,Courier,monospace;font-size:.85rem;line-height:1.5;resize:none;outline:none}.document-render{font-size:.95rem;line-height:1.7;color:var(--text-primary);padding-bottom:40px}.markdown-body h1{font-size:1.75rem;font-weight:800;border-bottom:2px solid var(--color-primary);padding-bottom:8px;margin-top:0;margin-bottom:24px;color:var(--text-primary)}.markdown-body h2{font-size:1.35rem;font-weight:700;color:var(--color-primary-light);margin-top:32px;margin-bottom:16px;display:flex;align-items:center;gap:8px;border-left:4px solid var(--color-primary);padding-left:12px}.markdown-body h3{font-size:1.1rem;font-weight:600;margin-top:24px;margin-bottom:12px;color:var(--text-primary)}.markdown-body p{margin-bottom:16px;color:var(--text-secondary)}.markdown-body ul,.markdown-body ol{margin-bottom:20px;padding-left:24px;color:var(--text-secondary)}.markdown-body li{margin-bottom:6px}.markdown-body strong{color:var(--text-primary);font-weight:600}.markdown-body table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:.85rem}.markdown-body th{background:var(--bg-tertiary);font-weight:700;color:var(--text-primary);text-align:left;padding:12px 14px;border:1px solid var(--glass-border)}.markdown-body td{padding:10px 14px;border:1px solid var(--glass-border);color:var(--text-secondary)}.markdown-body tr:nth-child(2n) td{background:#ffffff03}.markdown-body blockquote{border-left:4px solid var(--color-warning);background:#d977060f;padding:12px 16px;margin-bottom:20px;border-radius:0 var(--border-radius-sm) var(--border-radius-sm) 0}.markdown-body blockquote p{margin-bottom:0;font-style:italic;color:var(--text-primary)}.ai-image-container{background:#ffffff05;border:1px solid var(--glass-border);border-radius:var(--border-radius-lg);overflow:hidden;margin:24px auto;max-width:550px;box-shadow:0 4px 20px #00000026;position:relative}.ai-image-container .skeleton-loader{width:100%;aspect-ratio:3 / 2;background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--scrollbar-thumb) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.ai-image-container img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}.ai-image-caption{font-size:.75rem;color:var(--text-tertiary);padding:10px 16px;border-top:1px solid var(--glass-border);background:#0000001a;display:flex;align-items:center;gap:8px}.ai-image-caption i{width:14px;height:14px;color:var(--color-primary-light)}.quiz-card{background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--border-radius-lg);padding:24px;margin-bottom:24px;box-shadow:0 4px 16px #0003;transition:border-color var(--transition-normal)}.quiz-card:hover{border-color:#7c3aed4d}.quiz-question-number{font-size:.8rem;font-weight:800;color:var(--color-primary-light);letter-spacing:.05em;margin-bottom:8px;text-transform:uppercase}.quiz-question-text{font-size:1.05rem;font-weight:600;color:var(--text-primary);margin-bottom:20px;line-height:1.5}.quiz-options{display:flex;flex-direction:column;gap:10px}.quiz-option{background:var(--bg-primary);border:1px solid var(--input-border);padding:12px 16px;border-radius:var(--border-radius-md);font-size:.9rem;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:12px;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.quiz-option:hover{border-color:var(--color-primary-light);background:var(--bg-tertiary);color:var(--text-primary)}.option-badge{background:var(--bg-tertiary);color:var(--text-primary);font-weight:700;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.8rem;border:1px solid var(--glass-border);transition:all var(--transition-fast)}.quiz-option:hover .option-badge{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.quiz-option.correct{background:#10b9811a;border-color:var(--color-success);color:var(--text-primary)}.quiz-option.correct .option-badge{background:var(--color-success);color:#fff;border-color:var(--color-success)}.quiz-option.incorrect{background:#ef44441a;border-color:var(--color-danger);color:var(--text-primary)}.quiz-option.incorrect .option-badge{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.quiz-feedback{margin-top:16px;padding:12px 16px;border-radius:var(--border-radius-md);font-size:.82rem;line-height:1.5;display:flex;gap:10px;animation:slide-down .3s ease-out}.quiz-feedback.success{background:#10b98114;border:1px solid rgba(16,185,129,.2);color:#22c35d}.quiz-feedback.error{background:#ef444414;border:1px solid rgba(239,68,68,.2);color:#eb4763}@keyframes slide-down{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.settings-drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;display:none;justify-content:flex-end;opacity:0;transition:opacity var(--transition-normal)}.settings-drawer{width:100%;max-width:480px;height:100vh;border-radius:0;border-left:1px solid var(--glass-border);display:flex;flex-direction:column;box-shadow:-8px 0 32px #00000080;transform:translate(100%);transition:transform var(--transition-normal) cubic-bezier(.4,0,.2,1)}.settings-drawer-overlay.active{display:flex;opacity:1}.settings-drawer-overlay.active .settings-drawer{transform:translate(0)}.drawer-header{padding:20px 24px;border-bottom:1px solid var(--divider-color);display:flex;justify-content:space-between;align-items:center}.drawer-header .title{display:flex;align-items:center;gap:12px}.drawer-header h2{font-size:1.15rem}.drawer-header i{color:var(--color-primary-light)}.drawer-body{flex:1;padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:28px}.settings-section{display:flex;flex-direction:column;gap:14px}.settings-section h3{font-size:.95rem;font-weight:700;color:var(--text-primary)}.section-desc{font-size:.78rem;color:var(--text-secondary);line-height:1.5}.drawer-divider{border:0;height:1px;background:var(--divider-color)}.api-help-box{background:#7c3aed0a;border:1px solid rgba(124,58,237,.15);border-radius:var(--border-radius-md);padding:14px;display:flex;gap:12px}.api-help-box i{color:var(--color-primary-light);flex-shrink:0}.api-help-box h4{font-size:.8rem;font-weight:700;margin-bottom:4px}.api-help-box p{font-size:.72rem;color:var(--text-secondary);line-height:1.4;margin-bottom:0}.api-help-box a{color:var(--color-primary-light);font-weight:600;text-decoration:none}.api-help-box a:hover{text-decoration:underline}.slider-header{display:flex;justify-content:space-between;align-items:center}.val-info{font-size:.72rem;background:#7c3aed1a;color:var(--color-primary-light);padding:2px 8px;border-radius:6px;font-weight:600}.slider-input{width:100%;accent-color:var(--color-primary);cursor:pointer;margin:6px 0}.slider-desc{font-size:.72rem;color:var(--text-tertiary);line-height:1.4}.toggle-control-wrapper{display:flex;justify-content:space-between;align-items:center;gap:20px}.switch-toggle{position:relative;display:inline-block;width:48px;height:26px;flex-shrink:0}.switch-toggle input{opacity:0;width:0;height:0}.switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-tertiary);border:1px solid var(--input-border);transition:.3s;border-radius:34px}.switch-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--text-secondary);transition:.3s;border-radius:50%}.switch-toggle input:checked+.switch-slider{background-color:var(--color-primary);border-color:var(--color-primary)}.switch-toggle input:checked+.switch-slider:before{transform:translate(22px);background-color:#fff}.drawer-footer{padding:20px 24px;border-top:1px solid var(--divider-color);background:#0000001a}.drawer-footer .btn-primary{width:100%;background:var(--accent-gradient);color:#fff;border:none;padding:14px;border-radius:var(--border-radius-md);font-weight:700;font-size:.9rem;font-family:var(--font-heading);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 14px #7c3aed4d;transition:all var(--transition-fast)}.drawer-footer .btn-primary:hover{background:var(--accent-gradient-hover);transform:translateY(-1px)}.eye-btn{position:absolute;right:14px;background:transparent;border:none;color:var(--text-tertiary);cursor:pointer}.eye-btn:hover{color:var(--text-secondary)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,100px);background:var(--color-success);color:#fff;padding:12px 24px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px #10b9814d;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);z-index:1000}.toast.show{transform:translate(-50%)}@media print{.app-header,.panel-left,.output-header,.settings-drawer-overlay,.toast,.empty-state,.loading-state,.raw-content,.header-actions{display:none!important}body,html{background:#fff!important;color:#000!important;font-size:12pt!important;height:auto!important;overflow:visible!important}.app-container{width:100%!important;max-width:100%!important;padding:0!important;margin:0!important;min-height:0!important}.app-main{display:block!important;width:100%!important;margin:0!important;padding:0!important}.panel-right,.output-card{height:auto!important;border:none!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;display:block!important;overflow:visible!important}.output-viewport{overflow:visible!important;padding:0!important;margin:0!important}.document-render{display:block!important;color:#000!important;padding:0!important}.markdown-body h1{font-size:24pt!important;border-bottom:2pt solid #000!important;margin-bottom:20pt!important;color:#000!important;page-break-after:avoid}.markdown-body h2{font-size:16pt!important;border-left:3pt solid #000!important;margin-top:24pt!important;margin-bottom:12pt!important;color:#000!important;padding-left:8pt!important;page-break-after:avoid;page-break-inside:avoid}.markdown-body h3{font-size:13pt!important;color:#000!important;margin-top:18pt!important;margin-bottom:8pt!important;page-break-after:avoid}.markdown-body p,.markdown-body li{color:#111!important;line-height:1.5!important}.markdown-body table{page-break-inside:avoid}.markdown-body th{background:#f0f0f0!important;color:#000!important;border:1px solid #999!important}.markdown-body td{color:#222!important;border:1px solid #999!important}.quiz-card{background:#fff!important;border:1px solid #bbb!important;color:#000!important;padding:16pt!important;margin-bottom:20pt!important;box-shadow:none!important;page-break-inside:avoid}.quiz-question-number{color:#333!important;font-size:10pt!important}.quiz-question-text{color:#000!important;font-size:11pt!important}.quiz-option{background:#fff!important;border:1px solid #ccc!important;color:#222!important;padding:8pt 12pt!important}.option-badge{background:#e0e0e0!important;color:#000!important;border:1px solid #aaa!important}.quiz-option.correct,.quiz-option.incorrect{background:#fff!important;border-color:#ccc!important;color:#222!important}.quiz-option.correct .option-badge,.quiz-option.incorrect .option-badge{background:#e0e0e0!important;border-color:#aaa!important;color:#000!important}.quiz-feedback,.markdown-body blockquote{display:none!important}.ai-image-container{max-width:4.5in!important;border:1px solid #999!important;box-shadow:none!important;margin:12pt auto!important;page-break-inside:avoid}.ai-image-container .skeleton-loader{display:none!important}.ai-image-container img{opacity:1!important;filter:grayscale(100%) contrast(1.2)}.ai-image-caption{background:#f9f9f9!important;color:#444!important;border-top:1px solid #999!important}.document-render>h1,.document-render>h2{page-break-before:always}.document-render>h1:first-child{page-break-before:avoid}.kop-surat,.kop-detail h2,.kop-detail h3,.kop-detail p,.ujian-header-table-noborder,.ujian-header-table-noborder td,.ujian-identity-table,.ujian-identity-table td,.signature-block-container,.signature-block-container td,.signature-block-container p{color:#000!important}.ujian-identity-table td{border:1px solid #000000!important;background:transparent!important}}.svg-container{display:flex;justify-content:center;align-items:center;background:var(--bg-tertiary);border:1px solid var(--divider-color);border-radius:var(--border-radius-md);padding:16px;margin:20px 0;overflow:hidden;box-shadow:0 4px 12px #00000026;transition:all var(--transition-normal)}.svg-container svg{max-width:100%;height:auto;display:block}body.light-mode .svg-container{background:#f8fafc;box-shadow:0 4px 12px #0000000d}@media print{.svg-container{background:#fff!important;border:1px solid #999999!important;box-shadow:none!important;page-break-inside:avoid}}.ujian-identity-table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:.88rem;color:var(--text-primary)}.ujian-identity-table td{padding:6px 10px;border:1px solid var(--text-secondary);vertical-align:middle;background:transparent;line-height:1.4}.ujian-identity-table td[rowspan]{text-align:center;font-weight:700;font-size:.9rem;vertical-align:middle;letter-spacing:.5px}body.light-mode .ujian-identity-table td{border-color:#555}.header-profile{display:flex;align-items:center;gap:10px;background:#ffffff08;border:1px solid var(--glass-border);padding:4px 10px;border-radius:30px;margin-left:6px;transition:all var(--transition-fast)}body.light-mode .header-profile{background:#00000008}.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;box-shadow:0 0 10px #7c3aed4d}.user-info{display:flex;flex-direction:column}.user-email{font-size:.72rem;font-weight:600;color:var(--text-secondary);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-btn{padding:4px!important;color:var(--text-tertiary)!important;border-radius:50%!important}.logout-btn:hover{background:#ef44441a!important;color:#ef4444!important}.auth-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a0fcc;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;transition:all .35s ease}.auth-card{max-width:440px;width:100%;padding:36px 30px;border-radius:20px;text-align:center;box-shadow:0 20px 50px #00000080;border:1px solid rgba(255,255,255,.08);animation:authFadeScaleIn .4s cubic-bezier(.16,1,.3,1);background:#14141e99}body.light-mode .auth-card{background:#fffc;box-shadow:0 20px 50px #0000001a;border:1px solid rgba(0,0,0,.08)}@keyframes authFadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.auth-header{margin-bottom:24px}.auth-logo-icon{width:52px;height:52px;border-radius:50%;background:#7c3aed1a;color:var(--color-primary-light);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 0 15px #7c3aed33}.auth-header h2{font-family:var(--font-heading);font-size:1.5rem;font-weight:800;margin-bottom:8px}.auth-header h2 span{color:var(--color-primary-light)}.auth-header p{font-size:.8rem;color:var(--text-tertiary);line-height:1.4;margin-bottom:0}.auth-tabs{display:flex;border-bottom:1px solid var(--divider-color);margin-bottom:24px}.auth-tab-btn{flex:1;padding:10px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-tertiary);font-weight:700;font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.auth-tab-btn.active{color:var(--color-primary-light);border-bottom-color:var(--color-primary-light)}.auth-form{display:flex;flex-direction:column;gap:18px;text-align:left}.auth-divider{display:flex;align-items:center;text-align:center;color:var(--text-tertiary);font-size:.75rem;margin:20px 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-bottom:1px solid var(--divider-color)}.auth-divider:before{margin-right:.8em}.auth-divider:after{margin-left:.8em}.quick-login-btn{background:#7c3aed14!important;border:1px solid rgba(124,58,237,.3)!important;color:var(--color-primary-light)!important}.quick-login-btn:hover{background:#7c3aed26!important;border-color:var(--color-primary)!important}.auth-footer{margin-top:15px}.storage-drawer{max-width:480px!important}.storage-info-box{display:flex;gap:12px;padding:12px 14px;border-radius:var(--border-radius-md);background:#7c3aed0d;border:1px solid rgba(124,58,237,.15);margin-bottom:20px;font-size:.78rem;line-height:1.4;color:var(--text-secondary)}.storage-info-box i{color:var(--color-primary-light);flex-shrink:0;width:18px;height:18px;margin-top:1px}.storage-info-box h4{font-weight:700;color:var(--text-primary);margin-bottom:4px}.storage-info-box p{margin:0}.storage-list{display:flex;flex-direction:column;gap:12px}.storage-item{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--border-radius-md);background:#ffffff05;border:1px solid var(--glass-border);transition:all var(--transition-fast)}body.light-mode .storage-item{background:#00000003}.storage-item:hover{background:#7c3aed08;border-color:#7c3aed33;transform:translateY(-1px)}.storage-item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.storage-item-title{font-size:.85rem;font-weight:700;color:var(--text-primary);line-height:1.35;margin:0}.storage-item-badge{font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:700;text-transform:uppercase;flex-shrink:0}.storage-item-badge.soal{background:#7c3aed26;color:var(--color-primary-light);border:1px solid rgba(124,58,237,.25)}.storage-item-badge.perangkat{background:#10b98126;color:#10b981;border:1px solid rgba(16,185,129,.25)}.storage-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:.72rem;color:var(--text-tertiary);margin-top:-2px}.storage-item-meta span{display:flex;align-items:center;gap:4px}.storage-item-meta i{width:12px;height:12px}.storage-item-actions{display:flex;gap:8px;margin-top:6px;border-top:1px solid var(--divider-color);padding-top:10px}.storage-action-btn{padding:6px 12px;font-size:.72rem;font-weight:600;border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;gap:4px;background:transparent;border:1px solid var(--glass-border);color:var(--text-secondary);transition:all var(--transition-fast)}.storage-action-btn:hover{background:#ffffff0d;color:var(--text-primary)}body.light-mode .storage-action-btn:hover{background:#0000000a}.storage-action-btn.download-btn{background:#7c3aed14;border-color:#7c3aed33;color:var(--color-primary-light)}.storage-action-btn.download-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.storage-action-btn.delete-btn:hover{background:#ef44441a;color:#ef4444;border-color:#ef444433}.empty-storage{text-align:center;padding:50px 20px;color:var(--text-tertiary);display:flex;flex-direction:column;align-items:center;gap:12px}.empty-storage i{width:44px;height:44px;opacity:.4;color:var(--text-tertiary)}.empty-storage p{font-size:.8rem;margin:0}.email-sending-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a0fd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:4000;display:flex;align-items:center;justify-content:center;padding:20px}.email-sending-card{max-width:480px;width:100%;padding:40px 30px;border-radius:20px;text-align:center;box-shadow:0 25px 60px #0009;border:1px solid rgba(255,255,255,.08);background:#14141eb3;animation:authFadeScaleIn .4s cubic-bezier(.16,1,.3,1)}body.light-mode .email-sending-card{background:#ffffffe6;box-shadow:0 25px 60px #00000026;border:1px solid rgba(0,0,0,.08)}.sending-progress-circle{position:relative;width:72px;height:72px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}.circle-ring{position:absolute;width:100%;height:100%;border:4px solid rgba(124,58,237,.1);border-top-color:var(--color-primary-light);border-radius:50%;animation:spinner-spin 1s linear infinite}.sending-icon{color:var(--color-primary-light);width:24px;height:24px;animation:sendingPulse 1.2s ease-in-out infinite alternate}@keyframes sendingPulse{0%{transform:scale(.9) translateY(0);opacity:.8}to{transform:scale(1.1) translateY(-2px);opacity:1}}.email-sending-card h3{font-family:var(--font-heading);font-size:1.3rem;font-weight:800;margin-bottom:6px}.email-sending-card p{font-size:.8rem;color:var(--text-tertiary);margin-bottom:24px}.sending-stepper{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left}.sending-step{display:flex;align-items:center;gap:12px;opacity:.25;transition:all .3s ease}.sending-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--text-tertiary);display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;transition:all .3s ease}.sending-dot i{width:10px;height:10px;display:none}.sending-text{font-size:.78rem;font-weight:500;color:var(--text-secondary)}.sending-step.active{opacity:1}.sending-step.active .sending-dot{border-color:var(--color-primary-light);background:var(--bg-tertiary);box-shadow:0 0 8px #7c3aed66}.sending-step.active .sending-text{color:var(--text-primary);font-weight:600}.sending-step.completed{opacity:.8}.sending-step.completed .sending-dot{border-color:var(--color-success);background:var(--color-success)}.sending-step.completed .sending-dot i{display:block}.sending-step.completed .sending-text{color:var(--text-tertiary);text-decoration:line-through;opacity:.75}.question-image-control-bar{background:#ffffff05!important;border-color:var(--divider-color)!important;transition:all var(--transition-fast) ease}body.light-mode .question-image-control-bar{background:#00000005!important;border-color:#cbd5e1!important}.question-image-control-bar:hover{background:#ffffff0a!important;border-color:#7c3aed4d!important}body.light-mode .question-image-control-bar:hover{background:#0000000a!important;border-color:var(--color-primary)!important}@media print{.question-image-control-bar{display:none!important}}