:root { --bg: #0f1115; --panel: #171a21; --border: #2a2e3a; --text: #e8e9ed; --muted: #9aa0ac; --green: #3ddc97; --red: #ff6b6b; --accent: #5b8cff; --accent-contrast: #0b0d12; --danger-contrast: #1a0d0d; --shadow: 0 6px 20px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --radius: 10px; --radius-sm: 6px; } /* Light theme — toggled via a data-theme attribute on (see the inline script in , which sets this before first paint to avoid a flash of the wrong theme). Colors are deliberately NOT just inverted brightness: green/red/accent are all deepened a bit here so text/icons in those colors stay readable against a white panel (a vibrant pastel that reads fine on near-black gets washed out on white). */ [data-theme="light"] { --bg: #f5f6f8; --panel: #ffffff; --border: #e2e5ea; --text: #171920; --muted: #6b7280; --green: #12946f; --red: #c0392b; --accent: #3860d6; --accent-contrast: #ffffff; --danger-contrast: #ffffff; --shadow: 0 6px 20px rgba(15, 23, 42, 0.1); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08); } * { box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; transition: background-color 0.15s ease, color 0.15s ease; } body, .stat, .modal-box, input, select, button, th, td, .chart-section svg, .ticker-suggestions, .theme-toggle { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 50; background: var(--panel); border: 1px solid var(--border); color: var(--muted); width: 36px; height: 36px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); cursor: pointer; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: inline; } header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-right: 44px; /* keep the title clear of the fixed theme toggle */ } header h1 { flex: 1; } h1 { margin: 0 0 4px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; } .asof { color: var(--muted); font-size: 0.85rem; margin: 0; } .summary { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0; } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 18px; flex: 1; min-width: 160px; } .stat .label { display: block; color: var(--muted); font-size: 0.8rem; } .stat .value { display: block; font-size: 1.4rem; font-weight: 600; margin-top: 4px; } .positive { color: var(--green); } .negative { color: var(--red); } section { margin: 32px 0; } h2 { font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin: 0 0 16px; } h3 { font-size: 0.85rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .allocation-grid { display: flex; gap: 40px; flex-wrap: wrap; } .allocation-grid ul { list-style: none; padding: 0; margin: 0; } .allocation-grid li { display: flex; justify-content: space-between; gap: 24px; padding: 4px 0; border-bottom: 1px dashed var(--border); min-width: 200px; } form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } input, select, button { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.9rem; } button { background: var(--accent); border: none; color: var(--accent-contrast); font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; } button:disabled { opacity: 0.55; cursor: not-allowed; } input:focus-visible, select:focus-visible, button:focus-visible, th[data-sort]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .form-error { color: var(--red); font-size: 0.85rem; min-height: 1.2em; } .form-status { color: var(--green); font-size: 0.85rem; min-height: 1.2em; margin: 0; } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); } tbody tr { transition: background-color 0.1s ease; } tbody tr:hover { background: var(--border); } th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; } th[data-sort]:hover { color: var(--text); } th[data-sort].sorted { color: var(--accent); } th[data-sort] .sort-arrow { margin-left: 3px; font-size: 0.7rem; } .holdings-search { width: 100%; max-width: 260px; margin-bottom: 10px; display: block; } .stale { color: var(--red); font-size: 0.75rem; margin-left: 6px; } .nav-tag { color: var(--muted); font-size: 0.7rem; margin-left: 6px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px; } .del-btn, .edit-btn, .sell-btn, #cancelEditBtn, #cancelSellBtn { background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-weight: 500; } .del-btn:hover { color: var(--red); border-color: var(--red); } .edit-btn:hover { color: var(--accent); border-color: var(--accent); } .sell-btn:hover { color: var(--green); border-color: var(--green); } footer { margin-top: 40px; color: var(--muted); font-size: 0.75rem; border-top: 1px solid var(--border); padding-top: 16px; } @media (max-width: 600px) { form { flex-direction: column; align-items: stretch; } table { font-size: 0.78rem; } } .login-section { max-width: 360px; margin: 15vh auto 0; text-align: center; } .login-section form { flex-direction: column; align-items: stretch; } .login-actions { display: flex; gap: 8px; } .login-actions button[value="signup"] { background: transparent; border: 1px solid var(--accent); color: var(--accent); } .login-hint { color: var(--muted); font-size: 0.8rem; margin-top: 16px; } .oauth-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--border); font-weight: 500; padding: 9px 10px; } .oauth-btn:hover { border-color: var(--accent); opacity: 1; } .login-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.78rem; margin: 16px 0; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .link-btn { background: none; border: none; color: var(--accent); font-weight: 500; font-size: 0.82rem; padding: 10px 0 0; cursor: pointer; } .link-btn:hover { text-decoration: underline; opacity: 1; } .chart-range-buttons { display: flex; gap: 6px; margin-bottom: 10px; } .chart-range-buttons button { font-size: 0.78rem; padding: 4px 12px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 500; } .chart-range-buttons button.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .chart-range-buttons button:hover:not(.active) { color: var(--text); border-color: var(--text); } .chart-wrap { position: relative; max-width: 900px; } .chart-section svg { width: 100%; height: 260px; max-width: 900px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); cursor: crosshair; } .chart-tooltip { position: absolute; transform: translate(-50%, -125%); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 5px 9px; font-size: 0.78rem; color: var(--text); white-space: nowrap; pointer-events: none; z-index: 5; } .chart-caption { color: var(--muted); font-size: 0.8rem; margin-top: 6px; } .chart-legend { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; } .chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); } .chart-legend-swatch { display: inline-block; width: 16px; height: 0; border-top-width: 2.5px; border-top-style: solid; } .chart-legend-swatch.swatch-value { border-top-color: var(--text); } .chart-legend-swatch.swatch-cost { border-top-color: var(--muted); border-top-style: dashed; border-top-width: 1.75px; } .quick-actions { display: flex; align-items: center; gap: 10px; margin: 4px 0 24px; flex-wrap: wrap; } .quick-actions button { font-size: 0.82rem; padding: 7px 14px; } .quick-actions-status { color: var(--muted); font-size: 0.82rem; } .quick-actions-status.positive { color: var(--green); } .quick-actions-status.negative { color: var(--red); } .holdings h2, .realized-gains h2 { display: flex; align-items: center; gap: 12px; } .export-btn { font-size: 0.78rem; padding: 4px 10px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 500; margin-left: auto; } .export-btn:hover { color: var(--accent); border-color: var(--accent); opacity: 1; } .ticker-search-wrap { position: relative; } .ticker-suggestions { position: absolute; top: 100%; left: 0; z-index: 20; list-style: none; margin: 2px 0 0; padding: 4px; min-width: 260px; max-height: 260px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .ticker-suggestions li { padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 0.85rem; display: flex; justify-content: space-between; gap: 10px; } .ticker-suggestions li:hover, .ticker-suggestions li.active { background: var(--border); } .ticker-suggestions .sym { font-weight: 600; } .ticker-suggestions .name { color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .portfolio-bar { display: flex; align-items: center; gap: 10px; margin: 20px 0 4px; flex-wrap: wrap; } .portfolio-bar label { color: var(--muted); font-size: 0.85rem; } .portfolio-bar-note { color: var(--muted); font-size: 0.78rem; margin: 0 0 20px; } #renamePortfolioBtn, #deletePortfolioBtn, #newPortfolioBtn { font-size: 0.8rem; padding: 6px 10px; } .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; } .modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); padding: 20px 22px; max-width: 380px; width: 100%; box-shadow: var(--shadow); } .modal-box h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: normal; } .modal-box p { margin: 0 0 14px; color: var(--muted); font-size: 0.88rem; line-height: 1.4; } .modal-box input { width: 100%; margin-bottom: 14px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .modal-actions .danger { background: var(--red); color: var(--danger-contrast); }