/* ============================================================
   global.css - bundled site stylesheet
   Generated by concatenating 9 source files in cascade order.
   Order preserved exactly as previously loaded by head.html:
     base.css -> layout.css -> controls.css -> table.css -> pagination.css -> dark-mode.css -> footer.css -> components.css -> auth.css
   To modify any rule, edit the matching source file (still on
   disk in this directory) and re-bundle. Do not hand-edit
   global.css directly - changes will be overwritten on the
   next bundle.
   ============================================================ */


/* ============================================================
   base.css
   ============================================================ */
/* ============================================================
   BASE — CSS variables, body, typography, labels
   ============================================================ */

:root {
  /* Skeleton header offset (tweak if DT controls height changes) */
  --dt-header-h: 123px;

  /* Theme variables (light defaults) */
  --color-dark: #505050;
  --color-dark-background: #202020;

  --color-light: #ffffff;
  --img-dark: 0;
  --img-light: 1;

  --color-text: var(--color-dark);
  --color-border: #ffffff;

  --color-background: #ffffff;
  --color-background2: #ffffff;
  --color-image: var(--img-dark);

  /* Brand palette */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-light: #a78bfa;
  --color-accent: #f2c21a;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-muted: #6b7280;

  /* Neutral palette */
  --color-neutral-50: #f9fafb;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;

  /* Border-radius scale */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* Shadow scale */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

html {
  font-size: 18px;
}

body {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;

  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color .25s ease, color .25s ease;
}

a, h1, h2 { color: #377ba8; }
a { font-size: 1.3em; color: var(--color-text); transition: background-color var(--transition-normal), color var(--transition-normal); text-decoration: none; }
h1 { font-size: 1.2em; color: var(--color-text); text-align: left; font-weight: normal; margin: 0; }
h2 { font-size: 1.8em; color: var(--color-text); padding: 8px; margin: 0; }
h3 { color: var(--color-text); font-size: 1.1em; margin-top: 0; }
h4 { color: var(--color-text); font-size: 1.0em; margin: 0; }
p { margin: 0; }

label {
  font-size: 1rem;
  color: var(--color-text);
  margin-right: 30px;
  transition: background-color .25s ease, color .25s ease;
}

/* ============================================================
   layout.css
   ============================================================ */
/* ============================================================
   LAYOUT — Navbar, page containers, header blocks, header-split
   ============================================================ */

/* ── Navbar / Header ─────────────────────────────────────── */

.navbar-wrapper {
  position: relative;
  background-color: #000;
  height: 180px;
  overflow: visible;
}

.navbar-wrapper-inner {
  position: relative;
  height: 100%;
  overflow: visible;
}

.navbar-wrapper-actions {
  position: absolute;
  bottom: 25px;
  right: 25px;
  display: none;           /* JS adds .nav-overflowed to show this */
  align-items: center;
  gap: 10px;
  overflow: visible;
  padding-right: 12px;
}

.app-store-badges {
  position: absolute;
  bottom: 28px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 146px;
  height: 43px;
  line-height: 0;
  overflow: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.app-store-badge:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.app-store-badge:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

.app-store-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sr-only-app-trigger {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* When JS detects navbar overflow, swap visibility */
.nav-overflowed .navbar-wrapper-actions {
  display: flex;
}

.nav-overflowed .nav-right {
  display: none;
}

.navbar-header {
  background:
    radial-gradient(ellipse at 15% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(167, 139, 250, 0.1) 0%, transparent 45%),
    linear-gradient(170deg, #0d0825 0%, #111827 50%, #0f172a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  float: left;
  width: 100%;
}

.navbar-header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: stretch;
}

.navbar-header li {
  display: flex;
  align-items: stretch;
}

.navbar-header li a {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 14px clamp(6px, 1.1vw, 16px);
  text-decoration: none;
  white-space: nowrap;
  font-size: clamp(0.7rem, 0.85vw, 0.88rem);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.navbar-header li a:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.navbar-header li a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.navbar-header .active {
  background-color: rgba(99, 102, 241, 0.35);
  color: #fff;
}

.logo-top {
  margin: 15px;
  float: left;
  margin-top: 100px;
}

.logo-bottom {
  margin-top: -10px;
  float: left;
  margin-bottom: 15px;
  max-width: 80%;
}

/* ── Page containers ─────────────────────────────────────── */

.page-container { width: 100%; padding-top: 50px; }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; text-align: initial; }
.table-wrapper { margin-bottom: 0; }

.main-header { overflow: visible; }

.upper-header {
  padding-bottom: 4px;
  overflow: hidden;
  text-align: center;
  width: 100%;
  background-color: var(--color-background2);
  color: var(--color-text);
  transition: background-color .25s ease, color .25s ease;
}

.upper-block {
  float: left;
  color: var(--color-text);
  width: 20%;
  padding-left: 1%;
  padding-right: 1%;
  margin-top: 8px;
  margin-bottom: 0;
}

.marketcap-value {
  font-weight: 700;
}

.upper-header a {
  text-align: center;
  padding: 4px;
  text-decoration: none;
  font-size: 17px;
  line-height: 25px;
  border-radius: var(--radius-sm);
  width: 100%;
}

.upper-header a:hover { background-color: var(--color-neutral-200); color: var(--color-text); }

.upper-header a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.lower-header {
  padding-top: 5px;
  padding-bottom: 5px;
  overflow: hidden;
  border-bottom: 2px solid var(--color-neutral-200);
}

.category-buttons { float: right; clear: right; }

.header {
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 10px;
  height: 200px;
}

.header a {
  float: left;
  color: var(--color-text);
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: var(--radius-sm);
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover { background-color: var(--color-neutral-200); color: var(--color-text); }

.header a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.header-text {
  float: none;
  clear: none;
  text-align: left;
  padding-left: 10px;
  padding-top: 20px;
}
.header-text h1 { font-size: 2.5em; float: none; }

.header-left { margin-top: 15px; }
.header-right { padding-top: 10px; text-align: right; }

/* Force h2 to always sit below floated h1 and take full width */
.header-text h2 {
  display: block;
  width: 100%;
  padding-bottom: 8px;
}

/* Intro paragraph under the H2 - left-aligned, slightly muted for hierarchy.
   Adds keyword-density body copy that contains the H1 words ("ranked",
   "market capitalization", "assets") and silences the SEO H1-match warning. */
.header-intro {
  display: block;
  width: 100%;
  text-align: left;
  /* Sits between the H2 row and the table; full table-width, wraps naturally. */
  margin: 0 0 12px 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
  opacity: 0.75;
}

@media (max-width: 768px) {
  .header-intro {
    font-size: 0.85rem;
    padding-bottom: 6px;
  }
}


/* ── Header split: title (left) + controls/pagination (right) ── */

.header-split {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  align-items: stretch;
}

.header-split > .header-left {
  flex: 1 1 auto;
  min-width: 0;
}

.header-split > .header-right {
  max-width: 100%;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 16px;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  flex-direction: column;
}

/* Neutralize legacy float/clear rules inside the header area */
.header-split .header-text,
.header-split .header-text h1,
.header-split .pagination,
.header-split .pagination2 {
  float: none !important;
  clear: none !important;
  width: auto !important;
}

.header-split .header-text h1,
.header-split .header-text h2 {
  display: block;
  color: var(--color-text);
  white-space: normal;
  overflow-wrap: anywhere;
}

.header-split .pagination,
.header-split .pagination2 {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.header-split .pagination > *,
.header-split .pagination2 > * {
  flex: 0 0 auto;
}

.header-split .pagination-nowrap {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ── Upper-header inner layout ────────────────────────────── */

.upper-header-inner {
  position: relative;
}

.upper-categories {
  display: contents;  /* desktop: behave as before */
}


/* ── Responsive ──────────────────────────────────────────── */

@media screen and (max-width: 600px) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .app-store-badges {
    bottom: 18px;
    right: 14px;
    gap: 7px;
  }

  .app-store-badge {
    width: 112px;
    height: 34px;
  }

  .upper-header,
  .lower-header,
  .header,
  .main-header {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .upper-block,
  .category-buttons {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    text-align: left !important;
  }

  .unit-select,
  .filter-select,
  .country-select,
  .sector-select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin: 6px 0 !important;
  }

  #tablePage,
  #table-wrap,
  .dataTables_wrapper,
  #table_wrapper {
    clear: both !important;
  }

  .header-split > .header-right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    margin-top: 4px;
  }

  .header-split .unit-select,
  .header-split .filter-select,
  .header-split .country-select,
  .header-split .sector-select {
    width: 100% !important;
  }

  /* Desktop h2 padding is trimmed further on mobile where it can read as
     headroom; on mobile it read as dead space above the table. */
  .header-split .header-text h2 {
    padding-bottom: 6px;
  }

  /* The 15px top margin on .header-left compounded with the flippenings
     bottom margin — trim it on mobile. */
  .header-left {
    margin-top: 0;
  }

  /* On desktop .header-text { padding-top: 20px } gives the h1 headroom
     below the navbar+flippenings. On mobile that compounds with the
     flippenings margin-bottom and reads as dead space. Zero here + the
     2px padding-bottom on flippenings-wrap gives a tight visual break. */
  .header-text {
    padding-top: 0;
  }

}


/* ===========================================================
   App-store badge "Coming Soon" overlay
   ----------------------------------------------------------
   Used to mark the Apple App Store badge while the iOS app is
   not yet shipped. The badge is rendered as a <span> (not <a>)
   so there is no navigation target; pointer-events: none
   blocks the focus-ring affordance from suggesting clickability.
   The ribbon is a single rotated absolutely-positioned child
   whose ends are clipped by .app-store-badge { overflow: hidden }
   into the corner-banner shape.
   =========================================================== */
.app-store-badge--coming-soon {
  position: relative;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}

.app-store-badge--coming-soon img {
  opacity: 0.55;
  filter: grayscale(0.15);
}

/* Inner crop wrapper - used only by .app-store-badge--coming-soon (the Apple
   App Store badge) because that SVG's natural aspect ratio (2.992:1) is
   narrower than the .app-store-badge container's aspect (3.395:1). Without
   this wrapper, object-fit: contain left ~8.7px of transparent padding on
   each side and absolutely-positioned children (like the COMING SOON ribbon)
   clipped at the outer container edge instead of the visible badge edge.
   The wrapper takes the SVG's aspect ratio exactly, is centered by the
   flex parent, and gives the ribbon a tight overflow:hidden frame.
   The Google badge does not need this (its SVG aspect ~3.372:1 effectively
   matches the container) and skips this wrapper. */
.app-store-badge__crop {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 119.66407 / 40;
  overflow: hidden;
}

.app-store-badge__crop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.app-store-badge__ribbon {
  position: absolute;
  top: 35%;
  left: 65%;
  width: 180px;
  transform: translate(-50%, -50%) rotate(17deg);
  transform-origin: center center;
  background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #b91c1c 100%);
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: 0.65px;
  padding: 2px 0;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .app-store-badge__ribbon {
    width: 135px;
    font-size: 7px;
    padding: 1.5px 0;
    letter-spacing: 0.45px;
  }
}

/* ============================================================
   controls.css
   ============================================================ */
/* ============================================================
   CONTROLS — Selects, filters, BTC toggle
   ============================================================ */

.unit-select,
.filter-select,
.country-select,
.sector-select {
  padding: 5px 8px;
  font-size: 0.68rem;
  border: 2px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background-color: var(--color-background2);
  color: var(--color-text);
  min-width: 140px;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.unit-select:hover,
.filter-select:hover,
.country-select:hover,
.sector-select:hover {
  border-color: var(--color-neutral-400);
}

.unit-select:focus,
.filter-select:focus,
.country-select:focus,
.sector-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

#filter-select {
  background-color: var(--color-background2);
  color: var(--color-text);
}

/* Dropdown wrapper spacing (replaces inline styles) */
.country-dropdown,
.sector-dropdown,
.unit-dropdown,
.filter-dropdown {
  margin: 10px 4px;
}

.country-dropdown label,
.sector-dropdown label,
.unit-dropdown label,
.filter-dropdown label {
  margin-right: 8px;
  font-weight: bold;
  font-size: 0.68rem;
}

/* Unit logo icon (next to currency select) */
.unit-logo-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-left: 10px;
}

/* Country emoji (next to country select) */
.country-emoji {
  font-size: 20px;
  vertical-align: middle;
}

/* BTC toggle popover */
#btc-toggle-container.btc-pop {
  position: absolute;
  right: 0;
  z-index: 50;
  white-space: nowrap;
  margin-top: 10px;
  font-size: 0.95em;
}

/* ============================================================
   table.css
   ============================================================ */
/* ============================================================
   TABLE — Skeleton loader, DataTables overrides, cell helpers
   ============================================================ */

/* ── Skeleton ────────────────────────────────────────────── */

#table-wrap {
  position: relative;
}

/* ── Watermark overlay for non-pro users ────────────────── */
#table-wrap.show-watermark .dataTables_wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
  background-image: url("/static/watermark-light.svg");
  background-repeat: repeat;
  background-size: 280px 180px;
  border-radius: var(--radius-lg);
}

