:root {
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    
    /* Glassmorphism Variables Light */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    --glass-blur: blur(12px);
    
    --font-ui: 'Inter', sans-serif;
    --font-read: 'Merriweather', serif;
}

[data-theme="dark"] {
    --bg-gradient: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --accent: #818cf8;
    --accent-hover: #6366f1;
    
    /* Glassmorphism Variables Dark */
    --glass-bg: rgba(15, 23, 42, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; margin: 0; padding: 0; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }

body { 
    font-family: var(--font-ui); 
    background: var(--bg-gradient); 
    color: var(--text-primary); 
    line-height: 1.6;
    min-height: 100vh;
    background-attachment: fixed;
}

/* Glassmorphism Utility Class */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
}

/* Utilities */
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.hidden { display: none !important; }
.flex-row { display: flex; gap: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.full-width { width: 100%; }
.text-center { text-align: center; }
.text-muted { color: var(--text-secondary); font-size: 0.9rem; }

/* Buttons & Inputs */
.btn-primary, .btn-secondary, .btn-outline, .btn-icon, .btn-text {
    padding: 0.6rem 1.2rem; border-radius: 12px; border: none; cursor: pointer; font-weight: 500; font-family: var(--font-ui);
    transition: all 0.3s ease;
}
.btn-primary { background: var(--accent); color: white; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-secondary { background: var(--glass-bg); color: var(--text-primary); border: 1px solid var(--glass-border); }
.btn-secondary:hover { background: rgba(255,255,255,0.2); }
.btn-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.btn-icon { background: transparent; color: var(--text-primary); font-size: 1.2rem; padding: 0.5rem; }
.btn-text { background: transparent; color: var(--text-secondary); padding: 0; }
.btn-text:hover { color: var(--accent); }

.input-field, .input-transparent, select {
    width: 100%; padding: 0.8rem; border-radius: 10px; border: 1px solid var(--glass-border); 
    background: rgba(255, 255, 255, 0.1); color: var(--text-primary); font-family: var(--font-ui); margin-bottom: 0.8rem;
    backdrop-filter: blur(5px);
}
[data-theme="dark"] .input-field { background: rgba(0, 0, 0, 0.2); }
.input-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.input-transparent { border: none; background: transparent; font-size: 1.8rem; font-weight: bold; font-family: var(--font-read); border-bottom: 2px dashed var(--glass-border); border-radius: 0; }
.input-transparent:focus { outline: none; border-bottom-color: var(--accent); }

/* Navbar */
/* Navbar */
.navbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 2rem; 
    position: sticky; 
    top: 0; 
    z-index: 100;
    /* Kita hapus border-radius agar menempel rapat di tepi */
    border-radius: 0; 
    border-top: none;
    border-left: none;
    border-right: none;
}
.logo { font-size: 1.5rem; font-weight: 700; color: var(--accent); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.nav-actions { display: flex; gap: 1rem; align-items: center; }

/* Views */
.view { display: none; min-height: calc(100vh - 80px); animation: fadeIn 0.4s ease-in-out; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Public Catalog */
.hero { text-align: center; padding: 4rem 1rem 2rem; }
.hero h1 { font-family: var(--font-read); font-size: 3rem; margin-bottom: 1rem; color: var(--text-primary); }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2rem; }
.book-card { cursor: pointer; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.book-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-color: var(--accent); }
.book-cover { height: 320px; width: 100%; border-radius: 12px 12px 0 0; overflow: hidden; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.book-card:hover .book-cover img { transform: scale(1.05); }
.book-info-card { padding: 1.5rem; }
.book-info-card h3 { font-size: 1.2rem; margin-bottom: 0.3rem; font-family: var(--font-read); }
.badge { display: inline-block; padding: 0.3rem 0.6rem; background: rgba(129, 140, 248, 0.2); border-radius: 6px; font-size: 0.8rem; color: var(--accent); margin-right: 0.3rem; font-weight: 500; border: 1px solid rgba(129, 140, 248, 0.3); }

/* Detail View */
.detail-layout { display: grid; grid-template-columns: 320px 1fr; gap: 4rem; margin-top: 2rem; align-items: start; }
.book-cover-large { padding: 1rem; border-radius: 20px; }
.book-cover-large img { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.book-info { padding: 2rem; border-radius: 20px; }
.book-info h1 { font-family: var(--font-read); font-size: 2.8rem; margin-bottom: 0.5rem; }
.description { margin: 1.5rem 0; font-size: 1.1rem; color: var(--text-secondary); line-height: 1.8; font-family: var(--font-read); }
.action-buttons { display: flex; gap: 1rem; margin-top: 2rem; }

/* Auth */
.auth-container { display: flex; justify-content: center; align-items: center; height: 80vh; }
.auth-box { padding: 3rem; width: 100%; max-width: 420px; text-align: center; }
.auth-box h2 { margin-bottom: 1.5rem; font-family: var(--font-read); }

/* Composer */
.composer-view { height: calc(100vh - 80px); overflow: hidden; padding: 1rem; }
.composer-layout { display: grid; grid-template-columns: 260px 1fr 320px; height: 100%; gap: 1rem; }
.composer-sidebar, .composer-ai-panel { padding: 1.5rem; overflow-y: auto; height: 100%; }
.composer-editor { padding: 2rem 4rem; overflow-y: auto; display: flex; flex-direction: column; height: 100%; }
.editor-area { flex: 1; font-family: var(--font-read); font-size: 1.15rem; line-height: 1.9; color: var(--text-primary); outline: none; margin-top: 2rem; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.outline-item { padding: 0.8rem; cursor: pointer; border-radius: 8px; margin-bottom: 0.5rem; transition: background 0.2s; border: 1px solid transparent; }
.outline-item:hover, .outline-item.active { background: rgba(79, 70, 229, 0.1); border-color: rgba(79, 70, 229, 0.3); color: var(--accent); }
.ai-section { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--glass-border); }
.ai-section h4 { margin-bottom: 1rem; color: var(--accent); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; }
label { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--text-secondary); }

/* Responsive */
@media (max-width: 1024px) {
    .composer-layout { grid-template-columns: 200px 1fr 250px; }
    .composer-editor { padding: 2rem; }
}
@media (max-width: 768px) {
    .detail-layout, .composer-layout { grid-template-columns: 1fr; }
    .composer-sidebar, .composer-ai-panel { display: none; }
    .composer-view { padding: 0; }
}
/* =========================================
   QUILL EDITOR GLASSMORPHISM OVERRIDES
   ========================================= */
#toolbar-container {
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    font-family: var(--font-ui);
    margin-top: 1.5rem;
    
    /* TAMBAHAN BARU: Memaksa dropdown selalu berada di lapisan paling atas */
    position: relative; 
    z-index: 50; 
}

#editor-container {
    border: 1px solid var(--glass-border) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px;
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--font-read);
    font-size: 1.15rem;
    min-height: 50vh;
}

