/* Hype · neutral one-stop shop, loaded last. */
:root {
  --bg: #FFFFFF; --bg2: #F5F5F5; --bg3: #E5E5E5; --ink: #171717; --ink2: #525252; --line: #E5E5E5;
  --hype: #171717; --hype-ink: #FFFFFF; --hype-soft: #F0F0F0; --link: #171717;
  --shadow: 0 10px 30px rgba(0, 0, 0, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212; --bg2: #1E1E1E; --bg3: #2B2B2B; --ink: #F5F5F5; --ink2: #A3A3A3; --line: #2E2E2E;
    --hype: #F5F5F5; --hype-ink: #121212; --hype-soft: #262626; --link: #F5F5F5;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121212; --bg2: #1E1E1E; --bg3: #2B2B2B; --ink: #F5F5F5; --ink2: #A3A3A3; --line: #2E2E2E;
  --hype: #F5F5F5; --hype-ink: #121212; --hype-soft: #262626; --link: #F5F5F5;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
@media (prefers-contrast: more) {
  :root { --ink2: #3D3D3D; --line: #8A8A8A; --bg3: #D4D4D4 }
  :root[data-theme="dark"] { --ink2: #D4D4D4; --line: #737373; --bg3: #3A3A3A }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink2: #D4D4D4; --line: #737373; --bg3: #3A3A3A }
}

.top-search { max-width: 680px }
#top .top-search input { border-color: var(--line) }
.top-search .icon-btn { border-color: var(--line) }

.depts .chip { gap: 8px }
.depts .chip .ic { width: 18px; height: 18px; stroke-width: 2 }

.shop-top { display: flex; align-items: center; justify-content: space-between; gap: 4px 20px; flex-wrap: wrap; margin: 0 0 20px }
.shop-h { margin: 0; min-width: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; font-weight: 800; letter-spacing: -.03em; text-wrap: balance }
.shop-top .pulse { margin: 0; padding: 0; background: transparent; border-radius: 0; gap: 8px }
.shop-top .pulse .link { margin-left: 4px; min-width: 44px; justify-content: center }

.composer { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; border-radius: 16px; margin: 0 0 24px }

.grid { gap: 20px; margin-bottom: 28px }
.card { gap: 10px; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg) }
.card:hover { box-shadow: var(--shadow) }
.card .thumb { border: 0; border-radius: 14px }
.card .meta { padding: 0 4px }
.row-scroll { gap: 16px }
.host-tile { border-radius: 20px }
.band { margin-top: 12px }
.band-h { font-size: 20px; margin-bottom: 14px }
@media (prefers-reduced-motion: no-preference) { .card { transition: box-shadow .15s } }

.art { color: #FFFFFF; background: radial-gradient(120% 90% at 0% 0%, hsl(var(--h) 12% 40%) 0%, transparent 62%), linear-gradient(135deg, hsl(var(--h) 8% 28%), hsl(var(--h) 6% 15%)) }
.art.look-poster { background: hsl(var(--h) 10% 91%); color: #171717 }
.art.look-neon { background: radial-gradient(80% 80% at 80% 20%, hsl(var(--h) 8% 24%) 0%, #0C0C0C 70%); color: #F5F5F5; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16) }
.art.look-neon .art-t { text-shadow: none }
.art.look-split { background: linear-gradient(115deg, hsl(var(--h) 9% 38%) 0 54%, hsl(var(--h) 6% 20%) 54% 100%) }
.art.look-minimal { background: hsl(var(--h) 6% 96%); color: #171717 }
.art.look-minimal .art-ic { color: #525252 }
.art.look-stripes { background: repeating-linear-gradient(135deg, hsl(var(--h) 8% 33%) 0 18px, hsl(var(--h) 8% 28%) 18px 36px) }
.card.ad .thumb .art { background: linear-gradient(135deg, #3A3A3A, #141414) }
.thumb .art:not(.look-poster):not(.look-minimal):not(.look-neon) .art-t { background: #171717 }

.av, .cat-dot, .comm-ic { background: hsl(var(--h) 12% 32%) }
.av.sys { background: var(--bg3); color: var(--ink) }

.tag.urgent { background: var(--warn-soft); color: var(--warn) }
.meter.low .m-row span, .meter.full .m-row span { color: var(--warn) }
.meter.low .m-bar i, .meter.full .m-bar i, .mini-bar.low i, .mini-bar.full i { background: var(--warn) }

@media (max-width: 759px) {
  .shop-top { margin-bottom: 16px }
  .shop-h { font-size: 22px }
  .grid { gap: 16px }
}

/* Plain navigation: no highlighted tiles or pills. Keep selection semantics,
   comfortable targets and the existing visible keyboard focus outline. */
.depts .chip,
.depts .chip.on,
.depts .chip:hover,
.nav-i,
.nav-i.on,
.nav-i:hover,
.tab,
.tab.on,
.tab:hover,
.seg a,
.seg a.on,
.seg a:hover {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  border: 0;
  border-radius: 0;
  min-height: 44px;
}
.depts .chip,
.nav-i,
.tab,
.seg a { font-weight: 500 }
.depts .chip.on > span,
.nav-i.on > span:last-child,
.tab.on > span:last-child,
.seg a.on {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.depts .chip:hover > span,
.nav-i:hover > span:last-child,
.tab:hover > span:last-child,
.seg a:hover { text-decoration: underline; text-underline-offset: 6px }
.seg { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 4px }
.depts .chip { padding-inline: 12px }
/* Consistent outline icons instead of filled active-tab highlights. */
.nav-i.on .icw .ic-line,
.tab.on .icw .ic-line { display: block }
.nav-i.on .icw .ic-fill,
.tab.on .icw .ic-fill { display: none }
.tab-create .ic { background: transparent; color: var(--ink); border-radius: 0 }
.tabs { box-shadow: none }
/* Composer choices use the same quiet selection treatment. */
.q-kinds .chip-r span,
.q-kinds .chip-r input:checked + span {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  min-height: 44px;
  padding-inline: 12px;
  font-weight: 500;
}
.q-kinds .chip-r input:checked + span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}