/* Telegram passes its theme as --tg-theme-* variables; the fallbacks are iOS system colours. */
:root {
  --bg: var(--tg-theme-secondary-bg-color, #F2F2F7);
  --section: var(--tg-theme-section-bg-color, #FFFFFF);
  --text: var(--tg-theme-text-color, #000000);
  --hint: var(--tg-theme-hint-color, #8A8A8E);
  --header: var(--tg-theme-section-header-text-color, #6D6D72);
  --accent: var(--tg-theme-accent-text-color, #007AFF);
  --button: var(--tg-theme-button-color, #007AFF);
  --button-text: var(--tg-theme-button-text-color, #FFFFFF);
  --sep: var(--tg-theme-section-separator-color, rgba(60, 60, 67, .22));
  --danger: var(--tg-theme-destructive-text-color, #FF3B30);
  --fill: rgba(120, 120, 128, .12);
  --glass: rgba(255, 255, 255, .72);
  --green: #34C759;
  --ink: #8E8E93;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: var(--tg-theme-secondary-bg-color, #000000);
  --section: var(--tg-theme-section-bg-color, #1C1C1E);
  --text: var(--tg-theme-text-color, #FFFFFF);
  --hint: var(--tg-theme-hint-color, #8D8D93);
  --header: var(--tg-theme-section-header-text-color, #8D8D93);
  --accent: var(--tg-theme-accent-text-color, #0A84FF);
  --button: var(--tg-theme-button-color, #0A84FF);
  --sep: var(--tg-theme-section-separator-color, rgba(84, 84, 88, .6));
  --fill: rgba(118, 118, 128, .24);
  --glass: rgba(44, 44, 46, .72);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 400 17px/1.29 var(--font); letter-spacing: -.41px; -webkit-font-smoothing: antialiased; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.in-telegram body { padding-bottom: 24px; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.page { max-width: 560px; margin: 0 auto; padding: 12px 16px 0; }

/* large title */
.title { padding: 10px 4px 16px; }
.title h1 { margin: 0; font: 700 34px/1.12 var(--display); letter-spacing: .37px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title p { margin: 4px 0 0; color: var(--hint); font-size: 15px; letter-spacing: -.24px; }

/* hero */
.hero { position: relative; height: 340px; border-radius: 26px; overflow: hidden; background: var(--section); isolation: isolate; margin-bottom: 4px; }
.hero .glow { position: absolute; inset: -30% -20% -10%; z-index: -1; transition: background .5s ease;
  background: radial-gradient(40% 36% at 50% 46%, color-mix(in srgb, var(--ink) 30%, transparent), transparent 70%),
              radial-gradient(70% 60% at 50% 60%, color-mix(in srgb, var(--ink) 10%, transparent), transparent 75%); }
.hero .big { position: absolute; left: 50%; top: 42px; width: 214px; height: 214px; transform: translateX(-50%); }
.hero .big > div { position: absolute; inset: 0; transition: opacity .22s ease, transform .35s var(--spring); }
.hero .orig { opacity: 0; transform: scale(.96); }
.hero.comparing .orig { opacity: 1; transform: none; }
.hero.comparing .mod { opacity: 0; transform: scale(.96); }
.hero .big.swap > div { animation: pop .42s var(--spring); }
@keyframes pop { from { transform: scale(.82); opacity: .2; } }
.glass { background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 6px 20px -8px rgba(0,0,0,.25); }
.nav { position: absolute; top: 132px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: transform .2s var(--spring); }
.nav:active { transform: scale(.88); }
.nav.prev { left: 14px; } .nav.next { right: 14px; }
.hero .caption { position: absolute; top: 16px; left: 0; right: 0; text-align: center; color: var(--hint); font-size: 13px; letter-spacing: -.08px; font-variant-numeric: tabular-nums; }
.compare { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; width: 236px; isolation: isolate; }
.compare button { height: 30px; border-radius: 9px; font-size: 14px; font-weight: 500; letter-spacing: -.15px; color: var(--hint); transition: color .2s; }
.compare button[aria-pressed="true"] { color: var(--text); font-weight: 600; }
.compare .thumb { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: 30px; border-radius: 9px; background: var(--section); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); transition: transform .35s var(--spring); z-index: -1; }
:root[data-theme="dark"] .compare .thumb { background: #636366; }
.compare[data-mode="orig"] .thumb { transform: translateX(100%); }

/* grouped lists */
.sh { font: 400 13px/1.3 var(--font); letter-spacing: -.08px; color: var(--header); margin: 28px 16px 7px; display: flex; justify-content: space-between; align-items: baseline; }
.sh button, .sh .aside { color: var(--accent); font-size: 15px; letter-spacing: -.24px; }
.sh .aside { color: var(--hint); }
.group { background: var(--section); border-radius: 14px; overflow: hidden; }
.group.spaced { margin-top: 24px; }
.cell { position: relative; width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-align: left; }
.cell + .cell::before, .collapse > .cell:first-child::before, .collapse + .cell::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset, 16px); border-top: .5px solid var(--sep); }
button.cell, label.cell.upload { transition: background-color .15s; cursor: pointer; }
button.cell:active, label.cell.upload:active { background: var(--fill); }
.cell .main { flex: 1; min-width: 0; }
.cell .main b { display: block; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .main b.wrap { white-space: normal; }
.cell .main small { display: block; color: var(--hint); font-size: 15px; letter-spacing: -.24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .value { color: var(--hint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell .link, .link-cell .link { color: var(--accent); white-space: nowrap; }
.link-cell input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; }
.link-cell .link:disabled { color: var(--hint); }
.chev { width: 8px; height: 13px; flex: none; color: color-mix(in srgb, var(--hint) 65%, transparent); transition: transform .3s var(--ease); }
[aria-expanded="true"] > .chev { transform: rotate(90deg); }
.foot { color: var(--header); font-size: 13px; letter-spacing: -.08px; margin: 8px 16px 0; line-height: 1.38; }
.foot.error { color: var(--danger); }
.foot.warn { color: #FF9500; }
.collapse { overflow: hidden; height: 0; transition: height .34s var(--ease); }
.avatar { width: 46px; height: 46px; border-radius: 11px; background: var(--fill); flex: none; overflow: hidden; }
.logo-thumb, .cand-thumb { width: 46px; height: 46px; border-radius: 11px; background: #000; flex: none; display: grid; place-items: center; }
.logo-thumb svg, .cand-thumb svg { width: 32px; height: 32px; fill: #fff; }
.upload.busy { opacity: .6; pointer-events: none; }
.with-media, #candidateList .cell { --inset: 74px; }
.slider-cell { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.slider-cell .row { display: flex; justify-content: space-between; }
.slider-cell .row span:last-child { color: var(--hint); font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: none; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--button) var(--p, 50%), var(--fill) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 .5px 4px rgba(0,0,0,.12), 0 6px 13px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }

/* colour presets and rows */
.presets { display: flex; gap: 14px; overflow-x: auto; padding: 16px 16px 14px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.presets::-webkit-scrollbar { display: none; }
.preset { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); transition: transform .3s var(--spring); }
.preset:active { transform: scale(.86); }
.preset::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--ring, var(--c)); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .35s var(--spring); }
.preset[aria-pressed="true"]::after { opacity: 1; transform: none; }
.preset.original { --c: linear-gradient(135deg, #111 0 50%, #fff 50% 100%); --ring: var(--hint); background: var(--c); }
.preset.custom { --ring: var(--hint); background: conic-gradient(from 90deg, #FF3B30, #FFCC00, #34C759, #32ADE6, #5856D6, #FF2D55, #FF3B30); }
.preset.custom::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--section); box-shadow: 0 0 0 .5px rgba(0,0,0,.1); }
.preset.custom.set::before { background: var(--custom, var(--section)); }
.colors .cell { --inset: 58px; }
.colors #tuneToggle { --inset: 16px; }
.swatch { position: relative; width: 30px; height: 30px; flex: none; }
.swatch i { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.swatch .now { inset: 0; }
.swatch .was { width: 14px; height: 14px; right: -3px; bottom: -3px; box-shadow: 0 0 0 2px var(--section), inset 0 0 0 .5px rgba(0,0,0,.2); }
.tune-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--fill); display: grid; place-items: center; flex: none; color: var(--hint); }

/* emoji grid */
.emoji-group { padding: 8px; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; }
.tile { position: relative; aspect-ratio: 1; border-radius: 14px; padding: 9px; transition: transform .3s var(--spring), background-color .2s ease; }
.tile .anim { width: 100%; height: 100%; }
.tile:active { transform: scale(.9); }
.tile.loading .anim { border-radius: 50%; background: var(--fill); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.tile.on { background: color-mix(in srgb, var(--button) 13%, transparent); }
.tile.focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hint) 45%, transparent); }
.tile .check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.95); background: rgba(0,0,0,.16); box-shadow: 0 1px 3px rgba(0,0,0,.22); display: grid; place-items: center; }
.tile .check svg { opacity: 0; transform: scale(.4); transition: opacity .15s, transform .35s var(--spring); }
.tile.on .check { background: var(--button); border-color: #fff; animation: check .4s var(--spring); }
.tile.on .check svg { opacity: 1; transform: none; }
@keyframes check { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }

/* inputs */
.field { gap: 8px; }
.field > span { flex: none; width: 92px; }
.field .control { flex: 1; min-width: 0; display: flex; align-items: baseline; color: var(--hint); overflow: hidden; white-space: nowrap; }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; color: var(--text); }
.field .control input { flex: 0 1 auto; field-sizing: content; min-width: 2ch; }
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--fill); transition: background-color .25s ease; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition: transform .3s var(--spring); }
.switch input:checked + i { background: var(--green); }
.switch input:checked + i::after { transform: translateX(20px); }

/* pay bar (Telegram shows its own MainButton instead) */
.pay-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--sep); }
.pay { display: block; width: 100%; max-width: 528px; margin: 0 auto; height: 52px; border-radius: 14px; background: var(--button); color: var(--button-text); font-weight: 600; font-size: 17px; transition: opacity .2s ease, transform .2s var(--spring); }
.pay:active:not(:disabled) { transform: scale(.98); }
.pay:disabled { opacity: .4; }
.in-telegram .pay-bar { display: none; }

/* sheets */
.backdrop { position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.backdrop.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; max-width: 560px; margin: 0 auto; max-height: 92vh; overflow-y: auto; background: var(--section); border-radius: 16px 16px 0 0; padding: 6px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .45s var(--ease); }
:root[data-theme="dark"] .sheet { background: #1C1C1E; }
.sheet.open { transform: none; }
.sheet .group { background: var(--bg); }
.sheet-note { margin: 0 4px 10px; }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--fill); margin: 0 auto 8px; }
.sheet header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; }
.sheet header b { font-weight: 600; }
.sheet header .reset { justify-self: start; color: var(--accent); }
.sheet header .done { justify-self: end; color: var(--accent); font-weight: 600; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 9px; background: var(--fill); margin: 6px 0 16px; isolation: isolate; }
.seg button { height: 28px; border-radius: 7px; font-size: 13px; font-weight: 500; letter-spacing: -.08px; }
.seg button[aria-pressed="true"] { font-weight: 600; }
.seg .thumb { position: absolute; top: 2px; left: 2px; width: calc(50% - 2px); height: 28px; border-radius: 7px; background: var(--section); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); transition: transform .35s var(--spring); z-index: -1; }
:root[data-theme="dark"] .seg .thumb { background: #636366; }
.seg[data-view="spectrum"] .thumb { transform: translateX(100%); }
.palette { display: grid; grid-template-columns: repeat(12, 1fr); border-radius: 12px; overflow: hidden; }
.palette button { aspect-ratio: 1; position: relative; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.06); }
.palette button[aria-pressed="true"] { z-index: 1; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1.5px rgba(0,0,0,.55); border-radius: 4px; }
.spectrum { position: relative; height: 0; padding-bottom: 83.4%; border-radius: 12px; overflow: hidden; touch-action: none; }
.spectrum canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spectrum .knob { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.3); transform: translate(-50%, -50%); pointer-events: none; }
.sheet .result { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.sheet .pair { display: flex; }
.sheet .pair i { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
.sheet .pair i + i { margin-left: -10px; box-shadow: 0 0 0 3px var(--section), inset 0 0 0 .5px rgba(0,0,0,.2); }
:root[data-theme="dark"] .sheet .pair i + i { box-shadow: 0 0 0 3px #1C1C1E; }
.sheet .result small { display: block; color: var(--hint); font-size: 13px; letter-spacing: -.08px; }
.hex { margin-left: auto; width: 118px; height: 36px; border-radius: 9px; border: 0; background: var(--fill); padding: 0 12px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.tick { color: var(--accent); font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; max-width: min(90vw, 480px); padding: 12px 16px; border-radius: 14px; background: rgba(28, 28, 30, .94); color: #fff; font-size: 15px; letter-spacing: -.24px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }

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

/* order progress */
.order { padding: 8px 4px 4px; }
.progress { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; margin: 10px 0 12px; }
.progress i { display: block; height: 100%; width: 0; background: var(--button); border-radius: 4px; transition: width .6s var(--ease); }
.order-count { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: .38px; font-variant-numeric: tabular-nums; }
.order .foot { margin: 0 0 18px; }
.order .pay { margin-top: 6px; }

/* navbar that appears when the large title scrolls away */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 7; height: 48px; display: grid; place-items: center; border-bottom: .5px solid var(--sep); opacity: 0; transform: translateY(-100%); transition: opacity .25s ease, transform .3s var(--ease); pointer-events: none; }
.navbar.shown { opacity: 1; transform: none; }
.navbar b { font-weight: 600; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-telegram .navbar { display: none; }

/* iOS Settings-style icon tiles */
.ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.ico.small { width: 29px; height: 29px; border-radius: 7px; }
.ico svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.purple svg, .ico.orange svg { fill: #fff; stroke: none; }
.ico.orange circle { fill: #FF9500; }
.ico.blue { background: #0A84FF; } .ico.purple { background: #AF52DE; } .ico.orange { background: #FF9500; } .ico.green { background: #34C759; }

/* intro */
.intro { background: var(--section); border-radius: 22px; padding: 18px 16px; }
.steps { display: grid; gap: 14px; }
.step { display: flex; align-items: center; gap: 14px; font-size: 16px; letter-spacing: -.32px; }
.chip { flex: none; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--fill); color: var(--accent); font-size: 15px; font-weight: 500; letter-spacing: -.24px; }
.link-cell { --inset: 57px; }

/* hero tools */
.tool { position: absolute; bottom: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: transform .2s var(--spring), background-color .2s; }
.tool.left { right: auto; left: 16px; }
.tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool[aria-pressed="true"] { background: var(--button); color: var(--button-text); }
.tool:active { transform: scale(.9); }
.pick-hint { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 500; letter-spacing: -.08px; white-space: nowrap; }
.hero.picking .big { cursor: crosshair; }
.hero .big svg g { transition: opacity .25s ease; }
.parts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 4px 0; }
.part { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border-radius: 16px; background: var(--section); font-size: 14px; letter-spacing: -.15px; }
.part i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
.part .x { color: var(--hint); font-size: 16px; line-height: 1; }

/* grid collapse */
.emoji-grid.collapsed { max-height: 290px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.show-all { display: block; width: 100%; margin-top: 8px; height: 44px; border-radius: 12px; background: var(--section); color: var(--accent); font-size: 16px; letter-spacing: -.32px; }

/* checkout */
.summary .value { color: var(--text); font-weight: 600; }
.sheet-pay { margin-top: 16px; }
.in-telegram .sheet-pay { display: none; }