/* File: style.css (Final Complete Version) */

/* --- 1. Base Variables & Default Theme (Linen) --- */
:root {
    /* Fonts */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Lato', sans-serif;

    /* Metrics */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --border-radius: 8px;
    --border-radius-pill: 50px;

    /* Default Colors (Linen) */
    --color-bg: #F5F2EA;
    --color-paper: #FFFFFF;
    --color-text-primary: #3E3832;
    --color-text-secondary: #8C867D;
    --color-accent: #A65E44;
    --color-border: #E0DCD5;
    --color-button-bg: #4A4238;
    --color-button-text: #FDFBF7;
    --color-input-border: #E0DCD5;
}

/* --- 2. Color Themes --- */

/* Noir (Dark Mode) */
body[data-theme="noir"] {
    --color-bg: #262321;
    --color-paper: #322E2B;
    --color-text-primary: #E6E2DD;
    --color-text-secondary: #9C9690;
    --color-accent: #C69C6D;
    --color-border: #4A4440;
    --color-button-bg: #E6E2DD;
    --color-button-text: #262321;
    --color-input-border: #5C5550;
}

/* Sage (Nature Mode - Green) */
body[data-theme="sage"] {
    --color-bg: #E4E6E1;
    --color-paper: #FFFFFF;
    --color-text-primary: #3A403D;
    --color-text-secondary: #848C86;
    --color-accent: #7B8570;
    --color-border: #D1D6D0;
    --color-button-bg: #555F56;
    --color-button-text: #FFFFFF;
    --color-input-border: #D1D6D0;
}

/* Rose (Dusty Pink) */
body[data-theme="rose"] {
    --color-bg: #F4ECEC;
    --color-paper: #FFFFFF;
    --color-text-primary: #4A3B3B;
    --color-text-secondary: #9C8888;
    --color-accent: #B07D7D;
    --color-border: #E6D6D6;
    --color-button-bg: #8F6363;
    --color-button-text: #FFFFFF;
    --color-input-border: #E6D6D6;
}

/* Ocean (Deep Blue) */
body[data-theme="ocean"] {
    --color-bg: #F0F4F8;
    --color-paper: #FFFFFF;
    --color-text-primary: #243B53;
    --color-text-secondary: #627D98;
    --color-accent: #334E68;
    --color-border: #D9E2EC;
    --color-button-bg: #334E68;
    --color-button-text: #FFFFFF;
    --color-input-border: #D9E2EC;
}

/* --- 3. Global Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex; flex-direction: column;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* --- 4. Typography --- */
h1, h2, h3, .logo, .static-page-title, .capture-title, .month-title, .nav-title {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.form-label, .btn, .tagline, .text-link, .weekday-label, .card-date, .footer-nav a, .card-footer {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.logo { 
    font-size: 2.4rem; 
    margin-bottom: 8px; 
    text-align: center; 
    cursor: pointer; 
    user-select: none;
    letter-spacing: 0.25em; 
    text-indent: 0.25em; 
    padding-top: 10px;
}
.tagline { font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; margin-bottom: var(--spacing-sm); letter-spacing: 0.25em; }
.memento { font-family: var(--font-heading); font-style: italic; font-size: 0.9rem; color: var(--color-border); text-align: center; }

/* --- 5. Components & Layout --- */
#app { display: flex; flex-direction: column; min-height: 100vh; padding: var(--spacing-lg); max-width: 600px; margin: 0 auto; width: 100%; }
.app-header { padding: 40px 0; margin-bottom: var(--spacing-md); }
.container { flex: 1; display: flex; flex-direction: column; width: 100%; position: relative; }
.app-footer { text-align: center; padding-top: var(--spacing-xl); padding-bottom: var(--spacing-md); }

/* Paper Card Style */
.paper-layout {
    background: var(--color-paper);
    padding: 40px var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--spacing-xl);
    animation: slideUp 0.4s ease-out;
    position: relative;
    transition: background 0.5s ease;
}

/* Nav Header Grid (Fix Alignment) */
.nav-header-grid {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    margin-bottom: 24px;
}
.nav-title {
    text-align: center;
    font-size: 1.4rem;
    white-space: nowrap;
}

/* Splash Screen */
#splash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--color-bg);
    z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}
#splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content { text-align: center; animation: fadeIn 1s ease-out; }
.splash-logo { font-size: 3rem; margin-bottom: 16px; color: var(--color-text-primary); }
.splash-tagline { font-size: 0.9rem; letter-spacing: 0.3em; opacity: 0; animation: slideUp 1s ease-out 0.3s forwards; }
.splash-memento { position: absolute; bottom: 40px; opacity: 0; animation: fadeIn 1s ease-out 0.8s forwards; }
.splash-loader {
    width: 40px; height: 1px; background: var(--color-accent);
    margin: 32px auto; animation: growLine 1.5s ease-in-out infinite;
}

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 32px; border-radius: var(--border-radius-pill);
    font-size: 1rem; cursor: pointer; transition: all 0.2s ease;
    border: none; outline: none; text-decoration: none; white-space: nowrap;
}
.btn-primary { background-color: var(--color-button-bg); color: var(--color-button-text); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.btn-primary:active { transform: scale(0.98); opacity: 0.95; }
.btn-secondary { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); padding: 12px 24px; font-size: 0.9rem; }
.btn-ghost { background-color: transparent; border: none; color: var(--color-text-primary); padding: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-donation { background-color: #E87A5D; color: white; box-shadow: 0 4px 15px rgba(232, 122, 93, 0.3); }
.btn-write-home { width: 100%; margin-bottom: 32px; background-color: var(--color-button-bg); color: var(--color-button-text); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.btn-pill-small { padding: 8px 20px; border-radius: 50px; border: 1px solid var(--color-border); background: var(--color-paper); color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }

/* Search Bar */
.search-container {
    background: var(--color-paper); border-radius: var(--border-radius-pill);
    padding: 12px 20px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); margin-bottom: 32px;
    border: 1px solid transparent; transition: background 0.5s ease;
}
.search-input { border: none; outline: none; font-family: var(--font-heading); font-size: 1.1rem; width: 100%; color: var(--color-text-primary); background: transparent; }
.search-input::placeholder { color: var(--color-text-secondary); font-style: italic; opacity: 0.7; }

/* Forms */
.form-group { margin-bottom: 32px; }
.form-label { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); }
.form-input, .form-textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--color-input-border); border-radius: 0; padding: 8px 0; font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-text-primary); resize: none; transition: border-color 0.3s; }
.form-input:focus, .form-textarea:focus { outline: none; border-bottom-color: var(--color-accent); }
input[type="date"] { font-family: var(--font-heading); color: var(--color-text-primary); }

.form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 24px; gap: 12px; flex-wrap: wrap; }
.form-actions .btn { flex: 1 0 auto; }

/* Collapsible Details */
.details-section { display: none; animation: fadeIn 0.3s ease-out; }
.details-section.open { display: block; }

/* Icons */
.icon-btn { background: none; border: none; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); cursor: pointer; padding: 8px; }
.icon-btn:hover { color: var(--color-text-primary); }

/* Capture (Hidden for Image Gen) */
.capture-container { position: fixed; top: 0; left: 0; width: 600px; z-index: -9999; opacity: 0; pointer-events: none; background: #F5F2EA; padding: 60px; box-sizing: border-box; }
.capture-card { background: #FFF; padding: 40px; border-radius: 4px; border: 1px solid #E0DCD5; font-family: var(--font-heading); color: #3E3832; }
.capture-date { font-size: 1rem; color: #A65E44; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 16px; border-bottom: 1px solid #E0DCD5; padding-bottom: 16px; display: inline-block; }
.capture-title { font-size: 2.5rem; margin-bottom: 24px; line-height: 1.2; }
.capture-body { font-size: 1.4rem; line-height: 1.6; white-space: pre-wrap; margin-bottom: 40px; }
.capture-footer { text-align: center; font-size: 0.9rem; color: #8C867D; font-style: italic; margin-top: 40px; }

/* Vision List */
.vision-list { width: 100%; animation: slideUp 0.5s ease-out; }
.vision-card { background: var(--color-paper); padding: 24px; margin-bottom: 16px; border-radius: var(--border-radius); box-shadow: 0 4px 15px rgba(0,0,0,0.03); cursor: pointer; transition: transform 0.2s, background 0.5s ease; }
.vision-card:active { transform: scale(0.98); }
.card-date { font-size: 0.75rem; color: var(--color-accent); margin-bottom: 8px; }
.card-title { font-size: 1.6rem; margin-bottom: 8px; font-family: var(--font-heading); color: var(--color-text-primary); }
.card-footer { display: flex; justify-content: space-between; align-items: center; color: var(--color-text-secondary); font-size: 0.8rem; }

/* Empty State */
.empty-state { text-align: center; padding: 40px 0; width: 100%; }
.empty-text { font-family: var(--font-heading); font-size: 1.4rem; font-style: italic; color: var(--color-text-secondary); margin-bottom: 8px; }
.empty-subtext { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: 40px; }

/* Modals */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.4); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease-out; }
.modal-content { background: var(--color-paper); width: 90%; max-width: 480px; max-height: 85vh; overflow-y: auto; padding: 40px; border-radius: var(--border-radius); box-shadow: 0 20px 50px rgba(0,0,0,0.2); position: relative; color: var(--color-text-primary); }
.modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--color-text-secondary); cursor: pointer; }

