:root { --radar-accent: #b7a5ff; --radar-muted: #a6afc0; }
body { background: #101218; }
header { max-width: 1344px; margin: auto; padding: 24px 32px 14px; justify-content: space-between; }
header h1 { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: -.2px; }
.brand-mark { display: inline-grid; place-items: center; background: #252336; color: #c4b7ff; border: 1px solid #42395e; border-radius: 9px; width: 29px; height: 29px; font-size: 21px; }
#generated { font-size: 11px; max-width: 50%; text-align: right; }
.tabs { max-width: 1344px; margin: auto; padding: 0 32px 12px; align-items: center; gap: 20px; border-bottom-color: #262b36; position: relative; z-index: 5; }
.tab { background: transparent; border: none; border-radius: 6px; padding: 9px 12px; min-height: 40px; }
.tab.active { color: #d4caff; background: #282339; }
.other-platforms { position: relative; }
.other-platforms summary { color: var(--radar-muted); font-size: 13px; cursor: pointer; list-style: none; padding: 9px 4px; }
.other-platforms summary::-webkit-details-marker { display: none; }
.other-platform-buttons { position: absolute; left: 0; top: 42px; width: min(640px, calc(100vw - 70px)); display: flex; flex-wrap: wrap; gap: 6px; padding: 16px; background: #1b1f29; border: 1px solid #343b4a; border-radius: 12px; box-shadow: 0 18px 45px #0008; }
main { max-width: 1344px; margin: auto; padding: 28px 32px 64px; }
body.radar-view main { overflow: visible; }
footer { max-width: 1280px; margin: auto; color: #8590a4; font-size: 12px !important; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #c4b7ff; outline-offset: 4px; }
.radar-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 13px 0 30px; }
.eyebrow { color: #9c8dd1; letter-spacing: 2.1px; font-size: 10px; font-weight: 700; margin: 0 0 10px; }
.radar-hero h2 { font-size: clamp(26px, 3.2vw, 39px); font-weight: 650; letter-spacing: -1.2px; margin: 0 0 13px; color: #f3f3fa; line-height: 1.35; }
.radar-intro { font-size: 14px; color: var(--radar-muted); margin: 0; }
.radar-update { flex: none; font-size: 12px; color: #d3d8e4; line-height: 1.8; text-align: right; }
.radar-update > span:not(.live-dot) { display: block; font-size: 11px; color: #8d97aa; }
.radar-update a { color: #b5a5e9; text-decoration: none; font-size: 11px; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9a8bbe; margin-right: 7px; vertical-align: middle; }
.signal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 44px; }
.signal-tile { min-width: 0; border: 1px solid #2b303d; border-radius: 12px; padding: 20px; text-align: left; color: #e3e7ef; background: #191d26; cursor: pointer; transition: background .15s, border-color .15s; }
.signal-tile:hover { border-color: #666075; }
.signal-tile.selected { border-color: #aa96ef; background: #262137; box-shadow: inset 0 0 0 1px #aa96ef33; }
.signal-label { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.signal-label strong { margin-left: auto; font-size: 27px; font-weight: 550; font-variant-numeric: tabular-nums; line-height: 1; }
.signal-icon { font-size: 23px; line-height: 1; font-weight: 400; }
.hot .signal-icon, .signal-tag.hot { color: #efb575; }
.rising .signal-icon, .signal-tag.rising { color: #6ddfb1; }
.steady .signal-icon, .signal-tag.steady { color: #85b7ef; }
.watch .signal-icon, .signal-tag.watch { color: #bfacf8; }
.signal-hint { display: block; color: #909bad; font-size: 11px; margin-top: 13px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 19px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-heading h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.3px; color: #e9edf5; }
.all-signals { background: transparent; color: var(--radar-muted); border: 1px solid #333947; border-radius: 8px; padding: 9px 14px; cursor: pointer; font-size: 12px; min-height: 40px; }
.all-signals.selected { background: #282339; color: #d6caff; border-color: #65557e; }
.radar-filters { display: flex; align-items: center; gap: 16px; margin-bottom: 17px; }
.radar-search { display: flex; align-items: center; gap: 11px; border: 1px solid #303746; background: #171b23; border-radius: 9px; padding: 0 15px; flex: 1; min-width: 200px; }
.radar-search > span { color: #8f99aa; font-size: 25px; line-height: 1; }
.radar-search input { color: #e6eaf4; border: 0; background: transparent; padding: 13px 0; min-width: 0; width: 100%; font-size: 13px; }
.radar-search input::placeholder { color: #818ca1; }
.radar-selects { display: flex; gap: 9px; }
.radar-selects label { display: flex; align-items: center; gap: 7px; color: #8e98aa; font-size: 11px; }
.radar-selects select { max-width: 154px; min-height: 44px; padding: 9px 25px 9px 11px; border: 1px solid #303746; border-radius: 8px; background: #191d26; color: #d4dbe9; font-size: 12px; }
.category-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
.category-chips button { color: #99a4b7; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 7px 11px; cursor: pointer; font-size: 12px; min-height: 35px; }
.category-chips button:hover { background: #202530; }
.category-chips button.selected { color: #e1d8ff; background: #302940; border-color: #4a3e62; }
.results-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 17px; border-top: 1px solid #292f3a; color: #8792a4; font-size: 11px; margin-bottom: 18px; }
.results-meta strong { color: #c8d0df; font-weight: 500; margin-right: 10px; }
.result-count { color: #8b96aa; }
#radar-reset { background: none; border: 0; color: #c2b1f7; cursor: pointer; padding: 4px 0 4px 10px; font-size: 11px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; align-items: start; }
.product-card { min-width: 0; background: #191d26; border: 1px solid #2c3341; padding: 21px 21px 0; border-radius: 14px; transition: border-color .15s; }
.product-card:hover { border-color: #55506c; }
.product-card-head { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.product-card-head > div { min-width: 0; }
.product-icon { width: 49px; height: 49px; border-radius: 11px; object-fit: cover; flex: none; background: #292c3b; border: 1px solid #3b4050; }
.product-icon.initial { display: grid; place-items: center; color: #c3b5f1; font-size: 21px; font-weight: 600; }
.product-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; color: #eef0f7; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.product-name:hover { color: #cdbefb; }
.product-category { display: block; color: #929daf; font-size: 11px; margin-top: 5px; }
.product-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; line-height: 1.6; color: #b3bed0; font-size: 13px; margin: 17px 0; overflow-wrap: anywhere; }
.product-description.unavailable { color: #858fa2; }
.product-reason { display: flex; gap: 9px; align-items: flex-start; background: #222533; border: 1px solid #303548; border-radius: 8px; padding: 10px 11px; min-height: 58px; }
.product-reason > span { color: #bfa9ff; font-size: 18px; line-height: 1.2; }
.product-reason p { margin: 0; font-size: 12px; line-height: 1.6; color: #d2cbea; overflow-wrap: anywhere; }
.product-tags { display: flex; flex-wrap: wrap; gap: 5px; min-height: 46px; align-content: center; padding: 10px 0; }
.source-tag, .signal-tag { font-size: 10px; padding: 3px 6px; border-radius: 4px; line-height: 1.3; }
.source-tag { color: #9faabd; background: #242a35; }
.signal-tag { background: #272a35; }
.product-card-bottom { position: relative; border-top: 1px solid #2b3240; margin: 0 -21px; }
.product-evidence summary { color: #a8b3c5; padding: 13px 125px 13px 21px; font-size: 11px; cursor: pointer; list-style: none; min-height: 46px; }
.product-evidence summary::-webkit-details-marker { display: none; }
.product-evidence summary > span { padding-left: 5px; }
.product-evidence[open] summary { color: #cfbffc; }
.visit-product { position: absolute; top: 0; right: 0; padding: 13px 21px 13px 8px; min-height: 46px; color: #c3b2f9; font-size: 11px; text-decoration: none; }
.visit-product:hover, .section-link:hover { text-decoration: underline; }
.evidence-content { padding: 0 21px 18px; font-size: 11px; }
.evidence-row { padding: 10px 0; border-top: 1px solid #2c3443; }
.evidence-row a { color: #d2c7f0; text-decoration: none; overflow-wrap: anywhere; }
.evidence-row p { color: #b4bed0; margin: 5px 0; }
.evidence-row small { color: #8896aa; font-size: 10px; }
.history-pending, .observation-note { color: #929daf; font-size: 10px; line-height: 1.7; }
.rank-history { padding: 12px 0; }
.rank-history strong { color: #a4aec1; font-size: 10px; font-weight: 500; }
.rank-history > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rank-history span { flex: 1; min-width: 31px; text-align: center; padding: 5px 2px; background: #222936; border-radius: 5px; }
.rank-history b, .rank-history small { display: block; font-size: 10px; }
.rank-history b { color: #d1c2f9; }
.rank-history small { color: #919eb3; }
.load-more { display: block; margin: 26px auto 0; padding: 12px 24px; border: 1px solid #3c4352; border-radius: 9px; background: #1e2330; color: #ddd4f8; font-size: 12px; cursor: pointer; }
.load-more span { padding-left: 12px; color: #909bb0; }
.results-end { font-size: 11px; text-align: center; color: #7d899d; padding-top: 15px; }
.radar-empty { text-align: center; padding: 50px 20px; background: #171b24; border: 1px dashed #3b4353; border-radius: 14px; }
.radar-empty > span { font-size: 33px; color: #af9fdc; }
.radar-empty h4 { margin: 7px 0 12px; color: #d9ddec; font-size: 18px; font-weight: 500; }
.radar-empty p { margin: auto; color: #98a5ba; font-size: 13px; max-width: 460px; }
.radar-empty button { margin-top: 23px; color: #cbb8ff; border: 1px solid #5a4b76; background: #282337; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
.ph-section { margin-top: 50px; padding-top: 30px; border-top: 1px solid #2a303d; }
.ph-section .section-heading { margin-bottom: 11px; }
.ph-section h3 { display: flex; align-items: center; gap: 9px; }
.ph-eyebrow { color: #d9937c; }
.ph-logo { background: #ab523b; color: #fff; border-radius: 50%; width: 24px; height: 24px; font-size: 16px; text-align: center; line-height: 24px; }
.section-link { color: #bcb1d6; font-size: 12px; text-decoration: none; white-space: nowrap; }
.section-description { color: #8c98ad; font-size: 12px; margin: 0 0 21px; }
.ph-grid { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; grid-auto-flow: row; margin: 0; }
.ph-grid li { display: flex; align-items: center; gap: 12px; padding: 15px 2px; border-bottom: 1px solid #292f3c; min-width: 0; }
.ph-rank { color: #8793a8; font-size: 13px; font-variant-numeric: tabular-nums; width: 20px; text-align: center; flex: none; }
.product-icon.small { width: 37px; height: 37px; border-radius: 8px; }
.ph-product { flex: 1; min-width: 0; }
.ph-product a { color: #e0e5ef; font-size: 13px; font-weight: 500; text-decoration: none; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ph-product p { color: #8c99ae; font-size: 11px; margin: 4px 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ph-votes { color: #c9aa9f; text-align: center; font-size: 12px; flex: none; border: 1px solid #4a3c3b; padding: 5px 9px; border-radius: 6px; }
.ph-votes small { display: block; color: #8f8587; font-size: 9px; }
.source-empty { padding: 25px; background: #191b23; border: 1px dashed #3a3b45; border-radius: 12px; color: #a3acbd; font-size: 13px; }
.source-empty strong { color: #cdc7cf; font-weight: 500; }
.source-empty p { font-size: 12px; margin: 8px 0 14px; overflow-wrap: anywhere; }
.source-empty a { color: #c9ad9f; text-decoration: none; font-size: 12px; }
.radar-methodology { margin-top: 39px; border: 1px solid #2e3542; border-radius: 11px; background: #171b23; }
.radar-methodology > summary { display: flex; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; padding: 18px 20px; color: #b5bfd1; font-size: 12px; }
.radar-methodology > summary span:last-child { color: #8592a8; font-size: 11px; }
.methodology-body { padding: 0 20px 22px; font-size: 12px; color: #9da9bd; }
.methodology-body > p { line-height: 1.9; white-space: pre-line; }
.methodology-signals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 22px 0; }
.methodology-signals strong, .methodology-signals span { display: block; }
.methodology-signals strong { color: #cbbbea; font-size: 12px; margin-bottom: 5px; font-weight: 500; }
.methodology-signals span { font-size: 11px; color: #8e9bb0; }
.source-health { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; padding-top: 20px; border-top: 1px solid #2f3541; }
.source-health-item { display: flex; gap: 9px; }
.source-health-item strong, .source-health-item span { display: block; }
.source-health-item strong { color: #c3ccdc; font-weight: 500; font-size: 12px; }
.source-health-item span { color: #8d9bb1; font-size: 10px; margin-top: 4px; }
.source-health-item p { color: #b09d92; font-size: 11px; margin: 6px 0 0; overflow-wrap: anywhere; }
.health-dot { width: 6px; height: 6px; border-radius: 50%; background: #8a93a7; flex: none; margin-top: 6px !important; }
.health-dot.ok { background: #74bc9c; }
.health-dot.error { background: #d3a475; }
@media (max-width: 1050px) {
  .radar-filters { flex-wrap: wrap; }
  .radar-search { min-width: 100%; }
  .radar-selects { width: 100%; }
  .radar-selects label { flex: 1; }
  .radar-selects select { flex: 1; max-width: none; }
  .signal-tile { padding: 17px 13px; }
  .signal-label { font-size: 12px; gap: 7px; }
  .signal-label strong { font-size: 23px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  header { padding: 20px 18px 12px; }
  #generated { display: none; }
  .tabs { padding: 0 18px 10px; }
  main { padding: 24px 18px 40px; }
  footer { padding: 20px 18px; }
  .radar-hero { display: block; padding: 5px 0 24px; }
  .radar-hero h2 { font-size: 28px; letter-spacing: -.7px; }
  .radar-intro { font-size: 12px; line-height: 1.8; max-width: 320px; }
  .radar-update { text-align: left; margin-top: 16px; font-size: 11px; }
  .radar-update > span:not(.live-dot) { display: inline; margin-left: 9px; font-size: 10px; }
  .radar-update a { display: none; }
  .signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 30px; }
  .signal-tile { padding: 15px 12px; }
  .signal-hint { font-size: 10px; margin-top: 10px; }
  .signal-icon { font-size: 20px; }
  .signal-label strong { font-size: 24px; }
  .section-heading h3 { font-size: 19px; }
  .radar-selects { flex-wrap: wrap; gap: 9px; }
  .radar-selects label { min-width: 28%; flex-direction: column; align-items: stretch; gap: 5px; }
  .radar-selects select { width: 100%; min-width: 0; padding-left: 8px; font-size: 11px; }
  .category-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 16px; padding: 0 18px 5px; scrollbar-width: thin; }
  .category-chips button { flex: none; min-height: 44px; }
  .results-meta { align-items: flex-start; font-size: 10px; }
  .results-meta > span:last-child { max-width: 46%; text-align: right; }
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .product-card { padding-top: 20px; }
  .product-description { min-height: 0; }
  .product-reason { min-height: 0; }
  .ph-section { margin-top: 33px; padding-top: 24px; }
  .ph-section h3 { font-size: 16px; gap: 6px; }
  .ph-section .section-link { font-size: 10px; }
  .ph-logo { width: 20px; height: 20px; font-size: 13px; line-height: 20px; }
  .section-description { font-size: 10px; line-height: 1.7; }
  .ph-grid { grid-template-columns: minmax(0, 1fr); }
  .source-empty { padding: 20px; }
  .radar-methodology > summary { padding: 16px; }
  .radar-methodology > summary span:last-child { font-size: 10px; }
  .methodology-signals { grid-template-columns: 1fr 1fr; }
  .source-health { grid-template-columns: 1fr; }
  .other-platform-buttons { left: -100px; width: calc(100vw - 36px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
.radar-source-notices { margin: -8px 0 24px; padding: 11px 15px; border: 1px solid #494038; background: #24201e; border-radius: 9px; }
.radar-source-notices p { margin: 5px 0; display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: #b9a999; line-height: 1.7; }
.radar-source-notices strong { color: #d1bbaa; font-weight: 500; white-space: nowrap; }
.radar-source-notices p > span:last-child { overflow-wrap: anywhere; }
.notice-dot { display: inline-block; height: 5px; width: 5px; flex: none; border-radius: 50%; background: #cc9f76; align-self: center; }
.stale-tag { color: #d4ac7e; font-size: 10px; padding: 3px 6px; border-radius: 4px; line-height: 1.3; background: #362d23; }
.evidence-stale { display: block; color: #d4ac7e; font-size: 10px; margin-bottom: 4px; }
.ph-source-note { font-size: 11px; color: #c5a88f; margin: -8px 0 20px; padding: 10px 12px; border-left: 2px solid #8c6550; background: #24211f; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 650px) { .radar-source-notices p { flex-wrap: wrap; gap: 3px 7px; } .radar-source-notices p > span:last-child { flex-basis: 100%; padding-left: 12px; } }
.radar-shortcuts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.radar-shortcuts a { color: #bbaadd; background: #211f2c; border: 1px solid #393247; border-radius: 6px; padding: 6px 11px; font-size: 11px; text-decoration: none; }
.radar-shortcuts a:hover { color: #e5d9ff; border-color: #75618e; }
#radar-discover, #radar-ph, #radar-methodology { scroll-margin-top: 24px; }
.filter-context-note { font-size: 11px; line-height: 1.7; color: #9babc1; background: #1a2230; border-radius: 7px; padding: 10px 12px; margin: -3px 0 17px; }
@media (max-width: 1200px) { .radar-filters { flex-wrap: wrap; } .radar-search { min-width: 100%; } .radar-selects { width: 100%; } .radar-selects label { flex: 1; } .radar-selects select { flex: 1; max-width: none; } }
@media (max-width: 650px) { .radar-selects label { min-width: 40%; } .radar-shortcuts a { min-height: 40px; display: inline-flex; align-items: center; } }
.radar-source-notices { padding: 8px 13px; }
.radar-source-notices p { margin: 2px 0; }
@media (max-width: 650px) { .radar-source-notices p { flex-wrap: nowrap; } .radar-source-notices p > span:last-child { flex-basis: auto; padding-left: 0; } .radar-update { line-height: 1.9; } .radar-update > span:not(.live-dot) { display: block; margin-left: 0; } }