html.dark-mode #table-wrap.show-watermark .dataTables_wrapper::after {
  background-image: url("/static/watermark-dark.svg");
}

/* Skeleton loader — covers table body area below controls/header */
#table-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;

  padding: 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  overflow: hidden;
  border-top: 0;

  box-shadow:
    0 4px 8px -6px rgba(0, 0, 0, .2),
    0 6px 20px 0 rgba(0, 0, 0, .19);
}

#table-skeleton .sk-row {
  height: 60px;
  margin: 10px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06));
  background-size: 200% 100%;
  animation: sk-shimmer 1.1s infinite linear;
}

@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#table-skeleton.is-hidden { display: none; }

/* ── DataTables: layout & column restraints ──────────────── */

/* Hide default sort arrows */
#table_wrapper th.sorting:before,
#table_wrapper th.sorting:after,
#table_wrapper th.sorting_asc:before,
#table_wrapper th.sorting_asc:after,
#table_wrapper th.sorting_desc:before,
#table_wrapper th.sorting_desc:after {
  display: none !important;
}

/* Remove extra padding reserved for arrows */
#table_wrapper th.sorting,
#table_wrapper th.sorting_asc,
#table_wrapper th.sorting_desc {
  padding-right: 12px !important;
}

/* Never wrap these columns (th + td) */
#table_wrapper th.nowrap-col,
#table_wrapper td.nowrap-col {
  white-space: nowrap !important;
}