/* Success Overlay */
.success-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); z-index: 2500; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fadeIn 0.5s ease-out; text-align: center; }
.success-title { font-size: 2rem; color: var(--color-accent); margin-bottom: 16px; animation: slideUp 0.5s ease-out; }
.success-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; animation: slideUp 0.7s ease-out; }

/* Calendar */
.calendar-container { width: 100%; background: var(--color-paper); padding: 24px; border-radius: var(--border-radius); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; color: var(--color-text-primary); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.weekday-label { font-size: 0.7rem; color: var(--color-text-secondary); padding-bottom: 8px; }
.calendar-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.9rem; border-radius: 50%; cursor: pointer; position: relative; color: var(--color-text-primary); }
.calendar-day.has-event { font-weight: 700; }
.calendar-day.has-event::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; background-color: var(--color-accent); border-radius: 50%; }
.calendar-day.today { border: 1px solid var(--color-border); }
.calendar-day.empty { pointer-events: none; }

/* Utilities */
.action-links { display: flex; justify-content: center; gap: 32px; margin-top: 16px; }
.text-link { color: var(--color-text-secondary); text-decoration: none; font-size: 0.8rem; display: flex; align-items: center; gap: 6px; transition: color 0.2s; }
.footer-nav a { text-decoration: none; color: var(--color-text-secondary); font-size: 0.8rem; margin: 0 8px; transition: color 0.2s; }
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background-color: var(--color-text-primary); color: var(--color-bg); padding: 12px 24px; border-radius: 50px; font-size: 0.9rem; z-index: 3000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 8px; }
.loading-screen { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--color-text-secondary); margin-top: 60px; }
.spin-icon { animation: spin 2s linear infinite; }

/* Animations */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes growLine { 0% { width:0; opacity:0; } 50% { width:60px; opacity:1; } 100% { width:0; opacity:0; } }
/* File: style.css (Font Updated) */

/* --- 1. Base Variables & Default Theme --- */
:root {
    /* Fonts [UPDATED] Added Zen Old Mincho fallback */
    --font-heading: 'Cormorant Garamond', 'Zen Old Mincho', serif;
    --font-body: 'Lato', 'Zen Old Mincho', sans-serif;

    /* Metrics */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --border-radius: 8px;
    --border-radius-pill: 50px;

    /* Default Colors (Linen) */
    --color-bg: #F5F2EA;
    --color-paper: #FFFFFF;
    --color-text-primary: #3E3832;
    --color-text-secondary: #8C867D;
    --color-accent: #A65E44;
    --color-border: #E0DCD5;
    --color-button-bg: #4A4238;
    --color-button-text: #FDFBF7;
    --color-input-border: #E0DCD5;
}

/* --- 2. Color Themes --- */
body[data-theme="noir"] {
    --color-bg: #262321; --color-paper: #322E2B; --color-text-primary: #E6E2DD; --color-text-secondary: #9C9690;
    --color-accent: #C69C6D; --color-border: #4A4440; --color-button-bg: #E6E2DD; --color-button-text: #262321; --color-input-border: #5C5550;
}
body[data-theme="sage"] {
    --color-bg: #E4E6E1; --color-paper: #FFFFFF; --color-text-primary: #3A403D; --color-text-secondary: #848C86;
    --color-accent: #7B8570; --color-border: #D1D6D0; --color-button-bg: #555F56; --color-button-text: #FFFFFF; --color-input-border: #D1D6D0;
}
body[data-theme="rose"] {
    --color-bg: #F4ECEC; --color-paper: #FFFFFF; --color-text-primary: #4A3B3B; --color-text-secondary: #9C8888;
    --color-accent: #B07D7D; --color-border: #E6D6D6; --color-button-bg: #8F6363; --color-button-text: #FFFFFF; --color-input-border: #E6D6D6;
}
body[data-theme="ocean"] {
    --color-bg: #F0F4F8; --color-paper: #FFFFFF; --color-text-primary: #243B53; --color-text-secondary: #627D98;
    --color-accent: #334E68; --color-border: #D9E2EC; --color-button-bg: #334E68; --color-button-text: #FFFFFF; --color-input-border: #D9E2EC;
}

