/* FoxAlgo design system.
   One palette drives the admin panel and the member terminal, so the two sites
   feel like one product. Everything is a CSS variable: a theme is a variable
   swap, and no component needs to know which theme is active.
   No web fonts and no CDN — the app has to paint fast on mobile data. */

:root {
  /* PaperDesk palette. Cyan is a bright accent, so anything filled with it
     takes dark ink — white on #00D8FF fails contrast badly. */
  --bg:        #0A0F1A;
  --bg-2:      #0E1522;
  --surface:   #141B29;
  --surface-2: #1A2235;
  --surface-3: #232D42;
  --border:    #1E2839;
  --border-2:  #2C3852;

  --text:      #FFFFFF;
  --text-2:    #8BA3CB;
  --muted:     #7184A2;

  --accent:      #00D8FF;
  --accent-2:    #62E7FF;
  --accent-ink:  #04151D;
  --accent-dim:  rgba(0,216,255,.13);
  --accent-glow: rgba(0,216,255,.32);

  --up:      #10B981;
  --up-dim:  rgba(16,185,129,.15);
  --down:    #EF4444;
  --down-dim:rgba(239,68,68,.15);
  --blue:    #5B93FF;
  --amber:   #F5B841;
  --amber-dim: rgba(245,184,65,.15);

  /* ------------------------------------------------- categorical palette
     Colour here means IDENTITY, never value: green is profit and red is loss,
     and a decorative hue competing with those makes a trading screen harder to
     read, not more modern.

     Only THREE instruments get a colour — the three on the overview. Seven was
     tried and measured: once green and red are reserved, seven hues cannot be
     told apart (closest pair 21 deltaE, and the teal for FINNIFTY sat 22 from
     the profit green, so it read as a gain). Three sit 55 apart. Everything
     else keeps the neutral label; the name is always on screen, so colour is
     reinforcement, not the only signal.

     Four is the ceiling, measured rather than guessed: the best possible fifth
     hue lands 28 deltaE from an existing one, and below about 30 two colours
     stop being nameable as different. Four sit 46 apart. c4 is the spare, used
     for exit reasons and chart series — never for an instrument. */
  --c1: #00D8FF;   --c1-dim: rgba(0,216,255,.14);    /* NIFTY     */
  --c2: #A78BFA;   --c2-dim: rgba(167,139,250,.16);  /* BANKNIFTY */
  --c3: #F5B841;   --c3-dim: rgba(245,184,65,.15);   /* SENSEX    */
  --c4: #F472B6;   --c4-dim: rgba(244,114,182,.15);  /* pink      */

  --r-sm: 9px;
  --r:    12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.34);
  --sh-2: 0 4px 16px rgba(0,0,0,.36);
  --sh-3: 0 20px 52px rgba(0,0,0,.55);
  --ring: 0 0 0 3px var(--accent-glow);

  /* Two named steps below the base scale, so uppercase labels and hints stop
     accumulating one-off pixel values. */
  --text-micro: .625rem;
  --text-tiny:  .6875rem;

  --ease: cubic-bezier(.22,.72,.28,1);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="light"] {
  --bg:        #F2F5FA;
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F1F5FA;
  --surface-3: #E4EBF4;
  --border:    #E1E8F2;
  --border-2:  #CFDAE8;

  --text:      #0A0F1A;
  --text-2:    #4A5B75;
  --muted:     #5F6F87;

  /* Neon cyan is invisible on white, so light mode uses a deepened teal-cyan
     that carries the same identity at a contrast that actually reads. Measured,
     not eyeballed: #0092B8 was 3.31 against the page background, under the 4.5
     that normal text needs. */
  --accent:      #007A99;
  --accent-2:    #00728F;
  --accent-ink:  #FFFFFF;
  --accent-dim:  rgba(0,122,153,.11);
  --accent-glow: rgba(0,122,153,.24);

  /* The P&L figure is the number this whole app exists to show. #059669 was
     3.45 against the page -- fine as a big stat, not as small text in a
     position row. */
  --up:      #047D58;
  --up-dim:  rgba(4,125,88,.13);
  --down:    #DC2626;
  --down-dim:rgba(220,38,38,.12);
  --blue:    #2F6FDD;
  --amber:   #B45309;
  --amber-dim: rgba(180,83,9,.13);

  /* The same identities, deepened — the dark values are pastels picked to glow
     on near-black; on white they would read as highlighter. */
  --c1: #007A99;   --c1-dim: rgba(0,122,153,.12);
  --c2: #7C3AED;   --c2-dim: rgba(124,58,237,.12);
  --c3: #A16207;   --c3-dim: rgba(161,98,7,.12);
  --c4: #DB2777;   --c4-dim: rgba(219,39,119,.12);

  --sh-1: 0 1px 2px rgba(10,15,26,.06);
  --sh-2: 0 4px 16px rgba(10,15,26,.09);
  --sh-3: 0 20px 50px rgba(10,15,26,.18);
}
html[data-theme="light"] body { color-scheme: light; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  letter-spacing: -.005em;
  /* A tap should not paint a grey box over a price. */
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--accent-2); }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 640; letter-spacing: -.022em; line-height: 1.22; }
h1 { font-size: 1.55rem; } h2 { font-size: 1.15rem; } h3 { font-size: .98rem; }
p { margin: 0 0 1em; }
small { font-size: .8rem; }
::selection { background: var(--accent-glow); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.up { color: var(--up); } .down { color: var(--down); }
.muted { color: var(--muted); } .dim { color: var(--text-2); }
.right { text-align: right; } .center { text-align: center; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }

/* ------------------------------------------------------- spacing & motion
   clamp(min, fluid, max): 12px on a phone rising to 32px on a desktop is
   "gap-4 md:gap-8" without the jump at one arbitrary width. */
:root {
  --gap:      clamp(12px, 2vw, 32px);
  --gap-sm:   clamp(8px, 1.4vw, 16px);
  --pad-page: clamp(16px, 4vw, 48px);
  --card-pad: clamp(14px, 2.2vw, 24px);
  --lift-card: -4px;
  --lift-btn:  -2px;
  --t-hover: 300ms;
}

/* ---------------------------------------------------------------- layout */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex: 0 0 236px; padding: 18px 12px;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; }
.logo b { font-size: 1.12rem; letter-spacing: -.03em; }
.logo .mark, .auth .brand .mark, .th-brand .mark {
  display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(145deg, #62E7FF, var(--accent) 45%, #0090C4);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.logo .mark { width: 30px; height: 30px; border-radius: 10px; font-size: 15px; flex: 0 0 30px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--r-sm); color: var(--text-2); font-size: .92rem; font-weight: 520;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.on {
  background: var(--accent-dim); color: var(--accent-2); font-weight: 620;
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav .sep {
  margin: 14px 12px 6px; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); font-weight: 700;
}
.sidebar-foot { border-top: 1px solid var(--border); padding-top: 12px; font-size: .8rem; }
.shell > .main { flex: 1; min-width: 0;
  padding: var(--pad-page) var(--pad-page) calc(var(--pad-page) + 16px); }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.topbar h1 { margin: 0; }

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--card-pad);
  margin-bottom: var(--gap);
  box-shadow: var(--sh-1);
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease),
              border-color var(--t-hover) var(--ease);
}
.card > h2, .card > h3 { margin-top: 0; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--gap-sm);
  padding: clamp(12px, 1.6vw, 16px) var(--card-pad);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), transparent);
  border-radius: var(--r) var(--r) 0 0;
  flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }

/* Mobile first: one column, and columns are ADDED as room appears. Same
   breakpoints as before (431px, 901px), now counted upwards. */
.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0,1fr); }
@media (min-width: 431px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 901px) {
  .grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--card-pad); box-shadow: var(--sh-1);
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease),
              border-color var(--t-hover) var(--ease);
}
.stat .label, .fl {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 700;
}
.stat .label { margin-bottom: 7px; display: block; }
.stat .value {
  font-size: 1.55rem; font-weight: 680; letter-spacing: -.03em;
  font-family: var(--mono); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat .sub { font-size: .77rem; color: var(--muted); margin-top: 4px; }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: var(--r-pill); font-size: .72rem; font-weight: 650;
  white-space: nowrap; background: var(--surface-3); color: var(--text-2);
  border: 1px solid transparent;
}
.badge.ok    { background: var(--up-dim);    color: var(--up);    border-color: rgba(31,209,139,.24); }
.badge.warn  { background: var(--amber-dim); color: var(--amber); border-color: rgba(255,187,84,.24); }
.badge.bad   { background: var(--down-dim);  color: var(--down);  border-color: rgba(255,82,101,.24); }
.badge.info  { background: rgba(91,147,255,.14); color: var(--blue); }
.badge.accent{ background: var(--accent-dim); color: var(--accent-2); border-color: var(--accent-glow); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.dot.live { animation: pulse 1.9s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }

/* ----------------------------------------------------------------- forms */
label { display: block; font-size: .8rem; font-weight: 640; color: var(--text-2); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 11px 13px; font-size: .95rem; font-family: inherit;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease),
                             background .15s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: var(--ring); background: var(--surface);
}
input::placeholder { color: var(--muted); }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field { margin-bottom: 15px; }
.field .hint { font-size: .77rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; }
.check input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; }
.check label { margin: 0; font-weight: 520; color: var(--text); }
.row { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.row > * { flex: 1 1 180px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; min-height: 42px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink); font-weight: 640; font-size: .9rem;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  box-shadow: var(--sh-1);
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease),
              filter var(--t-hover) var(--ease);
}
.btn:hover { filter: brightness(1.07); box-shadow: var(--sh-2); color: var(--accent-ink); }
.btn:active { transform: translateY(1px); box-shadow: var(--sh-1); transition-duration: 80ms; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.btn.ghost {
  background: var(--surface-2); color: var(--text); border-color: var(--border-2);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--surface-3); color: var(--text); border-color: var(--muted); }
