:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #071d3d; background: #f3f7fc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f3f7fc; }
button, input { font: inherit; } button { cursor: pointer; } .hidden { display: none !important; }
.screen { min-height: 100vh; } .login-screen { display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 20% 10%, #183b67, #07172e 60%, #030b17); }
.login-card { width: min(100%, 390px); display: grid; gap: 1rem; padding: 2rem; border-radius: 24px; background: white; box-shadow: 0 20px 60px #0007; }
.brand-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: white; font-size: 1.1rem; font-weight: 900; background: linear-gradient(135deg, #5848eb, #2176e5); }
h1, p { margin: 0; } h1 { font-size: 1.8rem; } .eyebrow { color: #58708f; font-size: .72rem; font-weight: 850; letter-spacing: .1em; }
label { display: grid; gap: .4rem; color: #182f4e; font-size: .86rem; font-weight: 750; } label span { color: #667b96; font-weight: 500; }
input { width: 100%; padding: .82rem; border: 1px solid #c7d7e9; border-radius: 11px; } input:focus { outline: 3px solid #2176e52a; border-color: #2176e5; }
.primary { min-height: 48px; border: 0; border-radius: 12px; color: white; font-weight: 850; background: #2176e5; }.error { min-height: 1rem; color: #c72b35; font-size: .88rem; }
.mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: max(1.3rem, env(safe-area-inset-top)) 1.15rem 1rem; background: white; border-bottom: 1px solid #dbe6f2; }.icon-button { width: 44px; height: 44px; border: 1px solid #c3d5e9; border-radius: 12px; color: #1456a2; background: white; font-size: 1.4rem; }
.notice { margin: .8rem 1rem 0; padding: .8rem .9rem; border: 1px solid #e9b2b7; border-radius: 12px; color: #a31f29; background: #fff0f1; font-weight: 700; font-size: .88rem; }.notice.ok { border-color: #a9dfc9; color: #006e52; background: #ecf9f3; }
.content { padding: 1rem 0 6.5rem; }.card-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 0 1rem 1rem; scrollbar-width: none; }.card-track::-webkit-scrollbar { display: none; }
.day-summary { flex: 0 0 calc(100vw - 2rem); min-height: 430px; display: grid; align-content: start; gap: 1rem; padding: 1.3rem; border: 2px solid #80d5bd; border-radius: 18px; background: white; box-shadow: 0 10px 28px #17345d12; scroll-snap-align: center; }.day-summary h2 { margin: 0; font-size: 1.38rem; }.day-summary-heading { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }.day-summary-heading > span { display: grid; gap: .15rem; text-align: right; }.day-summary-heading small { color: #60738c; font-size: .68rem; font-weight: 800; text-transform: uppercase; }.day-summary-heading strong { font-size: 1.3rem; }.day-table { border-top: 1px solid #dce5ef; }.day-row { display: grid; grid-template-columns: 1.25fr .8fr 1.08fr; gap: .45rem; align-items: center; padding: .78rem 0; border-bottom: 1px solid #e5edf5; font-size: .72rem; }.day-row:last-child { border-bottom: 0; }.day-row strong, .day-row b { font-size: .78rem; }.day-row b { color: #007454; }.day-row b:not(.live) { color: #334e70; }.day-run-pnl { display: grid; gap: .18rem; text-align: right; }.day-run-pnl b { color: #071d3d !important; font-size: .7rem; }.day-header { color: #60738c; font-size: .64rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }.run-card { flex: 0 0 calc(100vw - 2rem); min-height: 430px; display: flex; flex-direction: column; gap: 1rem; padding: 1.3rem; border: 2px solid #f3b449; border-radius: 18px; background: white; box-shadow: 0 10px 28px #17345d12; scroll-snap-align: center; }.run-card.running { border-color: #80d5bd; }.run-card h2 { margin: .1rem 0; font-size: 1.38rem; }.card-top, .status-line, .metric-row { display: flex; justify-content: space-between; gap: .8rem; }.muted { color: #5e708b; }.pill { display: inline-flex; align-items: center; width: max-content; height: max-content; padding: .34rem .65rem; border: 1px solid #f0c872; border-radius: 999px; color: #8b5a00; background: #fff7e4; font-size: .78rem; font-weight: 850; }.pill.running { border-color: #9ee1cb; color: #006d52; background: #e9f8f3; }.pnl { display: grid; gap: .25rem; padding: 1.25rem; border: 1px solid #dce5ef; border-radius: 13px; text-align: center; }.pnl strong { font-size: 2rem; }.metric-row { justify-content: stretch; }.metric { flex: 1; display: grid; gap: .25rem; padding: .85rem .35rem; border: 1px solid #dce5ef; border-radius: 11px; text-align: center; }.metric strong { font-size: 1.25rem; }.metric span { color: #60738c; font-size: .72rem; }
details { display: none; }.stop { margin-top: auto; min-height: 50px; border: 1px solid #ef9da4; border-radius: 12px; color: #be2631; font-weight: 900; background: #fff4f5; }.stop:disabled { opacity: .5; cursor: not-allowed; }
.connection-list { display: grid; gap: .85rem; padding: 0 1rem; }.account-card { display: grid; gap: .7rem; padding: 1.1rem; border: 1px solid #d9e5f1; border-radius: 15px; background: white; }.account-card header { display: flex; justify-content: space-between; gap: .6rem; }.connect { min-height: 44px; border: 1px solid #b9d3f2; border-radius: 11px; color: #155baa; font-weight: 800; background: #f3f8ff; }.bottom-nav { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; padding: .7rem 1rem max(.7rem, env(safe-area-inset-bottom)); border-top: 1px solid #dbe6f2; background: #fffffff2; backdrop-filter: blur(12px); }.bottom-nav button { min-height: 40px; border: 0; border-radius: 10px; color: #4c6481; font-weight: 800; background: transparent; }.bottom-nav button.active { color: #155baa; background: #eaf3ff; }