/* Polarly web portal — site.css (Spec 164 §2, §7).
   Plain CSS, no build. Tokens mirror mobile/lib/core/theme (app_colors.dart,
   app_spacing.dart, app_radius.dart) and landing/css/style.css. Light is the
   base; dark via prefers-color-scheme with the app's fill ladder
   (background → surface → surface-variant), dark cards carry no border. */

:root {
  --primary: #6366f1;
  --primary-dark: #4338ca;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --grad: linear-gradient(135deg, #3d96b2 0%, #536acd 65%, #6a3de8 100%);

  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --card-border: 1px solid var(--border);
  --text: #0f172a;
  --text-2: #475569;
  /* Muted text and link text at WCAG AA (≥ 4.5:1 on bg, surface and surface-2 — §9 E100):
     the app's tertiary #94a3b8 is 2.3–2.6:1 on the light ladder, #6366f1 as text 4.1–4.5. */
  --text-3: #607087;
  --link: #4f46e5;
  /* Semantic colours as TEXT (APR, ↑/↓, «Активний»): the fills' #10b981 / #ef4444 are
     2.5 / 3.8:1 on white (§9 E102); dots and tints keep --success / --danger. */
  --success-text: #047857;
  --danger-text: #dc2626;
  --apr: var(--success-text);

  /* AppSpacing */
  --xs: 4px;
  --sm: 8px;
  --md: 12px;
  --lg: 16px;
  --xl: 24px;
  --xxl: 32px;
  --xxxl: 48px;
  /* AppRadius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  --sidebar: 240px;
  --sidebar-mini: 64px;
  --topbar: 56px;
  /* A logo next to a name in a row: coin logos in tables, exchange logos in
     the coin page's Earn blocks and chips (Spec 164 §9 E80). */
  --icon-row: 28px;
  --hero-y: 32px; /* home hero vertical padding (Spec 164 polish, iteration 4) */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Manrope", var(--font);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15151c;
    --surface: #22222e;
    --surface-2: #2d2d3c;
    --border: #2a2a3a;
    --card-border: 0 solid transparent;
    --text: #f1f5f9;
    --text-2: #94a3b8;
    --text-3: #8898ad;  /* #64748b was 2.8–3.8:1 on the dark ladder */
    --link: #818cf8;  /* AppColors.primaryLight; #6366f1 was 3.0–4.1:1 */
    --apr: #34d399;
    --success-text: #10b981;  /* dark theme unchanged (§9 E102) */
    --danger-text: #ef4444;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* A link inside running text is underlined — not told apart by colour alone (§9 E100). */
p a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* Fluid content (layout v2): no max-width, 24 px gutters. */
.container { padding: 0 var(--xl); }
.muted { color: var(--text-2); font-weight: 400; }
.icon { width: 20px; height: 20px; flex: none; }

/* Layout v2: sidebar (240 / 64 px collapsed, drawer < 1024 px) + shell with a sticky top bar. */
html { scroll-padding-top: calc(var(--topbar) + var(--sm)); }
.layout { display: flex; min-height: 100vh; }
.shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell > main { flex: 1; }
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.sidebar {
  position: sticky; top: 0; flex: none; display: flex; flex-direction: column; gap: var(--lg);
  width: var(--sidebar); height: 100vh; overflow-y: auto; padding: 0 var(--md) var(--lg);
  background: var(--surface); border-right: 1px solid var(--border);
}
.sidebar__top { display: flex; align-items: center; justify-content: space-between; height: var(--topbar); padding: 0 var(--xs); flex: none; }
.brand { display: inline-flex; align-items: center; gap: var(--sm); color: var(--text); }
.brand:hover { text-decoration: none; }
/* logo-mark.svg has no inner padding (§9 E96): 28 px is the star itself. */
.brand__logo { width: 28px; height: 28px; flex: none; }
.brand__name { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.sidebar__close { display: none; }
.side-nav { display: grid; gap: var(--xs); }
.side-nav__item { position: relative; display: flex; align-items: center; gap: var(--md); height: 44px; padding: 0 var(--md); border-radius: var(--r-md); color: var(--text-2); font-weight: 500; white-space: nowrap; }
.side-nav__item:hover { text-decoration: none; color: var(--text); }
/* Active = colour + indicator (ADR 012), not a fill. */
.side-nav__item.is-active { color: var(--link); }
.side-nav__item.is-active::before { content: ""; position: absolute; left: calc(-1 * var(--md)); top: var(--sm); bottom: var(--sm); width: 3px; border-radius: 0 var(--r-full) var(--r-full) 0; background: var(--primary); }
.app-card { margin-top: auto; padding: var(--lg); border-radius: var(--r-lg); background: var(--surface-2); }
.app-card__icon { display: none; }
.app-card__body { display: grid; gap: var(--sm); }
.app-card__title { font-weight: 600; }
.app-card__text { font-size: 13px; color: var(--text-2); }
/* Locale switcher «UA · EN» (Spec 170 §1): top right of the bar on desktop, footer; the current one is plain text. */
.lang-switch { display: flex; align-items: center; gap: var(--xs); font-size: 13px; color: var(--text-3); }
.lang-switch a { color: var(--text-2); }
.lang-switch a[aria-current] { color: var(--text); font-weight: 600; pointer-events: none; }
.lang-switch--topbar { flex: none; margin-left: auto; font-size: 14px; }
.topbar__lang { display: none; }
.sidebar__collapse { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: 40px; height: 40px; margin-left: var(--xs); border: 0; border-radius: var(--r-md); background: none; color: var(--text-2); cursor: pointer; }
.sidebar__collapse[hidden] { display: none; }
.sidebar__collapse:hover { color: var(--text); }
.sidebar__collapse-open { display: none; }

@media (min-width: 1024px) {
  .sb-collapsed .sidebar { width: var(--sidebar-mini); padding-left: var(--sm); padding-right: var(--sm); }
  .sb-collapsed .brand__name, .sb-collapsed .app-card__body { display: none; }
  .sb-collapsed .sidebar__top { justify-content: center; padding: 0; }
  .sb-collapsed .side-nav__item { justify-content: center; padding: 0; }
  .sb-collapsed .side-nav__item.is-active::before { left: calc(-1 * var(--sm)); }
  /* Labels stay for screen readers; the title shows on hover. */
  .sb-collapsed .side-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sb-collapsed .app-card { padding: 0; background: none; }
  .sb-collapsed .app-card__icon { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--r-md); color: var(--primary); background: var(--surface-2); }
  .sb-collapsed .sidebar__collapse { align-self: center; margin-left: 0; }
  .sb-collapsed .sidebar__collapse-close { display: none; }
  .sb-collapsed .sidebar__collapse-open { display: block; }
}

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--md); height: var(--topbar); padding: 0 var(--xl); background: var(--bg); border-bottom: 1px solid var(--border); }
.nav-burger, .topbar__brand { display: none; }
.search { position: relative; flex: 1; max-width: 360px; min-width: 0; margin: 0; color: var(--text-3); }
.search .icon { position: absolute; left: var(--md); top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.search__input { width: 100%; height: 40px; padding: 0 var(--md) 0 40px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.search__input:focus { outline: none; border-color: var(--primary); }
.search__list { position: absolute; z-index: 30; top: calc(100% + var(--xs)); left: 0; right: 0; margin: 0; padding: var(--xs) 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); }
.search__list[hidden] { display: none; }
.search__list li { display: flex; gap: var(--sm); padding: var(--sm) var(--md); font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__list li[aria-selected="true"], .search__list li[data-path]:hover { background: var(--surface-2); }
.search__list .search__none { color: var(--text-2); cursor: default; }
/* «Завантажити» only where the sidebar's app card is out of sight — the drawer < 1024 px (§9 E97). */
.topbar .topbar__cta { display: none; margin-left: auto; }  /* .topbar: outranks .btn below */

@media (max-width: 1023px) {
  .sidebar { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; height: auto; width: 280px; transform: translateX(-100%); transition: transform 0.2s ease; }
  .nav-toggle:checked ~ .sidebar { transform: none; }
  .sidebar__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--text); cursor: pointer; }
  .scrim { display: none; }
  .nav-toggle:checked ~ .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(15, 23, 42, 0.45); }
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: calc(-1 * var(--sm)); color: var(--text); cursor: pointer; }
  .nav-burger .icon { width: 24px; height: 24px; }
  .nav-toggle:focus-visible ~ .shell .nav-burger { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-md); }
  .topbar__brand { display: inline-flex; flex: none; }
  .topbar__lang { display: inline-flex; flex: none; font-size: 13px; font-weight: 600; color: var(--text-2); }
  .topbar .topbar__cta { display: inline-flex; flex: none; }
  .lang-switch--topbar { display: none; }
  .sidebar__collapse { display: none; }
}
@media (max-width: 479px) {
  .topbar { padding: 0 var(--lg); }
  .topbar .topbar__cta { padding: 0 var(--md); }
}

