/* Liquid Glass, as in iOS 26: content on a soft wallpaper, controls of frosted glass with a
   bright rim floating above it, capsule shapes, a floating tab bar. */

:root {
  --wallpaper:
    radial-gradient(65% 45% at 5% 0%, #ffc9b5 0, transparent 70%),
    radial-gradient(60% 45% at 100% 30%, #b9cdff 0, transparent 70%),
    radial-gradient(75% 50% at 30% 100%, #bfe8d3 0, transparent 70%),
    #eeeef4;
  --text: #1c1c1e;
  --hint: rgba(60, 60, 67, 0.62);
  --accent: #007aff;
  --on-accent: #ffffff;
  --accent-ink: #006ee6;
  --danger: #ff3b30;
  --glass: rgba(255, 255, 255, 0.52);
  --glass-strong: rgba(255, 255, 255, 0.74);
  --rim: rgba(255, 255, 255, 0.9);
  --rim-low: rgba(255, 255, 255, 0.35);
  --line: rgba(60, 60, 67, 0.14);
  --press: rgba(0, 0, 0, 0.05);
  --well: rgba(118, 118, 128, 0.12);
  --shadow: 0 10px 30px -12px rgba(30, 40, 80, 0.25);
  --chrome: #f2f2f7;
  --radius: 26px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}
[data-scheme="dark"] {
  --wallpaper:
    radial-gradient(60% 40% at 10% 5%, #3b2a4f 0, transparent 70%),
    radial-gradient(55% 40% at 95% 35%, #163a52 0, transparent 70%),
    radial-gradient(70% 45% at 40% 100%, #173b33 0, transparent 70%),
    #0a0a0f;
  --text: #f5f5f7;
  --hint: rgba(235, 235, 245, 0.6);
  --accent: #0a84ff;
  --accent-ink: #4aa3ff;
  --danger: #ff453a;
  --glass: rgba(44, 44, 52, 0.48);
  --glass-strong: rgba(52, 52, 60, 0.7);
  --rim: rgba(255, 255, 255, 0.22);
  --rim-low: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.1);
  --press: rgba(255, 255, 255, 0.08);
  --well: rgba(118, 118, 128, 0.24);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --chrome: #0a0a0f;
}
/* No blur on this device: frosted becomes milky. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, 0.86); --glass-strong: rgba(255, 255, 255, 0.94); }
  [data-scheme="dark"] { --glass: rgba(36, 36, 42, 0.9); --glass-strong: rgba(44, 44, 52, 0.95); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); background: var(--chrome);
  font: 400 16px/1.35 var(--font); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
/* The wallpaper stays put while the glass moves over it. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--wallpaper); }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.i--fill { fill: currentColor; stroke: none; }

/* One recipe for every glass surface: blur, a bright rim on top, a soft shadow. */
.card, .list, .segmented, .search, .tabbar, .icon-btn, .btn--secondary, .chip, .empty__icon {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), inset 0 0 0 1px var(--rim-low), var(--shadow);
}

.screen { min-height: var(--tg-viewport-stable-height, 100vh); display: flex; flex-direction: column; }
.screen[hidden] { display: none; }
.page { flex: 1; display: flex; flex-direction: column; gap: 14px;
  padding: 4px 16px calc(104px + var(--safe-bottom)); }
.screen:not(:has(.tabbar)) .page { padding-bottom: calc(28px + var(--safe-bottom)); }

/* Header: a large title; content scrolling under it fades into a blur. */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-top) + 12px) 16px 12px; isolation: isolate; }
.topbar::before { content: ""; position: absolute; inset: 0 0 -18px; z-index: -1;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.topbar__text { flex: 1; min-width: 0; }
.topbar__title { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.topbar__sub { font-size: 15px; color: var(--hint); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  flex: none; transition: transform .35s var(--spring); }
.icon-btn:active { transform: scale(.88); }
.icon-btn--filled { width: 34px; height: 34px; background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px -4px var(--accent); }
.icon-btn--filled .i { width: 18px; height: 18px; stroke-width: 2.4; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-weight: 600; color: #fff; background: linear-gradient(160deg, #8e8e93, #636366);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

/* Cards */
.card { border-radius: var(--radius); padding: 18px; }
.card--accent { color: var(--on-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .15),
    0 16px 32px -16px var(--accent); }
.hero__label { font-size: 15px; opacity: .85; }
.hero__value { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin: 2px 0 14px; }
.hero__value small { font-size: 24px; opacity: .75; }
.hero__hint { font-size: 14px; opacity: .85; margin-top: 10px; }
.progress { height: 8px; border-radius: 4px; background: var(--well); overflow: hidden; }
.card--accent .progress { background: rgba(255, 255, 255, .28); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: currentColor; }

.section-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; padding: 10px 4px 0;
  margin-bottom: -4px; }

/* Lists: one glass sheet, rows inside it */
.list { list-style: none; margin: 0; padding: 6px; border-radius: var(--radius); }
.row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 20px;
  min-height: 60px; transition: background .2s; }
.row:active { background: var(--press); }
.row__icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--well); color: var(--accent-ink); }
.row__body { flex: 1; min-width: 0; }
.row__title { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.row__sub { font-size: 14px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__end { display: flex; align-items: center; gap: 10px; color: var(--hint); }
.price { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.chev { width: 18px; height: 18px; }
.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent); }

/* Segmented control: a glass track with a lens over the chosen item */
.segmented { display: flex; padding: 4px; border-radius: 999px; }
.segmented > * { flex: 1; height: 38px; border-radius: 999px; font-size: 15px; font-weight: 600;
  color: var(--hint); transition: background .3s, color .3s, box-shadow .3s; }
.segmented > .is-active { color: var(--text); background: var(--glass-strong);
  box-shadow: inset 0 1px 0 var(--rim), 0 4px 12px -4px rgba(0, 0, 0, .18); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chip { height: 36px; padding: 0 16px; border-radius: 999px; white-space: nowrap; font-size: 14px;
  font-weight: 500; transition: transform .35s var(--spring), background .2s; }
.chip:active { transform: scale(.94); }
.chip.is-active { background: var(--accent); color: var(--on-accent); }
.card .chip { box-shadow: inset 0 0 0 1px var(--line); background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.card .chip.is-active { background: var(--accent); box-shadow: none; }

/* Fields */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 500; color: var(--hint); padding-left: 4px; }
.input { width: 100%; min-height: 46px; padding: 11px 16px; border: 0; border-radius: 16px;
  background: var(--well); font-size: 16px; outline: none; resize: none; transition: box-shadow .2s; }
.input::placeholder { color: var(--hint); }
.input:focus { box-shadow: 0 0 0 2px var(--accent); }
.search { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; color: var(--hint); }
.search .i { width: 19px; height: 19px; }
.search .input { background: none; padding: 0; min-height: 46px; color: var(--text); box-shadow: none; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px;
  padding: 0 4px; font-weight: 500; }
.switch { appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative;
  width: 62px; height: 28px; border-radius: 14px; background: var(--well); transition: background .3s; cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 38px; height: 24px;
  border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  transition: transform .4s var(--spring); }
.switch:checked { background: #34c759; }
.switch:checked::after { transform: translateX(20px); }

/* Buttons: capsules that squeeze when pressed */
.actions { display: flex; flex-direction: column; gap: 10px; }
.actions__row { display: flex; gap: 10px; }
.actions__row > .btn { flex: 1; }
.btn { height: 50px; padding: 0 20px; border-radius: 999px; font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  transition: transform .35s var(--spring), opacity .2s; }
.btn:active { transform: scale(.95); }
.btn:disabled { opacity: .4; }
.btn--primary { color: var(--on-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%), var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 22px -12px var(--accent); }
.btn--secondary { color: var(--accent-ink); }
.btn--ghost { color: var(--accent-ink); }
.btn--danger { color: var(--danger); }
.btn--block { width: 100%; }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 24px; }
.empty__icon { width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center;
  color: var(--accent-ink); margin-bottom: 6px; }
.empty__icon .i { width: 34px; height: 34px; stroke-width: 1.6; }
.empty__title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.empty__text { color: var(--hint); font-size: 15px; max-width: 280px; margin-bottom: 8px; }

/* Bottom navigation: a floating glass capsule */
.tabbar { position: fixed; z-index: 5; left: 16px; right: 16px; bottom: calc(10px + var(--safe-bottom));
  display: flex; padding: 5px; border-radius: 999px; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  height: 54px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text);
  transition: background .3s, color .3s, transform .35s var(--spring); }
.tab:active { transform: scale(.92); }
.tab.is-active { color: var(--accent-ink); background: var(--press); }
.tab .i { width: 25px; height: 25px; }

/* Tiles: glass squares */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile, .timeline, .options, .media, .notice, .day, .qty, .dock {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), inset 0 0 0 1px var(--rim-low), var(--shadow);
}
.tile { border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile--wide { grid-column: 1 / -1; }
.tile--accent { color: var(--on-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 32px -16px var(--accent); }
.tile__label { font-size: 14px; font-weight: 500; color: var(--hint); }
.tile--accent .tile__label, .tile--accent .tile__sub { color: inherit; opacity: .85; }
.tile__value { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile__value small { font-size: 18px; opacity: .7; }
.tile__sub { font-size: 13px; color: var(--hint); }

/* Ring: --value is 0–100 */
.ring { --track: var(--well); position: relative; width: 88px; height: 88px; margin: 6px auto 0;
  display: grid; place-items: center; color: var(--accent); }
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--value, 0) * 1%), var(--track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); }
.ring > span { position: relative; font-size: 20px; font-weight: 700; color: var(--text); }
.tile--accent .ring { color: #fff; --track: rgba(255, 255, 255, .28); }
.tile--accent .ring > span { color: inherit; }

/* Bars: --value is 0–100 */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 116px; padding-top: 8px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 6px; }
.bar::before { content: ""; width: 100%; max-width: 30px; height: calc(var(--value, 0) * 0.8%);
  border-radius: 999px; background: var(--well); }