#table_wrapper .num-cell {
  white-space: nowrap !important;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.change-cell {
  padding-left: 10px;
  white-space: nowrap;
}

/* Wrapper panel */
.dataTables_wrapper {
  position: relative;
  padding: 15px;
  padding-bottom: 20px;
  margin-bottom: 50px;
  overflow: hidden;

  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.15);

  box-shadow: var(--shadow-lg);

  background-color: var(--color-background);
  color: var(--color-text);
  border-color: var(--color-border);
  transition: background-color .25s ease, color .25s ease;
}

#table_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 40px;
}

.dataTables_wrapper .dataTables_filter input {
  border: 2px solid var(--color-neutral-400);
  border-radius: var(--radius-sm);
  padding: 5px;
  background-color: transparent;
  color: inherit;
  margin-left: 3px;
  width: 200px;
}

/* Name column: allow wrap */
#table th:nth-child(5),
#table td:nth-child(5) {
  white-space: normal !important;
  word-break: break-word;
}

/* Ensure contents in first 4 cols don't expand width */
#table td:nth-child(-n+4) * {
  max-width: 100% !important;
}

/* Keep scroll wrappers constrained */
.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollBody,
.dataTables_scrollHeadInner {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Table header / rows ─────────────────────────────────── */

#table th {
  height: 50px;
  white-space: normal !important;
  background-color: transparent;
}

.dataTables_scrollHeadInner table.dataTable thead th {
  padding-top: 30px !important;
  line-height: 1.35;
  height: auto !important;
}

#table tr {
  height: 80px;
  white-space: normal !important;
  background-color: transparent;
}

#table thead tr {
  height: auto !important;
}

#table th, #table td {
  border: none;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  box-sizing: border-box;
  font-size: 1.15em;
}

#table thead th,
table.dataTable thead th,
.dataTables_scrollHeadInner table thead th {
  font-size: 1.2em !important;
  font-weight: 700;
}

/* ── DataTables: injected logo ───────────────────────────── */

.dt-logo {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  -webkit-filter: invert(var(--color-image));
}

.dt-logo img {
  max-width: 300px;
  height: auto;
  display: block;
}

/* Give the filter/length breathing room so the logo doesn't overlap */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  margin-top: 1px;
}

/* ── Table control text-size reset ───────────────────────── */
/* Override global a { font-size: 1.3em } for DataTables controls */

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
  font-size: 0.78rem;
  font-weight: 400;
}

.dataTables_wrapper .dataTables_length select {
  font-size: 0.78rem;
  padding: 3px 6px;
}

.dataTables_wrapper .dataTables_filter input {
  font-size: 0.78rem;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 6px;
  float: right;
}

.dataTables_wrapper .dataTables_paginate a,
.dataTables_wrapper .dataTables_paginate span a {
  font-size: 0.78rem !important;
  padding: 4px 9px;
}

.dataTables_wrapper .dataTables_info {
  padding-top: 10px;
  float: left;
}

/* Ensure bottom controls stay inside the wrapper */
.dataTables_wrapper::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Screenshot camera button ────────────────────────────── */

.screenshot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-500, #9ca3af);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.screenshot-btn:hover {
  color: var(--color-primary, #6366f1);
  border-color: var(--color-primary, #6366f1);
  background: rgba(99, 102, 241, 0.06);
}

.screenshot-btn:active {
  transform: scale(0.94);
}

.screenshot-btn--busy {
  pointer-events: none;
  opacity: 0.5;
  position: relative;
}

.screenshot-btn--busy i {
  visibility: hidden;
}

.screenshot-btn--busy::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(99, 102, 241, 0.25);
  border-top-color: var(--color-primary, #6366f1);
  border-radius: 50%;
  animation: screenshotSpin 0.6s linear infinite;
}

@keyframes screenshotSpin {
  to { transform: rotate(360deg); }
}

/* Dark mode */
html.dark-mode .screenshot-btn {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.45);
}

html.dark-mode .screenshot-btn:hover {
  color: var(--color-primary-light, #a78bfa);
  border-color: var(--color-primary-light, #a78bfa);
  background: rgba(167, 139, 250, 0.1);
}

/* ── Cell renderer helpers ───────────────────────────────── */

.negative { color: red !important; text-align: center; }
.positive { color: green !important; text-align: center; }

.star { color: var(--color-neutral-400); }
.star:hover { color: var(--color-warning); cursor: pointer; }
.star, .star p { margin: 0 !important; padding: 0 !important; }
.star { display: flex; justify-content: center; align-items: center; }
.HoverClass1:hover { color: var(--color-warning); }

/* Blur-up image placeholder */
.img-ph {
  display: inline-block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06));
  background-size: 200% 100%;
  animation: sk-shimmer 1.1s infinite linear;
}
.img-loaded { animation: none !important; background: transparent !important; }

.img-fade {
  opacity: 0;
  transition: opacity .18s ease;
}
.img-fade.is-ready { opacity: 1; }

/* Country cell */
.country-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.country-cell span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
  #table_wrapper { margin: 0 !important; }
  .dataTables_wrapper { padding: 8px !important; }

  table.dataTable,
  .dataTables_scrollHeadInner table,
  .dataTables_scrollBody table {
    table-layout: auto !important;
  }
}

@media screen and (max-width: 600px) {
  #table thead th,
  #table tbody td {
    padding: 4px 4px !important;
  }
}

/* ============================================================
   pagination.css
   ============================================================ */
/* ============================================================
   PAGINATION
   ============================================================ */

.pagination, .pagination2 {
  float: none;
  clear: none;
  margin: 10px;
}

.pagination a, .pagination2 a {
  text-decoration: none;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  border-radius: var(--radius-sm);
  background-color: var(--color-background2);
  color: var(--color-text);
}

.pagination a.active,
.pagination2 a.active {
  background-color: var(--color-primary);
  color: #fff;
}

.pagination a:hover:not(.active),
.pagination2 a:hover:not(.active) {
  background-color: var(--color-neutral-200);
}