/* Market strip — a step lighter than the page, one line, sideways scroll on narrow screens */
.market { background: var(--surface); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-3); }
.market__inner { position: relative; display: flex; gap: var(--xl); padding-top: var(--sm); padding-bottom: var(--sm); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.market__inner::-webkit-scrollbar { display: none; }
.market__item { flex: none; display: inline-flex; align-items: center; gap: var(--xs); }
.market__item b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.market__item .up, .market__item .down { font-variant-numeric: tabular-nums; }
.market__updated { margin-left: auto; }
.fng { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--text-3); }
.fng--extreme_fear { background: var(--danger); }
.fng--fear { background: var(--warning); }
.fng--greed { background: #34d399; }
.fng--extreme_greed { background: var(--success); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Freshness banner — callout: tinted fill + left accent, no frame */
.banner { background: rgba(245, 158, 11, 0.1); border-left: 3px solid var(--warning); }
.banner__inner { display: flex; align-items: center; gap: var(--sm); padding-top: var(--md); padding-bottom: var(--md); font-size: 14px; }
.banner .icon { color: var(--warning); }

/* Buttons */
/* The one button (§9 E96, macro `button`): 36 px; gradient = primary, --secondary = plain. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sm);
  min-height: 36px; padding: 0 var(--lg); border-radius: var(--r-md);
  font-weight: 600; font-size: 14px; color: #fff; background: var(--grad);
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn .icon { width: 18px; height: 18px; }
.btn--secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn--secondary:hover { filter: none; border-color: var(--primary); }

/* /app/ hero (Spec 032 landing sections) */
.hero { padding: var(--xxl) 0 var(--lg); }
.hero__inner { display: grid; gap: var(--xxl); align-items: center; }
.hero__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; }
.hero__sub { margin-top: var(--lg); color: var(--text-2); font-size: 17px; }
.hero__cta { margin-top: var(--xl); }
.hero__shot { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
/* The three-phone mockup (1226×902) fills its column; ≥ 900 px the column is half
   the row, so ≈ 420 px tall at 1366 (§9 E94). */
.hero__shot--wide { max-width: calc(560px * 1226 / 902); }
/* The portrait two-phone pair (1152×2077) would be ~1000 px tall at full column
   width — capped by height, centred in its half. */
.hero__shot--tall { width: auto; max-width: 100%; max-height: 640px; }
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Media left, text right; below 900 px the DOM order — text first. */
  .hero__inner--media-first .hero__visual { order: -1; }
}

/* Home hero (DropsTab-style app panel): ≤ 480 px tall on 1366×768. */
.home-hero { display: grid; gap: var(--xl); align-items: center; padding: var(--hero-y) var(--xxl); border-radius: var(--r-xl); background: var(--surface); border: var(--card-border); overflow: hidden; }
.home-hero__title { font-family: var(--font-head); font-weight: 800; font-size: 36px; line-height: 1.15; max-width: 860px; }
.home-hero__sub { margin-top: var(--md); max-width: 560px; color: var(--text-2); font-size: 16px; }
.home-hero__label { margin-top: var(--lg); font-size: 13px; font-weight: 600; color: var(--text-3); }
.home-hero .get { margin-top: var(--sm); }
.home-hero__visual { display: flex; justify-content: center; }
/* The mockup (1226×902) takes what the copy leaves, up to 320 px tall (420 from 1280 px). */
.home-hero__pair { width: 100%; height: auto; }
/* The H1 line break: from 1024 px only, a plain space below. */
@media (max-width: 1023px) {
  .br-wide { display: none; }
}
@media (max-width: 767px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); padding: var(--xl) var(--lg) 0; }
  .home-hero__title { font-size: 26px; }
  /* The mockup peeks out of the panel's bottom edge; the landscape frame fits the width. */
  .home-hero__pair { max-width: calc(300px * 1226 / 902); margin-bottom: calc(-1 * var(--xxxl)); }
}
@media (min-width: 768px) {
  .home-hero { grid-template-columns: minmax(360px, 1fr) minmax(0, calc(320px * 1226 / 902)); }
}
/* From 1280 px the copy keeps 600 px so the H1 stays two lines (§9 E57). */
@media (min-width: 1280px) {
  .home-hero { grid-template-columns: minmax(600px, 1fr) minmax(0, calc(420px * 1226 / 902)); }
}

