/* shadcn New York — dark, OKLCH neutrals */
:root {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --destructive: oklch(0.704 0.191 22.216);

  --up: oklch(0.74 0.18 152);
  --down: oklch(0.7 0.2 22);

  /* custom "lifted" radius — only bottom-right is rounded, hard */
  --radius: 0.625rem;
  --lift: 1.25rem;

  --font-sans:
    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  padding: clamp(1rem, 4vw, 2.5rem) clamp(1rem, 5vw, 3rem)
    calc(env(safe-area-inset-bottom, 0px) + clamp(1.5rem, 4vw, 2.5rem));
  background-image:
    radial-gradient(circle at 80% 0%, oklch(0.22 0.02 260 / 0.4) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, oklch(0.22 0.02 30 / 0.25) 0%, transparent 45%);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Lift utility — sharp on three corners, fat radius bottom-right,
         shadow offset toward the lifted corner to read as "hinged up". */
.lift {
  border-radius: 0 0 var(--lift) 0;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  box-shadow:
    0 14px 28px -10px rgb(0 0 0 / 0.55),
    0 6px 10px -6px rgb(0 0 0 / 0.4),
    inset 0 1px 0 0 oklch(1 0 0 / 0.04);
  position: relative;
}

.lift::after {
  /* subtle inner highlight on the lifted corner */
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 40%;
  border-radius: 0 0 var(--lift) 0;
  pointer-events: none;
  background: radial-gradient(
    120% 120% at 100% 100%,
    oklch(1 0 0 / 0.04),
    transparent 60%
  );
}

header.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
  flex-wrap: wrap;
}

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

.brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0 0 0.75rem 0;
  box-shadow: 0 6px 12px -6px rgb(0 0 0 / 0.6);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

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

.brand-sub {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* status pill — also lifted */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0 0 0.625rem 0;
  font-family: var(--font-mono);
  min-height: 2rem;
}

.pill .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--muted-foreground);
  box-shadow: 0 0 0 0 currentColor;
}

.pill[data-state="live"] {
  color: var(--up);
}
.pill[data-state="live"] .dot {
  background: var(--up);
  animation: pulse 1.6s ease-in-out infinite;
}
.pill[data-state="error"] {
  color: var(--destructive);
}
.pill[data-state="error"] .dot {
  background: var(--destructive);
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px transparent;
    opacity: 0.6;
  }
}

h1 {
  font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem 0;
}

.lede {
  font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
  color: var(--muted-foreground);
  margin: 0 0 clamp(1rem, 3vw, 1.75rem) 0;
}

