/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Code+Pro:wght@400;700&family=Poppins:wght@400;700&family=Inter:wght@400;700&display=swap');

/* ==================================
/* --- THEME DEFINITIONS ---
/* ================================== */

:root {
    --font-main: 'Inter', system-ui, sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --font-mono: 'Source Code Pro', monospace;

    --bg: #071018; 
    --bg-sticky: rgba(7, 16, 24, 0.8);
    --text: #e9f1f7; 
    --text-muted: #aaa;
    --accent: #d97706; 
    --accent-hover: #ff9900;
    --card: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.05);
    --border-dashed: rgba(255, 255, 255, 0.03);
    --input-bg: rgba(255, 255, 255, 0.02);
    --input-border: rgba(255, 255, 255, 0.04);
    --shadow: rgba(0,0,0,0.6);
    --welcome-bg: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.postimg.cc/yxhh5Tdf/DSC0852.jpg');
    --welcome-text: #ffffff;
    --welcome-btn-bg: rgba(255, 255, 255, 0.1);
    --welcome-btn-text: #ffffff;
    --welcome-btn-border: #ffffff;
    --welcome-btn-hover-bg: #ffffff;
    --welcome-btn-hover-text: #000000;
}

/* --- 1. Ollie's Original (Your Default) --- */
html.theme-original-dark { --font-main: 'Inter', system-ui, sans-serif; --font-heading: 'Poppins', sans-serif; --bg: #071018; --bg-sticky: rgba(7, 16, 24, 0.8); --text: #e9f1f7; --text-muted: #aaa; --accent: #d97706; --accent-hover: #ff9900; --card: rgba(255, 255, 255, 0.03); --border: rgba(255, 255, 255, 0.05); --border-dashed: rgba(255, 255, 255, 0.03); --input-bg: rgba(255, 255, 255, 0.02); --input-border: rgba(255, 255, 255, 0.04); --shadow: rgba(0,0,0,0.6); --welcome-bg: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.postimg.cc/yxhh5Tdf/DSC0852.jpg'); --welcome-text: #ffffff; --welcome-btn-bg: rgba(255, 255, 255, 0.1); --welcome-btn-text: #ffffff; --welcome-btn-border: #ffffff; }
html.theme-original-dark body.theme-tuscany { --accent:#d97706; --bg:#0f1208; --bg-sticky: rgba(15, 18, 8, 0.8); }
html.theme-original-dark body.theme-london  { --accent:#1e90ff; --bg:#071127; --bg-sticky: rgba(7, 17, 39, 0.8); }
html.theme-original-dark body.theme-riad    { --accent:#ef4444; --bg:#0a0a0a; --bg-sticky: rgba(10, 10, 10, 0.8); }
html.theme-original-dark body.theme-antalya { --accent:#20c997; --bg:#05121a; --bg-sticky: rgba(5, 18, 26, 0.8); }
html.theme-original-dark body.theme-map     { --accent:#007ac1; background: transparent; --bg-sticky: rgba(7, 16, 24, 0.8); } 
html.theme-original-dark body.theme-photo-info { --accent:#34d399; --bg:#111827; --bg-sticky: rgba(17, 24, 39, 0.8); }
html.theme-original-dark body.theme-admin   { --accent:#ff9900; --bg:#111827; --bg-sticky: rgba(17, 24, 39, 0.8); }

/* --- THEME PICKER STYLES --- */
#theme-picker-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--bg); z-index: 3000; display: flex; justify-content: center; align-items: center; text-align: center; padding: 1.5rem; box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; }
#theme-picker-overlay.visible { opacity: 1; visibility: visible; }
.theme-picker-content { max-width: 600px; animation: fadeIn 1s ease-in-out; }
.theme-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.theme-btn { font-family: var(--font-heading); background: var(--card); color: var(--text); border: 1px solid var(--border); padding: 1rem 0.5rem; font-size: 0.9rem; font-weight: 700; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.theme-btn .swatch { width: 40px; height: 40px; border-radius: 50%; display: block; }
.theme-btn:hover { background: var(--input-bg); border-color: var(--accent); color: var(--accent); transform: translateY(-5px); }
@media (max-width: 600px) { .theme-buttons { grid-template-columns: 1fr 1fr; } }

/* --- BASE STYLES --- */
#map-background { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; display: none; filter: blur(8px) grayscale(50%) brightness(0.8); transform: scale(1.1); }
.theme-map #map-background { display: block; }

#welcome-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-image: var(--welcome-bg); background-size: cover; background-position: center; color: var(--welcome-text); display: flex; justify-content: center; align-items: center; text-align: center; z-index: 2000; padding: 1.5rem; box-sizing: border-box; transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1); opacity: 0; visibility: hidden; }
#welcome-overlay.visible { opacity: 1; visibility: visible; }
#welcome-overlay.hidden { transform: translateY(-100%); }
.welcome-content { max-width: 60ch; animation: fadeIn 1s ease-in-out; transition: opacity 0.5s ease-out; }
#continue-btn { font-family: var(--font-heading); background: var(--welcome-btn-bg); color: var(--welcome-btn-text); border: 2px solid var(--welcome-btn-border); padding: 12px 30px; font-size: 1rem; font-weight: 700; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(5px); }
#continue-btn:hover { background: var(--welcome-btn-hover-bg); color: var(--welcome-btn-hover-text); transform: scale(1.05); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
#main-content.visible { opacity: 1; visibility: visible; display: block; }

/* --- Page Content Styles --- */
#about-page-content, #map-page-content { display: none; max-width: 1100px; margin: 18px auto; padding: 2rem 14px; }
#about-page-content { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.theme-map #map-page-content { background: transparent; border: none; padding: 0; }
#about-page-content h2 { font-family: var(--font-heading); font-size: 2rem; margin-top: 0; color: var(--accent); }
#about-page-content p { line-height: 1.7; font-size: 1.1rem; opacity: 0.9; color: var(--text); }

/* --- Photo Info Page --- */
#photo-info-page { display: none; max-width: 1100px; margin: 18px auto; padding: 3rem 1rem; background: transparent; border: none; }
.photo-row { display: flex; gap: 2.5rem; align-items: center; margin-bottom: 6rem; opacity: 0; transition: opacity 0.6s ease-out; }
.photo-row.is-visible { opacity: 1; }
.photo-row:nth-child(even) { flex-direction: row-reverse; }
.photo-row-image { flex: 1.2; }
.photo-row-image img { width: 100%; border-radius: 12px; box-shadow: 0 20px 50px -10px var(--shadow); transition: transform 0.3s ease; }
.photo-row-image:hover img { transform: scale(1.03); }
.photo-row-details { flex: 1; padding-left: 1.5rem; border-left: 2px solid var(--accent); }
.photo-row:nth-child(even) .photo-row-details { padding-left: 0; padding-right: 1.5rem; border-left: none; border-right: 2px solid var(--accent); text-align: right; }
.photo-row-details h3 { font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2rem); color: var(--text); margin-top: 0; margin-bottom: 0.75rem; font-weight: 700; }
.photo-row-description { font-size: 0.95rem; line-height: 1.6; color: var(--text); opacity: 0.8; margin-bottom: 1.5rem; }
.details-list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.photo-row:nth-child(even) .details-list { justify-content: flex-end; }
.detail-item { display: flex; align-items: center; gap: 0.75rem; background: var(--input-bg); padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--border); }
.detail-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
.detail-item .label { font-size: 0.8rem; opacity: 0.7; margin-right: 0.25rem; color: var(--text-muted); }
.detail-item .value { font-size: 0.9rem; font-weight: 700; color: var(--text); }

/* --- Map Styles --- */
#map { height: 70vh; width: 100%; border-radius: 8px; z-index: 1; border: 1px solid var(--border); box-shadow: 0 10px 30px var(--shadow); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card); color: var(--text); box-shadow: 0 3px 14px var(--shadow); }

/* --- Base Body --- */
html, body { margin:0; font-family: var(--font-main); scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); transition: background .35s, color 0.35s; }
html.theme-original-dark body { background: linear-gradient(180deg, var(--bg), #020409); }
.site-wrap { min-height: 100vh; }
.site-header { position: sticky; top: 0; z-index: 1000; padding: 18px; background: var(--bg-sticky); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.header-content { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; max-width: 1100px; margin: 0 auto; }
.brand { display: flex; }
.logo{ font-family: var(--font-heading); font-weight: 700; font-size: 32px; color: var(--text); }
.controls{display:flex;align-items:center;gap:12px}
nav{display:flex;flex-wrap: wrap;gap:8px}

.tab { background: transparent; border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-family: var(--font-heading); overflow: hidden; padding: 8px 12px; position: relative; transition: color 0.3s ease; }
.tab::after { content: ''; position: absolute; bottom: 0; left: 5%; width: 90%; height: 3px; background-color: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
.tab:hover::after, .tab:focus::after, .tab.active::after { transform: scaleX(1); }
.tab:hover, .tab:focus, .tab.active { color: var(--text); }
.theme-map .tab, .theme-map .logo { color: var(--text); text-shadow: 1px 1px 3px rgba(0,0,0,0.4); }

main{max-width:1100px;margin:18px auto;padding:0 14px}
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap: 24px; }

/* --- Skeletons --- */
.shimmer-bg { animation: shimmer 1.2s linear infinite forwards; background: linear-gradient(to right, var(--card) 8%, var(--border) 18%, var(--card) 33%); background-size: 800px 104px; }
@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
.skeleton-card { background: var(--card); padding: 10px; border-radius: 20px; border: 1px solid var(--border); }
.skeleton-photo { width: 100%; padding-bottom: 66%; border-radius: 8px; margin-bottom: 10px; }
.skeleton-meta { display: flex; justify-content: space-between; align-items: center; }
.skeleton-title { height: 14px; width: 60%; border-radius: 4px; }
.skeleton-actions { display: flex; gap: 8px; }
.skeleton-btn { width: 28px; height: 28px; border-radius: 8px; }
.skeleton-comments { margin-top: 10px; border-top: 1px dashed var(--border-dashed); padding-top: 10px; }
.skeleton-line { height: 12px; border-radius: 4px; margin-bottom: 6px; }
.skeleton-line:last-child { width: 70%; }

/* --- Cards --- */
.card{ background:var(--card); padding:10px; border-radius: 20px; border:1px solid var(--border); transition:transform .28s, box-shadow .28s; display:flex; flex-direction:column; box-shadow: 0 8px 24px -10px var(--shadow); }
.card:hover{ transform:translateY(-8px); box-shadow:0 12px 30px -10px var(--shadow); }
.photo{ width:100%; padding-bottom:66%; background-size: cover; background-position:center; background-repeat: no-repeat; border-radius:12px; cursor: pointer; overflow: hidden; transition: transform 0.3s ease; }
.card:hover .photo { transform: scale(1.05); }
.meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.title{font-weight:700;font-size:14px; cursor: pointer; color: var(--text); font-family: var(--font-heading);}
.actions{display:flex;gap:8px;align-items:center}
.btn{ background:transparent; border:0; color:var(--text-muted); cursor:pointer; padding:6px; border-radius:8px; font-size:14px; display:inline-flex; gap:8px; align-items:center; text-decoration: none; transition: transform 0.2s ease; }
.btn:hover { transform: scale(1.1); }
.btn:focus{outline:2px solid var(--border);outline-offset:3px}
.btn.like.active, .btn.dislike.active{color:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}

/* --- Comments (ALWAYS VISIBLE & WORKING) --- */
.comments{
    margin-top:10px;
    border-top:1px dashed var(--border-dashed);
    padding-top:10px;
    display: block !important; /* Force visible */
}
.comment-list{max-height:160px;overflow:auto;padding-right:6px}
.comment-form{display:flex;gap:8px;margin-top:8px;flex-direction:column}
.comment-form input,.comment-form textarea{width:100%; box-sizing: border-box; padding:8px;border-radius:8px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text)}
.comment-form .row{display:flex;gap:8px}
.comment-form button{padding:8px 12px;border-radius:8px;border:0;background:var(--accent);color:var(--text);cursor:pointer;}
.comment-form button:hover { background: var(--accent-hover); }

/* --- Lightbox --- */
#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 100; }
.lightbox-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; right: 30px; font-size: 3rem; color: white; cursor: pointer; line-height: 1; border: none; background: none; z-index: 101; }

@media (max-width:768px){
  .photo-row, .photo-row:nth-child(even) { flex-direction: column; gap: 2rem; }
  .photo-row-details, .photo-row:nth-child(even) .photo-row-details { padding: 0; border: none; text-align: left; align-items: flex-start; }
  .photo-row:nth-child(even) .details-list { justify-content: flex-start; }
}
@media (max-width:600px){
  .header-content { flex-direction: column; align-items: flex-start; }
  .comment-form{flex-direction:column}
}

/* --- Scrollbar --- */
.comment-list::-webkit-scrollbar { width: 8px; }
.comment-list::-webkit-scrollbar-track { background: var(--input-bg); border-radius: 4px; }
.comment-list::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 4px; }
.comment-list::-webkit-scrollbar-thumb:hover { background-color: var(--accent-hover); }

/* --- Admin / Modal --- */
#password-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.password-modal-content { background: var(--card); padding: 2rem; border-radius: 12px; box-shadow: 0 10px 40px var(--shadow); border: 1px solid var(--border); font-family: var(--font-heading); color: var(--text); width: 300px; }
.password-modal-content h3 { margin-top: 0; font-size: 1.2rem; text-align: center; }
#password-input { width: 100%; box-sizing: border-box; padding: 10px; font-size: 1rem; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); margin-top: 1rem; margin-bottom: 1.5rem; text-align: center; }
.password-modal-buttons { display: flex; justify-content: space-between; gap: 1rem; }
.password-modal-buttons button { flex: 1; padding: 10px 15px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; }
#password-cancel-btn { background: var(--input-bg); color: var(--text); border: 1px solid var(--border); }
#password-cancel-btn:hover { background: var(--border); }
#password-submit-btn { background: var(--accent); color: #fff; }
#password-submit-btn:hover { filter: brightness(1.2); }
#password-message { font-size: 0.9rem; color: var(--accent); min-height: 1.2em; margin-top: 0; margin-bottom: 1rem; line-height: 1.3; }

#admin-page-content { 
    display: none; 
    color: #ffffff; /* Force visible text */
    max-width: 900px; margin: 20px auto; padding: 20px; 
    background: #111827; /* Force visible background */
    border: 1px solid var(--border); border-radius: 12px; 
}
#admin-page-content h2 { font-size: 2rem; font-family: var(--font-heading); color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: 20px; }
.admin-section { background: var(--input-bg); padding: 20px; border-radius: 8px; margin-bottom: 30px; border: 1px solid var(--border); }
.admin-section h3 { font-size: 1.5rem; font-family: var(--font-heading); margin-top: 0; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.admin-badge { color: var(--accent); font-size: 0.8em; font-weight: 600; margin-left: 8px; user-select: none; }
.toggle-switch { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; }
.toggle-switch input { width: 40px; height: 20px; appearance: none; background: var(--border); border-radius: 20px; position: relative; cursor: pointer; transition: background 0.3s ease; }
.toggle-switch input::before { content: ''; width: 16px; height: 16px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s ease; }
.toggle-switch input:checked { background: var(--accent); }
.toggle-switch input:checked::before { transform: translateX(20px); }

.ban-list { list-style: none; padding: 0; }
.ban-list li { background: var(--bg); padding: 10px 15px; border-radius: 4px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
.ban-list li strong { font-size: 1.1rem; color: var(--text); }
.ban-list li code { color: var(--text-muted); margin-left: 15px; font-family: var(--font-mono); }
.ban-list .unban-btn { background: #ff4d4d; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-weight: 600; }
.ban-list .unban-btn:hover { background: #ff6666; }

#word-list { list-style: none; padding: 0; margin-top: 20px; max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; }
#word-list li { background: var(--bg); padding: 10px 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; color: var(--text); font-family: var(--font-mono); }
#word-list li:last-child { border-bottom: none; }
.delete-word-btn { background: none; border: none; color: #ff4d4d; font-size: 1.5rem; font-weight: bold; cursor: pointer; line-height: 1; padding: 0 5px; }
.delete-word-btn:hover { color: #fff; background: #ff4d4d; border-radius: 4px; }
.add-word-form { margin-top: 20px; display: flex; gap: 10px; }
.add-word-form input { flex-grow: 1; padding: 10px; font-size: 1rem; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-family: var(--font-mono); }
.add-word-form button { padding: 10px 20px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; background: var(--accent); color: #fff; }
.add-word-form button:hover { filter: brightness(1.2); }

.comment { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: none; padding-bottom: 0; }
.comment-content { flex-grow: 1; padding-right: 15px; }
.comment-content strong { display: block; font-size: 13px; color: var(--accent); margin-bottom: 4px; font-weight: 700; }
.comment-content span { font-size: 13px; opacity: 0.9; line-height: 1.5; color: var(--text); word-break: break-word; }
.comment-actions { display: flex; gap: 6px; opacity: 0.3; transition: opacity 0.2s ease; flex-shrink: 0; }
.comment:hover .comment-actions { opacity: 1; }
.btn.delete-comment { padding: 0 6px; font-size: 18px; line-height: 1; color: #ff5555; opacity: 1; }
.btn.block-user { color: #ff4d4d; font-weight: bold; font-size: 1.2rem; padding: 0 8px; line-height: 1; opacity: 1; }

#back-to-top-btn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: var(--accent); color: #fff; cursor: pointer; padding: 0; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; box-shadow: 0 4px 12px var(--shadow); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease; display: flex; align-items: center; justify-content: center; }
html:not(.theme-original-dark) #back-to-top-btn { color: var(--bg); }
#back-to-top-btn.visible { display: flex; opacity: 0.8; transform: translateY(0); }
#back-to-top-btn:hover { opacity: 1; background-color: var(--accent-hover); filter: brightness(1.1); }

.socials { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.socials-btn, .socials-link { color: var(--text-muted); text-decoration: none; font-size: 13px; transition: color 0.2s, background-color 0.2s; font-family: var(--font-heading); padding: 8px 12px; background: none; border: none; }
.socials-btn { cursor: pointer; border-right: 1px solid var(--border); }
.socials-btn:hover, .socials-link:hover { background-color: var(--border); color: var(--accent); }
.theme-map .socials-btn, .theme-map .socials-link { color: var(--text-muted); }
.theme-map .socials { background: var(--bg-sticky); }

html.theme-minimalist { --bg: #f8f9fa; --text: #111111; --accent: #333333; --accent-hover: #000000; --card: #ffffff; --border: #eeeeee; --border-dashed: #eeeeee; --input-bg: #f9f9f9; --input-border: #dddddd; --shadow: rgba(0,0,0,0.08); --welcome-bg: #f8f9fa; --welcome-text: #111111; --welcome-btn-bg: transparent; --welcome-btn-text: #111111; --welcome-btn-border: #111111; --welcome-btn-hover-bg: #111111; --welcome-btn-hover-text: #ffffff; }
html.theme-minimalist body { background: var(--bg); color: var(--text); }
html.theme-minimalist .card { border: 1px solid var(--border); box-shadow: 0 4px 12px var(--shadow); }
html.theme-minimalist .btn { background: var(--input-bg); }
html.theme-minimalist .btn:hover { background: var(--border); }
html.theme-minimalist .comment-content strong { color: var(--text); }
html.theme-minimalist .comment-form button { background: var(--accent); color: var(--bg); }
html.theme-minimalist .comment-form button:hover { background: var(--accent-hover); }

html.theme-moody { --bg: #1a202c; --text: #e2e8f0; --accent: #a38d77; --accent-hover: #b9a28f; --card: #2d3748; --border: #4a5568; --border-dashed: #4a5568; --input-bg: #1a202c; --input-border: #4a5568; --shadow: rgba(0,0,0,0.4); --welcome-bg: #1a202c; --welcome-text: #e2e8f0; --welcome-btn-bg: transparent; --welcome-btn-text: #e2e8f0; --welcome-btn-border: #e2e8f0; --welcome-btn-hover-bg: #e2e8f0; --welcome-btn-hover-text: #1a202c; }
html.theme-moody body { background: var(--bg); color: var(--text); }
html.theme-moody .logo, html.theme-moody .tab, html.theme-moody .title, html.theme-moody h2, html.theme-moody h3 { font-family: var(--font-heading); }
html.theme-moody .comment-form button { color: var(--bg); }
html.theme-moody .comment-form button:hover { background: var(--accent-hover); }

html.theme-vintage { --bg: #f5e9d9; --text: #5a4a42; --accent: #c05621; --accent-hover: #a54a1c; --card: #ffffff; --border: #dcd0c0; --border-dashed: #dcd0c0; --input-bg: #faf6f0; --input-border: #dcd0c0; --shadow: rgba(0,0,0,0.1); --welcome-bg: #f5e9d9; --welcome-text: #5a4a42; --welcome-btn-bg: #c05621; --welcome-btn-text: #ffffff; --welcome-btn-border: #c05621; --welcome-btn-hover-bg: #a54a1c; --welcome-btn-hover-text: #ffffff; --font-main: 'Source Code Pro', monospace; }
html.theme-vintage body { background: var(--bg); color: var(--text); font-family: var(--font-main); }
html.theme-vintage .logo, html.theme-vintage .tab, html.theme-vintage h2, html.theme-vintage h3 { font-family: var(--font-heading); }
html.theme-vintage .card { padding: 10px 10px 15px 10px; background: #6F4E37; border: 1px solid #5a4a42; border-radius: 0; box-shadow: 0 5px 15px var(--shadow); }
html.theme-vintage .photo { border-radius: 0; border: 1px solid #f5e9d9; margin-bottom: 10px; }
html.theme-vintage .meta { margin-top: 0; padding: 0 5px; }
html.theme-vintage .title { font-family: var(--font-main); font-size: 15px; font-weight: 700; color: #f5e9d9; }
html.theme-vintage .actions .btn { color: #f5e9d9; background: rgba(245, 233, 217, 0.1); }
html.theme-vintage .actions .btn:hover { background: rgba(245, 233, 217, 0.2); }
html.theme-vintage .comments { padding: 0 5px; border-top: 1px dashed rgba(245, 233, 217, 0.3); }
html.theme-vintage .comment-form input, html.theme-vintage .comment-form textarea { font-family: var(--font-main); background: #f5e9d9; color: #5a4a42; border-color: #5a4a42; }
html.theme-vintage .comment-form input::placeholder, html.theme-vintage .comment-form textarea::placeholder { color: #8c6a4d; opacity: 0.8; }
html.theme-vintage .comment-form button { font-family: var(--font-heading); color: var(--welcome-btn-text); }
html.theme-vintage .comment-form button:hover { background: var(--accent-hover); }
html.theme-vintage .comment-content strong { font-family: var(--font-heading); color: #f5e9d9; }
html.theme-vintage .comment-content span { font-family: var(--font-main); color: #f5e9d9; }

html.theme-bold { --bg: #1a1a1a; --text: #ffffff; --accent: #FFD700; --accent-hover: #F7CA00; --card: #222222; --border: #333333; --border-dashed: #333333; --input-bg: #2b2b2b; --input-border: #444444; --shadow: rgba(0,0,0,0.5); --welcome-bg: #1a1a1a; --welcome-text: #ffffff; --welcome-btn-bg: #FFD700; --welcome-btn-text: #1a1a1a; --welcome-btn-border: #FFD700; --welcome-btn-hover-bg: #ffffff; --welcome-btn-hover-text: #1a1a1a; --font-main: 'Inter', system-ui, sans-serif; --font-heading: 'Poppins', sans-serif; }
html.theme-bold body { background: var(--bg); color: var(--text); }
html.theme-bold .logo, html.theme-bold .tab, html.theme-bold .title, html.theme-bold h2, html.theme-bold h3 { font-weight: 700; text-transform: uppercase; }
html.theme-bold .card { border-radius: 0; border-width: 2px; }
html.theme-bold .photo { border-radius: 0; }
html.theme-bold .comment-form button { color: var(--welcome-btn-text); border-radius: 0; }
html.theme-bold .comment-form input, html.theme-bold .comment-form textarea { border-radius: 0; }
html.theme-bold .comment-content strong { font-weight: 700; text-transform: uppercase; }
html.theme-bold .toggle-comments-btn { text-transform: uppercase; }

html.theme-nature { --bg: #f4f1eb; --text: #3a4a40; --accent: #4a5c51; --accent-hover: #3a4a40; --card: #ffffff; --border: #e0dcd1; --border-dashed: #e0dcd1; --input-bg: #ffffff; --input-border: #e0dcd1; --shadow: rgba(0,0,0,0.1); --welcome-bg: #f4f1eb; --welcome-text: #3a4a40; --welcome-btn-bg: #4a5c51; --welcome-btn-text: #ffffff; --welcome-btn-border: #4a5c51; --welcome-btn-hover-bg: #3a4a40; --welcome-btn-hover-text: #ffffff; --font-main: 'Inter', system-ui, sans-serif; --font-heading: 'Playfair Display', serif; }
html.theme-nature body { background: var(--bg); color: var(--text); }
html.theme-nature .logo, html.theme-nature .tab, html.theme-nature .title, html.theme-nature h2, html.theme-nature h3 { font-family: var(--font-heading); }
html.theme-nature .comment-form button { color: var(--welcome-btn-text); font-family: var(--font-heading); }
html.theme-nature .comment-content strong { font-family: var(--font-heading); }
html.theme-nature .comment-form input, html.theme-nature .comment-form textarea { border: 1px solid var(--border); }

html.theme-neon { --bg: #111111; --text: #00ffff; --accent: #f92672; --accent-hover: #fd5f8c; --card: #1a1a1a; --border: #333333; --border-dashed: #333333; --input-bg: #222222; --input-border: #333333; --shadow: rgba(0,0,0,0.7); --welcome-bg: #111111; --welcome-text: #00ffff; --welcome-btn-bg: transparent; --welcome-btn-text: #00ffff; --welcome-btn-border: #00ffff; --welcome-btn-hover-bg: #00ffff; --welcome-btn-hover-text: #111111; --font-main: 'Source Code Pro', monospace; --font-heading: 'Source Code Pro', monospace; }
html.theme-neon body { background: var(--bg); color: var(--text); }
html.theme-neon .logo, html.theme-neon .tab, html.theme-neon .title, html.theme-neon h3, html.theme-neon h2 { font-family: var(--font-heading); text-shadow: 0 0 3px var(--text); }
html.theme-neon .tab.active, html.theme-neon .tab:hover { color: var(--accent); text-shadow: 0 0 5px var(--accent); }
html.theme-neon .tab::after { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
html.theme-neon .card:hover { box-shadow: 0 0 20px var(--accent); }
html.theme-neon .admin-badge { color: #000; background: var(--accent); }
html.theme-neon .comment-form button { color: #000000; text-shadow: none; }
html.theme-neon .comment-content strong { color: var(--text-muted); text-shadow: 0 0 3px var(--text-muted); }
html.theme-neon .comment-content span { color: var(--text); }
html.theme-neon .toggle-comments-btn { color: var(--text-muted); }
html.theme-neon .toggle-comments-btn:hover { color: var(--accent); }

html.theme-editorial { --bg: #fbfbfa; --text: #222222; --accent: #8c1c13; --accent-hover: #74170f; --card: #ffffff; --border: #f0f0f0; --border-dashed: #f0f0f0; --input-bg: #f9f9f9; --input-border: #dddddd; --shadow: rgba(0,0,0,0.1); --welcome-bg: #fbfbfa; --welcome-text: #222222; --welcome-btn-bg: #8c1c13; --welcome-btn-text: #ffffff; --welcome-btn-border: #8c1c13; --welcome-btn-hover-bg: #74170f; --welcome-btn-hover-text: #ffffff; --font-main: 'Inter', system-ui, sans-serif; --font-heading: 'Playfair Display', serif; }
html.theme-editorial body { background: var(--bg); color: var(--text); }
html.theme-editorial .logo, html.theme-editorial .tab, html.theme-editorial .title, html.theme-editorial h2, html.theme-editorial h3 { font-family: var(--font-heading); }
html.theme-editorial .card { border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 2px 8px var(--shadow); }
html.theme-editorial .comment-form button { color: var(--welcome-btn-text); font-family: var(--font-heading); }
html.theme-editorial .comment-content strong { font-family: var(--font-heading); }

html.theme-minimalist .header-content { flex-direction: column; gap: 1.5rem; }
html.theme-minimalist .controls { justify-content: center; width: 100%; }

html.theme-bold .site-header { position: fixed; left: 0; top: 0; height: 100vh; width: 200px; border-right: 2px solid var(--border); border-bottom: none; padding: 2rem; box-sizing: border-box; }
html.theme-bold .header-content { flex-direction: column; align-items: flex-start; gap: 2rem; height: 100%; }
html.theme-bold .controls { flex-direction: column; align-items: flex-start; gap: 2rem; height: 100%; justify-content: space-between; }
html.theme-bold nav { flex-direction: column; align-items: flex-start; gap: 1rem; }
html.theme-bold .socials { flex-direction: column; align-items: flex-start; gap: 1rem; background: transparent; border: none; }
html.theme-bold .socials-btn { border-right: none; padding: 0; }
html.theme-bold .socials-link { padding: 0; }
html.theme-bold .socials-btn:hover, html.theme-bold .socials-link:hover { background: none; }
html.theme-bold #main-content { margin-left: 220px; }
html.theme-bold .gallery { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 1rem; padding: 1rem 0; padding-bottom: 2rem; }
html.theme-bold .card { min-width: 340px; max-width: 340px; }

html.theme-editorial .header-content { flex-direction: column; gap: 1.5rem; }
html.theme-editorial .brand { width: 100%; text-align: center; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
html.theme-editorial .logo { font-size: 2.5rem; }
html.theme-editorial .controls { justify-content: space-between; width: 100%; }
html.theme-editorial nav { width: 100%; justify-content: center; }
html.theme-editorial .gallery { display: block; max-width: 750px; margin: 0 auto; }
html.theme-editorial .card { margin-bottom: 3rem; }

html.theme-moody .gallery { display: block; column-count: 2; column-gap: 16px; }
html.theme-moody .card { display: inline-block; width: 100%; margin-bottom: 16px; }

@media (min-width: 900px) { html.theme-moody .gallery { column-count: 3; } }
@media (max-width: 600px) {
    html.theme-bold .site-header { position: sticky; height: auto; width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
    html.theme-bold #main-content { margin-left: 0; }
    html.theme-bold .header-content { flex-direction: column; align-items: flex-start; gap: 1rem; }
    html.theme-bold .controls { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; justify-content: space-between; }
    html.theme-bold nav { flex-direction: row; gap: 8px; }
    html.theme-bold .socials { flex-direction: row; border: 1px solid var(--border); gap: 0; }
    html.theme-bold .socials-btn { border-right: 1px solid var(--border); }
    html.theme-bold .card { min-width: 300px; max-width: 300px; }
    html.theme-editorial .controls { flex-direction: column; gap: 1rem; }
    html.theme-editorial nav { justify-content: flex-start; }
    html.theme-moody .gallery { column-count: 1; }
}