/* =========================================================================
   currency.ae — crypto.css
   The Crypto section's SUBTLE differentiation on the shared brand. Loaded ONLY
   on crypto pages, AFTER styles.css, and EVERYTHING is scoped under `.crypto`
   (the body class) so it can never touch another page or the visual baseline of
   the rest of the site.

   Layout (approved mockup): slim context band → compact 24h movers line →
   controls (category chips + USD/AED toggle + search) → the sortable MARKET
   TABLE (centerpiece) → CBDC educational block at the very bottom → disclaimer.
   Accent is a whisper: cyan mesh in the band, cyan active chip + active-sort
   indicator, gold reserved for the curated "profile" badge + coin marks.
   ========================================================================= */

.crypto {
  /* Harmonized to the site's green/teal (same as "→" links like the Daily Brief
     CTA). The mesh keeps its subtle texture, now a green whisper; controls/links
     use a muted green rather than the out-of-place bright cyan. */
  --crypto-accent:      var(--up);        /* #34d9a6 — the site's arrow-link green */
  --crypto-accent-2:    var(--violet);    /* reserved for the educational CBDC tag only */
  --crypto-accent-soft: rgba(52, 217, 166, 0.12);
  --crypto-accent-line: rgba(52, 217, 166, 0.26);
}
.crypto [hidden] { display: none !important; }