/* Home live blocks: 2/3 + 1/3 from 1280 px */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) {
  .home-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--xl); align-items: start; }
}

/* Sections */
/* Density: 24 px between blocks, 20 px block titles. */
.section { padding: var(--md) 0; }
main { padding: var(--md) 0; }
.section__title { display: flex; align-items: center; gap: var(--sm); font-family: var(--font-head); font-weight: 700; font-size: 20px; margin-bottom: var(--md); }
.section__title .icon { color: var(--primary); }
.empty, .hint { color: var(--text-2); font-size: 14px; }
.hint { margin-top: var(--md); }
/* A hint right under a section title (the home counter line, §9 E66, E92). */
.section__title + .hint { margin: 0 0 var(--md); }
.block__cta { margin-top: var(--lg); }

/* Launchpool cards */
.cards { display: grid; gap: var(--md); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.card { background: var(--surface); border: var(--card-border); border-radius: var(--r-lg); }
.card__link { display: block; padding: var(--lg); color: var(--text); }
.card__link:hover { text-decoration: none; }
.card__head { display: flex; align-items: center; gap: var(--md); }
.card__title { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.card__ticker { font-weight: 700; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sm) var(--md); margin-top: var(--md); padding: var(--md); border-radius: var(--r-md); background: var(--surface-2); }
.metrics dt { font-size: 12px; color: var(--text-3); }
.metrics dd { font-size: 14px; font-weight: 500; }
.metrics__key { text-align: right; }
.metrics__key dd { color: var(--apr); font-weight: 700; }

/* Logos (CoinAvatar: thin ring overlay so dark logos do not dissolve) */
.logo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--icon-row); height: var(--icon-row); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); flex: none; overflow: hidden; }
/* The ticker fallback sits under the image; an opaque image box hides it behind
   transparent logos (ETH, SOL…). A failed load removes the image (onerror in
   coin_logo) and the ticker shows (§9 E72). */
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
/* Ring as an overlay on top of the logo (CoinAvatar §9: never clips the logo). */
.logo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); }
.logo__ticker { font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: -0.02em; }
.logo--t4 .logo__ticker { font-size: 8px; }
.logo--t3 .logo__ticker { font-size: 9px; }

