:root {
    --bg: #0f0f0f; --surface: #1a1a1a;
    --text: #eee; --text-muted: #888; 
    --accent: #4db8ff; --border: #333; --radius: 8px; --transition: 0.2s ease;
}
[data-theme="light"] {
    --bg: #f8f9fa;
    --surface: #ffffff; --text: #111; --text-muted: #555; 
    --accent: #0066cc; --border: #ddd;
}

body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); margin: 0; line-height: 1.5; transition: background 0.3s, color 0.3s; }
a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { opacity: 0.8; }
.container { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }

/* Ad Containers with CLS Prevention */
.ad-container { 
    display: flex; align-items: center; justify-content: center; 
    background: var(--surface); border: 1px dashed var(--border); 
    color: var(--text-muted); margin: 2rem auto; font-size: 0.85rem; 
    max-width: 100%; overflow: hidden;
}
.ad-top { width: 468px; min-height: 60px; aspect-ratio: 468 / 60; }
.ad-bottom { width: 728px; min-height: 90px; aspect-ratio: 728 / 90; }
.ad-rect { width: 300px; min-height: 250px; aspect-ratio: 300 / 250; }

@media (max-width: 768px) {
    .ad-top { width: 320px; min-height: 50px; aspect-ratio: 320 / 50; }
    .ad-bottom { width: 300px; min-height: 250px; aspect-ratio: 300 / 250; }
}

/* Breadcrumbs */
.breadcrumbs { font-size: 0.9rem; margin-bottom: 1rem; color: var(--text-muted); }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs span { margin: 0 0.5rem; opacity: 0.5; }

/* Grid & Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition); }
.card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; background: #000; border-bottom: 1px solid var(--border); }
.card-body { padding: 1rem; }
.card-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.25rem 0; color: var(--text); }
.card-subtitle { font-size: 0.85rem; color: var(--text-muted); }

/* Navigation */
.nav-bar { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0; padding: 1rem 0; border-top: 1px solid var(--border); }
.btn { background: var(--surface); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 6px; color: var(--text); font-weight: 500; cursor: pointer; text-align: center; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.disabled { opacity: 0.4; pointer-events: none; }

.photo-viewer { text-align: center; }
.photo-viewer img { max-width: 100%; height: auto; max-height: 80vh; border-radius: var(--radius); }

@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
    .nav-bar { flex-direction: column; gap: 1rem; }
    .btn { width: 100%; box-sizing: border-box; }
}