:root {
  --page: #eef1f0;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #111827;
  --ink-soft: #3b4350;
  --muted: #6b7280;
  --line: #e7eaee;
  --brand: #1f86e5;
  --brand-dark: #1669bd;
  --brand-soft: #e9f3fe;
  --gain: #12a150;
  --gain-soft: #e8f8ee;
  --loss: #e5484d;
  --loss-soft: #fdecec;
  --flat-soft: #f1f3f5;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/urbanist-latin.woff2") format("woff2");
}

html {
  font-size: 15px;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: "Urbanist", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
}

/* ---------- Page scaffolding ---------- */

.app-main {
  flex: 1;
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
}

.app-footer {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.page-sub {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel-body {
  padding: 1.4rem;
}

.panel-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--muted);
}

.empty-state h2 {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}

/* ---------- Buttons, forms, alerts ---------- */

.btn {
  --bs-btn-border-radius: 10px;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1rem;
}

.btn-sm {
  --bs-btn-border-radius: 8px;
  --bs-btn-padding-x: 0.7rem;
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(31, 134, 229, 0.25);
}

.btn-ghost {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--flat-soft);
  --bs-btn-hover-border-color: #d5dae1;
  --bs-btn-active-bg: var(--flat-soft);
  --bs-btn-active-border-color: #d5dae1;
}

.btn-ghost-danger {
  --bs-btn-color: var(--loss);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--loss);
  --bs-btn-hover-bg: var(--loss-soft);
  --bs-btn-hover-border-color: #f6cfcb;
  --bs-btn-active-color: var(--loss);
  --bs-btn-active-bg: var(--loss-soft);
  --bs-btn-active-border-color: #f6cfcb;
}

.form-label {
  color: #334155;
  font-size: 0.85rem;
  font-weight: 600;
}

.form-control,
.form-select {
  padding: 0.6rem 0.85rem;
  border-color: #dfe3e8;
  border-radius: 10px;
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  border-color: #8fc4f5;
  box-shadow: 0 0 0 4px rgba(31, 134, 229, 0.18);
}

.search-input {
  width: 280px;
  max-width: 100%;
  padding-left: 2.4rem;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 0.85rem center;
}

.alert {
  border: 0;
  border-radius: 12px;
  font-size: 0.92rem;
}

.alert-info {
  background: var(--brand-soft);
  color: #135a9e;
}

.alert-warning {
  background: #fff6e0;
  color: #8a5a00;
}

/* ---------- Summary cards ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stat {
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.stat-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.stat-value {
  margin-top: 0.45rem;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.stat-value .cur {
  margin-right: 0.2rem;
  font-size: 0.6em;
  font-weight: 600;
  opacity: 0.65;
}

.stat-foot {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.stat-hero {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 60%, #135a9e 100%);
  box-shadow: 0 12px 28px rgba(67, 56, 202, 0.32);
}

.stat-hero .stat-label,
.stat-hero .stat-foot {
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- Gain / loss ---------- */

.text-gain {
  color: var(--gain);
}

.text-loss {
  color: var(--loss);
}

