/* * Bella Ciao — shared shell. * * One persistent topbar across every page so a trader always sees: * - PAPER vs LIVE * - bot running / halted * - open position count * - today's P&L * * Plus a 4-tab nav (Dashboard / Decisions / Analysis / Admin) with a * "More" dropdown for the rest. Per-page headers get hidden when the * shell is active (via the body[data-shell="bella"] selector) so we * don't show two headers stacked. * * Design tokens are namespaced under `--bella-*` so they don't collide * with the per-page tokens (--bg, --card, --cyan, etc.) that already * exist inline. */ :root { --bella-bg: #0a0c12; --bella-shell-bg: rgba(13, 15, 23, 0.92); --bella-shell-bd: rgba(255, 255, 255, 0.06); --bella-text: #e8e8f0; --bella-text-dim: #8b8ba3; --bella-text-mut: #5a5c68; --bella-cyan: #06b6d4; --bella-green: #22c55e; --bella-red: #ef4444; --bella-amber: #f59e0b; --bella-purple: #a855f7; } /* Hide every per-page

when the shell is active. Each page wires this by adding `data-shell="bella"` on . */ body[data-shell="bella"] > header, body[data-shell="bella"] > .header { display: none !important; } /* Push existing main content down so the fixed shell doesn't cover it. */ body[data-shell="bella"] { padding-top: 56px; } .bella-shell { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 1000; display: flex; align-items: center; gap: 16px; padding: 0 20px; background: var(--bella-shell-bg); border-bottom: 1px solid var(--bella-shell-bd); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: 'Inter', 'Noto Sans Georgian', -apple-system, sans-serif; color: var(--bella-text); font-size: 0.9em; } .bella-shell__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05em; text-decoration: none; color: var(--bella-text); white-space: nowrap; } .bella-shell__brand:hover { color: var(--bella-cyan); } .bella-shell__brand-icon { font-size: 1.2em; } .bella-shell__nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; } .bella-shell__tab { padding: 8px 14px; border-radius: 8px; color: var(--bella-text-dim); text-decoration: none; font-weight: 500; transition: background 0.15s, color 0.15s; white-space: nowrap; } .bella-shell__tab:hover { color: var(--bella-text); background: rgba(255, 255, 255, 0.04); } .bella-shell__tab[aria-current="page"] { color: var(--bella-cyan); background: rgba(6, 182, 212, 0.1); } .bella-shell__more { position: relative; } .bella-shell__more-btn { background: none; border: 0; color: var(--bella-text-dim); font: inherit; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s; } .bella-shell__more-btn:hover { color: var(--bella-text); background: rgba(255, 255, 255, 0.04); } .bella-shell__more-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; padding: 6px; background: #15171d; border: 1px solid var(--bella-shell-bd); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); display: none; flex-direction: column; gap: 2px; } .bella-shell__more.open .bella-shell__more-menu { display: flex; } .bella-shell__more-menu a { padding: 8px 12px; border-radius: 6px; color: var(--bella-text); text-decoration: none; font-size: 0.92em; } .bella-shell__more-menu a:hover { background: rgba(6, 182, 212, 0.08); color: var(--bella-cyan); } /* Right-side state cluster: mode + bot status + positions + P&L + clock */ .bella-shell__state { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } .bella-shell__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 100px; font-size: 0.82em; font-weight: 600; font-family: 'JetBrains Mono', monospace; border: 1px solid transparent; white-space: nowrap; } .bella-shell__chip--mode-paper { background: rgba(245, 158, 11, 0.12); color: var(--bella-amber); border-color: rgba(245, 158, 11, 0.3); } .bella-shell__chip--mode-live { background: rgba(239, 68, 68, 0.12); color: var(--bella-red); border-color: rgba(239, 68, 68, 0.4); animation: bellaLivePulse 2s ease-in-out infinite; } @keyframes bellaLivePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); } } .bella-shell__chip--bot-running { background: rgba(34, 197, 94, 0.1); color: var(--bella-green); border-color: rgba(34, 197, 94, 0.25); } .bella-shell__chip--bot-halted { background: rgba(239, 68, 68, 0.1); color: var(--bella-red); border-color: rgba(239, 68, 68, 0.25); } .bella-shell__chip--bot-unknown { background: rgba(139, 139, 163, 0.08); color: var(--bella-text-dim); border-color: rgba(139, 139, 163, 0.15); } .bella-shell__chip--positions { background: rgba(6, 182, 212, 0.08); color: var(--bella-cyan); border-color: rgba(6, 182, 212, 0.2); } .bella-shell__chip--pnl-pos { background: rgba(34, 197, 94, 0.08); color: var(--bella-green); border-color: rgba(34, 197, 94, 0.2); } .bella-shell__chip--pnl-neg { background: rgba(239, 68, 68, 0.08); color: var(--bella-red); border-color: rgba(239, 68, 68, 0.2); } .bella-shell__chip--pnl-zero { background: rgba(255, 255, 255, 0.03); color: var(--bella-text-dim); border-color: var(--bella-shell-bd); } .bella-shell__clock { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; color: var(--bella-text-mut); margin-left: 4px; white-space: nowrap; } /* Mobile: collapse nav to icons + hide secondary chips */ @media (max-width: 900px) { .bella-shell { padding: 0 12px; gap: 8px; } .bella-shell__brand h1, .bella-shell__brand span:not(.bella-shell__brand-icon) { display: none; } .bella-shell__tab { padding: 8px 10px; font-size: 0.85em; } .bella-shell__chip--positions, .bella-shell__chip--bot-running, .bella-shell__chip--bot-halted, .bella-shell__chip--bot-unknown, .bella-shell__clock { display: none; } } @media (max-width: 600px) { .bella-shell__nav .bella-shell__tab span:not(.bella-shell__tab-icon) { display: none; } } /* ========================================================== Analytics sub-nav — used on /analytics, /charts, /brain to make those three pages feel like tabs of one Analytics section. Sits just under the main shell, sticky, full-width. ========================================================== */ .bella-subnav { position: sticky; top: 56px; z-index: 900; display: flex; align-items: center; gap: 4px; padding: 8px 20px; background: rgba(13, 15, 23, 0.85); border-bottom: 1px solid var(--bella-shell-bd); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-x: auto; } .bella-subnav__title { font-size: 0.78em; color: var(--bella-text-mut); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; margin-right: 12px; white-space: nowrap; } .bella-subnav a { padding: 6px 14px; border-radius: 8px; color: var(--bella-text-dim); text-decoration: none; font-size: 0.88em; font-weight: 500; white-space: nowrap; transition: background 0.15s, color 0.15s; } .bella-subnav a:hover { color: var(--bella-text); background: rgba(255, 255, 255, 0.04); } .bella-subnav a[aria-current="page"] { color: var(--bella-cyan); background: rgba(6, 182, 212, 0.1); } /* ========================================================== Skeleton loading helpers Use:

