:root {
    --light-particle-color: rgba(148, 163, 184, 0.6); 
    --dark-particle-color: rgba(255, 255, 255, 0.5);
    --btn-gradient-stops: #3b82f6, #4f46e5;
    --btn-focus-ring: #a5b4fc;
}

/* === UPDATED: Responsive Body Logic === */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #1B4F72;
    /* Allow vertical scrolling on mobile/tablets */
    overflow-x: hidden; 
    overflow-y: auto; 
    min-height: 100vh;
}

/* Lock scrolling on desktop (like an app) */
@media (min-width: 1024px) {
    body {
        overflow: hidden;
    }
}

.dark body { 
    background: #000000;
}

#particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: none; }

.dark #particle-canvas {
    display: block;
}

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .glass-card {
    background: rgba(30, 41, 59, 0.35);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}

.highlighted-section {
    background: linear-gradient(135deg, rgba(30,41,59,0.25) 0%, rgba(30,41,59,0.15) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    padding: 0.5rem; 
    margin-bottom: 0.5rem; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: all 0.2s ease-in-out;
}
.highlighted-section:last-child { margin-bottom: 0; }

.highlighted-section:focus-within { box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2); }
.dark .highlighted-section:focus-within { box-shadow: 0 4px 15px rgba(167, 139, 250, 0.2); }

textarea::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar { width: 8px; }

textarea::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.3); border-radius: 10px; }
textarea::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
textarea::-webkit-scrollbar-thumb:hover { background: #718096; }

.dropdown-menu::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.3); border-radius: 10px; }
.dropdown-menu::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.dropdown-menu::-webkit-scrollbar-thumb:hover { background: #718096; }

/* === HEADER STYLES === */
#main-heading {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(90deg, #FFFFFF 0%, #E0FFFF 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

.dark #main-heading {
    background: linear-gradient(90deg, #7C3AED 0%, #C084FC 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent;
    filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.8));
}

.developer-signature {
    font-family: 'Dancing Script', cursive;
    color: #FFFFFF; 
    -webkit-text-fill-color: initial; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    font-weight: 700;
    display: inline-block;
}

.dark .developer-signature {
    color: #E9D5FF; 
    text-shadow: 0 0 12px rgba(139, 92, 246, 0.9);
}

.input-field, .input-field textarea {
    background-color: rgba(255, 255, 255, 0.08);
    color: #f8fafc; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease-in-out;
}
.input-field:hover, .input-field textarea:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.input-field:focus, .input-field textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