/* ── 1) Slim context band (NOT a hero) ─────────────────────────────────── */
.crypto .cx-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 0.85rem 1.1rem;
  margin: 0.5rem 0 0.9rem;
}
.crypto .cx-band::after { /* the cyan mesh whisper */
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image:
    linear-gradient(var(--crypto-accent-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--crypto-accent-line) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(80% 90% at 96% -10%, #000, transparent 60%);
          mask-image: radial-gradient(80% 90% at 96% -10%, #000, transparent 60%);
}
.crypto .cx-band > * { position: relative; }
.crypto .cx-band__title { margin: 0 0 0.35rem; font-size: 1.06rem; font-weight: 700; color: var(--text); }
.crypto .cx-band__title .dot { color: var(--crypto-accent); font-weight: 700; }
.crypto .cx-bandstats {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.15rem; align-items: baseline;
  font-size: 0.86rem; color: var(--text-muted);
}
.crypto .cx-bandstats .k { color: var(--text-dim); }
.crypto .cx-bandstats b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.crypto .cx-asof { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.crypto .cx-credit { color: var(--text-dim); }
.crypto .cx-credit a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border); }
.crypto .cx-credit a:hover { color: var(--crypto-accent); }

/* Compact positioning/disclaimer line (replaces the old hero copy). */
.crypto .cx-tagline { font-size: 0.85rem; color: var(--text-dim); margin: 0.5rem 0 0; }
.crypto .cx-tagline a { color: var(--text-muted); }

/* ── 24h movers — ONE horizontal-scroll strip (swipeable), right-edge fade ───── */
.crypto .cx-moversline {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.55rem;
  margin: 0.5rem 0 0.25rem; font-size: 0.85rem; min-width: 0;
}
.crypto .cx-moversline__label { color: var(--text-dim); flex: 0 0 auto; }
.crypto .cx-movers-strip {
  display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  /* faint fade on the right edge signals "more to scroll" */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.crypto .cx-movers-strip::-webkit-scrollbar { display: none; }
.crypto .cx-chip {
  display: inline-flex; align-items: baseline; gap: 0.35rem; flex: 0 0 auto;
  padding: 0.18rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 0.82rem; white-space: nowrap;
}
.crypto .cx-chip b { color: var(--text); font-weight: 600; }
.crypto .cx-chip .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.crypto .cx-moversline__none { color: var(--text-dim); flex: 0 0 auto; white-space: nowrap; }
.crypto .up   { color: var(--up); }
.crypto .down { color: var(--down); }
.crypto .flat { color: var(--text-dim); }

/* ── 2) Controls ───────────────────────────────────────────────────────────
   Desktop: filters LEFT | currency toggle + search RIGHT — two clearly-separate
   zones (the .cx-row-* wrappers flatten via display:contents; order + auto-margin
   arrange them). Mobile: two tidy rows (search + toggle · chips + sort). */
.crypto .cx-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin: 1.1rem 0 0.5rem; }
.crypto .cx-row-a, .crypto .cx-row-b { display: contents; } /* desktop: flatten into .cx-controls */

.crypto .cx-filter { order: 1; margin-right: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; } /* left zone */
.crypto .cx-ccy { order: 2; }
.crypto .cx-controls .hub__search { order: 3; margin: 0; flex: 0 1 17rem; } /* right zone; wide enough for "Search name or symbol" */
.crypto .cx-sortby { order: 4; display: none; } /* desktop sorts via the column headers */
.crypto .cx-sortrow { display: none; } /* mobile-only Sort row (see the mobile block) */

/* Mobile-only ★ Favorites toggle (lives on the left of the Sort row). Off = all;
   on = favorited coins only, with the same gold star treatment used elsewhere. */
.crypto .cx-favtoggle {
  display: none; font: inherit; font-size: 0.82rem; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.35rem 0.85rem; min-height: 2rem; cursor: pointer;
  align-items: center; gap: 0.3rem; white-space: nowrap;
}
.crypto .cx-favtoggle__star { font-size: 0.98rem; line-height: 1; color: var(--text-dim); }
.crypto .cx-favtoggle[aria-pressed="true"] { color: var(--gold); border-color: rgba(232, 200, 116, 0.4); background: rgba(232, 200, 116, 0.1); font-weight: 600; }
.crypto .cx-favtoggle[aria-pressed="true"] .cx-favtoggle__star { color: var(--gold); }

.crypto .cx-chipbtn {
  font: inherit; font-size: 0.82rem; color: var(--text-muted); flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.4rem 0.85rem; min-height: 2.2rem; cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.crypto .cx-chipbtn:hover { color: var(--text); border-color: var(--crypto-accent-line); }
.crypto .cx-chipbtn[aria-pressed="true"] {
  color: var(--up); background: var(--crypto-accent-soft); border-color: var(--crypto-accent-line); font-weight: 600;
}

/* USD | AED segmented toggle — clearly a two-option switch on both screens. */
.crypto .cx-ccy { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.crypto .cx-ccy__btn {
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  background: none; border: 0; padding: 0.4rem 0.85rem; min-height: 2.2rem; cursor: pointer;
}
.crypto .cx-ccy__btn + .cx-ccy__btn { border-left: 1px solid var(--border); } /* divider between USD | AED */
.crypto .cx-ccy__btn[aria-pressed="true"] { color: var(--up); background: var(--crypto-accent-soft); font-weight: 600; }

.crypto .cx-hint { font-size: 0.78rem; color: var(--text-dim); margin: 0.3rem 0 0.5rem; }

/* Sort dropdown (shown on mobile only — see the mobile block). */
.crypto .cx-sortby__lbl { font-size: 0.78rem; color: var(--text-dim); }
.crypto .cx-sortby__sel {
  font: inherit; font-size: 0.82rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.35rem 1.6rem 0.35rem 0.7rem; min-height: 2.2rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* Mobile ≤600: two tidy rows — Row 1 [search wide + compact currency toggle],
   Row 2 [filter chips (scroll + fade) + Sort dropdown pinned right]. */
@media (max-width: 600px) {
  .crypto .cx-controls { flex-direction: column; align-items: stretch; gap: 0.5rem; margin: 0.9rem 0 0.4rem; }
  /* Explicit width:100% gives each row a DEFINITE size (= the container width), so
     the flex algorithm shrinks the search/chips within it instead of the row
     growing to its content and overflowing the page. */
  .crypto .cx-row-a { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; box-sizing: border-box; }
  .crypto .cx-row-b { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; box-sizing: border-box; }

  /* Row 1 — search fills the row (may shrink to zero-min); toggle stays compact. */
  .crypto .cx-row-a .hub__search { order: 0; margin: 0; flex: 1 1 auto; min-width: 0; }
  .crypto .cx-row-a .hub__search-box { min-width: 0; }
  .crypto .cx-row-a .hub__search-input { min-width: 0; width: 100%; }
  .crypto .cx-row-a .cx-ccy { order: 1; margin: 0; flex: 0 0 auto; }

  /* Row 2 — filter chips get the WHOLE row and WRAP (full-size, never clipped): only
     ~4 category chips, so they sit on one or two tidy lines rather than a scroll
     strip that visually clipped "Tokenized gold" behind the fade. */
  .crypto .cx-row-b .cx-filter {
    margin: 0; flex: 1 1 auto; min-width: 0; width: 100%;
    flex-wrap: wrap; gap: 0.4rem;
  }
  .crypto .cx-chipbtn { min-height: 2rem; padding: 0.35rem 0.75rem; }
  /* Favorites is NOT in the scrolling chip row on mobile (it hid off-screen) —
     it moves to the Sort row below. */
  .crypto .cx-row-b .cx-chipbtn[data-filter="fav"] { display: none; }

  /* Sort row — its OWN slim row directly above the table: [★ Favorites] … [Sort]. */
  /* flex-wrap so [★ Favorites] and [Sort] drop to a second line rather than overflow
     the page when both can't fit one row (ultra-narrow / Fold cover screen). */
  .crypto .cx-sortrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin: 0.1rem 0 0.35rem; min-width: 0; }
  .crypto .cx-sortby { min-width: 0; }
  .crypto .cx-sortby__sel { max-width: 100%; }
  .crypto .cx-favtoggle { display: inline-flex; }
  .crypto .cx-sortby { display: inline-flex; align-items: center; gap: 0.35rem; }
  .crypto .cx-sortby__sel { min-height: 2rem; padding: 0.3rem 1.5rem 0.3rem 0.6rem; }

  .crypto .cx-hint { display: none; }
}

/* Loading skeleton (shimmer) — shown until the snapshot arrives; never a flash of
   the "unavailable" state. */
.crypto .cx-skel td { background: var(--surface); }
.crypto .cx-skelbar, .crypto .cx-skelmark {
  display: inline-block; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: cxShimmer 1.3s linear infinite;
}
.crypto .cx-skelmark { width: 1.9rem; height: 1.9rem; border-radius: 50%; }
.crypto .cx-skelbar--rank { width: 14px; height: 10px; }
.crypto .cx-skelbar--name { width: 72px; height: 12px; }
.crypto .cx-skelbar--num { width: 46px; height: 12px; }
.crypto .cx-skelbar--spark { width: 80px; height: 20px; }
@keyframes cxShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .crypto .cx-skelbar, .crypto .cx-skelmark { animation: none; } }

/* ── 3) The market table ───────────────────────────────────────────────── */
/* The crypto index gets the full content wrap (a dense data table, not prose). */
.crypto .cx-index { max-width: var(--wrap); }

/* table-layout:fixed + explicit column widths → the layout is IDENTICAL whichever
   column is sorted, and the table exactly fills its container so nothing (Volume,
   Trend, ★) is ever clipped at the right edge. Only the Coin column is auto — it
   absorbs the remaining width and truncates long names with an ellipsis. */
/* The table has fixed column widths (dense data); at ultra-narrow widths those can
   exceed the viewport. Contain any residual overflow inside the wrapper so the PAGE
   never gains a horizontal scrollbar — the table scrolls within its own box. */
.crypto .cx-tablewrap { margin: 0.3rem 0 0.5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.crypto .cx-tablewrap::-webkit-scrollbar { display: none; }
.crypto .cx-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Generous vertical padding so the list breathes (calm + scannable). */
.crypto .cx-table th, .crypto .cx-table td { padding: 0.9rem 0.5rem; vertical-align: middle; overflow: hidden; }
.crypto .cx-table thead th {
  background: var(--bg);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); font-weight: 600; text-align: right; white-space: nowrap;
  padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
/* Fixed column widths (from the header row). Coin = auto. */
.crypto .cx-table th.cx-th--rank { width: 42px; }
.crypto .cx-table th[data-sort="price"] { width: 118px; }
.crypto .cx-table th[data-sort="change24h"] { width: 66px; }
.crypto .cx-table th[data-sort="change7d"] { width: 66px; }
.crypto .cx-table th.cx-col-mcap { width: 108px; }
.crypto .cx-table th.cx-col-vol { width: 116px; }
.crypto .cx-table th.cx-col-spark { width: 98px; }
.crypto .cx-table th.cx-th--star { width: 42px; }
.crypto .cx-table th.cx-th--sort { cursor: pointer; user-select: none; }
.crypto .cx-table th.cx-th--sort:hover { color: var(--text-muted); }
/* Active-sort header = a neutral BRIGHT-text indicator (+ the arrow), not a data
   colour — chrome stays calm; colour is reserved for the data. */
.crypto .cx-table th[aria-sort="descending"], .crypto .cx-table th[aria-sort="ascending"] { color: var(--text); }
.crypto .cx-caret::after { content: ""; }
.crypto .cx-table th[aria-sort="descending"] .cx-caret::after { content: " ↓"; }
.crypto .cx-table th[aria-sort="ascending"] .cx-caret::after { content: " ↑"; }
/* These must out-specify `.cx-table thead th { text-align: right }` above, so the
   COIN header sits left over the coin names and #/★ stay centered over their cells. */
.crypto .cx-table thead th.cx-th--rank, .crypto .cx-table thead th.cx-th--star { text-align: center; }
.crypto .cx-table thead th.cx-th--coin { text-align: left; }

/* Light treatment: no per-row bordered card — a subtle divider between rows +
   whitespace do the separating, with a quiet hover wash. Reads clean and calm. */
.crypto .cx-table tbody tr { cursor: pointer; }
.crypto .cx-table tbody td { border-bottom: 1px solid var(--border-soft); }
.crypto .cx-table tbody tr:hover td { background: var(--surface); }
.crypto .cx-table tbody tr:last-child td { border-bottom: 0; }

.crypto .cx-td--num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crypto .cx-price { white-space: nowrap; }
.crypto .cx-td--rank { text-align: center; font-family: var(--font-mono); color: var(--text-dim); font-size: 0.8rem; }
.crypto .cx-price b { color: var(--text); font-weight: 600; }
.crypto .cx-price small { display: block; color: var(--text-dim); font-size: 0.72rem; font-weight: 400; }

/* Coin identity cell — the logo+name is a link to the profile (the whole row is
   click-navigable too, via JS). */
.crypto .cx-coin { display: flex; align-items: center; gap: 0.55rem; min-width: 0; overflow: hidden; }
.crypto .cx-logo {
  width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%;
  background: var(--surface-3); object-fit: contain;
}
.crypto .cx-mark {
  width: 1.9rem; height: 1.9rem; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-3); color: var(--gold); font-weight: 700; font-size: 0.82rem;
}
.crypto .cx-coin__text { min-width: 0; }
.crypto a.cx-coin__name {
  display: block; color: var(--text); font-weight: 600; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crypto a.cx-coin__name:hover { color: var(--crypto-accent); }
/* The sub-row (code + optional peg pill) stays inline on ONE line — never wrap
   (keeps every row the same height regardless of sort). Overflow is clipped. */
.crypto .cx-coin__sub { display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.crypto .cx-coin__code { color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; }
.crypto .cx-peg { font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.crypto .cx-peg--on { color: var(--up); border-color: rgba(52, 217, 166, 0.4); }
.crypto .cx-peg--watch { color: var(--amber); border-color: rgba(230, 181, 102, 0.4); }
.crypto .cx-peg--off { color: var(--down); border-color: rgba(224, 138, 155, 0.5); }

/* Sparkline cell */
.crypto .cx-spark { width: 84px; height: 26px; display: block; margin-left: auto; }
.crypto .cx-spark path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }

/* Favorite star */
.crypto .cx-star {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 1.05rem; line-height: 1; color: var(--text-dim);
  width: 2rem; height: 2rem; border-radius: 50%;
  transition: color 0.16s var(--ease), transform 0.16s var(--ease);
}
.crypto .cx-star:hover { color: var(--gold); transform: scale(1.1); }
.crypto .cx-star[aria-pressed="true"] { color: var(--gold); }

/* Responsive columns: reveal richer columns as width allows (no page overflow). */
.crypto .cx-col-7d, .crypto .cx-col-spark, .crypto .cx-col-mcap, .crypto .cx-col-vol { display: none; }
@media (min-width: 480px) { .crypto .cx-col-7d { display: table-cell; } }
@media (min-width: 600px) { .crypto .cx-col-spark { display: table-cell; } }
@media (min-width: 760px) { .crypto .cx-col-mcap { display: table-cell; } }
@media (min-width: 900px) { .crypto .cx-col-vol { display: table-cell; } }
/* Fold / very narrow: tighten so the visible columns fit without a horizontal
   scroll (rank · coin · price · 24h · ★). */
/* Fold / very narrow: tighter fixed widths for the visible columns
   (# · Coin · Price · 24h · ★) — the Coin column auto-fits the rest and the name
   ellipsizes. The coin name (and whole row) still links to the profile, so the
   sub-row stays one line and rows keep a uniform height. */
@media (max-width: 430px) {
  .crypto .cx-table th, .crypto .cx-table td { padding: 0.5rem 0.22rem; }
  /* A touch more right room on the last cell so nothing sits flush to the edge. */
  .crypto .cx-table th:last-child, .crypto .cx-table td:last-child { padding-right: 0.4rem; }
  .crypto .cx-table th.cx-th--rank { width: 28px; }
  .crypto .cx-table th[data-sort="price"] { width: 90px; }
  /* Wider 24h so values like "+101.7%" never clip. */
  .crypto .cx-table th[data-sort="change24h"] { width: 70px; }
  .crypto .cx-table th.cx-th--star { width: 32px; }
  .crypto .cx-coin { gap: 0.4rem; }
  .crypto .cx-coin__name { font-size: 0.88rem; }
  .crypto .cx-logo, .crypto .cx-mark { width: 1.55rem; height: 1.55rem; font-size: 0.72rem; }
  .crypto .cx-price b { font-size: 0.9rem; }
  .crypto .cx-price small { font-size: 0.66rem; }
  .crypto .cx-peg { font-size: 0.6rem; }
  .crypto .cx-star { width: 1.6rem; font-size: 0.95rem; }
  .crypto .cx-td--rank { font-size: 0.74rem; }
}

/* Show all / notes */
.crypto .cx-more { display: flex; justify-content: center; margin: 1rem 0; }
.crypto .cx-more__btn {
  font: inherit; font-size: 0.9rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.6rem 1.4rem; min-height: var(--tap); cursor: pointer;
}
.crypto .cx-more__btn:hover { border-color: var(--crypto-accent-line); }
.crypto .cx-note { color: var(--text-dim); font-size: 0.9rem; text-align: center; padding: 1rem; }

/* ── 5) CBDC educational block (very bottom) ────────────────────────────── */
.crypto .cx-cbdc-block { margin-top: 2rem; }
.crypto .cx-shelf__head { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.4rem; }
.crypto .cx-shelf__head h2 { margin: 0; }
.crypto .cx-shelf__tag {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--crypto-accent-2); border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 999px; padding: 0.1rem 0.5rem;
}
.crypto .cx-cbdc { display: grid; gap: 0.6rem; grid-template-columns: 1fr; margin-top: 0.6rem; }
@media (min-width: 640px) { .crypto .cx-cbdc { grid-template-columns: 1fr 1fr; } }
.crypto .cx-cbdc__card { border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); padding: 0.9rem 1rem; }
.crypto .cx-cbdc__tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--crypto-accent-2); margin: 0 0 0.3rem; }
.crypto .cx-cbdc__card h3 { margin: 0 0 0.3rem; }
.crypto .cx-cbdc__note { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .crypto .cx-star, .crypto .cx-chipbtn { transition: none; }
}

/* ═══ Coin PROFILE page (/crypto/<code>) ══════════════════════════════════ */
.crypto .cxp-article { max-width: 760px; }
.crypto .cxp-head { display: flex; align-items: center; gap: 0.9rem; margin: 0.75rem 0 0.5rem; }
.crypto .cxp-mark {
  width: 3rem; height: 3rem; flex: none; border-radius: 50%;
  background: var(--surface-3); object-fit: contain;
}
.crypto .cxp-mark--glyph { display: grid; place-items: center; color: var(--gold); font-weight: 700; font-size: 1.1rem; }
.crypto .cxp-headtext { min-width: 0; }
.crypto .cxp-title { margin: 0.1rem 0 0; }
.crypto .cxp-ticker { color: var(--text-dim); font-weight: 600; font-size: 0.7em; text-transform: uppercase; }
.crypto .cxp-tagline { color: var(--text-muted); margin: 0.35rem 0 0; }

/* Live price card — the crypto accent lives here (a subtle cyan-edged surface). */
.crypto .cxp-pricecard {
  border: 1px solid var(--border); border-radius: var(--radius);
  background:
    radial-gradient(120% 160% at 100% -20%, var(--crypto-accent-soft), transparent 55%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 1.1rem 1.2rem; margin: 1rem 0;
}
.crypto .cxp-price-main { font-family: var(--font-mono); font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 600; color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; }
.crypto .cxp-price-sub { font-family: var(--font-mono); color: var(--text-muted); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.crypto .cxp-changes { display: flex; gap: 1.1rem; margin-top: 0.6rem; }
.crypto .cxp-chg { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.crypto .cxp-chg small { color: var(--text-dim); font-weight: 400; margin-left: 0.15rem; }
.crypto .cxp-asof { color: var(--text-dim); font-size: 0.82rem; margin: 0.7rem 0 0; }
.crypto .cxp-asof a { color: var(--text-muted); }

/* Key stats grid */
.crypto .cxp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 1rem 0; }
@media (min-width: 620px) { .crypto .cxp-stats { grid-template-columns: repeat(3, 1fr); } }
/* min-width:0 lets the 1fr tiles shrink below their content; overflow-wrap lets a
   long value (e.g. Dogecoin's 15-digit supply) break instead of forcing the grid
   wider than a 280px cover screen. */
.crypto .cxp-stat { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 0.7rem 0.8rem; min-width: 0; }
.crypto .cxp-stat__k { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.crypto .cxp-stat__v { display: block; margin-top: 0.2rem; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Honesty blocks (peg / custody / cbdc) */
.crypto .cxp-note { border: 1px solid var(--border-soft); border-left: 3px solid var(--crypto-accent); border-radius: var(--radius-sm); background: var(--surface); padding: 0.8rem 1rem; margin: 1rem 0; }
.crypto .cxp-note p { margin: 0.3rem 0 0; color: var(--text-muted); }
.crypto .cxp-note--custody { border-left-color: var(--gold); }
.crypto .cxp-note--cbdc { border-left-color: var(--crypto-accent-2); }
.crypto .cxp-peg-status { color: var(--text); }
.crypto .cxp-pegdot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: middle; }
.crypto .cxp-pegdot.cxp-peg--on { background: var(--up); }
.crypto .cxp-pegdot.cxp-peg--watch { background: var(--amber); }
.crypto .cxp-pegdot.cxp-peg--off { background: var(--down); }

/* Big chart with timeframe toggles (Feature B) */
.crypto .cxp-sparkwrap { margin: 1rem 0; }
/* Head: label (+ % callout + hint) on the left, the range control on the right;
   wraps to a second line on narrow screens so nothing overflows. */
.crypto .cxp-sparkhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 0.5rem; }
.crypto .cxp-sparklabel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin: 0; }
.crypto .cxp-sparkhint { text-transform: none; letter-spacing: 0; color: var(--text-dim); opacity: 0.8; }
.crypto .cxp-chartchg { text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 2px; }
.crypto .cxp-chartchg.up { color: var(--up); }
.crypto .cxp-chartchg.down { color: var(--down); }
.crypto .cxp-chartchg.flat { color: var(--text-dim); }
.crypto .cxp-sparkbox { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 0.6rem 0.8rem; }
.crypto .cxp-sparkbox .chart__plot { height: 200px; margin-top: 0; }
/* Compact range pill so all five (24H/7D/1M/1Y/Max) fit the card without scroll. */
.crypto .chart__ranges { flex: none; }
.crypto .chart__range { padding: 5px 10px; font-size: 0.75rem; min-height: 30px; }
.crypto .cxp-sparkwrap .chart__caption { margin: 0.5rem 2px 0; }

/* Editorial + risk */
.crypto .cxp-section { margin: 1.25rem 0; }
.crypto .cxp-section h2 { margin: 0 0 0.4rem; }
.crypto .cxp-section p { color: var(--text-muted); }
.crypto .cxp-risk { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0.9rem 1.1rem; margin: 1.25rem 0; }
.crypto .cxp-risk h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.crypto .cxp-risk p { color: var(--text-muted); margin: 0; }
.crypto .cxp-source a { color: var(--crypto-accent); text-decoration: none; }

/* About this coin (Feature C) — attributed project description + auto disclaimer +
   official reference link. Prose sits in the existing 760px .cxp-article measure. */
.crypto .cxp-about h2 { margin: 0 0 0.5rem; }
/* Project-description callout — same card language as the "Honest risk note" box
   (bordered surface, aligned to the paragraph edge), regular weight, NO italic.
   The attribution label does the "quoted, not ours" work. */
.crypto .cxp-desc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0.9rem 1.1rem; margin: 0.9rem 0; }
.crypto .cxp-desc-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: 0 0 0.4rem; }
.crypto .cxp-desc-label span { text-transform: none; letter-spacing: 0; color: var(--text-dim); opacity: 0.85; }
.crypto .cxp-desc-text { color: var(--text-muted); margin: 0; }
.crypto .cxp-autonote { font-size: 0.8rem; color: var(--text-dim); margin: 0.9rem 0 0; }
.crypto .cxp-official { margin: 0.9rem 0 0; }
.crypto .cxp-official a { color: var(--crypto-accent); text-decoration: none; font-weight: 600; }
.crypto .cxp-official a:hover { text-decoration: underline; }
.crypto .cxp-official-note { color: var(--text-dim); font-size: 0.8rem; margin-left: 0.4rem; }
.crypto .cxp-official-wrap { margin: 1.25rem 0; }

