:root, html[data-theme="dark"] {
  --bg: #0e1116;
  --panel: #161b22;
  --line: #232a33;
  --text: #e6edf3;
  --muted: #8b949e;
  --pos: #2ea043;
  --neg: #f85149;
  --link: #58a6ff;
  --tag: #1f6feb;
  --grid: #232a33;
  --hover: rgba(255,255,255,.02);
  --max-width: 1480px;
  --radius: 6px;
  font-size: 13px;
}

html[data-theme="light"] {
  --bg: #fafbfc;
  --panel: #ffffff;
  --line: #d0d7de;
  --text: #1f2328;
  --muted: #59636e;
  --pos: #1a7f37;
  --neg: #cf222e;
  --link: #0969da;
  --tag: #0969da;
  --grid: #eaeef2;
  --hover: rgba(0,0,0,.03);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; }
body { padding-bottom: 4rem; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
header { border-bottom: 1px solid var(--line); padding: .75rem 1.25rem; position: sticky; top: 0; background: var(--bg); z-index: 10; }
nav { display: flex; gap: 1.25rem; align-items: center; max-width: var(--max-width); margin: 0 auto; }
nav .brand { font-weight: bold; color: var(--text); margin-right: 1rem; }
nav a { color: var(--muted); }
nav a.active { color: var(--text); border-bottom: 1px solid var(--link); padding-bottom: 2px; }
main { max-width: var(--max-width); margin: 0 auto; padding: 1.25rem; }
h1, h2, h3 { font-family: system-ui, sans-serif; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .25rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.strong { font-weight: 600; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

.page-head { margin-bottom: 1rem; }
.page-head p { margin: .25rem 0 0; }

table.data { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.data th, table.data td { padding: .35rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th { text-align: left; color: var(--muted); font-weight: normal; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--hover); }
table.data.compact th, table.data.compact td { padding: .25rem .4rem; }

a.wallet { display: inline-flex; align-items: center; gap: .5rem; }
a.wallet .pseudo { color: var(--text); }
a.wallet .addr { font-size: .75rem; }
.pin { color: gold; }

.avatar { width: 18px; height: 18px; border-radius: 50%; background: #222; }
.avatar.lg { width: 56px; height: 56px; }

.wallet-head { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.wallet-head .ident { display: flex; gap: 1rem; align-items: center; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: .5rem; margin: 1rem 0; }
.stats > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .75rem; }
.stats label { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; }
.stats b { font-size: 1rem; font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: end; padding: .75rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; }
.filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--muted); }
.filters input, .filters select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .5rem; }
.filters .checkbox { flex-direction: row; align-items: center; gap: .35rem; }
.filters button { background: var(--tag); color: white; border: 0; border-radius: var(--radius); padding: .4rem .75rem; cursor: pointer; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; }
.card summary { cursor: pointer; }
.card pre { background: var(--bg); padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; font-size: .8rem; }

.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem 1rem; margin-top: .5rem; }
.grid-form label { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); font-size: .8rem; }
.grid-form .checkbox { flex-direction: row; align-items: center; gap: .35rem; }
.grid-form input, .grid-form select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .5rem; }
.grid-form button { grid-column: span 2; justify-self: start; background: var(--tag); color: white; border: 0; border-radius: var(--radius); padding: .4rem .9rem; cursor: pointer; }

button.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); padding: .25rem .6rem; border-radius: var(--radius); cursor: pointer; }
button.danger { background: transparent; border: 1px solid var(--neg); color: var(--neg); padding: .25rem .6rem; border-radius: var(--radius); cursor: pointer; }
form.inline { display: inline; margin-right: .25rem; }
.actions { white-space: nowrap; }