.btn.danger { background: linear-gradient(180deg, #F87171, var(--down)); color: #fff; }
.btn.buy  { background: linear-gradient(180deg, #34D399, var(--up)); color: #04150e; }
.btn.sell { background: linear-gradient(180deg, #F87171, var(--down)); color: #fff; }
.btn.sm { padding: 7px 12px; min-height: 34px; font-size: .81rem; }
.btn.wide { width: 100%; }
.btn-row { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }

/* ----------------------------------------------------------------- alerts */
.alert {
  padding: 13px 15px; border-radius: var(--r-sm); margin-bottom: 16px;
  font-size: .89rem; line-height: 1.55; border: 1px solid;
  display: flex; gap: 10px; align-items: flex-start;
}
.alert.ok   { background: var(--up-dim);    border-color: rgba(31,209,139,.3); color: var(--up); }
.alert.err  { background: var(--down-dim);  border-color: rgba(255,82,101,.3); color: var(--down); }
.alert.warn { background: var(--amber-dim); border-color: rgba(255,187,84,.3); color: var(--amber); }
.alert.info { background: rgba(91,147,255,.1); border-color: rgba(91,147,255,.28); color: var(--blue); }

/* ----------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 calc(var(--card-pad) * -1) calc(var(--card-pad) * -1); }
.table-wrap::-webkit-scrollbar { display: none; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th {
  text-align: left; padding: 10px 15px; font-size: .67rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); font-weight: 700;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
td { padding: 12px 15px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

.empty { padding: 44px 22px; text-align: center; color: var(--muted); font-size: .88rem;
  line-height: 1.6; }
.empty .big { font-size: 2.1rem; margin-bottom: 10px; opacity: .45; }
.empty b { color: var(--text-2); display: block; margin-bottom: 4px; font-size: .95rem; }

/* Loading placeholders shimmer instead of sitting as dead text. */
.skel { padding: 20px; color: var(--muted); font-size: .85rem; position: relative;
  overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ------------------------------------------------------------ auth pages */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 26px 16px;
  background:
    radial-gradient(760px 380px at 50% -8%, var(--accent-dim), transparent 72%),
    radial-gradient(600px 300px at 90% 100%, rgba(91,147,255,.07), transparent 70%),
    var(--bg);
}
.auth { width: 100%; max-width: 404px; }
.auth .brand { text-align: center; margin-bottom: 24px; }
.auth .brand .mark {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 14px; font-size: 24px;
}
.auth .brand b { font-size: 1.45rem; letter-spacing: -.035em; display: block; }
.auth .brand span { color: var(--muted); font-size: .85rem; }
.auth .card { padding: clamp(20px, 4vw, 32px); box-shadow: var(--sh-3); border-radius: var(--r-lg); }
.auth-foot { text-align: center; margin-top: 18px; font-size: .83rem; color: var(--muted);
  line-height: 1.65; }

/* --------------------------------------------------------------- helpers */
.pill-tabs {
  display: flex; gap: 3px; background: var(--surface-2); padding: 4px;
  border-radius: var(--r-sm); overflow-x: auto; scrollbar-width: none;
}
.pill-tabs::-webkit-scrollbar { display: none; }
.pill-tabs button {
  flex: 1; padding: 9px 14px; min-height: 38px; border: none; background: transparent;
  color: var(--text-2); border-radius: 7px; font-weight: 640; font-size: .84rem;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pill-tabs button:hover { color: var(--text); }
.pill-tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

.spinner {
  width: 15px; height: 15px; border: 2px solid var(--border-2);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mobile-only { display: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 50;
    flex-direction: row; align-items: center; padding: 9px 12px; gap: 10px;
    border-right: none; border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(160%) blur(12px);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }
  @supports not (background: color-mix(in srgb, red 50%, blue)) {
    .sidebar { background: var(--surface); }
  }
  .logo { padding: 0; }
  .nav { flex-direction: row; overflow-x: auto; gap: 4px; flex: 1;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 12px; font-size: .85rem; white-space: nowrap; }
  .nav a.on { box-shadow: none; }
  .nav .sep, .sidebar-foot { display: none; }
  .shell > .main { padding-bottom: calc(var(--pad-page) + 68px); }
  th, td { padding: 10px 13px; }
  .stat .value { font-size: 1.3rem; }
  .mobile-only { display: block; }
  .desktop-only { display: none !important; }
  /* thumb-sized targets */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 36px; }
  input, select, textarea { padding: 12px 13px; font-size: 16px; } /* 16px stops iOS zooming */
}

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

/* ------------------------------------------------- admin, consistency pass
   The member terminal grew a visual grammar the admin side never picked up: a
   coloured spine that says which way a number is going, and a heading rule that
   makes a section read as a section. Same product, same language. */
.stat { position: relative; overflow: hidden; }
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--border-2); transition: background .2s var(--ease);
}
.stat.up::before   { background: var(--up); }
.stat.down::before { background: var(--down); }
.stat.warn::before { background: var(--amber); }
.stat.accent::before { background: var(--accent); }
.stat .value.up   { color: var(--up); }
.stat .value.down { color: var(--down); }

/* A tinted stat for the one figure that matters most on a page, matching the
   day's P&L tile on the member overview. */
.stat.up.tint   { background: linear-gradient(150deg, var(--up-dim), transparent 66%), var(--surface);
                  border-color: rgba(16,185,129,.28); }
.stat.down.tint { background: linear-gradient(150deg, var(--down-dim), transparent 66%), var(--surface);
                  border-color: rgba(239,68,68,.28); }

.card-head h2, .card-head h3 {
  display: flex; align-items: center; gap: 9px;
}
.card-head h2::before, .card-head h3::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: var(--accent); flex: 0 0 auto;
}

/* Figures in tables line up under each other, as they do in the terminal. */
td .num, th .num, .kv td, .stat .sub .num { font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------- interaction
   NEW rules only; every value an older rule already set was edited in place
   above. Hover lives behind (hover:hover): on a phone :hover sticks after a
   tap and would leave a card floating until the next tap elsewhere. */
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

@media (hover: hover) and (pointer: fine) {
  .card:hover, .stat:hover {
    transform: translateY(var(--lift-card)); box-shadow: var(--sh-3);
    border-color: var(--border-2);
  }
  .btn:hover:not(:disabled) { transform: translateY(var(--lift-btn)); box-shadow: var(--sh-3); }
  /* A sign-in card is the whole screen; floating it is noise. */
  .auth .card:hover { transform: none; }
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .card:hover, .stat:hover, .btn:hover:not(:disabled) { transform: none; }
}

/* A hidden scrollbar also hides the hint that a table scrolls sideways. On a
   phone, where wide tables do overflow, the right edge fades instead: a cut-off
   column reads as "more this way", not as a clipped layout. */
@media (max-width: 760px) {
  .table-wrap {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
}