/* {Coin} in the news — compact gated items or an honest empty state. */
.crypto .cxp-news { margin: 1.5rem 0; }
.crypto .cxp-news h2 { margin: 0 0 0.6rem; }
.crypto .cxp-news-list { display: flex; flex-direction: column; gap: 0.7rem; }
.crypto .cxp-newsitem { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 0.75rem 0.9rem; }
.crypto .cxp-newsitem__meta { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.25rem; font-size: 0.72rem; }
.crypto .cxp-newsitem__src { text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); font-weight: 600; }
.crypto .cxp-newsitem__time { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.crypto .cxp-newsitem__title { margin: 0; font-size: 0.98rem; line-height: 1.35; }
.crypto .cxp-newsitem__title a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; }
.crypto .cxp-newsitem__title a:hover { border-bottom-color: var(--crypto-accent); }
.crypto .cxp-newsitem__why { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--text-muted); }
.crypto .cxp-news-empty { color: var(--text-dim); font-size: 0.9rem; margin: 0; }
.crypto .cxp-news-empty a { color: var(--crypto-accent); text-decoration: none; }
/* Compact single-line "no coin-specific news" state (collapsed, not a big block). */
.crypto .cxp-news-none { color: var(--text-dim); font-size: 0.88rem; margin: 1.5rem 0; }
.crypto .cxp-news-none a { color: var(--crypto-accent); text-decoration: none; }
.crypto .cxp-news-none a:hover { text-decoration: underline; }