/* --- 3. Global Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
    background-color: var(--color-bg); color: var(--color-text-primary);
    font-family: var(--font-body); font-weight: 400; line-height: 1.6;
    -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* --- 4. Typography --- */
h1, h2, h3, .logo, .static-page-title, .capture-title, .month-title, .nav-title {
    font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--color-text-primary);
}
.form-label, .btn, .tagline, .text-link, .weekday-label, .card-date, .footer-nav a, .card-footer {
    font-family: var(--font-body); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.logo { font-size: 2.4rem; margin-bottom: 8px; text-align: center; cursor: pointer; user-select: none; letter-spacing: 0.25em; text-indent: 0.25em; padding-top: 10px; }
.tagline { font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; margin-bottom: var(--spacing-sm); letter-spacing: 0.25em; }
.memento { font-family: var(--font-heading); font-style: italic; font-size: 0.9rem; color: var(--color-border); text-align: center; }

/* --- 5. Components & Layout --- */
#app { display: flex; flex-direction: column; min-height: 100vh; padding: var(--spacing-lg); max-width: 600px; margin: 0 auto; width: 100%; }
.app-header { padding: 40px 0; margin-bottom: var(--spacing-md); }
.container { flex: 1; display: flex; flex-direction: column; width: 100%; position: relative; }
.app-footer { text-align: center; padding-top: var(--spacing-xl); padding-bottom: var(--spacing-md); }

.paper-layout {
    background: var(--color-paper); padding: 40px var(--spacing-lg); border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); margin-bottom: var(--spacing-xl);
    animation: slideUp 0.4s ease-out; position: relative; transition: background 0.5s ease;
}

.nav-header-grid { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; margin-bottom: 24px; }
.nav-title { text-align: center; font-size: 1.4rem; white-space: nowrap; }

#splash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-bg); z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}
#splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content { text-align: center; animation: fadeIn 1s ease-out; }
.splash-logo { font-size: 3rem; margin-bottom: 16px; color: var(--color-text-primary); }
.splash-tagline { font-size: 0.9rem; letter-spacing: 0.3em; opacity: 0; animation: slideUp 1s ease-out 0.3s forwards; }
.splash-memento { position: absolute; bottom: 40px; opacity: 0; animation: fadeIn 1s ease-out 0.8s forwards; }
.splash-loader { width: 40px; height: 1px; background: var(--color-accent); margin: 32px auto; animation: growLine 1.5s ease-in-out infinite; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: var(--border-radius-pill); font-size: 1rem; cursor: pointer; transition: all 0.2s ease; border: none; outline: none; text-decoration: none; white-space: nowrap; }
.btn-primary { background-color: var(--color-button-bg); color: var(--color-button-text); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.btn-primary:active { transform: scale(0.98); opacity: 0.95; }
.btn-secondary { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); padding: 12px 24px; font-size: 0.9rem; }
.btn-ghost { background-color: transparent; border: none; color: var(--color-text-primary); padding: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-donation { background-color: #E87A5D; color: white; box-shadow: 0 4px 15px rgba(232, 122, 93, 0.3); }
.btn-write-home { width: 100%; margin-bottom: 32px; background-color: var(--color-button-bg); color: var(--color-button-text); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.btn-pill-small { padding: 8px 20px; border-radius: 50px; border: 1px solid var(--color-border); background: var(--color-paper); color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }

.search-container {
    background: var(--color-paper); border-radius: var(--border-radius-pill); padding: 12px 20px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); margin-bottom: 32px; border: 1px solid transparent; transition: background 0.5s ease;
}
.search-input { border: none; outline: none; font-family: var(--font-heading); font-size: 1.1rem; width: 100%; color: var(--color-text-primary); background: transparent; }
.search-input::placeholder { color: var(--color-text-secondary); font-style: italic; opacity: 0.7; }

.form-group { margin-bottom: 32px; }
.form-label { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); }
.form-input, .form-textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--color-input-border); border-radius: 0; padding: 8px 0; font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-text-primary); resize: none; transition: border-color 0.3s; }
.form-input:focus, .form-textarea:focus { outline: none; border-bottom-color: var(--color-accent); }
input[type="date"] { font-family: var(--font-heading); color: var(--color-text-primary); }
.form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 24px; gap: 12px; flex-wrap: wrap; }
.form-actions .btn { flex: 1 0 auto; }

