/*
  Raster icons in this file use root-relative URLs (/assets/png/...). That matches
  nginx docroot and pretty paths (/stars, /premium, /gifts, /developers). For file:// opens, use a
  local static server; root-relative paths have no stable base on disk.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /*
    Palette — OLED black shell + periwinkle accent (roles + hex).
    #000000 shell-bg | #0c0c0f surface | #18181c raised | #2a2a30 chip-fill/header-bar
    #f2f5f9 text-strong | #9aa3b2 text-muted | #c5ced9 text-soft
    #82a0ff accent/link | #4858d2 solid-cta | #6070e8 cta-hover
    #f06969 error-solid | #4ade99 success-soft | #8b87ff premium-violet
  */
  /* --- Structural RGB (referenced by overlays) --- */
  --site-bg-rgb: 0, 0, 0;
  --site-header-bg-rgb: 8, 8, 10;
  --site-btn-header-bg-rgb: 42, 42, 48;
  --site-text-muted-rgb: 154, 163, 178;
  --site-accent-rgb: 130, 160, 255;
  --site-btn-primary-rgb: 72, 88, 210;
  /* Surfaces */
  --site-bg: rgb(var(--site-bg-rgb));
  --site-shell-bg: var(--site-bg);
  --site-surface-rgb: 12, 12, 15;
  --site-surface: rgb(var(--site-surface-rgb));
  --site-raised-rgb: 24, 24, 28;
  --site-raised: rgb(var(--site-raised-rgb));
  --site-banner-bg: var(--site-header-bg);
  --site-header-bg: rgb(var(--site-header-bg-rgb));
  --site-header-pill-fill: rgb(var(--site-btn-header-bg-rgb));
  /* Primary CTAs — periwinkle ladder */
  --site-btn-primary: rgb(var(--site-btn-primary-rgb));
  --site-btn-primary-hover-rgb: 96, 112, 232;
  --site-btn-primary-hover: rgb(var(--site-btn-primary-hover-rgb));
  --site-accent: rgb(var(--site-accent-rgb));
  --site-nav-underline: var(--site-accent);
  --site-accent-soft: rgba(var(--site-accent-rgb), 0.14);
  --site-accent-muted: rgba(var(--site-accent-rgb), 0.55);
  /* Header bar edge: accent-tinted, aligned with muted text (not flat white alpha). */
  --site-header-border: rgba(var(--site-accent-rgb), 0.14);
  /* Fields — raised matte, darker on focus */
  --site-field-bg: rgb(var(--site-raised-rgb));
  --site-field-bg-focus: rgb(16, 16, 20);
  /* Text */
  --site-text-muted: rgb(var(--site-text-muted-rgb));
  --site-input-placeholder: rgba(var(--site-text-muted-rgb), 0.72);
  --site-text-strong: rgba(242, 245, 249, 0.98);
  --site-text-soft: rgba(197, 206, 217, 0.92);
  /* Header nav tabs: same family as body muted text. */
  --site-header-tab-rgb: var(--site-text-muted-rgb);
  /* Header wordmark + primary page `main h1` (Liquid Optics .main-title pattern). */
  --site-page-title-grad: linear-gradient(180deg, #f4f6fa 0%, #7a8290 100%);
  --site-page-title-shadow: 0 3px 18px rgba(0, 0, 0, 0.65);
  /* Semantic */
  --color-error-rgb: 240, 105, 105;
  --color-error: rgb(var(--color-error-rgb));
  --color-error-bg: rgba(var(--color-error-rgb), 0.94);
  --color-success-rgb: 74, 222, 153;
  --color-success-muted: rgba(var(--color-success-rgb), 0.92);
  /* Premium stripe (distinct from periwinkle accent) */
  --color-premium-rgb: 139, 135, 255;
  --color-premium-soft: rgba(124, 92, 255, 0.16);
  --color-premium-border: rgba(159, 140, 255, 0.34);
  /* Warning (non-destructive) */
  --color-warning-rgb: 251, 191, 117;
  /* White overlays (surfaces — no gradients on shells) */
  --color-overlay-015: rgba(255, 255, 255, 0.04);
  --color-overlay-02: rgba(255, 255, 255, 0.045);
  --color-overlay-03: rgba(255, 255, 255, 0.055);
  --color-overlay-04: rgba(255, 255, 255, 0.06);
  --color-overlay-05: rgba(255, 255, 255, 0.05);
  --color-overlay-055: rgba(255, 255, 255, 0.08);
  --color-overlay-065: rgba(255, 255, 255, 0.1);
  --color-overlay-08: rgba(255, 255, 255, 0.12);
  --color-overlay-12: rgba(255, 255, 255, 0.18);
  --color-overlay-14: rgba(255, 255, 255, 0.2);
  --color-chip-hover: rgb(48, 48, 54);
  --color-shadow-elevated: rgba(0, 0, 0, 0.55);
  --elevation-soft: 0 4px 20px rgba(0, 0, 0, 0.45);
  --elevation-strong: 0 12px 36px rgba(0, 0, 0, 0.58);
  --color-focus-ring-strong: rgba(var(--site-accent-rgb), 0.45);
  /* nav-pill segmented track + underline (JS reads layout only; --pill-* position) */
  --pill-track-fill: rgba(255, 255, 255, 0.08);
  --pill-switch-thumb: rgba(255, 255, 255, 0.14);
  /* Motion */
  --site-def-transition: color 165ms cubic-bezier(0.4, 0, 0.2, 1), border-color 165ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 165ms cubic-bezier(0.4, 0, 0.2, 1), opacity 165ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Layout */
  --site-content-max: 1120px;
  --site-pad-x: clamp(14px, 3vw, 22px);
  --site-section-block: clamp(1.25rem, 4vw, 3rem);
  --site-gap-sm: 0.5rem;
  --site-gap-md: 0.875rem;
  --site-gap-lg: 1.25rem;
  --site-border: rgba(255, 255, 255, 0.1);
  --site-border-muted: rgba(255, 255, 255, 0.07);
  --site-border-strong: rgba(255, 255, 255, 0.14);
  --site-border-hover: rgba(255, 255, 255, 0.2);
  --site-focus-ring: 0 0 0 2px rgba(var(--site-accent-rgb), 0.35);
  --site-focus-offset: 2px;
  --radius-ui: 8px;
  --radius-panel: 12px;
  --site-header-h: calc(102px * 1.2);
  --stars-fragment-column-max: min(34rem, 100%);
  /*
    Liquid glass — site form fields (Liquid Optics adj.: blur + saturate + rgba + inset rim).
    Kept opaque enough for placeholder/value contrast on --site-shell-bg.
  */
  --input-glass-blur: 14px;
  --input-glass-border-color: rgba(255, 255, 255, 0.14);
  --input-glass-fill: rgba(var(--site-raised-rgb), 0.52);
  --input-glass-fill-hover: rgba(var(--site-raised-rgb), 0.58);
  --input-glass-fill-focus: rgba(var(--site-raised-rgb), 0.66);
  --input-glass-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.11);
  --input-glass-inset-deep: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  /*
    Liquid pebble optics — transferable static patterns (elevated rounding, layered shadow, eased motion).
    Not the demo runtime (canvas/SVG spring sims stay on the showcase site).
  */
  --radius-pebble: clamp(17px, 2.1vw, 26px);
  --elev-pebble: 0 18px 44px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --site-motion-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --site-motion-tap: 165ms cubic-bezier(0.33, 1, 0.68, 1);
  /*
    Fluid Input (Liquid Optics demo exhibit 09) — static single-layer approximation of
    .liquid-input-inner + .liquid-input-field (no SVG displacement).
  */
  --input-fluid-radius: 100px;
  --input-fluid-min-height: 3.75rem;
  --input-fluid-pad-y: 0.85rem;
  --input-fluid-pad-x: 2rem;
  --input-fluid-pad-left-icon: 2.7rem;
  --input-fluid-bg: rgba(0, 0, 0, 0.2);
  --input-fluid-bg-focus: rgba(0, 0, 0, 0.24);
  --input-fluid-border: rgba(255, 255, 255, 0.1);
  --input-fluid-border-hover: rgba(255, 255, 255, 0.14);
  --input-fluid-border-focus: rgba(255, 255, 255, 0.3);
  --input-fluid-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.4);
  --input-fluid-shadow-focus: inset 0 2px 5px rgba(0, 0, 0, 0.2), 0 20px 50px rgba(0, 0, 0, 0.6);
  --input-fluid-transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease,
    backdrop-filter 0.3s ease;
  /*
    Liquid Optics §09 — Durovs outer tray (CSS backdrop stack only; no SVG url(#) — see deliverable).
    Blur capped at 20px (demo SVG uses light blur + displacement; CSS-only stack uses modest blur for weight + iOS cost).
  */
  --liquid-field-blur: 20px;
  --liquid-field-saturate: 168%;
  --liquid-field-glass-tint: rgba(0, 0, 0, 0.2);
  --liquid-field-glass-tint-focus: rgba(0, 0, 0, 0.26);
  --liquid-field-glass-tint-hover: rgba(0, 0, 0, 0.22);
  --liquid-field-border: rgba(255, 255, 255, 0.1);
  --liquid-field-border-hover: rgba(255, 255, 255, 0.16);
  --liquid-field-border-focus: rgba(255, 255, 255, 0.3);
  --liquid-field-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 20px 40px rgba(0, 0, 0, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.22);
  --liquid-field-shadow-focus:
    inset 0 2px 5px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 20px 50px rgba(0, 0, 0, 0.58),
    0 4px 14px rgba(0, 0, 0, 0.28);
  --liquid-tray-blur: 18px;
  --liquid-tray-saturate: 155%;
}

@media (prefers-color-scheme: light) {
  :root {
    --site-page-title-grad: linear-gradient(180deg, #ffffff 0%, #66667a 100%);
    --site-page-title-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
}

@media (min-width: 768px) {
  :root {
    --site-header-h: calc(56px * 1.2);
  }
}

html {
  color-scheme: dark;
  /* Fluid root (~15–17px). Fragment uses html { font-size: 10px } + rem sizing; copying 10px would break this site’s rem scale. */
  font-size: clamp(15px, 0.28vw + 13.9px, 17px);
  scroll-padding-top: calc(var(--site-header-h) + 8px);
}

body {
  margin: 0;
  min-height: 100dvh;
  padding-top: var(--site-header-h);
  color: var(--site-text-muted);
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif,
    "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", emoji;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--site-shell-bg);
}

/*
  Header: fragment-like solid bar — brand | centered text nav (active = blue underline) | pill chips right.
*/
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  margin: 0 auto;
  padding: 0;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background-color: var(--site-header-bg);
  border-bottom: 1px solid var(--site-header-border);
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(var(--site-accent-rgb), 0.06);
}

.site-header__inner {
  width: 100%;
  /* Full-bleed bar: without this, a centered max-width hides flush-left brand on wide viewports. */
  max-width: none;
  margin: 0 auto;
  padding: calc(11px * 1.2) var(--site-pad-x) calc(12px * 1.2);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.85rem;
}

@media (min-width: 768px) {
  .site-header__inner {
    padding: 0 var(--site-pad-x);
    min-height: var(--site-header-h);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
  }

  .site-header__left {
    justify-self: start;
    grid-column: 1;
  }

  .site-header__segmented {
    justify-self: center;
    grid-column: 2;
    /* Allow the center track to shrink so side columns keep room for TonConnect (grid is 1fr / auto / 1fr). */
    min-width: 0;
  }

  .site-header__wallet-cluster {
    justify-self: end;
    grid-column: 3;
  }
}

@media (max-width: 767px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.65rem;
    row-gap: calc(6px * 1.2);
    align-items: center;
  }

  .site-header__left {
    grid-column: 1;
    grid-row: 1;
  }

  .site-header__segmented {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-header__wallet-cluster {
    grid-column: 2;
    grid-row: 1;
  }
}

.site-header--no-nav .site-header__inner {
  display: flex;
  min-height: 0;
}

@media (min-width: 768px) {
  .site-header--no-nav .site-header__inner {
    min-height: var(--site-header-h);
  }
}

.site-header--no-nav .site-header__wallet-cluster {
  margin-left: auto;
}

.site-header__brand-link {
  display: flex;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  /* Same single shadow as .site-header__title; applied here so the masked logo span avoids mask+filter bugs. */
  filter: drop-shadow(var(--site-page-title-shadow));
}

.site-header__brand-link:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: var(--site-focus-offset);
}

.site-header__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  /* Flush logo + wordmark to the bar’s left edge (inner horizontal padding cancelled). */
  margin-left: calc(-1 * var(--site-pad-x));
}

@media (min-width: 768px) {
  .site-header__left {
    min-width: 0;
  }
}

/* Center nav: muted links; active row = accent underline — no sliding pill track */
.site-header__segmented {
  position: relative;
  justify-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.05rem;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.site-header__segmented::-webkit-scrollbar {
  display: none;
}

/* Explicit stack so Stars/Premium (`body.stars-page`) cannot shift nav via `main` or missing Plus Jakarta loads. */
.site-header .site-header__segmented-link {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.site-header__segmented-link {
  position: relative;
  z-index: 1;
  text-decoration: none;
  box-sizing: border-box;
  color: rgba(var(--site-header-tab-rgb), 0.82);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  padding: calc(0.72rem * 1.2) calc(0.72rem * 1.2) calc(calc(0.72rem * 1.2) + 2px);
  border: none;
  border-radius: 0;
  margin: 0;
  background: transparent;
  transition: color 0.14s ease-out;
}

.site-header__segmented-link::after {
  content: "";
  position: absolute;
  left: calc(0.72rem * 1.2);
  right: calc(0.72rem * 1.2);
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}

.site-header__segmented-link:hover {
  color: var(--site-text-strong);
}

.site-header__segmented-link:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: var(--site-focus-offset);
}

.site-header__segmented-link.is-active {
  color: var(--site-text-strong);
}

.site-header__segmented-link.is-active::after {
  background: var(--site-nav-underline);
}

button.site-header__segmented-link {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  margin: 0;
  font: inherit;
  text-align: center;
}

button.site-header__segmented-link:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: var(--site-focus-offset);
}

.wallet-menu-trigger--pill {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  max-width: min(200px, 46vw);
  min-height: calc(36px * 1.2);
  height: auto !important;
  padding: 0.26rem 0.48rem !important;
  gap: 0.26rem !important;
  border-radius: 999px !important;
  background: rgba(var(--site-btn-header-bg-rgb), 0.52);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  display: inline-flex !important;
  align-items: center;
}