.tag { display: inline-block; padding: 1px 6px; font-size: .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.tag.pos { color: var(--pos); border-color: var(--pos); }
.tag.live { color: #d2a8ff; border-color: #d2a8ff; }
.tag.muted { color: var(--muted); }

.side { padding: 1px 6px; border-radius: 4px; font-weight: 600; font-size: .7rem; }
.side.BUY { color: #65d669; background: rgba(46,160,67,.12); }
.side.SELL { color: #ff8585; background: rgba(248,81,73,.12); }

.status { padding: 1px 6px; border-radius: 4px; font-size: .7rem; font-weight: 600; }
.status.PAPER { background: rgba(88,166,255,.15); color: #79b8ff; }
.status.SUBMITTED { background: rgba(210,168,255,.15); color: #d2a8ff; }
.status.FILLED { background: rgba(46,160,67,.15); color: #65d669; }
.status.SKIPPED { background: rgba(139,148,158,.15); color: var(--muted); }
.status.FAILED, .status.PENDING { background: rgba(248,81,73,.15); color: #ff8585; }

.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.tabs a { padding: .4rem .9rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .85rem; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { color: var(--text); border-bottom-color: var(--link); }

.spark-cell { padding-top: 4px !important; padding-bottom: 4px !important; line-height: 0; }
.spark { vertical-align: middle; display: inline-block; }
.chart-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; margin-bottom: 1rem; }
.chart-wrap h3 { margin: 0 0 .5rem; font-size: .9rem; color: var(--muted); font-weight: normal; text-transform: uppercase; letter-spacing: .04em; }
.chart-empty { padding: 2rem; text-align: center; }

.compare-bar { display: flex; gap: 1rem; align-items: center; margin: .5rem 0 1rem; }
.compare-bar button { background: var(--tag); color: white; border: 0; border-radius: var(--radius); padding: .4rem .9rem; cursor: pointer; }
.compare-bar button:disabled { opacity: .4; cursor: not-allowed; }

.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.compare-grid .card .ident { display: flex; gap: .5rem; align-items: center; }

.legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; font-size: .8rem; }
.legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.legend-item i { display: inline-block; width: 12px; height: 3px; border-radius: 1px; }

/* Auth + theme + nav */
nav .nav-spacer { flex: 1 1 auto; }
.theme-toggle { font-size: .95rem; line-height: 1; padding: .2rem .45rem; cursor: pointer; min-width: 1.8rem; }
.login-cta { padding: .25rem .75rem; border: 1px solid var(--link); border-radius: var(--radius); color: var(--link) !important; }
.login-cta:hover { background: var(--link); color: white !important; text-decoration: none; }

/* Login page */
.login-shell { max-width: 720px; margin: 3rem auto 4rem; padding: 0 1rem; }
.login-hero { text-align: center; margin-bottom: 2rem; }
.login-hero h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
.login-hero p { margin: 0 auto; max-width: 520px; }

.login-error { background: rgba(248,81,73,.08); border: 1px solid var(--neg); color: var(--neg); padding: .6rem .8rem; border-radius: var(--radius); margin-bottom: 1rem; text-align: center; }

.login-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; align-items: stretch; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; min-height: 200px; }
.login-card h3 { margin: 0; font-size: 1rem; }
.login-card p { margin: 0; flex: 0 0 auto; }
.login-card .login-field { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; font-size: .75rem; color: var(--muted); }
.login-card input[type="text"] { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .65rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; letter-spacing: .02em; }
.login-card input[type="text"]:focus { outline: none; border-color: var(--link); }
.login-card button.primary { margin-top: auto; background: var(--tag); color: white; border: 0; border-radius: var(--radius); padding: .55rem 1rem; cursor: pointer; font-size: .85rem; font-weight: 500; }
.login-card button.primary:hover { filter: brightness(1.1); }

.login-foot { text-align: center; margin-top: 2rem; font-size: .8rem; max-width: 540px; margin-left: auto; margin-right: auto; }

.token-display { display: inline-block; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .25rem .5rem; font-size: .75rem; word-break: break-all; }

.tags-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; align-items: center; }
.tag-x { background: transparent; color: inherit; border: 0; cursor: pointer; padding: 0 0 0 .25rem; font-size: 1rem; line-height: 1; }
.tag-add { display: inline-flex; gap: .25rem; align-items: center; }
.tag-add input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: .15rem .4rem; font-size: .75rem; width: 130px; }

.views-bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0 0 .75rem; padding: .5rem .75rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.views-list { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 auto; }
.view-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; }
.view-chip a { color: var(--text); }
.view-chip.pinned { border-color: gold; }
.view-chip.active { border-color: var(--link); background: rgba(88,166,255,.08); }
.save-view { font-size: .8rem; }
.save-view summary { cursor: pointer; color: var(--muted); list-style: none; padding: .15rem .5rem; border: 1px dashed var(--line); border-radius: 999px; }
.save-view summary::-webkit-details-marker { display: none; }
.save-form { display: flex; gap: .35rem; margin-top: .35rem; flex-wrap: wrap; }
.save-form input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: .25rem .5rem; font-size: .8rem; }
.save-form input[name="name"] { width: 220px; }
.save-form input[name="description"] { width: 260px; }
.save-form button { background: var(--tag); color: white; border: 0; border-radius: var(--radius); padding: .25rem .75rem; cursor: pointer; }