/* App furniture only. NFT artwork, native backdrops and chart data keep their
   own rendering. Repeated panels use alpha paint, not a live backdrop filter. */
html:root {
  color-scheme: dark;
  --ground: #08090c;
  --ink: #f5f5f7;
  --ink-dim: #b7b9c1;
  --ink-faint: #b0b3be;
  --surface: #1e2027;
  --deep: #121318;
  --hairline: #393b45;
  --metric-label: #b7b9c1;
  --ios-panel: rgba(33, 35, 43, .78);
  --ios-panel-solid: #202229;
  --ios-sheet: rgba(32, 34, 42, .96);
  --ios-control: rgba(255, 255, 255, .065);
  --ios-control-solid: #30323a;
  --ios-selected: rgba(255, 255, 255, .12);
  --ios-glass: rgba(32, 34, 42, .86);
  --ios-navigation-glass: rgba(27, 30, 38, .72);
  --ios-glass-solid: #252730;
  --ios-stroke: rgba(255, 255, 255, .11);
  --ios-gleam: rgba(255, 255, 255, .055);
  --ios-shadow: rgba(0, 0, 0, .20);
}

html:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f1f3f7;
  --ink: #20252f;
  --ink-dim: #596272;
  --ink-faint: #596272;
  --surface: #ffffff;
  --deep: #e9edf3;
  --hairline: #d9dee7;
  --metric-label: #596272;
  --ios-panel: rgba(255, 255, 255, .84);
  --ios-panel-solid: #ffffff;
  --ios-sheet: rgba(255, 255, 255, .96);
  --ios-control: rgba(31, 40, 54, .055);
  --ios-control-solid: #edf0f5;
  --ios-selected: rgba(255, 255, 255, .96);
  --ios-glass: rgba(247, 249, 252, .92);
  --ios-navigation-glass: rgba(247, 249, 252, .92);
  --ios-glass-solid: #f7f9fc;
  --ios-stroke: rgba(42, 54, 72, .13);
  --ios-gleam: rgba(255, 255, 255, .80);
  --ios-shadow: rgba(25, 37, 57, .09);
}

html:root[data-theme="pink"] {
  color-scheme: light;
  --ground: #fff5f7;
  --ink: #543744;
  --ink-dim: #765c68;
  --ink-faint: #765c68;
  --surface: #fff9fb;
  --deep: #f2dce5;
  --hairline: #e6c4d2;
  --metric-label: #765c68;
  --ios-panel: rgba(255, 249, 252, .80);
  --ios-panel-solid: #fff9fc;
  --ios-sheet: rgba(255, 249, 252, .96);
  --ios-control: rgba(145, 64, 96, .065);
  --ios-control-solid: #f5e2ea;
  --ios-selected: rgba(255, 253, 254, .96);
  --ios-glass: rgba(255, 239, 246, .94);
  --ios-navigation-glass: rgba(255, 239, 246, .94);
  --ios-glass-solid: #fff0f6;
  --ios-stroke: rgba(134, 66, 92, .17);
  --ios-gleam: rgba(255, 255, 255, .75);
  --ios-shadow: rgba(87, 52, 66, .09);
}

html:root body,
html:root body .phone { background: var(--ground); color: var(--ink); }
/* Use the device's native semibold/bold faces, never a faux display typeface.
   Captions and body copy keep regular weight so the hierarchy stays readable. */
html:root body .phone :is(h1,h2,h3){font-weight:700;letter-spacing:0}
html:root body .phone :is(.pill,.periods button,.head .more,.gift-action){font-weight:600}
/* This is the decorative app wallpaper, not a gift's native pattern. */
html:root body .phone::before { opacity: .035; }

/* Shared material: one hairline and a restrained inner reflection. No blur on
   scrolling cards, charts or statistics, even on fast devices. */