.pagination a:focus-visible,
.pagination2 a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Fake paging (free mode) — uses DataTables native classes ── */

.fake-paging {
  text-align: right;
  clear: both;
  padding: 12px 0;
  position: relative;
  z-index: 3;
  background: var(--color-background, #fff);
}

html.dark-mode .fake-paging {
  background: var(--color-background, #1a1a2e);
}

.fake-paging .fake-page-locked {
  cursor: pointer;
}

.fake-paging .fake-page-locked:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

/* ============================================================
   dark-mode.css
   ============================================================ */
/* ============================================================
   DARK MODE — Theme overrides and toggle switch
   ============================================================ */

.dark-mode {
  --color-text: var(--color-light);
  --color-background: var(--color-dark-background);
  --color-background2: var(--color-dark-background);
  --color-image: var(--img-light);
}

/* Core page backgrounds — !important beats Bootstrap body{bg:#fff} and
   DataTables stripe rules so every visible surface goes dark. */
html.dark-mode,
html.dark-mode body {
  background-color: #202020 !important;
  color: #e0e0e0 !important;
}

/* Outer structural containers — transparent so the body colour
   shows through and there's no lighter band on left/right.       */
html.dark-mode .page-container,
html.dark-mode #tablePage,
html.dark-mode #table-wrap {
  background-color: transparent !important;
  color: #e0e0e0 !important;
}

/* The DataTables card itself keeps a slightly lighter surface */
html.dark-mode .dataTables_wrapper {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

/* DataTables row striping — DataTables CSS sets odd/even row colours;
   override them so rows are transparent over the dark wrapper. */
html.dark-mode table.dataTable tbody tr,
html.dark-mode table.dataTable tbody tr.odd,
html.dark-mode table.dataTable tbody tr.even,
html.dark-mode table.dataTable.stripe tbody tr.odd,
html.dark-mode table.dataTable.display tbody tr.odd,
html.dark-mode table.dataTable.hover tbody tr:hover,
html.dark-mode table.dataTable.display tbody tr:hover {
  background-color: transparent !important;
}

/* Table header */
html.dark-mode table.dataTable thead th,
html.dark-mode table.dataTable thead td {
  background-color: transparent !important;
  color: #e0e0e0 !important;
  border-bottom-color: rgba(255,255,255,0.15) !important;
}

/* DataTables controls (search, length, pagination) */
html.dark-mode .dataTables_filter input,
html.dark-mode .dataTables_length select {
  background-color: #333 !important;
  color: #e0e0e0 !important;
  border-color: rgba(255,255,255,0.2) !important;
}

html.dark-mode .dataTables_info,
html.dark-mode .dataTables_filter label,
html.dark-mode .dataTables_length label {
  color: #bbb !important;
}

/* Upper header bar */
html.dark-mode .upper-header {
  background-color: #202020 !important;
  color: #e0e0e0 !important;
}

/* Invert logo assets in dark mode */
.logo-table,
.page-container-left,
.page-container-right {
  -webkit-filter: invert(var(--color-image));
}

.logo-table { opacity: .8; }

/* Invert dark commodity icons in dark mode — scoped to /commodities/ so it
   doesn't catch the sparkline files in /30dayCharts/CL=F.png which also
   match "cl=f" case-insensitively. */
html.dark-mode img[src*="commodities/cl=f" i] {
  filter: invert(1);
}

/* Skeleton loader */
html.dark-mode #table-skeleton {
  background: rgba(32, 32, 32, 0.9) !important;
}
html.dark-mode #table-skeleton .sk-row {
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04));
  background-size: 200% 100%;
}

/* Upper header links */
html.dark-mode .upper-header a:hover {
  background-color: #333 !important;
  color: #e0e0e0 !important;
}
html.dark-mode .upper-block {
  color: #e0e0e0 !important;
}
html.dark-mode .header a:hover {
  background-color: #333 !important;
  color: #e0e0e0 !important;
}

/* Footer — already dark by default with liquid glass redesign,
   just darken slightly for dark mode consistency */
