/* Цвета — из темы Telegram (--tg-theme-*). Запасные значения нужны только вне Telegram, при разработке. */
:root {
  --bg: var(--tg-theme-secondary-bg-color, #efeff4);
  --section: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --text: var(--tg-theme-text-color, #000000);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --subtitle: var(--tg-theme-subtitle-text-color, var(--hint));
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --link: var(--tg-theme-link-color, var(--accent));
  --accent-ink: var(--tg-theme-accent-text-color, var(--link));
  --danger: var(--tg-theme-destructive-text-color, #e53935);
  --sep: var(--tg-theme-section-separator-color, rgba(60, 60, 67, 0.18));
  --section-head: var(--tg-theme-section-header-text-color, var(--hint));
  --soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --press: color-mix(in srgb, var(--text) 7%, transparent);
  --ok: #31b545;
  --warn: #e8710a;
  --photo-bg: #ffffff;
  --radius: 12px;
  --safe-top: var(--tg-content-safe-area-inset-top, 0px);
  --safe-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
}

@media (prefers-color-scheme: dark) {
  :root:not(.tg) {
    --bg: #000000;
    --section: #1c1c1e;
    --text: #ffffff;
    --hint: #8e8e93;
    --accent: #3e88f7;
    --sep: rgba(84, 84, 88, 0.65);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  padding: calc(12px + var(--safe-top)) 0 calc(28px + var(--safe-bottom));
}
body.has-dev-main { padding-bottom: calc(88px + var(--safe-bottom)); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; }
::selection { background: var(--soft); }
input, textarea { caret-color: var(--accent); }

/* ---------- заголовок экрана ---------- */

.screen-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 20px 16px; }
.screen-head__text { flex: 1; min-width: 0; }
.screen-head h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; word-break: break-word; }
.screen-head__over { font-size: 14px; color: var(--hint); margin-bottom: 2px; }
.screen-head__meta { margin-top: 4px; font-size: 15px; color: var(--hint); }
.screen-head__desc { margin: 8px 0 0; font-size: 15px; color: var(--subtitle); white-space: pre-line; }
.icon-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--section); }
.icon-btn:active { background: var(--press); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- секции и ячейки, как в настройках Telegram ---------- */

.section-head { margin: 0; padding: 0 32px 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--section-head); }
.section { margin: 0 16px; background: var(--section); border-radius: var(--radius); overflow: hidden; }
.section-foot { margin: 0; padding: 7px 32px 0; font-size: 13px; color: var(--hint); }
.block { margin-bottom: 24px; }

.cell {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 10px 16px; text-align: left;
}
.cell + .cell::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--sep-inset, 16px);
  border-top: .5px solid var(--sep);
}
button.cell:active, a.cell:active { background: var(--press); }
.cell--accent { color: var(--accent-ink); }
.cell--danger { color: var(--danger); }
.cell__icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--accent); color: var(--accent-text); }
.cell__icon svg { width: 18px; height: 18px; }
.cell__icon--plain { background: none; color: inherit; }
.cell__body { flex: 1; min-width: 0; }
.cell__title { display: block; font-size: 16px; line-height: 1.3; }
.cell__title--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.cell__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; font-size: 14px; color: var(--hint); }
.cell__after { flex: none; font-size: 16px; color: var(--hint); }
.chevron { width: 8px; height: 13px; flex: none; color: var(--hint); opacity: .6; }
.cell a { color: var(--link); text-decoration: none; }

.thumb { width: 56px; height: 56px; flex: none; border-radius: 10px; background: var(--photo-bg); object-fit: contain; }
.thumb--sm { width: 40px; height: 40px; border-radius: 8px; }
.thumb--empty { display: grid; place-items: center; background: var(--soft); color: var(--accent); }
.thumb--empty svg { width: 22px; height: 22px; }
.cell--item { --sep-inset: 84px; align-items: flex-start; }
.cell--list { --sep-inset: 68px; }
.cell--item.is-dim .thumb, .cell--item.is-dim .cell__body { opacity: .5; }

