/* ═══════════════════════════════════════════════════════════
   3DSEARCH.NET – style-index.css v8
   Light default + Dark mode toggle
   ═══════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  --accent:        #fa6400;
  --accent-h:      #e05800;
  --accent-sub:    rgba(250,100,0,0.09);
  --radius:        10px;
  --radius-sm:     6px;
  --radius-xs:     4px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.10);
  --trans:         0.17s ease;
  --sidebar-w:     230px;
  --header-h:      56px;
  --font:          'Figtree', 'DM Sans', system-ui, sans-serif;
  --mono:          'JetBrains Mono', 'Space Mono', monospace;
}

/* ─── LIGHT THEME (default) ──────────────────────────────────── */
:root, [data-theme="light"] {
  --bg:            #f4f4f4;
  --bg-nav:        #ffffff;
  --bg-card:       #ffffff;
  --bg-card-h:     #fafafa;
  --bg-input:      #ffffff;
  --bg-sidebar:    #ffffff;
  --bg-tag:        #f0f0f0;
  --bg-tag-h:      #e5e5e5;
  --bg-overlay:    rgba(0,0,0,0.35);
  --text:          #111111;
  --text-dim:      #555555;
  --text-muted:    #888888;
  --border:        #e5e5e5;
  --border-h:      #cccccc;
  --nav-shadow:    0 1px 0 #e5e5e5;
  --card-shadow:   0 1px 3px rgba(0,0,0,0.07);
  --card-shadow-h: 0 6px 20px rgba(0,0,0,0.11);
}

/* ─── DARK THEME ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:            #111111;
  --bg-nav:        #1a1a1a;
  --bg-card:       #1e1e1e;
  --bg-card-h:     #252525;
  --bg-input:      #222222;
  --bg-sidebar:    #181818;
  --bg-tag:        #2a2a2a;
  --bg-tag-h:      #333333;
  --bg-overlay:    rgba(0,0,0,0.65);
  --text:          #f0f0f0;
  --text-dim:      #aaaaaa;
  --text-muted:    #606060;
  --border:        #2c2c2c;
  --border-h:      #3d3d3d;
  --nav-shadow:    0 1px 0 #2c2c2c;
  --card-shadow:   0 1px 4px rgba(0,0,0,0.3);
  --card-shadow-h: 0 6px 24px rgba(0,0,0,0.4);
}

/* ─── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { cursor: pointer; font-family: var(--font); border: none; }
input, select { font-family: var(--font); }

/* ─── TRANSITIONS ────────────────────────────────────────────── */
body, .header, .sidebar, .model-card, .sb-item, .sb-cat-item,
.wish-btn, .col-btn, .page-btn, .header-btn, .login-btn,
.trending-pill, .filter-chip, .card-source, .theme-btn {
  transition: background-color var(--trans), border-color var(--trans),
              color var(--trans), box-shadow var(--trans);
}

/* ─── HEADER ─────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 200;
  background: var(--bg-nav);
  box-shadow: var(--nav-shadow);
  height: var(--header-h);
}
.header-inner {
  max-width: 1500px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: 100%;
}

.logo {
  font-weight: 800; font-size: 1.1rem; letter-spacing: -0.4px;
  color: var(--text); white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center;
}
.logo span { color: var(--accent); }

.sidebar-toggle {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: none; color: var(--text-dim);
  display: grid; place-items: center; flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--bg-tag); color: var(--text); }

/* Search bar wrap */
.search-bar-wrap {
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  position: sticky;
  top: var(--header-h);
  z-index: 90;
}

/* Search */
.search-bar {
  width: 100%; max-width: 720px; position: relative;
  display: flex; align-items: center;
}
.search-bar input {
  width: 100%; height: 44px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 48px 0 16px;
  font-size: 1rem; color: var(--text); outline: none;
  transition: border-color var(--trans), background var(--trans);
}
.search-bar input:focus { border-color: var(--accent); }
.search-bar input::placeholder { color: var(--text-muted); }
.search-submit {
  position: absolute; right: 0; top: 0; bottom: 0; width: 46px;
  background: none; color: var(--text-muted);
  display: grid; place-items: center; border-radius: 0 10px 10px 0;
}
.search-submit:hover { color: var(--accent); }