.wallet-menu-trigger--pill .wallet-menu-trigger__addr {
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--site-text-strong);
  letter-spacing: 0.02em;
  max-width: min(92px, 22vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-menu-trigger--pill .wallet-menu-trigger__ton img {
  display: block;
  width: 17px;
  height: 17px;
}

.wallet-menu-trigger--pill .wallet-menu-trigger__chev {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.78;
}

/* Settings (two-line icon): flush to header / screen edge; no hover or pressed chrome. */
.header-settings-wrap {
  margin-left: auto;
  margin-right: calc(-1 * var(--site-pad-x));
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

.header-settings-wrap .header-settings-trigger.wallet-menu-trigger {
  box-sizing: border-box;
  width: auto;
  min-width: calc(2.75rem * 1.2);
  min-height: calc(2.75rem * 1.2);
  height: auto;
  padding: 0.35rem;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.header-settings-wrap .header-settings-trigger.wallet-menu-trigger:hover,
.header-settings-wrap .header-settings-trigger.wallet-menu-trigger:active {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Settings: two bars animate into an X when the panel is open. */
.header-settings-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit;
}

.header-settings-icon__bar {
  position: absolute;
  left: 2px;
  right: 2px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition:
    transform 0.32s var(--site-motion-smooth-out),
    top 0.32s var(--site-motion-smooth-out);
}

.header-settings-icon__bar--top {
  top: 7px;
}

.header-settings-icon__bar--bottom {
  top: 15px;
}

.header-settings-trigger.wallet-menu-trigger[aria-expanded="true"] .header-settings-icon__bar--top {
  top: 11px;
  transform: rotate(45deg);
}

.header-settings-trigger.wallet-menu-trigger[aria-expanded="true"] .header-settings-icon__bar--bottom {
  top: 11px;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .header-settings-icon__bar {
    transition: none;
  }
}

.site-header__brand-row {
  display: flex;
  align-items: center;
  gap: 0.52rem;
  min-width: 0;
}

/*
  Header mark: full-color glossy PNG (square). Gradient mask overlay disabled so colors stay intact;
  drop-shadow stays on .site-header__brand-link. Wrap has explicit size so flex never collapses the hit target.
*/
.site-header__logo-wrap {
  position: relative;
  display: block;
  flex: 0 0 auto;
  flex-shrink: 0;
  box-sizing: border-box;
  --logo-h: calc(39px * 1.2);
  width: var(--logo-h);
  height: var(--logo-h);
}

.site-header__logo-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: contain;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.site-header__logo-fill {
  display: none;
}

@media (min-width: 681px) {
  .site-header__logo-wrap {
    --logo-h: calc(54px * 1.2);
  }
}

/* Matches cheerful-muffin demo header h1 (.main-title): Nunito 900, tight tracking, vertical gradient fill (--site-page-title-*). */
.site-header__brand.site-header__title,
.site-header__brand {
  font-family: "Nunito", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.375rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--site-text-strong);
  min-width: 0;
  filter: drop-shadow(var(--site-page-title-shadow));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-header__brand.site-header__title,
  .site-header__brand {
    background-image: var(--site-page-title-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.site-header__wallet-cluster {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 1 1 auto;
  position: relative;
  z-index: 2;
  /* Do not use min-width:0 here — with a wide center nav column (many tabs), grid track 3 can
     collapse to 0 and hide TonConnect + settings. Prefer nav to scroll (see .site-header__segmented). */
  min-width: min-content;
}

.header-wallet {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-width: min(96px, 100%);
  min-height: calc(44px * 1.2);
}

.header-wallet.is-disconnected .wallet-menu-wrap {
  display: none !important;
}

/*
  Connect: official @tonconnect/ui control in #durovs-ton-connect-host (TonConnectUI `buttonRootId`).
  Colors come from `buildDurovsTonConnectUiPreferences` + constructor `uiPreferences`; rules below catch
  late paint / inline styles so the pill matches the site accent. When connected, we hide this host.
*/
#header-wallet.is-connected #durovs-ton-connect-host {
  display: none !important;
}

#header-wallet.is-connected .durovs-ton-connect-host-slot {
  display: none !important;
}

/* Account: host lives in `.account-ton-connect-slot` (not under #header-wallet). */
#account-main.account-main--profile.account-main--connected .account-ton-connect-slot {
  display: none !important;
}

/* In-DOM only on index/news/stars/premium — no visible header pill; keeps TonConnect init + restore.
   SDK may use position:fixed inside the host — overflow/clip on ancestors does not clip fixed descendants,
   so we also force opacity/visibility/transform on the host. */
.durovs-ton-connect-host-slot.durovs-ton-connect-host-slot--visually-hidden {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.durovs-ton-connect-host-slot--visually-hidden .header-ton-connect-anchor {
  min-height: 0;
  min-width: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#header-wallet .durovs-ton-connect-host-slot--visually-hidden #durovs-ton-connect-host {
  min-width: 0 !important;
  min-height: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(0);
  transform-origin: top left;
  clip-path: inset(50%) !important;
}

/* Wallet errors (`#ton-connect-error`) live outside this slot on index/news/stars/premium so they stay visible. */

/* Headless mount for Stars/Premium payment-only TonConnectUI (no second Connect pill). */
#durovs-payment-ton-connect-host {
  position: absolute;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border: 0;
  clip-path: inset(50%);
}

.header-ton-connect-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(44px * 1.2);
}

/* TonConnect injects late; an empty host has no intrinsic width — reserve space so the header column cannot clip to 0. */
#durovs-ton-connect-host {
  min-height: calc(44px * 1.2);
  min-width: min(13rem, 78vw);
}

/* Primary connect CTA — align with --site-btn-primary (SDK may set green before uiPreferences apply). */
#durovs-ton-connect-host [data-tc-button="true"] {
  box-sizing: border-box;
  min-height: calc(44px * 1.2) !important;
  padding: 0.52rem 1.15rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  gap: 0.42rem !important;
  background-color: var(--site-btn-primary) !important;
  color: rgba(242, 245, 249, 0.98) !important;
  border-color: rgba(var(--site-accent-rgb), 0.35) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

#durovs-ton-connect-host [data-tc-button="true"] svg {
  width: 1.2em !important;
  height: 1.2em !important;
  flex-shrink: 0;
}

#durovs-ton-connect-host [data-tc-connect-button-loading="true"] {
  box-sizing: border-box;
  min-height: calc(44px * 1.2) !important;
  padding: 0.52rem 1.15rem !important;
  font-size: 0.9rem !important;
}

#durovs-ton-connect-host [data-tc-button="true"]:hover {
  background-color: var(--site-btn-primary-hover) !important;
  border-color: rgba(var(--site-accent-rgb), 0.5) !important;
}

@media (prefers-reduced-motion: reduce) {
  #durovs-ton-connect-host [data-tc-button="true"] {
    transition: none;
  }
}

/* Connected: hide wallet menu strip (pill + compact). Telegram login mounts only on /account (`.account-telegram-panel`). */
#header-wallet.is-connected .wallet-menu-trigger--pill {
  display: none !important;
}

.wallet-menu-trigger.wallet-menu-trigger--compact {
  display: none;
}

/* OIDC control: official ``.tg-auth-button`` styles come from telegram.org/js/telegram-login.js */

.header-wallet--empty {
  min-width: 0;
}

.wallet-menu-wrap {
  position: relative;
  display: inline-flex;
}

/* Author `display: inline-flex` must not defeat the HTML `hidden` attribute on #wallet-menu-wrap. */
.wallet-menu-wrap[hidden] {
  display: none !important;
}

.wallet-menu-trigger {
  box-sizing: border-box;
  width: calc(44px * 1.2);
  height: calc(44px * 1.2);
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--site-border-strong);
  background: var(--site-header-pill-fill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-strong);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wallet-menu-trigger:hover {
  background: var(--color-chip-hover);
  border-color: var(--site-border-hover);
}

.wallet-menu-trigger:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.5);
  outline-offset: 2px;
}

.wallet-menu-trigger__icon {
  display: block;
  width: 20px;
  height: 20px;
}

.wallet-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 164px;
  padding: 0.45rem;
  border-radius: var(--radius-panel);
  background: var(--site-header-bg);
  border: 1px solid var(--site-border);
  box-shadow: var(--elevation-strong);
}

.wallet-menu-panel.is-open {
  display: flex;
}

.wallet-menu-panel__link,
.wallet-menu-panel__btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--site-text-soft);
  text-decoration: none;
  text-align: left;
  width: 100%;
  padding: 0.48rem 0.62rem;
  border-radius: var(--radius-ui);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.wallet-menu-panel__link:hover,
.wallet-menu-panel__btn:hover {
  border-color: rgba(var(--site-accent-rgb), 0.35);
  background: var(--color-overlay-02);
}

.wallet-menu-panel__link:focus-visible,
.wallet-menu-panel__btn:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: 1px;
}

.surface-pebble {
  border-radius: var(--radius-pebble);
  border: 1px solid var(--site-border);
  box-shadow: var(--elev-pebble);
}

main.home-main--optics {
  padding-top: clamp(1.5rem, 4.5vw, 3rem);
}

.home-main {
  max-width: min(var(--site-content-max), 100%);
  margin: 0 auto;
  padding: var(--site-section-block) var(--site-pad-x);
}

.home-lead {
  margin-top: var(--site-gap-md);
  font-size: clamp(0.96rem, 0.35vw + 0.9rem, 1.02rem);
  line-height: 1.55;
  max-width: min(52ch, 100%);
  color: var(--site-text-soft);
}

.home-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-gap-sm);
  margin-top: var(--site-gap-lg);
}

.home-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--site-text-strong);
  background: var(--site-header-pill-fill);
  border: 1px solid var(--site-border);
  box-shadow: var(--elevation-soft);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.home-cta__link:hover {
  background: rgba(var(--site-btn-header-bg-rgb), 0.88);
  border-color: var(--site-border-hover);
}

.home-main .home-lead a {
  color: var(--site-accent);
  text-decoration: none;
}

.home-main .home-lead a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-main {
  max-width: min(var(--site-content-max), 100%);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 3rem) var(--site-pad-x);
}

.account-address-wrap {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.account-address-wrap--secondary {
  margin-top: 0.7rem;
}

.account-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

.account-address {
  display: block;
  word-break: break-all;
  font-size: 0.9rem;
  padding: 0.65rem 0.85rem;
  background: var(--color-overlay-04);
  border-radius: var(--radius-ui);
  border: 1px solid var(--site-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.account-hint {
  margin-top: var(--site-gap-lg);
  max-width: min(62ch, 100%);
  color: var(--site-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.account-hero {
  margin-bottom: 0;
}

.account-main .account-lead {
  margin: 0.5rem 0 0;
  max-width: min(52ch, 100%);
  font-size: clamp(0.94rem, 0.28vw + 0.88rem, 1.02rem);
  line-height: 1.55;
  color: var(--site-text-soft);
}

.account-main > .account-banner {
  opacity: 1;
}

/* Account — compact profile (avatar top-left, stats row). */
/* Account route: shared width for sticker, in-page Ton Connect, and (when connected) header wallet pill. */
body.account-page {
  --account-sticker-w: min(90vw, clamp(11rem, 48vmin, 21rem));
  /* Wider than global --site-content-max so profile + notes use large viewports. */
  --account-page-max: min(1400px, calc(100vw - 2 * var(--site-pad-x)));
}

body.account-page #account-main.account-main {
  max-width: var(--account-page-max);
  width: 100%;
}

.account-main--profile {
  /*
    Fluid “account UI” scale: `vmin` tracks the smaller screen dimension so
    sticker, CTA, and connected profile stay proportionate on phones, tablets,
    and large desktops (capped so ultrawide layouts don’t overshoot).
  */
  --account-sticker-max: var(--account-sticker-w, min(90vw, clamp(11rem, 48vmin, 21rem)));
  /*
    Square PFP: one length for both axes. Middle term is the minimum of (a) the
    classic vmin fluid cap, (b) vertical budget under the fixed header, (c)
    horizontal page width — so landscape vs portrait and “top banner” height
    both pull the same square size instead of only vmin.
  */
  --account-avatar-pad-below-header: clamp(2rem, 5vmin, 3.25rem);
  --account-avatar-room-v: max(0px, calc(100dvh - var(--site-header-h) - var(--account-avatar-pad-below-header)));
  --account-avatar-room-h: max(0px, calc(100vw - 2 * var(--site-pad-x)));
  --account-avatar: clamp(
    3.35rem,
    min(13.5vmin, calc(0.24 * var(--account-avatar-room-v)), calc(0.16 * var(--account-avatar-room-h))),
    5.35rem
  );
  --account-meta-gap: clamp(0.32rem, 1.15vmin, 0.55rem);
  --account-stat-pad-y: clamp(0.26rem, 0.95vmin, 0.42rem);
  --account-stat-pad-x: clamp(0.42rem, 1.65vmin, 0.68rem);
  --account-stat-gap: clamp(0.28rem, 1vmin, 0.55rem);
  margin-inline: auto;
  padding: clamp(0.55rem, 1.35vmin, 1rem) var(--site-pad-x) clamp(0.85rem, 1.75vmin, 1.5rem);
  align-self: stretch;
}

.account-main--profile .gg-profile {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/*
  Account layout wrapper only — never turn this into a big flat “card” (filled
  rectangle + border + drop shadow) behind the whole block. That reads as a
  random box on the shell; keep account content on the page background like
  the rest of the site.
*/
.account-main--profile .gg-profile-card {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Disconnected: center sticker + one line of copy below it (no overlapping layers). */
#account-main.account-main--profile.account-main--disconnected .gg-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--site-header-h) - clamp(1.25rem, 4vmin, 2.75rem));
  box-sizing: border-box;
  gap: clamp(0.85rem, 2.5vmin, 1.5rem);
}

#account-main.account-main--profile.account-main--disconnected .account-sticker-wrap {
  flex-shrink: 0;
}

#account-main.account-main--profile.account-main--disconnected .account-ton-connect-slot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#account-main.account-main--profile.account-main--disconnected .account-ton-connect-slot .header-ton-connect-anchor {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: min(20rem, 94vw);
}

#account-main.account-main--profile.account-main--disconnected .account-ton-connect-slot #durovs-ton-connect-host {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: min(20rem, 94vw);
}

#account-main.account-main--profile.account-main--disconnected .account-ton-connect-slot .ton-connect-err {
  flex-basis: auto;
  order: 3;
  margin-inline: auto;
  margin-top: 0;
  max-width: min(28rem, var(--account-sticker-max), calc(100vw - 2 * var(--site-pad-x)), 100%);
  text-align: center;
  width: 100%;
}

#account-main.account-main--profile.account-main--disconnected .account-wallet-cta {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  width: min(48rem, calc(100vw - 2 * var(--site-pad-x)), 100%);
  max-width: 100%;
  padding: 0 var(--site-pad-x);
  box-sizing: border-box;
}

