/* tv-chart-app mobile design system.
   One small cached stylesheet for every phone page (replaces the 230 KB
   Bootstrap CDN download). Keeps the Bootstrap class names the pages' JS
   already renders (btn, form-control, card, d-flex, ...) so no trading
   logic had to change -- only how it looks. Served at /ui.css?v=N; bump N
   in the pages after editing so phones pick up the new version. */

:root {
  --bg:#0f131c; --surface:#161b26; --surface-2:#1b2230; --raised:#212a3a; --line:#262e3e; --line-2:#323c50;
  --text:#e7ebf2; --muted:#8a93a6; --faint:#5d667a;
  --primary:#2f6fed; --primary-2:#255bc7; --accent:#7c8cff;
  --up:#2ecc8f; --down:#ff5c5c; --warn:#f5b23d; --info:#5aa2ff;
  --radius:14px; --radius-sm:10px;
  --tabbar-h:60px; --safe-b:env(safe-area-inset-bottom, 0px);
  --font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme:dark;
}
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); }
body { color:var(--text); font:15px/1.45 var(--font); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent; }
body.has-tabbar { padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px); }
[hidden] { display:none !important; }
a { color:var(--info); }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
h1,h2,h3,h4,h5 { margin:0 0 .5rem; font-weight:700; line-height:1.2; }
h4 { font-size:1.35rem; }
p { margin:0 0 1rem; }
ul { margin-top:0; }
b, strong { font-weight:650; }

/* ---------------------------------------------------------------- app shell */
.app-top { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:10px; min-height:56px;
  padding:10px 16px; padding-top:max(10px, env(safe-area-inset-top)); background:rgba(15,19,28,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.app-title { flex:1; margin:0; font-size:21px; font-weight:750; letter-spacing:-.01em; }
.app-top-slot { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.page { padding:14px 14px 0; max-width:720px; margin:0 auto; }

.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:900; display:flex; height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b); background:rgba(15,19,28,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); }
.tabbar.inline { position:static; flex:none; }
.tabbar > .tab, .tabbar > .nav-menu { flex:1; }
.tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:100%; height:var(--tabbar-h);
  color:var(--muted); text-decoration:none; font-size:11px; font-weight:600; background:none; border:0; cursor:pointer; }
.tab svg { width:23px; height:23px; }
.tab.active, .tab[aria-expanded="true"] { color:var(--text); }
.tab.active svg { color:var(--accent); }

/* "More" menu = a sheet above the tab bar (keeps the old #nav-menu-* ids so each page's wiring still works) */
.nav-menu { position:relative; }
.nav-menu-dropdown { position:fixed; right:10px; left:auto; bottom:calc(var(--tabbar-h) + var(--safe-b) + 8px); min-width:210px;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; z-index:1000;
  box-shadow:0 18px 40px rgba(0,0,0,.55); }
.nav-menu-item { display:block; width:100%; text-align:left; padding:13px 16px; color:var(--text); text-decoration:none;
  background:none; border:0; font-size:15px; cursor:pointer; }
.nav-menu-item:active, .nav-menu-item:hover { background:var(--raised); }
.nav-menu-item.active { color:var(--accent); font-weight:650; }
.nav-menu-item + .nav-menu-item { border-top:1px solid var(--line); }
#nav-menu-logout { color:var(--down); }

/* ----------------------------------------------------- shared page components */
.section-title { font-size:17px; font-weight:700; margin:20px 0 10px; letter-spacing:-.005em; }
.section-title:first-child { margin-top:4px; }
.card-row { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:10px; }
.empty-ill { display:block; width:140px; max-width:60%; height:auto; margin:4px auto 10px; }
.empty { color:var(--muted); font-size:14px; padding:18px; text-align:center; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--radius); }
.pl-pos, .text-up { color:var(--up) !important; } .pl-neg, .text-down { color:var(--down) !important; }
.pm-backdrop { position:fixed; inset:0; background:rgba(5,8,14,.65); display:flex; align-items:flex-end; z-index:1100; }
.pm-sheet { background:var(--surface); border-top:1px solid var(--line-2); border-radius:20px 20px 0 0; padding:10px 16px 18px;
  padding-bottom:calc(18px + var(--safe-b)); width:100%; max-width:720px; margin:0 auto; max-height:88vh; overflow-y:auto; cursor:default; }
.pm-sheet::before { content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--line-2); margin:0 auto 12px; }
.pm-section-title { font-weight:700; margin-bottom:6px; }

