/* ── Pico v2 theme overrides — GitHub dark palette ────────────────────────── */
:root {
  --pico-font-family-sans-serif:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-size: 15px;
  --pico-line-height: 1.6;
  --pico-border-radius: 8px;

  /* Brand colours */
  --bg:       #0d1117;
  --surface:  #161b22;
  --surface2: #21262d;
  --border:   #30363d;
  --accent:   #4f90f2;
  --text:     #e6edf3;
  --muted:    #8b949e;
  --green:    #26a69a;
  --red:      #ef5350;
  --user-bg:  #1c3557;
}

[data-theme="dark"] {
  --pico-background-color:             var(--bg);
  --pico-color:                        var(--text);
  --pico-muted-color:                  var(--muted);
  --pico-primary:                      var(--accent);
  --pico-primary-hover:                #6ca8ff;
  --pico-primary-focus:                rgba(79, 144, 242, 0.3);
  --pico-primary-underline:            rgba(79, 144, 242, 0.5);
  --pico-card-background-color:        var(--surface);
  --pico-card-border-color:            var(--border);
  --pico-card-sectioning-background-color: var(--surface2);
  --pico-contrast-background:          var(--border);
  --pico-muted-border-color:           var(--border);

  /* Form elements */
  --pico-form-element-background-color:       var(--surface2);
  --pico-form-element-border-color:           var(--border);
  --pico-form-element-color:                  var(--text);
  --pico-form-element-placeholder-color:      var(--muted);
  --pico-form-element-active-border-color:    var(--accent);
  --pico-form-element-focus-color:            var(--accent);

  /* Code */
  --pico-code-background-color: var(--bg);
  --pico-code-color:            var(--text);
  --pico-ins-color:             var(--green);
  --pico-del-color:             var(--red);
}

/* ── App shell ────────────────────────────────────────────────────────────── */
html, body { height: 100dvh; overflow: hidden; }

body {
  display: grid;
  grid-template-columns: 252px 1fr;
  grid-template-rows: 100dvh;
  margin: 0;
  padding: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
app-sidebar {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .75rem;
  height: 52px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-head button {
  font-size: .78rem;
  padding: .3rem .7rem;
  margin: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
}

.logo svg { color: var(--accent); }

/* Thread list */
app-sidebar nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

app-sidebar nav ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

.thread-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 2px;
  transition: background .12s, border-color .12s;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.thread-item:hover            { background: var(--surface2); }
.thread-item.active           { background: var(--surface2); border-color: var(--border); }
.thread-item:hover .del-btn   { display: flex; }

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.new      { background: var(--muted); }
.status-dot.compiled { background: var(--green); }
.status-dot.error    { background: var(--red); }

.thread-info {
  flex: 1;
  min-width: 0;
}

.thread-name {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-meta {
  display: flex;
  gap: 6px;
  font-size: .75rem;
  color: var(--muted);
}

.del-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 4px;
}

.del-btn:hover { --pico-color: var(--red); border-color: var(--red); }

/* ── Chat panel ──────────────────────────────────────────────────────────── */
chat-panel {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100dvh;
  overflow: hidden;
}

/* Header */
.thread-header {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

.thread-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 1.2rem;
  height: 48px;
}

.thread-title h5 {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Status badge — Pico <mark> with per-state token overrides */
mark {
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  flex-shrink: 0;
}
mark.b-new      { --pico-mark-background-color: transparent;          --pico-mark-color: var(--muted);  border: 1px solid var(--border); }
mark.b-compiled { --pico-mark-background-color: rgba(38,166,154,.1);  --pico-mark-color: var(--green);  border: 1px solid rgba(38,166,154,.4); }
mark.b-error    { --pico-mark-background-color: rgba(239,83,80,.1);   --pico-mark-color: var(--red);    border: 1px solid rgba(239,83,80,.4); }

/* KPI bar */
#kpi-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 1.2rem .75rem;
}

#kpi-bar[hidden] { display: none; }

.kpi-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 1.1rem;
  margin-right: 1.1rem;
  border-right: 1px solid var(--border);
}

.kpi-item:last-child { border-right: none; padding-right: 0; margin-right: 0; }

.kpi-label {
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.kpi-value { font-size: .88rem; font-weight: 600; }

.pos { color: var(--green); }
.neg { color: var(--red); }

/* ── Chart section ───────────────────────────────────────────────────────── */
#chart-section {
  background: var(--bg);
}

#chart-section[hidden] { display: none; }

#chart-canvas { width: 100%; height: 320px; }

#chart-resize {
  height: 8px;
  cursor: ns-resize;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

#chart-resize::after {
  content: '';
  width: 36px; height: 3px;
  background: var(--border);
  border-radius: 2px;
  transition: background .15s;
}