.ql-editor {
    line-height: 1.9;
    padding: 1.5rem;
    color: var(--text-primary);
}

.ql-editor.ql-blank::before {
    color: var(--text-secondary) !important;
    font-style: normal !important;
}

/* Dark Mode Overrides for Quill Icons */
[data-theme="dark"] #toolbar-container { background: rgba(0, 0, 0, 0.2); }
[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--text-primary); }
[data-theme="dark"] .ql-snow .ql-fill, 
[data-theme="dark"] .ql-snow .ql-stroke.ql-fill { fill: var(--text-primary); }
[data-theme="dark"] .ql-snow .ql-picker { color: var(--text-primary); }
[data-theme="dark"] .ql-snow .ql-picker-options { background-color: var(--bg-secondary); border-color: var(--glass-border); }
/* =========================================
   DIGITAL STORYBOOK READER STYLES
   ========================================= */
#book-viewport {
    height: 100vh;
    width: 100vw;
    padding-top: 80px; /* Jarak untuk toolbar */
    padding-bottom: 80px; /* Jarak untuk navigasi */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; /* Membuat geseran menempel tepat per halaman */
    background: #eef2f6; /* Warna kertas dasar */
}
[data-theme="dark"] #book-viewport { background: #0f172a; }

.book-content-columns {
    height: 100%;
    /* Ini rahasianya: membagi teks panjang menjadi kolom seukuran layar */
    column-width: 100vw; 
    column-gap: 0;
    padding: 0;
    margin: 0;
    font-family: var(--font-read);
    font-size: 1.3rem;
    line-height: 2;
    color: var(--text-primary);
}

