/* #356 Themes: matching UI kits (button + dropdown menu + nav/phone menu + card/control) */
.th-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.th-chip { appearance: none; cursor: pointer; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #0b0f18; color: var(--muted); font: 700 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.th-chip b { font-weight: 800; color: var(--ink); opacity: .7; }
.th-chip:hover { color: var(--ink); border-color: #334155; }
.th-chip.on { color: #0b0f18; background: linear-gradient(115deg, var(--accent), var(--accent2)); border-color: transparent; }
.th-chip.on b { color: #0b0f18; }
.th-chip:focus-visible, .th-src:focus-visible, .th-jump a:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.th-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.th-jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: #0b0f18; color: var(--ink); font: 600 12px/1 var(--sans); text-decoration: none; }
.th-jump a:hover { border-color: #334155; text-decoration: none; }
.th-jump a[hidden] { display: none; }
.th-jump i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.theme { margin: 0 0 24px; padding: 18px; border: 1px solid var(--line); border-top: 3px solid var(--tc, var(--accent)); border-radius: var(--radius); background: linear-gradient(170deg, color-mix(in srgb, var(--tc, #7c5cff) 9%, transparent), transparent 40%), var(--panel); scroll-margin-top: 16px; }
.theme[hidden] { display: none; }
.th-kicker { font: 700 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tc, var(--accent)); }
.th-head h2 { margin: 6px 0 4px; font: 800 24px/1.15 var(--sans); letter-spacing: -.02em; }
.th-head p { margin: 0 0 12px; color: var(--muted); max-width: 78ch; }
.th-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.th-swatch { display: flex; gap: 4px; }
.th-swatch i { width: 28px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,.14); }
.th-roles { font: 700 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.th-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.th-piece { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #0b0f18; overflow: hidden; }
.th-piece-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 0; }
.th-role { font: 800 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tc, var(--accent)); }
.th-src { font: 600 11px/1 var(--mono); color: var(--muted); white-space: nowrap; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; }
.th-src:hover { color: var(--ink); border-color: var(--tc, #334155); text-decoration: none; }
.th-piece h3 { margin: 6px 12px 10px; font: 700 15px/1.25 var(--sans); overflow-wrap: anywhere; }
.th-pv { position: relative; min-height: var(--h, 300px); background: #0a0d16; border-top: 1px solid var(--line); }
.th-pv iframe { display: block; width: 100%; border: 0; background: #0a0d16; }
.th-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: .06em; }
.th-pv.ready .th-wait { display: none; }
.th-pv:not(.ready)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.035) 50%, transparent 70%) 0 0 / 200% 100%; animation: th-shimmer 1.4s linear infinite; }
@keyframes th-shimmer { to { background-position: -200% 0; } }
@media (max-width: 560px) {
  .theme { padding: 14px 12px; }
  .th-head h2 { font-size: 21px; }
  .th-set { grid-template-columns: minmax(0, 1fr); }
  .th-pv { min-height: var(--hm, 300px); }
}
@media (prefers-reduced-motion: reduce) { .th-pv:not(.ready)::before { animation: none; } .theme { scroll-margin-top: 0; } }