#chart-resize:hover::after,
#chart-resize.dragging::after { background: var(--accent); }

/* ── Messages area ───────────────────────────────────────────────────────── */
.messages-area {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.2rem;
  gap: .5rem;
  margin: 0;
}

/* Chat messages — user */
.message.user {
  align-self: flex-end;
  max-width: min(640px, 84%);
  background: var(--user-bg);
  color: var(--text);
  border-radius: 14px 14px 4px 14px;
  padding: .6rem .85rem;
  font-size: .91rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Chat messages — bot: Pico <article> card provides border, bg, padding, radius */
.message.bot {
  align-self: flex-start;
  max-width: min(640px, 84%);
  border-radius: 14px 14px 14px 4px;
  font-size: .91rem;
  line-height: 1.65;
  word-break: break-word;
  margin: 0;
}

/* Typing indicator */
#typing-indicator {
  align-self: flex-start;
}

.typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: .65rem .9rem;
}

.typing span {
  display: block;
  width: 6px; height: 6px;
  background: var(--muted);
  border-radius: 50%;
  animation: bounce 1.3s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-6px); }
}

/* Progress card */
.progress-card {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 4px;
  padding: .65rem .9rem;
  min-width: 240px;
  max-width: min(520px, 84%);
}

.p-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  line-height: 1.4;
}
.p-step.done   { color: var(--muted); }
.p-step.active { color: var(--text); }

.p-check { color: var(--green); font-size: .85rem; width: 14px; text-align: center; }

.p-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Empty state */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 2.5rem 1.2rem;
  text-align: center;
}

.empty-state p { color: var(--muted); max-width: 340px; margin: 0; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: .5rem;
}

.chip { font-size: .81rem; border-radius: 20px; margin: 0; padding: .35rem .85rem; }

/* ── Composer footer ─────────────────────────────────────────────────────── */
.composer-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: .6rem 1rem;
}

#composer {
  display: flex;
  gap: .6rem;
  align-items: flex-end;
  margin: 0;
}

#input {
  flex: 1;
  resize: none;
  max-height: 140px;
  overflow-y: auto;
  line-height: 1.55;
  font-size: .91rem;
  margin: 0;
  border-radius: 10px;
}

#send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 8px;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--border); border-radius: 3px; }

/* ── View toggle ─────────────────────────────────────────────────────────── */
.view-toggle {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.vt-btn {
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  margin: 0;
}

.vt-btn:hover         { background: var(--surface2); color: var(--text); }
.vt-btn.active        { background: var(--accent);   color: #fff; border-color: var(--accent); }
.vt-btn:disabled      { opacity: .35; cursor: default; pointer-events: none; }

.vt-nav { padding: 3px 8px; }

.vt-sep {
  width: 1px;
  background: var(--border);
  margin: 2px 4px;
  align-self: stretch;
  flex-shrink: 0;
}

.vt-run-label {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 2px;
  line-height: 1;
  align-self: center;
}

/* ── Landing page ────────────────────────────────────────────────────────── */
#landing {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: var(--bg);
  z-index: 1;
}

#landing[hidden] { display: none; }

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 60px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.landing-header button { margin: 0; font-size: .85rem; }

.landing-hero {
  max-width: 640px;
  margin: 5rem auto 3rem;
  padding: 0 1.5rem;
  text-align: center;
}

.landing-hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.landing-hero p { color: var(--muted); font-size: 1rem; margin-bottom: 1.5rem; }

.landing-hero button {
  font-size: 1rem;
  padding: .65rem 1.6rem;
  margin: 0;
}

.landing-strategies {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}

.landing-strategies h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.public-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.strategy-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: border-color .15s;
}

.strategy-card:hover { border-color: var(--accent); }

.sc-name {
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-owner { font-size: .75rem; color: var(--muted); }
.sc-kpi   { font-size: .82rem; }
.sc-view  { margin: .25rem 0 0; font-size: .8rem; }

/* ── Login dialog ────────────────────────────────────────────────────────── */
#login-dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0;
  max-width: 420px;
  width: 92vw;
}

#login-dialog::backdrop {
  background: rgba(13, 17, 23, 0.8);
  backdrop-filter: blur(4px);
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.login-logo svg { color: var(--accent); }

.login-title { margin: 0; font-size: 1.3rem; font-weight: 700; }

.login-sub { margin: 0; color: var(--muted); font-size: .9rem; }

#login-form { display: flex; flex-direction: column; gap: .75rem; margin: 0; }

#login-email { margin: 0; }

#login-form button[type="submit"] { margin: 0; width: 100%; }

.login-sent-msg {
  color: var(--text);
  font-size: .92rem;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

.login-sent-msg small { color: var(--muted); }

#login-again {
  display: block;
  margin: .5rem auto 0;
  font-size: .82rem;
}