html:root body .phone :is(
  .totals, .kind, .portfolio-filters, .portfolio-group, .catalogue-intro,
  .wishlist-hero, .wishlist-stat, .wishlist-row, .wishlist-empty,
  .ach-hero, .ach-stat, .ach-empty, .badge-card,
  .compare-hero, .compare-pick, .compare-result, .compare-metric,
  .larp-hero, .larp-form, .larp-side, .larp-verdict,
  .hype-hero, .hype-stat, .hype-card, .hype-empty,
  .gift-actions, .gift-market, .value-history, .collection-chart,
  .watch-panel, .profile-assets, .telegram-profile-identity, .share-panel
) {
  background: var(--ios-panel);
  border-color: var(--ios-stroke);
  box-shadow: inset 0 1px 0 var(--ios-gleam), 0 4px 14px var(--ios-shadow);
}
html:root body #s-catalogue .gifts > .gift,
html:root body #s-collection .collection-chart {
  background: var(--ios-panel);
  border-color: var(--ios-stroke);
  box-shadow: inset 0 1px 0 var(--ios-gleam), 0 4px 14px var(--ios-shadow);
}
html:root body .phone :is(.wishlist-hero, .ach-hero, .compare-hero, .hype-hero) {
  border-radius: 22px;
}
html:root body .phone :is(.wishlist-hero p, .ach-hero p, .hype-hero p) {
  color: var(--ink-dim);
}
html:root body .phone :is(.totals .col em, .compare-market strong, .compare-result-option b) {
  color: var(--ink);
}
html:root body .phone :is(.ach-stat small, .compare-result-option small, .hype-rank) {
  color: var(--ink-dim);
}
html:root body .phone .totals .col:last-child { border-color: var(--ios-stroke); }

/* Chart containers stay ordinary painted layers. Their candles, values,
   scales and gain/loss colours are deliberately not restyled here. */
html:root body #s-collection .market-stats .market-stat,
html:root body #gm-stats > div,
html:root body .phone :is(.nc-readout, .nc-empty, .nc-skeleton, .compare-results, .portfolio-sort-options) {
  background: var(--ios-panel-solid);
  border-color: var(--ios-stroke);
  box-shadow: inset 0 1px 0 var(--ios-gleam);
}
html:root body .phone :is(.nc-readout, .nc-empty) { color: var(--ink-dim); }
html:root body .phone .nc-readout b { color: var(--ink); }
html:root body .phone .market-head > span { color: var(--ink-dim); }

/* Inputs retain their existing sizing and hit areas. The menu and app form
   selectors are explicit so profile/card-builder components remain isolated. */
html:root body .phone :is(
  .catalogue-search .search, .sort-control select, .wishlist-sort,
  .theme-picker select, .card-settings select, .filter-fields select,
  .filter-fields input[type="number"], .compare-search input,
  .compare-price input, .larp-input input, .alert-fields input,
  .alert-fields select, .collection-chart-filter select
) {
  color: var(--ink);
  background: var(--ios-control);
  border-color: var(--ios-stroke);
  box-shadow: inset 0 1px 0 var(--ios-gleam);
  color-scheme: inherit;
}
html:root body .phone .hype-search {
  color: var(--ink-dim);
  background: var(--ios-control);
  border-color: var(--ios-stroke);
  box-shadow: inset 0 1px 0 var(--ios-gleam);
}
html:root body .phone .hype-search input { color: var(--ink); background: transparent; }
html:root body .phone :is(.catalogue-search, .language-title, .theme-title) { color: var(--ink-dim); }
html:root body .phone input::placeholder { color: var(--ink-dim); opacity: 1; }
html:root body .phone :is(button, input, select, summary, a):focus-visible {
  outline: 2px solid var(--bar);
  outline-offset: 3px;
}

