:root { /* ─── Color palette — CRYPTO / trading-floor: jet black + neon mint ─── (Coinbase/Binance vibe: near-black canvas, #00d395 mint primary, gold + red) */ --bg: #0a0a0a; /* near-black canvas */ --surface: #141414; /* card / sidebar */ --surface-2: #1f1f1f; /* hover / elevated */ --td-bg: #141414; /* rows match surface */ --border: #262626; /* subtle hairline (white @ ~6%) */ --fg: #f0f0f0; /* body */ --fg-muted: #a0a0a0; /* secondary */ --primary: #00d395; /* Coinbase neon mint */ --success: #00d395; /* up / wins — same mint */ --warning: #f0b90b; /* Binance gold */ --danger: #ff4d4d; /* down / losses */ --info: #4dabf7; /* electric blue */ --ink: #0a0a0a; /* dark text on neon/gold buttons */ --primary-text: #00d395; /* mint reads great on black */ --success-text: #00d395; --warning-text: #f0b90b; --danger-text: #ff6b6b; --info-text: #74c0fc; /* ─── Typography ──────────────────────────────────────────── Change a single value here to restyle every page at once. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-body: 0.875rem; /* base body text (14px) */ --fs-h1: 1.5rem; /* page title (24px) */ --fs-h2: 1rem; /* section heading (16px) */ --fs-h3: 0.875rem; /* sub-heading / button / input (14px) */ --fs-sm: 0.8125rem; /* muted, sub-title, mono (13px) */ --fs-xs: 0.6875rem; /* uppercase labels, table head (11px) */ --fs-table: 0.875rem; /* ALL table data (14px) */ --fs-stat: 1.5rem; /* stat card number */ --fs-stat-lg: 2rem; /* hero number (earnings) (32px) */ --fs-stat-sub: 1.125rem; /* secondary hero number */ /* ─── Spacing scale — STRICT 4px base. Use ONLY these; never raw px. ── 1=4 2=8 3=12 4=16 5=20 6=24 8=32 10=40 12=48 16=64 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ─── Component tokens — all SNAP to the spacing scale (no off-scale px) ── */ --radius-sm: 6px; /* inputs, buttons, badges-ish */ --radius: 8px; /* cards, popovers */ --radius-lg: 12px; /* large surfaces */ --card-pad: var(--sp-5); /* 20px — .card inner padding */ --page-head-mb: var(--sp-6); /* 24px — gap below every page header */ --section-gap: var(--sp-4); /* 16px — gap between sections/grid */ --table-cell-pad-y: var(--sp-3); /* 12px — table cell vertical pad */ --table-cell-pad-x: var(--sp-4); /* 16px — table cell horizontal pad */ --control-h: 40px; /* inputs & buttons height (scale: sp-10) */ --control-h-sm: 32px; /* small/table buttons (scale: sp-8) */ /* Flowbite card elevation — soft, layered shadow (Tailwind shadow-md). */ --shadow-card: 0 1px 2px 0 rgba(0,0,0,0.06), 0 1px 3px 0 rgba(0,0,0,0.10); --shadow-card-hover: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.08); color-scheme: dark; } /* ─── Light theme ─────────────────────────────────────────── Toggled via . Only colors change; the type & spacing scale above stay identical. */ :root[data-theme="light"] { /* Crypto LIGHT — clean white exchange UI, same mint brand, readable dark accents */ --bg: #f7f9f8; /* faint mint-tinted off-white */ --surface: #ffffff; /* cards */ --surface-2: #eef2f0; /* hover / elevated */ --td-bg: transparent; --border: #e3e8e6; /* hairline */ --fg: #0a1f1a; /* near-black w/ green tint */ --fg-muted: #5b6b66; /* secondary */ --primary: #00a878; /* mint, darkened for contrast on white */ --success: #00a878; --warning: #b8860b; /* gold, darkened */ --danger: #e23b3b; --info: #1d4ed8; --ink: #ffffff; /* light text on the dark/colored buttons */ --primary-text: #008a63; /* mint reads on white */ --success-text: #008a63; --warning-text: #946a00; --danger-text: #c62828; --info-text: #1d4ed8; color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } /* In-table / inline text links — brand mint, underline on hover. */ .link { color: var(--primary-text); font-weight: 600; } .link:hover { text-decoration: underline; } h1 { font-size: var(--fs-h1); font-weight: 600; margin-bottom: var(--sp-4); } h2 { font-size: var(--fs-h2); font-weight: 600; } h3 { font-size: var(--fs-h3); font-weight: 600; } .app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; } .sidebar { width: 224px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; } .brand { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .brand a { display: block; } .brand-logo { width: 100%; max-width: 184px; height: auto; } /* Theme-aware logo swap (transparent PNGs: white-text for dark, black-text for light) */ .logo-dark { display: block; } .logo-light { display: none; } :root[data-theme="light"] .logo-dark { display: none; } :root[data-theme="light"] .logo-light { display: block; } .brand h2 { color: var(--primary); font-size: 13px; font-weight: 700; } .brand p { color: var(--fg-muted); font-size: var(--fs-xs); margin-top: 2px; } .nav-section { padding: var(--sp-3) 0; } .nav-section .label { padding: 6px 16px; font-size: 8px; color: var(--fg-muted); font-weight: 700; letter-spacing: 0.5px; } .nav-section a { display: flex; align-items: center; gap: 10px; padding: var(--sp-2) var(--sp-4); margin: 0 var(--sp-2); color: var(--fg); border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; } .nav-section a:hover { background: var(--surface-2); color: var(--fg); } .nav-section a.active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-text); font-weight: 600; } .nav-section a .nav-badge { margin-left: auto; background: var(--danger); color: #fff; border-radius: 999px; min-width: 20px; height: 18px; padding: 0 6px; font-size: var(--fs-xs); font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .nav-section a svg { width: 15px; height: 15px; flex-shrink: 0; } .sidebar nav { flex: 1; } .sidebar-foot { margin-top: auto; padding: var(--sp-3); border-top: 1px solid var(--border); } /* ── User menu (avatar + name → dropdown) ── */ .user-menu { position: relative; } .user-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer; color: var(--fg); text-align: left; transition: background 0.15s; } .user-btn:hover { background: var(--surface-2); } .avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; } .user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .user-name { font-size: var(--fs-h3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: var(--fs-xs); font-weight: 500; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-btn .chev { width: 16px; height: 16px; color: var(--fg-muted); flex-shrink: 0; transition: transform 0.15s; } .user-menu.open .chev { transform: rotate(180deg); } .user-pop { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); padding: 4px; z-index: 20; display: none; } .user-menu.open .user-pop { display: block; } .user-pop a, .user-pop .menu-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 8px 10px; border-radius: 6px; font-size: var(--fs-h3); color: var(--fg); background: transparent; border: none; cursor: pointer; text-align: left; font-weight: 400; } .user-pop a:hover, .user-pop .menu-item:hover { background: var(--surface-2); } .user-pop .menu-item svg { width: 16px; height: 16px; color: var(--fg-muted); flex-shrink: 0; } .menu-sep { height: 1px; background: var(--border); margin: 4px 2px; } /* Smooth, subtle cross-fade when switching themes */ body, .sidebar, .card, .btn, table thead th, input, select, textarea, .theme-toggle { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .main { flex: 1; overflow-y: auto; min-width: 0; } .main-inner { padding: var(--sp-6); } .topbar { display: none; } .sidebar-overlay { display: none; } /* ─── Standard page header (every page uses this) ─────────── .page-head ── flex row: text block (left) + actions (right) */ .page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--page-head-mb); flex-wrap: wrap; } .page-head h1 { margin-bottom: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: 1.75rem; line-height: 1.33; letter-spacing: -0.01em; } .page-sub { font-size: 0.875rem; color: var(--fg-muted); margin-top: 3px; font-weight: 400; } .page-badge { display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; line-height: 1.6; } .page-head-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); box-shadow: var(--shadow-card); } .card-flush { padding: 0; overflow: hidden; } /* Responsive card row — flexbox auto-wrap. Cards grow to share the row, then break onto their own line as the viewport narrows, and stack full-width on mobile. No media queries needed. */ .card-grid, .grid-4 { display: flex; flex-wrap: wrap; gap: var(--section-gap); margin-bottom: var(--sp-6); } .card-grid > *, .grid-4 > * { flex: 1 1 230px; min-width: 0; } /* 4-up stat row: all four share one row on desktop, wrap 2-up on tablet, then stack 1-up on phones. Smaller flex-basis so 4 fit before wrapping. */ .stats-4 > * { flex: 1 1 calc(25% - var(--section-gap)); min-width: 160px; } @media (max-width: 700px) { .stats-4 > * { flex: 1 1 calc(50% - var(--section-gap)); } } @media (max-width: 420px) { .stats-4 > * { flex: 1 1 100%; } } .stat { transition: box-shadow 0.18s ease, transform 0.18s ease; } .stat:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); } .stat .stat-label { font-size: var(--fs-sm); line-height: 1.4; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg-muted); margin-bottom: var(--sp-2); } .stat .stat-value { font-size: var(--fs-stat); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: var(--fg); } .stat .stat-value-lg { font-size: var(--fs-stat-lg); font-weight: 700; line-height: 1.1; } .stat .stat-sub { font-size: var(--fs-sm); line-height: 1.4; font-weight: 500; color: var(--fg-muted); margin-top: var(--sp-1); } /* ── Worker profile (one-page Overview) — full-width fluid like the Workers table ── */ .profile-wrap { width: 100%; } .profile-card { display: flex; gap: var(--sp-5); align-items: flex-start; margin-bottom: var(--sp-6); } .avatar-lg { width: 64px; height: 64px; font-size: 1.25rem; border-radius: 50%; flex-shrink: 0; } .profile-meta { flex: 1; min-width: 0; } .profile-name { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--sp-2); } .profile-meta .kv { padding: 5px 0; border-bottom: 1px solid var(--border); } .profile-meta .kv:last-child { border-bottom: none; } @media (max-width: 480px) { .profile-card { flex-direction: column; align-items: center; text-align: center; } } table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: var(--fs-table); } table thead th { padding: var(--table-cell-pad-y) var(--table-cell-pad-x); text-align: left; text-transform: uppercase; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--fg-muted); background: var(--surface-2); border-bottom: 1px solid var(--border); } table td { padding: var(--table-cell-pad-y) var(--table-cell-pad-x); background: var(--td-bg); border-bottom: 1px solid var(--border); vertical-align: middle; font-weight: 500; } table tbody tr:hover { background: var(--surface-2); } table tbody tr:last-child td { border-bottom: none; } .empty { text-align: center; padding: var(--sp-6); color: var(--fg-muted); } .muted { color: var(--fg-muted); } .mono { font-family: var(--font-mono); font-size: var(--fs-sm); } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dot-green { background: var(--success-text); } .dot-red { background: var(--danger-text); } .badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; } .badge-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success-text); } .badge-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); } .badge-warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning-text); } .badge-muted { background: var(--surface-2); color: var(--fg-muted); } .btn { height: var(--control-h); padding: 0 var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-h3); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg); transition: filter 0.15s, box-shadow 0.15s, background-color 0.15s; } .btn:hover { filter: brightness(1.08); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent); } .btn:active { filter: brightness(0.95); } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-success { background: var(--success); border-color: var(--success); color: #fff; } .btn-warning { background: var(--warning); border-color: var(--warning); color: var(--ink); } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } /* Only TWO sizes exist: default (toolbar/form actions) and -sm (inside table rows). */ .btn-sm { height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); } .btn-block { width: 100%; } /* Neutral 'soft' button (e.g. Edit). Dark mode: white bg + black text so it reads as a real button on the dark surface; light mode: subtle grey. */ .btn-soft { background: #fff; color: var(--ink); border-color: #fff; } .btn-soft:hover { background: #eceef1; opacity: 1; } :root[data-theme="light"] .btn-soft { background: var(--ink); color: #fff; border-color: var(--ink); } /* Light mode only: neutral .btn (e.g. "← Workers") becomes a dark button. Colored variants and .btn-soft keep their own look. */ :root[data-theme="light"] .btn:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-soft) { background: var(--ink); color: #fff; border-color: var(--ink); } /* Workers table action cell: Start/Stop + Overview share the row equally, centered. (Start/Stop is wrapped in a form, so the form grows and the button fills it.) */ td[data-cell="actions"] { display: flex; gap: 6px; flex-wrap: wrap; } td[data-cell="actions"] > form { flex: 1; display: flex; } td[data-cell="actions"] > form > .btn, td[data-cell="actions"] > a.btn { flex: 1; display: flex; align-items: center; justify-content: center; } /* Force Inter + 14px on all table cells */ table td, table th { font-family: var(--font-sans) !important; font-size: var(--fs-table) !important; } /* Forms inside flex toolbars/cells shouldn't add baseline gaps */ form.inline { display: inline-flex; } input, select, textarea { width: 100%; height: var(--control-h); padding: 0 var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--fg); font-size: var(--fs-h3); font-family: inherit; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); } textarea { padding: var(--sp-3); height: auto; min-height: 200px; resize: vertical; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5; } label { display: block; font-size: var(--fs-sm); color: var(--fg-muted); margin-bottom: 6px; font-weight: 500; } .form-row { margin-bottom: var(--sp-4); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .maxw { max-width: 640px; } .maxw-lg { max-width: 800px; } /* ─── Mobile responsive (≤768px) ──────────────────────────── */ /* ═══ Utilities ═══════════════════════════════════════════ */ .r { text-align: right; } .m-0 { margin: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .fw-600 { font-weight: 600; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .locked { opacity: 0.6; cursor: not-allowed; } .hidden { display: none; } .stack { display: flex; flex-direction: column; gap: var(--sp-2); } .t-muted { color: var(--fg-muted); } .t-success { color: var(--success-text); } .t-warning { color: var(--warning-text); } .t-danger { color: var(--danger-text); } .t-info { color: var(--info-text); } /* ═══ Worker overview: tabs + two-column split ════════════ */ .tabs { display: flex; gap: var(--sp-6); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); } .tabs .tab { padding: 10px 2px; font-weight: 600; border-bottom: 2px solid transparent; color: var(--fg-muted); } .tabs .tab.active { border-bottom-color: var(--primary); color: var(--fg); } .tabs .tab-meta { margin-left: auto; align-self: center; font-size: var(--fs-sm); } .split { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-start; } .split-main { flex: 4 1 560px; min-width: 0; } .split-side { flex: 1 1 200px; min-width: 185px; max-width: 240px; font-size: var(--fs-h3); } .scroll-x { overflow-x: auto; } .scroll-x th, .scroll-x td { white-space: nowrap; } .card-title { margin: 0 0 var(--sp-2); } .card-title .sub { font-weight: 400; font-size: var(--fs-h3); } .section-title { margin: var(--sp-5) 0 var(--sp-2); } .kv { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; } .hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-1) 0; } .hero-num { font-size: var(--fs-stat-lg); font-weight: 700; color: var(--success-text); margin-top: 2px; } /* ═══ Alerts (flash messages) ═════════════════════════════ */ .alert { margin-bottom: var(--sp-4); } .alert-success { border-left: 3px solid var(--success); color: var(--success-text); } .alert-danger { border-left: 3px solid var(--danger); color: var(--danger-text); } /* ═══ Dashboard stat-card accents ═════════════════════════ */ .stat--warning { border-left: 4px solid var(--warning); } .stat--info { border-left: 4px solid var(--info); } .stat--success { border-left: 4px solid var(--success); } .stat--warning .stat-value { color: var(--warning-text); } .stat--info .stat-value { color: var(--info-text); } .stat--success .stat-value { color: var(--success-text); } .stat--primary { border-left: 4px solid var(--primary); } .stat--primary .stat-value { color: var(--primary-text); } .stat--danger { border-left: 4px solid var(--danger); } .stat--danger .stat-value { color: var(--danger-text); } /* ═══ Table cell helpers + inline forms ═══════════════════ */ .cell-ellipsis { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-ellipsis-lg { font-size: var(--fs-sm); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .field-row { display: flex; gap: 6px; } .input-sm { height: var(--control-h-sm); max-width: 150px; } @media (max-width: 768px) { /* Top bar with hamburger — only on mobile */ .topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 14px; } .topbar-toggle { height: 38px; width: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); cursor: pointer; } .topbar-toggle:active { opacity: 0.7; } .topbar-brand { font-weight: 700; color: var(--primary); font-size: 13px; letter-spacing: 0.5px; } .topbar-logo { height: 28px; width: auto; } /* Off-canvas sidebar */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 260px; max-width: 82vw; z-index: 50; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 2px 0 18px rgba(0, 0, 0, 0.45); overflow-y: auto; } .sidebar.open { transform: translateX(0); } /* Dim overlay behind the open sidebar */ .sidebar-overlay.show { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 40; } /* Tighter content padding on phones */ .main-inner { padding: 16px; } /* Let crowded headers wrap instead of squishing */ .page-head { flex-wrap: wrap; gap: 12px; } /* Wide tables scroll horizontally instead of overflowing the screen */ .card-flush { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Disabled/retired worker row — dimmed but still visible. */ tr.row-disabled td { opacity: 0.5; } tr.row-disabled .link { color: var(--fg-muted); }