.text-flat {
  color: var(--muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pill .arrow {
  font-size: 0.6em;
}

.pill-gain {
  background: var(--gain-soft);
  color: var(--gain);
}

.pill-loss {
  background: var(--loss-soft);
  color: var(--loss);
}

.pill-flat {
  background: var(--flat-soft);
  color: var(--muted);
}

/* ---------- Data tables ---------- */

.data-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.data-table th[data-sort] {
  cursor: pointer;
}

.data-table th[data-sort]:hover {
  color: var(--ink);
}

.data-table th[data-dir="asc"]::after {
  content: " ▲";
  font-size: 0.7em;
}

.data-table th[data-dir="desc"]::after {
  content: " ▼";
  font-size: 0.7em;
}

.data-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr {
  transition: background-color 0.12s;
}

.data-table tbody tr:hover {
  background: #f8f9fb;
}

.data-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.data-table .sub {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.data-table .strong {
  font-weight: 600;
}

.data-table .muted {
  color: #a3adbd;
}

.scrip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: hsl(var(--h, 240) 75% 94%);
  color: hsl(var(--h, 240) 55% 36%);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.scrip-symbol {
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* A scrip's symbol with its signal badge beside it. */
.scrip-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pill-sm {
  padding: 0.02rem 0.42rem;
  font-size: 0.68rem;
  text-decoration: none;
}

.scrip-name {
  max-width: 200px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weight {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.74rem;
}

.weight-bar {
  width: 56px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--flat-soft);
}

.weight-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  white-space: nowrap;
}

.star {
  padding: 0;
  border: 0;
  background: none;
  color: #c3cad6;
  font-size: 1.25rem;
  line-height: 1;
  transition: color 0.12s, transform 0.12s;
}

.star:hover {
  color: #f5b301;
  transform: scale(1.15);
}

.star.on {
  color: #f5b301;
}

.breadth {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* ---------- Meroshare ---------- */

.account + .account {
  margin-top: 1rem;
}

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.account-status {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: var(--flat-soft);
  color: #475569;
  font-size: 0.86rem;
}

.account-status.ok {
  background: var(--gain-soft);
  color: #086b4a;
}

.account-status.fail {
  background: var(--loss-soft);
  color: #a3241a;
}

.hint {
  color: var(--muted);
  font-size: 0.84rem;
}

/* ---------- Scrip chart ---------- */

a.scrip-symbol {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

a.scrip-symbol:hover {
  color: var(--brand);
  text-decoration: underline;
}

.avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  font-size: 1rem;
}

.chart-panel {
  padding: 1.1rem 1.25rem 0.9rem;
}

.chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  min-height: 1.4rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.chart-legend b {
  color: var(--ink);
  font-weight: 600;
}

.chart-legend b.text-gain {
  color: var(--gain);
}

.chart-legend b.text-loss {
  color: var(--loss);
}

.chart-legend .when {
  color: var(--ink);
  font-weight: 700;
}

.segmented {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.25rem;
  border-radius: 11px;
  background: var(--flat-soft);
}

.segmented button {
  padding: 0.3rem 0.8rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  transition: background-color 0.15s, color 0.15s;
}

.segmented button:hover {
  color: var(--ink);
}

.segmented button.active {
  background: var(--surface);
  color: var(--brand-dark);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

/* Switches for what is drawn over the candles. */
.chart-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.6;
  transition: opacity 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
}

.chip:hover {
  opacity: 1;
}

.chip.active {
  border-color: transparent;
  background: var(--brand-soft);
  color: var(--brand-dark);
  opacity: 1;
}

/* Colour key for a line on the chart. */
.chip i {
  width: 9px;
  height: 3px;
  border-radius: 2px;
}

.chart-area {
  height: 640px;
}

@media (max-width: 767.98px) {
  .chart-area {
    height: 380px;
  }
}

.chart-credit {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.76rem;
}

/* ---------- Alerts ---------- */

.pill-watch {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.steps {
  margin-bottom: 1.1rem;
  padding-left: 1.2rem;
}

.steps li + li {
  margin-top: 0.35rem;
}

.steps code {
  color: var(--brand-dark);
}

/* ---------- Dialogs ---------- */

.app-dialog {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.app-dialog .modal-header,
.app-dialog .modal-footer {
  padding: 1.1rem 1.4rem;
  border-color: var(--line);
}

.app-dialog .modal-body {
  padding: 1.25rem 1.4rem;
}

.app-dialog .modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.segmented-wide {
  display: flex;
}

.segmented label {
  flex: 1;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.segmented label:hover {
  color: var(--ink);
}

.segmented .btn-check:checked + label {
  background: var(--surface);
  color: var(--brand-dark);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.segmented .btn-check:focus-visible + label {
  outline: 2px solid #8fc4f5;
  outline-offset: 1px;
}

.segmented .btn-check:disabled + label {
  opacity: 0.45;
  cursor: not-allowed;
}

.dialog-now {
  margin-bottom: 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  background: var(--brand-soft);
  color: #135a9e;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.alert-btn.has-alerts {
  --bs-btn-color: var(--brand-dark);
  --bs-btn-bg: var(--brand-soft);
  --bs-btn-border-color: #cfe4fa;
  --bs-btn-hover-color: var(--brand-dark);
  --bs-btn-hover-bg: #dcecfc;
}

.placed-alerts {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.placed-title {
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.placed-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.placed-alert + .placed-alert {
  border-top: 1px solid #eef0f3;
}

.placed-alert .strong {
  font-weight: 600;
}

.placed-alert .sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ---------- Profiles ---------- */

/* The header runs Bootstrap's dark theme; the menu is a light card like the rest of the app. */
.profile-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-color: var(--ink);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--flat-soft);
  --bs-dropdown-link-active-color: var(--brand-dark);
  --bs-dropdown-link-active-bg: var(--brand-soft);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-divider-bg: var(--line);
  min-width: 230px;
  margin-top: 0.5rem !important;
  padding: 0.4rem;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.profile-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 9px;
  font-weight: 600;
}

.rename-form {
  margin-top: 0.6rem;
}

.rename-form.show,
.rename-form.collapsing {
  display: flex;
  gap: 0.4rem;
}

/* ---------- Live data pull status ---------- */

.pull-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel .pull-bar {
  margin-bottom: 0;
  padding: 0.9rem 1rem;
  background: var(--bg);
  box-shadow: none;
}

.pull-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.pull-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--gain);
  box-shadow: 0 0 0 4px var(--gain-soft);
}

.pull-bar.failed .pull-dot {
  background: var(--loss);
  box-shadow: 0 0 0 4px var(--loss-soft);
}

.pull-main {
  font-size: 0.98rem;
}

.pull-ago {
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.pull-sub {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.pull-bar .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.panel-subtitle {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  font-weight: 700;
}

/* ---------- Bot test results ---------- */

.check-list {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.check-head {
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.check + .check {
  margin-top: 0.7rem;
}

.check-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--flat-soft);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.check-ok .check-mark {
  background: var(--gain-soft);
  color: var(--gain);
}

.check-failed .check-mark {
  background: var(--loss-soft);
  color: var(--loss);
}

.check-name {
  font-size: 0.92rem;
  font-weight: 600;
}

.check-detail {
  color: var(--muted);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.check-failed .check-detail {
  color: #a3241a;
}

.check-skipped .check-name {
  color: var(--muted);
}

/* A button that shows only an icon; its name is in the title and aria-label. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.5rem;
}

/* On narrower screens the row buttons keep their icon (and count) and drop the word, so none are cut off. */
@media (max-width: 1439.98px) {
  .row-actions .btn-label {
    display: none;
  }
}

/* The buttons column stays pinned to the right edge of the table, so it is never cut off
   when the table is wider than the screen and scrolls sideways. */
.data-table td:has(> .row-actions) {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--surface);
  transition: background-color 0.12s;
}

.data-table tbody tr:hover td:has(> .row-actions) {
  background: #f8f9fb;
}

/* The description that pops up when an icon-only button is pointed at. */
.tooltip {
  --bs-tooltip-bg: #0f1733;
  --bs-tooltip-color: #f1f5f9;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-padding-x: 0.6rem;
  --bs-tooltip-padding-y: 0.35rem;
  --bs-tooltip-border-radius: 8px;
  --bs-tooltip-font-size: 0.78rem;
  font-weight: 600;
}

html[data-bs-theme="dark"] .tooltip {
  --bs-tooltip-bg: #e5e9f5;
  --bs-tooltip-color: #0b1020;
}

/* Tighter columns on narrower screens, to keep the whole table in view for longer. */
@media (max-width: 1439.98px) {
  .data-table th,
  .data-table td {
    padding-inline: 0.65rem;
  }

  .scrip-name {
    max-width: 170px;
  }
}

/* ---------- Sign-in, setup and no-access pages ---------- */

.auth-page {
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(1200px 600px at 20% -10%, #312e81 0%, transparent 60%), #0f1226;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.auth-name {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.auth-tag {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auth-title {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- Users ---------- */

.user-edit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.profile-checks {
  display: grid;
  gap: 0.25rem;
}

.profile-checks.is-off {
  opacity: 0.5;
}

.profile-menu .dropdown-header {
  padding: 0.35rem 0.85rem;
  color: var(--muted);
  font-size: 0.74rem;
}

/* ---------- Signals ---------- */

.pill-strong.pill-gain {
  background: var(--gain);
  color: #fff;
}

.pill-strong.pill-loss {
  background: var(--loss);
  color: #fff;
}

.segmented a {
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.segmented a:hover {
  color: var(--ink);
}

.segmented a.active {
  background: var(--surface);
  color: var(--brand-dark);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.breadth {
  align-items: center;
}

.breadth .segmented {
  flex-wrap: wrap;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
  .pick-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pick {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.25rem 1.35rem;
  border-top: 3px solid var(--gain);
}

.pick-sell {
  border-top-color: var(--loss);
}

.pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pick-head .scrip {
  min-width: 0;
}

a.pick-symbol {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pick-score {
  flex: none;
  text-align: right;
}

.pick-score .score {
  margin-top: 0.2rem;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pick-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  font-variant-numeric: tabular-nums;
}

.pick-figures .cur {
  color: var(--muted);
  font-size: 0.85em;
}

.pick-reasons {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.pick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.pick-next {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.pick-next a {
  margin-left: 0.4rem;
  font-weight: 700;
  text-decoration: none;
}

.pick-none {
  margin: 0;
}

.pick-note {
  margin: -0.75rem 0 1.5rem;
}

.tag {
  margin-right: 0.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 700;
}

.data-table td.reasons {
  min-width: 17rem;
  max-width: 26rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.how-scored {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.how-scored summary {
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.how-scored p,
.how-scored ul {
  margin: 0.75rem 0 0;
}

.signal-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.35rem;
}

.signal-panel .score {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.signal-panel .pick-reasons {
  flex: 1 1 22rem;
}

/* ---------- Dividends ---------- */

.dividend-panel {
  margin-bottom: 1.5rem;
}

.dividend-panel .panel-title {
  margin-bottom: 0.35rem;
}

.dividend-history {
  margin-top: 1.5rem;
}

.book-closes {
  margin: 0;
  padding-left: 1.1rem;
}

/* ---------- Dark theme ---------- */

/* Icons in the account part of the profile menu, lined up under the profile avatars. */
.profile-menu .dropdown-item > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 7px;
  color: var(--muted);
}

.profile-menu .dropdown-item.active > svg {
  color: inherit;
}

html[data-bs-theme="dark"] {
  --page: #090d14;
  --bg: #0f1520;
  --surface: #131a26;
  --ink: #e6eaf2;
  --ink-soft: #aab4c3;
  --muted: #8b96a8;
  --line: #232c3b;
  --brand: #2f8fe8;
  --brand-dark: #a9d3f9;
  --brand-soft: #14314f;
  --gain: #34d399;
  --gain-soft: #0f3a2e;
  --loss: #f87171;
  --loss-soft: #45201f;
  --flat-soft: #1a2230;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.28);

  /* Bootstrap's own parts (inputs, dialogs, menus) take their colours from these. */
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--muted);
}

/* :where keeps this as weak as the plain "a" rule, so links with their own colour keep it. */
:where(html[data-bs-theme="dark"]) a {
  color: #8fc4f5;
}

html[data-bs-theme="dark"] .btn-primary {
  --bs-btn-hover-bg: #1f78cf;
  --bs-btn-hover-border-color: #1f78cf;
  --bs-btn-active-bg: #1f78cf;
  --bs-btn-active-border-color: #1f78cf;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .btn-ghost {
  --bs-btn-hover-border-color: #344054;
  --bs-btn-active-border-color: #344054;
  --bs-btn-active-color: var(--ink);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--line);
}

html[data-bs-theme="dark"] .btn-ghost-danger {
  --bs-btn-hover-border-color: #6b2b28;
  --bs-btn-active-border-color: #6b2b28;
}

html[data-bs-theme="dark"] .form-label {
  color: #cbd5e1;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
  border-color: #2b3546;
  background-color: #0f1520;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  border-color: #5aa9ef;
}

html[data-bs-theme="dark"] .search-input {
  background-color: var(--surface);
}

html[data-bs-theme="dark"] .alert-info,
html[data-bs-theme="dark"] .dialog-now {
  color: #b9dcfb;
}

html[data-bs-theme="dark"] .alert-warning {
  border: 1px solid rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.1);
  color: #fcd88a;
}

html[data-bs-theme="dark"] .alert-info {
  border: 1px solid rgba(90, 169, 239, 0.28);
  background: rgba(47, 143, 232, 0.12);
}

html[data-bs-theme="dark"] .data-table td,
html[data-bs-theme="dark"] .placed-alert + .placed-alert {
  border-color: #1e2633;
}

html[data-bs-theme="dark"] .data-table tbody tr:hover,
html[data-bs-theme="dark"] .data-table tbody tr:hover td:has(> .row-actions) {
  background: #18202d;
}

html[data-bs-theme="dark"] .data-table .muted {
  color: #5d6a85;
}

html[data-bs-theme="dark"] .star {
  color: #4a5672;
}

html[data-bs-theme="dark"] .star:hover,
html[data-bs-theme="dark"] .star.on {
  color: #f5b301;
}

html[data-bs-theme="dark"] .avatar {
  background: hsl(var(--h, 240) 45% 22%);
  color: hsl(var(--h, 240) 85% 82%);
}

html[data-bs-theme="dark"] .pill-strong.pill-gain {
  color: #05281c;
}

html[data-bs-theme="dark"] .pill-strong.pill-loss {
  color: #3d0b08;
}

html[data-bs-theme="dark"] .account-status {
  color: var(--muted);
}

html[data-bs-theme="dark"] .account-status.ok {
  color: #6ee7b7;
}

html[data-bs-theme="dark"] .account-status.fail,
html[data-bs-theme="dark"] .check-failed .check-detail {
  color: #fca5a5;
}

html[data-bs-theme="dark"] .alert-btn.has-alerts {
  --bs-btn-border-color: #1f4a75;
  --bs-btn-hover-bg: #183c61;
}

html[data-bs-theme="dark"] .app-dialog,
html[data-bs-theme="dark"] .profile-menu {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ---------- News ---------- */

.news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 2rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 991.98px) {
  .news-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.news-list a {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.news-list a:hover {
  color: var(--brand);
  text-decoration: underline;
}

html[data-bs-theme="dark"] .news-list a:hover {
  color: #8fc4f5;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.news-source {
  font-weight: 700;
}

/* News on a pick card. */
.pick-score .score-parts {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.pick-news {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.pick-news-count {
  margin-left: 0.4rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.pick-news ul {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.pick-news li + li {
  margin-top: 0.35rem;
}

.pick-news li > span:first-child {
  display: inline-block;
  width: 1rem;
  font-size: 0.7em;
}

.pick-news a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.pick-news a:hover {
  text-decoration: underline;
}

.news-when {
  margin-left: 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ---------- News page ---------- */

/* A second heading further down a page. */
.section-head {
  margin-top: 2rem;
}

.section-head .page-title {
  font-size: 1.25rem;
}

.headline-list {
  display: grid;
  gap: 0.75rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.headline-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 2rem;
  margin-top: 0;
}

@media (max-width: 991.98px) {
  .headline-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.headline-list li {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.headline-list .tone {
  flex: none;
  width: 0.9rem;
  padding-top: 0.25rem;
  font-size: 0.65rem;
}

.headline-list li > div > a {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.headline-list li > div > a:hover {
  text-decoration: underline;
}

.news-meta a.tag {
  margin-right: 0;
  text-decoration: none;
}

.good-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 1199.98px) {
  .good-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .good-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.good-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.2rem;
  border-top: 3px solid var(--gain);
}

.good-figures {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.good-card .hint {
  margin-top: auto;
}

/* The watchlist star outside the Market table. */
.watch-form {
  flex: none;
  margin: 0;
}

.good-card .pick-head .scrip {
  flex: 1;
}

/* ---------- Notices ---------- */

/* Pop-up for what the last action did, in the top right corner under the header. */
.app-toasts {
  position: fixed;
  top: 5.5rem;
  right: 1.25rem;
  z-index: 1080;
  max-width: calc(100vw - 2.5rem);
}

.app-toast {
  --bs-toast-bg: var(--surface);
  --bs-toast-color: var(--ink);
  --bs-toast-border-color: var(--line);
  --bs-toast-border-radius: 14px;
  --bs-toast-box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  --bs-toast-max-width: 400px;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border-left: 4px solid var(--gain);
  font-size: 0.92rem;
}

.app-toast.show,
.app-toast.showing {
  display: flex;
}

.app-toast.is-failed {
  border-left-color: var(--loss);
}

.toast-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gain-soft);
  color: var(--gain);
}

.is-failed .toast-mark {
  background: var(--loss-soft);
  color: var(--loss);
}

.toast-text {
  flex: 1;
  min-width: 0;
  padding-top: 0.15rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.app-toast .btn-close {
  flex: none;
  margin-top: 0.2rem;
  font-size: 0.7rem;
}

html[data-bs-theme="dark"] .app-toast {
  --bs-toast-box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* ---------- App shell: sidebar and content panel ---------- */

.app-shell {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
}

/* The page itself: one white panel beside the sidebar. */
.app-content {
  flex: 1;
  min-width: 0;
  min-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.app-main {
  flex: 1;
  padding: 1.4rem 1.6rem 2rem;
}

/* A page's title row runs edge to edge across the top of the panel, with a rule under it. */
.app-main > .page-head:first-child {
  align-items: center;
  margin: -1.4rem -1.6rem 1.4rem;
  padding: 1.15rem 1.6rem;
  border-bottom: 1px solid var(--line);
}

.app-footer {
  padding: 1rem 1.6rem;
}

@media (min-width: 992px) {
  .app-sidebar {
    position: sticky;
    top: 14px;
    flex: none;
    display: flex;
    flex-direction: column;
    width: 244px;
    height: calc(100vh - 28px);
    overflow-y: auto;
  }
}

@media (max-width: 991.98px) {
  .app-shell {
    gap: 0;
    padding: 8px;
  }

  .app-sidebar {
    --bs-offcanvas-bg: var(--page);
    --bs-offcanvas-width: 276px;
    display: flex;
    flex-direction: column;
    padding: 14px;
    overflow-y: auto;
  }

  .app-content {
    min-height: calc(100vh - 16px);
    border-radius: 18px;
  }

  .app-main {
    padding: 1.1rem 1rem 1.6rem;
  }

  .app-main > .page-head:first-child {
    margin: -1.1rem -1rem 1.1rem;
    padding: 1rem;
  }
}

/* Menu button and brand, shown where the sidebar is tucked away. */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
}

.app-topbar .brand {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.icon-only {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
}

/* Brand card at the top of the sidebar. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand-logo {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.auth-brand .brand-logo {
  width: 48px;
  height: 48px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.brand-name {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-tag {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Profile switcher, under the brand. */
.profile-switch {
  margin-top: 0.6rem;
}

.profile-button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-button:hover,
.profile-button[aria-expanded="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.profile-button .avatar,
.profile-menu .avatar {
  width: 32px;
  height: 32px;
  font-size: 0.72rem;
}

.profile-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.profile-caption {
  color: var(--muted);
  font-size: 0.72rem;
}

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

.profile-chevrons {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.profile-switch .profile-menu {
  width: 100%;
}

/* The menu. */
.side-label {
  margin: 1.2rem 0.6rem 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.side-nav {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.66rem 0.85rem;
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.side-link svg {
  flex: none;
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

.side-link:hover {
  background: rgba(17, 24, 39, 0.05);
  color: var(--ink);
}

.side-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.side-link.active {
  background: linear-gradient(180deg, #f2f5ff 0%, #e2e9ff 100%);
  box-shadow: 0 1px 2px rgba(31, 134, 229, 0.14);
  color: var(--brand);
  font-weight: 600;
}

/* Market status, clock and the light / dark switch, at the foot of the sidebar. */
.side-foot {
  margin-top: auto;
  padding-top: 1rem;
}

.side-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.market-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.market-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
}

.market-status.open .dot {
  background: var(--gain);
  box-shadow: 0 0 0 3px var(--gain-soft);
}

.side-time {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

/* Light / dark switch: a thumb slides under the icon in use. */
.theme-toggle {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 60px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  transition: border-color 0.18s;
}

.theme-toggle:hover {
  border-color: var(--brand);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3a9cf0, #1f86e5);
  box-shadow: 0 2px 6px rgba(31, 134, 229, 0.45);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-bs-theme="dark"] .theme-toggle::before {
  transform: translateX(28px);
}

.theme-toggle svg {
  position: relative;
  width: 14px;
  height: 14px;
  transition: color 0.18s;
}

.theme-toggle .sun,
html[data-bs-theme="dark"] .theme-toggle .moon {
  color: #fff;
}

html[data-bs-theme="dark"] .theme-toggle .sun {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle::before {
    transition: none;
  }
}

html[data-bs-theme="dark"] .side-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] .side-link.active {
  background: linear-gradient(180deg, #1b2c44 0%, #16263b 100%);
  box-shadow: none;
  color: #7fbdf5;
}

/* ---------- The look of the parts, to go with the shell ---------- */

body {
  font-weight: 500;
}

.page-title {
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page-sub {
  font-size: 0.92rem;
}

.section-head .page-title {
  font-size: 1.15rem;
}

.panel-title {
  font-weight: 600;
}

/* Cards are outlined rather than lifted. */
.stat-value {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stat-label {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.stat-hero {
  border: 1px solid #cfe4fa;
  background: linear-gradient(180deg, #f3f8ff 0%, #e9f3fe 100%);
  box-shadow: var(--shadow);
  color: var(--ink);
}

.stat-hero .stat-value {
  color: var(--brand-dark);
}

.stat-hero .stat-value.text-loss {
  color: var(--loss);
}

.stat-hero .stat-label,
.stat-hero .stat-foot {
  color: var(--muted);
}

html[data-bs-theme="dark"] .stat-hero {
  border-color: #1f4a75;
  background: linear-gradient(180deg, #152a42 0%, #122438 100%);
}

.btn {
  --bs-btn-border-radius: 10px;
  --bs-btn-font-weight: 600;
}

.btn-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  box-shadow: 0 4px 10px rgba(31, 134, 229, 0.28);
}

.search-input {
  border-radius: 12px;
}

/* Status badges: tinted, with a hairline of their own colour. */
.pill {
  padding: 0.14rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 7px;
  font-weight: 600;
}

.pill-gain {
  border-color: rgba(18, 161, 80, 0.28);
}

.pill-loss {
  border-color: rgba(229, 72, 77, 0.28);
}

.pill-flat {
  border-color: var(--line);
}

.pill-watch {
  border-color: rgba(31, 134, 229, 0.25);
}

.pill-strong {
  border-color: transparent;
}

.tag {
  border-radius: 6px;
}

/* Table headings sit on a tinted band, in ordinary case. */
.data-table th {
  background: var(--bg);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.panel > .table-responsive:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.panel > .table-responsive:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

.panel > .table-responsive:only-child {
  border-radius: var(--radius);
}

.avatar {
  border-radius: 50%;
}

.avatar-lg {
  border-radius: 50%;
}

.segmented {
  border: 1px solid var(--line);
  background: var(--bg);
}

.pull-bar {
  box-shadow: var(--shadow);
}

/* Notices sit in the corner of the page now that there is no bar across the top. */
.app-toasts {
  top: 1.25rem;
}

/* Sign-in, setup and no-access pages: the same soft page and white card. */
.auth-page {
  background: var(--page);
}

.auth-card {
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.08);
}

html[data-bs-theme="dark"] .auth-card {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.news-list a:hover,
.headline-list li > div > a:hover {
  color: var(--brand);
}

/* ---------- Phones ---------- */

/* Tab bar along the bottom of the screen on phones and tablets, where the sidebar is tucked away. */
.mobile-tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -6px 20px rgba(16, 24, 40, 0.06);
}

.mobile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-height: 52px;
  padding: 0.4rem 0.2rem;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-tab svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.mobile-tab.active {
  color: var(--brand);
}

.mobile-tab:active {
  background: var(--flat-soft);
}

@media (max-width: 991.98px) {
  /* Room for the tab bar, so the end of a page is never under it. */
  .app-shell {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .app-content {
    min-height: calc(100vh - 84px);
  }

  .app-toasts {
    top: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    max-width: none;
  }

  .app-toast {
    --bs-toast-max-width: none;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  /* iOS zooms the page when a field's text is under 16px; this keeps it still. */
  .form-control,
  .form-select {
    font-size: 16px;
  }

  /* Comfortable to hit with a thumb. */
  .btn {
    min-height: 42px;
  }

  .btn-sm {
    min-height: 38px;
    min-width: 38px;
  }

  .star {
    min-width: 36px;
    min-height: 36px;
    font-size: 1.4rem;
  }

  .page-title {
    font-size: 1.3rem;
  }

  /* A page's search box and buttons take the full width under its title. */
  .page-head {
    align-items: stretch;
  }

  .page-head > .page-actions {
    width: 100%;
  }

  .page-actions .search-input {
    flex: 1 1 100%;
    width: auto;
  }

  .page-actions > .btn,
  .page-actions > form {
    flex: 1 1 auto;
  }

  /* Rows of choices scroll sideways instead of wrapping into a block. */
  .segmented,
  .chart-indicators {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .segmented::-webkit-scrollbar,
  .chart-indicators::-webkit-scrollbar {
    display: none;
  }

  .segmented > *,
  .chart-indicators > * {
    flex: none;
  }

  .breadth .segmented {
    flex-wrap: nowrap;
  }

  /* Summary cards stay two to a row, a little tighter. */
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.1rem;
  }

  .stat {
    padding: 0.85rem 0.9rem;
  }

  .stat-value {
    font-size: 1.15rem;
  }

  .stat-foot {
    font-size: 0.8rem;
  }

  .pull-bar {
    margin-bottom: 1.1rem;
    padding: 0.8rem 0.9rem;
  }

  /* The status keeps its line and the button shrinks to its icon beside it. */
  .pull-bar {
    flex-wrap: nowrap;
    align-items: center;
  }

  .pull-bar .btn svg + [data-busy-label] {
    display: none;
  }

  .pull-bar .btn {
    padding-inline: 0.8rem;
  }

  .pull-sub {
    font-size: 0.78rem;
  }

  .panel-body {
    padding: 1.1rem 1rem;
  }

  .pick {
    padding: 1rem;
  }

  /* The main button takes a row to itself; the other two share the next. */
  .pick-actions > * {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .pick-actions > :first-child {
    flex-basis: 100%;
  }

  .pick-actions .btn {
    width: 100%;
  }

  .chart-panel {
    padding: 0.9rem 0.75rem 0.75rem;
  }

  .chart-area {
    height: 470px;
  }

  .signal-panel {
    padding: 0.9rem 1rem;
  }

  /* Tables that stay tables scroll sideways, with tighter cells. */
  .data-table th,
  .data-table td {
    padding: 0.65rem 0.7rem;
  }

  /* ----- On a phone the three big tables become lists: one tidy block per scrip, with only the figures that matter. ----- */

  #holdings thead,
  #prices thead,
  #signals thead {
    display: none;
  }

  #holdings,
  #holdings tbody,
  #prices,
  #prices tbody,
  #signals,
  #signals tbody {
    display: block;
  }

  #holdings td,
  #prices td,
  #signals td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  /* Rows the search has filtered out. */
  #holdings tr[hidden],
  #prices tr[hidden],
  #signals tr[hidden] {
    display: none;
  }

  /* The buttons column is pinned to the edge in the wide table; here it sits in the flow. */
  #holdings td:has(> .row-actions),
  #prices td:has(> .row-actions),
  #signals td:has(> .row-actions) {
    position: static;
    background: none;
  }

  .scrip-name {
    max-width: 44vw;
  }

  /* --- Market, Watchlist and Signals: a list, one scrip to a row, the whole row opening its chart. --- */

  #prices tr,
  #signals tr {
    position: relative;
    display: grid;
    align-items: center;
    column-gap: 0.7rem;
    row-gap: 0.2rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.12s;
  }

  #prices tr:last-child,
  #signals tr:last-child {
    border-bottom: 0;
  }

  #prices tr:active,
  #signals tr:active {
    background: var(--bg);
  }

  /* The symbol's link is stretched over the row, so a tap anywhere on it opens the chart. */
  #prices a.scrip-symbol::after,
  #signals a.scrip-symbol::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* The star stays above that link, and has a bigger area to hit than it looks. */
  #prices td:nth-child(1),
  #signals td:nth-child(1) {
    position: relative;
    z-index: 1;
    margin-left: -0.35rem;
  }

  /* Market and Watchlist: star, scrip, then the price with the day's move under it.
     Columns: 1 star, 2 scrip, 3 LTP, 4 change, 5 day, 6 open, 7 high, 8 low, 9 prev. close, 10 volume, 11 buttons.
     Reminders and "Add" are a tap away on the scrip's own page, so the row carries no buttons. */
  #prices tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "star scrip ltp"
      "star scrip day";
  }

  #prices td:nth-child(1) { grid-area: star; }
  #prices td:nth-child(2) { grid-area: scrip; }

  #prices td:nth-child(3) {
    grid-area: ltp;
    align-self: end;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
  }

  #prices td:nth-child(5) {
    grid-area: day;
    align-self: start;
    justify-self: end;
  }

  #prices td:nth-child(4),
  #prices td:nth-child(n + 6) {
    display: none;
  }

  /* A watched scrip with no quote yet has one wide cell in place of the figures. */
  #prices td[colspan] {
    display: block;
    grid-area: 1 / 3 / 3 / 4;
    align-self: center;
    font-size: 0.82rem;
    font-weight: 500;
  }

  /* Signals: star, scrip and the signal; the price and score under them; then why.
     Columns: 1 star, 2 scrip, 3 signal, 4 score, 5 LTP, 6 day, 7 RSI, 8 volume, 9 traded a day, 10 why, 11 buttons. */
  #signals tr {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "star scrip scrip signal"
      ".    ltp   day   score"
      ".    why   why   why";
    row-gap: 0.35rem;
  }

  #signals td:nth-child(1) { grid-area: star; }
  #signals td:nth-child(2) { grid-area: scrip; }
  #signals td:nth-child(3) { grid-area: signal; justify-self: end; }
  #signals td:nth-child(5) { grid-area: ltp; font-weight: 700; text-align: left; }
  #signals td:nth-child(6) { grid-area: day; justify-self: start; }

  #signals td:nth-child(4) {
    grid-area: score;
    justify-self: end;
    font-size: 1rem;
    font-weight: 700;
  }

  #signals td:nth-child(4)::before {
    content: "Score ";
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
  }

  #signals td:nth-child(10) {
    grid-area: why;
    min-width: 0;
    max-width: none;
    font-size: 0.78rem;
    line-height: 1.4;
  }

  #signals td:nth-child(n + 7):nth-child(-n + 9),
  #signals td:nth-child(11) {
    display: none;
  }

  /* --- Portfolio: a card per holding. Name and profit on top, two rows of figure chips, then the buttons.
     Columns: 1 scrip, 2 qty, 3 buy rate, 4 prev. close, 5 LTP, 6 day, 7 investment, 8 value, 9 profit / loss, 10 buttons. --- */

  /* The cards stand on the page themselves, so the panel around the table steps back. */
  .panel:has(#holdings) {
    border: 0;
    background: none;
    box-shadow: none;
  }

  #holdings tbody {
    display: grid;
    gap: 0.7rem;
  }

  #holdings tr {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 0.4rem;
    padding: 0.9rem 0.9rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  #holdings tbody tr:hover {
    background: var(--surface);
  }

  #holdings td:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }

  #holdings td:nth-child(9) {
    grid-area: 1 / 4 / 2 / 7;
    text-align: right;
  }

  #holdings td:nth-child(9) .strong {
    font-size: 1.02rem;
    font-weight: 700;
  }

  #holdings td:nth-child(9) .sub {
    margin-top: 0;
    font-weight: 600;
  }

  /* The six figure chips: two rows of three, each a tinted, rounded block with its own label. */
  #holdings td:nth-child(2),
  #holdings td:nth-child(3),
  #holdings td:nth-child(4),
  #holdings td:nth-child(5),
  #holdings td:nth-child(8),
  #holdings td:nth-child(6) {
    align-self: stretch;
    padding: 0.45rem 0.6rem;
    background: var(--bg);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
  }

  /* Row one: Qty, Avg rate, Value. Row two: Prev close, LTP, Today. */
  #holdings td:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  #holdings td:nth-child(3) { grid-area: 2 / 3 / 3 / 5; }
  #holdings td:nth-child(8) { grid-area: 2 / 5 / 3 / 7; }
  #holdings td:nth-child(4) { grid-area: 3 / 1 / 4 / 3; }
  #holdings td:nth-child(5) { grid-area: 3 / 3 / 4 / 5; }
  #holdings td:nth-child(6) { grid-area: 3 / 5 / 4 / 7; }

  #holdings td:nth-child(2)::before,
  #holdings td:nth-child(3)::before,
  #holdings td:nth-child(4)::before,
  #holdings td:nth-child(5)::before,
  #holdings td:nth-child(8)::before,
  #holdings td:nth-child(6)::before {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  #holdings td:nth-child(2)::before { content: "Qty"; }
  #holdings td:nth-child(3)::before { content: "Avg rate"; }
  #holdings td:nth-child(4)::before { content: "Prev close"; }
  #holdings td:nth-child(5)::before { content: "LTP"; }
  #holdings td:nth-child(8)::before { content: "Value"; }
  #holdings td:nth-child(6)::before { content: "Today"; }

  /* In the chip the price and its points move sit on one line, the move pushed to the right,
     so the LTP chip stays the same height as the others instead of stacking into two lines. */
  #holdings td:nth-child(5) .ltp-cell,
  #holdings td:nth-child(6) .ltp-cell {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
  }

  /* The value sits on the left, the change on the right. */
  #holdings td:nth-child(5) .ltp-value,
  #holdings td:nth-child(6) .ltp-value { order: -1; }

  #holdings td:nth-child(3) .btn-link {
    min-height: 0;
    font-size: 0.86rem;
    font-weight: 700;
  }

  #holdings td:nth-child(8) .strong {
    font-weight: 700;
  }

  #holdings td:nth-child(8) .weight {
    display: none;
  }

  #holdings td:nth-child(10) {
    grid-area: 4 / 4 / 5 / 7;
    justify-self: end;
  }

  #holdings td:nth-child(7) {
    display: none;
  }

  /* The card's buttons are bare icons, so they do not compete with the figures. */
  #holdings .row-actions {
    gap: 0.1rem;
  }

  #holdings .row-actions .btn {
    --bs-btn-border-color: transparent;
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--muted);
    min-width: 36px;
    min-height: 36px;
  }

  #holdings .row-actions .btn.has-alerts {
    --bs-btn-bg: var(--brand-soft);
    --bs-btn-color: var(--brand-dark);
  }
}

/* Dialogs rise from the bottom of the screen on a phone, like a sheet. */
@media (max-width: 575.98px) {
  .modal-dialog {
    align-items: flex-end;
    min-height: 100%;
    margin: 0;
  }

  .app-dialog {
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .modal.fade .modal-dialog {
    transform: translateY(40px);
  }

  .modal.show .modal-dialog {
    transform: none;
  }

  .app-dialog .modal-footer .btn {
    flex: 1 1 auto;
  }

  .app-shell {
    padding: 0 0 calc(64px + env(safe-area-inset-bottom));
  }

  /* Edge to edge: the rounded panel would waste a phone's width. */
  .app-content {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-page {
    padding: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transform: none;
  }
}

/* Tables that scroll sideways on a phone: dates stay on one line and the company name gives up width to the figures. */
@media (max-width: 767.98px) {
  .dividend-panel .data-table .scrip-name {
    max-width: 34vw;
  }

  .dividend-panel .data-table td > .strong,
  .dividend-panel .data-table td > .sub,
  .dividend-panel .data-table td > div {
    white-space: nowrap;
  }
}

/* A menu item that is a button rather than a link, such as "Install app". */
button.side-link {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
}

#installDialog .steps svg {
  vertical-align: -3px;
}

/* "Install" at the top right of the page: beside the page's own buttons on a wide screen, in the top bar on a narrow one. */
.install-top {
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.app-topbar .install-top {
  display: inline-flex;
  min-height: 38px;
  padding-inline: 0.85rem;
}

@media (max-width: 767.98px) {
  /* The search and buttons under a title stretch to full width; the install button is not one of them. */
  .page-actions > .install-top {
    flex: none;
  }
}

/* ---------- Dashboard, land and bank ---------- */

/* Each section has a colour: on its icon, its slice of the net worth bar, and its dot in the key. */
.section-shares {
  --tone: #1f86e5;
  --tone-soft: #e9f3fe;
}

.section-land {
  --tone: #12a150;
  --tone-soft: #e8f8ee;
}

.section-bank {
  --tone: #d98a00;
  --tone-soft: #fdf3dc;
}

.section-gold {
  --tone: #7c5cdb;
  --tone-soft: #f0ecfd;
}

html[data-bs-theme="dark"] .section-gold {
  --tone: #a78bfa;
  --tone-soft: #2a2350;
}

html[data-bs-theme="dark"] .section-shares {
  --tone: #5aa9ef;
  --tone-soft: #14314f;
}

html[data-bs-theme="dark"] .section-land {
  --tone: #34d399;
  --tone-soft: #0f3a2e;
}

html[data-bs-theme="dark"] .section-bank {
  --tone: #f5b942;
  --tone-soft: #3a2f10;
}

.section-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--tone-soft);
  color: var(--tone);
}

.section-icon svg {
  width: 22px;
  height: 22px;
}

.empty-state .section-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0.9rem;
  border-radius: 16px;
}

/* Net worth: the figure on the left, how it is spread on the right. */
.worth {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 1.5rem 1.6rem;
  background: linear-gradient(135deg, #f3f8ff 0%, #ffffff 55%);
}

html[data-bs-theme="dark"] .worth {
  background: linear-gradient(135deg, #152a42 0%, var(--surface) 60%);
}

.worth-value {
  margin-top: 0.3rem;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.worth-value .cur {
  margin-right: 0.3rem;
  color: var(--muted);
  font-size: 0.5em;
  font-weight: 600;
}

.worth-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.worth-sub strong {
  color: var(--ink);
}

.worth-sub strong.text-gain {
  color: var(--gain);
}

.worth-sub strong.text-loss {
  color: var(--loss);
}

.split-bar {
  display: flex;
  gap: 3px;
  height: 14px;
  margin-top: 0.7rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--flat-soft);
}

.split-bar span {
  min-width: 6px;
  background: var(--tone);
}

.split-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.3rem;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.split-key i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--tone);
}

.split-key strong {
  margin-left: 0.2rem;
  color: var(--ink);
}

/* The sections to choose from. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hub-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.3rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.hub-card:hover {
  border-color: var(--brand);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.09);
  color: var(--ink);
  transform: translateY(-2px);
}

.hub-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.hub-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.hub-top > div {
  flex: 1;
  min-width: 0;
}

.hub-name {
  font-size: 1.1rem;
  font-weight: 700;
}

.hub-sub {
  color: var(--muted);
  font-size: 0.84rem;
}

.hub-arrow {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform 0.15s, color 0.15s;
}

.hub-card:hover .hub-arrow {
  color: var(--brand);
  transform: translateX(3px);
}

.hub-value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.hub-value .cur,
.record-figure .cur,
.record-amount .cur {
  margin-right: 0.25rem;
  color: var(--muted);
  font-size: 0.6em;
  font-weight: 600;
}

.hub-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
  margin-top: auto;
  color: var(--muted);
  font-size: 0.88rem;
}

.hub-empty {
  margin-top: auto;
  color: var(--muted);
  font-size: 0.9rem;
}

.hub-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

/* Dates to watch: a little calendar leaf, what it is, how far off. */
.upcoming {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upcoming li,
.market-note {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.upcoming-date {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  padding: 0.3rem 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  line-height: 1.1;
  text-align: center;
}

.upcoming-date strong {
  font-size: 1.05rem;
}

.upcoming-date span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.upcoming-date.is-past strong {
  color: var(--loss);
}

.upcoming-text {
  flex: 1;
  min-width: 0;
}

.upcoming-text a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.upcoming-text a:hover {
  color: var(--brand);
}

.market-note {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s;
}

.market-note:hover {
  border-color: var(--brand);
  color: var(--ink);
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* A record: one piece of land as a card, or one bank item as a row. */
.record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.record {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.2rem;
}

.record-head,
.record-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.record-title {
  flex: 1;
  min-width: 0;
}

.record-name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-sub {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-value {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.record-label,
.record-facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.record-figure {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}

.record-facts {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  margin: 0;
  border-radius: 12px;
  background: var(--bg);
}

.record-facts > div {
  min-width: 0;
  padding: 0.5rem 0.65rem;
}

.record-facts dd {
  margin: 0.1rem 0 0;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-note {
  color: var(--muted);
  font-size: 0.86rem;
}

.record .row-actions .btn,
.record-row .row-actions .btn {
  --bs-btn-border-color: transparent;
  --bs-btn-bg: transparent;
}

.record-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.record-list {
  border-top: 1px solid var(--line);
}

.record-row {
  padding: 0.85rem 1.4rem;
}

.record-row + .record-row {
  border-top: 1px solid var(--line);
}

.record-terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.record-amount {
  flex: none;
  min-width: 9.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.record-none {
  padding: 0 1.4rem 1.3rem;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 1199.98px) {
  .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-lower {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .worth {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.15rem 1.1rem;
  }

  .worth-value {
    font-size: 1.85rem;
  }

  .hub-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
  }

  .hub-card {
    padding: 1rem;
  }

  .hub-value {
    font-size: 1.35rem;
  }

  .record-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
  }

  .record-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A bank row stacks: who it is with and the amount on top, its terms and buttons under. */
  .record-row {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding: 0.85rem 1rem;
  }

  .record-row .record-amount {
    min-width: 0;
  }

  /* Wide enough that the terms always drop to a second line, with the buttons beside them. */
  .record-row .record-terms {
    flex: 1 1 calc(100% - 8rem);
    min-width: 0;
    order: 3;
    justify-content: flex-start;
  }

  .record-row .row-actions {
    order: 4;
  }

  .record-none {
    padding: 0 1rem 1.1rem;
  }

  .record-section-head .btn {
    flex: none;
  }
}

/* The dashboard link stands apart at the top of the menu. */
.side-home {
  margin-top: 1rem;
}

/* ---------- Land tools: calculators ---------- */

/* Jump links to the calculators on the page. */
.tool-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.tool-nav .chip {
  text-decoration: none;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

.tool {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.3rem;
  /* A jump link lands with the card clear of the top of the screen. */
  scroll-margin-top: 1rem;
}

.tool-wide {
  grid-column: 1 / -1;
}

.tool-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.tool-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
}

.tool-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.tool-field,
.convert-fields label {
  display: block;
  min-width: 0;
  margin: 0;
}

.tool-field > span,
.convert-fields label > span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.tool-field-full {
  grid-column: 1 / -1;
}

/* The answer: a headline figure with the workings under it. */
.tool-result {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}

.tool-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.tool-figure {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tool-note {
  color: var(--muted);
  font-size: 0.86rem;
}

.tool-waiting {
  color: var(--muted);
  font-size: 0.9rem;
}

.tool-lines {
  display: grid;
  gap: 0.35rem;
  margin: 0.8rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.tool-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.tool-lines dt {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.tool-lines dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Under the converter the extra figures sit in columns, with no rule above. */
.tool-lines-wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.tool-lines-wide:empty {
  display: none;
}

.tool-lines-wide > div {
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: var(--bg);
}

.tool-lines-wide dd {
  text-align: left;
}

/* The converter: one row per way of writing an area. */
.convert-rows {
  display: grid;
  gap: 0.8rem;
}

.convert-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.convert-row:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.convert-name {
  padding-bottom: 0.55rem;
  font-weight: 700;
}

.convert-name span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.convert-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

@media (max-width: 1199.98px) {
  .tool-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  /* The jump links scroll sideways in one line. */
  .tool-nav {
    flex-wrap: nowrap;
    margin-inline: -1rem;
    padding-inline: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tool-nav::-webkit-scrollbar {
    display: none;
  }

  .tool-nav .chip {
    flex: none;
  }

  .tool {
    padding: 1rem;
  }

  .tool-figure {
    font-size: 1.4rem;
  }

  .convert-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.8rem;
  }

  .convert-name {
    padding-bottom: 0;
  }

  .convert-fields {
    gap: 0.5rem;
  }

  .tool-lines-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A label and a long figure stack instead of squeezing side by side. */
  .tool-lines:not(.tool-lines-wide) > div {
    flex-wrap: wrap;
    gap: 0 1rem;
  }
}

/* The pricing row under the converter: two boxes, not four. */
.convert-price .convert-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Zones: each with its own menu ---------- */

/* Back to the dashboard, at the top of a zone's menu. */
.side-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 1rem 0 0 0.3rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.side-back svg {
  width: 15px;
  height: 15px;
}

.side-back:hover {
  color: var(--brand);
}

/* Which zone this is. */
.zone-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.8rem 0 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 14px;
  background: var(--tone-soft);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.zone-title .section-icon,
.side-zone .section-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.zone-title .section-icon {
  background: var(--surface);
}

.zone-title .section-icon svg,
.side-zone .section-icon svg {
  width: 18px;
  height: 18px;
}

/* The three ways in, on the dashboard's menu. */
.side-zone {
  padding-block: 0.45rem;
  font-weight: 600;
}

.mobile-tabs {
  /* However many tabs the zone has, they share the bar equally. */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* A zone card on the dashboard: its name is a link stretched over the card, with its shortcuts above that. */
.hub-card {
  position: relative;
}

.hub-link {
  color: var(--ink);
  text-decoration: none;
}

.hub-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.hub-card:hover .hub-link {
  color: var(--brand);
}

.hub-links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.hub-links .chip {
  text-decoration: none;
}

.hub-links .chip:hover {
  background: var(--brand);
  color: #fff;
}

/* A block a menu link jumps to lands clear of the top of the screen. */
.zone-anchor {
  scroll-margin-top: 1rem;
}

/* ---------- EMI calculator ---------- */

.emi-layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

.emi-form {
  padding: 1.25rem 1.3rem;
}

.emi-form .hint {
  display: block;
  margin-top: 0.3rem;
}

.emi-answer {
  display: grid;
  gap: 1rem;
}

.emi-main {
  padding: 1.4rem 1.5rem;
  background: linear-gradient(135deg, #f3f8ff 0%, #ffffff 60%);
}

html[data-bs-theme="dark"] .emi-main {
  background: linear-gradient(135deg, #152a42 0%, var(--surface) 60%);
}

.emi-figure {
  margin-top: 0.3rem;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.emi-figure small {
  color: var(--muted);
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0;
}

.emi-sub {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.emi-sub strong {
  color: var(--ink);
}

/* What paying extra buys. */
.emi-saving {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(18, 161, 80, 0.28);
  border-radius: 12px;
  background: var(--gain-soft);
  color: var(--ink);
  font-size: 0.92rem;
}

.emi-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

.emi-stats .stat-value {
  font-size: 1.3rem;
}

.emi-split {
  padding: 1.1rem 1.3rem;
}

.emi-interest {
  --tone: var(--loss);
}

/* One year of the schedule: a summary line that opens onto its months. */
.emi-years {
  border-top: 1px solid var(--line);
}

.emi-year + .emi-year {
  border-top: 1px solid var(--line);
}

.emi-year > summary {
  display: grid;
  grid-template-columns: 8.5rem repeat(4, minmax(0, 1fr)) 1.2rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.emi-year > summary::-webkit-details-marker {
  display: none;
}

/* The arrow that shows a year can be opened. */
.emi-year > summary::after {
  content: "";
  justify-self: end;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.emi-year[open] > summary::after {
  transform: rotate(-135deg);
}

.emi-year > summary:hover,
.emi-year[open] > summary {
  background: var(--bg);
}

.emi-year-name {
  font-size: 1.1rem;
}

.emi-year small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
}

.emi-year-fact {
  min-width: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.emi-table th,
.emi-table td {
  padding: 0.55rem 1rem;
}

.emi-table th:first-child,
.emi-table td:first-child {
  padding-left: 1.4rem;
  color: var(--muted);
}

.emi-bar-cell {
  width: 110px;
}

/* How one payment splits: green pays the loan down, red is interest. */
.emi-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--loss);
}

.emi-bar span {
  display: block;
  height: 100%;
  background: var(--gain);
}

@media (max-width: 1199.98px) {
  .emi-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .emi-form,
  .emi-main {
    padding: 1.1rem 1rem;
  }

  .emi-figure {
    font-size: 1.9rem;
  }

  /* A year's summary: its name across the top, the four figures two to a row under it. */
  .emi-year > summary {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.8rem 1rem;
  }

  .emi-year-name {
    grid-column: 1 / -1;
  }

  /* The arrow sits in the corner, out of the grid, so the figures keep both columns. */
  .emi-year > summary::after {
    position: absolute;
    top: 1.2rem;
    right: 1.1rem;
  }

  .emi-table th,
  .emi-table td {
    padding: 0.5rem 0.55rem;
    font-size: 0.86rem;
  }

  .emi-table th:first-child,
  .emi-table td:first-child {
    padding-left: 1rem;
  }

  /* The split bar gives its room to the figures on a phone. */
  .emi-bar-cell {
    display: none;
  }
}

/* A zone's entry in the main menu, while that zone's page is the one open. */
.side-zone.active .section-icon {
  background: var(--surface);
}

/* Under a converter row's boxes: the whole area in each of that row's units on its own. */
.convert-total {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.convert-total:empty {
  display: none;
}

.convert-total b {
  color: var(--ink);
  font-weight: 700;
}

.convert-total-label {
  font-size: 0.78rem;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .convert-total {
    grid-column: 1;
  }
}

/* ---------- Draw a plot ---------- */

.plot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

.plot-board {
  padding: 1rem;
}

.plot-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 0.8rem;
}

.plot-starts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.plot-starts .chip {
  cursor: pointer;
}

.plot-tools {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

/* The drawing. */
.plot-canvas {
  position: relative;
  height: 520px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}

#plotSvg {
  display: block;
  width: 100%;
  height: 100%;
  /* A finger on the drawing moves a corner, not the page. */
  touch-action: none;
  user-select: none;
}

#plotSvg.is-drawing {
  cursor: crosshair;
}

.plot-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.plot-shape {
  fill: rgba(31, 134, 229, 0.14);
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.plot-edge {
  stroke: var(--brand);
  stroke-width: 2.5;
}

.plot-diagonal {
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.plot-corner {
  fill: var(--surface);
  stroke: var(--brand);
  stroke-width: 3;
  pointer-events: none;
}

.plot-grab {
  fill: transparent;
  cursor: grab;
}

.plot-grab:active {
  cursor: grabbing;
}

/* Labels have a halo of the background colour so they stay readable over lines. */
.plot-length,
.plot-letter {
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 5px;
  stroke-linejoin: round;
  fill: var(--ink);
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}

.plot-length-diagonal {
  fill: var(--muted);
  font-weight: 600;
}

.plot-letter {
  fill: var(--brand);
  font-size: 15px;
}

.plot-hint {
  position: absolute;
  inset: auto 1rem 50% 1rem;
  transform: translateY(50%);
  color: var(--muted);
  font-size: 0.98rem;
  text-align: center;
  pointer-events: none;
}

.plot-scale {
  position: absolute;
  right: 0.7rem;
  bottom: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  pointer-events: none;
}

.plot-side {
  display: grid;
  gap: 1rem;
}

.plot-result,
.plot-measures {
  padding: 1.15rem 1.2rem;
}

.plot-area {
  margin-top: 0.2rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.plot-area small {
  color: var(--muted);
  font-size: 0.5em;
  font-weight: 600;
}

.plot-area-sub {
  color: var(--muted);
  font-size: 0.92rem;
}

.plot-price {
  display: block;
  margin-top: 1rem;
}

.plot-measures-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.plot-unit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.plot-unit .form-select {
  width: auto;
  font-size: 0.88rem;
}

.plot-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.7rem;
}

.plot-group {
  grid-column: 1 / -1;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.plot-group small {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.plot-field {
  display: block;
  margin: 0;
}

.plot-field > span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.plot-problem {
  margin-bottom: 0.7rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(31, 134, 229, 0.25);
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 0.88rem;
}

.plot-how {
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.plot-how strong {
  color: var(--ink);
}

@media (max-width: 1199.98px) {
  .plot-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .plot-board {
    padding: 0.75rem;
  }

  .plot-canvas {
    height: 380px;
  }

  .plot-tools {
    margin-left: 0;
  }
}

/* A length on the drawing can be clicked to type over it. */
.plot-length {
  pointer-events: auto;
  cursor: text;
}

.plot-length:hover {
  fill: var(--brand);
  text-decoration: underline;
}

/* The box that opens over a length, centred on it. */
.plot-inline {
  position: absolute;
  width: 96px;
  padding: 0.25rem 0.5rem;
  transform: translate(-50%, -50%);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 6px 16px rgba(16, 24, 40, 0.14);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.plot-tools .icon-only {
  width: 34px;
  height: 34px;
  min-width: 34px;
}

/* The price of the plot, opened under its area. */
.plot-pricing {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.plot-pricing .plot-group {
  margin: 0 0 0.6rem;
}

.plot-pricing .tool-result {
  margin-top: 0.8rem;
}

button.plot-price {
  width: 100%;
}

/* ----- Interest rates: every bank's deposit and loan rates, by class of bank ----- */

.rates-actions {
  align-items: flex-end;
}

.rates-search {
  width: 13rem;
}

.rates-loan {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.rates-loan .form-select {
  width: auto;
}

.rates-jump {
  margin-bottom: 1rem;
}

.rates-count {
  margin-left: 0.15rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
}

.rates-table .scrip-symbol {
  color: var(--ink);
  font-weight: 700;
}

.rates-table td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* The best figure of its column within the group. */
.rate-best {
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  background: var(--gain-soft, rgba(22, 163, 74, 0.12));
  color: var(--gain);
  font-weight: 700;
}

/* One rate in the dialog: what it is on the left, the figure on the right. */
.rate-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.rate-line-name {
  font-weight: 600;
}

.rate-line-note {
  color: var(--muted);
  font-size: 0.8rem;
}

.rate-line-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#rateDialog .plot-group {
  margin: 1rem 0 0.2rem;
}

#rateDialog .plot-group:first-child {
  margin-top: 0;
}

.rate-site {
  margin: 0.9rem 0 0;
}

@media (max-width: 767.98px) {
  .rates-actions,
  .rates-loan {
    width: 100%;
  }

  .rates-search,
  .rates-loan .form-select {
    width: 100%;
    flex: 1;
  }

  /* Each bank becomes a card: its name across the top, the four rates in a 2 by 2 block, the button below. */
  .rates-table thead {
    display: none;
  }

  .rates-table,
  .rates-table tbody {
    display: block;
  }

  .rates-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
  }

  .rates-table tr[hidden] {
    display: none;
  }

  .rates-table tr:last-child {
    border-bottom: 0;
  }

  .rates-table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .rates-table td.num {
    text-align: left;
  }

  .rates-table td:first-child,
  .rates-table td:last-child {
    grid-column: 1 / -1;
    width: auto;
  }

  .rates-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .rates-table td:last-child .btn {
    width: 100%;
  }
}

/* ----- Ready to deposit or take a loan: the two doors on the bank overview, and the page they open ----- */

.ready-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1rem 1.5rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.ready-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.ready-choice {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.ready-choice:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
  transform: translateY(-1px);
}

.ready-choice > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.ready-choice strong {
  display: block;
  font-size: 0.98rem;
}

.ready-choice small {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.ready-choice .hub-arrow {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}

.ready-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
}

.ready-icon svg {
  width: 20px;
  height: 20px;
}

.ready-deposit {
  background: var(--gain-soft);
  color: var(--gain);
}

.ready-loan {
  background: var(--brand-soft);
  color: var(--brand);
}

.best-form {
  margin-bottom: 1rem;
}

.best-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
  align-items: end;
}

.best-fields .btn {
  height: calc(2.25rem + 6px);
}

/* The winner, across the top. */
.best-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.2rem 1.35rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--gain);
}

.best-pick-name {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.best-pick-sub {
  color: var(--muted);
  font-size: 0.88rem;
}

.best-pick-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.best-pick-facts small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
}

.best-pick-facts b {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.best-classes {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.best-docs {
  margin-top: 1rem;
}

.best-doc-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.5rem 2rem;
  margin-bottom: 0.9rem;
}

.best-doc-list {
  margin: 0.35rem 0 0.9rem;
  padding: 0;
  list-style: none;
}

.best-doc-list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.6rem;
  font-size: 0.92rem;
  line-height: 1.4;
}

.best-doc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--muted);
  border-radius: 4px;
}

@media (max-width: 991.98px) {
  .ready-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .ready-choices {
    grid-template-columns: 1fr;
  }

  .best-pick-facts,
  .best-pick-facts .btn {
    width: 100%;
  }

  .best-pick-name {
    font-size: 1.2rem;
  }
}

/* The choice of corner the plot's diagonals are measured from, in the heading above their boxes. */
.plot-hub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.plot-hub small {
  flex-basis: 100%;
}

.plot-hub .btn {
  text-transform: none;
  letter-spacing: 0;
}

.plot-hub label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.plot-hub .form-select {
  width: auto;
  font-weight: 700;
}

.plot-hub small {
  margin-top: 0.3rem;
}

/* ----- Area from a map: a scanned map on a canvas, with a scale line and a traced plot ----- */

.map-open {
  margin: 0;
  cursor: pointer;
}

.map-canvas {
  height: 600px;
  background: var(--flat-soft, var(--bg));
}

.map-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.map-canvas canvas.is-marking {
  cursor: crosshair;
}

.map-canvas canvas.is-moving {
  cursor: grabbing;
}

.map-file {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: 0.6rem;
}

.map-scale > .plot-field {
  margin-bottom: 0.75rem;
}

.map-status {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.4;
}

.map-status.ok {
  color: var(--gain);
  font-weight: 600;
}

.map-scale .plot-price {
  margin-top: 0.75rem;
}

.map-actions {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.map-actions .plot-unit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.map-actions .plot-unit .form-select {
  width: auto;
}

@media (max-width: 767.98px) {
  .map-canvas {
    height: 62vh;
    min-height: 360px;
  }
}

.map-help {
  margin: 0 0 0.85rem;
  line-height: 1.4;
}

.map-scale .plot-fields {
  margin-bottom: 0.75rem;
}

.plot-how .steps ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.plot-how .steps ul li + li {
  margin-top: 0.25rem;
}

.map-status.warn {
  color: var(--loss);
  font-weight: 600;
}

/* ---------- Gold & forex ---------- */

/* Four zone cards sit in one row only where there is room for them; otherwise two by two. */
@media (min-width: 1600px) {
  .hub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The two trend charts, with the worth calculator beside them. */
.metal-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 320px);
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.metal-readout {
  margin: 0.6rem 0 0.25rem;
  font-variant-numeric: tabular-nums;
}

.metal-chart {
  height: 220px;
}

.metal-worth {
  margin: 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* Every currency, with the converter beside it. */
.forex-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.forex-convert {
  position: sticky;
  top: 1rem;
}

@media (max-width: 1399.98px) {
  .metal-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .metal-layout,
  .forex-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone the converter comes first: it is what people open the page for. */
  .forex-convert {
    position: static;
    order: -1;
  }
}

/* When the Gold & forex card's rates were pulled. */
.rates-pulled {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-size: 0.8rem;
}

/* Gold and silver side by side on the dashboard card. */
.metal-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.metal-pair > div + div {
  padding-left: 0.9rem;
  border-left: 1px solid var(--line);
}

.metal-pair-value {
  margin: 0.1rem 0 0.35rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.metal-pair-value .cur {
  margin-right: 0.2rem;
  color: var(--muted);
  font-size: 0.6em;
  font-weight: 600;
}

/* The small arrow that marks a menu link leaving the app, such as Trade on TMS. */
.side-link svg.side-external {
  width: 14px;
  height: 14px;
  margin-left: auto;
  opacity: 0.55;
}

/* The two Top 10 by volume boards above the full market table. */
.top-vol { margin-bottom: 1.5rem; }
.top-vol-table { width: 100%; }
.top-vol-table th,
.top-vol-table td { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.top-vol-table .scrip { gap: 0.5rem; }
.top-vol-table .avatar { width: 28px; height: 28px; font-size: 0.72rem; }

/* LTP in the portfolio: the price with the point move from yesterday's close small above it, right-aligned. */
.ltp-cell { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ltp-diff { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1px; }
.ltp-diff .arrow { font-size: 0.66rem; margin-right: 1px; }
.ltp-value { font-size: 1.05rem; font-weight: 600; }

/* ---------- Nepali calendar panel on the dashboard ---------- */
.cal-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1rem 1.75rem;
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.25rem;
}

.cal-convert {
  padding-left: 1.75rem;
  border-left: 1px solid var(--line);
}

.cal-today {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.cal-today-block { min-width: 0; }
.cal-today-info { min-width: 0; }

/* A tear-off calendar tile: weekday header over the big Nepali day and month. */
.cal-tile {
  flex: none;
  width: 78px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.cal-tile-top {
  padding: 0.28rem 0;
  background: var(--brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cal-tile-day { padding-top: 0.25rem; font-size: 1.95rem; font-weight: 700; line-height: 1.05; }
.cal-tile-mon { padding-bottom: 0.4rem; color: var(--muted); font-size: 0.78rem; }

.cal-ad { margin-top: 0.15rem; font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); line-height: 1.3; }

.cal-open-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.55rem;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 600;
}

.cal-open-link svg { width: 15px; height: 15px; transition: transform 0.12s; }
a.cal-today-link:hover .cal-open-link svg { transform: translateX(2px); }

.cal-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cal-bs-ne { font-size: 1.5rem; font-weight: 700; line-height: 1.12; }
.cal-bs-rom { margin-top: 0.15rem; color: var(--ink-soft); font-size: 0.9rem; }
.cal-ad { font-size: 1.12rem; font-weight: 600; line-height: 1.25; }

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.cal-head .cal-label { margin-bottom: 0; }
.cal-modes { font-size: 0.82rem; }

.cal-bs-inputs {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 0.8fr;
  gap: 0.5rem;
}

.cal-field { display: block; margin: 0; }

.cal-field > span {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.cal-result {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.75rem;
  min-height: 1.4rem;
}

.cal-result strong { font-size: 1.05rem; font-weight: 700; }
.cal-result-sub { color: var(--ink-soft); font-size: 0.85rem; }
.cal-result.is-error { color: var(--loss); font-size: 0.86rem; font-weight: 500; }

@media (max-width: 767.98px) {
  .cal-panel { grid-template-columns: 1fr; gap: 1.1rem; }

  .cal-convert {
    padding-left: 0;
    padding-top: 1.1rem;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* The clickable Nepali date and the month calendar it opens. */
.cal-bs-ne.cal-open {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.cal-bs-ne.cal-open svg { width: 18px; height: 18px; color: var(--muted); }
.cal-bs-ne.cal-open:hover svg { color: var(--brand); }

.cal-month {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.cal-month-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.cal-month-title { text-align: center; line-height: 1.15; }
.cal-month-title strong { font-size: 1.1rem; }
.cal-month-sub { display: block; color: var(--muted); font-size: 0.78rem; }

.cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.cal-nav:hover { background: var(--bg); color: var(--ink); }
.cal-nav svg { width: 18px; height: 18px; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  padding: 0.3rem 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}

.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.25rem;
  border-radius: 9px;
  background: var(--bg);
}

.cal-empty { background: none; }
.cal-d { font-size: 1rem; font-weight: 700; line-height: 1; }
.cal-ad-d { margin-top: 2px; color: var(--muted); font-size: 0.62rem; }
.cal-sat { color: var(--loss); }
.cal-dow.cal-sat { color: var(--loss); }

.cal-today-cell {
  background: var(--brand);
  color: #fff;
}

.cal-today-cell .cal-ad-d { color: rgba(255, 255, 255, 0.85); }

.cal-month-foot {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 767.98px) {
  .cal-cell { min-height: 42px; }
  .cal-ad-d { font-size: 0.58rem; }
}

/* The dashboard "today" card is a link to the full calendar. */
a.cal-today-link {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: -0.4rem;
  padding: 0.4rem;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  transition: background-color 0.12s;
}

a.cal-today-link:hover { background: var(--bg); }

/* The full calendar page: larger day cells carrying the tithi, and clickable to select. */
.cal-grid-lg .cal-cell { min-height: 70px; align-items: flex-start; justify-content: flex-start; padding: 0.4rem 0.45rem; }
.cal-grid-lg .cal-d { font-size: 1.05rem; }
.cal-cell-link { text-decoration: none; color: inherit; transition: background-color 0.12s, box-shadow 0.12s; }
.cal-cell-link:hover { background: var(--line); }

.cal-ti {
  margin-top: auto;
  padding-top: 2px;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.cal-today-cell .cal-ti { color: rgba(255, 255, 255, 0.9); }

.cal-selected { box-shadow: 0 0 0 2px var(--brand) inset; }
.cal-today-cell.cal-selected { box-shadow: 0 0 0 2px #fff inset; }

.cal-detail { margin: 1rem 0 0; }
.cal-detail > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
}

.cal-detail dt { color: var(--muted); font-size: 0.82rem; font-weight: 600; margin: 0; }
.cal-detail dd { margin: 0; font-weight: 600; text-align: right; }
.cal-note { margin-top: 1rem; }

@media (max-width: 767.98px) {
  .cal-grid-lg .cal-cell { min-height: 60px; }
  .cal-ti { font-size: 0.56rem; }
}

/* Panchak marker dot on a calendar day, and its legend. */
.cal-grid-lg .cal-cell { position: relative; }
.cal-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--loss);
}
.cal-grid-lg .cal-dot { position: absolute; top: 6px; right: 6px; }
.cal-today-cell .cal-dot { background: #fff; }

.cal-month-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cal-legend { display: inline-flex; align-items: center; gap: 0.3rem; }
.cal-legend .cal-dot { position: static; }

/* ---- Calendar page on a phone ---- */
@media (max-width: 575.98px) {
  .cal-grid-lg { gap: 3px; }
  .cal-grid-lg .cal-cell { min-height: 52px; padding: 0.28rem 0.1rem; border-radius: 8px; }
  .cal-grid-lg .cal-d { font-size: 0.92rem; }
  .cal-grid-lg .cal-dow { font-size: 0.58rem; padding: 0.2rem 0; }
  .cal-ad-mon { display: none; }            /* keep the AD day number, drop the month name */
  .cal-grid-lg .cal-ad-d { font-size: 0.56rem; }
  .cal-ti { font-size: 0.5rem; }
  .cal-grid-lg .cal-dot { top: 3px; right: 3px; width: 5px; height: 5px; }
}