.grid {
  display: grid;
  gap: clamp(0.625rem, 2vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
}

.stat {
  padding: clamp(0.75rem, 2.5vw, 1rem) clamp(0.85rem, 3vw, 1.1rem)
    clamp(0.85rem, 2.75vw, 1.2rem);
}

.stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 0.95rem + 1.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.card {
  padding: clamp(0.875rem, 3vw, 1.25rem) clamp(0.875rem, 3vw, 1.25rem)
    clamp(1rem, 3.5vw, 1.5rem);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.card-title {
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-desc {
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

/* Toolbar — search + sort */
.toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.search {
  flex: 1 1 12rem;
  min-width: 0;
  position: relative;
}

/* Search results popover */
.results {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 22rem;
  overflow-y: auto;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--lift) 0;
  box-shadow:
    0 18px 36px -12px rgb(0 0 0 / 0.6),
    0 6px 12px -6px rgb(0 0 0 / 0.45);
  padding: 0.3rem;
  display: none;
}

.results[data-open="true"] {
  display: block;
}

.results-empty,
.results-hint {
  padding: 0.7rem 0.8rem;
  font-size: 0.78rem;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
}

.result {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  border-radius: 0 0 0.5rem 0;
  font-family: inherit;
}

.result:hover,
.result[aria-selected="true"] {
  background: var(--secondary);
}

.result-sym {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
}

.result-name {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-meta {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0 0 0.35rem 0;
  color: var(--muted-foreground);
  background: var(--secondary);
  white-space: nowrap;
}

.badge[data-class="crypto"] {
  color: var(--up);
}
.badge[data-class="equity"] {
  color: var(--foreground);
}
.badge[data-class="etf"] {
  color: oklch(0.72 0.13 250);
}

.badge.live {
  color: var(--up);
  border-color: oklch(0.74 0.18 152 / 0.4);
}

.badge.live::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.3rem;
  border-radius: 999px;
  background: var(--up);
  vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}

/* Row flash when an instrument is jumped to from search */
tbody tr.flash {
  animation: row-flash 1.4s ease-out;
}

@keyframes row-flash {
  0% {
    background: oklch(0.74 0.18 152 / 0.18);
  }
  100% {
    background: transparent;
  }
}

.search input {
  width: 100%;
  appearance: none;
  background: var(--secondary);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 0 0 0.625rem 0;
  padding: 0.6rem 0.85rem 0.6rem 2.2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.2;
  min-height: 2.5rem;
  outline: none;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.search input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px oklch(0.556 0 0 / 0.18);
}

.search input::placeholder {
  color: var(--muted-foreground);
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.95rem;
  height: 0.95rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

.sort {
  display: inline-flex;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0 0 0.625rem 0;
  padding: 0.2rem;
  gap: 0.2rem;
}

.sort button {
  appearance: none;
  background: transparent;
  color: var(--muted-foreground);
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0 0 0.4rem 0;
  cursor: pointer;
  min-height: 2.1rem;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.sort button:hover {
  color: var(--foreground);
}

.sort button[aria-pressed="true"] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.04);
}

/* Asset-class filter chips */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.filters[hidden] {
  display: none;
}

.chip {
  appearance: none;
  background: var(--secondary);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 0 0 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.4rem 0.7rem;
  min-height: 2rem;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}

.chip:hover {
  color: var(--foreground);
}

.chip[aria-pressed="true"] {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--ring);
  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.04);
}

/* Table — desktop layout */
.table-wrap {
  width: 100%;
}

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

thead th {
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

thead th.num {
  text-align: right;
}

tbody td {
  padding: 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}

tbody td.num {
  text-align: right;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: background-color 120ms ease;
}

tbody tr:hover {
  background: oklch(1 0 0 / 0.02);
}

.sym {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-weight: 600;
}

.sym-mark {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.65rem;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 0 0 0.5rem 0;
  flex-shrink: 0;
}

.price {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transition:
    color 400ms ease,
    transform 200ms ease;
}

.price.up {
  color: var(--up);
}
.price.down {
  color: var(--down);
}

.ts {
  font-family: var(--font-mono);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.spark {
  display: block;
  width: 100%;
  max-width: 120px;
  height: 28px;
}

.spark path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spark[data-trend="up"] path {
  stroke: var(--up);
}
.spark[data-trend="down"] path {
  stroke: var(--down);
}
.spark[data-trend="flat"] path {
  stroke: var(--muted-foreground);
}

.empty {
  text-align: center;
  color: var(--muted-foreground);
  padding: 2.5rem 1rem;
  font-size: 0.875rem;
}

footer {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: 0.72rem;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  text-align: right;
}

/* ---------- Responsive ---------- */

/* Tablet: hide the timestamp column to save space */
@media (max-width: 820px) {
  thead th.col-ts,
  tbody td.col-ts {
    display: none;
  }
  .spark {
    max-width: 80px;
  }
}

/* Mobile: table becomes a stack of cards (CSS-only, no markup change). */
@media (max-width: 640px) {
  header.bar {
    align-items: flex-start;
  }

  .pill {
    align-self: flex-start;
  }

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

  /* Promote the third stat to span both columns so it stays readable. */
  .grid > .stat:nth-child(3) {
    grid-column: span 2;
  }

  .card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar {
    flex-direction: column;
  }

  .sort {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .sort button {
    flex: 1 1 auto;
    white-space: nowrap;
  }

  thead {
    /* Hide visually but keep accessible. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }

  tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: center;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
  }

  tbody tr:hover {
    background: transparent;
  }

  tbody td {
    padding: 0;
    border: 0;
    font-size: 0.95rem;
  }

  tbody td.col-sym {
    grid-column: 1;
    grid-row: 1;
  }

  tbody td.col-price {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  tbody td.col-spark {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  tbody td.col-spark .spark {
    max-width: 100%;
    height: 24px;
  }

  tbody td.col-ts {
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
    color: var(--muted-foreground);
    font-size: 0.72rem;
  }

  .price {
    font-size: 1rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Sign-out button (in header) ---------- */
.icon-btn {
  appearance: none;
  background: var(--secondary);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 0 0 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  min-height: 2rem;
  transition:
    color 120ms ease,
    background 120ms ease;
}
.icon-btn:hover {
  color: var(--foreground);
}

/* ---------- Login page ---------- */
.login-shell {
  min-height: calc(100dvh - 4rem);
  display: grid;
  place-items: center;
}

.login-card {
  width: min(28rem, 100%);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login-card h1 {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
}

.login-card .lede {
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-form label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}

.login-form input[type="email"] {
  appearance: none;
  background: var(--secondary);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 0 0 0.625rem 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  min-height: 2.75rem;
  outline: none;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.login-form input[type="email"]:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px oklch(0.556 0 0 / 0.18);
}

.login-form button[type="submit"] {
  appearance: none;
  background: var(--primary);
  color: var(--primary-foreground);
  border: 0;
  border-radius: 0 0 0.625rem 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  min-height: 2.75rem;
  transition: opacity 120ms ease;
}

.login-form button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted-foreground);
  min-height: 1.2rem;
}

.login-status[data-state="error"] {
  color: var(--destructive);
}

.login-status[data-state="ok"] {
  color: var(--up);
}

/* =========================================================
         M2: dashboard, ticket, chart, bottom nav
         ========================================================= */

.has-bottom-nav {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
}

/* ---------- Hero card (equity / price) ---------- */
.hero-card {
  padding: clamp(1.25rem, 4vw, 1.75rem);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hero-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
}

.hero-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero-sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.hero-stats {
  margin: 0.5rem 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
}
.hero-stats div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.hero-stats dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  margin: 0;
}
.hero-stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 500;
}

/* ---------- Row list (positions / orders / trades) ---------- */
.row-list {
  display: flex;
  flex-direction: column;
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.row:last-child {
  border-bottom: none;
}
a.row:hover,
.row.order-row:hover {
  background: oklch(1 0 0 / 0.02);
}

.row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
a.row-main {
  color: inherit;
  text-decoration: none;
}

.row-symbol {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.row-sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.row-meta {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-end;
}

.row-value {
  font-size: 0.95rem;
  font-weight: 500;
}

.row-delta {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.row-delta[data-trend="up"],
.row-value[data-trend="up"] {
  color: var(--up);
}
.row-delta[data-trend="down"],
.row-value[data-trend="down"] {
  color: var(--down);
}

.side-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.4rem;
  border-radius: 0 0 0.35rem 0;
  border: 1px solid var(--border);
}
.side-tag[data-side="buy"] {
  color: var(--up);
  border-color: oklch(0.74 0.18 152 / 0.4);
}
.side-tag[data-side="sell"] {
  color: var(--down);
  border-color: oklch(0.7 0.2 22 / 0.4);
}

.cancel-btn {
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--down);
  background: transparent;
  border: 1px solid oklch(0.7 0.2 22 / 0.4);
  border-radius: 0.4rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.cancel-btn:hover {
  background: oklch(0.7 0.2 22 / 0.1);
}
.cancel-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.status-pending,
.status-open,
.status-partially_filled {
  color: var(--foreground);
}
.status-filled {
  color: var(--up);
}
.status-cancelled,
.status-rejected {
  color: var(--muted-foreground);
}

.count-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0 0 0.5rem 0;
  padding: 0.2rem 0.55rem;
  color: var(--muted-foreground);
}

.empty-row {
  padding: 1.25rem 0;
  text-align: center;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.empty-row a {
  color: var(--foreground);
}

/* ---------- Chart ---------- */
.chart {
  margin-top: 0.75rem;
  width: 100%;
  position: relative;
}
.chart svg {
  overflow: visible;
}
.chart-line {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart[data-trend="up"] .chart-line {
  stroke: var(--up);
}
.chart[data-trend="down"] .chart-line {
  stroke: var(--down);
}
.chart-area {
  opacity: 0.12;
}
.chart[data-trend="up"] .chart-area {
  fill: var(--up);
}
.chart[data-trend="down"] .chart-area {
  fill: var(--down);
}

/* ---------- Trade ticket ---------- */
.ticket {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ticket-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0 0 0.625rem 0;
  padding: 0.2rem;
  gap: 0.2rem;
}
.side-tab {
  appearance: none;
  background: transparent;
  color: var(--muted-foreground);
  border: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem;
  border-radius: 0 0 0.45rem 0;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}
.side-tab[aria-selected="true"][data-side="buy"] {
  background: var(--card);
  color: var(--up);
  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.04);
}
.side-tab[aria-selected="true"][data-side="sell"] {
  background: var(--card);
  color: var(--down);
  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.04);
}

.ticket-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ticket-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}

.ticket-input {
  appearance: none;
  background: var(--secondary);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 0 0 0.55rem 0;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  min-height: 2.75rem;
  outline: none;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}
.ticket-input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px oklch(0.556 0 0 / 0.18);
}

.type-group {
  display: inline-flex;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0 0 0.55rem 0;
  padding: 0.2rem;
  gap: 0.2rem;
  align-self: flex-start;
}
.type-tab {
  appearance: none;
  background: transparent;
  color: var(--muted-foreground);
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0 0 0.4rem 0;
  cursor: pointer;
}
.type-tab[aria-pressed="true"] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.04);
}