/* Kotak Halaman (Visualisasi Kertas) */
.book-content-columns > * {
    max-width: 800px; /* Lebar maksimal teks di tengah layar */
    margin: 0 auto;
    padding: 2rem 4rem;
}

/* Memastikan elemen tidak terpotong setengah di antara halaman */
.book-content-columns p, .book-content-columns h1, .book-content-columns h2 {
    break-inside: avoid-column;
    page-break-inside: avoid;
}

.book-content-columns h1 { font-size: 3rem; margin-bottom: 2rem; margin-top: 2rem; color: var(--accent); }

/* =========================================
   EDITOR FULLSCREEN (FOCUSED WRITING MODE)
   ========================================= */
.composer-editor.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    border-radius: 0;
    
    /* 1. Matikan efek kaca, gunakan warna solid pekat */
    background: #ffffff !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    
    /* 2. Tambahkan ruang napas di bagian atas */
    padding-top: 2rem !important; 
}

/* Warna background solid khusus untuk Mode Gelap (Dark Mode) */
[data-theme="dark"] .composer-editor.fullscreen-mode {
    background: #0f172a !important; 
}

/* Memperbaiki tampilan area Quill Editor agar lebih bersih */
.composer-editor.fullscreen-mode #editor-container {
    min-height: calc(100vh - 150px);
    border-radius: 0;
    border: none !important; /* Hilangkan garis kotak editor */
    background: transparent !important;
}

/* Merapikan Toolbar agar menyatu dengan elegan */
.composer-editor.fullscreen-mode #toolbar-container {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex;
    justify-content: center; /* Tengahkan ikon-ikon toolbar */
    border-bottom: 1px dashed var(--glass-border) !important;
    max-width: 800px;
    margin: 0 auto;
}

/* Membatasi lebar Header (Judul & Tombol Kontrol) di tengah layar */
.composer-editor.fullscreen-mode .editor-header {
    max-width: 800px;
    margin: 0 auto 1.5rem auto;
    width: 100%;
}

/* 3. Trik Tipografi: Batasi lebar teks di tengah agar mata tidak lelah */
.composer-editor.fullscreen-mode .ql-editor {
    max-width: 97%;       /* Batas lebar kertas */
    margin: 0 auto;         /* Posisikan teks tepat di tengah layar */
    padding: 2rem 1rem;
    font-size: 1.25rem;     /* Ukuran huruf sedikit dibesarkan otomatis */
}

/* Fix Reader Scrollbar Bleed */
#book-viewport {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
#book-viewport::-webkit-scrollbar {
    display: none; /* Sembunyikan scrollbar native di Chrome/Safari */
}
/* =========================================
   MULTI-STUDIO ECOSYSTEM LANDING STYLES
   ========================================= */