.crypto .cxp-back { margin: 1.5rem 0 0; }
.crypto .cxp-back a { color: var(--text-muted); text-decoration: none; }
.crypto .cxp-back a:hover { color: var(--crypto-accent); }
.crypto .cxp-chg.up, .crypto .cxp-stat__v.up { color: var(--up); }
.crypto .cxp-chg.down, .crypto .cxp-stat__v.down { color: var(--down); }
.crypto .cxp-chg.flat { color: var(--text-dim); }

/* ═══ /convert — mode toggle + AED↔crypto converter ═══════════════════════ */
.crypto .cvt-page { max-width: 620px; }
.crypto .cvt-modes { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); margin: 0.75rem 0 1.25rem; }
.crypto .cvt-mode { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); background: none; border: 0; padding: 0.55rem 1.35rem; min-height: var(--tap); cursor: pointer; transition: color 0.16s var(--ease), background 0.16s var(--ease); }
.crypto .cvt-mode + .cvt-mode { border-left: 1px solid var(--border); }
.crypto .cvt-mode:hover { color: var(--text); }
.crypto .cvt-mode[aria-selected="true"] { color: var(--up); background: var(--crypto-accent-soft); }

.crypto .cvt-crypto {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 150% at 100% -15%, var(--crypto-accent-soft), transparent 55%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: clamp(1rem, 4vw, 1.4rem);
}
/* position:relative makes the field the anchor for its floating calculator
   overlay (.calc-float, shared with the fiat converter, styled in styles.css),
   so revealing the keypad on focus overlays the fields below instead of growing
   the card — the equal-height trend chart never reflows. */
