/* ═══════════════ KVCBoT v3 — "Daylight Terminal" visual identity ════════════ Clean, professional LIGHT theme: soft cool-grey canvas, crisp white cards, emerald/teal brand accents, pill tabs, colour-coded bull/bear. Fully responsive for phones, tablets and desktop (iOS + Android safe-area aware). */ :root { --bg: #eef2f8; --bg-2: #ffffff; --card: #ffffff; --card-2: #f4f7fc; --surface: #f1f5fb; /* inputs / inset surfaces */ --border: rgba(28, 50, 92, 0.14); --border-hi: rgba(15, 157, 107, 0.45); --text: #16233b; --muted: #5d6b85; --accent: #0f9d6b; /* emerald — readable on white */ --accent-2: #0a7d55; --grad: linear-gradient(135deg, #10c98a 0%, #0f9d6b 100%); --bull: #12b886; --bear: #e03131; --warn: #d9820a; --danger: #e03131; --radius: 16px; /* Platform-native type: SF Pro on iOS, Roboto on Android, Segoe on Windows. This is what makes the shell read as an APP rather than a web page. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, "Noto Sans", sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --shadow: 0 6px 22px rgba(24, 44, 84, 0.09); --shadow-lg: 0 18px 48px rgba(24, 44, 84, .18); --nav-w: 236px; --topbar-h: 56px; --bottomnav-h: 60px; /* translucent chrome (top bar, side rail, bottom bar, toasts) */ --glass: rgba(255, 255, 255, .88); --glass-strong: rgba(255, 255, 255, .86); --tint: rgba(16, 201, 138, .07); /* hover wash */ --tint-2: rgba(16, 201, 138, .15); /* active wash */ --tint-3: rgba(59, 130, 246, .09); /* active wash, second stop */ --glow-1: rgba(16, 201, 138, .10); /* page backdrop blooms */ --glow-2: rgba(59, 130, 246, .10); --glow-3: rgba(20, 184, 166, .08); --scroll: rgba(28, 50, 92, .20); color-scheme: light; } /* ═══════════ THEMES — set via data-theme on ═══════════ */ /* Midnight — deep navy, the classic after-hours trading look */ [data-theme="dark"] { --bg: #0b1220; --bg-2: #111a2c; --card: #141d31; --card-2: #1a2439; --surface: #1a2439; --border: rgba(148, 180, 235, .16); --text: #e8eefb; --muted: #93a3c0; --shadow: 0 6px 22px rgba(0, 0, 0, .38); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55); --glass: rgba(17, 26, 44, .88); --glass-strong: rgba(20, 29, 49, .92); --glow-1: rgba(16, 201, 138, .10); --glow-2: rgba(59, 130, 246, .12); --glow-3: rgba(20, 184, 166, .07); --scroll: rgba(148, 180, 235, .22); color-scheme: dark; } /* Charcoal — neutral dark, less blue */ [data-theme="charcoal"] { --bg: #15171a; --bg-2: #1c1f23; --card: #1e2126; --card-2: #24282e; --surface: #24282e; --border: rgba(210, 216, 226, .15); --text: #eceef2; --muted: #9aa3b1; --shadow: 0 6px 22px rgba(0, 0, 0, .40); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .58); --glass: rgba(28, 31, 35, .90); --glass-strong: rgba(30, 33, 38, .93); --glow-1: rgba(16, 201, 138, .07); --glow-2: rgba(120, 130, 150, .07); --glow-3: rgba(20, 184, 166, .05); --scroll: rgba(210, 216, 226, .20); color-scheme: dark; } /* Warm paper — easy-on-the-eyes light */ [data-theme="paper"] { --bg: #f6f2ea; --bg-2: #fffdf9; --card: #fffdf9; --card-2: #f2ece1; --surface: #f2ece1; --border: rgba(94, 76, 48, .16); --text: #2a2318; --muted: #6d6152; --glass: rgba(255, 253, 249, .90); --glass-strong: rgba(255, 253, 249, .88); --glow-1: rgba(191, 149, 63, .10); --glow-2: rgba(160, 120, 80, .08); --glow-3: rgba(120, 150, 110, .07); --scroll: rgba(94, 76, 48, .22); color-scheme: light; } /* ═══════ ACCENTS — set via data-accent on ═══════ */ [data-accent="indigo"] { --accent: #4f46e5; --accent-2: #4338ca; --grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --border-hi: rgba(79, 70, 229, .45); --tint: rgba(79, 70, 229, .08); --tint-2: rgba(79, 70, 229, .16); --tint-3: rgba(14, 165, 233, .09); --glow-1: rgba(79, 70, 229, .11); --glow-2: rgba(14, 165, 233, .10); } [data-accent="amber"] { --accent: #b45309; --accent-2: #92400e; --grad: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); --border-hi: rgba(180, 83, 9, .45); --tint: rgba(180, 83, 9, .08); --tint-2: rgba(245, 158, 11, .18); --tint-3: rgba(217, 119, 6, .10); --glow-1: rgba(245, 158, 11, .12); --glow-2: rgba(180, 83, 9, .08); } [data-accent="rose"] { --accent: #be123c; --accent-2: #9f1239; --grad: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); --border-hi: rgba(190, 18, 60, .45); --tint: rgba(190, 18, 60, .07); --tint-2: rgba(244, 63, 94, .16); --tint-3: rgba(168, 85, 247, .09); --glow-1: rgba(244, 63, 94, .10); --glow-2: rgba(168, 85, 247, .10); } [data-accent="slate"] { --accent: #0f766e; --accent-2: #115e59; --grad: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); --border-hi: rgba(15, 118, 110, .45); --tint: rgba(15, 118, 110, .08); --tint-2: rgba(20, 184, 166, .16); --tint-3: rgba(100, 116, 139, .10); --glow-1: rgba(20, 184, 166, .10); --glow-2: rgba(100, 116, 139, .10); } /* accents on dark need brighter ink */ [data-theme="dark"], [data-theme="charcoal"] { --accent: #2ee6a0; --accent-2: #7ef0c4; } [data-theme="dark"][data-accent="indigo"], [data-theme="charcoal"][data-accent="indigo"] { --accent: #a5b4fc; --accent-2: #c7d2fe; } [data-theme="dark"][data-accent="amber"], [data-theme="charcoal"][data-accent="amber"] { --accent: #fbbf24; --accent-2: #fcd34d; } [data-theme="dark"][data-accent="rose"], [data-theme="charcoal"][data-accent="rose"] { --accent: #fb7185; --accent-2: #fda4af; } [data-theme="dark"][data-accent="slate"], [data-theme="charcoal"][data-accent="slate"] { --accent: #5eead4; --accent-2: #99f6e4; } /* ═══ P&L COLOURS — colour-blind safe option (blue/orange instead of green/red) ═══ */ [data-pnl="cb"] { --bull: #2563eb; --bear: #ea580c; } [data-theme="dark"][data-pnl="cb"], [data-theme="charcoal"][data-pnl="cb"] { --bull: #60a5fa; --bear: #fb923c; } /* brighter bull/bear on dark for contrast */ [data-theme="dark"], [data-theme="charcoal"] { --bull: #34d399; --bear: #fb7185; --warn: #fbbf24; } /* ═══ DENSITY + TEXT SIZE ═══ */ [data-density="compact"] { --radius: 12px; } [data-density="compact"] .card { padding: 12px 14px; } [data-density="compact"] th, [data-density="compact"] td { padding: 6px 8px; } [data-density="compact"] .tab { padding: 7px 11px; } [data-density="compact"] .grid { gap: 10px; } [data-density="compact"] .stat-value { font-size: 22px; } [data-density="compact"] .mt { margin-top: 10px; } [data-density="compact"] .mb { margin-bottom: 10px; } [data-text="s"] body { font-size: 13px; } [data-text="l"] body { font-size: 15.5px; } [data-text="xl"] body { font-size: 17px; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Form controls don't inherit type by default — without this every button and select renders in the browser's font instead of the app's. */ button, input, select, textarea { font-family: inherit; font-size: inherit; } /* App-like feel: chrome isn't selectable, data is. */ .sidenav, .topbar, .bottomnav, .btn, .icon-btn, .tab, .pill, .chip { user-select: none; -webkit-user-select: none; } /* numbers line up like a trading terminal */ .stat-value, td, .mono, .ticker, .clock { font-variant-numeric: tabular-nums; } body { background: radial-gradient(1100px 520px at 85% -10%, var(--glow-1), transparent 60%), radial-gradient(1300px 700px at -10% -20%, var(--glow-2), transparent 55%), radial-gradient(900px 600px at 50% 120%, var(--glow-3), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; min-height: 100vh; overflow-x: hidden; /* wide content scrolls inside .table-wrap, never the page */ overscroll-behavior-y: none; /* no rubber-band "it's a web page" bounce */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hidden { display: none !important; } h2 { font-size: 20px; font-weight: 760; letter-spacing: -.022em; } h3 { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .085em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img, svg, canvas { max-width: 100%; } ::selection { background: var(--tint-2); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(28, 50, 92, .35); } ::-webkit-scrollbar-track { background: transparent; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } /* ── Login ─────────────────────────────────────────────── */ .login-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); background: radial-gradient(1100px 640px at 12% -12%, var(--glow-1), transparent 60%), radial-gradient(980px 640px at 112% 6%, var(--glow-2), transparent 55%), radial-gradient(920px 680px at 50% 118%, var(--glow-3), transparent 55%), var(--bg); } .login-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .login-chart { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .40; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 80%, transparent); } .blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .35; } .blob-1 { width: 340px; height: 340px; left: -60px; top: -50px; background: radial-gradient(circle, #10c98a, transparent 70%); animation: floatA 15s ease-in-out infinite; } .blob-2 { width: 300px; height: 300px; right: -50px; top: 40px; background: radial-gradient(circle, #3b82f6, transparent 70%); animation: floatB 18s ease-in-out infinite; } .blob-3 { width: 380px; height: 380px; left: 42%; bottom: -150px; background: radial-gradient(circle, #14b8a6, transparent 70%); animation: floatA 22s ease-in-out infinite; } @keyframes floatA { 0%,100% { transform: translate(0,0) } 50% { transform: translate(32px,-26px) } } @keyframes floatB { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-30px,24px) } } .login-card { position: relative; z-index: 2; min-width: 0; width: 100%; max-width: 420px; padding: 34px 30px 30px; background: var(--glass-strong); border: 1px solid var(--border-hi); border-radius: 26px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow-lg); animation: fadeUp .5s ease; } .login-badge { display: block; width: fit-content; margin: 0 auto 14px; font-size: 10.5px; font-weight: 750; letter-spacing: .16em; padding: 5px 13px; border-radius: 999px; color: var(--accent); background: var(--tint-2); border: 1px solid var(--border-hi); } .login-logo { font-size: 34px; font-weight: 800; text-align: center; letter-spacing: -.03em; } .login-logo span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .login-sub { text-align: center; color: var(--muted); font-size: 12.5px; margin: 8px 0 12px; letter-spacing: .02em; } .login-hero { text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.65; margin: 0 2px 16px; } .login-hero b { color: var(--text); font-weight: 700; } .feat-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 22px; } .feat-chip { font-size: 10.5px; font-weight: 640; padding: 5px 11px; border-radius: 999px; color: var(--accent); background: var(--tint); border: 1px solid var(--border-hi); } .login-card label { display: block; font-size: 11.5px; color: var(--muted); margin: 15px 0 6px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; } .login-card input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; } .login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint-2); } .login-error { margin-top: 14px; color: var(--bear); font-size: 13px; text-align: center; } .login-foot { margin-top: 24px; text-align: center; color: var(--muted); font-size: 11.5px; } .login-switch { display: flex; gap: 8px; margin: 6px 0 4px; } .ls-tab { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-weight: 650; cursor: pointer; font-size: 13px; } .ls-tab.active { background: var(--card-2); color: var(--text); border-color: var(--border-hi); } .signup-ok { margin-top: 14px; color: var(--accent); font-size: 13px; line-height: 1.5; background: rgba(16,201,138,.08); border: 1px solid rgba(16,201,138,.3); border-radius: 10px; padding: 12px 14px; } .login-disclaimer { margin-top: 20px; font-size: 11px; line-height: 1.6; color: var(--muted); background: rgba(224,49,49,.05); border: 1px solid rgba(224,49,49,.25); border-radius: 12px; padding: 12px 13px; } .login-disclaimer b { color: var(--warn); } .ld-stat { color: var(--bear); font-weight: 800; font-size: 12.5px; letter-spacing: .01em; margin-bottom: 7px; } .dim { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; } .app-disclaimer { margin: 26px 20px 20px; padding: 12px 16px; font-size: 11.5px; line-height: 1.5; color: var(--muted); text-align: center; border-top: 1px solid var(--border); } .app-disclaimer b { color: var(--warn); } /* ── Buttons ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; justify-content: center; padding: 9px 17px; border-radius: 12px; border: 1px solid var(--border); background: var(--card-2); color: var(--text); font-size: 13.5px; font-weight: 620; cursor: pointer; transition: all .18s ease; white-space: nowrap; } .btn:hover { border-color: var(--border-hi); transform: translateY(-1px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .btn-primary { background: var(--grad); border: none; color: #ffffff; font-weight: 720; } .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(15,157,107,.32); } .btn-success { background: linear-gradient(135deg, #16b57e, #12b886); border: none; color: #fff; font-weight: 720; } .btn-danger { background: linear-gradient(135deg, #e03131, #f36b5a); border: none; color: #fff; font-weight: 720; } .btn-ghost { background: transparent; } .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 10px; } .btn-block { width: 100%; margin-top: 24px; } /* ── Shell: side rail + content column ────────────────── */ .app { display: flex; min-height: 100vh; } .app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--nav-w); } /* Side navigation */ .sidenav { position: fixed; inset: 0 auto 0 0; width: var(--nav-w); z-index: 60; display: flex; flex-direction: column; background: var(--card); border-right: 1px solid var(--border); padding-top: env(safe-area-inset-top); } .sidenav-head { padding: 18px 18px 12px; } .sidenav-head .brand { font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-tag { display: inline-block; font-style: normal; font-size: 9px; font-weight: 800; color: var(--warn); border: 1px solid currentColor; border-radius: 6px; padding: 2px 7px; margin-top: 7px; letter-spacing: .12em; opacity: .85; } .sidenav-tabs { flex: 1; overflow-y: auto; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 2px; -webkit-overflow-scrolling: touch; } .sidenav-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); } .who { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who b { display: block; color: var(--text); font-size: 12.5px; font-weight: 650; } /* Nav items — these are