.bottom-nav { grid-template-columns: repeat(5, 1fr); }
.hotspots-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.hotspots-header span { font-size:12px; color:var(--muted); }
.hotspots-header h2 { font-size:22px; margin:4px 0 0; }
.hotspot-platforms { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:#e8e8e8; padding:4px; border-radius:7px; }
.hotspot-platforms button,.hotspot-categories button { border:0; background:transparent; color:#666; min-height:40px; font-size:12px; }
.hotspot-platforms button.active { background:#171717; color:#fff; border-radius:5px; }
.hotspot-categories { display:flex; gap:7px; overflow-x:auto; padding:14px 0 9px; scrollbar-width:none; }
.hotspot-categories::-webkit-scrollbar { display:none; }
.hotspot-categories button { background:#fff; border:1px solid var(--line); border-radius:5px; padding:0 12px; white-space:nowrap; }
.hotspot-categories button.active { background:#333; color:#fff; border-color:#333; }
.hotspot-status { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; margin:4px 1px 10px; }
.hotspot-list { border-top:1px solid var(--line); }
.hotspot-item { display:grid; grid-template-columns:30px 1fr auto; gap:10px; padding:15px 0; border-bottom:1px solid var(--line); align-items:start; }
.hotspot-rank { font-size:18px; font-weight:700; color:#aaa; line-height:1.2; }
.hotspot-copy h3 { font-size:14px; line-height:1.45; margin:0 0 7px; }
.hotspot-meta { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); }
.hotspot-meta span { background:#ececec; border-radius:3px; padding:3px 5px; }
.hotspot-actions { display:flex; gap:4px; }
.hotspot-actions button,.hotspot-actions a { width:40px; height:40px; border:0; background:#eee; color:#222; border-radius:5px; display:grid; place-items:center; }
.hotspot-actions button.saved { background:#171717; color:#fff; }
.hotspot-actions svg { width:16px; }
.hotspot-idea { grid-column:2/4; background:#f1f1f1; border-left:3px solid #333; padding:12px; font-size:12px; line-height:1.7; white-space:pre-wrap; }
.hotspot-empty { padding:46px 20px; text-align:center; color:var(--muted); font-size:13px; }
.hotspot-disclaimer { display:flex; gap:7px; align-items:flex-start; color:var(--muted); font-size:11px; line-height:1.5; margin:16px 0; }
.hotspot-disclaimer svg { width:15px; flex:0 0 auto; }
.hotspot-loading { animation:hotspot-spin .8s linear infinite; }
@keyframes hotspot-spin { to { transform:rotate(360deg); } }