#account-main.account-main--profile.account-main--disconnected .account-wallet-cta__hint {
  max-width: 100%;
}

#account-main.account-main--profile.account-main--connected .gg-profile-card {
  display: block;
  min-height: 0;
}

/* Utya Love sticker is for the disconnect hero only — hide after TON wallet connects. */
#account-main.account-main--profile.account-main--connected .account-sticker-wrap {
  display: none !important;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
}

/* `[hidden]` must win over `display: grid` or the profile block stays visible when disconnected. */
.account-main--profile #account-profile-block[hidden] {
  display: none !important;
}

.account-main--profile .gg-user {
  --gg-avatar: var(--account-avatar);
  display: grid;
  grid-template-columns: var(--gg-avatar) minmax(0, 1fr);
  grid-template-rows: auto;
  column-gap: clamp(0.65rem, 1.85vmin, 1.2rem);
  row-gap: 0;
  align-items: start;
}

.account-main--profile .gg-user__avatar-wrap {
  width: var(--gg-avatar);
  height: var(--gg-avatar);
  aspect-ratio: 1 / 1;
  min-width: var(--gg-avatar);
  min-height: var(--gg-avatar);
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: stretch;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  border-radius: 50%;
  overflow: hidden;
}

.account-main--profile .gg-user__avatar-wrap > * {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.account-main--profile .gg-user__avatar-img {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--site-raised);
  z-index: 1;
}

.account-main--profile .gg-user__avatar-fallback {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(145deg, rgba(var(--site-accent-rgb), 0.22), rgba(var(--site-raised-rgb), 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 0;
}

.account-main--profile .gg-user__avatar-fallback__glyph {
  font-size: clamp(1.05rem, 3.8vmin, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.88);
  font-family: "Nunito", system-ui, sans-serif;
}

.account-main--profile .gg-user__meta {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--account-meta-gap);
}

.account-main--profile .gg-user__title {
  margin: 0;
  min-width: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(1.02rem, 0.42vmin + 0.88rem, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--site-text-strong);
  filter: none;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--site-text-strong);
}

.account-main--profile .gg-user__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--account-stat-gap) clamp(0.55rem, 2vmin, 1rem);
  margin: 0;
  padding: 0;
}

.account-main--profile .gg-user__stat {
  margin: 0;
  flex: 0 1 auto;
  min-width: min(7.5rem, 42%);
  padding: var(--account-stat-pad-y) var(--account-stat-pad-x);
  border-radius: var(--radius-ui);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.12);
}

.account-main--profile .gg-user__stat-label {
  margin: 0 0 clamp(0.06rem, 0.35vmin, 0.14rem);
  font-size: clamp(0.56rem, 0.95vmin, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--site-text-muted-rgb), 0.75);
}

.account-main--profile .gg-user__stat-value {
  margin: 0;
  font-size: clamp(0.8rem, 0.32vmin + 0.72rem, 1.05rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--site-text-strong);
}

.account-main--profile .account-wallet-data__label {
  margin: 0;
  font-size: clamp(0.56rem, 0.95vmin, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--site-text-muted-rgb), 0.75);
}

.account-main--profile .account-wallet-data__hint {
  margin: 0;
  font-size: clamp(0.68rem, 0.9vmin + 0.55rem, 0.82rem);
  line-height: 1.35;
  color: rgba(var(--site-text-muted-rgb), 0.88);
}

/* Account: on-chain NFTs (TonAPI via wallet API). */
.account-main--profile .account-collectibles {
  width: 100%;
  margin-top: clamp(0.55rem, 1.8vmin, 1rem);
  padding-top: clamp(0.45rem, 1.5vmin, 0.85rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: clamp(0.42rem, 1.35vmin, 0.72rem);
}

.account-main--profile .account-collectibles__lead {
  margin: 0;
  font-size: clamp(0.68rem, 0.9vmin + 0.55rem, 0.8rem);
  line-height: 1.4;
  color: rgba(var(--site-text-muted-rgb), 0.88);
}

.account-main--profile .account-collectibles__status-line {
  margin: 0;
  font-size: clamp(0.66rem, 0.75vmin + 0.54rem, 0.76rem);
  line-height: 1.35;
  color: rgba(var(--site-text-muted-rgb), 0.92);
}

.account-main--profile .account-collectibles__status-line:not([hidden]) {
  margin-bottom: clamp(0.2rem, 0.6vmin, 0.35rem);
}

.account-main--profile .account-collectible-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  padding: 0.12rem 0.32rem;
  border-radius: 6px;
  font-size: clamp(0.52rem, 0.45vmin + 0.46rem, 0.6rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.account-main--profile .account-collectibles__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1.2vmin, 0.55rem);
}

/* On-chain NFTs: Getgems-style cards (see account-nft-card* in account-wallet.js). */
.account-main--profile .account-collectibles__grid--nfts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 1.8vmin, 20px);
  width: 100%;
  max-width: min(100%, 80rem);
  min-width: 0;
}

@media (max-width: 1100px) {
  .account-main--profile .account-collectibles__grid--nfts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .account-main--profile .account-collectibles__grid--nfts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .account-main--profile .account-collectibles__grid--nfts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .account-main--profile .account-collectibles__grid--nfts {
    grid-template-columns: minmax(0, 1fr);
  }
}

.account-main--profile .account-collectibles__grid--nfts .account-nft-card--empty {
  grid-column: 1 / -1;
}

.account-main--profile .account-nft-card {
  list-style: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.account-main--profile .account-nft-card:not(.account-nft-card--empty):hover .account-nft-card__panel {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 26px rgba(0, 0, 0, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .account-main--profile .account-nft-card__panel {
    transition: none;
  }
}

.account-main--profile .account-nft-card__panel {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #1c2533;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 18px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-main--profile .account-nft-card__media-link {
  display: block;
  text-decoration: none;
  color: inherit;
  line-height: 0;
}

.account-main--profile .account-nft-card__media-link:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.5);
  outline-offset: 2px;
}

.account-main--profile .account-nft-card__media {
  aspect-ratio: 1 / 1;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  /* Match panel inner curve (14px − 1px border) on all sides so art aligns with the frame. */
  border-radius: 13px;
}

.account-main--profile .account-nft-card__media--tg-gift {
  position: relative;
}

.account-main--profile .account-nft-card__gift-lottie-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-main--profile .account-nft-card__gift-lottie {
  width: 78%;
  height: 78%;
  max-width: 100%;
  max-height: 100%;
}

.account-main--profile .account-nft-card__gift-lottie svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.account-main--profile .account-nft-card__img--tg-gift-underlay {
  position: relative;
  z-index: 0;
}

.account-main--profile .account-nft-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.account-main--profile .account-nft-card__img--placeholder {
  object-fit: contain;
  padding: 22%;
  opacity: 0.35;
}

.account-main--profile .account-nft-card__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.55rem 0.48rem;
  background: #1c2533;
}

.account-main--profile .account-nft-card__likes {
  font-size: clamp(0.68rem, 0.75vmin + 0.58rem, 0.78rem);
  color: #8a929b;
  line-height: 1;
  user-select: none;
}

.account-main--profile .account-nft-card__more {
  margin: 0;
  padding: 0.12rem 0.35rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #8a929b;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.account-main--profile .account-nft-card__more:hover {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.06);
}

.account-main--profile .account-nft-card__more:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: 1px;
}

.account-main--profile .account-nft-card__meta {
  min-width: 0;
  padding: 0 0.08rem 0.15rem;
}

.account-main--profile .account-nft-card__meta-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.account-main--profile .account-nft-card__meta-link:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: 3px;
  border-radius: 6px;
}

.account-main--profile .account-nft-card__collection-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem 0.35rem;
  margin-bottom: 0.18rem;
  min-width: 0;
}

.account-main--profile .account-nft-card__collection-name {
  font-size: clamp(0.62rem, 0.65vmin + 0.52rem, 0.72rem);
  color: #8a929b;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.account-main--profile .account-nft-card__verified-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.account-main--profile .account-nft-card__verified-icon {
  display: block;
}

.account-main--profile .account-nft-card__title {
  font-size: clamp(0.74rem, 0.22vmin + 0.66rem, 0.86rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.32rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.account-main--profile .account-nft-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-size: clamp(0.58rem, 0.55vmin + 0.48rem, 0.68rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  width: fit-content;
  max-width: 100%;
}

.account-main--profile .account-nft-card__pill--nfs {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.88);
}

.account-main--profile .account-nft-card__pill--sale {
  border-color: rgba(var(--site-accent-rgb), 0.45);
  color: rgba(var(--site-accent-rgb), 0.98);
}

.account-main--profile .account-nft-card--empty {
  padding: clamp(0.65rem, 1.6vmin, 0.9rem) clamp(0.55rem, 1.4vmin, 0.75rem);
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.12);
}

.account-main--profile .account-nft-card__empty-text {
  margin: 0;
  font-size: clamp(0.7rem, 0.85vmin + 0.58rem, 0.82rem);
  line-height: 1.45;
  color: rgba(var(--site-text-muted-rgb), 0.92);
}

.account-main--profile .account-telegram-panel {
  width: 100%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.28rem, 1vmin, 0.45rem);
}

.account-main--profile .account-telegram-linked__line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  font-size: clamp(0.78rem, 0.28vmin + 0.7rem, 0.92rem);
  line-height: 1.4;
  color: rgba(var(--site-text-muted-rgb), 0.9);
}

.account-main--profile .account-telegram-linked__name {
  font-weight: 600;
  color: var(--site-text-strong);
  letter-spacing: -0.02em;
}

.account-main--profile .account-telegram-widget-mount {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.account-main--profile .account-telegram-disabled code {
  font-size: 0.85em;
}

.account-main--profile .account-wallet-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 2vmin, 1.15rem);
  width: min(48rem, calc(100vw - 2 * var(--site-pad-x)), 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* Ton Connect control matches sticker width on the account disconnect hero. */
.account-main--profile .account-wallet-cta__hint {
  margin: 0;
  text-align: center;
  font-size: clamp(0.8rem, 0.25vmin + 0.74rem, 0.92rem);
  line-height: 1.45;
  color: rgba(var(--site-text-muted-rgb), 0.92);
  max-width: min(52rem, calc(100vw - 2 * var(--site-pad-x)), 100%);
}

.account-main--profile .account-wallet-cta__hint strong {
  color: var(--site-text-strong);
  font-weight: 600;
}

.account-main--profile .account-wallet-cta[hidden] {
  display: none !important;
}

.account-main--profile .account-sticker-wrap {
  width: var(--account-sticker-max);
  max-width: 100%;
}

.account-main--profile .account-sticker-lottie {
  width: 100%;
  line-height: 0;
}

.account-main--profile .account-sticker-lottie svg {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.account-main--profile .account-sticker-wrap.account-sticker-wrap--lottie-failed {
  min-height: clamp(5.5rem, 22vmin, 10rem);
  border-radius: var(--radius-ui);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.account-main--profile .account-sticker-wrap.account-sticker-wrap--lottie-fallback {
  border: none;
  min-height: 0;
}

@media (max-width: 560px) {
  .account-main--profile .gg-user {
    column-gap: clamp(0.55rem, 1.5vmin, 0.85rem);
  }

  .account-main--profile .gg-user__stat {
    min-width: calc(50% - 0.35rem);
    flex: 1 1 calc(50% - 0.35rem);
  }
}

.account-banner {
  margin: 0 0 var(--site-gap-lg);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-pebble);
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  box-shadow: var(--elev-pebble);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--site-text-soft);
  max-width: min(52rem, 100%);
}

.account-panel {
  margin-top: var(--site-gap-lg);
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-pebble);
  border: 1px solid var(--site-border);
  background: var(--site-surface);
  box-shadow: var(--elev-pebble);
  transition: box-shadow 0.28s var(--site-motion-smooth-out), border-color 0.2s ease;
}

.account-panel--wallet {
  margin-top: var(--site-gap-md);
}

.account-panel__title {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--site-text-muted);
}

.account-address-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-address-inner {
  display: block;
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.account-muted {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--site-text-muted);
  max-width: min(62ch, 100%);
}

.account-panel .account-hint {
  margin-top: var(--site-gap-lg);
  margin-bottom: 0;
}

.account-kv {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.account-kv__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--site-gap-md);
  align-items: baseline;
  padding: 0.55rem 0.62rem;
  border-radius: var(--radius-panel);
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-kv__key {
  font-size: 0.8125rem;
  color: var(--site-text-soft);
}

.account-kv__val {
  font-size: 0.8125rem;
  color: var(--site-text-muted);
  text-align: right;
}

@media (max-width: 520px) {
  .account-kv__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .account-kv__val {
    text-align: left;
  }
}

.account-main > p,
.account-main .account-panel p {
  opacity: 1;
  max-width: none;
}

.account-main--stars {
  /* One width for Stars buy column: inputs, preset list, and `.stars-grid` / `.stars-page.stars-buy` shell. */
  --stars-fragment-column-max: min(34rem, 100%);
}

/* Hero alignment only — typography matches global `main h1` (see below). */
.account-main--stars h1 {
  text-align: center;
  margin-bottom: 0.4rem;
}

/* Optional hero row: decorative asset beside title (Stars / Premium). Text stays in `.page-hero-title__text`. Both `#stars-hero-title` and `#premium-hero-title` use text-first DOM so flex places `.page-hero-title__decor` (Lottie via `lottie-sticker.js`) to the right of the wording. */
.account-main--stars .page-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  flex-wrap: wrap;
}

/* Stars buy only: tighter title↔sticker spacing (Premium keeps `.account-main--stars .page-hero-title` gap above). */
#stars-hero-title.page-hero-title {
  gap: 0.2rem;
}

.account-main--stars .page-hero-title__decor {
  display: flex;
  flex-shrink: 0;
}

html[data-durovs-page="stars"] #stars-hero-title .page-hero-title__decor {
  margin: 0;
  padding: 0;
}

.account-main--stars .stars-grid {
  max-width: var(--stars-fragment-column-max);
  margin-left: auto;
  margin-right: auto;
}

