:root { --primary: #1a237e; --accent: #ffb300; --bg: #0a0e14; --card-bg: #121921; }
body { margin: 0; font-family: sans-serif; background: var(--bg); color: white; }
.mobile-container { padding-bottom: 70px; } /* মোবাইলের জন্য নিচের স্পেস */

/* Top Navigation */
.header-bar { background: var(--primary); padding: 15px; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; }
.back-btn { cursor: pointer; margin-right: 15px; font-size: 18px; }

/* Grid System for Mobile */
.data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; padding: 10px; }
.data-card { background: var(--card-bg); border-radius: 8px; overflow: hidden; text-align: center; border: 1px solid transparent; transition: 0.3s; }
.data-card:active { border-color: var(--accent); }
.data-card img { width: 100%; height: 150px; object-fit: cover; }
.data-card .name { padding: 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Category Sidebar for Mobile */
.sidebar { background: var(--card-bg); overflow-x: auto; display: flex; white-space: nowrap; padding: 10px; sticky; top: 50px; z-index: 90; border-bottom: 1px solid #222; }
.cat-item { padding: 8px 15px; margin-right: 10px; border-radius: 20px; background: #1d2733; font-size: 13px; cursor: pointer; }
.cat-item.active { background: var(--accent); color: black; }