.autocomplete-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  z-index: 300; display: none; overflow: hidden;
}
.autocomplete-dropdown.active { display: block; }
.autocomplete-item {
  padding: 9px 14px; font-size: 0.875rem; cursor: pointer; color: var(--text);
  transition: background var(--trans), color var(--trans);
}
.autocomplete-item:hover, .autocomplete-item.active { background: var(--bg-tag); color: var(--text); }

/* Header actions */
.header-actions {
  display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0;
}
.header-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: 0.8rem; font-weight: 500; color: var(--text-dim); background: none;
  transition: background var(--trans), color var(--trans);
}
.header-btn:hover { background: var(--bg-tag); color: var(--text); }

.theme-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--bg-tag); border: 1.5px solid var(--border);
  display: grid; place-items: center; color: var(--text-dim); flex-shrink: 0;
}
.theme-btn:hover { background: var(--bg-tag-h); color: var(--text); }

.lang-select {
  height: 32px; padding: 0 8px;
  background: var(--bg-tag); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600;
  color: var(--text-dim); cursor: pointer; outline: none;
}
.lang-select:hover { border-color: var(--border-h); }

.login-btn {
  height: 32px; padding: 0 14px;
  background: var(--accent); color: white;
  border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600;
  flex-shrink: 0; border: none; transition: background var(--trans);
}
.login-btn:hover { background: var(--accent-h); }