.ticket-summary {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0.75rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0 0 0.55rem 0;
}
.ticket-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ticket-summary dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  margin: 0;
}
.ticket-summary dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 500;
}

.ticket-submit {
  appearance: none;
  background: var(--up);
  color: var(--background);
  border: 0;
  border-radius: 0 0 0.625rem 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.95rem 1.1rem;
  min-height: 3rem;
  cursor: pointer;
  transition:
    opacity 120ms ease,
    background 120ms ease;
}
.ticket[data-side="sell"] .ticket-submit {
  background: var(--down);
}
.ticket-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ticket-status {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  min-height: 1.2rem;
  color: var(--muted-foreground);
}
.ticket-status[data-state="ok"] {
  color: var(--up);
}
.ticket-status[data-state="error"] {
  color: var(--destructive);
}

/* ---------- Bottom nav (mobile-first, also fine on desktop) ---------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: oklch(0.16 0 0 / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 0.4rem 0 calc(env(safe-area-inset-bottom, 0px) + 0.4rem);
  z-index: 100;
}
.bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.45rem;
  min-height: 3rem;
}
.bn-item[data-current="true"] {
  color: var(--foreground);
}
.bn-icon {
  font-size: 1rem;
}

/* Back-arrow link — floats in the void rather than sitting in a filled
   slot. Bigger, bolder glyph with a soft circular hover to signal it's
   clickable, plus a small nudge in the "back" direction on hover. */