.bar.is-active::before { background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.bar > span { font-size: 11px; font-weight: 600; color: var(--hint); }

/* Days */
.days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.day { flex: 1 0 48px; height: 66px; border-radius: 22px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; font-size: 19px; font-weight: 700;
  transition: transform .35s var(--spring), background .2s; }
.day:active { transform: scale(.92); }
.day small { font-size: 12px; font-weight: 600; color: var(--hint); }
.day.is-active { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.day.is-active small { color: inherit; opacity: .8; }
.day:disabled { opacity: .35; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 18px; border-radius: var(--radius); }
.step { position: relative; padding: 0 0 18px 30px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 3px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--well); }
.step::after { content: ""; position: absolute; left: 9px; top: 22px; bottom: 2px; width: 2px;
  border-radius: 1px; background: var(--well); }
.step:last-child::after { display: none; }
.step.is-done::before, .step.is-done::after, .step.is-now::before { background: var(--accent); }
.step.is-now::before { box-shadow: 0 0 0 5px var(--well); }
.step__time { font-size: 13px; font-weight: 500; color: var(--hint); font-variant-numeric: tabular-nums; }
.step__title { font-weight: 600; }
.step:not(.is-done):not(.is-now) .step__title { color: var(--hint); }
.step__text { font-size: 14px; color: var(--hint); }

/* Picture cards */
.media { position: relative; display: flex; flex-direction: column; border-radius: var(--radius);
  overflow: hidden; min-width: 0; padding: 6px; }
.media__img { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 20px; background: var(--well); color: var(--accent-ink); }
.media__img .i { width: 40px; height: 40px; stroke-width: 1.4; }
.media__body { padding: 8px 10px 8px; }
.media__title { font-weight: 600; }
.media__sub { font-size: 14px; color: var(--hint); }
.media__tag { position: absolute; top: 14px; left: 14px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; color: var(--text); background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 var(--rim); }
.media--cover { padding: 0; color: #fff; }
.media--cover .media__img { aspect-ratio: 16 / 11; border-radius: 0; color: var(--on-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 60%), var(--accent); }
.media--cover .media__body { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 12px 14px;
  border-radius: 20px; background: rgba(20, 20, 30, .32);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.media--cover .media__title { font-size: 19px; font-weight: 700; }
.media--cover .media__sub { color: rgba(255, 255, 255, .85); }

/* Options: one of a few */
.options { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: var(--radius); }
.option { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 58px; padding: 9px 50px 9px 14px; border-radius: 20px; text-align: left;
  transition: background .25s; }
.option:active { background: var(--press); }
.option:disabled { opacity: .4; }
.option.is-active { background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--rim), 0 4px 12px -6px rgba(0, 0, 0, .2); }
.option::after { content: ""; position: absolute; right: 14px; top: 50%; width: 24px; height: 24px;
  margin-top: -12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .3s var(--spring); }
.option.is-active::after { box-shadow: inset 0 0 0 8px var(--accent); }
.option__title { font-weight: 600; }
.option__sub { font-size: 14px; color: var(--hint); }

/* Notice */
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 22px; font-size: 15px; }
.notice > .i { color: var(--accent-ink); }
.notice--danger > .i { color: var(--danger); }

/* Stepper: a small glass capsule */
.qty { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px; }
.qty > button { width: 34px; height: 34px; border-radius: 50%; font-size: 20px; color: var(--accent-ink);
  transition: transform .35s var(--spring); }
.qty > button:active { transform: scale(.85); }
.qty > output { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Dock: a floating glass capsule with the screen's action */
.dock { position: fixed; z-index: 5; left: 16px; right: 16px; bottom: calc(10px + var(--safe-bottom));
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; border-radius: 999px; }
.dock > .btn { flex: 1; }
.dock__info { display: flex; flex-direction: column; }
.dock__label { font-size: 12px; font-weight: 500; color: var(--hint); }
.dock__value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.screen:has(.dock) .page { padding-bottom: calc(100px + var(--safe-bottom)); }

/* Greeting and a picture drawn for the app: .art__tint, .art__fill, .art__line in its SVG */
.intro { display: flex; flex-direction: column; gap: 6px; padding: 8px 2px 4px; }
.intro__title { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.intro__text { color: var(--hint); font-size: 17px; }
.art { width: 112px; height: 112px; margin-bottom: 4px; }
.art svg { display: block; width: 100%; height: 100%; }
.art__tint { fill: var(--glass-strong); }
.art__fill { fill: var(--accent); }
.art__line { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* A row that scrolls sideways */
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: -2px -16px -12px; padding: 2px 16px 14px; scroll-padding-left: 16px; }
.rail > * { flex: 0 0 62%; scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* app: Lydka game — фиолетовый акцент на ночном стекле */
:root {
  --accent: #7c5cff;
  --accent-ink: #6244e8;
  --on-accent: #ffffff;
  --gold: #f3c463;
  --on-gold: #2b1d00;
  --wallpaper:
    radial-gradient(60% 40% at 8% 0%, #dcd2ff 0, transparent 70%),
    radial-gradient(55% 40% at 100% 30%, #cfe0ff 0, transparent 70%),
    radial-gradient(70% 45% at 40% 100%, #e6d8ff 0, transparent 70%),
    #f4f2fb;
  --chrome: #f4f2fb;
}
[data-scheme="dark"] {
  --accent: #8b66ff;
  --accent-ink: #b4a1ff;
  --wallpaper:
    radial-gradient(55% 38% at 12% 0%, #4d2410 0, transparent 72%),
    radial-gradient(55% 40% at 100% 32%, #2a1a52 0, transparent 70%),
    radial-gradient(70% 48% at 40% 100%, #241130 0, transparent 70%),
    #07060c;
  --chrome: #07060c;
}

.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brand__mark { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
  flex: none; color: var(--on-accent); background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -10px var(--accent); }
.brand__mark .i { width: 24px; height: 24px; stroke-width: 2.1; }
.brand .topbar__title { font-size: 25px; letter-spacing: -0.03em; }
.brand .topbar__sub { font-size: 13px; letter-spacing: 0.02em; }
.avatar { font-size: 17px; background: linear-gradient(160deg, #9a86ff, #6b45e0); }

.pills { display: flex; gap: 10px; }
.pill { flex: 1; display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 6px 8px 6px 6px;
  border-radius: 999px; background: var(--glass); font-weight: 700; font-size: 17px;
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-low), var(--shadow); }
.pill__badge { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gold); color: var(--on-gold); }
.pill__badge--gem { background: var(--accent); color: var(--on-accent); }
.pill__badge .i { width: 21px; height: 21px; stroke-width: 2; }
.pill__value { flex: 1; min-width: 0; text-align: left; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill__plus { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--well); color: var(--accent-ink); }
.pill__plus .i { width: 17px; height: 17px; stroke-width: 2.6; }

.hero { display: flex; flex-direction: column; gap: 6px; }
.hero__title { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; }
.hero__note { font-size: 14px; opacity: .85; margin-bottom: 6px; }
.hero .actions { margin-top: 6px; }
.hero .btn--primary { color: var(--accent-ink); background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 22px -14px rgba(0, 0, 0, .5); }

.bonus { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 12px; }
.bonus .row__icon { width: 44px; height: 44px; border-radius: 15px; background: var(--accent); color: #fff; }
.bonus .row__sub { white-space: normal; }

.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 999px; }

.tile--nft .tile__value { font-size: 30px; }
.upgrade { display: flex; flex-direction: column; gap: 12px; }
.upgrade__head { display: flex; align-items: flex-start; gap: 12px; }
.upgrade__head .row__icon { background: var(--accent); color: #fff; }
.upgrade__cost { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.upgrade__note { font-size: 14px; color: var(--hint); }

.task { display: flex; flex-direction: column; gap: 8px; }
.task__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); }
.task__title { font-weight: 600; font-size: 17px; }
.task__sub { font-size: 14px; color: var(--hint); }
.task__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.task__rewards { font-size: 13px; font-weight: 600; color: var(--hint); }
.task__rewards b { color: var(--accent-ink); }
.task .progress { margin-top: 2px; }

.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ach { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px;
  border-radius: 22px; text-align: center; background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-low), var(--shadow); }
.ach__icon { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  background: var(--well); color: var(--accent-ink); }
.ach__icon .i { width: 21px; height: 21px; }
.ach__title { font-size: 12px; font-weight: 600; line-height: 1.2; }
.ach__sub { font-size: 11px; color: var(--hint); }
.ach:not(.is-open) { opacity: .5; }
.ach.is-open .ach__icon { background: var(--accent); color: var(--on-accent); }

.profile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 0 2px; }
.profile__avatar { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  font-size: 32px; font-weight: 700; color: var(--on-accent);
  background: linear-gradient(160deg, #9a86ff, #5c35c9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 24px -14px var(--accent); }
.profile__name { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; }
.profile__nick { font-size: 14px; color: var(--hint); }
.profile .progress { width: 100%; margin-top: 6px; }
.profile__xp { font-size: 13px; color: var(--hint); font-variant-numeric: tabular-nums; }

.nft-card { display: flex; flex-direction: column; gap: 4px; }
.nft-card .media__img { aspect-ratio: 1.15; }
.nft-card .media__body { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; }
.nft-card .btn { height: 40px; font-size: 14px; padding: 0 12px; }
.nft-card.is-owned { opacity: .75; }
.owned { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.owned .i { width: 16px; height: 16px; stroke-width: 2.6; }

.toast { position: fixed; left: 16px; right: 16px; bottom: calc(88px + var(--safe-bottom)); z-index: 20;
  padding: 13px 18px; border-radius: 20px; font-size: 15px; font-weight: 500;
  background: var(--glass-strong); color: var(--text);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-low), var(--shadow);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.is-show { opacity: 1; transform: none; }

.foot { font-size: 12px; color: var(--hint); text-align: center; padding: 4px 12px 0; }

/* Хэлоуин: тыквенный акцент поверх ночного стекла */
.halloween {
  display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; color: #fff;
  background: linear-gradient(135deg, #fb8c2b, #d1462a 55%, #6d1c33);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 18px 34px -20px #b5341f;
}
.halloween .row__icon { background: rgba(255, 255, 255, .2); color: #fff; }
.halloween .row__sub { color: rgba(255, 255, 255, .84); white-space: normal; }
.halloween .btn { color: #3a1204; background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.event-hero {
  color: #fff;
  background: linear-gradient(160deg, #7c4bd6, #4a1d7a 58%, #2a1030);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 34px -20px #4a1d7a;
}
.event-hero .progress { background: rgba(255, 255, 255, .25); }
.event-hero .progress > span { background: #ffb257; }
.event-hero .hero__value { color: #ffd8a8; }
.event-case { display: flex; flex-direction: column; gap: 12px; }
.event-case .row__sub { white-space: normal; }
.event-case__price { font-size: 22px; font-weight: 700; margin-top: 4px;
  font-variant-numeric: tabular-nums; }
.nft-card--event .media__img { background: linear-gradient(160deg, rgba(251, 140, 43, .22),
  rgba(139, 102, 255, .18)); color: #ffb257; }
.nft-card--event .media__tag { color: #3a1204; background: #ffd8a8; }