The shimmer is GPU-cheap and doesn't fight aria-live regions. ========================================================== */ .bella-skel { display: block; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.03) 80% ); background-size: 200% 100%; animation: bellaSkelShimmer 1.6s ease-in-out infinite; border-radius: 8px; } .bella-skel--text { height: 14px; margin: 6px 0; border-radius: 4px; } .bella-skel--text.short { width: 30%; } .bella-skel--text.medium { width: 60%; } .bella-skel--text.long { width: 90%; } .bella-skel--card { height: 80px; margin: 8px 0; } .bella-skel--chip { display: inline-block; width: 80px; height: 22px; margin: 0 4px; border-radius: 100px; } @keyframes bellaSkelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ========================================================== Danger confirmation modal — for live trading mode + similar high-stakes actions. Requires user to type a phrase + a countdown gate. ========================================================== */ .bella-danger-overlay { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .bella-danger-overlay.open { display: flex; } .bella-danger-modal { width: min(520px, 92vw); background: #14161e; border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 16px; padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(239, 68, 68, 0.15); color: var(--bella-text); font-family: 'Inter', 'Noto Sans Georgian', -apple-system, sans-serif; } .bella-danger-modal__icon { font-size: 2em; text-align: center; margin-bottom: 6px; } .bella-danger-modal__title { font-size: 1.2em; font-weight: 700; color: var(--bella-red); text-align: center; margin-bottom: 10px; } .bella-danger-modal__body { color: var(--bella-text); line-height: 1.6; font-size: 0.95em; margin-bottom: 16px; } .bella-danger-modal__body code { background: rgba(239, 68, 68, 0.1); color: var(--bella-red); padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; } .bella-danger-modal__warnings { background: rgba(239, 68, 68, 0.08); border-left: 3px solid var(--bella-red); padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.88em; line-height: 1.55; } .bella-danger-modal__warnings ul { margin: 0; padding-left: 20px; } .bella-danger-modal__phrase-label { font-size: 0.85em; color: var(--bella-text-dim); margin-bottom: 6px; display: block; } .bella-danger-modal__phrase { width: 100%; padding: 11px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: 8px; color: var(--bella-text); font-family: 'JetBrains Mono', monospace; font-size: 0.95em; margin-bottom: 16px; transition: border-color 0.15s; } .bella-danger-modal__phrase:focus { outline: none; border-color: var(--bella-red); } .bella-danger-modal__buttons { display: flex; gap: 10px; } .bella-danger-modal__cancel, .bella-danger-modal__confirm { flex: 1; padding: 11px 16px; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 0.95em; border: 0; font-family: inherit; transition: filter 0.15s, opacity 0.15s; } .bella-danger-modal__cancel { background: rgba(255, 255, 255, 0.06); color: var(--bella-text); border: 1px solid var(--bella-shell-bd); } .bella-danger-modal__cancel:hover { background: rgba(255, 255, 255, 0.1); } .bella-danger-modal__confirm { background: var(--bella-red); color: #fff; } .bella-danger-modal__confirm:hover:not(:disabled) { filter: brightness(1.1); } .bella-danger-modal__confirm:disabled { opacity: 0.4; cursor: not-allowed; }