/* Form fills the column; width cap lives on `.stars-page.stars-buy` + `.stars-grid` via `--stars-fragment-column-max`. */
.account-main--stars #stars-buy-form,
.account-main--stars #premium-buy-form {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* —— Durovs Stars buy (Fragment-like column — scoped `.stars-page`; numeric tokens from :root) —— */
.stars-page.stars-buy {
  --stars-primary: var(--site-btn-primary);
  --stars-page-bg: var(--site-bg);
  --stars-surface-input: var(--site-field-bg);
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: var(--stars-fragment-column-max);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(1.1rem, 3.2vw, 1.75rem) 0 clamp(2rem, 5vw, 3rem);
}

.stars-page.stars-buy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--stars-page-bg);
  pointer-events: none;
}

.stars-page.stars-buy #stars-hero-title,
.stars-page.stars-buy #premium-hero-title {
  margin-top: 0;
}

.stars-page.stars-buy .stars-input-wrap--recipient::before,
.stars-page.stars-buy .stars-input-wrap--amount::before,
#premium-buy-form .stars-input-wrap--recipient::before {
  content: none !important;
}

.stars-page.stars-buy .stars-input-icon,
#premium-buy-form .stars-input-icon {
  position: absolute;
  left: 0.82rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  z-index: 1;
  pointer-events: none;
  background: center / contain no-repeat;
}

.stars-page.stars-buy .stars-input-icon--search,
#premium-buy-form .stars-input-icon--search {
  background-image: url("/assets/png/search.png");
}

.stars-page.stars-buy .stars-input-icon--star {
  left: 0.96rem;
  width: 1.08rem;
  height: 1.08rem;
  background-image: url("/assets/png/star.png");
}

/*
 * Stars `/stars` buy form only — prefix icons: slightly larger + nudged right for optical center in the pill.
 * Premium keeps `.stars-page.stars-buy .stars-input-icon` values above (`#premium-buy-form` is separate).
 */
#stars-buy-form .stars-input-icon {
  left: 0.92rem;
  width: 1.14rem;
  height: 1.14rem;
  transform: translateY(-50%) translateX(3px);
}

#stars-buy-form .stars-input-icon--search {
  left: 0.94rem;
}

#stars-buy-form .stars-input-icon--star {
  left: 1.06rem;
  width: 1.22rem;
  height: 1.22rem;
}

#stars-buy-form .stars-field input.input-fluid {
  padding-left: calc(var(--input-fluid-pad-left-icon) + 0.22rem);
}

#stars-buy-form .liquid-input-durovs .stars-recipient-pill {
  padding-left: calc(2.18rem + 0.22rem);
}

.stars-page.stars-buy .stars-field > .stars-field__label {
  color: var(--site-text-soft);
}

.stars-page.stars-buy .stars-card.stars-view {
  /* Intentionally no card panel behind pills/CTA — reads cleaner on liquid glass page */
  padding: clamp(0.95rem, 3vw, 1.35rem);
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/*
 * Liquid Optics §09 — outer tray + borderless `.input-fluid` (clone / inner stack approximated in CSS only).
 * Scoped to `.liquid-input-durovs` so other routes keep prior field styling.
 */
.liquid-input-durovs {
  position: relative;
  isolation: isolate;
  border-radius: var(--input-fluid-radius);
  overflow: hidden;
}

.liquid-input-durovs__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--input-fluid-radius);
  overflow: hidden;
  background: var(--liquid-field-glass-tint);
  border: 1px solid var(--liquid-field-border);
  box-shadow: var(--liquid-field-shadow);
  backdrop-filter: blur(var(--liquid-field-blur)) saturate(var(--liquid-field-saturate));
  -webkit-backdrop-filter: blur(var(--liquid-field-blur)) saturate(var(--liquid-field-saturate));
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease,
    backdrop-filter 0.3s ease;
}

/*
 * kube.io liquid glass: Chromium applies SVG filter URL from --durovs-liquid-filter (set in liquid-glass-kube.js).
 * https://kube.io/blog/liquid-glass-css-svg/
 */
.liquid-input-durovs__glass.liquid-kube--chrome {
  backdrop-filter: blur(var(--liquid-field-blur)) saturate(var(--liquid-field-saturate))
    var(--durovs-liquid-filter, none);
  -webkit-backdrop-filter: blur(var(--liquid-field-blur)) saturate(var(--liquid-field-saturate))
    var(--durovs-liquid-filter, none);
}

.liquid-input-durovs__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  opacity: 0.88;
  pointer-events: none;
}

.liquid-input-durovs__glass::after {
  content: "";
  position: absolute;
  inset: -28% -38% auto 35%;
  height: 62%;
  background: linear-gradient(
    116deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 38%,
    rgba(255, 255, 255, 0.05) 52%,
    transparent 100%
  );
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: screen;
}

.liquid-input-durovs:hover .liquid-input-durovs__glass {
  border-color: var(--liquid-field-border-hover);
  background: var(--liquid-field-glass-tint-hover);
  box-shadow: var(--liquid-field-shadow);
}

.liquid-input-durovs:focus-within .liquid-input-durovs__glass,
.liquid-input-durovs:has(.input-fluid:focus-visible) .liquid-input-durovs__glass {
  border-color: var(--liquid-field-border-focus);
  background: var(--liquid-field-glass-tint-focus);
  box-shadow: var(--liquid-field-shadow-focus);
}

/* Stars + Premium: keyboard focus ring removed on `.input-fluid`; tray uses Liquid Optics §09 brightening (demo `.focused`). */

.stars-field-stack.has-field-error .liquid-input-durovs .liquid-input-durovs__glass {
  border-color: rgba(var(--color-error-rgb), 0.52);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.32);
}

.stars-page.stars-buy .stars-field-stack.has-field-error .liquid-input-durovs .liquid-input-durovs__glass {
  border-color: rgba(var(--color-error-rgb), 0.52);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.32);
}

/*
 * Getgems-style bottom “card stripe” on invalid fields: slim gradient bar inside the pill.
 * Shown when `.stars-field-stack.has-field-error` is toggled by Stars / Premium validation JS.
 */
.liquid-input-durovs__edge-bar {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0.14rem;
  height: 3px;
  z-index: 1;
  pointer-events: none;
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: 50% 100%;
  transition:
    opacity 0.24s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  background: linear-gradient(
    90deg,
    #9b6dff 0%,
    #ff3d7a 42%,
    #ff9f4a 100%
  );
  box-shadow:
    0 0 14px rgba(255, 61, 122, 0.5),
    0 0 10px rgba(155, 109, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .liquid-input-durovs__edge-bar {
    transition: none;
  }
}

/* Inner gradient stripe hidden when the merged red strip is used below. */
.stars-field-stack.has-field-error .liquid-input-durovs__edge-bar,
#premium-buy-form .stars-field-stack.has-field-error .liquid-input-durovs__edge-bar {
  opacity: 0;
  transform: scaleX(0.35);
  visibility: hidden;
}

.stars-field .liquid-input-durovs .input-fluid,
body.stars-page .stars-page.stars-buy .stars-field .liquid-input-durovs .input-fluid,
#premium-buy-form .stars-field .liquid-input-durovs .input-fluid {
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: calc(var(--input-fluid-radius) - 2px) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* iOS / Chrome autofill overlay reads as an inner rectangle without this. */
.stars-field .liquid-input-durovs .input-fluid:-webkit-autofill,
.stars-field .liquid-input-durovs .input-fluid:-webkit-autofill:hover,
.stars-field .liquid-input-durovs .input-fluid:-webkit-autofill:focus,
.stars-field .liquid-input-durovs .input-fluid:-webkit-autofill:focus-visible {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px transparent inset !important;
}

.stars-field .liquid-input-durovs .input-fluid:hover:not(:disabled):not(:focus) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.stars-field .liquid-input-durovs .input-fluid:focus:not(:focus-visible) {
  outline: none;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.stars-field .liquid-input-durovs .input-fluid:focus-visible {
  outline: none;
  outline-offset: 0;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.stars-field .liquid-input-durovs .input-fluid:focus-visible:user-invalid {
  outline: none;
  outline-offset: 0;
  box-shadow: none !important;
}

.stars-field .liquid-input-durovs .input-fluid:user-invalid:not(:placeholder-shown) {
  border: none !important;
  box-shadow: none !important;
}

/*
 * Beat generic `.stars-field input.input-fluid:focus-visible` cascade; errors use `#stars-*-error` / glass border only (no halo).
 */
.stars-page.stars-buy #stars-recipient:is(:focus, :focus-visible),
.stars-page.stars-buy #stars-amount:is(:focus, :focus-visible),
.stars-page.stars-buy #premium-recipient:is(:focus, :focus-visible) {
  outline: none;
  outline-offset: 0;
  box-shadow: none !important;
}

.liquid-input-durovs .stars-recipient-pill {
  border-radius: var(--input-fluid-radius);
}

/*
 * §11-adjacent tray: Premium period controls (nested glass stack like demo’s layered FAB container).
 */
.liquid-glass-tray--packages {
  position: relative;
  isolation: isolate;
  padding: 0.62rem 0.52rem;
  border-radius: calc(var(--radius-pebble) - 4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(var(--liquid-tray-blur)) saturate(var(--liquid-tray-saturate));
  -webkit-backdrop-filter: blur(var(--liquid-tray-blur)) saturate(var(--liquid-tray-saturate));
}

.liquid-glass-tray--packages::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.liquid-glass-tray--packages::after {
  content: "";
  position: absolute;
  inset: -15% -20% auto 55%;
  height: 52%;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: screen;
  background: linear-gradient(122deg, transparent, rgba(255, 255, 255, 0.08) 45%, transparent 72%);
}

.stars-page.stars-buy .stars-form {
  gap: 1rem;
}

.stars-page.stars-buy .stars-hero-subtitle {
  color: rgba(var(--site-text-muted-rgb), 0.94);
}

/* Stars buy: UtyaStars Lottie inline in hero title row (`assets/stickers/UtyaStars.json`, `lottie-sticker.js`). Smaller than Premium row (56px cap) — Stars-only via `data-durovs-page="stars"`. */
html[data-durovs-page="stars"] .stars-sticker-wrap {
  width: min(2.5rem, 10vw);
  max-width: min(40px, 18vw);
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

html[data-durovs-page="stars"] .stars-sticker-lottie {
  width: 100%;
  line-height: 0;
}

html[data-durovs-page="stars"] .stars-sticker-lottie svg {
  display: block;
  width: 100% !important;
  height: auto !important;
}

html[data-durovs-page="stars"] .stars-sticker-wrap.account-sticker-wrap--lottie-failed {
  min-height: clamp(2rem, 8vmin, 3.25rem);
  border-radius: var(--radius-ui);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

html[data-durovs-page="stars"] .stars-sticker-wrap.account-sticker-wrap--lottie-fallback {
  border: none;
  min-height: 0;
}

/* Premium buy: UtyaPremium Lottie inline in hero title row (`assets/stickers/UtyaPremium.json`, `lottie-sticker.js`). */
html[data-durovs-page="premium"] .premium-sticker-wrap {
  width: min(3.5rem, 15vw);
  max-width: min(56px, 24vw);
  margin: 0;
  flex-shrink: 0;
}

html[data-durovs-page="premium"] .premium-sticker-lottie {
  width: 100%;
  line-height: 0;
}

html[data-durovs-page="premium"] .premium-sticker-lottie svg {
  display: block;
  width: 100% !important;
  height: auto !important;
}

html[data-durovs-page="premium"] .premium-sticker-wrap.account-sticker-wrap--lottie-failed {
  min-height: clamp(2.75rem, 11vmin, 4.25rem);
  border-radius: var(--radius-ui);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

html[data-durovs-page="premium"] .premium-sticker-wrap.account-sticker-wrap--lottie-fallback {
  border: none;
  min-height: 0;
}

.stars-page.stars-buy .stars-submit {
  margin-top: 0.35rem;
  padding: 0.72rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--site-text-strong);
  background: var(--stars-primary);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.stars-page.stars-buy .stars-submit:hover {
  background: var(--site-btn-primary-hover);
  border-color: rgba(var(--site-btn-primary-rgb), 0.42);
  color: var(--site-text-strong);
}

.stars-page.stars-buy .stars-submit:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.72);
  outline-offset: 2px;
}

/*
 * Stars document typography (stars/premium main): Roboto via Google Fonts.
 * Scoped to `main` only; header nav uses `.site-header .site-header__segmented-link` Plus Jakarta stack.
 * All HTML heads load Nunito + Plus Jakarta + Roboto so metrics stay consistent across routes.
 */
body.stars-page main {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif,
    "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", emoji;
  line-height: 1.45;
}

body.stars-page .stars-hero-subtitle {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: rgba(var(--site-text-muted-rgb), 0.9);
}

body.stars-page .stars-page.stars-buy .stars-field > .stars-field__label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  line-height: 1.35;
}

body.stars-page .stars-page.stars-buy .stars-field input {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

body.stars-page .stars-page.stars-buy .stars-field input.input-fluid {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.25;
}

body.stars-page .stars-page.stars-buy .stars-submit {
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.25;
}

body.stars-page .stars-recipient-pill__name {
  font-weight: 500;
  letter-spacing: 0;
}

body.stars-page .stars-amount-quote {
  font-weight: 500;
  letter-spacing: 0;
}

body.stars-page .stars-field-error {
  font-weight: 500;
  letter-spacing: 0.01em;
}

body.stars-page .stars-pre {
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media (max-width: 680px) {
  body.stars-page .stars-hero-subtitle {
    font-size: 0.875rem;
    line-height: 1.4;
    letter-spacing: 0.008em;
  }
}

@media (min-width: 1024px) {
  body.stars-page .stars-hero-subtitle {
    font-size: 1rem;
    line-height: 1.45;
  }

  body.stars-page .stars-page.stars-buy .stars-field input {
    font-size: 1.0625rem;
    line-height: 1.38;
  }

  body.stars-page .stars-page.stars-buy .stars-field input.input-fluid {
    font-size: 1.1rem;
    line-height: 1.25;
  }

  body.stars-page .stars-page.stars-buy .stars-submit {
    font-size: 0.9375rem;
  }
}

@media (min-width: 1280px) {
  body.stars-page .stars-page.stars-buy .stars-field input {
    font-size: 1.09375rem;
    line-height: 1.36;
  }

  body.stars-page .stars-page.stars-buy .stars-field input.input-fluid {
    font-size: 1.1rem;
    line-height: 1.25;
  }
}

@media (max-width: 520px) {
  .stars-page.stars-buy::before {
    width: 100%;
    left: 0;
    transform: none;
  }
}

.account-main--news h1 {
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Developers hub — plain rounded service boxes (stack more `.developers-service` sections later). */
.account-main--developers .developers-page-title {
  text-align: center;
  margin: 0 0 0.35rem;
}

.account-main--developers .developers-page-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.account-main--gifts .gifts-page-title {
  text-align: center;
  margin: 0 0 0.35rem;
}

.account-main--gifts .gifts-page-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.account-main--gifts .gifts-page-lead a {
  color: var(--site-accent);
  text-decoration: none;
  font-weight: 600;
}

.account-main--gifts .gifts-page-lead a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Gifts: one-time intro (localStorage `durovs_gifts_intro_v1`) + Lottie (`assets/stickers/UtyaGifts.json`). */
.account-main--gifts .gifts-intro {
  width: 100%;
  max-width: min(40rem, 100%);
  margin: 0 auto clamp(0.65rem, 2vmin, 1rem);
  padding: clamp(0.95rem, 2.4vw, 1.2rem) clamp(1rem, 2.8vw, 1.35rem);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(var(--site-accent-rgb), 0.28);
  background: rgba(var(--site-accent-rgb), 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.account-main--gifts .gifts-intro[hidden] {
  display: none !important;
}

.account-main--gifts .gifts-intro__title {
  margin: 0 0 0.4rem;
  font-size: clamp(1rem, 0.35vw + 0.92rem, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--site-text-strong);
}

.account-main--gifts .gifts-intro__lede {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--site-text-soft);
}

.account-main--gifts .gifts-intro__list {
  margin: 0 0 0.55rem;
  padding-left: 1.15rem;
  font-size: 0.875rem;
  line-height: 1.48;
  color: rgba(var(--site-text-muted-rgb), 0.95);
}

.account-main--gifts .gifts-intro__list li {
  margin-bottom: 0.28rem;
}

.account-main--gifts .gifts-intro__note {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(var(--site-text-muted-rgb), 0.88);
}

.account-main--gifts .gifts-intro__note a {
  color: var(--site-accent);
  font-weight: 600;
  text-decoration: none;
}

.account-main--gifts .gifts-intro__note a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-main--gifts .gifts-intro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-ui);
  border: 1px solid rgba(var(--site-accent-rgb), 0.45);
  background: rgba(var(--site-btn-primary-rgb), 0.35);
  color: var(--site-text-strong);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.account-main--gifts .gifts-intro__btn:hover {
  background: rgba(var(--site-btn-primary-rgb), 0.5);
  border-color: rgba(var(--site-accent-rgb), 0.58);
}

.account-main--gifts .gifts-intro__btn:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.55);
  outline-offset: 2px;
}

html[data-durovs-page="gifts"] .gifts-sticker-wrap {
  width: min(11.5rem, 38vmin);
  max-width: 100%;
  margin: clamp(0.35rem, 1.4vmin, 0.65rem) auto clamp(0.5rem, 1.6vmin, 0.85rem);
  flex-shrink: 0;
}

html[data-durovs-page="gifts"] .gifts-sticker-lottie {
  width: 100%;
  line-height: 0;
}

html[data-durovs-page="gifts"] .gifts-sticker-lottie svg {
  display: block;
  width: 100% !important;
  height: auto !important;
}

html[data-durovs-page="gifts"] .gifts-sticker-wrap.account-sticker-wrap--lottie-failed {
  min-height: clamp(4.25rem, 17vmin, 7.5rem);
  border-radius: var(--radius-ui);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

html[data-durovs-page="gifts"] .gifts-sticker-wrap.account-sticker-wrap--lottie-fallback {
  border: none;
  min-height: 0;
}

/* Developers page: Lottie sticker under hero copy (`assets/stickers/UtyaDevelopers.json`). */
html[data-durovs-page="developers"] .developers-sticker-wrap {
  width: min(12.5rem, 40vmin);
  max-width: 100%;
  margin: clamp(0.3rem, 1.4vmin, 0.55rem) auto clamp(0.45rem, 1.5vmin, 0.8rem);
  flex-shrink: 0;
}

html[data-durovs-page="developers"] .developers-sticker-lottie {
  width: 100%;
  line-height: 0;
}

html[data-durovs-page="developers"] .developers-sticker-lottie svg {
  display: block;
  width: 100% !important;
  height: auto !important;
}

html[data-durovs-page="developers"] .developers-sticker-wrap.account-sticker-wrap--lottie-failed {
  min-height: clamp(4.5rem, 18vmin, 8rem);
  border-radius: var(--radius-ui);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

html[data-durovs-page="developers"] .developers-sticker-wrap.account-sticker-wrap--lottie-fallback {
  border: none;
  min-height: 0;
}

/* Developers: plain liquid-glass tiles (backdrop blur like `.liquid-input-durovs__glass`, no kube filter). */
.developers-glass-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.8vw, 1.05rem);
  width: 100%;
  max-width: min(56rem, calc(100vw - 2 * var(--site-pad-x)));
  margin: clamp(1rem, 2.8vw, 1.75rem) auto 0;
  align-items: stretch;
  box-sizing: border-box;
}

.developers-glass-tile {
  position: relative;
  isolation: isolate;
  min-height: clamp(10.5rem, 26vmin, 14rem);
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-sizing: border-box;
}

.developers-glass-tile__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--liquid-field-glass-tint);
  border: 1px solid var(--liquid-field-border);
  box-shadow: var(--liquid-field-shadow);
  backdrop-filter: blur(var(--liquid-field-blur)) saturate(var(--liquid-field-saturate));
  -webkit-backdrop-filter: blur(var(--liquid-field-blur)) saturate(var(--liquid-field-saturate));
  transition: border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.developers-glass-tile__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  opacity: 0.85;
  pointer-events: none;
}

.developers-glass-tile:hover .developers-glass-tile__glass {
  border-color: var(--liquid-field-border-hover);
  background: var(--liquid-field-glass-tint-hover);
  box-shadow: var(--liquid-field-shadow);
}

.developers-glass-tile:focus-within .developers-glass-tile__glass {
  border-color: var(--liquid-field-border-focus);
  background: var(--liquid-field-glass-tint-focus);
  box-shadow: var(--liquid-field-shadow-focus);
}

.developers-glass-tile__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1rem, 2.8vw, 1.4rem);
  box-sizing: border-box;
}

