/* MSB Invest - the MSB design system: tokens and component rules from the
   bank website (ink + mint, Inter, 20px cards, transaction rows). Game
   pieces are in game.css. */
:root {
  --msb-ink: #0b1f1a;
  --msb-ink-mid: #123a2d;
  --msb-ink-dark: #0f2e24;
  --msb-mint: #7cf2c0;
  --msb-mint-action: #12a06f;
  --msb-mint-tint: #eafbf3;
  --msb-bg: #f4f7f5;
  --msb-surface: #ffffff;
  --msb-border: #e8ede9;
  --msb-text: #0b1f1a;
  --msb-text-muted: #8a9691;
  --msb-success: #1e8a5f;
  --msb-success-bg: #e7f6ef;
  --msb-danger: #c0392b;
  --msb-danger-bg: #fbebe9;
  --msb-warning: #9a6a00;
  --msb-warning-bg: #fdf3d9;
  --msb-radius: 20px;
  --msb-radius-sm: 12px;
  --msb-shadow: 0 1px 2px rgba(11, 31, 26, .05), 0 10px 26px -14px rgba(11, 31, 26, .22);
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
}

html, body { overflow-x: hidden; }
body { background: var(--msb-bg); color: var(--msb-text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.card { min-width: 0; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .82rem; letter-spacing: .02em; }
.text-up { color: var(--msb-success) !important; }
.text-down { color: var(--msb-danger) !important; }
.text-muted { color: var(--msb-text-muted) !important; }

/* Topbar, as the website's */
.msb-navbar { background: var(--msb-ink); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 16px rgba(11,31,26,.35); padding-top: .65rem; padding-bottom: .65rem; }
.msb-main { max-width: 1320px; }
.msb-brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff !important; font-weight: 800; letter-spacing: .04em; font-size: 1.1rem; text-decoration: none; }
.msb-brand .product { color: var(--msb-mint); font-weight: 700; letter-spacing: .08em; font-size: .8rem; text-transform: uppercase; }
.msb-badge { height: 30px; width: auto; }
.msb-nav-link { color: rgba(255,255,255,.82) !important; font-weight: 500; padding: .4rem .75rem; border-radius: 8px; text-decoration: none; background: none; border: 0; transition: background-color .15s ease, color .15s ease; }
.msb-nav-link:hover { color: #fff !important; background: rgba(255,255,255,.08); }
.msb-nav-link.active { color: var(--msb-ink) !important; background: var(--msb-mint); font-weight: 700; }
.msb-navbar .container { flex-wrap: nowrap; }
.msb-navbar .nav-right { min-width: 0; flex: 0 1 auto; }
.msb-user-pill { display: inline-flex; align-items: center; gap: .5rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .3rem .75rem .3rem .3rem; font-size: .88rem; max-width: 260px; min-width: 0; }
@media (max-width: 575.98px) { .msb-user-pill { padding-right: .3rem; } .msb-user-pill .name, .badge-demo { display: none; } #logout span { display: none; } }
.msb-user-pill .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--msb-mint); color: var(--msb-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.msb-user-pill .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-demo { background: var(--msb-warning-bg); color: var(--msb-warning); font-weight: 700; letter-spacing: .04em; }

/* Mobile bottom tab bar */
.msb-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--msb-surface); border-top: 1px solid var(--msb-border); box-shadow: 0 -4px 16px rgba(11,31,26,.08); padding: .4rem .25rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.msb-tabbar-item { flex: 1; text-align: center; color: var(--msb-text-muted); font-size: .68rem; font-weight: 700; text-decoration: none; padding: .25rem 0; background: none; border: 0; }
.msb-tabbar-item i { display: block; font-size: 1.15rem; margin-bottom: .1rem; }
.msb-tabbar-item.active { color: var(--msb-mint-action); }
@media (max-width: 767.98px) { main.msb-main { padding-bottom: 5.5rem; } }   /* room for the tab bar; not the navbar's container */

/* Cards and headers */
.card { border: 1px solid var(--msb-border); border-radius: var(--msb-radius); box-shadow: var(--msb-shadow); background: var(--msb-surface); }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.card-h h2 { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--msb-text-muted); margin: 0; }
.card-h .sub { color: var(--msb-text-muted); font-size: .8rem; }
.msb-page-header { margin-bottom: 1.25rem; }
.msb-page-header h1 { font-weight: 700; font-size: 1.6rem; margin-bottom: .15rem; }
.msb-page-header .lead { color: var(--msb-text-muted); font-size: .95rem; margin: 0; }
.view { display: none; }
.view.active { display: block; }

/* Buttons and forms, as the website's */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary { background-color: var(--msb-mint-action); border-color: var(--msb-mint-action); }
.btn-primary:hover, .btn-primary:disabled { background-color: #0d8a5f; border-color: #0d8a5f; }
.btn-ink { background: var(--msb-ink); color: #fff; border-color: var(--msb-ink); }
.btn-ink:hover { background: var(--msb-ink-dark); color: #fff; }
.btn-outline-primary { color: var(--msb-mint-action); border-color: var(--msb-mint-action); }
.btn-outline-primary:hover { background-color: var(--msb-mint-action); border-color: var(--msb-mint-action); color: #fff; }
.btn-outline-ink { color: var(--msb-ink); border-color: var(--msb-border); background: var(--msb-surface); }
.btn-outline-ink:hover { border-color: var(--msb-ink); color: var(--msb-ink); background: #fafbfd; }
.form-control, .form-select { border-radius: 10px; border-color: var(--msb-border); }
.form-control:focus, .form-select:focus { border-color: var(--msb-ink); box-shadow: 0 0 0 .2rem rgba(11,31,26,.18); }
.form-label { font-size: .78rem; font-weight: 600; color: var(--msb-text-muted); margin-bottom: .25rem; }
.alert { border-radius: 10px; border: none; }
.alert-success { background: var(--msb-success-bg); color: var(--msb-success); }
.alert-danger { background: var(--msb-danger-bg); color: var(--msb-danger); }
.alert-warning { background: var(--msb-warning-bg); color: var(--msb-warning); }
.seg { display: flex; background: var(--msb-bg); border-radius: 999px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 999px; padding: .4rem .5rem; font-weight: 600; font-size: .88rem; color: var(--msb-text-muted); }
.seg button.on { background: var(--msb-surface); color: var(--msb-ink); box-shadow: 0 1px 2px rgba(11,31,26,.12); }
.seg button.on.buy { color: var(--msb-success); }
.seg button.on.sell { color: var(--msb-danger); }
.msg { min-height: 1.2rem; font-size: .82rem; margin-top: .5rem; }

/* Markets layout */
.markets-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr) 330px; gap: 1.25rem; align-items: start; }
.markets-layout > * { min-width: 0; }
@media (max-width: 1199.98px) { .markets-layout { grid-template-columns: 260px minmax(0, 1fr); } .markets-layout .col-right { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .markets-layout { grid-template-columns: 1fr; } }
.stack > .card + .card { margin-top: 1.25rem; }

/* Company list: rows, never wider than the card */
.co-list { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.co-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .1rem; align-items: center; padding: .5rem .5rem; border-bottom: 1px solid var(--msb-border); cursor: pointer; border-radius: 8px; }
.co-row:last-child { border-bottom: none; }
.co-row:hover { background: var(--msb-bg); }
.co-row.active { background: var(--msb-mint-tint); }
.co-row .sym { font-weight: 700; font-size: .92rem; grid-column: 1; grid-row: 1; }
.co-row .name { grid-column: 1; grid-row: 2; min-width: 0; color: var(--msb-text-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-row .px { grid-column: 2; grid-row: 1; justify-self: end; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.co-row .chg { grid-column: 2; grid-row: 2; justify-self: end; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .45rem; white-space: nowrap; min-width: 3.6rem; text-align: center; }
.chg.up { background: var(--msb-success-bg); color: var(--msb-success); }
.chg.down { background: var(--msb-danger-bg); color: var(--msb-danger); }
.chg.flat { background: var(--msb-bg); color: var(--msb-text-muted); }
.chg.halt { background: var(--msb-danger); color: #fff; }

/* Chart */
.chart-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: .5rem; }
.chart-head .sym { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.chart-head .name { color: var(--msb-text-muted); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-head .px { font-size: 1.5rem; font-weight: 700; margin-left: auto; }
.chart-head .range { display: flex; gap: .25rem; width: 100%; justify-content: flex-end; }
.range .btn { padding: .15rem .6rem; font-size: .75rem; }
.range .btn.on { background: var(--msb-ink); color: #fff; border-color: var(--msb-ink); }
#chart { width: 100%; height: 280px; display: block; }

/* Company card */
.co-about { font-size: .9rem; color: var(--msb-text); line-height: 1.5; margin: 0; }
.co-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem .9rem; }
.co-stats .st { background: var(--msb-bg); border-radius: var(--msb-radius-sm); padding: .55rem .75rem; min-width: 0; }
.co-stats .st .k { color: var(--msb-text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-stats .st .v { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.co-stats .st .s { color: var(--msb-text-muted); font-size: .72rem; }
.held { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: #dfe6e2; margin-top: .35rem; }
.held i { display: block; height: 100%; }

/* Order book */
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.book table { width: 100%; font-size: .82rem; border-collapse: collapse; table-layout: fixed; }
.book th { color: var(--msb-text-muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: .2rem .4rem; border-bottom: 1px solid var(--msb-border); }
.book td { padding: .22rem .4rem; position: relative; white-space: nowrap; }
.book td.bar i { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; opacity: .55; }
.book .bid td.bar i { right: 0; background: var(--msb-mint-tint); }
.book .ask td.bar i { left: 0; background: var(--msb-danger-bg); }
.book td span { position: relative; }
.book .r { text-align: right; }
.spread-line { text-align: center; color: var(--msb-text-muted); font-size: .78rem; margin: .4rem 0 0; }

/* Generic data tables */
.tbl { width: 100%; font-size: .85rem; border-collapse: collapse; }
.tbl th { color: var(--msb-text-muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: .35rem .5rem; border-bottom: 1px solid var(--msb-border); text-align: right; white-space: nowrap; }
.tbl td { padding: .45rem .5rem; border-bottom: 1px solid var(--msb-border); text-align: right; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:hover td { background: var(--msb-bg); }
.tbl .empty td { color: var(--msb-text-muted); text-align: left; white-space: normal; }
.tbl-wrap { overflow-x: auto; }

/* Portfolio tile, the website's account card */
.account-card { position: relative; overflow: hidden; padding: 1.5rem; background: linear-gradient(150deg, var(--msb-ink) 0%, var(--msb-ink-mid) 65%, var(--msb-ink-dark) 100%); color: #fff; border-color: transparent; }
.account-currency-icon { position: absolute; top: -.5rem; right: .5rem; font-size: 3.75rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,.1); pointer-events: none; user-select: none; }
.account-card .account-type { display: flex; align-items: center; gap: .5rem; color: var(--msb-mint); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .9rem; }
.account-card .account-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; }
.account-card .balance { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .15rem; color: #fff; }
.account-card .kv { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: rgba(255,255,255,.75); padding: .2rem 0; }
.account-card .kv b { color: #fff; font-weight: 600; }
.account-card .kv b.up { color: var(--msb-mint); }
.account-card .kv b.down { color: #ffb4ab; }
.account-card hr { border-color: rgba(255,255,255,.15); margin: .75rem 0; }
.alloc { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); margin-top: .5rem; }
.alloc i { display: block; height: 100%; }
.alloc-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .75rem; color: rgba(255,255,255,.75); margin-top: .4rem; }
.alloc-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem; }
.weight { display: inline-block; width: 56px; height: 6px; border-radius: 999px; background: var(--msb-bg); vertical-align: middle; margin-left: .4rem; overflow: hidden; }
.weight i { display: block; height: 100%; background: var(--msb-mint-action); }

/* Transaction-row lists, the website's */
.txn-list { list-style: none; margin: 0; padding: 0; }
.txn-row { display: flex; align-items: center; gap: .85rem; padding: .7rem 0; border-bottom: 1px solid var(--msb-border); }
.txn-row:last-child { border-bottom: none; }
.txn-icon { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
.txn-icon.credit { background: var(--msb-success-bg); color: var(--msb-success); }
.txn-icon.debit { background: var(--msb-danger-bg); color: var(--msb-danger); }
.txn-icon.neutral { background: var(--msb-bg); color: var(--msb-text-muted); }
.txn-icon.flag { background: var(--msb-mint); color: var(--msb-ink); }
.txn-main { flex: 1 1 auto; min-width: 0; }
.txn-title { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txn-sub { color: var(--msb-text-muted); font-size: .8rem; }
.txn-memo { color: var(--msb-text-muted); font-size: .8rem; margin-top: .1rem; white-space: normal; }
.txn-memo code { color: var(--msb-mint-action); font-weight: 700; word-break: break-all; }
.txn-values { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.txn-amount { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.txn-amount.credit { color: var(--msb-success); }
.txn-amount.debit { color: var(--msb-text); }
.txn-balance-after { color: var(--msb-text-muted); font-size: .74rem; white-space: nowrap; margin-top: .1rem; }
.txn-empty { color: var(--msb-text-muted); font-size: .9rem; padding: .5rem 0; margin: 0; }
.scroll-list { max-height: 520px; overflow-y: auto; }

/* Achievements */
.ach { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--msb-border); }
.ach:last-child { border-bottom: none; }
.ach .dot { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--msb-bg); color: var(--msb-text-muted); font-size: .85rem; }
.ach.done .dot { background: var(--msb-mint); color: var(--msb-ink); }
.ach .t { font-size: .88rem; font-weight: 600; }
.ach .d { font-size: .78rem; color: var(--msb-text-muted); }
.ach code { color: var(--msb-mint-action); font-weight: 700; font-size: .8rem; word-break: break-all; }

/* News / leaderboard */
.news-row { padding: .5rem 0; border-bottom: 1px solid var(--msb-border); font-size: .85rem; }
.news-row:last-child { border-bottom: none; }
.news-row .when { color: var(--msb-text-muted); font-size: .75rem; margin-right: .4rem; }
.news-row .sym { font-weight: 700; margin-right: .3rem; }
.news-row.halt { color: var(--msb-danger); font-weight: 600; }
.lb-row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--msb-border); font-size: .85rem; }
.lb-row:last-child { border-bottom: none; }
.lb-row .rank { width: 1.4rem; color: var(--msb-text-muted); font-weight: 700; }
.lb-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .ret { font-weight: 700; }
.lb-row .stars { color: var(--msb-mint-action); font-size: .75rem; }

.msb-footer { text-align: center; color: var(--msb-text-muted); font-size: .82rem; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--msb-border); margin-top: 2rem; }