/* User menu */
.user-menu-wrapper { position: relative; }
.user-menu-trigger { display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 2px; border-radius: 20px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.user-menu-caret { color: var(--text-muted); transition: transform var(--trans); }
.user-menu-wrapper.open .user-menu-caret { transform: rotate(180deg); }
.user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  min-width: 200px; z-index: 300; overflow: hidden;
}
.user-menu-wrapper.open .user-dropdown { display: block; }
.dropdown-header { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.dropdown-name { font-weight: 600; font-size: 0.875rem; }
.dropdown-email { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.dropdown-items { padding: 6px; }
.dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-xs);
  font-size: 0.85rem; color: var(--text-dim);
  transition: background var(--trans), color var(--trans);
}
.dropdown-item:hover { background: var(--bg-tag); color: var(--text); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.dropdown-danger:hover { color: #e53; }

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.layout { max-width: 1500px; margin: 0 auto; display: flex; padding: 0 16px; }

/* ─── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  padding: 16px 0 24px;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto; overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 150;
  background: var(--bg-overlay);
}
.sidebar-overlay.active { display: block; }

.sb-section { border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 4px; }
.sb-section:last-child { border-bottom: none; }
.sb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px; cursor: pointer;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); user-select: none;
  transition: color var(--trans);
}
.sb-header:hover { color: var(--text-dim); }
.sb-header-left { display: flex; align-items: center; gap: 7px; }
.sb-chevron { transition: transform var(--trans); flex-shrink: 0; }
.sb-section.collapsed .sb-chevron { transform: rotate(-90deg); }
.sb-body { padding: 0 6px 6px; }
.sb-section.collapsed .sb-body { display: none; }

.sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-xs);
  font-size: 0.875rem; color: var(--text-dim); font-weight: 500;
  transition: background var(--trans), color var(--trans); cursor: pointer;
}
.sb-item:hover { background: var(--bg-tag); color: var(--text); }
.sb-item.active { background: var(--accent-sub); color: var(--accent); font-weight: 600; }
.sb-icon { width: 22px; flex-shrink: 0; display: flex; align-items: center; }
.sb-check { margin-left: auto; width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.sb-check svg { width: 100%; height: 100%; }
.sb-clear-sources { color: var(--text-muted); font-size: 0.8rem; }

.sb-sort-item {
  display: block; padding: 7px 10px; border-radius: var(--radius-xs);
  font-size: 0.875rem; color: var(--text-dim); font-weight: 500;
  transition: background var(--trans), color var(--trans);
}
.sb-sort-item:hover { background: var(--bg-tag); color: var(--text); }
.sb-sort-item.active { color: var(--accent); font-weight: 600; }

.cat-search-input {
  width: 100%; height: 30px; margin-bottom: 4px;
  background: var(--bg-input); border: 1.5px solid var(--border);
  border-radius: var(--radius-xs); padding: 0 10px;
  font-size: 0.8rem; color: var(--text); outline: none;
  transition: border-color var(--trans), background var(--trans);
}
.cat-search-input:focus { border-color: var(--accent); }
.cat-search-input::placeholder { color: var(--text-muted); }

.sb-cat-list { max-height: 320px; overflow-y: auto; }
.sb-cat-list::-webkit-scrollbar { width: 3px; }
.sb-cat-list::-webkit-scrollbar-thumb { background: var(--border); }

.sb-cat-item {
  display: block; padding: 5px 10px; border-radius: var(--radius-xs);
  font-size: 0.825rem; color: var(--text-dim);
  transition: background var(--trans), color var(--trans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-cat-item:hover { background: var(--bg-tag); color: var(--text); }
.sb-cat-item.active { color: var(--accent); font-weight: 600; }

/* ─── MAIN ───────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; padding: 16px 0 32px 20px; }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  background: var(--accent-sub); color: var(--accent);
  border-radius: 100px; font-size: 0.78rem; font-weight: 600;
}
.filter-chip .remove { color: var(--accent); opacity: 0.7; font-size: 1rem; line-height: 1; transition: opacity var(--trans); }
.filter-chip .remove:hover { opacity: 1; }

.main h1 {
  font-family: var(--font) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px;
}

.trending-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.trending-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
.trending-pill {
  height: 26px; padding: 0 10px;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 100px; font-size: 0.775rem; color: var(--text-dim);
  transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.trending-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-sub); }

.controls-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.results-info { font-size: 0.82rem; color: var(--text-muted); }
.results-info strong { color: var(--text); }

/* ─── GRID ───────────────────────────────────────────────────── */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* ─── CARD ───────────────────────────────────────────────────── */
.model-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden; position: relative;
  box-shadow: var(--card-shadow);
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.model-card:hover {
  border-color: var(--border-h);
  box-shadow: var(--card-shadow-h);
  transform: translateY(-2px);
}
.card-link { display: block; color: inherit; }

.card-img { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-tag); position: relative; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.model-card:hover .card-img img { transform: scale(1.04); }

.card-source {
  position: absolute; bottom: 7px; left: 7px;
  height: 20px; padding: 0 7px; border-radius: 100px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em;
  backdrop-filter: blur(6px); pointer-events: none;
}
.card-source.printables    { background: rgba(250,104,49,0.18); color: #fa6831; border: 1px solid rgba(250,104,49,0.25); }
.card-source.thingiverse   { background: rgba(36,139,251,0.18); color: #248bfb; border: 1px solid rgba(36,139,251,0.25); }
.card-source.makerworld    { background: rgba(0,174,66,0.18);   color: #00ae42; border: 1px solid rgba(0,174,66,0.25); }
.card-source.myminifactory { background: rgba(45,178,128,0.18); color: #2db280; border: 1px solid rgba(45,178,128,0.25); }
.card-source.cults3d       { background: rgba(214,51,132,0.18); color: #d63384; border: 1px solid rgba(214,51,132,0.25); }
.card-source.makeronline   { background: rgba(0,150,214,0.18);  color: #0096d6; border: 1px solid rgba(0,150,214,0.25); }

.card-body { padding: 10px 12px 12px; }
.card-title {
  font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--text);
  margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.card-designer { display: flex; align-items: center; gap: 3px; font-size: 0.75rem; color: var(--text-muted); min-width: 0; }
.card-designer svg { width: 11px; height: 11px; flex-shrink: 0; }
.designer-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--trans); }
.designer-link:hover { color: var(--accent); }
.card-likes { display: flex; align-items: center; gap: 3px; font-size: 0.75rem; color: var(--text-muted); font-family: var(--mono); flex-shrink: 0; }
.card-likes svg { width: 11px; height: 11px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.card-tag {
  height: 20px; padding: 0 7px;
  background: var(--bg-tag); color: var(--text-muted);
  border-radius: 100px; font-size: 0.68rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px;
  transition: background var(--trans);
}
.model-card:hover .card-tag { background: var(--bg-tag-h); }

/* Buttons */
.wish-btn, .col-btn {
  position: absolute; background: var(--bg-card); border-radius: 50%;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--trans), background var(--trans), color var(--trans), transform var(--trans);
}
.model-card:hover .wish-btn,
.model-card:hover .col-btn { opacity: 1; pointer-events: all; }
.wish-btn.active { opacity: 1; }

.wish-btn { top: 8px; right: 8px; width: 30px; height: 30px; color: var(--text-muted); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.wish-btn:hover { color: #e53; transform: scale(1.1); }
.wish-btn.active { color: #e53; }
.wish-btn.active svg { fill: currentColor; }

.col-btn { top: 8px; right: 44px; width: 28px; height: 28px; color: var(--text-muted); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.col-btn:hover { color: var(--accent); transform: scale(1.1); }
.col-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state svg { margin: 0 auto 16px; opacity: 0.4; }
.empty-state h3 { font-size: 1.1rem; margin-bottom: 6px; color: var(--text-dim); }
.empty-state p { font-size: 0.875rem; }

/* ─── PAGINATION ─────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; padding: 28px 0 8px; }
.page-btn {
  min-width: 34px; height: 34px; padding: 0 8px;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--text-dim); font-weight: 500;
  display: grid; place-items: center; transition: all var(--trans);
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
.page-btn.disabled { opacity: 0.35; pointer-events: none; }
.page-ellipsis { display: grid; place-items: center; padding: 0 4px; color: var(--text-muted); font-size: 0.875rem; }
.results-count { text-align: center; font-size: 0.78rem; color: var(--text-muted); padding: 8px 0 0; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); margin-top: 20px; }
.footer a { color: var(--text-muted); font-size: 0.8rem; transition: color var(--trans); }
.footer a:hover { color: var(--accent); }

/* ─── PWA BAR ────────────────────────────────────────────────── */
.pwa-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: var(--bg-card); border-top: 1.5px solid var(--border);
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transform: translateY(100%); transition: transform 0.3s ease;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
}
.pwa-bar.show { transform: translateY(0); }
.pwa-bar-text { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; }
.pwa-bar-text img { width: 32px; height: 32px; border-radius: 8px; }
.pwa-bar-actions { display: flex; gap: 8px; }
.pwa-dismiss-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-tag); color: var(--text-muted); font-size: 1rem; }
.pwa-install-btn { height: 32px; padding: 0 14px; background: var(--accent); color: white; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; transition: background var(--trans); }
.pwa-install-btn:hover { background: var(--accent-h); }

/* ─── COLLECTION MODAL ───────────────────────────────────────── */
.col-modal-overlay { display: none; position: fixed; inset: 0; z-index: 600; background: var(--bg-overlay); align-items: center; justify-content: center; }
.col-modal-overlay.active { display: flex; }
.col-modal { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); width: 340px; max-width: calc(100vw - 32px); overflow: hidden; }
.col-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.col-modal-head h3 { font-size: 0.975rem; font-weight: 700; }
.col-modal-close { cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: 4px; }
.col-modal-close:hover { color: var(--text); background: var(--bg-tag); }
.col-modal-body { max-height: 280px; overflow-y: auto; padding: 8px; }
.col-modal-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-xs); cursor: pointer; transition: background var(--trans); }
.col-modal-item:hover { background: var(--bg-tag); }
.col-check { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border); flex-shrink: 0; display: grid; place-items: center; transition: background var(--trans), border-color var(--trans); }
.col-check.checked { background: var(--accent); border-color: var(--accent); }
.col-item-name { flex: 1; font-size: 0.875rem; }
.col-item-count { font-size: 0.75rem; color: var(--text-muted); font-family: var(--mono); }
.col-modal-foot { padding: 10px 16px; border-top: 1px solid var(--border); }
.col-new-btn { width: 100%; height: 34px; background: var(--bg-tag); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; color: var(--text-dim); transition: all var(--trans); }
.col-new-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
.hide-mobile { display: inline; }

@media (max-width: 1100px) {
  .model-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: -260px; top: 0; bottom: 0; z-index: 160;
    width: 250px; height: 100vh;
    background: var(--bg-sidebar); box-shadow: var(--shadow-md);
    padding: 16px 0; transition: left 0.25s ease;
  }
  .sidebar.open { left: 0; }
  .main { padding-left: 0; }
}
@media (max-width: 640px) {
  .hide-mobile { display: none; }
  .header-inner { gap: 8px; padding: 0 12px; }
  .model-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .layout { padding: 0 10px; }
  .main { padding: 12px 0 24px 0; }
  .lang-select { display: none; }
}
@media (max-width: 400px) {
  .model-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ─── PWA STANDALONE ─────────────────────────────────────────── */
body.pwa-standalone { padding-bottom: 60px; }