.developers-glass-tile__title {
  margin: 0;
  font-size: clamp(1.08rem, 0.35vw + 1rem, 1.28rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--site-text-strong);
}

.developers-glass-tile__tagline {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--site-accent-rgb), 0.92);
}

.developers-glass-tile__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--site-text-soft);
}

.developers-glass-tile__body a {
  color: var(--site-accent);
  text-decoration: none;
  font-weight: 600;
}

.developers-glass-tile__body a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.developers-glass-tile--reserved {
  min-height: clamp(8rem, 22vmin, 11rem);
}

.developers-glass-tile--reserved .developers-glass-tile__glass {
  opacity: 0.55;
}

.developers-glass-tile--reserved:hover .developers-glass-tile__glass {
  opacity: 0.68;
}

.developers-glass-tile__reserved-label {
  margin: auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--site-text-muted-rgb), 0.5);
}

@media (max-width: 720px) {
  .developers-glass-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .developers-glass-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .developers-glass-tile__glass {
    transition: none;
  }
}

.news-topics-shell {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 var(--site-gap-lg);
  flex-wrap: wrap;
}

.news-topics-shell .news-topics-segmented {
  margin-bottom: 0;
}

.news-feed {
  display: flex;
  flex-direction: column;
  gap: var(--site-gap-md);
  align-items: stretch;
  width: 100%;
}

.news-scroller {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.75rem;
  padding: 0 0 var(--site-gap-sm);
  margin: 0 -0.35rem;
  padding-inline: 0.35rem;
}

.news-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--site-gap-md);
  align-items: stretch;
  width: max-content;
  min-height: 1px;
}

.news-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(78vw, 300px);
  max-width: 300px;
  border-radius: var(--radius-pebble);
  overflow: hidden;
  border: 1px solid var(--site-border);
  background: var(--site-surface);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  contain: layout style;
  box-shadow: var(--elev-pebble);
  transition: border-color 0.22s ease, box-shadow 0.28s var(--site-motion-smooth-out);
}

.news-card:hover {
  border-color: var(--site-border-hover);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

@media (prefers-reduced-motion: reduce) {
  .news-card {
    transition: border-color 0.15s ease, box-shadow 0.18s ease;
  }

  .account-panel {
    transition: border-color 0.15s ease;
  }
}

.news-card:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: var(--site-focus-offset);
}

.news-card--nolink {
  cursor: default;
  opacity: 0.88;
}

.news-card--nolink:hover {
  transform: none;
  box-shadow: var(--elev-pebble);
}

.news-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--site-surface);
  overflow: hidden;
}

.news-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.news-card__title {
  margin: 0;
  padding: 0.65rem 0.72rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.38;
  color: var(--site-text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-empty {
  margin: 0;
  padding: 1.2rem 0.5rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--site-text-soft);
  width: 100%;
}

.stars-hero-subtitle {
  margin: 0 auto var(--site-gap-md);
  max-width: min(42ch, 100%);
  text-align: center;
  color: var(--site-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

.stars-hero-subtitle.is-premium {
  max-width: 92ch;
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .stars-hero-subtitle.is-premium {
    white-space: normal;
  }
}

.stars-switch {
  position: relative;
  display: flex;
  width: min(420px, 100%);
  gap: 0.2rem;
  margin: 0 auto var(--site-gap-md);
  padding: 0.26rem;
  border-radius: 999px;
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  box-shadow: var(--elevation-soft);
}

.stars-switch::before {
  content: "";
  position: absolute;
  top: 0.26rem;
  left: 0.26rem;
  width: calc((100% - 0.52rem) / 2);
  height: calc(100% - 0.52rem);
  border-radius: 999px;
  background: var(--pill-switch-thumb);
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
  pointer-events: none;
}

.stars-switch[data-active-tab="premium"]::before {
  transform: translateX(100%);
}

.stars-switch__btn {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  border: 0;
  background: transparent;
  color: rgba(var(--site-text-muted-rgb), 0.75);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms ease;
}

.stars-switch__btn:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: var(--site-focus-offset);
}

.stars-switch__btn.is-active {
  color: var(--site-text-strong);
}

.stars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--site-gap-md);
  align-items: start;
}

.stars-view--hidden {
  display: none;
}

.stars-card {
  padding: 0.95rem;
  border-radius: var(--radius-pebble);
  border: 1px solid var(--site-border-strong);
  background: var(--color-overlay-055);
  backdrop-filter: blur(12px) saturate(125%);
  box-shadow: var(--elev-pebble);
}

.stars-card--premium {
  background: var(--color-premium-soft);
  border-color: var(--color-premium-border);
  box-shadow: var(--elev-pebble);
}

#stars-view-premium {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border-color: transparent;
}

.stars-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.stars-card__meta {
  margin: 0.35rem 0 0.75rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.84rem;
}

.stars-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.stars-pill {
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  box-shadow: var(--elevation-soft);
  color: var(--site-text-strong);
  border-radius: 999px;
  padding: 0.28rem 0.68rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.stars-pill:hover {
  border-color: rgba(var(--site-accent-rgb), 0.45);
}

.premium-list {
  margin: 0.2rem 0 0.8rem;
  display: grid;
  gap: 0.38rem;
}

.premium-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-ui);
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  font-size: 0.83rem;
}

.premium-row strong {
  font-size: 0.82rem;
  color: var(--site-text-strong);
}

.premium-cta {
  display: inline-flex;
  margin-bottom: 0.7rem;
  text-decoration: none;
  border-radius: var(--radius-ui);
  border: 1px solid var(--site-border);
  background: var(--site-header-pill-fill);
  box-shadow: var(--elevation-soft);
  color: var(--site-text-strong);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
}

.premium-cta:hover {
  border-color: rgba(var(--site-accent-rgb), 0.45);
}

.premium-cta:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: var(--site-focus-offset);
}

.stars-panel {
  margin-top: var(--site-gap-lg);
  padding: 0.95rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  box-shadow: var(--elevation-soft);
}

.stars-help {
  margin-top: var(--site-gap-lg);
  padding: 0.95rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  box-shadow: var(--elevation-soft);
}

.stars-help__title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--site-text-strong);
}

.stars-help__list {
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  line-height: 1.45;
}

.stars-help__list li {
  margin: 0.25rem 0;
}

.stars-help__note {
  margin: 0.75rem 0 0;
  color: var(--site-text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
  max-width: 62ch;
}

.stars-panel__title {
  margin: 0.85rem 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--site-text-strong);
}

.stars-panel__title:first-child {
  margin-top: 0;
}

.stars-form {
  display: grid;
  gap: var(--site-gap-md);
  margin: 0.35rem 0 0.9rem;
}

.stars-field {
  display: grid;
  gap: 0.45rem;
}

.stars-field-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  position: relative;
  isolation: isolate;
}

.stars-field__label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--site-text-muted);
}

.stars-input-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.stars-input-wrap::before {
  position: absolute;
  left: 0.82rem;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 0.96rem;
  height: 0.96rem;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}

.stars-input-wrap--recipient::before {
  content: "";
  background-image: url("/assets/png/search.png");
}

/* Premium recipient row uses `.stars-input-icon` (same pattern as Stars buy); ::before is disabled under #premium-buy-form. */

.stars-input-wrap--amount::before {
  content: "";
  background-image: url("/assets/png/star.png");
  left: 0.96rem;
  width: 1.08rem;
  height: 1.08rem;
}

.stars-input-wrap--amount input.has-inline-quote {
  padding-right: 7.5rem;
}

.stars-amount-quote {
  position: absolute;
  right: 0.72rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: var(--site-text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  z-index: 5;
  pointer-events: none;
}

/* Author CSS must not override UA [hidden]; quote shown only when JS validates amount (stars page). */
.stars-amount-quote[hidden] {
  display: none !important;
}

.stars-amount-quote__icon {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 0.9rem;
  background: center / contain no-repeat url("/assets/png/ton-diamond.png");
}

.stars-input-wrap--recipient input {
  padding-right: 2.35rem;
}

.stars-recipient-pill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.82rem;
  padding: 0.46rem 0.92rem 0.46rem 2.18rem;
  border-radius: var(--radius-panel);
  pointer-events: none;
  z-index: 4;
}

.stars-recipient-pill.has-avatar {
  padding-left: 2.18rem;
  gap: 0.94rem;
}

