/* Guild stock exchange. Standalone sheet (this site is host-dispatched and never
   loads the profiler's style.css) but deliberately the same dark, compact,
   utilitarian look: same palette, same panel/table/button shapes, just laid out
   for dense numeric tables. Green is up, blue is the site accent, and the amber
   warn colour carries "down" so the two directions stay distinguishable without
   a red/green-only cue. No glow, no gradients. */

:root {
  --primary: #2596be;
  --primary-dark: #1d7a9c;
  --secondary: #e1e1e1;
  --bg: #16181c;
  --bg-2: #1c1f24;
  --panel: #202329;
  --panel-2: #262a31;
  --border: #2f343c;
  --text: #e1e1e1;
  --muted: #8a9098;
  --warn: #e0a23c;
  --up: #7dfb83;
  --down: #e0a23c;
  --radius: 10px;
  --wrap: 1140px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Sticky footer: the page is a column, main takes the slack, so a short page
   (a login form, an empty market) still puts the footer on the bottom edge
   instead of leaving a band of bare background under it. dvh so mobile browser
   chrome collapsing does not leave a gap; vh first as the fallback. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 10px; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 10px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }

/* ---- header ---- */
.x-header { background: var(--bg-2); border-bottom: 1px solid var(--border); }
/* Wraps rather than overflowing: brand + nav + balance + logout do not fit one
   row on a phone, and a header that does not wrap is what makes the whole page
   scroll sideways. min-height instead of height so the wrapped rows have room. */
.x-header-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 16px; min-height: 56px; padding: 8px 0;
}
.x-brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--text); font-weight: 700; font-size: 1.05rem; letter-spacing: .2px;
}
.x-brand:hover { text-decoration: none; color: var(--primary); }
.x-brand svg { color: var(--primary); }
.x-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.x-nav a { color: var(--secondary); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.x-nav a:hover, .x-nav a.active { color: var(--primary); text-decoration: none; }
/* Shrinkable to nothing, so on a narrow screen it collapses instead of forcing
   the auth block onto its own line before it has to. */
.x-spacer { flex: 1 1 0; min-width: 0; }
.x-auth { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.x-bal {
  font-weight: 700; color: var(--up); border: 1px solid var(--border);
  background: var(--panel); border-radius: 8px; padding: 5px 10px;
}
.x-bal:hover { text-decoration: none; border-color: var(--up); }
.x-user { color: var(--muted); font-size: .9rem; }
.x-logout { margin: 0; }

main { flex: 1 0 auto; padding: 20px 0 40px; }
.x-header { flex: none; }

/* ---- panels ---- */
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-head h2, .panel-head h1 { margin-bottom: 0; }
.grid { display: grid; gap: 16px; }
/* A grid item's min-width defaults to its CONTENT width, so a wide chart or
   table inside a column stretches the column past the viewport instead of
   scrolling inside its own overflow container. min-width: 0 is what lets
   .table-wrap and .chart-box actually do their job. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: 2fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---- stat strip ---- */
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.stat {
  flex: 1 1 150px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.stat-k { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-v { font-size: 1.15rem; font-weight: 700; margin-top: 2px; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
th {
  color: var(--muted); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; white-space: nowrap;
}
th a { color: inherit; }
th a.active { color: var(--primary); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--panel-2); }
.table-wrap { overflow-x: auto; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tick-name { font-weight: 600; }
.rank { color: var(--muted); width: 1%; }

/* ---- buttons + forms ---- */
.btn {
  display: inline-block; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--secondary);
  font: inherit; font-weight: 600; font-size: .9rem;
}
.btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-buy { background: transparent; border-color: rgba(125, 251, 131, .45); color: var(--up); }
.btn-buy:hover { background: rgba(125, 251, 131, .1); border-color: var(--up); color: var(--up); }
.btn-sell { background: transparent; border-color: rgba(224, 162, 60, .45); color: var(--down); }
.btn-sell:hover { background: rgba(224, 162, 60, .1); border-color: var(--down); color: var(--down); }
.btn-sm { padding: 5px 10px; font-size: .84rem; }
.btn-xs { padding: 3px 8px; font-size: .78rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--border); color: var(--secondary); background: var(--panel-2); }
input[type=text], input[type=number], input[type=password], input[type=search], select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .9rem; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--primary); }
label { display: block; color: var(--muted); font-size: .8rem; margin-bottom: 4px; }
.field { margin-bottom: 10px; }
.row { display: flex; gap: 8px; align-items: flex-end; }
.row > * { flex: 1; min-width: 0; }
.row > .shrink { flex: 0 0 auto; }
form { margin: 0; }

/* ---- alerts ---- */
.alert { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: .92rem; }
.alert-err { border-color: rgba(224, 162, 60, .45); background: rgba(224, 162, 60, .08); }
.alert-ok { border-color: rgba(125, 251, 131, .4); background: rgba(125, 251, 131, .07); }

/* ---- trade panel ---- */
.trade-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.trade-tabs .btn { flex: 1; text-align: center; }
.trade-tabs .btn.active { border-color: var(--primary); color: var(--primary); }
.trade-tabs .btn.active.buy { border-color: var(--up); color: var(--up); background: rgba(125, 251, 131, .08); }
.trade-tabs .btn.active.sell { border-color: var(--down); color: var(--down); background: rgba(224, 162, 60, .08); }
.quote { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; font-size: .88rem; }
.quote-line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.quote-line b { font-weight: 700; }
.quote-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 7px; font-size: .95rem; }
.trade-msg { margin-top: 10px; font-size: .88rem; min-height: 1.3em; }
.trade-msg.err { color: var(--down); }
.trade-msg.ok { color: var(--up); }
.limit-toggle { margin-top: 10px; font-size: .85rem; }

/* ---- price header ---- */
.price-big { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.price-sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.chart-box { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px; overflow-x: auto; }
.chart-box svg { display: block; width: 100%; height: auto; max-width: 100%; }
.chart-box .hit { cursor: crosshair; }
.chart-tip {
  margin-top: 6px; min-height: 1.2em; font-size: .82rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow-x: auto;
}
.chart-tip[hidden] { display: block; visibility: hidden; }
.range-nav { display: flex; gap: 6px; }
.chip {
  display: inline-block; padding: 3px 9px; border: 1px solid var(--border);
  border-radius: 999px; font-size: .8rem; color: var(--secondary); background: var(--panel-2);
}
.chip:hover { border-color: var(--primary); text-decoration: none; }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---- misc ---- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .88rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .74rem; border: 1px solid var(--border); color: var(--muted); }
.tag-buy { color: var(--up); border-color: rgba(125, 251, 131, .35); }
.tag-sell { color: var(--down); border-color: rgba(224, 162, 60, .35); }
.tag-open { color: var(--primary); border-color: rgba(37, 150, 190, .4); }
.empty { color: var(--muted); padding: 18px 0; text-align: center; font-size: .9rem; }

.x-footer {
  flex: none;
  border-top: 1px solid var(--border); background: var(--bg-2);
  color: var(--muted); font-size: .85rem; padding: 16px 0 26px;
}
.x-footer a { color: var(--muted); text-decoration: underline; }
.x-footer a:hover { color: var(--primary); }
.x-disclaimer { display: block; margin-top: 8px; font-size: .8rem; opacity: .85; }

.auth-card { max-width: 380px; margin: 40px auto; }