.input-field::placeholder, textarea::placeholder { color: #ffffff; opacity: 0.8; }
.dark .input-field::placeholder, .dark textarea::placeholder { color: #94a3b8; }

/* --- DAY MODE TEXT COLORS --- */
.text-slate-800 { color: #000000; text-shadow: none;} 
.text-slate-700 { color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0,0,0,0.2); } 
.text-slate-800-labels { color: #000000; text-shadow: none; } 
.text-slate-500 { color: #FFFFFF; text-shadow: none; }
body:not(.dark) #form-card h2.text-slate-800,
body:not(.dark) #result-card h2.text-slate-800 { color: #000000; text-shadow: none; }

.dark { --btn-gradient-stops: #9333ea, #7c3aed, #4f46e5; --btn-focus-ring: #c084fc; }
.dark .input-field, .dark .input-field textarea { background-color: rgba(255, 255, 255, 0.08); color: #f8fafc; border: 1px solid rgba(255, 255, 255, 0.1); }
.dark .input-field:focus, .dark .input-field textarea:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.3); }

/* --- DARK MODE TEXT COLORS --- */
.dark .text-slate-800 { color: #FFFFFF; text-shadow: none; } 
.dark .text-slate-700 { color: #cbd5e1 !important; text-shadow: none; } 
.dark .text-slate-800-labels { color: #cbd5e1; text-shadow: none; } 
.dark .text-slate-500 { color: #FFFFFF; text-shadow: none; }
.dark #form-card h2.text-slate-800, .dark #result-card h2.text-slate-800 { color: #FFFFFF !important; text-shadow: none; }

/* === Custom Dropdown CSS === */
.custom-dropdown { position: relative; width: 100%; font-size: 0.875rem; }
.dropdown-selected { display: flex; align-items: center; justify-content: space-between; background-color: rgba(255, 255, 255, 0.08); color: #f8fafc; border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.75rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease-in-out; }
.dark .dropdown-selected { background-color: rgba(255, 255, 255, 0.08); color: #f8fafc; border: 1px solid rgba(255, 255, 255, 0.1); }
.dropdown-selected.placeholder { color: #ffffff; opacity: 0.8; }
.dark .dropdown-selected.placeholder { color: #94a3b8; opacity: 1; }
.custom-dropdown.open .dropdown-selected { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3); }
.dark .custom-dropdown.open .dropdown-selected { border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.3); }
.dropdown-selected .arrow { transition: transform 0.3s ease; }
.custom-dropdown.open .dropdown-selected .arrow { transform: rotate(180deg); }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; background: rgb(30, 41, 59); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.5rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); z-index: 10; list-style: none; padding: 0.5rem; margin: 0; max-height: calc(4 * (36px + 4px) + 16px); overflow-y: auto; opacity: 0; transform: translateY(-10px) scale(0.98); visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.dark .dropdown-menu { background: rgb(30, 41, 59); border-color: rgba(255, 255, 255, 0.15); }
.custom-dropdown.open .dropdown-menu { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
.dropdown-menu li { padding: 0.5rem 0.75rem; border-radius: 0.375rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; color: #e2e8f0; margin-bottom: 4px; }
.dropdown-menu li:last-child { margin-bottom: 0; }
.dark .dropdown-menu li { color: #e2e8f0; }
.dropdown-menu li:hover, .dropdown-menu li.selected { background-color: #3b82f6; color: #f8fafc; }
.dark .dropdown-menu li:hover, .dark .dropdown-menu li.selected { background-color: #8B5CF6; color: #f8fafc; }
.custom-dropdown[disabled] .dropdown-selected { opacity: 0.6; cursor: not-allowed; background-color: rgba(255, 255, 255, 0.04); }
.dark .custom-dropdown[disabled] .dropdown-selected { background-color: rgba(255, 255, 255, 0.04); }

/* === TOGGLE SWITCH === */
:root {
    --switch-width: 82px; --switch-height: 38px; --handle-size: 28px; --handle-offset: 5px;
    --day-bg-top: #6DD5ED; --day-bg-bottom: #C2E0FF;
    --sun-color-core: #FFFBEA; --sun-color-main: #FFD60A; --sun-color-outer: #FFB703; --sun-color-flare: #FB8500; --sun-glow-color: rgba(255, 220, 50, 0.7);
    --cloud-color: #F8F8F8;
    --night-bg-start: #000000; --night-bg-end: #000000;
    --moon-surface-light: #dfe6e9; --moon-surface-dark: #b2bec3; --moon-glow-color: rgba(223, 230, 233, 0.2);
    --star-color: #FFFAEC; --falling-star-glow: #FDD835;
    --transition-duration-main: 1.0s; --transition-duration-clouds: 1.5s;
    --handle-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --handle-translate-x-checked: calc(var(--switch-width) - var(--handle-size) - (2 * var(--handle-offset)));
    --handle-scale-on-hover: 1.08; --cloud-scale-on-exit: 0.5; --cloud-exit-distance: 150px;
}
.toggle-container { position: relative; max-width: var(--switch-width); width: 100%; transform: scale(0.7); transform-origin: right; }
#toggle { display: none; }
.switch-label { display: block; width: var(--switch-width); height: var(--switch-height); background: linear-gradient(180deg, var(--day-bg-top) 0%, var(--day-bg-bottom) 100%); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 14px; cursor: pointer; position: relative; transition: all var(--transition-duration-main) ease-in-out, transform 0.1s ease; box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35); overflow: hidden; transform-style: preserve-3d; }
.switch-label:active { transform: translateY(2px); box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.3); }
#toggle:checked + .switch-label { background: rgba(51, 65, 85, 0.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.5); }
#toggle:checked + .switch-label:active { transform: translateY(2px); box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.5); }
.handle { position: absolute; top: 50%; left: var(--handle-offset); width: var(--handle-size); height: var(--handle-size); border-radius: 50%; transition: transform var(--transition-duration-main) var(--handle-bounce), background-color var(--transition-duration-main) ease-in-out, background-image var(--transition-duration-main) ease-in-out, box-shadow var(--transition-duration-main) ease-in-out; z-index: 10; will-change: transform; transform: translateY(-50%); background-color: var(--sun-color-main); background-image: radial-gradient(circle at 30% 30%, var(--sun-color-core) 0%, var(--sun-color-main) 35%, var(--sun-color-outer) 70%, var(--sun-color-flare) 100%); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 2px 3px 1px rgba(255, 255, 255, 0.4), inset 0 -2px 3px 1px rgba(251, 133, 0, 0.5); }
.handle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 160%; height: 160%; background: radial-gradient(circle, var(--sun-glow-color) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; z-index: -1; animation: pulse 6s infinite ease-in-out; transition: opacity var(--transition-duration-main) ease-in-out; transform: translate(-50%, -50%); }
@keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }
#toggle:checked + .switch-label .handle::before { opacity: 0; animation: none; }
.switch-label:hover .handle { transform: translateY(-50%) scale(var(--handle-scale-on-hover)); }
#toggle:checked + .switch-label:hover .handle { transform: translateX(var(--handle-translate-x-checked)) translateY(-50%) scale(var(--handle-scale-on-hover)); }
.scenery { position: absolute; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; }
.cloud { position: absolute; filter: blur(1px); transition: transform var(--transition-duration-clouds) ease-out, opacity var(--transition-duration-clouds) ease-out; will-change: transform, opacity; }
.cloud-main { width: 100%; height: 100%; background: var(--cloud-color); border-radius: 50%; box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.15); }
.cloud::before, .cloud::after { content: ''; position: absolute; background: var(--cloud-color); border-radius: 50%; opacity: 0.6; filter: blur(3px); z-index: -1; }
.cloud::before { width: 85%; height: 85%; top: 15%; left: -35%; }
.cloud::after { width: 75%; height: 75%; top: 5%; right: -30%; }
@keyframes full-drift { from { transform: translateX(-100px); } to { transform: translateX(120px); } }
.cloud-1 { width: 50px; height: 50px; top: 60%; left: 0; animation: full-drift 30s linear infinite; animation-delay: -10s; }
.cloud-2 { width: 40px; height: 40px; top: 30%; left: 0; animation: full-drift 35s linear infinite; }
.cloud-3 { width: 60px; height: 60px; top: 55%; left: 0; animation: full-drift 25s linear infinite; animation-delay: -5s; }
.night { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity var(--transition-duration-main) ease-in-out; }
@keyframes twinkle { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.star { position: absolute; background: var(--star-color); border-radius: 50%; box-shadow: 0 0 5px var(--star-color); animation: twinkle 5s infinite ease-in-out; }
@keyframes falling-star-path { 0% { transform: translate(-40px, -40px) rotate(45deg); opacity: 0; } 5% { opacity: 1; } 30% { transform: translate(100px, 100px) rotate(45deg); opacity: 0; } 100% { transform: translate(100px, 100px) rotate(45deg); opacity: 0; } }
.falling-star { position: absolute; top: 0; left: 0; width: 5px; height: 5px; background: var(--star-color); border-radius: 50%; box-shadow: 0 0 6px 3px var(--falling-star-glow); opacity: 0; will-change: transform, opacity; filter: blur(1px); }
#toggle:checked + .switch-label .handle { transform: translateX(var(--handle-translate-x-checked)) translateY(-50%); background-color: var(--moon-surface-dark); background-image: radial-gradient(circle at 55% 80%, var(--moon-surface-light) 0%, transparent 4%), radial-gradient(circle at 20% 45%, var(--moon-surface-light) 0%, transparent 3%), radial-gradient(circle at 80% 25%, var(--moon-surface-light) 0%, transparent 5%), radial-gradient(circle at 65% 35%, var(--moon-surface-dark) 0%, transparent 30%), radial-gradient(circle at 35% 65%, var(--moon-surface-dark) 0%, transparent 25%), radial-gradient(circle at 30% 30%, var(--moon-surface-light) 0%, transparent 80%); box-shadow: inset 8px -8px 10px -4px rgba(0,0,0,0.6), 0 0 15px -2px var(--moon-glow-color); }
#toggle:checked + .switch-label .cloud { transform: translateX(var(--cloud-exit-distance)) scale(var(--cloud-scale-on-exit)); opacity: 0; animation-play-state: paused; }
#toggle:checked + .switch-label .night { opacity: 1; }
#toggle:checked + .switch-label .falling-star-1 { animation: falling-star-path 10s ease-out infinite; animation-delay: 1.5s; }
#toggle:checked + .switch-label .falling-star-2 { animation: falling-star-path 11s ease-out infinite; animation-delay: 6s; }
#toggle:checked + .switch-label .falling-star-3 { animation: falling-star-path 9s ease-out infinite; animation-delay: 9s; }

#generate-btn { background-size: 200% 100%; transition: background-position 0.5s ease, transform 0.1s ease, box-shadow 0.3s ease, background-image 0.5s ease; }
#generate-btn:hover:not(:disabled) { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.2); }
#generate-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
#generate-btn { background-image: linear-gradient(to right, var(--btn-gradient-stops)); }
#generate-btn:focus { --tw-ring-color: var(--btn-focus-ring); }
#generate-btn.loading .btn-text, #generate-btn.loading .btn-icon { display: none; }
#generate-btn .spinner { display: none; }
#generate-btn.loading .spinner { display: block; }
.spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.action-btn-group { display: flex; align-items: center; background: rgba(255, 255, 255, 0.2); padding: 4px; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: all 0.3s ease; }
.dark .action-btn-group { background: rgba(15, 23, 42, 0.3); border-color: rgba(255, 255, 255, 0.15); }
.action-btn-separator { width: 1px; height: 20px; background-color: rgba(255, 255, 255, 0.3); margin: 0 4px; }
.dark .action-btn-separator { background-color: rgba(255, 255, 255, 0.1); }
.action-btn-enhanced { display: flex; align-items: center; font-weight: 500; padding: 0.3rem 0.6rem; font-size: 0.875rem; border-radius: 0.375rem; transition: all 0.2s ease-in-out; color: #000000; text-shadow: none; }
.action-btn-enhanced:not(.dark) { color: #000000; text-shadow: none; } 
.dark .action-btn-enhanced { color: #e2e8f0; text-shadow: none; } 
.action-btn-enhanced:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.1); color: #000000; }
.dark .action-btn-enhanced:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.1); color: #f1f5f9; }
.action-btn-enhanced:disabled { opacity: 0.5; cursor: not-allowed; }

#generated-mail {
    background-image: linear-gradient(to bottom, rgba(148, 163, 184, 0.05), rgba(148, 163, 184, 0));
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.07);
    width: 100%;
    min-height: 350px;
    resize: vertical;
    padding: 1rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
}
.dark #generated-mail { background-image: linear-gradient(to bottom, rgba(148, 163, 184, 0.05), rgba(148, 163, 184, 0)); }
#generated-mail:focus { box-shadow: inset 0 2px 8px rgba(0,0,0,0.1), 0 0 0 4px rgba(59, 130, 246, 0.3); border-color: #3b82f6; }
.dark #generated-mail:focus { box-shadow: inset 0 2px 8px rgba(0,0,0,0.1), 0 0 0 4px rgba(167, 139, 250, 0.3); border-color: #a78bfa; }

#toast-container { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 50; display: flex; flex-direction: column; gap: 0.75rem; }
.toast { display: flex; align-items: center; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); animation: slideInUp 0.5s ease-out forwards; opacity: 0; min-width: 280px; }
.toast.fade-out { animation: fadeOut 0.5s ease-in forwards; }
.toast-success { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.dark .toast-success { background-color: #14532d; color: #bbf7d0; border-color: #22c55e; }
.toast-error { background-color: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.dark .toast-error { background-color: #7f1d1d; color: #fecaca; border-color: #ef4444; }
@keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

#typing-loader-overlay { background-size: 200% 200%; background-image: linear-gradient(-45deg, rgba(30, 41, 59, 0.6) 0%, rgba(51, 65, 85, 0.6) 50%, rgba(30, 41, 59, 0.6) 100%); color: #cbd5e1; animation: shimmer 5s ease infinite; }
#typing-loader-overlay:not(.dark) { background-image: none; background-color: rgba(255, 255, 255, 0.5); color: #000000; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: none; }
.dark #typing-loader-overlay { background-image: linear-gradient(-45deg, rgba(30, 41, 59, 0.6) 0%, rgba(51, 65, 85, 0.6) 50%, rgba(30, 41, 59, 0.6) 100%); color: #cbd5e1; }
@keyframes shimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.blinking-cursor { font-weight: 600; animation: blink 1s step-end infinite; }
@keyframes blink { from, to { color: transparent; } 50% { color: inherit; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

#empty-state { text-align: center; color: #94a3b8; }
.dark #empty-state { color: #94a3b8; }
#empty-state-icon { stroke-width: 1.5; margin: 0 auto 1rem; opacity: 0.7; }

.state-container { transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
.state-hidden { opacity: 0; transform: scale(0.98); pointer-events: none; position: absolute; width: 100%; }

/* === UPDATED: Step 2 & Container Logic === */

#main-container { 
    display: flex; 
    flex-direction: column; /* Stack by default for mobile */
    align-items: center; 
    gap: 1.5rem; 
    width: 100%; 
    justify-content: center;
    padding: 1rem 0 3rem 0; /* Padding for scroll */
}

#result-card { opacity: 0; transform: scale(0.95); pointer-events: none; }

/* Mobile/Tablet Default (Stacked) */
#main-container.step-2 { 
    justify-content: flex-start; 
    align-items: center; 
    margin: 0 auto; 
    gap: 1.5rem;
    width: 100%;
}

#main-container.step-2 #form-card { 
    width: 100%; 
    max-width: 600px; 
    flex-shrink: 0; 
    min-width: auto; 
}

/* Mobile still keeps the max-width cap */
#main-container.step-2 #result-card { 
    width: 100%; 
    max-width: 600px; 
    flex-grow: 1; 
    opacity: 1; 
    transform: scale(1); 
    pointer-events: auto; 
}

/* Desktop Layout (Side-by-Side) */
@media (min-width: 1024px) {
    #main-container {
        height: 100%; 
        padding: 0;
    }

    #main-container.step-2 { 
        flex-direction: row; 
        justify-content: center; 
        align-items: stretch; 
        padding: 0;
        gap: 2rem;
    }

    #main-container.step-2 #form-card { 
        width: 35%; 
        min-width: 380px; 
    }

    #main-container.step-2 #result-card { 
        width: 65%; 
        max-width: none; /* UPDATED: Remove the 600px cap here */
    }
}

.composing-loader { display: flex; align-items: center; gap: 12px; }
.composing-loader span { height: 12px; width: 12px; border-radius: 50%; background-color: #3b82f6; }
.dark .composing-loader span { background-color: #6D28D9; }
.composing-loader span:nth-child(1) { animation-delay: -0.32s; }
.composing-loader span:nth-child(2) { animation-delay: -0.16s; }
@keyframes pulse-loader { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1.0); opacity: 1; } }

/* === Wavy Background Styles === */
.main-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; background-color: #1B4F72; z-index: -1; }
.dark .main-container { display: none; }
.wavy-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.background-svg { width: 100%; height: 100%; }
@keyframes flow { 0% { transform: translateX(0); } 100% { transform: translateX(-1920px); } }
@keyframes bob { 0% { transform: translateY(0); } 50% { transform: translateY(7px); } 100% { transform: translateY(0); } }
@keyframes stretch { 0% { transform: scaleX(1); } 50% { transform: scaleX(1.015); } 100% { transform: scaleX(1); } }
.wave-group { animation: flow linear infinite; }
.wave-path { animation-name: bob, stretch; animation-timing-function: ease-in-out, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, normal; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1)); }
#wave1-fill { fill: #1B4F72; }
#wave-group-2 { fill: #21618C; animation-duration: 25s; opacity: 0.7; }
#wave-group-2 .wave-path { animation-delay: -2s, 0s; animation-duration: 7s, 10s; }
#wave-group-3 { fill: #2874A6; animation-duration: 20s; opacity: 0.8; }
#wave-group-3 .wave-path { animation-delay: -4s, -1s; animation-duration: 8s, 12s; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15)); }
#wave-group-4 { fill: #2E86C1; animation-duration: 15s; opacity: 0.9; }
#wave-group-4 .wave-path { animation-delay: -3s, -0.5s; animation-duration: 6s, 9s; filter: drop-shadow(0 7px 14px rgba(0, 0, 0, 0.20)); }
#wave-group-5 { fill: #3498DB; animation-duration: 10s; opacity: 1.0; }
#wave-group-5 .wave-path { animation-delay: -1s, -2s; animation-duration: 5s, 11s; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25)); }

/* === Maximize Button & Modal Styles === */
.maximize-btn-hidden { opacity: 0; pointer-events: none; transform: scale(0.9); transition: opacity 0.3s ease, transform 0.3s ease; }
#maximize-btn:not(.maximize-btn-hidden) { opacity: 0.6; pointer-events: auto; transform: scale(1); }
#maximize-btn:not(.maximize-btn-hidden):hover { opacity: 1; }
#modal-content { font-family: 'Inter', sans-serif; line-height: 1.6; }
body.modal-open { overflow: hidden; }
#modal-content::-webkit-scrollbar { width: 10px; }
#modal-content::-webkit-scrollbar-track { background: transparent; }
.dark #modal-content::-webkit-scrollbar-track { background: #1a1a1a; }
#modal-content::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }
#modal-content::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
.dark #modal-content::-webkit-scrollbar-thumb { background: #4a5568; }
.dark #modal-content::-webkit-scrollbar-thumb:hover { background: #718096; }

/* === UPDATED: Mobile Adjustments === */
@media (max-width: 640px) {
    #main-heading {
        font-size: 2.5rem;
    }
    .developer-signature {
        font-size: 1.2rem;
        margin-left: 4rem;
    }
    .toggle-container {
        transform: scale(0.6);
        transform-origin: right top;
    }
    header {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}