.stars-recipient-pill__avatar-wrap {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 2.2rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.stars-recipient-pill__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stars-recipient-pill__name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.96);
  margin-right: 0.36rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stars-recipient-pill__clear {
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(var(--site-text-muted-rgb), 0.82);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.stars-recipient-pill__clear:hover {
  color: var(--site-text-strong);
  background: rgba(255, 255, 255, 0.08);
}

.stars-input-wrap--recipient input.is-previewing {
  color: transparent !important;
  caret-color: transparent;
}

.stars-input-wrap--recipient input.is-previewing::placeholder {
  color: transparent !important;
}

.stars-field input {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-panel);
  border: 1px solid var(--input-glass-border-color);
  background-color: var(--input-glass-fill);
  backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  -webkit-backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  box-shadow:
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
  color: rgba(255, 255, 255, 0.96);
  padding: 0.78rem 0.88rem 0.78rem 2.7rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease,
    backdrop-filter 0.15s ease;
}

.stars-field textarea {
  min-height: 5.25rem;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-panel);
  border: 1px solid var(--input-glass-border-color);
  background-color: var(--input-glass-fill);
  backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  -webkit-backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  box-shadow:
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
  color: rgba(255, 255, 255, 0.96);
  padding: 0.72rem 0.85rem;
  font: inherit;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.stars-field textarea::placeholder {
  color: var(--site-input-placeholder);
}

.stars-field input:hover:not(:disabled):not(:focus) {
  background-color: var(--input-glass-fill-hover);
  border-color: rgba(255, 255, 255, 0.18);
}

.stars-field select:hover:not(:disabled):not(:focus) {
  background-color: var(--input-glass-fill-hover);
  border-color: rgba(255, 255, 255, 0.18);
}

.stars-field textarea:hover:not(:disabled):not(:focus) {
  background-color: var(--input-glass-fill-hover);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Home hero search (present/future markup under main.home-main) — same tokens, no gradients on shell. */
main.home-main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(
    [hidden]
  ):not([type="hidden"]),
main.home-main textarea {
  border-radius: var(--radius-panel);
  border: 1px solid var(--input-glass-border-color);
  background-color: var(--input-glass-fill);
  backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  -webkit-backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  box-shadow:
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
  color: rgba(255, 255, 255, 0.96);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

main.home-main input:focus,
main.home-main textarea:focus {
  border-color: rgba(var(--site-accent-rgb), 0.55);
  background-color: var(--input-glass-fill-focus);
  box-shadow:
    var(--site-focus-ring),
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
}

main.home-main textarea::placeholder,
main.home-main input::placeholder {
  color: var(--site-input-placeholder);
}

/* Plain account content (no `.stars-field`); omit Stars/Premium — they use `.account-main--stars` + `.stars-field`. */
main.account-main:not(.account-main--stars) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(
    [type="button"]
  ):not([hidden]):not([type="hidden"]),
main.account-main:not(.account-main--stars) textarea {
  border-radius: var(--radius-panel);
  border: 1px solid var(--input-glass-border-color);
  background-color: var(--input-glass-fill);
  backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  -webkit-backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  box-shadow:
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
  color: rgba(255, 255, 255, 0.96);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

main.account-main:not(.account-main--stars) input:focus,
main.account-main:not(.account-main--stars) textarea:focus {
  border-color: rgba(var(--site-accent-rgb), 0.55);
  background-color: var(--input-glass-fill-focus);
  box-shadow:
    var(--site-focus-ring),
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
}

main.account-main:not(.account-main--stars) input::placeholder,
main.account-main:not(.account-main--stars) textarea::placeholder {
  color: var(--site-input-placeholder);
}

.stars-field input::placeholder {
  color: var(--site-input-placeholder);
}

/* Fluid Input (Liquid Optics demo §09) — pill glass; class on Stars/Premium text fields only. */
.stars-field input.input-fluid {
  border-radius: var(--input-fluid-radius);
  min-height: var(--input-fluid-min-height);
  padding: var(--input-fluid-pad-y) var(--input-fluid-pad-x);
  padding-left: var(--input-fluid-pad-left-icon);
  border: 1px solid var(--input-fluid-border);
  background-color: var(--input-fluid-bg);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: var(--input-fluid-shadow);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  transition: var(--input-fluid-transition);
  -webkit-tap-highlight-color: transparent;
}

.stars-input-wrap--recipient:not(:has(.stars-input-icon)) input.input-fluid {
  padding-left: var(--input-fluid-pad-x);
}

.stars-field input.input-fluid::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.stars-field input.input-fluid:hover:not(:disabled):not(:focus) {
  background-color: var(--input-fluid-bg);
  border-color: var(--input-fluid-border-hover);
  box-shadow: var(--input-fluid-shadow);
}

/* Hide number input steppers for Fragment-like amount field. */
.stars-field input[type="number"]::-webkit-outer-spin-button,
.stars-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stars-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.stars-field select {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-ui);
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--input-glass-border-color);
  background-color: var(--input-glass-fill);
  color: var(--site-text-strong);
  padding: 0.55rem 2.1rem 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  -webkit-backdrop-filter: blur(var(--input-glass-blur)) saturate(145%);
  box-shadow:
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23cbd6e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 0.92rem;
  background-position: calc(100% - 0.65rem) 50%;
  background-repeat: no-repeat;
}

.stars-field select:focus {
  border-color: rgba(var(--site-accent-rgb), 0.52);
  background-color: var(--input-glass-fill-focus);
  box-shadow:
    var(--site-focus-ring),
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
}

.stars-field select:focus-visible {
  outline: none;
}

.stars-field select:user-invalid {
  border-color: rgba(var(--color-error-rgb), 0.52);
}

.stars-field select:focus-visible:user-invalid {
  box-shadow:
    0 0 0 2px rgba(var(--color-error-rgb), 0.28),
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
}

.stars-field input:focus {
  border-color: rgba(var(--site-accent-rgb), 0.55);
  background-color: var(--input-glass-fill-focus);
  box-shadow:
    var(--site-focus-ring),
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
}

.stars-field input.input-fluid:focus:not(:focus-visible) {
  outline: none;
  border-color: var(--input-fluid-border-focus);
  background-color: var(--input-fluid-bg-focus);
  box-shadow: var(--input-fluid-shadow);
}

/* Fluid pills use `.liquid-input-durovs__glass` for focus/hover; keep input free of extra outline. */
.stars-field input.input-fluid:focus-visible {
  outline: none;
  outline-offset: 0;
  border-color: var(--input-fluid-border-focus);
  background-color: var(--input-fluid-bg-focus);
  box-shadow: var(--input-fluid-shadow-focus);
}

.stars-field input:focus-visible:user-invalid {
  border-color: rgba(var(--color-error-rgb), 0.6);
  box-shadow:
    0 0 0 2px rgba(var(--color-error-rgb), 0.32),
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
}

.stars-field input.input-fluid:focus-visible:user-invalid {
  border-color: rgba(var(--color-error-rgb), 0.65);
  box-shadow:
    0 0 0 2px rgba(var(--color-error-rgb), 0.35),
    var(--input-fluid-shadow-focus);
}

.stars-page.stars-buy .stars-field .liquid-input-durovs .input-fluid:focus-visible:user-invalid {
  border: none !important;
  outline: none;
  box-shadow: none !important;
}

.stars-field input:user-invalid:not(:placeholder-shown) {
  border-color: rgba(var(--color-error-rgb), 0.52);
}

.stars-field input.input-fluid:user-invalid:not(:placeholder-shown) {
  border-color: rgba(var(--color-error-rgb), 0.55);
  box-shadow: var(--input-fluid-shadow);
}

.stars-field textarea:focus {
  border-color: rgba(var(--site-accent-rgb), 0.55);
  background-color: var(--input-glass-fill-focus);
  box-shadow:
    var(--site-focus-ring),
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
}

.stars-field textarea:user-invalid:not(:placeholder-shown) {
  border-color: rgba(var(--color-error-rgb), 0.52);
}

.stars-field textarea:focus-visible:user-invalid {
  border-color: rgba(var(--color-error-rgb), 0.6);
  box-shadow:
    0 0 0 2px rgba(var(--color-error-rgb), 0.32),
    var(--input-glass-inset-highlight),
    var(--input-glass-inset-deep);
}

.stars-field-error {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  margin-top: 0.4rem;
  padding: 0.48rem 0.8rem 0.5rem;
  border-radius: var(--radius-panel);
  background: var(--color-error-bg);
  color: rgba(255, 255, 255, 0.98);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/*
 * Liquid pill + error: red strip meets the pill with a ~1px overlap and the same stadium radius as
 * `.liquid-input-durovs` on the top so the join follows the curved glass (not a straight-cut rectangle).
 */
.stars-page.stars-buy .stars-field-stack.has-field-error:has(> .liquid-input-durovs) > .liquid-input-durovs,
.stars-page .stars-buy .stars-field-stack.has-field-error:has(> .liquid-input-durovs) > .liquid-input-durovs,
#premium-buy-form .stars-field-stack.has-field-error:has(> .liquid-input-durovs) > .liquid-input-durovs {
  position: relative;
  z-index: 2;
}

.stars-page.stars-buy .stars-field-stack.has-field-error:has(> .liquid-input-durovs) > .stars-field-error,
.stars-page .stars-buy .stars-field-stack.has-field-error:has(> .liquid-input-durovs) > .stars-field-error,
#premium-buy-form .stars-field-stack.has-field-error:has(> .liquid-input-durovs) > .stars-field-error {
  position: relative;
  /* Above .liquid-input-durovs (z-index: 2) and pill (z-index: 4) so validation text is not covered. */
  z-index: 6;
  /* Single-pixel overlap with tray; top radii match pill so the banner “caps” the stadium shape. */
  margin-top: -1px;
  padding: 0.58rem 1rem 0.52rem;
  padding-top: 0.78rem;
  border-radius: var(--input-fluid-radius) var(--input-fluid-radius) 18px 18px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-top-color: rgba(0, 0, 0, 0.14);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.28);
}

/*
 * Recipient row: error sits fully below the glass pill + preview overlay (no negative overlap).
 * Width still matches the field stack; spacing uses the same error surface tokens as `.stars-field-error`.
 */
.stars-page.stars-buy .stars-field-stack.has-field-error:has(> .stars-input-wrap--recipient) > .stars-field-error,
#premium-buy-form .stars-field-stack.has-field-error:has(> .stars-input-wrap--recipient) > .stars-field-error {
  z-index: 1;
  margin-top: 0.42rem;
  padding: 0.48rem 0.8rem 0.5rem;
  border-radius: var(--radius-panel);
  box-shadow: none;
}

.stars-submit {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-panel);
  border: 1px solid var(--site-border-strong);
  background: rgba(var(--site-raised-rgb), 0.72);
  color: rgba(255, 255, 255, 0.96);
  font: inherit;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: -0.01em;
  padding: 0.62rem 1rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color var(--site-motion-tap), background-color var(--site-motion-tap), color var(--site-motion-tap),
    transform var(--site-motion-tap), box-shadow var(--site-motion-tap);
}

.stars-submit:hover {
  border-color: rgba(var(--site-accent-rgb), 0.42);
  background: rgba(var(--site-accent-rgb), 0.14);
  color: var(--site-text-strong);
}

@media (prefers-reduced-motion: no-preference) {
  .stars-submit:active {
    transform: translateY(1px) scale(0.995);
  }
}

.stars-submit:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: var(--site-focus-offset);
}

.stars-packages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.48rem;
  margin-top: 0.15rem;
}

@media (min-width: 480px) {
  .stars-packages:not(.stars-packages--fragment) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stars-package {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.62rem;
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  box-shadow: var(--elevation-soft);
  color: var(--site-text-strong);
  border-radius: 12px;
  padding: 0.78rem 0.86rem;
  text-align: left;
  cursor: pointer;
  outline: none;
  contain: layout style;
  transform: translate3d(0, 0, 0);
  transition: border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.stars-package:hover:not(:disabled):not(.is-active) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(var(--site-surface-rgb), 0.42);
}

.stars-package:active:not(:disabled) {
  transform: translate3d(0, 0, 0) scale(0.992);
  transition-duration: 0.12s;
}

.stars-package:focus-visible {
  border-color: rgba(var(--site-accent-rgb), 0.5);
  outline: 2px solid rgba(var(--site-accent-rgb), 0.4);
  outline-offset: var(--site-focus-offset);
  box-shadow: none;
}

.stars-package.is-active {
  border-color: rgba(var(--site-accent-rgb), 0.42);
  background: rgba(var(--site-btn-primary-rgb), 0.16);
  box-shadow: 0 0 0 1px rgba(var(--site-accent-rgb), 0.3);
  transform: none;
}

.stars-package__radio {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  position: relative;
}

.stars-package__radio::after {
  content: "";
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 999px;
  background: rgba(var(--site-accent-rgb), 0.95);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
}

.stars-package.is-active .stars-package__radio {
  border-color: rgba(var(--site-accent-rgb), 0.65);
}

.stars-package.is-active .stars-package__radio::after {
  transform: translate(-50%, -50%) scale(1);
}

.stars-package__title {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  min-width: 0;
}

/* Stars presets: numeric label + muted “Stars” word (premium keeps plain title text). */
.stars-package__headline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em 0.32em;
  min-width: 0;
}

.stars-package__amount {
  font-size: 1.12em;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.97);
}

.stars-package__stars-word {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.48);
  text-transform: uppercase;
}

.stars-package.is-active .stars-package__amount {
  color: var(--site-text-strong);
}

.stars-package.is-active .stars-package__stars-word {
  color: rgba(var(--site-accent-rgb), 0.55);
}

.stars-package__icon {
  width: 1.22rem;
  height: 1.22rem;
  flex: 0 0 1.22rem;
  background: center / contain no-repeat url("/assets/png/star.png");
}

.stars-package__ton {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--site-text-muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.news-filters {
  display: inline-flex;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

.news-filter-btn {
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  color: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.news-filter-btn.is-active {
  color: rgba(255, 255, 255, 0.97);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
}

.news-stale-note {
  margin: 0 0 0.6rem;
  color: rgba(var(--color-warning-rgb), 0.94);
  font-size: 0.78rem;
}

.news-topics-segmented {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.2rem;
  margin-bottom: 0;
  border: 1px solid var(--site-border);
  border-radius: 999px;
  background: var(--color-overlay-04);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.36);
  overflow: hidden;
  --pill-x: 0px;
  --pill-y: 0px;
  --pill-w: 0px;
  --pill-h: 0px;
}

.news-topics-segmented::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pill-w);
  height: var(--pill-h);
  border-radius: 999px;
  background: var(--pill-track-fill);
  transform: translate3d(var(--pill-x), var(--pill-y), 0);
  transition: none;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
}

