/* Home — PoC #10 morning briefing */
.home-dashboard { display: flex; flex-direction: column; }

.morning-brief {
  padding: 18px 22px 16px;
  border-bottom: 1px solid #131828;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.mb-greeting-label { font-size: 11px; color: #1e2a50; text-transform: uppercase; letter-spacing: 0.06em; }
.mb-name { font-size: 20px; font-weight: 700; color: #fff; margin: 4px 0; }
.mb-sub { font-size: 11px; color: #2a3860; margin-bottom: 12px; }
.mb-bullets { display: flex; flex-direction: column; gap: 6px; }
.mb-bullet {
  display: flex; gap: 8px;
  background: #0b0d18;
  border: 1px solid #131828;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: #8090b0;
  line-height: 1.45;
}
.mb-bullet strong { color: #c0cce0; font-weight: 500; }
.mb-bullet-icon { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.mb-watch-count {
  text-align: right;
  font-size: 11px;
  color: #2a3860;
  flex-shrink: 0;
}
.mb-watch-count strong { display: block; font-size: 24px; color: #6aacff; font-weight: 700; }

.mood-row { display: flex; border-bottom: 1px solid #131828; }
.mood-section {
  padding: 18px 22px;
  border-right: 1px solid #131828;
  min-width: 200px;
  text-align: center;
}
.mood-section h3 { font-size: 10px; text-transform: uppercase; color: #1e2848; margin-bottom: 10px; letter-spacing: 0.08em; }
.mood-score { font-size: 32px; font-weight: 700; color: #f59e0b; }
.mood-score-label { font-size: 10px; color: #6070a0; margin-top: 4px; }
.sentiment-bar {
  height: 6px;
  background: #1a0808;
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
  display: flex;
}
.sentiment-bar .pos { background: #2dd4a0; width: 64%; }
.sentiment-bar .neg { background: #e05060; flex: 1; }

.breaking-section { flex: 1; padding: 18px 22px; border-right: 1px solid #131828; }
.flash-badge {
  font-size: 8px;
  background: #200a0a;
  border: 1px solid #3a1010;
  color: #e05060;
  border-radius: 4px;
  padding: 2px 6px;
  animation: flashPulse 2s infinite;
}
@keyframes flashPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.bn-item {
  display: flex;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 5px;
  border: 1px solid transparent;
  position: relative;
}
.bn-item.active-bn { background: #0d0f1c; border-color: #1a2040; }
.bn-flash-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 2px 0 0 2px; }
.bn-flash-bar.pos { background: #2dd4a0; }
.bn-flash-bar.neg { background: #e05060; }
.bn-progress { height: 2px; background: #0e1020; border-radius: 1px; margin-top: 8px; overflow: hidden; }
.bn-progress-bar { height: 100%; background: #1a6fff; width: 0; transition: width 0.1s linear; }

.trending-section { width: 220px; flex-shrink: 0; padding: 18px 16px; }
.tr-item { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid #0c0e18; cursor: pointer; }
.tr-num { font-size: 11px; font-weight: 700; color: #1e2848; width: 14px; }
.tr-co { font-size: 9px; font-weight: 600; color: #4a6090; }
.tr-text { font-size: 10px; color: #7080a0; line-height: 1.4; }
.tr-views { font-size: 9px; color: #1e2848; margin-top: 3px; }
.tr-fire { width: 8px; height: 8px; border-radius: 50%; background: #e05060; display: inline-block; margin-right: 3px; }

.spotlight-section { padding: 18px 22px; border-top: 1px solid #131828; }
.spotlight-section h2 { font-size: 13px; color: #4a5880; margin-bottom: 14px; }
.sp-inner { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
.sp-main { background: #0b0d18; border: 1px solid #131828; border-radius: 12px; overflow: hidden; }
.sp-hero { padding: 16px 18px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #0e1020; }
.sp-logo-wrap { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.sp-spin, .sp-spin2 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: #1a6fff;
  border-right-color: rgba(26, 111, 255, 0.3);
}
.sp-spin { animation: spin 3s linear infinite; }
.sp-spin2 { inset: 5px; animation: spin 5s linear infinite reverse; border-width: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.sp-logo-center {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.sp-logo-center.blue { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.sp-logo-center.green { background: linear-gradient(135deg, #10b981, #059669); }
.sp-logo-center.purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.sp-logo-center.red { background: linear-gradient(135deg, #ef4444, #dc2626); }
.sp-price { font-size: 18px; font-weight: 700; color: #fff; }
.sp-chg.pos { color: #2dd4a0; font-size: 11px; }
.sp-chg.neg { color: #e05060; font-size: 11px; }
.sp-chart-area { padding: 12px 16px; height: 140px; }
.sp-dots { display: flex; gap: 5px; justify-content: center; padding: 10px 0; }
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: #1a2040; cursor: pointer; border: none; padding: 0; }
.sp-dot.active { background: #1a6fff; transform: scale(1.2); }

.sp-side { display: flex; flex-direction: column; gap: 8px; }
.sp-side-card {
  background: #0b0d18;
  border: 1px solid #131828;
  border-radius: 10px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.sp-side-card:hover, .sp-side-card.active { border-color: #1a2a50; border-left-color: #1a6fff; }
.sp-side-logo { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; }
.sp-side-chg { margin-left: auto; font-size: 10px; padding: 2px 5px; border-radius: 3px; }
.sp-side-chg.pos { background: #0a1e14; color: #2dd4a0; }
.sp-side-chg.neg { background: #1a0a0e; color: #e05060; }

@media (max-width: 1100px) {
  .mood-row { flex-wrap: wrap; }
  .trending-section { width: 100%; border-top: 1px solid #131828; }
  .sp-inner { grid-template-columns: 1fr; }
}