:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101318;
  color: #e9edf2;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #101318; color: #e9edf2; }
main { width: min(1080px, 100%); margin: 0 auto; padding: 48px 24px 64px; }
header, .section-heading, .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
h1, h2 { margin: 0; }
h1 { font-size: 28px; letter-spacing: -.02em; }
h2 { font-size: 22px; }
p { line-height: 1.55; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8bb9ff;
  box-shadow: 0 0 20px rgba(139, 185, 255, .65);
}
.beta-badge, .status {
  border: 1px solid #46515f;
  border-radius: 999px;
  color: #c5ccd6;
  font: 700 12px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
  padding: 7px 10px;
}
.beta-badge { border-color: #6486b3; color: #a9cbff; }
.market { margin-top: 42px; }
.muted { color: #97a2b1; }
.section-copy { margin: 7px 0 0; }
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.card, .login, .notice {
  border: 1px solid #313944;
  border-radius: 14px;
  background: #171c23;
}
.market-card { min-height: 176px; padding: 22px; transition: background-color .2s ease; }
.market-card.positive { border-color: #355f4a; background: rgba(67, 146, 103, .18); }
.market-card.negative { border-color: #75563a; background: rgba(190, 120, 55, .18); }
.market-card.neutral { background: #171c23; }
.market-card.stale { border-color: #46515f; background: #191d23; opacity: .75; }
.instrument {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ticker { color: #f4f7fa; font-weight: 700; letter-spacing: .04em; }
.short-name { color: #97a2b1; font-size: 13px; }
.price {
  margin-top: 20px;
  font: 700 28px ui-monospace, SFMono-Regular, Consolas, monospace;
}
.change { margin-top: 11px; font: 600 14px ui-monospace, SFMono-Regular, Consolas, monospace; }
.positive .change { color: #a8e5c2; }
.negative .change { color: #ffd0a3; }
.market-meta { margin-top: 14px; color: #97a2b1; font-size: 13px; }
.snapshot-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 13px; }
.status-fresh { border-color: #397c5b; background: #173a2a; color: #9ce6bc; }
.status-stale { border-color: #8a6434; background: #3a2b17; color: #f0c787; }
.status-waiting { color: #c5ccd6; }
.notice { margin-top: 18px; padding: 22px; }
.toolbar { margin-top: 40px; justify-content: flex-end; }
form { margin: 0; }
button {
  padding: 10px 15px;
  border: 1px solid #6486b3;
  border-radius: 8px;
  background: #294d78;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
button:hover { background: #345f91; }
.login { max-width: 430px; margin: 10vh auto 0; padding: 30px; }
.login-copy { margin: 10px 0 0; }
.field { margin-top: 20px; }
label { display: block; margin-bottom: 7px; color: #c5ccd6; }
input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #46515f;
  border-radius: 8px;
  background: #0f141a;
  color: #fff;
  font: inherit;
}
input:focus { border-color: #8bb9ff; outline: 2px solid rgba(139, 185, 255, .2); }
.error { padding: 11px 12px; border-radius: 8px; background: #58272c; color: #ffd8dc; }
@media (max-width: 600px) {
  main { padding: 28px 16px 44px; }
  header, .section-heading { align-items: flex-start; flex-direction: column; }
  .market-grid { grid-template-columns: 1fr; }
}