.news-topics-segmented.pill-motion::before {
  transition: transform 0.13s cubic-bezier(0.22, 1, 0.36, 1), width 0.13s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.13s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, width, height;
}

.news-topics-segmented.is-ready::before {
  opacity: 1;
}

.news-topics-segmented__btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  padding: 0.34rem 0.68rem;
  border-radius: 999px;
  cursor: pointer;
}

.news-topics-segmented__btn.is-active {
  color: rgba(255, 255, 255, 0.98);
}

.news-topics-segmented__btn:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: var(--site-focus-offset);
}

.premium-packages .stars-package__ton {
  color: var(--site-text-muted);
  font-size: 0.84rem;
  font-weight: 500;
}

/* Premium: one period per row (override Stars 2-up grid); no outer tray — package buttons carry their own surface. */
#premium-packages.stars-packages {
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.stars-package__ton-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background: center / contain no-repeat url("/assets/png/ton-diamond.png");
}

.stars-pre {
  margin: 0;
  padding: 0.6rem 0.72rem;
  border-radius: 12px;
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  line-height: 1.38;
  overflow: auto;
  max-height: 240px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* TonConnect init errors — one `#ton-connect-error` per page; structure built in script.js `showErr`. */
#ton-connect-error.ton-connect-err {
  position: relative;
  flex: 1 1 100%;
  width: 100%;
  max-width: min(28rem, calc(100vw - 2 * var(--site-pad-x)));
  margin: 0;
  margin-top: 0.18rem;
  padding: 0.42rem 2.65rem 0.46rem 0.5rem;
  box-sizing: border-box;
  border-radius: calc(var(--radius-panel) - 2px);
  border: 1px solid rgba(var(--color-error-rgb), 0.2);
  background: rgba(var(--site-surface-rgb), 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  line-height: 1.38;
  color: var(--site-text-soft);
  text-align: left;
}

#ton-connect-error.ton-connect-err:not(:has(.ton-connect-err__detail)) {
  padding-bottom: 0.4rem;
}

.site-header__wallet-cluster > .header-wallet #ton-connect-error.ton-connect-err {
  margin-top: 0.14rem;
  max-width: min(18rem, calc(100vw - 2 * var(--site-pad-x)));
}

.ton-connect-err__head {
  display: flex;
  align-items: center;
  margin: 0 0 0.16rem;
  min-height: 1.1rem;
}

.ton-connect-err__label {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--color-error-rgb), 0.72);
}

.ton-connect-err__label::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border-radius: 3px;
  background: rgba(var(--color-error-rgb), 0.14)
    url("/assets/png/ton.png") center / 10px 10px no-repeat;
}

.ton-connect-err__dismiss {
  position: absolute;
  top: 0.32rem;
  right: 0.34rem;
  margin: 0;
  padding: 0.1rem 0.34rem;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: rgba(var(--site-text-muted-rgb), 0.92);
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.ton-connect-err__dismiss:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--site-text-strong);
}

.ton-connect-err__dismiss:focus-visible {
  outline: 2px solid rgba(var(--site-accent-rgb), 0.45);
  outline-offset: 2px;
}

.ton-connect-err__msg {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.36;
  color: rgba(255, 252, 252, 0.94);
}

.ton-connect-err__detail {
  margin: 0.22rem 0 0;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.34;
  color: rgba(var(--site-text-muted-rgb), 0.88);
  word-break: break-word;
}

.ton-connect-err__detail:empty {
  display: none;
}

@media (max-width: 680px) {
  .account-main--stars h1 {
    margin-bottom: 0.3rem;
  }

  .account-main--news h1 {
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
  }

  .stars-hero-subtitle {
    font-size: 0.86rem;
    line-height: 1.35;
    margin-bottom: 0.8rem;
    max-width: 34ch;
  }

  .stars-switch {
    width: min(360px, 100%);
    margin-bottom: 0.7rem;
    padding: 0.24rem;
  }

  .stars-switch::before {
    top: 0.24rem;
    left: 0.24rem;
    width: calc((100% - 0.48rem) / 2);
    height: calc(100% - 0.48rem);
  }

  .stars-switch__btn {
    font-size: 0.76rem;
    padding: 0.34rem 0.62rem;
  }

  .stars-card__title {
    font-size: 0.98rem;
  }

  .stars-form {
    gap: 0.75rem;
  }

  .stars-field__label {
    font-size: 0.78rem;
    color: var(--site-text-muted);
  }

  .stars-field input {
    font-size: 0.94rem;
    padding: 0.68rem 0.76rem 0.68rem 2.58rem;
  }

  .stars-input-wrap--recipient:has(.stars-input-icon) input.input-fluid,
  .stars-input-wrap--amount input.input-fluid {
    font-size: 1.05rem;
    letter-spacing: 1px;
    min-height: 3.5rem;
    padding: 0.72rem 1.65rem 0.72rem 2.58rem;
    border-radius: var(--input-fluid-radius);
  }

  .stars-input-wrap--recipient:not(:has(.stars-input-icon)) input.input-fluid {
    font-size: 1.05rem;
    letter-spacing: 1px;
    min-height: 3.5rem;
    padding: 0.72rem 1.65rem;
    border-radius: var(--input-fluid-radius);
  }

  .stars-input-wrap--amount::before {
    left: 0.9rem;
    width: 1rem;
    height: 1rem;
  }

  .stars-input-wrap--amount input.has-inline-quote {
    padding-right: 6.5rem;
  }

  .stars-amount-quote {
    right: 0.62rem;
    font-size: 0.79rem;
    gap: 0.24rem;
  }

  .stars-amount-quote__icon {
    width: 0.82rem;
    height: 0.82rem;
    flex-basis: 0.82rem;
  }

  .stars-recipient-pill {
    padding: 0.38rem 0.76rem 0.38rem 1.92rem;
    gap: 0.6rem;
  }

  .stars-recipient-pill.has-avatar {
    padding-left: 1.92rem;
    gap: 0.72rem;
  }

  .stars-recipient-pill__avatar-wrap {
    width: 1.86rem;
    height: 1.86rem;
    flex-basis: 1.86rem;
  }

  .stars-recipient-pill__name {
    font-size: 0.96rem;
  }

  .stars-recipient-pill__clear {
    width: 1.72rem;
    height: 1.72rem;
    font-size: 1.58rem;
  }

  .stars-package {
    padding: 0.72rem 0.78rem;
    border-radius: 12px;
  }

  .stars-package__title {
    font-size: 0.93rem;
    gap: 0.38rem;
  }

  .stars-package__ton {
    font-size: 0.88rem;
  }

  .stars-package__icon {
    width: 1.04rem;
    height: 1.04rem;
    flex-basis: 1.04rem;
  }

  .stars-package__ton-icon {
    width: 0.88rem;
    height: 0.88rem;
    flex-basis: 0.88rem;
  }

  .stars-submit {
    font-size: 0.82rem;
    padding: 0.52rem 0.8rem;
  }

  .site-header__brand-row {
    gap: 0.38rem;
  }

  .site-header__logo-wrap {
    --logo-h: clamp(calc(36px * 1.2), 8.2vw, calc(44px * 1.2));
    width: var(--logo-h);
    height: var(--logo-h);
  }

  .site-header__brand {
    font-size: clamp(1.18rem, 3.65vw + 0.32rem, 1.42rem);
    letter-spacing: -0.04em;
  }

  .site-header__segmented-link {
    font-size: clamp(0.76rem, 1.6vw + 0.55rem, 0.8125rem);
    font-weight: 600;
    padding: calc(0.55rem * 1.2) calc(0.45rem * 1.2) calc(calc(0.55rem * 1.2) + 2px);
    min-height: calc(40px * 1.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
  }

  .site-header__segmented-link::after {
    left: calc(0.45rem * 1.2);
    right: calc(0.45rem * 1.2);
  }

  .stars-grid {
    grid-template-columns: 1fr;
  }

  .stars-packages {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .account-main--stars {
    --stars-fragment-column-max: min(40rem, 100%);
  }

  .account-main--news h1 {
    font-size: 2.35rem;
  }

  .account-main--stars .stars-grid {
    max-width: var(--stars-fragment-column-max);
  }

  .stars-hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.15rem;
    max-width: 48ch;
  }

  .stars-switch {
    width: min(40rem, 100%);
    margin-bottom: 1rem;
  }

  .stars-switch__btn {
    font-size: 0.86rem;
    padding: 0.42rem 0.9rem;
  }

  .stars-card__title {
    font-size: 1.1rem;
  }

  .stars-field__label {
    font-size: 0.84rem;
  }

  .stars-field input {
    font-size: 1.12rem;
    padding: 0.92rem 1rem 0.92rem 3.05rem;
    border-radius: 14px;
  }

  .stars-input-wrap--recipient:has(.stars-input-icon) input.input-fluid,
  .stars-input-wrap--amount input.input-fluid {
    font-size: 1.1rem;
    letter-spacing: 1px;
    min-height: var(--input-fluid-min-height);
    padding: 0.88rem 1.85rem 0.88rem 3.05rem;
    border-radius: var(--input-fluid-radius);
  }

  .stars-input-wrap--recipient:not(:has(.stars-input-icon)) input.input-fluid {
    font-size: 1.1rem;
    letter-spacing: 1px;
    min-height: var(--input-fluid-min-height);
    padding: 0.88rem 1.85rem;
    border-radius: var(--input-fluid-radius);
  }

  .stars-input-wrap--amount::before {
    left: 1rem;
    width: 1.1rem;
    height: 1.1rem;
  }

  .stars-input-wrap--recipient::before {
    left: 0.9rem;
    width: 1.02rem;
    height: 1.02rem;
  }

  .stars-input-wrap--amount input.has-inline-quote {
    padding-right: 8.25rem;
  }

  .stars-amount-quote {
    right: 0.85rem;
    font-size: 0.92rem;
  }

  .stars-amount-quote__icon {
    width: 0.98rem;
    height: 0.98rem;
    flex-basis: 0.98rem;
  }

  .stars-recipient-pill {
    border-radius: 14px;
  }

  .stars-package {
    padding: 1rem 1.08rem;
    border-radius: 14px;
  }

  .stars-package__title {
    font-size: 1.12rem;
    gap: 0.48rem;
  }

  .stars-package__ton {
    font-size: 1.05rem;
  }

  .stars-package__icon {
    width: 1.28rem;
    height: 1.28rem;
    flex-basis: 1.28rem;
  }

  .stars-package__ton-icon {
    width: 1.06rem;
    height: 1.06rem;
    flex-basis: 1.06rem;
  }

  .stars-package__radio {
    width: 1.28rem;
    height: 1.28rem;
  }

  .stars-package__radio::after {
    width: 0.62rem;
    height: 0.62rem;
  }

  .stars-submit {
    font-size: 0.9rem;
    padding: 0.72rem 1.15rem;
    border-radius: 14px;
  }

  .stars-field-error {
    border-radius: 14px;
    font-size: 0.8rem;
    padding: 0.55rem 0.92rem 0.58rem;
  }

  .stars-page.stars-buy .stars-field-stack.has-field-error:has(> .liquid-input-durovs) > .stars-field-error,
  .stars-page .stars-buy .stars-field-stack.has-field-error:has(> .liquid-input-durovs) > .stars-field-error,
  #premium-buy-form .stars-field-stack.has-field-error:has(> .liquid-input-durovs) > .stars-field-error {
    z-index: 6;
    margin-top: -1px;
    border-radius: var(--input-fluid-radius) var(--input-fluid-radius) 18px 18px;
    padding: 0.58rem 1.05rem 0.55rem;
    padding-top: 0.78rem;
  }

  .stars-page.stars-buy .stars-field-stack.has-field-error:has(> .stars-input-wrap--recipient) > .stars-field-error,
  #premium-buy-form .stars-field-stack.has-field-error:has(> .stars-input-wrap--recipient) > .stars-field-error {
    z-index: 1;
    margin-top: 0.42rem;
    padding: 0.55rem 0.92rem 0.58rem;
    border-radius: 14px;
    box-shadow: none;
  }
}

@media (min-width: 1280px) {
  .account-main--stars {
    --stars-fragment-column-max: min(44rem, 100%);
  }

  .account-main--stars .stars-grid {
    max-width: var(--stars-fragment-column-max);
  }

  .stars-switch {
    width: min(44rem, 100%);
  }

  .stars-field input {
    font-size: 1.15rem;
    padding: 0.98rem 1.05rem 0.98rem 3.2rem;
  }

  .stars-input-wrap--recipient:has(.stars-input-icon) input.input-fluid,
  .stars-input-wrap--amount input.input-fluid {
    font-size: 1.1rem;
    padding: 0.92rem 1.9rem 0.92rem 3.2rem;
    border-radius: var(--input-fluid-radius);
  }

  .stars-input-wrap--recipient:not(:has(.stars-input-icon)) input.input-fluid {
    font-size: 1.1rem;
    padding: 0.92rem 1.9rem;
    border-radius: var(--input-fluid-radius);
  }

  .stars-input-wrap--amount::before {
    left: 1.05rem;
    width: 1.14rem;
    height: 1.14rem;
  }

  .stars-input-wrap--amount input.has-inline-quote {
    padding-right: 8.5rem;
  }

  .stars-package {
    padding: 1.06rem 1.14rem;
  }

  .stars-package__title {
    font-size: 1.16rem;
  }

  .stars-package__ton {
    font-size: 1.08rem;
  }
}

/* Thin in-site navigation progress bar (fixed top). JS: nav-pill.js */
#durovs-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
  background: rgba(var(--site-text-muted-rgb), 0.14);
}

#durovs-nav-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--site-accent);
}

#durovs-nav-progress.durovs-nav-progress--animating #durovs-nav-progress__fill {
  transition: transform 0.5s cubic-bezier(0.32, 0.08, 0.24, 1);
}

#durovs-nav-progress.durovs-nav-progress--complete #durovs-nav-progress__fill {
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  #durovs-nav-progress.durovs-nav-progress--animating #durovs-nav-progress__fill,
  #durovs-nav-progress.durovs-nav-progress--complete #durovs-nav-progress__fill {
    transition-duration: 0.04s;
    transition-timing-function: linear;
  }
}

#durovs-nav-progress.durovs-nav-progress--hidden {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #durovs-nav-progress.durovs-nav-progress--hidden {
    transition: none;
  }
}

/* Full-page fill: flat shell/content surface (no gradient banding). */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--site-bg);
}

main {
  max-width: min(var(--site-content-max), 100%);
  margin: 0 auto;
  padding: var(--site-section-block) var(--site-pad-x);
}