a.brand-back {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-left: -0.4rem;
  background: transparent;
  color: var(--foreground);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 120ms ease,
    transform 120ms ease;
}
a.brand-back:hover {
  background: var(--secondary);
  transform: translateX(-2px);
}
a.brand-back:active {
  transform: translateX(-2px) scale(0.94);
}
a.brand-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.556 0 0 / 0.25);
}

/* ---------- User menu (avatar + dropdown) ---------- */
.user-menu {
  position: relative;
}

.avatar-btn {
  appearance: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--secondary);
  cursor: pointer;
  transition:
    box-shadow 120ms ease,
    border-color 120ms ease;
}
.avatar-btn:hover {
  border-color: var(--ring);
}
.avatar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.556 0 0 / 0.25);
}

.avatar-initials {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--foreground);
  text-transform: uppercase;
}
.avatar-initials-lg {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--secondary);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.avatar-initials-xl {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--secondary);
  border: 1px solid var(--border);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.user-pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 13rem;
  background: var(--popover);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--lift) 0;
  box-shadow:
    0 18px 36px -12px rgb(0 0 0 / 0.6),
    0 6px 12px -6px rgb(0 0 0 / 0.45);
  padding: 0.35rem;
  display: none;
}
.user-menu[data-open="true"] .user-pop {
  display: block;
}

.user-pop-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem 0.65rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.3rem;
}
.user-pop-id {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.user-pop-name {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-pop-email {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-pop-item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0 0 0.45rem 0;
  cursor: pointer;
}
.user-pop-item:hover {
  background: var(--secondary);
}
.user-pop-signout {
  color: var(--destructive);
}

/* ---------- Balance page ---------- */
.ccy-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 0 0 0.3rem 0;
  color: var(--muted-foreground);
  background: var(--secondary);
}
#groups .count-badge {
  font-variant-numeric: tabular-nums;
}

