:root { --em: #3A8F67; --em-soft: color-mix(in srgb, var(--em) 14%, transparent); --f-num: .75; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.wrap .card.hero { padding: 0; }   
.hero .copy .txt { background: color-mix(in srgb, var(--surface-1) 90%, transparent); border: 1px solid var(--border); }
.hero .side { background: var(--surface-1); }
.hero .picks { border-top: 1px solid var(--border); }
.hero .picks .pview .pick { background: var(--surface-0); box-shadow: none; }
.shop .slide.on { opacity: 1; }
@media (max-width: 860px) {
  .hero .copy .txt { background: var(--surface-1); border: 0; }
}
@media (prefers-reduced-motion: reduce) { .shop .slide { transition: none; } }
.wrap .card.hero .copy::before { inset: 14px auto auto 50%; transform: translateX(-50%); width: min(calc(100% - 28px), 552px); height: auto;
  aspect-ratio: 1 / 1; box-sizing: border-box; border: 3px solid var(--em); border-radius: 0; background-size: 100% 100%; background-position: center; }
.hero .copy .txt { background: color-mix(in srgb, var(--surface-1) 25%, transparent);
  text-shadow: 0 0 2px var(--surface-0), 0 0 2px var(--surface-0), 0 1px 3px var(--surface-0), 0 0 8px var(--surface-0), 0 0 14px var(--surface-0); }
.hero .copy .txt p { color: var(--text-primary); font-weight: 500; }
.hero .copy .txt .btn { text-shadow: none; }
@media (min-width: 861px) { .wrap .card.hero .copy { align-items: flex-end; min-height: 580px; } }     
@media (max-width: 860px) {
  .wrap .card.hero .copy::before { position: static; inset: auto; transform: none; display: block; width: auto; height: auto; aspect-ratio: 1 / 1;
    margin: 12px 12px 0; border: 3px solid var(--em); border-radius: 0; background-size: 100% 100%; }
  .hero .copy .txt { text-shadow: none; }
}
.spf-panel { background: var(--surface-1); border: 2px solid var(--border); border-radius: 0; box-shadow: none; }
.spf-foot, .spf-phead { background: var(--surface-1); }
.spf-pre, .spf-opt, .spf-chip { background: var(--surface-1); border-radius: 0; min-height: 44px; transition: background-color .15s ease; }
.spf-chip { background: var(--surface-0); border-color: var(--em); }
.spf-pre[aria-pressed="true"], .spf-opt[aria-pressed="true"], #tab-sports .seg button[aria-pressed="true"] { background: var(--em); color: #000; border-color: var(--em); }
.spf-pre.spf-mine { border-style: dashed; }
.spfn { opacity: var(--f-num); font-variant-numeric: tabular-nums; }
.spf-pre[aria-pressed="true"] .spfn, .spf-opt[aria-pressed="true"] .spfn, #tab-sports .seg button[aria-pressed="true"] .spfn { opacity: 1; }
.spf-count { font-family: var(--mono); opacity: var(--f-num); }
.spf-select, .spf-panel input[type="number"], .spf-panel input[type="text"] { background: var(--surface-0); border-radius: 0; min-height: 44px; }
.spf-panel input[type="range"] { accent-color: var(--em); }
.spf-list { background: var(--surface-1); border-radius: 0; box-shadow: none; }
.spf-list li[aria-selected="true"] { background: var(--em-soft); outline-color: var(--em); }
.spf-grp legend { letter-spacing: .02em; color: var(--text-primary); }
.spf .btn.primary, .spf-panel .btn.primary { background: var(--em); color: #000; border-color: var(--em); }
.spf-open[aria-expanded="true"] { border-color: var(--em); box-shadow: inset 0 -3px 0 var(--em); }
@media (max-width: 700px) {
  .spf-panel { border-radius: 0; border-top: 3px solid var(--em); }
  .spf-presets { scrollbar-width: none; }
}
@media (prefers-reduced-motion: reduce) { .spf-pre, .spf-opt, .spf-chip { transition: none; } }
.card.track .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card.track .kpis > div { border: 1px solid var(--border); border-radius: 0; padding: 8px 10px; background: var(--surface-0); }
.card.track .kpis .m { display: block; font-size: 12px; color: var(--text-secondary); }
.card.track .kpis .v { display: block; font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.card.track .note { margin: 10px 0 0; font-size: 12px; }
@media (max-width: 600px) {
  html .themebar { top: auto; bottom: 12px; left: 12px; right: auto; transform: none; flex-direction: row; }
  html .themebar .seg { flex-direction: row; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
  html .themebar .seg button { writing-mode: horizontal-tb; padding: 8px 10px; min-height: 36px; font-size: 11px; }
  html .themebar .seg button + button { border-top: 0; border-left: 2px solid var(--border); }
  html .wrap, html footer .in { padding-right: 16px; }
  html body { padding-bottom: 56px; }
}