/* Nova theme palette.
 *
 * The redesigned pages use these variables instead of hard-coded colours. Light
 * values are exactly the design's colours, so light mode is unchanged; html.dark
 * swaps them for a dark palette. Colours whose role changes with the property
 * (a white card turns dark while white text stays white) have one variable per
 * role: -bg for backgrounds, -line for borders and strokes, -text for text.
 * Brand reds, greens and coin colours are the same in both themes.
 */
:root {
  --nv-fff-bg: #FFFFFF;
  --nv-fff-line: #FFFFFF;
  --nv-glass-rgb: 255, 255, 255;
  --nv-0e0f1f-text: #0E0F1F;
  --nv-0e0f1f-bg: #0E0F1F;
  --nv-0e0f1f-line: #0E0F1F;
  --nv-1c1d2e-text: #1C1D2E;
  --nv-1c1d2e-bg: #1C1D2E;
  --nv-1c1d2e-line: #1C1D2E;
  --nv-b4202f: #B4202F;

  --nv-f6f6fa: #F6F6FA;
  --nv-fbfbfd: #FBFBFD;
  --nv-fbfafd: #FBFAFD;
  --nv-f8f8fc: #F8F8FC;
  --nv-f5fcf8: #F5FCF8;
  --nv-fff8f9: #FFF8F9;
  --nv-fff9e8: #FFF9E8;
  --nv-f0f0f7: #F0F0F7;
  --nv-efeff6: #EFEFF6;
  --nv-f1f1f6: #F1F1F6;
  --nv-f4f4f8: #F4F4F8;
  --nv-eeeef4: #EEEEF4;
  --nv-e6e6ef: #E6E6EF;
  --nv-e9e9f1: #E9E9F1;
  --nv-dcdce6: #DCDCE6;
  --nv-d6d6e2: #D6D6E2;
  --nv-c4c5d2: #C4C5D2;
  --nv-3a3b4f: #3A3B4F;
  --nv-9a9cb4: #9A9CB4;
  --nv-fff5f6: #FFF5F6;
  --nv-f3c4ca: #F3C4CA;
  --nv-fce9eb: #FCE9EB;
  --nv-e8f7f0: #E8F7F0;
  --nv-dff2e8: #DFF2E8;
  --nv-bfe8d3: #BFE8D3;
  --nv-bfe8d4: #BFE8D4;
  --nv-fff8e6: #FFF8E6;
  --nv-f2dfa6: #F2DFA6;
  --nv-f2e0ae: #F2E0AE;
  --nv-7a5b0c: #7A5B0C;
  --nv-6b5514: #6B5514;
  --nv-0f7a4f: #0F7A4F;
  --nv-0b7a50: #0B7A50;
}

html.dark {
  color-scheme: dark;

  --nv-fff-bg: #14151F;
  --nv-fff-line: #14151F;
  --nv-glass-rgb: 17, 18, 27;
  --nv-0e0f1f-text: #EEEFF6;
  --nv-0e0f1f-bg: #2A2B3F;
  --nv-0e0f1f-line: #4A4B63;
  --nv-1c1d2e-text: #D8D9E6;
  --nv-1c1d2e-bg: #262739;
  --nv-1c1d2e-line: #3F4056;
  --nv-b4202f: #F26D7E;

  --nv-f6f6fa: #0B0C13;
  --nv-fbfbfd: #181926;
  --nv-fbfafd: #1B1C2A;
  --nv-f8f8fc: #181926;
  --nv-f5fcf8: rgba(22, 163, 106, .08);
  --nv-fff8f9: rgba(221, 61, 79, .08);
  --nv-fff9e8: rgba(224, 178, 43, .09);
  --nv-f0f0f7: #21222F;
  --nv-efeff6: #25263A;
  --nv-f1f1f6: #1E1F2B;
  --nv-f4f4f8: #1E1F2B;
  --nv-eeeef4: #242534;
  --nv-e6e6ef: #2C2D3E;
  --nv-e9e9f1: #232433;
  --nv-dcdce6: #3C3D52;
  --nv-d6d6e2: #3C3D52;
  --nv-c4c5d2: #5B5D74;
  --nv-3a3b4f: #A7A9BE;
  --nv-9a9cb4: #777991;
  --nv-fff5f6: rgba(221, 61, 79, .13);
  --nv-f3c4ca: rgba(242, 109, 126, .45);
  --nv-fce9eb: rgba(221, 61, 79, .17);
  --nv-e8f7f0: rgba(22, 163, 106, .17);
  --nv-dff2e8: rgba(22, 163, 106, .3);
  --nv-bfe8d3: rgba(22, 163, 106, .42);
  --nv-bfe8d4: rgba(22, 163, 106, .42);
  --nv-fff8e6: rgba(224, 178, 43, .15);
  --nv-f2dfa6: rgba(224, 178, 43, .42);
  --nv-f2e0ae: rgba(224, 178, 43, .42);
  --nv-7a5b0c: #EBC462;
  --nv-6b5514: #EBC462;
  --nv-0f7a4f: #41D694;
  --nv-0b7a50: #41D694;
}

