/* --- Theme Modal --- */
.theme-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 3000;
    display: none; justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}
.theme-modal-overlay.active { display: flex; animation: fadeIn 0.3s; }

.theme-modal {
    background: var(--bg-color); border: 4px solid var(--text-primary);
    padding: 30px; width: 90%; max-width: 800px; max-height: 80vh;
    overflow-y: auto; position: relative;
    box-shadow: 0 0 20px var(--accent);
}

.theme-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; border-bottom: 2px dashed var(--text-secondary);
    padding-bottom: 10px;
}
.theme-modal-header h2 { font-family: var(--font-headers); color: var(--text-primary); font-size: 20px; }
.close-modal {
    background: transparent; border: none; color: var(--text-primary);
    font-family: var(--font-headers); font-size: 20px; cursor: pointer;
}
.close-modal:hover { color: var(--white); }

.theme-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px;
}

.theme-btn {
    background: var(--bg-color); border: 2px solid var(--text-secondary); padding: 15px;
    cursor: pointer; transition: 0.2s; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.theme-btn:hover { transform: translateY(-3px); border-color: var(--text-primary); }
.theme-btn.active-theme { border-color: var(--text-primary); box-shadow: 0 0 10px var(--text-primary); }

.theme-preview {
    width: 100%; height: 30px; display: flex; border: 1px solid var(--text-primary);
}
.tp-color { flex: 1; height: 100%; }

.theme-name {
    font-family: var(--font-headers); font-size: 10px; color: var(--text-primary);
}

/* --- Theme Toggle Button --- */
.theme-toggle-btn {
    font-family: var(--font-headers); font-size: 12px;
    padding: 10px 20px; margin: 20px auto; display: block;
    background: transparent; color: var(--text-primary);
    border: 2px solid var(--text-primary); cursor: pointer;
    text-transform: uppercase; transition: 0.2s;
    width: fit-content;
}
.theme-toggle-btn:hover {
    background: var(--text-primary); color: var(--bg-color);
    box-shadow: 0 0 10px var(--text-primary);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ================= THEMES ================= */

/* 1. Forest Tech (Default - variables already in style.css, but redefining for safety/consistency) */
body.theme-forest {
    --bg-color: #181f1c; --card-bg: #274029; --text-primary: #9ea93f; --text-secondary: #60712f; --accent: #315c2b; --white: #ffffff;
}

/* 2. Cyberpunk */
body.theme-cyberpunk {
    --bg-color: #0b1021; --card-bg: #151b30; --text-primary: #00ff9f; --text-secondary: #00b8ff; --accent: #d600ff; --white: #e0faff;
}

/* 3. Solar Flare */
body.theme-solar {
    --bg-color: #1a0f00; --card-bg: #331a00; --text-primary: #ffaa00; --text-secondary: #ff5500; --accent: #ff0000; --white: #fff5e6;
}

/* 4. Ocean Depth */
body.theme-ocean {
    --bg-color: #001f2b; --card-bg: #00334d; --text-primary: #00ffea; --text-secondary: #008cff; --accent: #005f73; --white: #e6faff;
}

/* 5. Monochrome */
body.theme-mono {
    --bg-color: #000000; --card-bg: #1a1a1a; --text-primary: #ffffff; --text-secondary: #888888; --accent: #444444; --white: #ffffff;
}

/* 6. Retro Terminal */
body.theme-terminal {
    --bg-color: #0d1117; --card-bg: #161b22; --text-primary: #00ff00; --text-secondary: #008f00; --accent: #003300; --white: #ccffcc;
}

/* 7. Royal Purple */
body.theme-royal {
    --bg-color: #1a0b2e; --card-bg: #2d1b4e; --text-primary: #ffd700; --text-secondary: #b57edc; --accent: #7209b7; --white: #f3e5f5;
}

/* 8. Coffee */
body.theme-coffee {
    --bg-color: #2b1d16; --card-bg: #4e342e; --text-primary: #d7ccc8; --text-secondary: #a1887f; --accent: #795548; --white: #efebe9;
}

/* 9. Midnight */
body.theme-midnight {
    --bg-color: #020417; --card-bg: #0f172a; --text-primary: #818cf8; --text-secondary: #4f46e5; --accent: #312e81; --white: #e0e7ff;
}

/* 10. Candy */
body.theme-candy {
    --bg-color: #2a1b2d; --card-bg: #452c48; --text-primary: #ff6ec7; --text-secondary: #6ec7ff; --accent: #bd93f9; --white: #fff0f5;
}

/* 11. Dracula */
body.theme-dracula {
    --bg-color: #282a36; --card-bg: #44475a; --text-primary: #ff79c6; --text-secondary: #8be9fd; --accent: #bd93f9; --white: #f8f8f2;
}

/* 12. Nord */
body.theme-nord {
    --bg-color: #2e3440; --card-bg: #3b4252; --text-primary: #88c0d0; --text-secondary: #81a1c1; --accent: #5e81ac; --white: #eceff4;
}

/* 13. Gruvbox */
body.theme-gruvbox {
    --bg-color: #282828; --card-bg: #3c3836; --text-primary: #fabd2f; --text-secondary: #fe8019; --accent: #b8bb26; --white: #ebdbb2;
}

/* 14. Synthwave */
body.theme-synth {
    --bg-color: #240046; --card-bg: #3c096c; --text-primary: #ff9e00; --text-secondary: #ff0054; --accent: #9d4edd; --white: #ffeedd;
}

/* 15. Matrix */
body.theme-matrix {
    --bg-color: #000000; --card-bg: #001100; --text-primary: #00ff41; --text-secondary: #008f11; --accent: #003b00; --white: #ccffcc;
}

/* 16. Sunset */
body.theme-sunset {
    --bg-color: #2d1b2e; --card-bg: #4c2a41; --text-primary: #ffbe0b; --text-secondary: #fb5607; --accent: #ff006e; --white: #fff0f5;
}

/* 17. Slate */
body.theme-slate {
    --bg-color: #0f172a; --card-bg: #1e293b; --text-primary: #94a3b8; --text-secondary: #64748b; --accent: #475569; --white: #f1f5f9;
}

/* 18. Mint */
body.theme-mint {
    --bg-color: #0f2018; --card-bg: #1b382a; --text-primary: #52ffb8; --text-secondary: #2dc48d; --accent: #1e7054; --white: #e3fff5;
}

/* 19. Lavender */
body.theme-lavender {
    --bg-color: #181621; --card-bg: #262236; --text-primary: #cdb4db; --text-secondary: #bde0fe; --accent: #a2d2ff; --white: #fff;
}

/* 20. Crimson */
body.theme-crimson {
    --bg-color: #1a0505; --card-bg: #330a0a; --text-primary: #ff0000; --text-secondary: #cc0000; --accent: #660000; --white: #ffe5e5;
}

/* 21. Gold Rush */
body.theme-gold {
    --bg-color: #1a1600; --card-bg: #332b00; --text-primary: #ffd700; --text-secondary: #c0a000; --accent: #806b00; --white: #fffbe6;
}

/* 22. Iceberg */
body.theme-ice {
    --bg-color: #0d1b21; --card-bg: #162e38; --text-primary: #00ffff; --text-secondary: #00b7eb; --accent: #005f7a; --white: #e0ffff;
}

/* 23. Volcano */
body.theme-volcano {
    --bg-color: #1f1212; --card-bg: #301919; --text-primary: #ff5722; --text-secondary: #bf360c; --accent: #5d4037; --white: #fff3e0;
}

/* 24. Toxic */
body.theme-toxic {
    --bg-color: #121a12; --card-bg: #1f2b1f; --text-primary: #c6ff00; --text-secondary: #76ff03; --accent: #33691e; --white: #f1f8e9;
}

/* 25. Cotton Candy */
body.theme-cotton {
    --bg-color: #1f1f2e; --card-bg: #2a2a40; --text-primary: #ff99c8; --text-secondary: #d0f4de; --accent: #a9def9; --white: #fcf6bd;
}

/* 26. High Contrast */
body.theme-contrast {
    --bg-color: #000000; --card-bg: #222222; --text-primary: #ffff00; --text-secondary: #00ffff; --accent: #ffffff; --white: #ffffff;
}

/* 27. Blueprint */
body.theme-blueprint {
    --bg-color: #002b36; --card-bg: #073642; --text-primary: #268bd2; --text-secondary: #2aa198; --accent: #859900; --white: #fdf6e3;
}

/* 28. Vampire */
body.theme-vampire {
    --bg-color: #0a0a0a; --card-bg: #210000; --text-primary: #ff0000; --text-secondary: #ffffff; --accent: #5c0000; --white: #e0e0e0;
}

/* 29. Moss */
body.theme-moss {
    --bg-color: #1b261b; --card-bg: #2e402e; --text-primary: #8fbc8f; --text-secondary: #556b2f; --accent: #2f4f4f; --white: #f0fff0;
}

/* 30. Steel */
body.theme-steel {
    --bg-color: #191c20; --card-bg: #252a30; --text-primary: #76a5af; --text-secondary: #455a64; --accent: #37474f; --white: #cfd8dc;
}
/* 31. Pearl (Light Default) */
body.theme-pearl {
    --bg-color: #ffffff;
    --card-bg: #f0f2f5;
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --accent: #0984e3;
    --white: #1a1a1a;
}

/* 32. Latte */
body.theme-latte {
    --bg-color: #fdfaf3;
    --card-bg: #f5ede0;
    --text-primary: #5d4037;
    --text-secondary: #8d6e63;
    --accent: #a1887f;
    --white: #3e2723;
}

/* 33. Sakura (Cherry Blossom) */
body.theme-sakura {
    --bg-color: #fff5f7;
    --card-bg: #ffe0e9;
    --text-primary: #d81b60;
    --text-secondary: #ad1457;
    --accent: #f06292;
    --white: #4a0e1e;
}

/* 34. Mint Cream */
body.theme-mintcream {
    --bg-color: #f7fffb;
    --card-bg: #e0fcf0;
    --text-primary: #00695c;
    --text-secondary: #00897b;
    --accent: #4db6ac;
    --white: #002b26;
}

/* 35. Sky Blue */
body.theme-sky {
    --bg-color: #f0faff;
    --card-bg: #e0f4ff;
    --text-primary: #0277bd;
    --text-secondary: #0288d1;
    --accent: #4fc3f7;
    --white: #012d4a;
}

/* 36. Peach */
body.theme-peach {
    --bg-color: #fff9f5;
    --card-bg: #ffede0;
    --text-primary: #e65100;
    --text-secondary: #ef6c00;
    --accent: #ffb74d;
    --white: #4e1d00;
}

/* 37. Lavender Light */
body.theme-lavenderlight {
    --bg-color: #fafaff;
    --card-bg: #f0f0ff;
    --text-primary: #4527a0;
    --text-secondary: #5e35b1;
    --accent: #9575cd;
    --white: #1a0e3d;
}

/* 38. Lemon */
body.theme-lemon {
    --bg-color: #fffde7;
    --card-bg: #fff9c4;
    --text-primary: #fbc02d;
    --text-secondary: #fdd835;
    --accent: #fff176;
    --white: #332d00;
}

/* 39. Rose Quartz */
body.theme-rosequartz {
    --bg-color: #fffafb;
    --card-bg: #fce4ec;
    --text-primary: #c2185b;
    --text-secondary: #d81b60;
    --accent: #f48fb1;
    --white: #3d0016;
}