/* Pills */
.pill { display: inline-block; padding: 2px var(--sm); border-radius: var(--r-full); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill--active { color: var(--success-text); background: rgba(16, 185, 129, 0.12); }
.pill--ending { color: var(--warning); background: rgba(245, 158, 11, 0.12); }
.pill--upcoming, .pill--earn { color: var(--link); background: rgba(99, 102, 241, 0.12); }
.pill--ended { color: var(--text-2); background: var(--surface-2); }
.pill--promo { color: var(--warning); background: rgba(245, 158, 11, 0.12); }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: var(--card-border); border-radius: var(--r-lg); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { height: 44px; padding: 0 var(--md); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table thead th { font-size: 12px; font-weight: 500; color: var(--text-3); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody th { font-weight: 400; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .apr { color: var(--apr); font-weight: 700; }
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--text); text-decoration: underline; }
/* /coin/ (§9 E71, E75): the figure only, regular weight, the exchange in the
   cell's title; < 768 px the table drops market cap and the fixed rate. The
   home and /earn/ Earn tables use the same classes (§9 E92). */
.table--coins .apr { font-weight: 400; }
/* Long headers still wrap: one line each, «Найближчий розлок» overflows 1366 px
   by ~60 px (checked for E75). */
.table--coins thead th, .table--coins .sort-link { white-space: normal; }
.table--coins thead th { line-height: 1.25; }
@media (max-width: 767px) {
  .table .col-cap, .table .col-fixed { display: none; }
}
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[aria-sort="ascending"]::after { content: " ↑"; }
.table th[aria-sort="descending"]::after { content: " ↓"; }
.coin { display: flex; align-items: center; gap: var(--sm); color: var(--text); }

/* Tabs without JS (AppTabBar look): radios sit before the bar and panels. */
.tabs__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tabs__bar { display: flex; gap: var(--xl); margin-bottom: var(--lg); border-bottom: 2px solid var(--border); }
.tabs__tab { margin-bottom: -2px; padding: var(--sm) 0; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 600; cursor: pointer; }
.tabs__panel { display: none; }
#changes-prices:checked ~ .tabs__bar [for="changes-prices"],
#changes-rates:checked ~ .tabs__bar [for="changes-rates"] { color: var(--link); border-bottom-color: var(--primary); }
#changes-prices:focus-visible ~ .tabs__bar [for="changes-prices"],
#changes-rates:focus-visible ~ .tabs__bar [for="changes-rates"] { outline: 2px solid var(--primary); outline-offset: 2px; }
#changes-prices:checked ~ .tabs__panel--prices,
#changes-rates:checked ~ .tabs__panel--rates { display: block; }

/* /search results (Spec 164 search) */
.search-results { max-width: 640px; padding: var(--sm) 0; border-radius: var(--r-lg); background: var(--surface); border: var(--card-border); }

/* Movers */
/* Two columns where there is room — also inside the home side column. */
.split { display: grid; gap: var(--lg); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.split__col { background: var(--surface); border: var(--card-border); border-radius: var(--r-lg); padding: var(--sm) 0; }
.split__col .empty { padding: var(--sm) var(--lg); }
.split__title { padding: var(--sm) var(--lg); }
.list__row { display: flex; align-items: center; gap: var(--md); padding: var(--sm) var(--lg); color: var(--text); }
.list__row:hover { text-decoration: none; background: var(--surface-2); }
.list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__value { font-variant-numeric: tabular-nums; }
.up { color: var(--apr); }
.down { color: var(--danger-text); }

/* Footer */
.site-footer { padding: var(--xl) 0; border-top: 1px solid var(--border); color: var(--text-2); font-size: 14px; }
.site-footer__inner { display: grid; gap: var(--sm); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--lg); }
.site-footer__copy { color: var(--text-3); }

.error { text-align: center; display: grid; gap: var(--lg); justify-items: center; }

/* Section pages (Spec 164 §3) */
.page__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sm); font-family: var(--font-head); font-weight: 800; font-size: clamp(24px, 4vw, 32px); line-height: 1.2; }
.page__title .icon { color: var(--primary); width: 26px; height: 26px; }
.page__title-sub { flex-basis: 100%; font-size: 0.6em; font-weight: 600; }
.page__lead { margin-top: var(--md); color: var(--text-2); max-width: 720px; }
.crumbs { font-size: 14px; color: var(--text-3); margin-bottom: var(--sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sm); margin-top: var(--lg); }
.chip { padding: var(--xs) var(--md); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px; }
.chip:hover { text-decoration: none; border-color: var(--primary); }
.chip[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--md); margin-top: var(--lg); font-size: 14px; }
.pool__head { display: flex; align-items: center; gap: var(--md); }
.pool__head .logo { width: 48px; height: 48px; }
.pool__head .logo__ticker { font-size: 16px; }
.pool__head .logo--t4 .logo__ticker, .pool__head .logo--t3 .logo__ticker { font-size: 13px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--md); margin-top: var(--xl); padding: var(--lg); border-radius: var(--r-lg); background: var(--surface); border: var(--card-border); }
.facts dt { font-size: 12px; color: var(--text-3); }
.facts dd { font-weight: 600; }
.facts .apr { color: var(--apr); }
.prose { max-width: 720px; white-space: pre-line; }
.links { display: flex; flex-wrap: wrap; gap: var(--lg); margin-top: var(--md); }
.section__more { margin-left: auto; white-space: nowrap; font-family: var(--font); font-size: 14px; font-weight: 500; }
.faq { display: grid; gap: var(--sm); max-width: 760px; }
.faq dt { font-weight: 600; margin-top: var(--md); }
.faq dd { color: var(--text-2); }