.login-code-label {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: .4rem;
}

#login-code {
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: 1.6rem;
  letter-spacing: .4em;
  text-align: center;
  margin: 0 0 .5rem;
  padding: .5rem;
}

.login-code-error {
  font-size: .82rem;
  color: var(--red);
  margin: 0 0 .5rem;
  text-align: center;
}

#code-form button[type="submit"] { width: 100%; margin: 0 0 .75rem; }

/* ── Share button in header ──────────────────────────────────────────────── */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  margin: 0 0 0 .5rem;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.share-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--accent); }
.share-btn[hidden] { display: none; }

/* ── Read-only banner ────────────────────────────────────────────────────── */
.readonly-banner {
  padding: .6rem 1rem;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ── Sidebar badges ──────────────────────────────────────────────────────── */
.shared-badge {
  font-size: .68rem;
  color: var(--accent);
  background: rgba(79,144,242,.12);
  border-radius: 4px;
  padding: 1px 5px;
}

.public-badge {
  font-size: .68rem;
  color: var(--green);
  background: rgba(38,166,154,.12);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Share dialog ────────────────────────────────────────────────────────── */
#share-dialog, #preview-dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0;
  color: var(--text);
}

#share-dialog::backdrop, #preview-dialog::backdrop {
  background: rgba(13, 17, 23, 0.75);
  backdrop-filter: blur(3px);
}

#share-dialog  { max-width: 460px; width: 92vw; }
#preview-dialog { max-width: 90vw; width: 80vw; height: 80vh; }

.share-inner, .preview-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.share-head, .preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--border);
}

.share-head h3, .preview-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.icon-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem .4rem;
  margin: 0;
  border-radius: 4px;
}
.icon-close:hover { background: var(--surface2); color: var(--text); }

.share-section { padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); }
.share-section:last-child { border-bottom: none; }

.share-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 .6rem;
}

.vis-options { display: flex; gap: .6rem; }

.vis-opt {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .75rem;
  cursor: pointer;
  transition: border-color .12s;
}

.vis-opt:has(input:checked) { border-color: var(--accent); }
.vis-opt input { margin-top: .2rem; flex-shrink: 0; }

.vis-opt-body strong { display: block; font-size: .85rem; margin-bottom: 2px; }
.vis-opt-body small  { color: var(--muted); font-size: .75rem; }

.share-add-row { display: flex; gap: .5rem; margin: 0; }
.share-add-row input  { flex: 1; margin: 0; }
.share-add-row button { flex-shrink: 0; margin: 0; font-size: .82rem; }

.share-err {
  font-size: .8rem;
  color: var(--red);
  margin: .4rem 0 0;
}

.share-list {
  list-style: none;
  padding: 0;
  margin: .6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.share-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .4rem .65rem;
  font-size: .83rem;
}

.share-remove {
  font-size: .75rem;
  padding: .15rem .4rem;
  margin: 0;
  color: var(--muted);
}

/* ── Preview dialog ──────────────────────────────────────────────────────── */
.preview-head { gap: 1rem; }
.preview-head > div { flex: 1; min-width: 0; }
.preview-head h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.preview-owner {
  font-size: .75rem;
  color: var(--muted);
}

.preview-kpi {
  display: flex;
  flex-wrap: wrap;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.preview-data-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 1.25rem;
  padding-bottom: .75rem;
}

.preview-view-toggle {
  display: flex;
  gap: 4px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.preview-vt-btn {
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  margin: 0;
}

.preview-vt-btn:hover         { background: var(--surface2); color: var(--text); }
.preview-vt-btn.active        { background: var(--accent);   color: #fff; border-color: var(--accent); }

.preview-chart-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

#preview-chart-canvas {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.preview-trades-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  min-height: 0;
}

.preview-trades-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  white-space: nowrap;
  margin: 0;
}

.preview-trades-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  color: var(--muted);
  font-weight: 600;
  padding: 5px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.preview-trades-table thead th:first-child,
.preview-trades-table thead th:nth-child(2),
.preview-trades-table thead th:nth-child(3),
.preview-trades-table thead th:nth-child(4) {
  text-align: left;
}

.preview-trades-table tbody tr {
  border-bottom: 1px solid #1e242b;
  transition: background .1s;
}

.preview-trades-table tbody tr:hover {
  background: var(--surface2);
}

.preview-trades-table td {
  padding: 4px 10px;
  color: var(--text);
}

.preview-trades-table td.tc { text-align: center; }
.preview-trades-table td.tr { text-align: right; }

.preview-trades-table td.pos,
.preview-trades-table td.pos strong { color: var(--green); }

.preview-trades-table td.neg,
.preview-trades-table td.neg strong { color: var(--red); }

.preview-cta {
  text-align: center;
  padding: .75rem;
  border-top: 1px solid var(--border);
  margin: 0;
}