.details-section { display: none; animation: fadeIn 0.3s ease-out; }
.details-section.open { display: block; }
.icon-btn { background: none; border: none; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); cursor: pointer; padding: 8px; }
.icon-btn:hover { color: var(--color-text-primary); }

.capture-container { position: fixed; top: 0; left: 0; width: 600px; z-index: -9999; opacity: 0; pointer-events: none; background: #F5F2EA; padding: 60px; box-sizing: border-box; }
.capture-card { background: #FFF; padding: 40px; border-radius: 4px; border: 1px solid #E0DCD5; font-family: var(--font-heading); color: #3E3832; }
.capture-date { font-size: 1rem; color: #A65E44; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 16px; border-bottom: 1px solid #E0DCD5; padding-bottom: 16px; display: inline-block; }
.capture-title { font-size: 2.5rem; margin-bottom: 24px; line-height: 1.2; }
.capture-body { font-size: 1.4rem; line-height: 1.6; white-space: pre-wrap; margin-bottom: 40px; }
.capture-footer { text-align: center; font-size: 0.9rem; color: #8C867D; font-style: italic; margin-top: 40px; }

.vision-list { width: 100%; animation: slideUp 0.5s ease-out; }
.vision-card { background: var(--color-paper); padding: 24px; margin-bottom: 16px; border-radius: var(--border-radius); box-shadow: 0 4px 15px rgba(0,0,0,0.03); cursor: pointer; transition: transform 0.2s, background 0.5s ease; }
.vision-card:active { transform: scale(0.98); }
.card-date { font-size: 0.75rem; color: var(--color-accent); margin-bottom: 8px; }
.card-title { font-size: 1.6rem; margin-bottom: 8px; font-family: var(--font-heading); color: var(--color-text-primary); }
.card-footer { display: flex; justify-content: space-between; align-items: center; color: var(--color-text-secondary); font-size: 0.8rem; }

.empty-state { text-align: center; padding: 40px 0; width: 100%; }
.empty-text { font-family: var(--font-heading); font-size: 1.4rem; font-style: italic; color: var(--color-text-secondary); margin-bottom: 8px; }
.empty-subtext { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: 40px; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.4); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease-out; }
.modal-content { background: var(--color-paper); width: 90%; max-width: 480px; max-height: 85vh; overflow-y: auto; padding: 40px; border-radius: var(--border-radius); box-shadow: 0 20px 50px rgba(0,0,0,0.2); position: relative; color: var(--color-text-primary); }
.modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--color-text-secondary); cursor: pointer; }

.success-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); z-index: 2500; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fadeIn 0.5s ease-out; text-align: center; }
.success-title { font-size: 2rem; color: var(--color-accent); margin-bottom: 16px; animation: slideUp 0.5s ease-out; }
.success-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; animation: slideUp 0.7s ease-out; }

.calendar-container { width: 100%; background: var(--color-paper); padding: 24px; border-radius: var(--border-radius); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; color: var(--color-text-primary); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.weekday-label { font-size: 0.7rem; color: var(--color-text-secondary); padding-bottom: 8px; }
.calendar-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.9rem; border-radius: 50%; cursor: pointer; position: relative; color: var(--color-text-primary); }
.calendar-day.has-event { font-weight: 700; }
.calendar-day.has-event::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; background-color: var(--color-accent); border-radius: 50%; }
.calendar-day.today { border: 1px solid var(--color-border); }
.calendar-day.empty { pointer-events: none; }

.action-links { display: flex; justify-content: center; gap: 32px; margin-top: 16px; }
.text-link { color: var(--color-text-secondary); text-decoration: none; font-size: 0.8rem; display: flex; align-items: center; gap: 6px; transition: color 0.2s; }
.footer-nav a { text-decoration: none; color: var(--color-text-secondary); font-size: 0.8rem; margin: 0 8px; transition: color 0.2s; }
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background-color: var(--color-text-primary); color: var(--color-bg); padding: 12px 24px; border-radius: 50px; font-size: 0.9rem; z-index: 3000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 8px; }
.loading-screen { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--color-text-secondary); margin-top: 60px; }
.spin-icon { animation: spin 2s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes growLine { 0% { width:0; opacity:0; } 50% { width:60px; opacity:1; } 100% { width:0; opacity:0; } }