/* ========================================================================== EXECUTIVE STICKY HEADER & FINANCIAL HUD ========================================================================== */ #executive-header { position: sticky; top: 0; z-index: 100; background: var(--bg-header); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); } #corporate-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border-color); } .corporate-brand { display: flex; align-items: center; gap: 10px; } .brand-logo-icon { width: 32px; height: 32px; background: var(--primary-blue-light); color: var(--primary-blue); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .brand-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); } .brand-subtitle { font-size: 0.72rem; font-weight: 600; color: var(--primary-blue); margin-left: 6px; background: var(--primary-blue-light); padding: 2px 6px; border-radius: 4px; } .status-right { display: flex; align-items: center; gap: 8px; } .btn-icon-soft { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-surface-sub); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: background 0.2s; } .btn-icon-soft:hover { background: var(--border-color); color: var(--text-primary); } .btn-user-badge { background: none; border: 1px solid var(--border-color); color: var(--primary-blue); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: var(--font-mono); } .btn-user-badge:hover { background: var(--primary-blue-light); } /* Financial HUD Grid */ #financial-hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 10px 16px; align-items: center; } .hud-stat-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 8px 12px; display: flex; flex-direction: column; } .primary-hud-box { border-color: #bfdbfe; background: #f8faff; } .hud-label { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .hud-main-val { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; margin: 2px 0; } .hud-sub-val { font-size: 0.75rem; font-weight: 600; } .rate-positive { color: var(--emerald-dark); } .text-equity { color: var(--purple-rnd); } .hud-multiplier-box { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .multi-label { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); } .multi-button-group { display: flex; background: var(--bg-surface-sub); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } .btn-multi-pill { background: transparent; border: none; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; font-family: var(--font-mono); transition: all 0.15s; } .btn-multi-pill.active { background: var(--primary-blue); color: #ffffff; box-shadow: var(--shadow-sm); }