/* Hero Section Base */
.hero-section {
    background: radial-gradient(circle at 90% 10%, rgba(79, 70, 229, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 10% 90%, rgba(129, 140, 248, 0.08) 0%, transparent 40%);
    text-align: center;
}
.badge-premium {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: rgba(79, 70, 229, 0.1);
    color: var(--accent);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(79, 70, 229, 0.2);
    letter-spacing: 0.5px;
}
.hero-title {
    font-family: var(--font-read);
    font-weight: 700;
    line-height: 1.4; /* Jarak antar baris diperlebar */
    margin-top: 1.5rem;
    margin-bottom: 2rem; /* Ruang bawah diperbesar */
}
.hero-subtitle {
    font-size: 1.25rem;
    line-height: 2.2; /* Dibuat sangat lega agar nyaman dibaca */
    margin-bottom: 3.5rem; /* Jarak ke tombol diperjauh */
    color: var(--text-secondary);
}
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.btn-primary-lg, .btn-secondary-lg {
    padding: 0.8rem 2.2rem;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--font-ui);
    transition: all 0.3s ease;
}
.btn-primary-lg {
    background: var(--accent);
    color: white;
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25);
}
.btn-primary-lg:hover {
    transform: translateY(-2px);
    background: var(--accent-hover);
}
.btn-secondary-lg {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(5px);
}
.btn-secondary-lg:hover {
    background: rgba(255,255,255,0.3);
}

/* Studio Sections Blueprint Layout */
.studio-section {
    position: relative;
    padding: 8rem 0; /* Memberikan padding ekstra atas-bawah agar section terasa luas */
    border-bottom: 1px solid rgba(255,255,255,0.2);
    overflow: hidden; /* Mencegah watermark raksasa meluber ke luar layar */
}
.studio-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2; /* Memastikan konten teks & kartu berada di ATAS watermark */
}
.studio-layout.inverse {
    grid-template-columns: 1fr 1fr;
}
.studio-text h2 {
    font-family: var(--font-read);
    font-size: 2.3rem;
    margin: 0.8rem 0;
    color: var(--text-primary);
}
.studio-story {
    font-family: var(--font-read);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    text-align: justify;
}
.studio-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.studio-badge.live { background: #10b981; color: white; }
.studio-badge.dev { background: #f59e0b; color: white; }

/* Alternating Theme Backgrounds (Kontras Tema Visual) */
.theme-book {
    background: linear-gradient(180deg, rgba(245, 247, 250, 0.5) 0%, rgba(227, 233, 242, 0.5) 100%);
}
.theme-academica {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.4) 0%, rgba(203, 213, 225, 0.4) 100%);
}
.theme-screenplay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.03) 0%, rgba(30, 41, 59, 0.05) 100%);
}
.theme-edu {
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.5) 0%, rgba(220, 252, 231, 0.5) 100%);
}