/* --------------------------------------------------- Bootstrap-compatible bits */
.small, small { font-size:.86em; }
.fs-5 { font-size:1.2rem !important; } .fs-6 { font-size:1rem !important; }
.fw-semibold { font-weight:650 !important; } .fw-bold { font-weight:750 !important; } .fst-italic { font-style:italic !important; }
.font-monospace { font-family:var(--mono) !important; font-size:.95em; }
.text-uppercase { text-transform:uppercase !important; } .text-center { text-align:center !important; } .text-end { text-align:right !important; }
.text-body-secondary, .text-muted { color:var(--muted) !important; } .text-body-tertiary { color:var(--faint) !important; }
.text-danger { color:var(--down) !important; } .text-success { color:var(--up) !important; } .text-warning { color:var(--warn) !important; }
.text-primary { color:var(--accent) !important; } .text-light { color:var(--text) !important; } .text-dark { color:#0f131c !important; }
.text-bg-success { background:var(--up) !important; color:#06130d !important; } .text-bg-warning { background:var(--warn) !important; color:#1c1404 !important; }
.text-bg-danger { background:var(--down) !important; color:#fff !important; } .text-bg-light { background:#e7ebf2 !important; color:#0f131c !important; }
.bg-dark { background:#0b0e15 !important; } .bg-opacity-75 { background:rgba(11,14,21,.78) !important; }
.rounded { border-radius:var(--radius-sm) !important; }
.border { border:1px solid var(--line) !important; } .border-top { border-top:1px solid var(--line) !important; }
.border-bottom { border-bottom:1px solid var(--line) !important; } .border-secondary-subtle { border-color:var(--line) !important; }
.position-absolute { position:absolute !important; } .position-relative { position:relative !important; }
.start-0 { left:0 !important; } .top-0 { top:0 !important; } .end-0 { right:0 !important; }
.w-100 { width:100% !important; }
.d-flex { display:flex !important; } .d-block { display:block !important; } .d-inline-block { display:inline-block !important; } .d-none { display:none !important; }
.flex-wrap { flex-wrap:wrap !important; } .flex-fill { flex:1 1 auto !important; } .flex-grow-1 { flex-grow:1 !important; } .flex-column { flex-direction:column !important; }
.justify-content-between { justify-content:space-between !important; } .justify-content-center { justify-content:center !important; } .justify-content-end { justify-content:flex-end !important; }
.align-items-center { align-items:center !important; } .align-items-baseline { align-items:baseline !important; } .align-items-start { align-items:flex-start !important; }
.gap-1 { gap:4px !important; } .gap-2 { gap:8px !important; } .gap-3 { gap:14px !important; }
.m-0{margin:0!important} .m-2{margin:8px!important}
.mt-0{margin-top:0!important} .mt-1{margin-top:4px!important} .mt-2{margin-top:8px!important} .mt-3{margin-top:14px!important} .mt-4{margin-top:22px!important}
.mb-0{margin-bottom:0!important} .mb-1{margin-bottom:4px!important} .mb-2{margin-bottom:8px!important} .mb-3{margin-bottom:14px!important} .mb-4{margin-bottom:22px!important}
.ms-1{margin-left:4px!important} .ms-2{margin-left:8px!important} .me-1{margin-right:4px!important} .me-2{margin-right:8px!important}
.p-0{padding:0!important} .p-2{padding:8px!important} .p-3{padding:14px!important}
.px-2{padding-left:8px!important;padding-right:8px!important} .px-3{padding-left:14px!important;padding-right:14px!important}
.py-2{padding-top:8px!important;padding-bottom:8px!important} .py-5{padding-top:40px!important;padding-bottom:40px!important}
.pt-2{padding-top:8px!important} .ps-3{padding-left:14px!important}

/* grid (settings page) */
.row { display:flex; flex-wrap:wrap; margin-left:calc(var(--gx, 12px) / -2); margin-right:calc(var(--gx, 12px) / -2); row-gap:var(--gy, 0px); }
.row > * { padding-left:calc(var(--gx, 12px) / 2); padding-right:calc(var(--gx, 12px) / 2); width:100%; }
.g-2 { --gx:8px; --gy:8px; } .g-3 { --gx:14px; --gy:14px; }
.col-12 { flex:0 0 100%; } .col-6 { flex:0 0 50%; max-width:50%; }
@media (min-width:576px) { .col-sm-6 { flex:0 0 50%; max-width:50%; } }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid transparent; background:var(--raised); color:var(--text); font-weight:650; font-size:14.5px; line-height:1.2;
  text-decoration:none; cursor:pointer; user-select:none; transition:background-color .12s, transform .06s; }
.btn:active:not(:disabled) { transform:scale(.98); }
.btn:disabled, .btn.disabled { opacity:.45; cursor:default; pointer-events:none; }
.btn-sm { min-height:36px; padding:6px 12px; font-size:13.5px; }
.btn-primary { background:var(--primary); color:#fff; } .btn-primary:hover { background:var(--primary-2); }
.btn-danger { background:var(--down); color:#fff; } .btn-success { background:var(--up); color:#05130c; }
.btn-warning { background:var(--warn); color:#1c1404; }
.btn-outline-secondary, .btn-outline-light { background:var(--surface-2); border-color:var(--line-2); color:var(--text); }
.btn-outline-primary { background:rgba(124,140,255,.12); border-color:rgba(124,140,255,.35); color:#b4bdff; }
.btn-outline-success { background:rgba(46,204,143,.12); border-color:rgba(46,204,143,.35); color:var(--up); }
.btn-outline-danger { background:rgba(255,92,92,.12); border-color:rgba(255,92,92,.38); color:#ff8080; }
.btn-outline-warning { background:rgba(245,178,61,.12); border-color:rgba(245,178,61,.38); color:var(--warn); }
.btn-link { background:none; border:0; color:var(--info); min-height:0; padding:4px 0; font-weight:600; }
.btn-close { width:32px; height:32px; border:0; border-radius:50%; background:var(--raised) center/12px no-repeat
  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e7ebf2'%3e%3cpath d='M.3.3a1 1 0 0 1 1.4 0L8 6.6 14.3.3a1 1 0 1 1 1.4 1.4L9.4 8l6.3 6.3a1 1 0 0 1-1.4 1.4L8 9.4l-6.3 6.3a1 1 0 0 1-1.4-1.4L6.6 8 .3 1.7a1 1 0 0 1 0-1.4z'/%3e%3c/svg%3e");
  cursor:pointer; flex:none; }

/* forms */
.form-label { display:block; color:#c9d0dc; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.form-text { color:var(--muted); font-size:12.5px; margin-top:4px; }
.form-control, .form-select { display:block; width:100%; min-height:42px; padding:9px 12px; background:var(--bg); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--radius-sm); font-size:16px; /* 16px stops iOS zoom-on-focus */ outline:none; appearance:none; }
.form-control-sm, .form-select-sm { min-height:38px; padding:7px 10px; font-size:16px; }
.form-control:focus, .form-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,140,255,.2); }
.form-control::placeholder { color:var(--faint); text-transform:none; }
.form-select { padding-right:32px; background:var(--bg) right 10px center/12px no-repeat
  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a93a6' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
textarea.form-control { min-height:84px; }
.form-check { display:flex; align-items:flex-start; gap:10px; min-height:28px; margin-bottom:6px; }
.form-check-input { flex:none; width:20px; height:20px; margin:2px 0 0; accent-color:var(--primary); cursor:pointer; }
.form-check-label { cursor:pointer; }
.input-group { display:flex; align-items:stretch; width:100%; }
.input-group > .form-control, .input-group > .form-select { flex:1 1 auto; width:1%; min-width:0; }
.input-group > :not(:first-child) { border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px; }
.input-group > :not(:last-child) { border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group-text { display:flex; align-items:center; padding:0 12px; background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--radius-sm); color:var(--muted); font-size:14px; white-space:nowrap; }

/* cards (settings) */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.card-header { padding:14px 16px 0; font-weight:700; font-size:16.5px; background:none; border:0; }
.card-body { padding:10px 16px 16px; }

/* badges, tabs, spinner */
.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:650; line-height:1.3;
  background:var(--raised); color:var(--text); white-space:nowrap; }
.nav { display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.nav-tabs { gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px; }
.nav-tabs .nav-item { flex:1; }
.nav-link { display:block; text-align:center; padding:8px 10px; border-radius:9px; color:var(--muted); font-weight:650; font-size:14px;
  text-decoration:none; border:0; background:none; width:100%; }
.nav-link.active { background:var(--raised); color:var(--text); }
.spinner-border { display:inline-block; width:2rem; height:2rem; border:.22em solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:ui-spin .75s linear infinite; vertical-align:-.125em; }
.spinner-border-sm { width:1rem; height:1rem; border-width:.18em; }
@keyframes ui-spin { to { transform:rotate(360deg); } }

/* skeleton shimmer for first paint */
.skeleton { border-radius:var(--radius); background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size:200% 100%; animation:ui-shimmer 1.2s infinite; min-height:84px; margin-bottom:10px; }
@keyframes ui-shimmer { to { background-position:-200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}