html.dark-mode .webintern-footer-inner {
  background:
    radial-gradient(ellipse at 15% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    linear-gradient(170deg, #0a0618 0%, #0d1117 50%, #0a0f1a 100%) !important;
}
html.dark-mode .tt-copy2 {
  background: #000 !important;
}

/* Select dropdowns */
html.dark-mode .unit-select,
html.dark-mode .filter-select,
html.dark-mode .country-select,
html.dark-mode .sector-select {
  background-color: #333 !important;
  color: #e0e0e0 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .unit-select:hover,
html.dark-mode .filter-select:hover,
html.dark-mode .country-select:hover,
html.dark-mode .sector-select:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

html.dark-mode .unit-select:focus,
html.dark-mode .filter-select:focus,
html.dark-mode .country-select:focus,
html.dark-mode .sector-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

/* Pagination dark hover */
html.dark-mode .pagination a:hover:not(.active),
html.dark-mode .pagination2 a:hover:not(.active) {
  background-color: #444 !important;
  color: #e0e0e0 !important;
}

/* Lower header border */
html.dark-mode .lower-header {
  border-bottom-color: rgba(255,255,255,0.15) !important;
}

/* DataTables wrapper border */
html.dark-mode .dataTables_wrapper {
  border-color: rgba(255,255,255,0.12) !important;
}

/* Asset page dark mode overrides */
html.dark-mode .asset-wrap {
  --bg: #0b1220; --card: #0f172a; --border: rgba(148, 163, 184, .18);
  --text: rgba(226, 232, 240, .92); --muted: rgba(226, 232, 240, .62); --grid: rgba(226, 232, 240, .12);
  --accent: #60a5fa; --accent2: #a78bfa; --shadow: 0 10px 30px rgba(0,0,0,.45);
  --up: #22c55e; --down: #ef4444;
}

/* ── Flippenings bar dark mode ─────────────────────────────────── */
html.dark-mode .flip-label {
  color: rgba(255, 255, 255, 0.92) !important;
}
html.dark-mode .flip-mcap {
  color: rgba(255, 255, 255, 0.6) !important;
}
html.dark-mode .flip-pct {
  color: #e0e0e0 !important;
}
html.dark-mode .flip-bar {
  background: rgba(255, 255, 255, 0.12) !important;
}
html.dark-mode .flippenings-wrap {
  /* Match upper-header (#202020) so there's no visible seam between the
     totals row and the flippenings row. */
  background: #202020 !important;
}

/* ── Legacy switch elements — kept for any residual references ── */
.switch, .darkMode-slider, .darkMode-text { display: none !important; }

/* ── Dark mode icon toggle button ───────────────────────────
   Light mode  → glass circle, moon icon  (= OFF / inactive)
   Dark mode   → solid amber fill, sun icon (= ON  / pressed)
   The filled amber button is an unambiguous "this is on" signal.
   ──────────────────────────────────────────────────────────── */

.dark-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sized to match .nav-support-btn (the ? button) so the two icon
     buttons read as a matched pair next to the login/avatar. */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Light mode: subtle glass — looks "off" / inactive */
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
              color 0.2s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dark-mode-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
}

.dark-mode-btn:active {
  transform: scale(0.92);
}

.dark-mode-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Icon sizing — scaled down to match the new 28px button.
   Same ~55% glyph-to-button ratio the ? icon gets. */
.dm-icon {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* Light mode: show moon, hide sun */
.dm-icon-moon { display: block; }
.dm-icon-sun  { display: none;  }

/* Dark mode: show sun, hide moon */
html.dark-mode .dm-icon-moon { display: none;  }
html.dark-mode .dm-icon-sun  { display: block; }

/* Dark mode: solid amber fill = clearly "pressed / on"
   Looks like a lit button — no ambiguity about the current state. */
html.dark-mode .dark-mode-btn {
  background: #fbbf24;
  border-color: #f59e0b;
  color: #1c1007;                   /* dark icon against amber */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
              inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

html.dark-mode .dark-mode-btn:hover {
  background: #fcd34d;
  border-color: #fbbf24;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
}

/* ============================================================
   footer.css
   ============================================================ */
/* ============================================================
   FOOTER
   ============================================================ */

.webintern-footer {
  width: 100%;
  /* Scales smoothly: ~32px on phones → ~72px on wide desktops.
     Was a hard-coded 120px which was disproportionate on mobile. */
  margin-top: clamp(32px, 5vw, 72px);
  font-family: "Nunito", system-ui, sans-serif;
  float: none;
  clear: both;
}

/* ── Main footer area ────────────────────────────────────── */

.webintern-footer .webintern-footer-inner {
  background:
    radial-gradient(ellipse at 15% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(167, 139, 250, 0.1) 0%, transparent 45%),
    linear-gradient(170deg, #0d0825 0%, #111827 50%, #0f172a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 50px 0 40px;
}

/* Match Bootstrap col-lg-10 col-lg-offset-1 width */
.webintern-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.6fr;
  gap: 40px;
  width: 83.333%;
  margin: 0 auto;
}

/* ── Reset globals inside footer ─────────────────────────── */

.webintern-footer a {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 150ms ease;
}

.webintern-footer a:hover {
  color: var(--color-primary-light, #a78bfa);
}

.webintern-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.webintern-footer li {
  list-style: none;
  margin-bottom: 10px;
}

.webintern-footer p {
  margin: 0;
}

.webintern-footer h6 {
  margin: 0;
}

/* ── Brand column ────────────────────────────────────────── */

.webintern-footer .footer-brand a {
  display: block;
  margin-bottom: 14px;
  font-size: 0;
}

.webintern-footer .footer-brand .logo-bottom {
  display: block;
  max-width: 200px;
  height: auto;
}

.webintern-footer .footer-blurb {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.6;
  clear: both;
}

/* ── Center columns (Partners + Quick Links) ─────────────── */

.webintern-footer .footer-col-center {
  text-align: center;
}

/* ── Column headings ─────────────────────────────────────── */

.webintern-footer .footer-heading {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(99, 102, 241, 0.4);
  display: inline-block;
}

/* ── Link lists ──────────────────────────────────────────── */

.webintern-footer .footer-links a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.78rem;
  font-weight: 400;
}

.webintern-footer .footer-links a:hover {
  color: var(--color-primary-light, #a78bfa);
}

/* ── Two-column Quick Links grid ─────────────────────────── */

.webintern-footer .footer-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 8px;
}

/* ── Newsletter column ───────────────────────────────────── */

.webintern-footer .footer-newsletter-text {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.8;
  margin: 0;
}

.webintern-footer .footer-newsletter-text .subscribe-button {
  display: inline-block;
  padding: 10px 26px;
  font-size: 0.68rem;
  line-height: 1.3;
  color: #fff;
  border-radius: 6px;
  min-height: 0;
  margin: 16px 0 8px 0;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── Social icons ────────────────────────────────────────── */

.webintern-footer .footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  clear: both;
  justify-content: center;
}

.webintern-footer .footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 150ms ease;
}

.webintern-footer .footer-socials a:hover {
  color: #fff;
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* ── Disclaimer ──────────────────────────────────────────── */

.webintern-footer .footer-disclaimer {
  background:
    linear-gradient(170deg, #0d0825 0%, #111827 50%, #0f172a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 0;
}

.webintern-footer .footer-disclaimer-inner {
  width: 83.333%;
  margin: 0 auto;
}

.webintern-footer .footer-disclaimer p {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.58rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.webintern-footer .footer-disclaimer p strong {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
}

.webintern-footer .footer-privacy-link {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: color 0.15s;
}
.webintern-footer .footer-privacy-link:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* ── Copyright — full width, left/right ──────────────────── */

.webintern-footer .footer-copyright {
  background: #000;
  padding: 12px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.webintern-footer .footer-copyright span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
  font-weight: 400;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .webintern-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    width: 90%;
  }

  .webintern-footer .footer-disclaimer-inner {
    width: 90%;
  }
}

@media (max-width: 600px) {
  .webintern-footer .webintern-footer-inner {
    padding: 35px 0 30px;
  }

  .webintern-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    width: 90%;
    text-align: center;
  }

  .webintern-footer .footer-disclaimer-inner {
    width: 90%;
  }

  .webintern-footer .footer-heading {
    border-bottom: none;
    padding-bottom: 0;
  }

  .webintern-footer .footer-brand .logo-bottom {
    margin: 0 auto 14px;
  }

  .webintern-footer .footer-socials {
    justify-content: center;
  }

  .webintern-footer .footer-copyright {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 12px 20px;
  }
}


/* ===========================================================
   App store badges in the footer.
   The header version of .app-store-badges uses position:absolute
   (pinned bottom-right of the navbar). In the footer we want them
   in-flow, centered under the .footer-socials row, sharing the
   same .app-store-badge width/height from layout.css so any swap
   of the badge artwork updates both placements at once.
   =========================================================== */
.webintern-footer .app-store-badges {
  position: static;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 36px 0 0;
}

.webintern-footer .app-store-badge {
  /* width/height inherited from layout.css (.app-store-badge: 146x43) */
  border-radius: 6px;
}

@media (max-width: 768px) {
  .webintern-footer .app-store-badges {
    gap: 7px;
  }
}

/* ============================================================
   components.css
   ============================================================ */
/* ============================================================
   COMPONENTS — Subscribe button, navbar, pro badge, misc
   ============================================================ */

/* ── Subscribe button ────────────────────────────────────── */

.subscribe-button {
  float: right;
  appearance: none;
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  border: none;
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  min-height: 0;
  min-width: 0;
  outline: none;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-slow) cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  will-change: transform;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  letter-spacing: 0.01em;
}

.subscribe-button:disabled { pointer-events: none; opacity: 0.4; }

.subscribe-button:hover {
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.subscribe-button:active {
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  transform: translateY(0);
}

.subscribe-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 8px 24px rgba(99, 102, 241, 0.3);
}

/* ── Navbar ──────────────────────────────────────────────── */

.navbar {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.nav-left {
  display: flex;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}

.nav-left .nav-home-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-left .nav-home-icon i,
.nav-left .nav-home-icon span {
  font-size: clamp(0.7rem, 0.85vw, 0.88rem);
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-right: 12px;
}

/* ── Pro badge ───────────────────────────────────────────── */

.pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), #7c3aed);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
  line-height: 1;
}

/* When badge sits next to logo in the top bar */
.navbar-wrapper-inner > .pro-badge {
  float: left;
  margin-top: 132px;
  margin-left: -6px;
}

.pro-badge--plus {
  background: linear-gradient(135deg, #f472b6, #a78bfa);
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.4);
}

/* ── Avatar dropdown ─────────────────────────────────────── */

.nav-avatar-wrap {
  position: relative;
}

.nav-avatar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--color-background);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
}