/* Dark Mode Overrides for Themes */
[data-theme="dark"] .theme-book { background: linear-gradient(180deg, #131c2e 0%, #0f172a 100%); }
[data-theme="dark"] .theme-academica { background: linear-gradient(180deg, #1e293b 0%, #111827 100%); }
[data-theme="dark"] .theme-screenplay { background: linear-gradient(180deg, #0f172a 0%, #020617 100%); }
[data-theme="dark"] .theme-edu { background: linear-gradient(180deg, #062f22 0%, #022c22 100%); }

/* Feature Box Decoration */
.feature-list-box {
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.3);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}
[data-theme="dark"] .feature-list-box {
    background: rgba(0, 0, 0, 0.15);
}
.feature-list-box h3 {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    color: var(--text-primary);
}
.premium-features {
    list-style: none;
}
.premium-features li {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
.premium-features li i {
    color: #10b981;
    margin-top: 0.2rem;
}

/* Visual Side Card Decoration */
.studio-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.visual-mockup {
    padding: 4rem 2rem;
    text-align: center;
    max-width: 400px;
    width: 100%;
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
    border: 1px solid var(--glass-border);
    transition: transform 0.4s ease;
}
.visual-mockup:hover {
    transform: scale(1.03) rotate(1deg);
}
.text-accent { color: var(--accent); }
.text-blue { color: #3b82f6; }
.text-gold { color: #eab308; }
.text-green { color: #22c55e; }

/* Public Library Placement */
.public-library-section {
    padding: 6rem 0;
    background: transparent;
}
.library-header {
    margin-bottom: 4rem;
}
.library-header h2 {
    font-family: var(--font-read);
    font-size: 2.5rem;
}

/* Responsive Handling for Multi-Studio layout */
@media (max-width: 900px) {
    .studio-layout, .studio-layout.inverse {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    .studio-visual {
        order: 2; /* Taruh gambar di bawah pada perangkat mobile */
    }
}

/* Pengaturan Ikon Watermark Raksasa */
.bg-watermark {
    position: absolute;
    top: 50%;
    font-size: 45rem; /* Ukuran ikon super besar */
    opacity: 0.2; /* Sangat transparan, hanya terlihat sebagai bayangan estetik */
    z-index: 0; /* Taruh di lapisan paling belakang */
    pointer-events: none; /* Tidak bisa diklik */
    user-select: none;
    transition: transform 0.5s ease;
}

/* Posisi dan Warna Unik untuk Setiap Tema */
.theme-book .bg-watermark { 
    right: -10%; 
    color: var(--accent); 
    transform: translateY(-50%) rotate(-15deg); 
}
.theme-academica .bg-watermark { 
    left: -10%; 
    color: #3b82f6; 
    transform: translateY(-50%) rotate(15deg); 
}
.theme-screenplay .bg-watermark { 
    right: -10%; 
    color: #eab308; 
    transform: translateY(-50%) rotate(-10deg); 
}
.theme-edu .bg-watermark { 
    left: -10%; 
    color: #22c55e; 
    transform: translateY(-50%) rotate(15deg); 
}

/* Penyesuaian kontras watermark untuk Dark Mode */
[data-theme="dark"] .bg-watermark { 
    opacity: 0.05;

    /* Tambahan Gradien Latar Belakang Baru */
.theme-copy {
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.5) 0%, rgba(255, 237, 213, 0.5) 100%); /* Oranye pastel hangat */
}
.theme-proposal {
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.6) 0%, rgba(226, 232, 240, 0.6) 100%); /* Abu-abu korporat formal */
}

/* Overrides Warna Khusus untuk Dark Mode */
[data-theme="dark"] .theme-copy { background: linear-gradient(180deg, #2d1910 0%, #1c0f0a 100%); }
[data-theme="dark"] .theme-proposal { background: linear-gradient(180deg, #131924 0%, #0b0f19 100%); }

/* Penataan Warna Ikon di Samping Kartu Visual */
.text-orange { color: #f97316; }
.text-slate { color: #64748b; }

/* Posisi dan Rotasi Watermark Background Raksasa */
.theme-copy .bg-watermark { 
    right: -10%; 
    color: #f97316; 
    transform: translateY(-50%) rotate(-10deg); 
}
.theme-proposal .bg-watermark { 
    left: -10%; 
    color: #64748b; 
    transform: translateY(-50%) rotate(10deg); 
}

/* =========================================
   EDITOR STATUS BAR (AUTOSAVE INDICATOR)
   ========================================= */
.editor-status-bar {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.8rem;
    margin-top: auto; /* Mendorong status bar ke bawah jika layar panjang */
}

.status-indicator {
    font-size: 0.85rem;
    font-family: var(--font-ui);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* Status: Sedang Menyimpan (Biru/Aksen) */
.status-indicator.saving {
    color: var(--accent);
    opacity: 1;
}

/* Status: Berhasil Disimpan (Hijau) */
.status-indicator.saved {
    color: #10b981; 
    opacity: 1;
}

/* Status: Error/Gagal (Merah) */
.status-indicator.error {
    color: #ef4444; 
    opacity: 1;
}
span#editor-save-status {background:#eee;padding:10px;border-radius:30px;}