/* Mobile-first: base styles target small screens; the desktop layout (sidebar nav instead of bottom tab bar) is added via a min-width media query near the bottom of this file. */ :root { --bg: #0f1115; --surface: #171a21; --surface-2: #1f232c; --border: #2a2f3a; --text: #e6e8eb; --text-dim: #9aa1ac; --accent: #2f7cf6; --danger: #d9364a; --radius: 10px; } /* Light theme: applied when the OS prefers light AND the user hasn't explicitly overridden it, or when the user has explicitly chosen light via the theme toggle (data-theme="light" on ). A manual data-theme="dark" always wins over the OS preference too, so the toggle is a real override in both directions. */ /* Light theme, opt-in only. Dark is the default trading experience and is deliberately not conditional on prefers-color-scheme -- see css/terminal.css. Both files must carry the SAME trigger; if they ever disagree the app renders half-light, a defect this project has already hit once. */ :root[data-theme="light"] { --bg: #f5f6f8; --surface: #ffffff; --surface-2: #eef0f3; --border: #d8dce2; --text: #14161a; --text-dim: #5b6270; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } * { box-sizing: border-box; } /* Visible only when focused via keyboard tab -- lets a keyboard/screen-reader user jump straight past the nav to the main content. */ .skip-link { position: absolute; top: -100px; left: 8px; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--radius); z-index: 1000; text-decoration: none; font-size: 0.9rem; transition: top 0.15s ease; } .skip-link:focus { top: 8px; } .offline-banner { position: sticky; top: 0; z-index: 900; background: #7a5b00; color: #fff; text-align: center; font-size: 0.8rem; padding: 6px 12px calc(6px + env(safe-area-inset-top)); } .emergency-stop-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--danger); color: #fff; font-weight: 600; font-size: 0.85rem; padding: 10px 16px; position: sticky; top: 0; z-index: 850; } /* * Windows runtime bugfix: `.emergency-stop-banner { display: flex; }` * above has the SAME CSS specificity (0,1,0) as the browser's own * default `[hidden] { display: none; }` UA-stylesheet rule -- and * author stylesheets win ties over the UA stylesheet in the cascade. * That means the unconditional `display: flex` rule was silently * overriding the `hidden` attribute every time, regardless of its * true value -- setting `banner.hidden = true` in JavaScript never * actually hid the banner visually. This explicit, higher-specificity * rule (two selectors) restores the correct behavior: hidden always * wins, no matter what the base rule says. */ .emergency-stop-banner[hidden] { display: none; } .emergency-stop-reset-btn { background: #fff; color: var(--danger); border: none; border-radius: var(--radius); min-height: 36px; padding: 6px 14px; font-weight: 700; cursor: pointer; flex-shrink: 0; } .theme-toggle { background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); min-height: 36px; min-width: 36px; cursor: pointer; font-size: 1rem; align-self: flex-start; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .topbar .brand { font-weight: 600; font-size: 1rem; } .trading-mode-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: #fff; } .main-content { flex: 1; padding: 16px; padding-bottom: 76px; /* room for the mobile bottom nav */ } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .card h2 { margin-top: 0; font-size: 0.95rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .status-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .status-row:last-child { border-bottom: none; } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .status-dot.ok { background: #2fb673; } .status-dot.bad { background: var(--danger); } /* Bottom tab bar -- mobile default */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--surface); border-top: 1px solid var(--border); } .bottom-nav a { flex: 1; text-align: center; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); text-decoration: none; font-size: 0.75rem; } .bottom-nav a.active { color: var(--accent); } .sidebar-nav { display: none; } input, button { font-family: inherit; font-size: 1rem; } input[type="email"], input[type="password"], input[type="text"] { width: 100%; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); margin-bottom: 12px; } button.primary { width: 100%; min-height: 44px; padding: 12px; border-radius: var(--radius); border: none; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; } button.primary:disabled { opacity: 0.6; cursor: not-allowed; } /* A row of related actions (Start/Stop, Save/Reset). `button.primary` is width:100% because it is also the login form's full-width submit; inside a flex row that made the first button swallow the row while its sibling was squeezed into a two-line sliver. Buttons in an action row size to their own label instead. */ .action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .action-row button.primary, .action-row button { width: auto; min-height: 40px; padding: 10px 18px; white-space: nowrap; } .action-row button:disabled { opacity: 0.5; cursor: not-allowed; } .error-text { color: var(--danger); font-size: 0.85rem; margin-bottom: 12px; } .login-wrap { max-width: 360px; margin: 15vh auto 0; padding: 0 16px; } .masked-field { font-family: ui-monospace, monospace; color: var(--text-dim); } /* --- Desktop layout: sidebar nav replaces the bottom tab bar --- */ @media (min-width: 768px) { .app-shell { flex-direction: row; } .sidebar-nav { display: flex; flex-direction: column; width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 16px 0; } .sidebar-nav a { padding: 10px 20px; min-height: 44px; display: flex; align-items: center; color: var(--text-dim); text-decoration: none; font-size: 0.9rem; } .sidebar-nav a.active { color: var(--text); background: var(--surface-2); border-right: 2px solid var(--accent); } .bottom-nav { display: none; } .main-content { padding: 24px; padding-bottom: 24px; /* A trading terminal is a full-bleed instrument: the chart should use the display it is given. The cap only exists so an ultrawide monitor does not stretch prose to an unreadable line length. */ /* `width: 100%` is required, not decorative: `.main-content` is a flex item in a column container, and auto inline margins cancel the default stretch — without an explicit width the panel shrink-wraps to its widest child and floats in the middle of the screen. */ width: 100%; max-width: 1920px; margin-inline: auto; } .topbar { display: none; } /* trading mode badge moves into sidebar header on desktop */ .sidebar-nav .brand-row { padding: 4px 20px 16px; display: flex; flex-direction: column; gap: 8px; } }