.crypto .cvt-field { margin: 0.55rem 0; position: relative; }
.crypto .cvt-fieldhead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.crypto .cvt-inrow {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0.45rem 0.6rem;
  position: relative; /* anchors the overlay picker (Part C — never grows the card) */
}
/* Swap FROM/TO — sits ABOVE the FROM field's focus-revealed calculator overlay
   (.calc-float, z-30) so a click on Swap while the FROM amount is focused hits
   Swap, not the overlay (mirrors the fiat .swap z-index:31 fix). */
.crypto .cvt-swaprow { display: flex; justify-content: center; margin: 0.1rem 0; position: relative; z-index: 31; }
.crypto .cvt-swapbtn {
  appearance: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  width: 2.1rem; height: 2.1rem; border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center; transition: color 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.crypto .cvt-swapbtn:hover { color: var(--crypto-accent); border-color: var(--crypto-accent-line); transform: rotate(180deg); }
.crypto .cvt-swapbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .crypto .cvt-swapbtn { transition: none; } .crypto .cvt-swapbtn:hover { transform: none; } }
/* Cross-rate line */
.crypto .cvt-rateline { margin: 0.6rem 0 0; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.crypto .cvt-rateline:empty { display: none; }
.crypto .cvt-inrow:focus-within { border-color: var(--crypto-accent-line); }
.crypto .cvt-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 600;
  color: var(--text); background: none; border: 0; outline: none; padding: 0.2rem 0;
}
.crypto .cvt-coinbtn {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto;
  font: inherit; font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.55rem; min-height: 2.2rem; cursor: pointer;
}
.crypto .cvt-coinbtn:hover { border-color: var(--crypto-accent-line); }
.crypto .cvt-coinmark { display: inline-flex; }
.crypto .cvt-logo { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--surface-3); object-fit: contain; }
.crypto .cvt-glyph { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; color: var(--gold); font-weight: 700; font-size: 0.68rem; }
.crypto .cvt-coincode { font-size: 0.92rem; }
.crypto .cvt-caret { color: var(--text-dim); font-size: 0.65rem; }
.crypto .cvt-fiatcode { flex: 0 0 auto; color: var(--text-dim); font-size: 0.95rem; }
.crypto .cvt-arrow { text-align: center; color: var(--text-dim); font-size: 1.1rem; margin: 0.15rem 0; }
.crypto .cvt-secondary { margin: 0.4rem 0 0; color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.crypto .cvt-secondary:empty { display: none; }
.crypto .cvt-asof { color: var(--text-dim); font-size: 0.82rem; margin: 0.9rem 0 0; font-variant-numeric: tabular-nums; }
.crypto .cvt-asof a { color: var(--text-muted); }
.crypto .cvt-note { color: var(--text-dim); font-size: 0.82rem; line-height: 1.55; margin: 0.7rem 0 0; }
.crypto .cvt-note a { color: var(--text-muted); }
.crypto .cvt-cbdcnote { margin: 0.6rem 0 0; padding: 0.7rem 0.9rem; border: 1px dashed var(--border); border-left: 3px solid var(--crypto-accent-2); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.88rem; }
.crypto .cvt-cbdcnote a { color: var(--crypto-accent-2); text-decoration: none; }
.crypto .cvt-cbdcnote[hidden] { display: none; }

/* Coin picker */
/* Overlay picker (Part C): floats over content anchored to the input row, so
   opening it NEVER grows the card or stretches the chart. */
.crypto .cvt-picker {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  padding: 0.6rem; box-shadow: var(--shadow);
}
.crypto .cvt-picker[hidden] { display: none; }
.crypto .cvt-picker-box { margin-bottom: 0.5rem; }
.crypto .cvt-picker-list { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.crypto .cvt-picker-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; }
.crypto .cvt-picker-item:hover, .crypto .cvt-picker-item:focus-visible { background: var(--surface-3); outline: none; }
.crypto .cvt-picker-text b { color: var(--text); font-weight: 600; }
.crypto .cvt-picker-code { color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase; }
.crypto .cvt-picker-note { padding: 0.6rem; color: var(--text-dim); font-size: 0.88rem; }

@media (prefers-reduced-motion: reduce) { .crypto .cvt-mode { transition: none; } }

/* Link from the crypto index to the AED↔crypto converter. */
.crypto .cx-convertcta { margin: 0.35rem 0 0; font-size: 0.9rem; }
.crypto .cx-convertcta a { color: var(--up); text-decoration: none; }
.crypto .cx-convertcta a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   CRYPTO HUB — Market | My Portfolio view toggle + the private Portfolio tracker.
   All scoped under .crypto (loaded only on the crypto hub). Dark-premium, green
   accent, honest framing. Responsive to the 344px Fold.
   ═══════════════════════════════════════════════════════════════════════════ */

/* View toggle (segmented, same family as .cx-ccy / .cvt-modes) */
.crypto .cx-viewtabs {
  display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
  overflow: hidden; background: var(--surface); margin: 0 0 1rem;
}
.crypto .cx-viewtab {
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-muted);
  background: none; border: 0; padding: 0.5rem 1.25rem; min-height: 44px; cursor: pointer;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.crypto .cx-viewtab + .cx-viewtab { border-left: 1px solid var(--border); }
.crypto .cx-viewtab:hover { color: var(--text); }
.crypto .cx-viewtab[aria-selected="true"] { color: var(--up); background: var(--crypto-accent-soft); }
@media (prefers-reduced-motion: reduce) { .crypto .cx-viewtab { transition: none; } }

/* ── Portfolio: head + lede ─────────────────────────────────────────────── */
.crypto .pf-title { margin: 0 0 0.35rem; font-size: 1.5rem; }
.crypto .pf-lede { margin: 0 0 1rem; color: var(--text-muted); max-width: 60ch; }
.crypto .pf-h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }

