:root {
  --primary: #07111F;
  --accent: #F5B82E;
  --bg: #07111F;
  --card-bg: #101D2F;
  --card-hover: #162A42;
}
body { margin: 0; font-family: 'Segoe UI', sans-serif; background: var(--bg); color: white; }
.mobile-container { padding-bottom: 70px; }
.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; }
.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; }
.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 rgba(255,255,255,.08); }
.cat-item { padding: 8px 15px; margin-right: 10px; border-radius: 20px; background: var(--card-hover); font-size: 13px; cursor: pointer; }
.cat-item.active { background: var(--accent); color: #07111F; }