:root {
  color-scheme: dark;
  --bg: #101114;
  --surface: #202227;
  --surface-alt: #292c32;
  --text: #f7f7f8;
  --muted: #a7acb5;
  --line: #3b3f47;
  --accent: #ed2638;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100vh; background: #090a0c; color: var(--text); letter-spacing: 0; }
button { font: inherit; }
.app-shell { width: min(100%, 430px); min-height: 100vh; margin: 0 auto; padding: 0 14px 28px; background: var(--bg); }
.topbar { display: flex; align-items: center; gap: 11px; min-height: 76px; border-bottom: 1px solid var(--line); }
.app-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: var(--accent); color: white; font-size: 20px; font-weight: 950; }
.topbar span { color: var(--accent); font-size: 10px; font-weight: 900; }
.topbar h1 { margin: 2px 0 0; font-size: 20px; }
.brand-list { display: grid; gap: 22px; padding-top: 18px; }
.brand-category { display: grid; gap: 10px; min-width: 0; }
.category-heading { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 8px; min-height: 38px; padding: 3px 5px 7px; border: 0; border-bottom: 1px solid #30333a; background: transparent; }
.category-spacer { width: 22px; height: 22px; }
.category-title { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
.category-title svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--category-accent, #f2c14e); fill: color-mix(in srgb, var(--category-accent, #f2c14e) 22%, transparent); filter: drop-shadow(0 0 4px var(--category-glow, transparent)); }
.category-title h2 { margin: 0; overflow: hidden; color: #f4f5f7; font-size: 15px; line-height: 1.2; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0,0,0,.55); white-space: nowrap; }
.category-count { display: grid; width: 22px; height: 22px; place-items: center; justify-self: center; border: 1px solid color-mix(in srgb, var(--category-accent, #f2c14e) 40%, #41454e); border-radius: 50%; background: transparent; color: #b9bec7; font-size: 11px; font-weight: 800; }
.category-items { display: grid; gap: 9px; }
.brand-card { display: grid; grid-template-columns: 22px 56px minmax(0, 1fr) 42px; align-items: center; gap: 10px; min-height: 78px; padding: 10px; border: 1px solid var(--item-border, var(--line)); border-radius: 8px; background: var(--item-surface, var(--surface)); box-shadow: 0 7px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.brand-card:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); }
.brand-rank { color: #e4e5e7; font-size: 13px; font-weight: 900; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.brand-logo { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: #111216; color: #777d87; box-shadow: 0 3px 8px rgba(0,0,0,.28); font-size: 20px; font-weight: 900; }
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-copy { min-width: 0; }
.brand-name-row { display: flex; align-items: center; gap: 5px; min-width: 0; margin-bottom: 6px; }
.brand-copy h2 { min-width: 0; margin: 0; overflow: hidden; color: #f7f7f8; font-size: 16px; line-height: 1.15; text-overflow: ellipsis; text-shadow: 0 1px 7px rgba(0,0,0,.5); white-space: nowrap; }
.brand-rating { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; color: #4ade80; font-size: 12px; font-weight: 900; }
.brand-rating svg { width: 12px; height: 12px; fill: currentColor; }
.brand-copy p { display: block; width: max-content; max-width: 100%; min-height: 27px; margin: 0; overflow: hidden; padding: 5px 9px; border: 1px solid var(--item-accent, #a7acb5); border-radius: 5px; background: color-mix(in srgb, var(--item-accent, #a7acb5) 82%, white); color: #111216; box-shadow: 0 0 10px var(--item-glow, transparent); font-size: 12px; font-weight: 900; line-height: 1.25; text-overflow: ellipsis; text-shadow: none; white-space: nowrap; }
.open-button { display: grid; place-items: center; width: 40px; height: 44px; border: 0; border-radius: 8px; background: var(--item-button, #737579); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,.13); cursor: pointer; }
.open-button svg { width: 20px; height: 20px; }
.empty-state { display: grid; justify-items: center; gap: 9px; padding: 80px 20px; color: var(--muted); }
.empty-state[hidden] { display: none; }
.empty-state svg { width: 28px; height: 28px; }
@media (max-width: 330px) {
  .app-shell { padding-right: 9px; padding-left: 9px; }
  .brand-card { grid-template-columns: 18px 48px minmax(0, 1fr) 36px; gap: 7px; }
  .brand-logo { width: 48px; height: 48px; }
  .open-button { width: 36px; }
}