/* Public UX refresh part 1 */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, #10B981, #2563EB); flex-shrink: 0; }
.brand-text h1 { margin: 0; font-size: 19px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 4px rgba(16,185,129,0.18); display: inline-block; }
.how-btn { background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.35); color: var(--text); border-radius: 16px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hero { padding: 12px 16px 0; }
.hero-card { background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(37,99,235,0.22)); border: 1px solid rgba(16,185,129,0.4); border-radius: 16px; padding: 14px; }
.hero-kicker { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #10B981; }
.hero-match { font-size: 17px; font-weight: 800; margin-top: 4px; }
.hero-pick { font-size: 14px; font-weight: 700; margin-top: 6px; }
.hero-conf { font-size: 12px; background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 10px; }
.hero-meta { font-size: 12px; color: var(--hint); margin-top: 6px; }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hero-copy { background: #10B981; color: #fff; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 800; font-size: 13px; cursor: pointer; }
.hero-vip { font-size: 12px; color: #F59E0B; font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 16px 0; font-size: 11px; color: var(--hint); }
.legend-title { font-weight: 800; color: var(--text); font-size: 11px; }
.legend-pill { border-radius: 12px; padding: 4px 8px; border: 1px solid var(--divider); background: var(--surface); }
.confidence { border-radius: 10px; padding: 3px 8px; font-weight: 800; font-size: 11px; }
.conf-banker { background: rgba(16,185,129,0.18); color: #10B981; border: 1px solid rgba(16,185,129,0.5); }
.conf-strong { background: rgba(56,189,248,0.14); color: #38BDF8; border: 1px solid rgba(56,189,248,0.4); }
.conf-risky { background: rgba(245,158,11,0.14); color: #F59E0B; border: 1px solid rgba(245,158,11,0.4); }