/* Coin page /coin/{id}/: a sticky anchor bar under the top bar; sections stop
   below both. The open tab: the :target section, else the overview (:has). */
.coin-hero__main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--lg); }
.coin-hero__body { display: grid; gap: var(--sm); min-width: 0; }
.coin-hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm) var(--md); }
.coin-hero__row .logo { width: 48px; height: 48px; }
.coin-hero__row .logo__ticker { font-size: 16px; }
.coin-hero__row .logo--t4 .logo__ticker, .coin-hero__row .logo--t3 .logo__ticker { font-size: 13px; }
.coin-hero__title { font-family: var(--font-head); font-size: clamp(24px, 4vw, 32px); font-weight: 800; line-height: 1.2; }
.pill--rank { color: var(--text-2); background: var(--surface); border: 1px solid var(--border); }
.coin-hero__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--xs) var(--lg); }
.coin-hero__price { font-family: var(--font-head); font-size: 24px; font-weight: 800; }
.coin-hero__cta { flex: none; }
/* Sticky tabs (§9 E68): right under the top bar, which keeps --topbar on every
   width; the market strip scrolls away, so it adds nothing. --coin-tabs is the
   bar's height and the sections' anchor offset (html scroll-padding-top already
   covers the top bar). One line on mobile: the bar scrolls sideways. */