.nav-avatar-dropdown.open {
  display: flex;
}

.nav-avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-neutral-600);
  text-decoration: none;
  transition: all 0.12s ease;
}

.nav-avatar-dropdown-item:hover {
  background: var(--color-neutral-50);
  color: var(--color-text);
}

.nav-avatar-dropdown-item i {
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
}

.nav-avatar-dropdown-item--danger {
  color: var(--color-danger);
}

.nav-avatar-dropdown-item--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-danger);
}

/* ── Misc ────────────────────────────────────────────────── */

a.buy-btn:hover {
  opacity: 0.85;
}

/* ============================================================
   auth.css
   ============================================================ */
/* ============================================================
   AUTH — Liquid Glass redesign
   Modal, forms, account panels, auth nav links
   ============================================================ */

/* ── Auth nav links (header buttons) ────────────────────── */

.auth-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 18px;
}

.auth-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.75rem;
  color: #111827;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(17, 24, 39, 0.08);
  transition: all 0.18s ease;
  backdrop-filter: blur(12px);
}

.auth-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.auth-link-primary,
.auth-link-primary:visited,
.auth-link-primary:active {
  color: white;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border: none;
}

.auth-link-primary:hover {
  color: white;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

/* ── Support ? button ──────────────────────────────────── */

.nav-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.18s ease;
  flex-shrink: 0;
  line-height: 1;
  cursor: pointer;
  font-family: "Nunito", system-ui, sans-serif;
}
.nav-support-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.35);
  color: white;
  transform: scale(1.08);
}
.nav-support-btn:visited {
  color: rgba(255, 255, 255, 0.65);
}
.nav-support-btn:hover:visited {
  color: white;
}

/* ── Nav avatar (replaces Account button when logged in) ─── */

.nav-avatar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bumped from 34 → 40 so the profile picture reads as the primary
     identity element and balances the ? + dark-mode icon pair to its left. */
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.nav-avatar-link:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
  transform: scale(1.05);
}

.nav-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* ── Overlay & backdrop ──────────────────────────────────── */

.auth-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
  overflow-y: auto;
  padding: 24px 16px 40px;
  align-items: center;
  justify-content: center;
}

.auth-overlay.open {
  display: flex;
}

.auth-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 2, 20, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* ── Modal shell — liquid glass ──────────────────────────── */

.auth-modal {
  position: relative;
  z-index: 2;
  width: min(1120px, 96vw);
  max-height: 92vh;
  margin: 0;
  display: grid;
  grid-template-columns: 400px 1fr;
  min-height: 640px;
  overflow: hidden;
  border-radius: 32px;
  background: rgba(14, 8, 40, 0.82);
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 80px 160px rgba(0, 0, 0, 0.6),
    0 32px 64px rgba(0, 0, 0, 0.4),
    0 0 120px rgba(99, 102, 241, 0.12);
}

/* ── Left panel — vivid gradient orb background ─────────── */

.auth-modal-left {
  position: relative;
  padding: 48px 40px;
  color: white;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 10% 15%, rgba(167, 139, 250, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(79, 70, 229, 0.65) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 5%, rgba(244, 114, 182, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 95%, rgba(34, 211, 238, 0.2) 0%, transparent 45%),
    linear-gradient(155deg, #0d0825 0%, #1a0f3c 45%, #0f172a 100%);
}

/* Subtle noise/grain over the gradient */
.auth-modal-left::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.3;
}

.auth-left-copy {
  display: none;
  position: relative;
  z-index: 1;
  height: 100%;
}

.auth-left-copy.active {
  display: flex;
  flex-direction: column;
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  width: fit-content;
}

.auth-hero-title {
  margin: 0 0 12px;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: white;
}

.auth-hero-copy {
  margin: 0 0 22px;
  line-height: 1.6;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Glass feature list */
.auth-feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.auth-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
}

/* Two-line feature item: bold lead + muted trailing clause. Used by
   the Buy Bitcoin modal so each benefit reads as a headline + reason.
   When the inner wrapper is present, switch the row to top-align so
   the check circle sits next to the first line rather than mid-height. */
.auth-feature-item:has(.auth-feature-text) {
  align-items: flex-start;
}
.auth-feature-item:has(.auth-feature-text)::before {
  margin-top: 2px;
}
.auth-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;   /* let long sub lines wrap instead of overflowing */
}
.auth-feature-text strong {
  font-weight: 700;
  color: #ffffff;
}
.auth-feature-sub {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.4;
}