/* Segments are compact frosted pills, not additional oversized panels. */
html:root body .phone :is(
  .language-toggle, .portfolio-view-modes, .price-modes, .chart-modes,
  .plot-modes, .larp-modes
) {
  background: var(--ios-control);
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px var(--ios-stroke);
}
html:root body .phone :is(
  .filters button, .wishlist-filters button, .ach-filters button,
  .periods button, .filter-chips button, .refresh-row button,
  .catalogue-sync button, .portfolio-sort-menu summary, .head .more,
  .pill, .gift-action, .chart-export-button
) {
  color: var(--ink);
  background: var(--ios-control);
  border-color: var(--ios-stroke);
  box-shadow: inset 0 1px 0 var(--ios-gleam);
}
html:root body .phone :is(
  .language-toggle, .portfolio-view-modes, .price-modes, .chart-modes,
  .plot-modes, .larp-modes
) button { color: var(--ink-dim); }
html:root body .phone :is(
  .language-toggle, .portfolio-view-modes, .price-modes, .chart-modes,
  .plot-modes, .larp-modes, .filters, .wishlist-filters, .ach-filters, .periods
) :is(button[aria-pressed="true"], button[aria-current="true"]),
html:root body .phone .portfolio-sort-options button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--ios-selected);
  box-shadow: inset 0 1px 0 var(--ios-gleam), 0 1px 4px var(--ios-shadow);
}

/* These are the only live glass surfaces: both are already fixed-position
   and bounded by the existing safe-area/layout rules. Opaque first by default. */
html:root body #tabbar,
html:root body #menu {
  color: var(--ink);
  background: var(--ios-glass-solid);
  border: 1px solid var(--ios-stroke);
  box-shadow: inset 0 1px 0 var(--ios-gleam), 0 8px 24px var(--ios-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html:root body #tabbar {
  width:calc(100% - 36px);max-width:416px;bottom:calc(12px + env(safe-area-inset-bottom));
  padding:5px;border-radius:34px;gap:1px;isolation:isolate;
  border-color:transparent;
  box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 1px #ffffff1c,0 4px 9px #0002,0 14px 32px #0004;
}
html:root body #tabbar::after {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid #ffffff26;
  background:linear-gradient(115deg,#ffffff18,transparent 30%,transparent 70%,#ffffff0b);
}
html:root body #tabbar button { padding:8px 1px 7px;gap:3px;min-height:51px;border-radius:28px;color:var(--ink);font-size:10px;font-weight:600; }
html:root body #tabbar button::before {
  border-radius: inherit;
  background:linear-gradient(150deg,#ffffff14,#ffffff08);
  box-shadow:inset 0 1px 1px #ffffff3b,inset 0 -1px 0 #ffffff10,0 2px 7px #0001;
  transition:opacity .2s ease,transform .4s cubic-bezier(.2,.8,.2,1);
  transform:scale(.90);
}
html:root body #tabbar button[aria-current="true"]::before {transform:scale(1)}
html:root body #tabbar button:active::before {transform:scale(.94);opacity:1}
html:root body #tabbar button svg {width:22px;height:22px}
html:root body #tabbar button[aria-current="true"] { color: var(--ink); background: transparent; }
html:root body #tabbar button svg { filter: none; }
@media(prefers-reduced-motion:reduce){html:root body #tabbar button::before{transition:none}}
html:root body #menu { border-radius: 22px; }
html:root body #menu > button { color: var(--ink); border-radius: 12px; }
html:root body #menu > button[aria-current="true"] { background: var(--ios-selected); }
html:root body #menu :is(.language-picker, .theme-picker) { border-color: var(--ios-stroke); }
html:root body #menu :is(select, .language-toggle) { background: var(--ios-control); border-color: var(--ios-stroke); }
html:root body #menu .language-toggle button { color: var(--ink-dim); }
html:root body #menu .language-toggle button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--ios-selected);
  box-shadow: inset 0 1px 0 var(--ios-gleam), 0 1px 4px var(--ios-shadow);
}

/* The legacy constructor lives outside .phone. Only its furniture receives
   the app material. The native video editor owns its black canvas, blue
   actions and selection colors; its card and native gift layers stay intact. */
