.platform-hub { background: var(--bg); color: #1A3A52; }
.platform-hub .platform-hub-hero { text-align: center; }
.platform-hub .platform-hub-search { max-width: 520px; margin: 1.25rem auto 0; display: flex; overflow: hidden; background: #fff; border-radius: 50px; box-shadow: 0 8px 24px rgba(11,30,51,.18); }
.platform-hub-search input { flex: 1; min-width: 0; padding: .9rem 1.3rem; border: 0; outline: 0; color: #0B1E33; background: transparent; font: inherit; }
.platform-hub-search button { padding: .9rem 1.5rem; border: 0; color: #fff; background: linear-gradient(135deg,#1A73C0,#0E3A5C); font: inherit; font-weight: 700; cursor: pointer; }
.platform-hub-main { max-width: 1100px; margin: 0 auto; padding: 1.6rem 2rem 3rem; }
.platform-hub-spotlight { margin-bottom: 1.6rem; }
.platform-hub-section-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.platform-hub-section-head h2 { margin: 0; color: #1A3A52; font-size: 1.15rem; font-weight: 800; }
.platform-hub-section-head span { color: #7AABBF; font-size: .8rem; font-weight: 600; }
.platform-hub-spot-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; }
.platform-hub-spot-card { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem; border: 1.5px solid #D6EAF8; border-radius: 14px; color: inherit; background: linear-gradient(135deg,#fff,#F0F7FF); box-shadow: 0 4px 14px rgba(11,30,51,.06); text-decoration: none; transition: transform .15s,box-shadow .15s; }
.platform-hub-spot-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11,30,51,.12); }
.platform-hub-rank { position: absolute; top: .65rem; right: .9rem; color: #2E86C1; font-size: .72rem; font-weight: 800; }
.platform-hub-spot-title { padding-right: 2rem; color: #0B1E33; font-size: .98rem; font-weight: 800; }
.platform-hub-spot-meta { color: #5D8AA0; font-size: .76rem; font-weight: 600; }
.platform-hub-controls { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.platform-hub-tabs { display: flex; flex: 1; gap: 8px; flex-wrap: wrap; min-width: 220px; }
.platform-hub-tab { padding: .5rem 1rem; border: 1.5px solid #AED6F1; border-radius: 20px; color: #2E86C1; background: #fff; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.platform-hub-tab.active,.platform-hub-tab:hover { color: #fff; border-color: #5BA8D4; background: #5BA8D4; }
.platform-hub-select { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.platform-hub-select label { color: #5D8AA0; font-size: .8rem; font-weight: 700; }
.platform-hub-select select { padding: .5rem .8rem; border: 1.5px solid #AED6F1; border-radius: 20px; color: #1A3A52; background: #fff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.platform-hub-count { margin: 0 0 1rem; color: #7AABBF; font-size: .8rem; font-weight: 600; }
.platform-hub-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1rem; }
.platform-hub-card { display: flex; min-height: 210px; flex-direction: column; padding: 1.1rem; border: 1.5px solid #C8DFF0; border-radius: 12px; color: inherit; background: #fff; box-shadow: 0 2px 8px rgba(91,168,212,.08); text-decoration: none; transition: transform .2s,border-color .2s,box-shadow .2s; }
.platform-hub-card:hover { transform: translateY(-2px); border-color: #5BA8D4; box-shadow: 0 6px 18px rgba(91,168,212,.2); }
.platform-hub-card.hidden { display: none; }
.platform-hub-card-title { margin-bottom: .45rem; color: #1A3A52; font-size: .95rem; font-weight: 700; line-height: 1.35; }
.platform-hub-card-copy { min-height: 3.7em; margin: 0 0 .7rem; color: #5D8AA0; font-size: .78rem; line-height: 1.5; }
.platform-hub-card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: .7rem; }
.platform-hub-score { padding: 2px 8px; border-radius: 6px; color: #16A34A; background: #EAF3DE; font-size: 1.2rem; font-weight: 800; }
.platform-hub-score.mid { color: #B7950B; background: #FEF9E7; }
.platform-hub-score.low { color: #C0392B; background: #FADBD8; }
.platform-hub-verdict { color: #7AABBF; font-size: .7rem; font-weight: 600; }
.platform-hub-metrics { display: grid; grid-template-columns: repeat(var(--metric-count),1fr); gap: 7px; margin-bottom: .8rem; }
.platform-hub-metric-label { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 3px; color: #7AABBF; font-size: .65rem; }
.platform-hub-track { height: 4px; overflow: hidden; border-radius: 2px; background: #E8EDF5; }
.platform-hub-fill { height: 100%; border-radius: 2px; background: #5BA8D4; }
.platform-hub-fill.competition.low { background: #16A34A; }
.platform-hub-fill.competition.mid { background: #F59E0B; }
.platform-hub-fill.competition.high { background: #DC2626; }
.platform-hub-card-cta { margin-top: auto; padding: .55rem; border: 1.5px solid #AED6F1; border-radius: 8px; color: #2E86C1; background: #F0F7FF; text-align: center; font-size: .8rem; font-weight: 700; }
.platform-hub-card:hover .platform-hub-card-cta { color: #fff; border-color: #5BA8D4; background: #5BA8D4; }
.platform-hub-empty { display: none; padding: 2rem; color: #5D8AA0; text-align: center; }
.platform-hub-empty.visible { display: block; }
@media (max-width:780px) { .platform-hub-spot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:600px) { .platform-hub-main { padding: 1.2rem 1rem 2.5rem; } .platform-hub-controls { gap: .7rem; } .platform-hub-select { width: calc(50% - .35rem); justify-content: space-between; } .platform-hub-select select { max-width: 72%; } .platform-hub-grid { grid-template-columns: 1fr 1fr; gap: .6rem; } .platform-hub-card { min-height: 220px; padding: .9rem; } .platform-hub-card-copy { display: none; } .platform-hub-search { margin-right: 1rem; margin-left: 1rem; } }
@media (max-width:480px) { .platform-hub-spot-grid { grid-template-columns: 1fr; } }
@media (max-width:380px) { .platform-hub-grid { grid-template-columns: 1fr; } .platform-hub-select { width: 100%; } }