body { font-family: 'Plus Jakarta Sans', sans-serif; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.trending-scroll::-webkit-scrollbar { width: 6px; }
.trending-scroll::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
@keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } }
.toast-enter { animation: slideIn 0.3s ease-out forwards; }
.toast-exit { animation: slideOut 0.3s ease-in forwards; }
.narration-text { white-space: pre-wrap; }
.scene-card { transition: all 0.2s ease; }
.scene-card:hover { border-color: rgba(99, 102, 241, 0.5); }
.audio-player { height: 32px; }

/* ==========================================================
   SETTINGS PANEL: input visibility + performance
   ========================================================== */

/* Pastikan teks input API key selalu terlihat jelas di panel Pengaturan */
#settings-panel-container input[type="password"],
#settings-panel-container input[type="text"] {
    color: #111827;
    caret-color: #1B4332;
    background-color: #ffffff;
    -webkit-text-security: disc;
    -webkit-text-fill-color: #111827;
    opacity: 1;
}

#settings-panel-container input[type="password"]::placeholder,
#settings-panel-container input[type="text"]::placeholder {
    color: #9ca3af;
    opacity: 1;
}

#settings-panel-container input[type="password"]:focus,
#settings-panel-container input[type="text"]:focus {
    outline: none;
    border-color: #1B4332;
    box-shadow: 0 0 0 2px rgba(27, 67, 50, 0.12);
}

/* Saat tombol mata mengubah type menjadi text, tampilkan huruf asli */
#settings-panel-container input[type="text"].key-visible {
    -webkit-text-security: none;
}

/* Panel slide-in: pindahkan animasi ke compositor agar tidak lemot */
#settings-panel-body {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Batasi reflow di dalam konten panel */
#panel-content {
    contain: layout paint;
}

/* Kartu layanan: transisi ringan, tanpa memicu layout */
#settings-overlay .grid > div {
    will-change: transform, box-shadow;
}

/* Scrollbar halus di panel Pengaturan */
#panel-content::-webkit-scrollbar {
    width: 8px;
}

#panel-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

#panel-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ==========================================================
   PREVIEW EFEK KAMERA (Editor NLE — Foto)
   ========================================================== */
.preview-zoom-in {
    animation: editorZoomIn linear forwards;
}
@keyframes editorZoomIn {
    0% { background-size: 100%; }
    100% { background-size: 150%; }
}

.preview-zoom-out {
    animation: editorZoomOut linear forwards;
}
@keyframes editorZoomOut {
    0% { background-size: 150%; }
    100% { background-size: 100%; }
}

.preview-pan-left {
    animation: editorPanLeft linear forwards;
}
@keyframes editorPanLeft {
    0% { background-size: 120%; background-position: 100% center; }
    100% { background-size: 120%; background-position: 0% center; }
}

.preview-pan-right {
    animation: editorPanRight linear forwards;
}
@keyframes editorPanRight {
    0% { background-size: 120%; background-position: 0% center; }
    100% { background-size: 120%; background-position: 100% center; }
}

/* ==========================================================
   EDITOR MODE: sembunyikan sidebar pratinjau, full width
   ========================================================== */
.wizard-layout.editor-mode {
    grid-template-columns: minmax(0, 1fr) !important;
}

.wizard-layout.editor-mode #result-sidebar {
    display: none !important;
}