html:root body .pcb-shell:not(.pcb-native-editor),
html:root body .pcb-shell:not(.pcb-native-editor):fullscreen {
  background: var(--ground);
  color: var(--ink);
  color-scheme: inherit;
}
html:root body .pcb-shell:not(.pcb-native-editor) :is(.pcb-sheet-panel, .pcb-edit, .pcb-choice, .pcb-gift) {
  color: var(--ink);
  background: var(--ios-panel);
  border-color: var(--ios-stroke);
  box-shadow: inset 0 1px 0 var(--ios-gleam);
}
/* A sheet covers dense controls/text: retain only a hint of transparency so
   content behind it cannot compete with the sheet's own labels. Still no blur. */
html:root body .pcb-shell:not(.pcb-native-editor) .pcb-sheet-panel { background: var(--ios-sheet); }
html:root body .pcb-shell:not(.pcb-native-editor) .pcb-sheet-actions { background: var(--ios-panel-solid); }
html:root body .pcb-shell:not(.pcb-native-editor) .pcb-search,
html:root body .pcb-shell:not(.pcb-native-editor) .pcb-button:not(.pcb-primary):not(.pcb-swatch) {
  color: var(--ink);
  background: var(--ios-control);
  border-color: var(--ios-stroke);
  box-shadow: inset 0 1px 0 var(--ios-gleam);
}
html:root body .pcb-shell:not(.pcb-native-editor) .pcb-tabs { background: var(--ios-control); border-radius: 13px; }
html:root body .pcb-shell:not(.pcb-native-editor) .pcb-tabs .pcb-button[aria-pressed="true"],
html:root body .pcb-shell:not(.pcb-native-editor) .pcb-choice[aria-pressed="true"] {
  color: var(--ink);
  background: var(--ios-selected);
  border-color: var(--ink-dim);
  box-shadow: inset 0 1px 0 var(--ios-gleam);
}
html:root body .pcb-shell:not(.pcb-native-editor) :is(.pcb-help, .pcb-eyebrow, .pcb-count, .pcb-empty, .pcb-range, .pcb-notice, .pcb-gift small) {
  color: var(--ink-dim);
}
html:root body .pcb-shell:not(.pcb-native-editor) .pcb-picker { border-color: var(--ios-stroke); }
html:root body .pcb-shell:not(.pcb-native-editor) .pcb-search::placeholder { color: var(--ink-dim); opacity: 1; }
html:root body :is(.pcb-button, .pcb-search, .pcb-choice):focus-visible {
  outline: 2px solid var(--bar);
  outline-offset: 3px;
}

@media (hover: hover) {
  html:root body #menu > button:hover,
  html:root body .phone :is(.pill, .head .more, .portfolio-sort-options button):hover,
  html:root body .pcb-shell:not(.pcb-native-editor) .pcb-button:not(.pcb-primary):not(.pcb-swatch):hover {
    background: var(--ios-selected);
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root body #tabbar,
  html:root body #menu {
    background: var(--ios-glass);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
  html:root body #tabbar {background:var(--ios-navigation-glass)}
}

/* Unsupported WebViews, low-power phones and accessibility preferences all
   get the same stable material, without lowering any image/render quality. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root body #tabbar,
  html:root body #menu { background: var(--ios-glass-solid); }
}
html:root.lite-gpu body #tabbar,
html:root.lite-gpu body #menu {
  background: var(--ios-glass-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  html:root,
  html:root[data-theme] {
    --ios-panel: var(--ios-panel-solid);
    --ios-control: var(--ios-control-solid);
    --ios-sheet: var(--ios-panel-solid);
  }
  html:root body #tabbar,
  html:root body #menu {
    background: var(--ios-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  html:root body #tabbar,
  html:root body #menu {
    background: var(--ios-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html:root body .phone :is(button, input, select, summary) { border-color: var(--ink-dim); }
}