/* Privacy note — the selling point, stated plainly */
.crypto .pf-privacy {
  display: flex; gap: 0.7rem; align-items: flex-start;
  border: 1px solid var(--crypto-accent-line); border-radius: var(--radius);
  background: radial-gradient(120% 160% at 0% 0%, var(--crypto-accent-soft), transparent 60%), var(--surface);
  padding: 0.85rem 1rem; margin: 0 0 1.25rem;
}
.crypto .pf-privacy__icon { color: var(--up); flex: 0 0 auto; margin-top: 1px; }
.crypto .pf-privacy p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }
.crypto .pf-privacy strong { color: var(--text); }

/* ── Summary card ───────────────────────────────────────────────────────── */
.crypto .pf-summary {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 1rem 1.1rem; margin: 0 0 1.25rem;
}
.crypto .pf-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
.crypto .pf-summary__label { margin: 0; color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.crypto .pf-summary__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
.crypto .pf-total { margin: 0; font-family: var(--font-mono); font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 600; color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; }
.crypto .pf-total-sub { margin: 0.15rem 0 0; font-family: var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.crypto .pf-total-sub:empty { display: none; }
.crypto .pf-pnl { margin: 0.5rem 0 0; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.crypto .pf-pnl.up { color: var(--up); }
.crypto .pf-pnl.down { color: var(--down); }
.crypto .pf-pnl.flat { color: var(--text-dim); }
.crypto .pf-asof { margin: 0.6rem 0 0; color: var(--text-dim); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* Allocation donut */
.crypto .pf-donut-wrap { display: flex; align-items: center; gap: 1rem; }
.crypto .pf-donut { flex: 0 0 auto; width: 96px; height: 96px; }
.crypto .pf-donut__svg { width: 100%; height: 100%; display: block; }
.crypto .pf-donut__seg { transition: none; }
.crypto .pf-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.crypto .pf-legend__item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text-muted); }
.crypto .pf-legend__dot { width: 0.6rem; height: 0.6rem; border-radius: 2px; flex: 0 0 auto; }
.crypto .pf-legend__lbl { color: var(--text); }
.crypto .pf-legend__pct { margin-left: auto; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ── Holdings table ─────────────────────────────────────────────────────── */
.crypto .pf-table { width: 100%; border-collapse: collapse; }
.crypto .pf-table thead th {
  text-align: right; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); font-weight: 600; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border);
}
.crypto .pf-table thead th.pf-th--coin { text-align: left; }
.crypto .pf-table thead th.pf-th--act { width: 1%; }
.crypto .pf-table td { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.crypto .pf-table tbody tr:last-child td { border-bottom: 0; }
.crypto .pf-td--num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crypto .pf-td--num.up { color: var(--up); }
.crypto .pf-td--num.down { color: var(--down); }
.crypto .pf-col-pnl small { display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.85; }
.crypto .pf-coin { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.crypto .pf-coin__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.crypto .pf-coin__text b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch; }
.crypto .pf-coin__code { color: var(--text-dim); font-size: 0.76rem; text-transform: uppercase; }
.crypto .pf-logo { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--surface-3); object-fit: contain; flex: 0 0 auto; }
.crypto .pf-glyph { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; color: var(--gold); font-weight: 700; font-size: 0.66rem; flex: 0 0 auto; }
.crypto .pf-td--act { text-align: right; white-space: nowrap; }
.crypto .pf-iconbtn { font: inherit; font-size: 0.78rem; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; margin-left: 0.3rem; cursor: pointer; min-height: 34px; }
.crypto .pf-iconbtn:hover { color: var(--text); border-color: var(--crypto-accent-line); }
.crypto .pf-iconbtn--del:hover { color: var(--down); border-color: rgba(224, 138, 155, 0.5); }

/* Empty state — calm */
.crypto .pf-empty { border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.6rem 1rem; text-align: center; margin: 0 0 0.5rem; }
.crypto .pf-empty__title { margin: 0 0 0.3rem; color: var(--text); font-weight: 600; font-size: 1.05rem; }
.crypto .pf-empty__sub { margin: 0; color: var(--text-dim); font-size: 0.9rem; }

/* ── Add / edit form ────────────────────────────────────────────────────── */
.crypto .pf-add { margin-top: 1.5rem; }
.crypto .pf-form { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 1rem 1.1rem; }
.crypto .pf-field { margin: 0 0 0.7rem; min-width: 0; }
.crypto .pf-picker { position: relative; }
.crypto .pf-searchlist { list-style: none; margin: 0.4rem 0 0; padding: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); max-height: 264px; overflow-y: auto; }
.crypto .pf-searchlist[hidden] { display: none; }
.crypto .pf-searchitem { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; }
.crypto .pf-searchitem:hover, .crypto .pf-searchitem:focus-visible { background: var(--surface-3); outline: none; }
.crypto .pf-searchitem__text b { color: var(--text); font-weight: 600; }
.crypto .pf-searchitem__code { color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; margin-left: 0.3rem; }
.crypto .pf-searchnote { padding: 0.6rem; color: var(--text-dim); font-size: 0.88rem; }
.crypto .pf-favs { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--text-dim); }
.crypto .pf-favs__label { margin-right: 0.35rem; }
.crypto .pf-favchip { font: inherit; font-size: 0.8rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.6rem; margin: 0.2rem 0.25rem 0 0; cursor: pointer; min-height: 30px; }
.crypto .pf-favchip:hover { color: var(--up); border-color: var(--crypto-accent-line); }
.crypto .pf-field--selected { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--crypto-accent-line); border-radius: var(--radius); background: var(--crypto-accent-soft); padding: 0.5rem 0.7rem; }
.crypto .pf-selected__name { color: var(--text); font-weight: 600; }
.crypto .pf-selected__clear { margin-left: auto; font: inherit; font-size: 1.1rem; line-height: 1; color: var(--text-muted); background: none; border: 0; cursor: pointer; min-height: 32px; min-width: 32px; }
.crypto .pf-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.crypto .pf-input { width: 100%; font-family: var(--font-mono); font-size: 1rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.55rem 0.7rem; }
.crypto .pf-input:focus { outline: none; border-color: var(--crypto-accent-line); }
.crypto .pf-costrow { display: flex; align-items: center; gap: 0.4rem; }
.crypto .pf-costccy { flex: 0 0 auto; color: var(--text-dim); font-size: 0.9rem; }
.crypto .pf-optional { color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; }
.crypto .pf-formerror { margin: 0.6rem 0 0; color: var(--down); font-size: 0.85rem; }
.crypto .pf-formactions { display: flex; gap: 0.5rem; margin-top: 0.85rem; }

