Spaces:
Sleeping
Sleeping
| /* ============================================ | |
| ROOT VARIABLES | |
| ============================================ */ | |
| :root { | |
| --bg: #08080f; | |
| --bg2: #0d0d1a; | |
| --surface: rgba(255, 255, 255, 0.04); | |
| --surface-hover: rgba(255, 255, 255, 0.07); | |
| --border: rgba(255, 255, 255, 0.08); | |
| --border-hover: rgba(255, 255, 255, 0.16); | |
| --text: #e4e4f0; | |
| --text-muted: #7777aa; | |
| --text-faint: #44445a; | |
| --buy: #00e87a; | |
| --sell: #ff4466; | |
| --hold: #ffcc44; | |
| --accent: #6644ff; | |
| --accent2: #44aaff; | |
| --card-radius: 16px; | |
| --max-width: 1100px; | |
| --font: 'Space Grotesk', system-ui, sans-serif; | |
| } | |
| /* ============================================ | |
| RESET & BASE | |
| ============================================ */ | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* Ambient background glow */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse at 15% 40%, rgba(102, 68, 255, 0.07) 0%, transparent 55%), | |
| radial-gradient(ellipse at 85% 15%, rgba(68, 170, 255, 0.05) 0%, transparent 55%), | |
| radial-gradient(ellipse at 50% 95%, rgba(0, 232, 122, 0.03) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| #root { | |
| position: relative; | |
| z-index: 1; | |
| min-height: 100vh; | |
| } | |
| /* ============================================ | |
| SCROLLBAR | |
| ============================================ */ | |
| ::-webkit-scrollbar { width: 5px; height: 5px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } | |
| /* ============================================ | |
| GLASS CARD | |
| ============================================ */ | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--card-radius); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| transition: border-color 0.2s; | |
| } | |
| /* ============================================ | |
| TYPOGRAPHY | |
| ============================================ */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, #8866ff, #44aaff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .section-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| margin-bottom: 1rem; | |
| } | |
| /* ============================================ | |
| BUTTONS | |
| ============================================ */ | |
| .btn-primary { | |
| background: linear-gradient(135deg, #6644ff, #44aaff); | |
| color: #fff; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 0.75rem 1.5rem; | |
| font-family: var(--font); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s; | |
| white-space: nowrap; | |
| } | |
| .btn-primary:hover { | |
| opacity: 0.9; | |
| transform: translateY(-1px); | |
| box-shadow: 0 8px 24px rgba(102, 68, 255, 0.3); | |
| } | |
| .btn-primary:active { transform: translateY(0); } | |
| .btn-back { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| color: var(--text-muted); | |
| padding: 0.5rem 1rem; | |
| font-family: var(--font); | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| } | |
| .btn-back:hover { | |
| border-color: var(--border-hover); | |
| color: var(--text); | |
| } | |
| /* ============================================ | |
| LANDING PAGE | |
| ============================================ */ | |
| .landing { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2rem; | |
| } | |
| .landing-hero { | |
| text-align: center; | |
| max-width: 680px; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1.75rem; | |
| } | |
| .landing-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: rgba(102, 68, 255, 0.1); | |
| border: 1px solid rgba(102, 68, 255, 0.22); | |
| border-radius: 100px; | |
| padding: 0.4rem 1.1rem; | |
| font-size: 0.82rem; | |
| color: #9977ff; | |
| font-weight: 500; | |
| letter-spacing: 0.01em; | |
| } | |
| .landing-title { | |
| font-size: clamp(2.8rem, 8vw, 4.2rem); | |
| font-weight: 700; | |
| line-height: 1.08; | |
| color: var(--text); | |
| letter-spacing: -0.025em; | |
| } | |
| .hero-letter { display: inline-block; } | |
| .landing-subtitle { | |
| font-size: 1.1rem; | |
| color: var(--text-muted); | |
| line-height: 1.65; | |
| max-width: 480px; | |
| } | |
| /* Search card */ | |
| .search-card { | |
| width: 100%; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .search-row { | |
| display: flex; | |
| gap: 0.75rem; | |
| } | |
| .search-input { | |
| flex: 1; | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 0.75rem 1rem; | |
| color: var(--text); | |
| font-family: var(--font); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| letter-spacing: 0.06em; | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .search-input::placeholder { | |
| color: var(--text-faint); | |
| font-weight: 400; | |
| letter-spacing: 0; | |
| } | |
| .search-input:focus { | |
| border-color: rgba(102, 68, 255, 0.45); | |
| box-shadow: 0 0 0 3px rgba(102, 68, 255, 0.1); | |
| } | |
| .popular-tickers { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .popular-label { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .ticker-pill { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 0.25rem 0.65rem; | |
| color: var(--text-muted); | |
| font-family: var(--font); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .ticker-pill:hover { | |
| background: rgba(102, 68, 255, 0.1); | |
| border-color: rgba(102, 68, 255, 0.3); | |
| color: var(--text); | |
| } | |
| .feature-pills { | |
| display: flex; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .feature-pill { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--border); | |
| border-radius: 100px; | |
| padding: 0.4rem 0.9rem; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| } | |
| /* ============================================ | |
| LOADING SCREEN | |
| ============================================ */ | |
| .loading-screen { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .loading-content { | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .loading-content p { | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| } | |
| .loading-content span { | |
| font-size: 0.88rem; | |
| color: var(--text-muted); | |
| } | |
| .loading-dots { | |
| display: flex; | |
| gap: 0.6rem; | |
| justify-content: center; | |
| margin-bottom: 0.5rem; | |
| } | |
| .loading-dot { | |
| width: 10px; | |
| height: 10px; | |
| background: linear-gradient(135deg, #6644ff, #44aaff); | |
| border-radius: 50%; | |
| } | |
| /* ============================================ | |
| DASHBOARD | |
| ============================================ */ | |
| .dashboard { | |
| max-width: var(--max-width); | |
| margin: 0 auto; | |
| padding: 1.5rem; | |
| min-height: 100vh; | |
| } | |
| .dashboard-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.25rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .ticker-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .ticker-name { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| } | |
| .ticker-price { | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| } | |
| .dashboard-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.25rem; | |
| } | |
| /* ============================================ | |
| RECOMMENDATION HERO | |
| ============================================ */ | |
| .recommendation-hero { | |
| padding: 2.25rem 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| text-align: center; | |
| } | |
| .recommendation-hero::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--rec-bg, transparent); | |
| pointer-events: none; | |
| border-radius: inherit; | |
| } | |
| /* Badge */ | |
| .rec-badge-wrap { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.75rem; | |
| } | |
| .rec-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 2px solid var(--rec-color, #ffcc44); | |
| border-radius: 100px; | |
| padding: 0.8rem 2.25rem; | |
| box-shadow: | |
| 0 0 32px color-mix(in srgb, var(--rec-color, #ffcc44) 30%, transparent), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.08); | |
| } | |
| .rec-emoji { font-size: 1.9rem; } | |
| .rec-label { | |
| font-size: 1.65rem; | |
| font-weight: 700; | |
| color: var(--rec-color, #ffcc44); | |
| letter-spacing: 0.08em; | |
| } | |
| .rec-pulse-ring { | |
| position: absolute; | |
| inset: -4px; | |
| border-radius: 100px; | |
| border: 2px solid var(--rec-color, #ffcc44); | |
| animation: pulse-ring 2.2s ease-out infinite; | |
| pointer-events: none; | |
| } | |
| /* Stats row */ | |
| .rec-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 3.5rem; | |
| margin-bottom: 1.75rem; | |
| } | |
| .rec-stat { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.3rem; | |
| } | |
| .stat-label { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .stat-value { | |
| font-size: 1.65rem; | |
| font-weight: 700; | |
| color: var(--text); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .score-value { color: var(--rec-color, #ffcc44); } | |
| /* Score track */ | |
| .score-track { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| margin-bottom: 1.5rem; | |
| max-width: 480px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .score-track-label { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| width: 48px; | |
| white-space: nowrap; | |
| } | |
| .score-track-label:last-child { text-align: right; } | |
| .score-track-bar { flex: 1; } | |
| .score-track-bg { | |
| height: 8px; | |
| background: rgba(255, 255, 255, 0.06); | |
| border-radius: 100px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .score-track-fill { | |
| height: 100%; | |
| border-radius: 100px; | |
| background: var(--rec-color, #ffcc44); | |
| box-shadow: 0 0 10px color-mix(in srgb, var(--rec-color, #ffcc44) 50%, transparent); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| .score-track-center { | |
| position: absolute; | |
| left: 50%; | |
| top: -2px; | |
| width: 2px; | |
| height: calc(100% + 4px); | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translateX(-50%); | |
| } | |
| /* Plain text explanation */ | |
| .rec-plain-text { | |
| font-size: 0.92rem; | |
| color: var(--text-muted); | |
| line-height: 1.65; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| padding: 1rem 1.25rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| text-align: left; | |
| } | |
| .rec-plain-text strong { color: var(--text); } | |
| /* ============================================ | |
| SIGNAL CARDS | |
| ============================================ */ | |
| .signal-cards-section { } | |
| .signal-cards-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .signal-card { | |
| padding: 1.25rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.85rem; | |
| transition: border-color 0.2s, transform 0.2s; | |
| } | |
| .signal-card:hover { | |
| border-color: var(--signal-color, var(--border-hover)); | |
| transform: translateY(-2px); | |
| } | |
| .signal-card-header { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| } | |
| .signal-icon { | |
| font-size: 1.4rem; | |
| flex-shrink: 0; | |
| margin-top: 0.1rem; | |
| } | |
| .signal-header-text { flex: 1; } | |
| .signal-title { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| margin-bottom: 0.2rem; | |
| } | |
| .signal-desc { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| line-height: 1.4; | |
| } | |
| .signal-badge { | |
| flex-shrink: 0; | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| padding: 0.25rem 0.6rem; | |
| border-radius: 6px; | |
| border: 1px solid; | |
| white-space: nowrap; | |
| } | |
| .signal-bar-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .signal-bar-track { | |
| flex: 1; | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.06); | |
| border-radius: 100px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .signal-bar-fill { | |
| height: 100%; | |
| border-radius: 100px; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| transition: width 0s; | |
| } | |
| .signal-bar-center { | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| width: 1px; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| .signal-weight { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| white-space: nowrap; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .signal-plain { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| line-height: 1.55; | |
| } | |
| .signal-meta { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| font-size: 0.7rem; | |
| color: var(--text-faint); | |
| padding-top: 0.5rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| /* ============================================ | |
| FORECAST | |
| ============================================ */ | |
| /* ============================================ | |
| PRICE CHART | |
| ============================================ */ | |
| .price-chart-card { | |
| padding: 1.25rem 1.5rem; | |
| } | |
| .price-chart-header { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| } | |
| .price-chart-header h3 { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .price-chart-change { | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| } | |
| .price-chart-legend { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 0.5rem; | |
| font-size: 0.72rem; | |
| color: var(--text-faint); | |
| } | |
| .forecast-card { | |
| padding: 1.25rem 1.5rem; | |
| } | |
| .forecast-card h3 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| } | |
| .forecast-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.25rem; | |
| } | |
| .forecast-badge { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| } | |
| .forecast-badge.up { color: var(--buy); } | |
| .forecast-badge.down { color: var(--sell); } | |
| .forecast-text { | |
| font-size: 0.88rem; | |
| color: var(--text-muted); | |
| line-height: 1.55; | |
| } | |
| /* ============================================ | |
| RISK FLAGS | |
| ============================================ */ | |
| .risk-section { padding: 1.5rem; } | |
| .risk-section h3 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .risk-flags-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.6rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .risk-flag { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| background: rgba(255, 160, 50, 0.05); | |
| border: 1px solid rgba(255, 160, 50, 0.12); | |
| border-radius: 10px; | |
| padding: 0.75rem 1rem; | |
| } | |
| .risk-icon { | |
| font-size: 0.85rem; | |
| flex-shrink: 0; | |
| margin-top: 0.15rem; | |
| } | |
| .risk-flag p { | |
| font-size: 0.83rem; | |
| color: var(--text-muted); | |
| line-height: 1.55; | |
| } | |
| .risk-disclaimer { | |
| font-size: 0.72rem; | |
| color: var(--text-faint); | |
| margin-top: 0.5rem; | |
| line-height: 1.5; | |
| } | |
| /* ============================================ | |
| DEEP ANALYSIS CTA | |
| ============================================ */ | |
| .deep-analysis-card { padding: 1.5rem; } | |
| .deep-cta { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 2rem; | |
| } | |
| .deep-cta h3 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin-bottom: 0.4rem; | |
| } | |
| .deep-cta p { | |
| font-size: 0.83rem; | |
| color: var(--text-muted); | |
| margin-bottom: 0.6rem; | |
| line-height: 1.5; | |
| } | |
| .time-badge { | |
| font-size: 0.72rem; | |
| color: var(--text-faint); | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 0.2rem 0.6rem; | |
| } | |
| /* ============================================ | |
| AGENT STREAM | |
| ============================================ */ | |
| .agent-stream { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .agent-stream-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .agent-stream-header h3 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| } | |
| .active-agent-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.83rem; | |
| } | |
| .thinking-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--agent-color, #6644ff); | |
| animation: pulse-glow 1s ease-in-out infinite; | |
| flex-shrink: 0; | |
| } | |
| .thinking-text { | |
| color: var(--text-muted); | |
| font-size: 0.78rem; | |
| } | |
| .complete-badge { | |
| font-size: 0.83rem; | |
| color: var(--buy); | |
| font-weight: 500; | |
| } | |
| .agent-stream-feed { | |
| max-height: 380px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| padding: 0.75rem; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| } | |
| .agent-message { | |
| padding: 0.75rem 1rem; | |
| border-radius: 8px; | |
| border-left: 3px solid var(--agent-color, #6644ff); | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .agent-msg-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.4rem; | |
| } | |
| .agent-icon { font-size: 0.85rem; } | |
| .agent-name { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| } | |
| .agent-msg-content { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| line-height: 1.55; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .final-report { | |
| border-top: 1px solid var(--border); | |
| padding-top: 1rem; | |
| } | |
| .final-report h3 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| } | |
| .report-content { | |
| max-height: 420px; | |
| overflow-y: auto; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 10px; | |
| padding: 1.25rem; | |
| border: 1px solid var(--border); | |
| } | |
| .report-content pre { | |
| font-family: var(--font); | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| line-height: 1.65; | |
| } | |
| /* Markdown rendered elements */ | |
| .report-content h1 { | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| color: var(--text); | |
| margin: 1.25rem 0 0.4rem; | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 0.3rem; | |
| } | |
| .report-content h2 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| margin: 1.1rem 0 0.35rem; | |
| } | |
| .report-content h3 { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| margin: 0.9rem 0 0.3rem; | |
| } | |
| .report-content p { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| line-height: 1.7; | |
| margin: 0.4rem 0; | |
| } | |
| .report-content strong { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .report-content ul, .report-content ol { | |
| padding-left: 1.4rem; | |
| margin: 0.4rem 0; | |
| } | |
| .report-content li { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| line-height: 1.65; | |
| margin-bottom: 0.2rem; | |
| } | |
| .report-content table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.8rem; | |
| margin: 0.75rem 0; | |
| } | |
| .report-content th { | |
| text-align: left; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| border-bottom: 1px solid var(--border); | |
| padding: 0.35rem 0.6rem; | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .report-content td { | |
| padding: 0.35rem 0.6rem; | |
| border-bottom: 1px solid rgba(255,255,255,0.04); | |
| color: var(--text-muted); | |
| } | |
| .report-content tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .report-content hr { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 1rem 0; | |
| } | |
| .report-content em { | |
| color: var(--text-faint); | |
| font-style: italic; | |
| font-size: 0.78rem; | |
| } | |
| /* ============================================ | |
| AGENT PIPELINE BAR | |
| ============================================ */ | |
| .pipeline-bar { | |
| display: flex; | |
| gap: 0; | |
| background: rgba(0, 0, 0, 0.25); | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| } | |
| .pipeline-step { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.25rem; | |
| padding: 0.6rem 0.4rem; | |
| font-size: 0.68rem; | |
| color: var(--text-faint); | |
| border-right: 1px solid var(--border); | |
| transition: background 0.3s, color 0.3s; | |
| position: relative; | |
| } | |
| .pipeline-step:last-child { border-right: none; } | |
| .pipeline-step.active { | |
| background: color-mix(in srgb, var(--step-color) 12%, transparent); | |
| color: var(--step-color); | |
| } | |
| .pipeline-step.done { | |
| background: color-mix(in srgb, var(--step-color) 6%, transparent); | |
| color: color-mix(in srgb, var(--step-color) 60%, var(--text-muted)); | |
| } | |
| .pipeline-step.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: var(--step-color); | |
| animation: pulse-glow 1s ease-in-out infinite; | |
| } | |
| .pipeline-icon { font-size: 0.95rem; } | |
| .pipeline-label { | |
| font-size: 0.65rem; | |
| text-align: center; | |
| line-height: 1.2; | |
| font-weight: 500; | |
| } | |
| /* ============================================ | |
| KEYFRAME ANIMATIONS | |
| ============================================ */ | |
| @keyframes pulse-ring { | |
| 0% { transform: scale(0.95); opacity: 0.7; } | |
| 100% { transform: scale(1.35); opacity: 0; } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.3; } | |
| } | |
| @keyframes fadeUp { | |
| from { opacity: 0; transform: translateY(16px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fadeUp { | |
| animation: fadeUp 0.7s ease forwards; | |
| } | |
| /* ============================================ | |
| RESPONSIVE | |
| ============================================ */ | |
| @media (max-width: 640px) { | |
| .rec-stats { gap: 1.5rem; } | |
| .rec-badge { padding: 0.65rem 1.5rem; } | |
| .rec-label { font-size: 1.3rem; } | |
| .deep-cta { flex-direction: column; align-items: flex-start; } | |
| .signal-cards-grid { grid-template-columns: 1fr; } | |
| .forecast-content { flex-direction: column; align-items: flex-start; } | |
| .dashboard { padding: 1rem; } | |
| .agent-stream-header { flex-direction: column; align-items: flex-start; } | |
| } | |
| /* ============================================ | |
| PORTFOLIO VIEW | |
| ============================================ */ | |
| .btn-portfolio { | |
| margin-top: 1.5rem; | |
| padding: 0.7rem 1.6rem; | |
| background: rgba(102, 68, 255, 0.12); | |
| border: 1px solid rgba(102, 68, 255, 0.3); | |
| border-radius: 999px; | |
| color: var(--text); | |
| font-family: var(--font); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.2s, border-color 0.2s; | |
| } | |
| .btn-portfolio:hover { | |
| background: rgba(102, 68, 255, 0.22); | |
| border-color: rgba(102, 68, 255, 0.6); | |
| } | |
| .portfolio-summary { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0.75rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| .port-stat { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--card-radius); | |
| padding: 1rem; | |
| text-align: center; | |
| } | |
| .port-stat.buy { border-color: rgba(0,232,122,0.2); } | |
| .port-stat.hold { border-color: rgba(255,204,68,0.2); } | |
| .port-stat.sell { border-color: rgba(255,68,102,0.2); } | |
| .port-stat-val { | |
| display: block; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| } | |
| .port-stat.buy .port-stat-val { color: var(--buy); } | |
| .port-stat.hold .port-stat-val { color: var(--hold); } | |
| .port-stat.sell .port-stat-val { color: var(--sell); } | |
| .port-stat-label { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| margin-top: 0.3rem; | |
| display: block; | |
| } | |
| .holdings-header { | |
| display: grid; | |
| grid-template-columns: 2fr 1.2fr 0.6fr 1fr 1.5fr 0.6fr 0.4fr; | |
| gap: 0.75rem; | |
| padding: 0.5rem 1rem; | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 0.25rem; | |
| } | |
| .holding-row { | |
| display: grid; | |
| grid-template-columns: 2fr 1.2fr 0.6fr 1fr 1.5fr 0.6fr 0.4fr; | |
| gap: 0.75rem; | |
| align-items: center; | |
| padding: 0.75rem 1rem; | |
| border-radius: 10px; | |
| transition: background 0.15s; | |
| } | |
| .holding-row:hover { background: var(--surface-hover); } | |
| .holding-ticker { display: flex; flex-direction: column; gap: 0.15rem; } | |
| .hticker { font-weight: 700; font-size: 0.95rem; } | |
| .hname { font-size: 0.72rem; color: var(--text-muted); } | |
| .holding-sector { font-size: 0.8rem; color: var(--text-muted); } | |
| .holding-weight { font-size: 0.85rem; font-weight: 600; } | |
| .holding-rec { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| padding: 0.25rem 0.6rem; | |
| border-radius: 999px; | |
| text-align: center; | |
| letter-spacing: 0.03em; | |
| } | |
| .holding-score { display: flex; align-items: center; } | |
| .holding-conf { | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| text-align: center; | |
| } | |
| .holding-analyse { | |
| background: none; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| padding: 0.2rem 0.5rem; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .holding-analyse:hover { | |
| border-color: var(--accent2); | |
| color: var(--accent2); | |
| } | |
| .portfolio-note { | |
| font-size: 0.78rem; | |
| color: var(--text-faint); | |
| text-align: center; | |
| margin-top: 0.75rem; | |
| } | |
| @media (max-width: 700px) { | |
| .portfolio-summary { grid-template-columns: repeat(2, 1fr); } | |
| .holdings-header { display: none; } | |
| .holding-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; } | |
| .holding-score, .holding-conf, .holding-sector { display: none; } | |
| } | |