.auth-feature-item::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.9), rgba(99, 102, 241, 0.9));
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Prominent price display */
.auth-price-showcase {
  margin-top: auto;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.auth-price-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

.auth-price-number {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.auth-price-currency {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.auth-price-amount {
  font-size: 2.8rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  letter-spacing: -0.03em;
}

.auth-price-period {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
  align-self: center;
}

.auth-price-note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Plan comparison table in left panel (API tab) */
.auth-plan-summary-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 16px 18px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.auth-plan-row:last-child {
  border-bottom: none;
}

.auth-plan-name {
  font-weight: 700;
  color: #fff;
}

.auth-plan-limit {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}

/* ── Right panel ─────────────────────────────────────────── */

.auth-modal-right {
  position: relative;
  padding: 40px 44px 36px;
  /* Extra right padding keeps tabs clear of the close button */
  padding-right: 68px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  overflow-y: auto;
  max-height: 90vh;
}

.auth-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;          /* above both panels — fixes click-through bug */
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.auth-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ── Tabs ────────────────────────────────────────────────── */

.auth-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 30px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  padding: 9px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.auth-tab.active {
  background: rgba(255, 255, 255, 0.14);
  color: white;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── Panels ──────────────────────────────────────────────── */

.auth-panel {
  display: none;
}

.auth-panel.active {
  display: block;
}

.auth-panel h3,
.auth-modal-heading {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  font-size: 0.82rem;
}

/* Compliance disclaimer shown under the register form. Sits above the
   submit button so it's read before the user clicks. */
.auth-marketing-notice {
  margin: 2px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  line-height: 1.5;
}

.auth-marketing-notice strong {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.auth-marketing-notice a {
  color: rgba(167, 139, 250, 0.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-marketing-notice a:hover {
  color: rgba(196, 181, 253, 1);
}

/* ── Forms ───────────────────────────────────────────────── */

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-form + .auth-form {
  margin-top: 10px;
}

.auth-form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: white;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  backdrop-filter: blur(10px);
}

.auth-form input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.auth-form input:focus {
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.auth-submit {
  margin-top: 4px;
  padding: 12px 18px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  color: white;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow:
    0 10px 30px rgba(99, 102, 241, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.18s ease;
  width: 100%;
  letter-spacing: 0.01em;
}

.auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px rgba(99, 102, 241, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.auth-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.auth-submit-danger {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  box-shadow:
    0 10px 30px rgba(225, 29, 72, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.auth-submit-danger:hover:not(:disabled) {
  box-shadow: 0 14px 36px rgba(225, 29, 72, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.auth-submit-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

.auth-submit-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
  box-shadow: none;
}

.auth-inline-link {
  border: none;
  background: transparent;
  padding: 0;
  color: rgba(167, 139, 250, 0.9);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}

.auth-inline-link:hover {
  color: #a78bfa;
}

/* ── Account mini-card (glass) ───────────────────────────── */

.account-mini-card {
  display: grid;
  gap: 0;
  margin-bottom: 20px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
}

.account-mini-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.account-mini-row:last-child {
  border-bottom: none;
}

.account-mini-row span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  font-weight: 500;
  flex-shrink: 0;
}

.account-mini-row strong {
  color: white;
  font-size: 0.78rem;
  text-align: right;
  word-break: break-all;
}

/* ── Status pills ────────────────────────────────────────── */

.account-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-status-pill.active {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.25);
}

.account-status-pill.inactive,
.account-status-pill.canceled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Account action buttons ──────────────────────────────── */

/* ── Shared panel footer (logout + delete) ──────────────── */

.auth-panel-footer {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-panel-footer.visible {
  display: flex;
}

.auth-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  font-family: "Nunito", system-ui, sans-serif;
}

.auth-footer-btn--logout {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
}

.auth-footer-btn--logout:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.auth-footer-btn--delete {
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.2);
  color: rgba(251, 113, 133, 0.8);
  appearance: none;
  -webkit-appearance: none;
}

.auth-footer-btn--delete:hover {
  background: rgba(225, 29, 72, 0.15);
  color: #fb7185;
}

.auth-account-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.auth-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.auth-action-btn-logout {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
}

.auth-action-btn-logout:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.auth-action-btn-delete {
  border: 1px solid rgba(225, 29, 72, 0.25);
  background: rgba(225, 29, 72, 0.1);
  color: rgba(251, 113, 133, 0.9);
}

.auth-action-btn-delete:hover {
  background: rgba(225, 29, 72, 0.18);
  color: #fb7185;
}

.auth-action-btn-delete-btn {
  appearance: none;
  -webkit-appearance: none;
}

/* ── Pro/Pro Plus plan comparison cards ───────────────────── */
/* (shown in right panel when not subscribed to either) */

.auth-plan-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.auth-plan-option {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.18s ease;
}

.auth-plan-option:hover {
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(167, 139, 250, 0.08);
}

.auth-plan-option.selected {
  border-color: rgba(167, 139, 250, 0.65);
  background: rgba(167, 139, 250, 0.1);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.1);
}

.auth-plan-option-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
}

.auth-plan-option.selected .auth-plan-option-badge {
  color: #a78bfa;
}

.auth-plan-option-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
}

.auth-plan-option-currency {
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
}

.auth-plan-option-amount {
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  letter-spacing: -0.02em;
}

.auth-plan-option-period {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 2px;
  margin-bottom: 2px;
  align-self: center;
}

.auth-plan-option-features {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-plan-option-feature {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-plan-option-feature::before {
  content: "✓";
  font-size: 0.95rem;
  color: #a78bfa;
  font-weight: 800;
  flex-shrink: 0;
}

.auth-plan-best-value {
  position: absolute;
  top: -1px;
  right: 14px;
  padding: 3px 10px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(135deg, #f472b6, #a78bfa);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: white;
}

/* ── API plan cards ──────────────────────────────────────── */

.api-plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.api-plan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 0.78rem;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.api-plan-card:hover {
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(167, 139, 250, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.api-plan-card--selected,
.api-plan-card--current {
  border-color: rgba(167, 139, 250, 0.6);
  background: rgba(167, 139, 250, 0.12);
  color: white;
}

.api-plan-card--current {
  cursor: default;
  opacity: 0.75;
}

.api-plan-card--enterprise {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
}

.api-plan-card--enterprise:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
}

.api-plan-card-name {
  font-weight: 700;
}

.api-plan-card-limit {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
}

.api-plan-card--selected .api-plan-card-limit,
.api-plan-card--current .api-plan-card-limit {
  color: rgba(167, 139, 250, 0.8);
}

.api-plan-card-form {
  display: contents;
}

.api-plan-switcher {
  margin-bottom: 14px;
}

.api-plan-switcher-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.api-plan-picker-intro {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

/* ── Usage meter ─────────────────────────────────────────── */

.api-usage-block {
  margin-bottom: 16px;
}

.api-usage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}

.api-usage-reset {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
}

.api-usage-bar-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.api-usage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a78bfa);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.api-usage-bar-fill--warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.api-usage-bar-fill--danger  { background: linear-gradient(90deg, #ef4444, #f87171); }

/* ── API key display ─────────────────────────────────────── */

.api-key-display {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 0.72rem;
  word-break: break-all;
  color: rgba(255, 255, 255, 0.8);
}

.api-key-text {
  text-decoration: underline dotted rgba(255, 255, 255, 0.25);
  cursor: copy;
  transition: color 0.12s;
}

.api-key-text:hover { color: white; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 780px) {
  .auth-modal {
    grid-template-columns: 1fr;
    border-radius: 24px;
    min-height: unset;
  }

  .auth-modal-left {
    display: none;
  }

  .auth-modal-right {
    padding: 32px 26px 28px;
    max-height: unset;
    border-left: none;
  }

  .auth-plan-picker-grid {
    grid-template-columns: 1fr;
  }

  .api-plan-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .auth-tabs {
    flex-wrap: wrap;
  }

  .auth-tab {
    flex: unset;
    font-size: 1rem;
  }

  .api-plan-cards {
    grid-template-columns: 1fr;
  }

  .auth-plan-picker-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Left-panel plan comparison cards ───────────────────── */

.auth-left-plan-card {
  position: relative;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 14px;
}

.auth-left-plan-card--plus {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.25);
}

.auth-left-plan-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  padding: 3px 10px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(135deg, #f472b6, #a78bfa);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: white;
}

.auth-left-plan-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.auth-left-plan-name {
  font-weight: 800;
  font-size: 0.88rem;
  color: white;
}

.auth-left-plan-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Compact price display for left panel cards */
.auth-price-number {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.auth-price-currency {
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.auth-price-amount {
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  letter-spacing: -0.03em;
}

.auth-price-decimal {
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  align-self: flex-start;
  margin-top: 4px;
}

.auth-price-period {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 3px;
  margin-bottom: 3px;
  align-self: flex-end;
}

/* ── Right-panel upgrade divider ─────────────────────────── */

.auth-upgrade-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.auth-upgrade-divider::before,
.auth-upgrade-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Compact plan option (right panel, upgrade context) */
.auth-plan-option--compact {
  margin-bottom: 0;
  padding: 14px 16px;
}

.auth-plan-option--compact .auth-plan-option-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}

/* ── Billing interval toggle ────────────────────────────────── */

.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 10px 0;
}

.billing-toggle-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: color 0.18s ease;
  user-select: none;
}

.billing-toggle-label--active {
  color: #fff;
}

.billing-toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  padding: 0;
  transition: all 0.22s ease;
}

.billing-toggle-switch:hover {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.12);
}

.billing-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.22s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.billing-toggle--annual .billing-toggle-switch {
  background: rgba(167, 139, 250, 0.25);
  border-color: rgba(167, 139, 250, 0.6);
}

.billing-toggle--annual .billing-toggle-knob {
  left: 27px;
  background: #a78bfa;
  box-shadow: 0 1px 6px rgba(167, 139, 250, 0.4);
}

.billing-toggle-save {
  font-size: 0.88rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  opacity: 0.5;
  transition: opacity 0.18s ease;
}

.billing-toggle--annual .billing-toggle-save {
  opacity: 1;
}

/* ── Auth toast / inline message ───────────────────────────── */

.auth-toast {
  display: none;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 16px;
  animation: authToastIn 0.25s ease-out;
}

.auth-toast.show {
  display: block;
}

.auth-toast--info {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

.auth-toast--error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

@keyframes authToastIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Loading spinner for Stripe buttons ─────────────────────── */

.auth-submit--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.auth-submit--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: white;
  border-radius: 50%;
  animation: authSpinnerRotate 0.6s linear infinite;
}

@keyframes authSpinnerRotate {
  to { transform: rotate(360deg); }
}

/* ── Feature comparison tables ─────────────────────────────── */

.auth-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}

.auth-compare-table thead th {
  padding: 10px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.auth-compare-table thead th.auth-compare-feature-col {
  text-align: left;
  padding-left: 16px;
}

.auth-compare-table thead th.auth-compare-highlight {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.08);
}

.auth-compare-table tbody td {
  padding: 8px 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-compare-table tbody td:first-child {
  text-align: left;
  padding-left: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.auth-compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* Highlight paid column background */
.auth-compare-table thead th.auth-compare-highlight,
.auth-compare-table tbody td:last-child {
  background: rgba(167, 139, 250, 0.05);
}

.auth-compare-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(16, 185, 129, 0.25));
  color: #6ee7b7;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

.auth-compare-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

.auth-compare-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.auth-compare-text small {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
}

.auth-compare-price-row td {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

/* 4-column table (Free / Pro / Pro+) needs tighter spacing on small left panel */
.auth-compare-table th,
.auth-compare-table td {
  white-space: nowrap;
}

.auth-compare-table td:first-child,
.auth-compare-table th:first-child {
  white-space: normal;
}

/* ── Buy Bitcoin modal ───────────────────────────────────── */

.btc-modal {
  position: relative;
  z-index: 2;
  width: min(960px, 96vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(18, 18, 34, 0.75);
  backdrop-filter: blur(48px) saturate(1.6);
  -webkit-backdrop-filter: blur(48px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-height: 440px;
}

.btc-modal-left {
  position: relative;
  padding: 48px 40px;
  color: white;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 30% 25%, rgba(247, 147, 26, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 55%),
    linear-gradient(155deg, #0d0825 0%, #1a0f3c 45%, #0f172a 100%);
}

.btc-modal-left::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.btc-modal-right {
  position: relative;
  padding: 40px 44px 36px;
  overflow-y: auto;
  max-height: 85vh;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* "Buy Bitcoin" — the form-side heading. Bumped to full white + bolder
   so it reads as a clear call-to-action rather than muted subtitle. */
.btc-modal-right .auth-form-title {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.btc-subtitle {
  font-size: 0.95rem;
  /* Was 0.5 — too grey against the dark modal; bumped for legibility. */
  color: rgba(255, 255, 255, 0.82);
  margin: -6px 0 24px;
}

.btc-form-group {
  margin-bottom: 8px;
}

.btc-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  /* Bumped from 0.6 so field labels read at a glance. */
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 6px;
}

.btc-fee-text {
  font-size: 0.92rem;
  color: #a78bfa;
  min-height: 22px;
  margin-bottom: 14px;
  font-weight: 600;
}

.btc-commission-note {
  background: rgba(247, 147, 26, 0.08);
  border: 1px solid rgba(247, 147, 26, 0.18);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  /* Lifted from 0.7 so the fee disclosure is unambiguous. */
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 24px;
  line-height: 1.5;
}

.btc-commission-note strong {
  color: #f7931a;
}

.btc-powered {
  margin-top: 14px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

@media (max-width: 780px) {
  .btc-modal {
    grid-template-columns: 1fr;
    border-radius: 24px;
    min-height: unset;
  }

  .btc-modal-left {
    display: none;
  }

  .btc-modal-right {
    padding: 32px 26px 28px;
    max-height: unset;
    border-left: none;
  }
}


/* ===========================================================
   Signup gate modal - unclosable, fires after activity threshold.
   Re-uses .auth-overlay / .auth-backdrop / .auth-modal styling
   and only layers on what differs: higher z-index, denser blur,
   pulsing CTA, and absolutely no close affordance.
   =========================================================== */
.signup-gate {
  /* sit above the other modals just in case one is also open */
  z-index: 100001;
}

.signup-gate-backdrop {
  background: rgba(2, 0, 18, 0.92);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  cursor: not-allowed;
}

.signup-gate-modal {
  /* No .auth-close button is rendered for this modal - it is intentionally
     unclosable. The CSS below is just defensive in case any future markup
     leaks a close button in. */
}

.signup-gate-modal .auth-close,
.signup-gate-modal [data-close-modal] {
  display: none !important;
}

.signup-gate-cta {
  animation: signupGatePulse 2.4s ease-in-out infinite;
}

@keyframes signupGatePulse {
  0%, 100% { box-shadow: 0 0 0 0    rgba(167, 139, 250, 0.55); }
  50%      { box-shadow: 0 0 0 14px rgba(167, 139, 250, 0);    }
}