/* Buttons */
.crypto .pf-btn { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.9rem; min-height: 44px; cursor: pointer; transition: border-color 0.15s var(--ease), color 0.15s var(--ease); }
.crypto .pf-btn:hover { color: var(--text); border-color: var(--crypto-accent-line); }
.crypto .pf-btn--primary { color: #04120f; background: var(--up); border-color: var(--up); }
.crypto .pf-btn--primary:hover { color: #04120f; filter: brightness(1.05); }
.crypto .pf-btn--danger { color: var(--down); }
.crypto .pf-btn--danger:hover { border-color: rgba(224, 138, 155, 0.5); }

/* Export / import */
.crypto .pf-io { margin-top: 1.5rem; }
.crypto .pf-io__hint { margin: 0 0 0.6rem; color: var(--text-dim); font-size: 0.9rem; }
.crypto .pf-io__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.crypto .pf-io__msg { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.85rem; min-height: 1em; }
.crypto .pf-io__msg:empty { min-height: 0; }
.crypto .pf-import { margin-top: 0.8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0.85rem; }
.crypto .pf-textarea { width: 100%; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem; margin: 0.3rem 0 0.6rem; resize: vertical; }
.crypto .pf-file { font: inherit; font-size: 0.82rem; color: var(--text-muted); max-width: 100%; }

.crypto .pf-disclaimer { margin: 1.5rem 0 0; color: var(--text-dim); font-size: 0.82rem; line-height: 1.55; }
.crypto .pf-disclaimer a { color: var(--text-muted); }

/* ── Responsive: Fold-friendly ──────────────────────────────────────────── */
@media (min-width: 640px) {
  .crypto .pf-summary__grid { grid-template-columns: 1fr auto; }
}
@media (max-width: 560px) {
  /* Holdings become STACKED CARDS (a table can't fit 344px). Each row is a card;
     each cell shows its label so nothing is lost — and nothing overflows. */
  .crypto .pf-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .crypto .pf-table, .crypto .pf-table tbody, .crypto .pf-table tr, .crypto .pf-table td { display: block; width: auto; }
  .crypto .pf-table tr { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0.7rem 0.85rem; margin: 0 0 0.6rem; }
  .crypto .pf-table td { border: 0; padding: 0.26rem 0; text-align: right; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; white-space: normal; }
  .crypto .pf-table td[data-label]::before { content: attr(data-label); color: var(--text-dim); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; flex: 0 0 auto; }
  .crypto .pf-table td.pf-td--coin { justify-content: flex-start; padding: 0 0 0.5rem; margin-bottom: 0.45rem; border-bottom: 1px solid var(--border-soft); }
  .crypto .pf-table td.pf-td--act { justify-content: flex-end; padding: 0.5rem 0 0; margin-top: 0.35rem; border-top: 1px solid var(--border-soft); }
  .crypto .pf-coin__text b { max-width: none; }
  .crypto .pf-col-pnl small { display: inline; margin-left: 0.4rem; }
  .crypto .pf-inline { grid-template-columns: 1fr; }
  .crypto .pf-total { font-size: clamp(1.6rem, 8.5vw, 2.2rem); }
}