:root {
    --gold: #d4af37; --bg-main: #121212; --bg-card: #1e1e1e;
    --electric-orange: #ff8c00; --text-main: #e0e0e0;
    --paper-base: #e3d2b3; --paper-line: rgba(70, 60, 50, 0.25); --ink-color: #2b3042;
    --font-heading: 'Cinzel', serif; --font-body: 'Lato', sans-serif; --font-writing: 'Cormorant Garamond', serif;
    --sidebar-width: 260px;
}
body { background-color: var(--bg-main); color: var(--text-main); font-family: var(--font-body); margin: 0; display: flex; overflow: hidden; height: 100vh; }

/* Fixed Export Staging Area */
#export-staging-area { position: absolute; left: -5000px; top: 0; width: 800px; z-index: -100; opacity: 1; }

/* Sidebar & Header */
.header-left-group { display: flex; align-items: center; gap: 20px; }
.orange-back-btn {
    background: transparent; border: 2px solid var(--electric-orange); color: var(--electric-orange);
    padding: 8px 18px; cursor: pointer; text-transform: uppercase; font-weight: 700; border-radius: 4px;
    font-family: var(--font-body); transition: 0.3s;
}
.orange-back-btn:hover { background: var(--electric-orange); color: #000; }
.sidebar-tools { width: var(--sidebar-width); background: #000; padding: 1.5rem; border-right: 1px solid #333; display: flex; flex-direction: column; gap: 1rem; flex-shrink: 0; height: 100%; }
.sidebar-header { padding: 1.2rem 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid #333; background: var(--bg-card); text-align: center; }
.logo-static { font-family: var(--font-heading); color: var(--gold); font-weight: 600; font-size: 0.9rem; }

/* Workspace Layout */
.writing-layout { display: flex; width: 100%; height: 100%; }
.writing-workspace { flex: 1; padding: 2rem; display: flex; flex-direction: column; align-items: center; overflow-y: auto; height: 100%; }
.ritual-header { text-align: center; margin-bottom: 2rem; }
.main-title { font-family: var(--font-heading); color: var(--gold); font-size: 2.8rem; margin: 0; }
.subtitle { color: #00e5ff; letter-spacing: 2px; text-transform: uppercase; font-size: 1rem; }

/* Scroll Animation */
.cosmic-stage { width: 100%; max-width: 1000px; height: 180px; margin-bottom: 2rem; background: radial-gradient(circle, #1a237e 0%, #000 85%); display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.ancient-scroll { display: flex; height: 100px; }
.scroll-handle { width: 18px; background: linear-gradient(to right, #3e2723, #d7ccc8, #3e2723); border-radius: 4px; }
.scroll-paper { background: #f7e7ce; width: 0; transition: width 3.5s ease; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ancient-scroll.open .scroll-paper { width: 850px; }
.scroll-text { font-family: var(--font-heading); font-size: 1.2rem; color: #2b3042; white-space: nowrap; opacity: 0; transition: opacity 1s ease 3s; font-weight: bold; }
.ancient-scroll.open .scroll-text { opacity: 1; }

/* Notepad */
.journal-wrapper { width: 100%; max-width: 900px; padding: 3rem; background: var(--paper-base); position: relative; box-shadow: 0 15px 35px rgba(0,0,0,0.6); box-sizing: border-box; flex-shrink: 0; margin-bottom: 2rem; }
#journal-entry { 
    width: 100%; height: 100%; min-height: 400px; background: transparent; border: none; outline: none; resize: none;
    font-family: var(--font-writing); font-size: 22px; line-height: 40px; color: var(--ink-color);
    background-image: repeating-linear-gradient(transparent, transparent 39px, var(--paper-line) 39px, var(--paper-line) 40px);
}
#floating-timer { position: absolute; top: 10px; right: 20px; color: #000 !important; font-family: var(--font-heading); font-weight: bold; }

/* Timer Controls */
.timer-display { font-family: var(--font-heading); font-size: 3rem; text-align: center; }
.timer-controls-row { display: flex; gap: 5px; }
.control-btn { 
    flex: 1; background: transparent; border: 1px solid var(--gold); color: var(--gold); 
    padding: 5px; cursor: pointer; text-transform: uppercase; font-size: 0.7rem; border-radius: 2px;
}
.control-btn:hover { background: var(--gold); color: #000; }
.modern-select { width: 100%; margin-top: 10px; padding: 10px; background: #111; color: var(--gold); border: 1px solid #333; border-radius: 4px; appearance: none; cursor: pointer; text-align: center; }

/* Mobile Only Responsive Fixes */
@media (max-width: 768px) {
    body { display: block; overflow-y: auto; height: auto; }
    .writing-layout { display: block; height: auto; }
    .sidebar-tools { width: 100%; border-right: none; height: auto; position: relative; padding: 1rem; border-bottom: 1px solid #333; }
    .writing-workspace { padding: 1rem; width: 100%; height: auto; overflow: visible; }
    .main-title { font-size: 1.6rem; }
    .cosmic-stage { height: 100px; margin-bottom: 1rem; }
    .ancient-scroll { height: 60px; }
    .ancient-scroll.open .scroll-paper { width: 85vw !important; }
    .scroll-text { font-size: 0.75rem; padding: 0 10px; }
    .journal-wrapper { padding: 1.5rem; width: 100%; }
}

/* Exports */
.export-footer-centered { margin-top: 40px; text-align: center; font-family: var(--font-heading); border-top: 1px solid rgba(0,0,0,0.1); padding-top: 15px; font-size: 13px; color: #555; }
.standard-print-mode { background: #fff; color: #000 !important; padding: 60px; width: 800px; min-height: 1000px; box-sizing: border-box; }
.standard-print-mode .export-content-body { font-family: serif; font-size: 14px; line-height: 1.5; white-space: pre-wrap; color: #000 !important; }
.export-mode .export-content-body { color: #000 !important; font-family: var(--font-writing); font-size: 20px; line-height: 35px; white-space: pre-wrap; }

/* UI Screens */
.electric-btn { background: #000; border: 1px solid var(--gold); color: var(--gold); padding: 0.7rem; cursor: pointer; text-transform: uppercase; font-weight: 700; border-radius: 4px; }
.outline-btn { background: transparent; border: 1px solid #555; color: var(--text-muted); padding: 0.7rem; cursor: pointer; text-transform: uppercase; font-weight: 600; font-size: 0.7rem; border-radius: 4px; }
.small-btn { padding: 8px 15px !important; font-size: 11px !important; }
.screen { position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; opacity: 0; visibility: hidden; background: var(--bg-main); overflow-y: auto; transition: 0.4s; z-index: 50; }
.active-screen { opacity: 1; visibility: visible; z-index: 100; }
.journal-list-stack { max-width: 800px; margin: 1rem auto; display: flex; flex-direction: column; gap: 8px; padding: 0 1rem; }
.journal-row { background: var(--bg-card); padding: 1rem; display: flex; align-items: center; gap: 15px; border-left: 3px solid var(--gold); border-radius: 4px; }
#notification-toast { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #000; padding: 1rem 2rem; border-radius: 50px; transition: 0.5s; z-index: 2000; }
#notification-toast.show { top: 40px; }