.price { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.old-price { text-decoration: line-through; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot--ozon { background: #005bff; }
.dot--wb { background: #a73afd; }
.dot--dns { background: #fc8507; }
.dot--other { background: var(--hint); }
.store { display: inline-flex; align-items: center; gap: 5px; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--soft); color: var(--accent-ink); }
.tag--warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.tag--ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

/* маленькая кнопка справа в ячейке гостя */
.pill { flex: none; align-self: center; height: 30px; padding: 0 14px; border-radius: 15px; font-size: 14px; font-weight: 600; background: var(--accent); color: var(--accent-text); }
.pill:active { opacity: .75; }
.pill--quiet { background: var(--soft); color: var(--accent-ink); }
.pill--mine { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); display: inline-flex; align-items: center; gap: 4px; }
.pill--mine svg { width: 14px; height: 14px; }
.pill:disabled { background: var(--press); color: var(--hint); opacity: 1; }

/* ---------- поле ссылки ---------- */

.paste { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; }
.paste input { flex: 1; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; font-size: 16px; }
.paste input::placeholder { color: var(--hint); }
.send { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); }
.send:disabled { background: var(--press); color: var(--hint); }
.send svg { width: 18px; height: 18px; }
.paste-status { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; font-size: 14px; color: var(--hint); border-top: .5px solid var(--sep); }
.paste-status--error { color: var(--danger); }
.paste-status .linkish { margin-left: auto; color: var(--link); font-size: 14px; }

.spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--sep); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center { display: grid; place-items: center; min-height: 60vh; }

/* ---------- пустые состояния ---------- */

.empty { padding: 28px 24px 8px; text-align: center; }
.empty__mark { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--accent); }
.empty h2 { margin: 0 0 6px; font-size: 20px; }
.empty p { margin: 0 auto; max-width: 30em; color: var(--hint); font-size: 15px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; margin-top: 18px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn:active { opacity: .8; }

/* ---------- шторка ---------- */

.backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .4); animation: fade .2s ease both; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-height: calc(100vh - 40px - var(--safe-top)); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 0 calc(20px + var(--safe-bottom));
  background: var(--bg); border-radius: 14px 14px 0 0;
  animation: rise .28s cubic-bezier(.2, .9, .3, 1) both;
}
body.has-dev-main .sheet { padding-bottom: calc(88px + var(--safe-bottom)); }
.sheet__grab { width: 36px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--sep); }
.sheet__head { display: flex; align-items: center; gap: 12px; padding: 0 16px 14px 20px; }
.sheet__head h2 { flex: 1; margin: 0; font-size: 20px; }
.sheet__close { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--press); color: var(--hint); }
.sheet__close svg { width: 14px; height: 14px; }
@keyframes rise { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

.hero-photo { margin: 0 16px 16px; border-radius: var(--radius); background: var(--photo-bg); overflow: hidden; }
.hero-photo img { width: 100%; height: 240px; object-fit: contain; }
.product-head { padding: 0 20px 16px; }
.product-head h3 { margin: 6px 0 8px; font-size: 18px; line-height: 1.3; font-weight: 600; word-break: break-word; }
.product-head .cell__sub { margin: 0; }
.product-head .price { font-size: 22px; }
.note-text { margin: 10px 0 0; font-size: 15px; color: var(--subtitle); white-space: pre-line; }

/* поля внутри секции */
.field { display: block; padding: 10px 16px; }
.field + .field, .cell + .field, .field + .cell { border-top: .5px solid var(--sep); }
.field__label { display: block; margin-bottom: 2px; font-size: 13px; color: var(--hint); }
.field input, .field textarea { display: block; width: 100%; border: 0; outline: 0; padding: 2px 0; background: transparent; font-size: 16px; resize: none; }
.field textarea { min-height: 24px; line-height: 1.35; }
.field input::placeholder, .field textarea::placeholder { color: var(--hint); }

.segmented { display: flex; gap: 2px; margin: 0 16px; padding: 2px; border-radius: 9px; background: var(--press); }
.segmented button { flex: 1; height: 32px; border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--text); }
.segmented button.is-active { background: var(--section); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: var(--press); transition: background-color .2s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .2s cubic-bezier(.2, .9, .3, 1); }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(20px); }

.notice { margin: 0 16px 20px; padding: 12px 16px; border-radius: var(--radius); background: var(--soft); font-size: 14px; }

/* ---------- тост ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); z-index: 60; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px;
  background: rgba(30, 30, 30, .92); color: #fff; font-size: 14px; text-align: center;
  animation: toast .25s cubic-bezier(.2, .9, .3, 1) both;
}
body.has-dev-main .toast { bottom: calc(88px + var(--safe-bottom)); }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- замена кнопок Telegram вне Telegram ---------- */

.dev-bar { display: flex; align-items: center; gap: 12px; margin: -4px 16px 12px; font-size: 13px; color: var(--hint); }
.dev-bar__back { color: var(--link); font-size: 16px; }
.dev-bar__note { margin-left: auto; }
.dev-main { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 8px 16px calc(8px + var(--safe-bottom)); background: var(--bg); }
.dev-main__btn { width: 100%; height: 50px; border-radius: 12px; background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: 16px; }
.dev-main__btn:disabled { opacity: .6; }

@media (min-width: 640px) {
  #app { max-width: 600px; margin: 0 auto; }
  .sheet { left: 50%; right: auto; width: 600px; transform: translateX(-50%); animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  .spinner { animation: spin 1.6s linear infinite !important; }
}

.linkish { color: var(--link); font-size: 14px; }
.field select { display: block; width: 100%; margin: 0 -2px; padding: 2px 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
div.cell[role="button"] { cursor: pointer; }
div.cell[role="button"]:active { background: var(--press); }
.cell:disabled { opacity: .5; }