h1 {
  margin: 0 0 0.625rem;
  font-size: clamp(1.62rem, 2.8vw + 0.75rem, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--site-text-strong);
}

/* Primary page titles — match header wordmark: Nunito 900, token gradient + clip, shadow. */
main h1 {
  font-family: "Nunito", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  font-size: clamp(1.62rem, 2.8vw + 0.75rem, min(2.35rem, 12vw));
  color: var(--site-text-strong);
  filter: drop-shadow(var(--site-page-title-shadow));
}

main.home-main--optics h1 {
  font-size: clamp(1.85rem, 4vw + 0.55rem, min(2.75rem, 14vw));
  line-height: 1.08;
  margin-bottom: 0.5rem;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  main h1 {
    background-image: var(--site-page-title-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  main h1 {
    color: var(--site-text-strong);
    -webkit-text-fill-color: unset;
    background: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  main h1 {
    filter: none;
  }
}

p {
  margin: 0;
  max-width: 40ch;
  color: var(--site-text-muted);
}

/* In-content links (Fragment-style accent; exclude card / header chrome). */
.account-main p a:not([class]),
.account-main .account-muted a:not([class]),
.account-main .account-hint a:not([class]),
.stars-help a:not([class]) {
  color: var(--site-accent);
  text-decoration: none;
}

.account-main p a:not([class]):hover,
.account-main .account-muted a:not([class]):hover,
.account-main .account-hint a:not([class]):hover,
.stars-help a:not([class]):hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

code {
  font-size: 0.9em;
}

/* prefers-reduced-motion: drop costly blur; snap glass tokens to nearly-opaque solids. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --glass-blur: 0px;
    --glass-blur-tight: 0px;
    --glass-saturate: 100%;
    --glass-header-bg: rgb(var(--site-header-bg-rgb));
    --glass-bg: rgba(var(--site-surface-rgb), 0.94);
    --glass-bg-strong: rgba(var(--site-header-bg-rgb), 0.97);
    --glass-bg-subtle: rgba(var(--site-surface-rgb), 0.9);
    --glass-chip-bg: rgb(var(--site-btn-header-bg-rgb));
    --input-glass-blur: 0px;
    --input-glass-fill: rgba(var(--site-raised-rgb), 0.9);
    --input-glass-fill-hover: rgba(var(--site-raised-rgb), 0.92);
    --input-glass-fill-focus: rgba(var(--site-raised-rgb), 0.96);
    --liquid-field-blur: 0px;
    --liquid-field-saturate: 100%;
    --liquid-field-glass-tint: rgba(var(--site-raised-rgb), 0.88);
    --liquid-field-glass-tint-focus: rgba(var(--site-raised-rgb), 0.92);
    --liquid-field-glass-tint-hover: rgba(var(--site-raised-rgb), 0.9);
    --liquid-tray-blur: 0px;
    --liquid-tray-saturate: 100%;
  }

  .glass,
  .glass--strong,
  .glass--subtle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .stars-field input,
  .stars-field textarea,
  .stars-field select,
  main.home-main input,
  main.home-main textarea,
  main.account-main:not(.account-main--stars) input,
  main.account-main:not(.account-main--stars) textarea {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .stars-field input.input-fluid {
    transition-duration: 55ms;
    transition-timing-function: ease;
    background-color: rgba(var(--site-raised-rgb), 0.84);
  }

  .stars-field .liquid-input-durovs input.input-fluid {
    background-color: transparent !important;
  }

  .liquid-input-durovs__glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition-duration: 55ms;
  }

  .liquid-input-durovs__glass.liquid-kube--chrome {
    --durovs-liquid-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .liquid-glass-tray--packages {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(var(--site-surface-rgb), 0.94);
  }

  .stars-page.stars-buy .stars-card.stars-view {
    /* Intentionally no card panel behind pills/CTA — reads cleaner on liquid glass page */
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .wallet-menu-trigger--pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--site-header-pill-fill);
    box-shadow: var(--elevation-soft);
  }

  .liquid-input-durovs__glass::after,
  .liquid-glass-tray--packages::after {
    opacity: 0.12;
  }
}

/* NFT detail (/nft-detail) — large art + sale / metadata rows. */
body.nft-detail-page .nft-detail-main {
  max-width: min(52rem, calc(100vw - 2 * var(--site-pad-x)));
  width: 100%;
  margin-inline: auto;
  padding: clamp(1rem, 3vmin, 1.75rem) var(--site-pad-x) clamp(2rem, 5vmin, 3rem);
  box-sizing: border-box;
}

body.nft-detail-page .nft-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: clamp(0.85rem, 2vmin, 1.25rem);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--site-accent);
  text-decoration: none;
}

body.nft-detail-page .nft-detail-back:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.nft-detail-page .nft-detail-hero {
  width: 100%;
  max-width: min(28rem, 88vw);
  margin: 0 auto clamp(1.25rem, 3vmin, 2rem);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pebble);
  overflow: hidden;
  border: 1px solid var(--site-border);
  background: var(--site-raised);
  box-shadow: var(--elev-pebble);
}

body.nft-detail-page .nft-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0a0a0c;
  border-radius: inherit;
}

body.nft-detail-page .nft-detail-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 4vmin, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--site-text-strong);
  text-align: center;
}

body.nft-detail-page .nft-detail-collection {
  margin: 0 auto 1rem;
  max-width: 42ch;
  text-align: center;
  font-size: 0.9rem;
  color: var(--site-text-muted);
}

body.nft-detail-page .nft-detail-sale {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1rem, 2.5vmin, 1.5rem);
}

body.nft-detail-page .nft-detail-sale-pill {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.nft-detail-page .nft-detail-sale-pill--sale {
  background: rgba(var(--site-accent-rgb), 0.2);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(var(--site-accent-rgb), 0.45);
}

body.nft-detail-page .nft-detail-sale-pill--nfs {
  background: rgba(255, 255, 255, 0.06);
  color: var(--site-text-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.nft-detail-page .nft-detail-desc {
  margin: 0 auto 1.5rem;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--site-text-soft);
  text-align: center;
}

body.nft-detail-page .nft-detail-kv {
  margin: 0 auto;
  max-width: 36rem;
  width: 100%;
  border-radius: var(--radius-panel);
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  overflow: hidden;
}

body.nft-detail-page .nft-detail-kv__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.5rem 1rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: start;
}

body.nft-detail-page .nft-detail-kv__row:last-child {
  border-bottom: none;
}

body.nft-detail-page .nft-detail-kv__k {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--site-text-muted);
}

body.nft-detail-page .nft-detail-kv__v {
  font-size: 0.8125rem;
  color: var(--site-text-strong);
  word-break: break-word;
}

body.nft-detail-page .nft-detail-kv__v a {
  color: var(--site-accent);
  text-decoration: none;
}

body.nft-detail-page .nft-detail-kv__v a:hover {
  text-decoration: underline;
}

body.nft-detail-page .nft-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-top: clamp(1.25rem, 3vmin, 2rem);
}

body.nft-detail-page .nft-detail-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-ui);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--site-border);
  color: var(--site-text-strong);
  background: var(--site-surface);
}

body.nft-detail-page .nft-detail-actions a.nft-detail-actions__primary {
  background: rgba(var(--site-accent-rgb), 0.18);
  border-color: rgba(var(--site-accent-rgb), 0.4);
  color: #fff;
}

body.nft-detail-page .nft-detail-sell-wrap {
  width: 100%;
  max-width: 28rem;
  margin: 0.5rem auto 0;
  text-align: center;
}

body.nft-detail-page .nft-detail-sell-hint {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--site-text-muted);
}

body.nft-detail-page .nft-detail-sell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-ui);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(var(--site-accent-rgb), 0.55);
  color: #fff;
  background: rgba(var(--site-accent-rgb), 0.35);
}

body.nft-detail-page .nft-detail-sell-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.account-main--gifts .gifts-market-section {
  margin-top: clamp(1.5rem, 4vmin, 2.5rem);
  padding-top: clamp(1rem, 3vmin, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.account-main--gifts .gifts-market-section__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.05rem, 2.8vmin, 1.35rem);
  font-weight: 800;
  color: var(--site-text-strong);
}

.account-main--gifts .gifts-market-section__status {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  color: #f0a8a8;
}

.account-main--gifts .gifts-market-profile-wrap {
  width: 100%;
  max-width: min(1400px, calc(100vw - 2 * var(--site-pad-x)));
  margin-inline: auto;
}

body.nft-detail-page .nft-detail-loading,
body.nft-detail-page .nft-detail-error {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--site-text-muted);
}

body.nft-detail-page .nft-detail-error {
  color: #f0a8a8;
}

@media (max-width: 520px) {
  body.nft-detail-page .nft-detail-kv__row {
    grid-template-columns: 1fr;
  }
}

/* NFT item page — two-column: visual + sidebar (replaces single-column nft-detail layout for live routes). */
body.nft-item-page .nft-item-main {
  max-width: min(72rem, calc(100vw - 2 * var(--site-pad-x)));
  width: 100%;
  margin-inline: auto;
  padding: clamp(1rem, 3vmin, 1.75rem) var(--site-pad-x) clamp(2rem, 5vmin, 3rem);
  box-sizing: border-box;
}

body.nft-item-page .nft-item-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: clamp(0.85rem, 2vmin, 1.25rem);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--site-accent);
  text-decoration: none;
}

body.nft-item-page .nft-item-back:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.nft-item-page .nft-item-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

body.nft-item-page .nft-item-visual {
  position: sticky;
  top: clamp(0.75rem, 2vmin, 1.25rem);
}

body.nft-item-page .nft-item-visual__stack {
  position: relative;
  width: 100%;
  max-width: min(32rem, 100%);
  margin-inline: auto;
}

body.nft-item-page .nft-item-hero {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pebble);
  overflow: hidden;
  border: 1px solid var(--site-border);
  background: var(--site-raised);
  box-shadow: var(--elev-pebble);
}

body.nft-item-page .nft-item-hero--placeholder {
  background: linear-gradient(145deg, var(--site-raised), #0a0a0c);
}

body.nft-item-page .nft-item-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0a0a0c;
  border-radius: inherit;
}

body.nft-item-page .nft-item-lottie-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.nft-item-page .nft-item-lottie {
  width: 78%;
  height: 78%;
  max-width: 100%;
  max-height: 100%;
}

body.nft-item-page .nft-item-lottie svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

body.nft-item-page .nft-item-sidebar {
  min-width: 0;
}

body.nft-item-page .nft-item-sidebar__head {
  margin-bottom: clamp(1rem, 2.5vmin, 1.5rem);
}

body.nft-item-page .nft-item-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.25rem, 3.5vmin, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--site-text-strong);
  line-height: 1.15;
}

body.nft-item-page .nft-item-collection {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  color: var(--site-text-muted);
}

body.nft-item-page .nft-item-sale {
  margin-top: 0.25rem;
}

body.nft-item-page .nft-item-sale-pill {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.nft-item-page .nft-item-sale-pill--sale {
  background: rgba(var(--site-accent-rgb), 0.2);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(var(--site-accent-rgb), 0.45);
}

body.nft-item-page .nft-item-sale-pill--nfs {
  background: rgba(255, 255, 255, 0.06);
  color: var(--site-text-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.nft-item-page .nft-item-section {
  margin-bottom: clamp(1.1rem, 2.5vmin, 1.65rem);
}

body.nft-item-page .nft-item-section--actions {
  margin-bottom: 0;
}

body.nft-item-page .nft-item-section__h {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-text-muted);
}

body.nft-item-page .nft-item-section__h--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.nft-item-page .nft-item-about {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--site-text-soft);
  max-width: 52ch;
}

body.nft-item-page .nft-item-kv {
  border-radius: var(--radius-panel);
  border: 1px solid var(--site-border);
  background: var(--color-overlay-04);
  overflow: hidden;
}

body.nft-item-page .nft-item-kv__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.5rem 1rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: start;
}

body.nft-item-page .nft-item-kv__row:last-child {
  border-bottom: none;
}

body.nft-item-page .nft-item-kv__k {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--site-text-muted);
}

body.nft-item-page .nft-item-kv__v {
  font-size: 0.8125rem;
  color: var(--site-text-strong);
  word-break: break-word;
}

body.nft-item-page .nft-item-kv__v a {
  color: var(--site-accent);
  text-decoration: none;
}

body.nft-item-page .nft-item-kv__v a:hover {
  text-decoration: underline;
}

body.nft-item-page .nft-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

body.nft-item-page .nft-item-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-ui);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--site-border);
  color: var(--site-text-strong);
  background: var(--site-surface);
}

body.nft-item-page .nft-item-actions a.nft-item-actions__primary {
  background: rgba(var(--site-accent-rgb), 0.18);
  border-color: rgba(var(--site-accent-rgb), 0.4);
  color: #fff;
}

body.nft-item-page .nft-item-sell-mount {
  margin-top: clamp(0.85rem, 2vmin, 1.25rem);
}

body.nft-item-page .nft-item-sell-wrap {
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.nft-item-page .nft-item-sell-hint {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--site-text-muted);
  max-width: 40rem;
}

body.nft-item-page .nft-item-sell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-ui);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(var(--site-accent-rgb), 0.55);
  color: #fff;
  background: rgba(var(--site-accent-rgb), 0.35);
}

body.nft-item-page .nft-item-sell-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.nft-item-page .nft-item-loading,
body.nft-item-page .nft-item-error {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--site-text-muted);
}

body.nft-item-page .nft-item-error {
  color: #f0a8a8;
}

body.nft-item-page .nft-item-error__wrap {
  max-width: 36rem;
  margin: 0 auto;
  text-align: left;
}

body.nft-item-page .nft-item-error__p {
  margin: 0 0 0.75rem;
}

body.nft-item-page .nft-item-error__hint {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(242, 245, 249, 0.88);
}

body.nft-item-page .nft-item-error__hint a {
  color: rgba(var(--site-accent-rgb), 1);
  text-decoration: underline;
}

body.nft-item-page .nft-item-error__hint code {
  font-size: 0.88em;
  word-break: break-word;
}

@media (max-width: 900px) {
  body.nft-item-page .nft-item-layout {
    grid-template-columns: 1fr;
  }

  body.nft-item-page .nft-item-visual {
    position: relative;
    top: auto;
  }

  body.nft-item-page .nft-item-visual__stack {
    max-width: min(28rem, 100%);
  }
}

@media (max-width: 520px) {
  body.nft-item-page .nft-item-kv__row {
    grid-template-columns: 1fr;
  }
}