/* Sticky header height at each header breakpoint (app-shell.css / home.css): one row from 1024px,
   the nav on its own row below that. In-page anchors (#nsc-2fa, #faq, ...) stop below the header.
   !important because several cards carried a fixed inline scroll-margin-top (84-96px) sized for the
   one-row header, which let them slide under the taller two-row header below 1024px. */
:root { --nv-header-h: 68px; }
@media (max-width: 1023.98px) { :root { --nv-header-h: 112px; } }
@media (max-width: 767.98px) { :root { --nv-header-h: 122px; } }
[id] { scroll-margin-top: calc(var(--nv-header-h) + 16px) !important; }

/* Native form controls, placeholders and scrollbars follow the theme. */
html.dark input::placeholder, html.dark textarea::placeholder { color: #6C6E86 !important; }
html.dark ::-webkit-scrollbar-thumb { background: #34354A; }
html.dark img { color-scheme: light; }

/* Phones: every control a finger can hit is at least 44 x 44 px below 768px (WCAG 2.5.5); 768px and up
   keep the design's exact sizes. These are the shared pieces - the toast dismiss button, the nova.css
   components (buttons, inputs, tabs, chips) used by the coin, staff and older pages, and hooks on pages
   without a stylesheet of their own. Page stylesheets handle their own controls. */
@media (max-width: 767.98px) {
  button[aria-label="Dismiss"] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-primary, .btn-ghost, .btn-buy, .btn-sell { min-width: 44px; min-height: 44px; }
  .input, select.input { min-height: 44px; }
  .mkt-tab, .chip-tab { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .tab-btn { min-height: 44px; }
  nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .nv-tap { display: inline-flex; align-items: center; min-height: 44px; }
  /* Coin page: "View More" under the conversion tables, and the converter fields (the whole row is the field). */
  [data-view-more] { min-height: 44px; }
  div:has(> [data-convert-coin]), div:has(> [data-convert-usd]) { padding-top: 0 !important; padding-bottom: 0 !important; }
  [data-convert-coin], [data-convert-usd] { align-self: stretch; min-height: 44px; }
}
/* Coin page converter: its inputs are borderless inside a bordered row, so the row shows the focus ring. */
div:has(> [data-convert-coin]):focus-within, div:has(> [data-convert-usd]):focus-within {
  border-color: #DD3D4F !important; box-shadow: 0 0 0 4px rgba(221, 61, 79, .12); }

/* Live dots: the design's pulsing ring, drawn with transform and opacity so it
   runs on the GPU instead of repainting a box-shadow on every frame. It picks
   up any element whose inline style uses the design's novaPulse animation. */
@keyframes nvRing { 0% { transform: scale(1); opacity: .9 } 70%, 100% { transform: scale(2.8); opacity: 0 } }
[style*="novaPulse"] { animation: none !important; position: relative; }
[style*="novaPulse"]::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: rgba(22,163,106,.45); animation: nvRing 2s cubic-bezier(0,0,.2,1) infinite; will-change: transform, opacity; }