.coin-page { --coin-tabs: 46px; }
.coin-tabs { position: sticky; top: var(--topbar); z-index: 10; background: var(--bg); border-bottom: 2px solid var(--border); }
.coin-tabs__inner { display: flex; gap: var(--xl); overflow-x: auto; scrollbar-width: none; }
.coin-tabs__inner::-webkit-scrollbar { display: none; }
.coin-tabs__tab { flex: none; display: flex; align-items: center; height: var(--coin-tabs); margin-bottom: -2px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.coin-tabs__tab:hover { color: var(--text); text-decoration: none; }
.coin-page:has(#overview:target) .coin-tabs__tab[href="#overview"],
.coin-page:has(#earn:target) .coin-tabs__tab[href="#earn"],
.coin-page:has(#launchpool:target) .coin-tabs__tab[href="#launchpool"],
.coin-page:not(:has(.coin-section:target)) .coin-tabs__tab[href="#overview"] { color: var(--text); border-bottom-color: var(--primary); }
.coin-section { scroll-margin-top: var(--coin-tabs); }
.coin-cards { display: grid; gap: var(--md); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.coin-card { display: flex; flex-direction: column; gap: var(--xs); padding: var(--lg); border-radius: var(--r-lg); background: var(--surface); border: var(--card-border); }
.coin-card__title { display: flex; align-items: center; gap: var(--sm); font-size: 14px; font-weight: 600; color: var(--text-2); }
.coin-card__title .icon { color: var(--primary); width: 18px; height: 18px; }
.coin-card__value { font-family: var(--font-head); font-size: 24px; font-weight: 800; }
.coin-card__value.apr { color: var(--apr); }
.coin-card__list { display: grid; gap: var(--xs); font-size: 14px; }
.coin-card__rates { display: grid; gap: var(--xs); }
.coin-card__rates li { display: flex; justify-content: space-between; gap: var(--md); }
.coin-card__rates .apr { color: var(--apr); }
/* Earn tab (§9 E77, E79): two blocks side by side from 900 px (the overview
   cards' gap), each as tall as it needs; one block takes the width. The link
   out is an ↗ icon with a ≥ 32 px hit area. */
.earn-blocks { display: grid; gap: var(--md); align-items: start; }
@media (min-width: 900px) {
  .earn-blocks--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.earn-block .coin-subtitle { margin-top: 0; }
.table--earn th:first-child { width: 100%; }
.earn-ex, .chip--icon { display: inline-flex; align-items: center; gap: var(--sm); }
/* One label next to a row icon: the pool table's coin, the Earn exchange, the chip. */
.coin-page .table .coin b, .coin-page .earn-ex, .coin-page .chip--icon { font-size: 14px; font-weight: 600; color: var(--text); }
.chip--icon { padding-left: var(--xs); }
.ex-logo { width: var(--icon-row); height: var(--icon-row); flex: none; border-radius: var(--r-full); object-fit: cover; background: var(--surface); }
/* The coin column takes the slack, the ↗ column hugs its icon (§9 E88). */
.table--coins .col-coin { width: 100%; }
.table .earn-link-col { width: 1%; padding-left: 0; text-align: right; }
.earn-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; color: var(--text-2); border-radius: var(--r-md); }
.earn-link:hover { color: var(--link); }
.earn-link .icon { width: 18px; height: 18px; }
/* Exchange list (§9 E86): a group header over BTC / ETH / USDT; < 768 px the
   list keeps the rates and drops volume, trust and pools in 12 months. */
.table--exchanges .th-group { text-align: center; border-bottom: 1px solid var(--border); }
.table--exchanges .apr { font-weight: 400; }
@media (max-width: 767px) {
  .table--exchanges .col-vol, .table--exchanges .col-trust, .table--exchanges .col-p12 { display: none; }
}
/* Exchange pages (§9 E84–E85, E88–E90): the coin page's header — crumbs, name
   with the Trust chip, the muted facts line, the sign-up button right with the
   disclosure under it (under the facts below 768 px); under a rule the fee
   chips and, pushed right, the native token's discount, all regular weight.
   Then four overview cards; every rate in a table at regular weight (cards
   excepted). */
.exchange-hero__facts { color: var(--text-2); }
.exchange-hero__cta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--xs); }
.exchange-hero__cta .hint { margin-top: 0; }
.exchange-head__fees { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm); margin-top: var(--lg); padding-top: var(--lg); border-top: 1px solid var(--border); }
.exchange-head__native { margin-left: auto; white-space: normal; font-size: 13px; font-weight: 400; }
.pill--fact { color: var(--text); background: var(--surface-2); font-size: 13px; font-weight: 400; }
@media (max-width: 767px) {
  .exchange-hero__cta { align-items: flex-start; }
  .exchange-head__native { margin-left: 0; }
}
.exchange-page .table .apr { font-weight: 400; }
.exchange-cards { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
/* Launchpools (§9 E87–E88): live cards (two columns) left, the months chart
   right; below 900 px stacked; without live pools the chart takes the width. */
.exchange-pools { display: grid; gap: var(--lg); align-items: start; }
@media (min-width: 900px) {
  .exchange-pools--two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (min-width: 600px) {
  .exchange-pools__live .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.exchange-pools__months .coin-subtitle { margin-top: 0; }
.exchange-pools__months .empty { margin-bottom: var(--md); }
/* Under the Earn blocks: the note, the button under it; right, left on mobile. */
.earn-note { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sm); margin-top: var(--md); text-align: right; }
.earn-note .hint { margin-top: 0; }
@media (max-width: 767px) {
  .earn-note { align-items: flex-start; text-align: left; }
}
.coin-card__chips { display: flex; flex-wrap: wrap; gap: var(--sm); margin-top: var(--xs); }
/* «Про {Name}» and the description (Spec 171 §3.1–3.2). */
.coin-about, .coin-desc { max-width: 760px; }
/* «Про {Name}» (Spec 171 §3.1): a facts grid in a card like the exchange page's
   counters — 2 columns, 4 from 900px; label / value / line under it. */
.coin-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lg) var(--md); margin: var(--md) 0; padding: var(--lg); border-radius: var(--r-lg); background: var(--surface); border: var(--card-border); }
@media (min-width: 900px) { .coin-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.coin-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coin-fact dt, .coin-fact__sub { font-size: 11px; color: var(--text-2); }
.coin-fact dd { font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
.coin-fact dd.coin-fact__sub { font-size: 11px; }
.coin-about__chips { display: flex; flex-wrap: wrap; gap: var(--xs); margin: var(--md) 0; }
.chip--sm { padding: 2px var(--sm); font-size: 11px; }
.coin-about__chips .chip:hover { border-color: var(--border); }
.coin-about__links { margin-top: var(--sm); font-size: 12px; }
.coin-about__polarly { display: flex; align-items: center; gap: var(--sm); margin-top: var(--md); padding: var(--sm) var(--md); border-radius: var(--r-md); background: var(--surface); border: var(--card-border); font-size: 14px; }
.coin-about__polarly img { flex: none; }
.coin-about__polarly .apr { color: var(--apr); }
.coin-desc__note { margin: 0 0 var(--md); }
.coin-desc__more summary { cursor: pointer; color: var(--primary); margin: 0 0 var(--md); }
.coin-card__more { margin-top: auto; padding-top: var(--sm); font-size: 14px; }
.coin-subtitle { font-family: var(--font-head); font-weight: 700; font-size: 17px; margin: var(--xl) 0 var(--md); }

/* SEO text blocks rendered from content/{locale}/*.md */
.prose-md { max-width: 760px; color: var(--text-2); }
.prose-md h2 { font-family: var(--font-head); font-size: 20px; color: var(--text); margin: var(--xl) 0 var(--sm); }
.prose-md h3 { font-size: 16px; color: var(--text); margin: var(--lg) 0 var(--xs); }
.prose-md p, .prose-md ul, .prose-md ol { margin: 0 0 var(--md); }
.prose-md ul, .prose-md ol { padding-left: var(--xl); list-style: revert; }
.prose-md table { border-collapse: collapse; margin: 0 0 var(--md); font-size: 14px; }
.prose-md th, .prose-md td { border-bottom: 1px solid var(--border); padding: var(--sm) var(--md); text-align: left; }
.seo-text { border-top: 1px solid var(--border); }

/* Launchpools by month (§4.9): CSS bars, no chart library */
.bars { display: grid; gap: var(--xs); max-width: 640px; padding: 0; list-style: none; }
.bars__row { display: grid; grid-template-columns: 72px 1fr 32px; align-items: center; gap: var(--sm); font-size: 13px; }
.bars__label { color: var(--text-3); font-variant-numeric: tabular-nums; }
.bars__track { height: 10px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.bars__fill { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.bars__value { text-align: right; font-variant-numeric: tabular-nums; }

/* /app/ showcase — landing sections (Spec 032) on the site's tokens */
/* Official store badges (§9 E93): the artwork is never scaled unevenly or recoloured —
   fixed height, auto width; hover only dims it. Clear space ≥ ¼ of the height. */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md); }
.badge { display: inline-flex; border-radius: var(--r-sm); transition: opacity 0.15s; }
.badge:hover { opacity: 0.85; text-decoration: none; }
.badge img { display: block; width: auto; height: 40px; }
.badges--small { gap: var(--sm); }
.badges--small .badge img { height: 32px; }
.badges__soon { font-size: 13px; color: var(--text-3); }
.badges__note { margin-top: var(--sm); }
/* Badges + the /get QR side by side; the QR only from 900 px (§9 E93). */
.get { display: flex; align-items: center; gap: var(--xl); }
.get__qr { display: none; width: 104px; height: 104px; border-radius: var(--r-md); }
@media (min-width: 900px) {
  .get__qr { display: block; }
}
/* Six cards: 1 / 2 / 3 columns, never a 4 + 2 split (§9 E93). */
.feature-grid { display: grid; gap: var(--lg); grid-template-columns: minmax(0, 1fr); padding: 0; list-style: none; }
@media (min-width: 600px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.feature { padding: var(--lg); border-radius: var(--r-lg); background: var(--surface); border: var(--card-border); }
.feature__icon { display: inline-flex; padding: var(--sm); border-radius: var(--r-md); background: rgba(99, 102, 241, 0.12); color: var(--primary); }
.feature__title { margin-top: var(--md); font-size: 16px; font-weight: 600; }
.feature__desc { margin-top: var(--xs); color: var(--text-2); font-size: 14px; }
.trust-list { display: grid; gap: var(--lg); padding: 0; list-style: none; }
.trust-item { display: flex; gap: var(--md); align-items: flex-start; }
.trust-item .feature__title { margin-top: 0; }
.screens { background: var(--surface-2); }
/* The closing strip of /app/: badges + QR, the channel on the right. */
.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--xl); padding: var(--xl); border-radius: var(--r-xl); background: var(--surface); border: var(--card-border); }
.cta-strip__channel { display: inline-flex; align-items: center; gap: var(--sm); font-weight: 500; }
.cta-strip__channel .icon { width: 18px; height: 18px; }
.screens-row { display: flex; gap: var(--xl); overflow-x: auto; padding-bottom: var(--sm); scroll-snap-type: x mandatory; }
.screen-item { flex: 0 0 auto; width: 200px; margin: 0; scroll-snap-align: center; }
.phone { position: relative; padding: 10px; background: #14141b; border: 1px solid #2a2a3a; border-radius: 38px; }
.phone__notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; background: #000; border-radius: var(--r-full); z-index: 2; }
.phone__screen { position: relative; aspect-ratio: 9 / 19.5; border-radius: 28px; overflow: hidden; background: var(--surface-2); }
.phone__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen-item__cap { margin-top: var(--md); text-align: center; font-size: 14px; font-weight: 500; color: var(--text-2); }

/* app.polarly.app landing (Spec 164 §5) */
.go { min-height: 100vh; display: grid; place-items: center; padding: var(--lg); }
.go__card { width: 100%; max-width: 440px; display: grid; gap: var(--md); justify-items: center; text-align: center; padding: var(--xl); border-radius: var(--r-xl); background: var(--surface); border: var(--card-border); }
.go__lead { color: var(--text-2); }
/* app.polarly.app: the one action on a phone screen keeps a 48 px tap target. */
.go .btn { min-height: 48px; padding: 0 var(--xl); font-size: 15px; }
.go__qr { width: 212px; height: 212px; border-radius: var(--r-md); }
.go .badges { justify-content: center; }