.preview-cta button { margin: 0; font-size: .82rem; }

/* ── Sidebar footer ──────────────────────────────────────────────────────── */
.sidebar-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  padding: .75rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-user-email {
  font-size: .75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.sidebar-foot-btns {
  display: flex;
  gap: .4rem;
}

.sidebar-foot-btns button {
  font-size: .75rem;
  padding: .25rem .6rem;
  margin: 0;
  flex: 1;
}

.balance-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .35rem .6rem;
}

.balance-label {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.balance-value {
  font-size: .88rem;
  font-weight: 700;
  color: var(--green);
}

.balance-value.balance-low { color: var(--red); }

/* ── Spending indicator ─────────────────────────────────────────────────────── */
.spending-indicator {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: var(--surface2);
  border-radius: 6px;
  font-size: .72rem;
}

.spending-indicator[hidden] {
  display: none;
}

.spending-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.spending-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width .3s ease, background-color .2s;
  min-width: 2px;
}

.spending-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: .68rem;
}

.spending-reset {
  font-size: .62rem;
  opacity: 0.8;
}

/* ── Trades table ────────────────────────────────────────────────────────── */
#trades-section {
  background: var(--surface);
}

.trades-scroll {
  overflow-x: auto;
  max-height: 220px;
  overflow-y: auto;
}

.trades-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  white-space: nowrap;
  margin: 0;
}

.trades-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  color: var(--muted);
  font-weight: 600;
  padding: 5px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.trades-table thead th:first-child,
.trades-table thead th:nth-child(2),
.trades-table thead th:nth-child(3),
.trades-table thead th:nth-child(4) {
  text-align: left;
}

.trades-table tbody tr {
  border-bottom: 1px solid #1e242b;
  transition: background .1s;
}

.trades-table tbody tr:hover {
  background: var(--surface2);
}

.trades-table td {
  padding: 4px 10px;
  color: var(--text);
}

.trades-table td.tc { text-align: center; }
.trades-table td.tr { text-align: right; }

.trades-table td.pos,
.trades-table td.pos strong { color: var(--green); }
.trades-table td.neg,
.trades-table td.neg strong { color: var(--red); }

/* ── Billing dialog ──────────────────────────────────────────────────────── */
#billing-dialog {
  max-width: 520px;
  width: 100%;
  border-radius: 12px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
}

.billing-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

.billing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -.25rem;
}

.billing-head h3 { margin: 0; font-size: 1rem; }

.billing-balance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem 1rem;
}

.billing-balance-label { color: var(--muted); font-size: .85rem; }
.billing-balance-value { font-size: 1.6rem; font-weight: 700; color: var(--text); }

.billing-err {
  color: var(--red);
  font-size: .82rem;
  margin: 0;
}

.billing-section { display: flex; flex-direction: column; gap: .6rem; }
.billing-label { color: var(--muted); font-size: .78rem; font-weight: 600;
                 text-transform: uppercase; letter-spacing: .05em; margin: 0; }

.billing-presets {
  display: flex;
  gap: .4rem;
}

.billing-preset {
  flex: 1;
  font-size: .82rem;
  padding: .35rem .4rem;
  margin: 0;
  border-radius: 6px;
  transition: background .15s, border-color .15s;
}

.billing-preset.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.billing-custom-row {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.billing-custom-prefix { color: var(--muted); font-size: .9rem; }

.billing-custom-input {
  flex: 1;
  padding: .35rem .6rem;
  font-size: .85rem;
  margin: 0;
}

.billing-add-btn {
  width: 100%;
  margin: 0;
  font-size: .9rem;
  padding: .55rem;
}

/* Transaction list */
.billing-txn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.txn-loading, .txn-empty, .txn-err {
  padding: .75rem 1rem;
  color: var(--muted);
  font-size: .82rem;
}

.txn-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
}

.txn-row:last-child { border-bottom: none; }

.txn-date { color: var(--muted); white-space: nowrap; }
.txn-desc { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txn-amt  { font-weight: 600; color: var(--green); white-space: nowrap; }
.txn-actions { display: flex; gap: .4rem; align-items: center; }

.txn-invoice {
  font-size: .75rem;
  color: var(--accent);
  white-space: nowrap;
}

.refund-btn {
  font-size: .72rem;
  padding: .15rem .4rem;
  margin: 0;
  white-space: nowrap;
  border-radius: 4px;
}

/* Status badges */
.txn-badge {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green  { background: rgba(38,166,154,.18); color: var(--green); }
.badge-muted  { background: var(--surface2); color: var(--muted); }
.badge-red    { background: rgba(239,83,80,.15); color: var(--red); }
.badge-yellow { background: rgba(240,192,64,.15); color: #f0c040; }