:root { --bg:#ffffff; --text:#0f172a; --accent:#e11d48; --border:#e5e7eb; --card:#f8fafc; }
html.dark { --bg:#0b1020; --text:#e5e7eb; --card:#0f172a; --border:#1f2937; }

body { background: var(--bg); color: var(--text); transition: 0.3s; }
.gr-container { max-width: 1200px; margin: auto; padding: 20px; }

/* Sticky Header */
header.sticky { position: fixed; top: 0; width: 100%; background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000; }

/* Dark Toggle */
#gr-dark-toggle { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); cursor: pointer; }

/* Grid Layouts */
.gr-grid, .gr-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gr-card img, .gr-rel-card img { width: 100%; aspect-ratio: 16/9; border-radius: 8px; object-fit: cover; }

@media (max-width: 900px) { .gr-grid, .gr-rel-grid { grid-template-columns: 1fr; } }