/* ---------- Profile page ---------- */
.profile-id-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile-id-text {
  min-width: 0;
}
.profile-id-name {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-id-email {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted-foreground);
}
.profile-form {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.profile-form .ticket-input {
  flex: 1 1 auto;
  min-width: 0;
}
.profile-form .ticket-submit {
  flex-shrink: 0;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0 1.1rem;
  min-height: auto;
}
.profile-signout {
  width: 100%;
  background: transparent;
  color: var(--destructive);
  border: 1px solid oklch(0.7 0.19 22 / 0.4);
}
.profile-signout:hover {
  background: oklch(0.7 0.19 22 / 0.1);
}

/* Passkey (fingerprint) controls on the Profile page. */
.profile-passkey-add {
  width: 100%;
  margin-top: 0.75rem;
  background: var(--primary);
  color: var(--primary-foreground);
}
.profile-passkey-add:disabled {
  opacity: 0.6;
  cursor: progress;
}
.passkey-empty {
  padding: 0.25rem 0 0.75rem;
}
.passkey-remove {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--destructive);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.2rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.passkey-remove:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- Multi-device player (Spotify-Connect style) ---------- */
.player {
  position: relative;
}

.player-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 12rem;
  appearance: none;
  cursor: pointer;
  height: 2.25rem;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--secondary);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  transition:
    box-shadow 120ms ease,
    border-color 120ms ease;
}
.player-chip:hover {
  border-color: var(--ring);
}
.player-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.556 0 0 / 0.25);
}
.player-ico {
  color: var(--muted-foreground);
}
.player[data-active="true"] .player-ico {
  color: var(--up);
}
/* Audio not yet unlocked on this browser: nudge the user to tap and enable it
   so announcements can play on their own. */
.player[data-audio="locked"] .player-chip {
  border-color: var(--ring);
}
.player[data-audio="locked"] .player-ico {
  color: var(--primary);
}
.player-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 15rem;
  background: var(--popover);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--lift) 0;
  box-shadow:
    0 18px 36px -12px rgb(0 0 0 / 0.6),
    0 6px 12px -6px rgb(0 0 0 / 0.45);
  padding: 0.35rem;
  display: none;
}
.player[data-open="true"] .player-pop {
  display: block;
}
.player-pop-head {
  padding: 0.45rem 0.6rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}
.player-list {
  display: flex;
  flex-direction: column;
}

.player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: var(--font-sans);
  padding: 0.5rem 0.6rem;
  border-radius: 0 0 0.45rem 0;
  cursor: pointer;
}
.player-item:hover {
  background: var(--secondary);
}
.player-item[aria-checked="true"] {
  background: var(--secondary);
}
.player-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.player-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-item-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted-foreground);
}
.player-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.player-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}
.player-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--muted-foreground);
  opacity: 0.4;
}
.player-dot.online {
  background: var(--up);
  opacity: 1;
}
.player-check {
  color: var(--up);
  font-size: 0.85rem;
}
.player-empty {
  padding: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

/* "always listen" toggle */
.player-always {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.player-always-box {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--up);
  cursor: pointer;
}
.player-always-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.player-always-title {
  font-size: 0.85rem;
  font-weight: 600;
}
.player-always-sub {
  font-size: 0.7rem;
  color: var(--muted-foreground);
}
.player[data-always="true"] .player-always-title {
  color: var(--up);
}

/* now-playing toast */
.player-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
  transform: translate(-50%, 1rem);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(90vw, 30rem);
  padding: 0.7rem 1rem;
  background: var(--popover);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--lift) 0;
  box-shadow:
    0 18px 36px -12px rgb(0 0 0 / 0.6),
    0 6px 12px -6px rgb(0 0 0 / 0.45);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}
.player-toast[data-show="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.player-toast-text {
  font-size: 0.85rem;
  line-height: 1.35;
}
.player-toast-play {
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
}

/* "New version available" prompt shown when a tab falls behind a deploy. */
.update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.45);
}
.update-banner__text {
  font-size: 0.85rem;
  line-height: 1.35;
}
.update-banner__refresh {
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  padding: 0.35rem 0.8rem;
}
.update-banner__dismiss {
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
}