/* --------------------------------------------------------------------- Theme system ----------------------------------------------------------------------- :root holds the "light" theme's values as a no-JS / first-paint fallback (identical to [data-theme="light"] below). Every other theme is selected by setting data-theme on (see app.js's applyTheme). Every theme block below MUST define the full variable set — a missing variable would silently fall back to :root's value and look broken. */ :root { color-scheme: light; --bg: #f4f6f3; --surface: #ffffff; --surface-soft: #eef3f0; --line: #d9ded8; --text: #1e2521; --muted: #647067; --teal: #0f766e; --teal-dark: #0b5f59; --amber: #b45309; --red: #b42318; --red-soft: #fdecec; --ink: #151917; --dot-idle: #8c9690; --neutral-bg: #e6ebe7; --neutral-border: #cdd5cf; --input-bg: #ffffff; --message-error-border: #f1b4ad; --message-ok-border: #9bd3c8; --message-ok-bg: #ebf8f5; --logbox-bg: #151917; --logbox-fg: #e8ece7; --button-ink: #ffffff; } /* light — clean, airy, minimal. Today's existing palette, unchanged. */ [data-theme="light"] { color-scheme: light; --bg: #f4f6f3; --surface: #ffffff; --surface-soft: #eef3f0; --line: #d9ded8; --text: #1e2521; --muted: #647067; --teal: #0f766e; --teal-dark: #0b5f59; --amber: #b45309; --red: #b42318; --red-soft: #fdecec; --ink: #151917; --dot-idle: #8c9690; --neutral-bg: #e6ebe7; --neutral-border: #cdd5cf; --input-bg: #ffffff; --message-error-border: #f1b4ad; --message-ok-border: #9bd3c8; --message-ok-bg: #ebf8f5; --logbox-bg: #151917; --logbox-fg: #e8ece7; --button-ink: #ffffff; } /* dark — true dark mode. Deep neutral background, light neutral text, same teal-family accent as light, brightened to stay vivid. */ [data-theme="dark"] { color-scheme: dark; --bg: #16191c; --surface: #202427; --surface-soft: #272c30; --line: #383e42; --text: #e9edeb; --muted: #9ba6a2; --teal: #2dd4bf; --teal-dark: #5eead4; --amber: #fbbf24; --red: #f87171; --red-soft: #3a2020; --ink: #eef1ef; --dot-idle: #5b6360; --neutral-bg: #2b3033; --neutral-border: #3e4448; --input-bg: #1b1f22; --message-error-border: #7f3b35; --message-ok-border: #1f6f63; --message-ok-bg: #16302c; --logbox-bg: #0e1110; --logbox-fg: #d7ddd9; --button-ink: #0b1210; } /* midnight — cooler deep blue-slate dark variant with an indigo/cyan accent instead of teal, so it reads distinct from "dark". */ [data-theme="midnight"] { color-scheme: dark; --bg: #0d1220; --surface: #141b2e; --surface-soft: #1b2438; --line: #2b3652; --text: #dee4f5; --muted: #8b96b8; --teal: #22d3ee; --teal-dark: #7dd3fc; --amber: #fcd34d; --red: #fb7185; --red-soft: #341f2b; --ink: #eef2ff; --dot-idle: #4b5573; --neutral-bg: #202a42; --neutral-border: #33405e; --input-bg: #101627; --message-error-border: #7a3b52; --message-ok-border: #155e75; --message-ok-bg: #123143; --logbox-bg: #090d18; --logbox-fg: #cfd8ef; --button-ink: #081019; } /* solarized — warm, muted-contrast, sepia/cream palette with a burnt-orange accent, in the mood of the well-known Solarized scheme. */ [data-theme="solarized"] { color-scheme: light; --bg: #fdf6e3; --surface: #fffaf0; --surface-soft: #f5ecd7; --line: #e4d8b4; --text: #586e75; --muted: #74867f; --teal: #cb4b16; --teal-dark: #9a3412; --amber: #b58900; --red: #dc322f; --red-soft: #fbe4d5; --ink: #073642; --dot-idle: #b7a988; --neutral-bg: #f1e7cc; --neutral-border: #ddcfa0; --input-bg: #fffdf5; --message-error-border: #eab99a; --message-ok-border: #cdbf8a; --message-ok-bg: #f3f0d9; --logbox-bg: #002b36; --logbox-fg: #93a1a1; --button-ink: #fffaf0; } /* ocean — light-to-midtone, blue/teal-forward, more saturated and "designed" than plain light while staying a light theme. */ [data-theme="ocean"] { color-scheme: light; --bg: #eaf6f6; --surface: #ffffff; --surface-soft: #dcf1f1; --line: #bfe3e3; --text: #0b3742; --muted: #4f7a82; --teal: #0891b2; --teal-dark: #0e7490; --amber: #d97706; --red: #be123c; --red-soft: #ffe4ec; --ink: #062a33; --dot-idle: #8fb9bd; --neutral-bg: #d7ecec; --neutral-border: #a9d6d6; --input-bg: #ffffff; --message-error-border: #f4a7bb; --message-ok-border: #7fd4c8; --message-ok-bg: #dff7f1; --logbox-bg: #062a33; --logbox-fg: #cdeef0; --button-ink: #ffffff; } /* sunset — warm coral/amber accent on a soft-dark base, distinct mood from every other theme. */ [data-theme="sunset"] { color-scheme: dark; --bg: #1f1410; --surface: #2a1c16; --surface-soft: #34241c; --line: #4a3226; --text: #f5e6da; --muted: #c9a690; --teal: #fb7185; --teal-dark: #fda4af; --amber: #f59e0b; --red: #ef4444; --red-soft: #3f2018; --ink: #fff3ea; --dot-idle: #6b4b3a; --neutral-bg: #3a2a20; --neutral-border: #55402f; --input-bg: #241713; --message-error-border: #8a4436; --message-ok-border: #b45f4a; --message-ok-bg: #3a231c; --logbox-bg: #140b09; --logbox-fg: #e8d5c4; --button-ink: #241109; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font: 14px/1.45 "Segoe UI", Arial, sans-serif; } button, input { font: inherit; } .shell { width: min(1380px, calc(100vw - 32px)); margin: 0 auto; padding: 24px 0 32px; } .topbar { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; } h1, h2, p { margin: 0; } h1 { font-size: 28px; line-height: 1.1; letter-spacing: 0; } h2 { font-size: 16px; letter-spacing: 0; } #subtitle { color: var(--muted); margin-top: 5px; } .status-strip { min-height: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot-idle); } .dot.running { background: var(--teal); } .dot.error { background: var(--red); } .badge, .pill { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--ink); font-size: 12px; font-weight: 700; } .controls, .metrics, .tabs, .panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .controls { display: grid; grid-template-columns: auto minmax(0, 160px) auto auto auto; gap: 10px; align-items: center; padding: 12px; margin-bottom: 14px; } .segmented, .tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-soft); } .segmented { border-radius: 8px; } .mode-option, .tab, .button, .settings-profile-option { min-height: 36px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--text); background: transparent; padding: 0 12px; font-weight: 700; } .mode-option.active, .tab.active, .settings-profile-option.active { background: var(--surface); border-color: var(--line); } .mode-option.live.active { color: var(--red); } .button { color: var(--button-ink); border-color: transparent; } .button.primary { background: var(--teal); } .button.primary:hover { background: var(--teal-dark); } .button.neutral { color: var(--text); background: var(--neutral-bg); border-color: var(--neutral-border); } .theme-select { min-height: 36px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; background: var(--neutral-bg); color: var(--text); font-weight: 700; cursor: pointer; } .button.danger { background: var(--red); } .button:disabled { opacity: 0.55; cursor: not-allowed; } .live-confirm { width: 100%; min-height: 36px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; background: var(--input-bg); } .hidden { display: none !important; } .metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; overflow: hidden; margin-bottom: 14px; } .metric { min-width: 0; padding: 14px; border-right: 1px solid var(--line); } .metric:last-child { border-right: 0; } .metric span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; } .metric strong { display: block; margin-top: 5px; font-size: 20px; line-height: 1.1; overflow-wrap: anywhere; } .tabs { margin-bottom: 14px; } .message { margin-bottom: 14px; border-radius: 8px; border: 1px solid var(--line); padding: 10px 12px; background: var(--surface); color: var(--text); } .message.error { border-color: var(--message-error-border); background: var(--red-soft); color: var(--red); } .message.ok { border-color: var(--message-ok-border); background: var(--message-ok-bg); color: var(--teal-dark); } .view { display: none; } .view.active { display: block; } .grid.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .panel { padding: 14px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .empty, .subtle { color: var(--muted); } .position-row, .settings-item, .event-list div { display: grid; grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1.6fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .position-row:first-child, .settings-item:first-child, .event-list div:first-child { border-top: 0; } .event-list { margin: 0; } .event-list dt, .settings-item span:first-child, .position-row span:first-child { color: var(--muted); font-weight: 700; } .event-list dd, .settings-item span:last-child, .position-row span:last-child { margin: 0; min-width: 0; overflow-wrap: anywhere; } .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; } table { width: 100%; border-collapse: collapse; min-width: 820px; } table.compact-table { min-width: 460px; } .analytics-wide { margin-top: 14px; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-size: 12px; text-transform: uppercase; background: var(--surface-soft); } td { overflow-wrap: anywhere; } tr:last-child td { border-bottom: 0; } .logbox { height: min(62vh, 720px); margin: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--logbox-bg); color: var(--logbox-fg); padding: 12px; font: 12px/1.45 Consolas, "Courier New", monospace; white-space: pre-wrap; } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; } .settings-form { display: flex; flex-direction: column; } .settings-field { display: grid; grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.6fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); align-items: center; } .settings-field:first-child { border-top: 0; } .settings-field label { color: var(--muted); font-weight: 700; font-size: 13px; overflow-wrap: anywhere; } .settings-field input { width: 100%; min-height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; background: var(--input-bg); } .settings-field input:disabled { background: var(--surface-soft); color: var(--muted); cursor: not-allowed; } .settings-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .settings-secret { display: flex; flex-direction: column; gap: 4px; } .settings-secret-status { font-size: 11px; font-weight: 700; } .settings-secret-status.is-set { color: var(--teal-dark); } .settings-secret-status.is-unset { color: var(--amber); } .settings-radio-group { display: flex; flex-wrap: wrap; gap: 4px 16px; min-height: 34px; align-items: center; } .radio-option { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; } .radio-option input[type="radio"] { width: auto; min-height: 0; cursor: pointer; } .pnl-positive { color: var(--teal-dark); } .pnl-negative { color: var(--red); } @media (max-width: 920px) { .topbar { flex-direction: column; } .controls { grid-template-columns: 1fr 1fr; } .segmented { grid-column: 1 / -1; } .metrics, .grid.two, .settings-grid, .settings-field { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--line); } .metric:last-child { border-bottom: 0; } } @media (max-width: 560px) { .shell { width: min(100vw - 18px, 1380px); padding-top: 12px; } h1 { font-size: 23px; } .controls { grid-template-columns: 1fr; } .button, .live-confirm { width: 100%; } }