/* «Золотая проба»: цвета и вёрстка по утверждённому дизайну. Светлая тема по умолчанию, тёмная по настройке телефона или Телеграма. */
:root {
  --bg: #F2F3F0; --surface: #FFFFFF; --sunk: #F2F3F0; --disabled: #ECEEE9;
  --seg: #E4E6E1; --seg-on: #FFFFFF; --line: #D9DCD6; --divider: #E6E8E3;
  --ink: #1C2026; --ink2: #5A6068; --ink3: #2E343B;
  --gold: #9A6B12; --gold-h: #7A540C; --on-gold: #FFFFFF; --ring: #E2CC9C; --tint: #F7EFDC;
  --btn: #22272E; --btn-ink: #FFFFFF; --sec-bd: #C9CDC6;
  --err-bg: #FBF1E4; --err-ink: #7A3E0C; --help-bd: #E3D2A6; --help-sub: #4A4F55; --pt-ring: #9EA4AA;
  --heat-y-bg: #ECEEE9; --heat-y: #3F454C; --heat-c-bg: #FBF1E4; --heat-c: #7A3E0C; --heat-n-bg: #7A3E0C; --heat-n: #FFFFFF;
  --shadow: 0 16px 40px rgba(20, 23, 27, 0.18);
  --sans: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --serif: 'Tenor Sans', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171B; --surface: #1D2127; --sunk: #252A30; --disabled: #252A30;
    --seg: #252A30; --seg-on: #353B43; --line: #2E333A; --divider: #2E333A;
    --ink: #ECEDEA; --ink2: #A3A9B0; --ink3: #D5D8D4;
    --gold: #D8AA4E; --gold-h: #E8C077; --on-gold: #14171B; --ring: #6B5626; --tint: #2A2419;
    --btn: #ECEDEA; --btn-ink: #14171B; --sec-bd: #3A4048;
    --err-bg: #3A2615; --err-ink: #F1C9A0; --help-bd: #4A3E22; --help-sub: #B9BEC4; --pt-ring: #6E757C;
    --heat-y-bg: #2E333A; --heat-y: #D5D8D4; --heat-c-bg: #3A2615; --heat-c: #F1C9A0; --heat-n-bg: #F1C9A0; --heat-n: #3A2615;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14171B; --surface: #1D2127; --sunk: #252A30; --disabled: #252A30;
  --seg: #252A30; --seg-on: #353B43; --line: #2E333A; --divider: #2E333A;
  --ink: #ECEDEA; --ink2: #A3A9B0; --ink3: #D5D8D4;
  --gold: #D8AA4E; --gold-h: #E8C077; --on-gold: #14171B; --ring: #6B5626; --tint: #2A2419;
  --btn: #ECEDEA; --btn-ink: #14171B; --sec-bd: #3A4048;
  --err-bg: #3A2615; --err-ink: #F1C9A0; --help-bd: #4A3E22; --help-sub: #B9BEC4; --pt-ring: #6E757C;
  --heat-y-bg: #2E333A; --heat-y: #D5D8D4; --heat-c-bg: #3A2615; --heat-c: #F1C9A0; --heat-n-bg: #F1C9A0; --heat-n: #3A2615;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.4 var(--sans); -webkit-tap-highlight-color: transparent; }
a { color: var(--gold); }
a:hover { color: var(--gold-h); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); }

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; }
.pad-safe #app { padding-top: env(safe-area-inset-top, 0px); }

/* ---------- шапка и экран */
.top { display: flex; align-items: center; gap: 4px; min-height: 54px; padding: 10px 16px 0 6px; }
.top.flat { padding-left: 16px; }
.top h1 { margin: 0; font: 400 24px/30px var(--serif); }
.back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--ink); }
.back svg { width: 22px; height: 22px; }
.screen { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.screen.bare { padding-top: 16px; gap: 12px; }
.screen.tabbed { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

/* ---------- поля */
.lbl { font-size: 13px; line-height: 18px; color: var(--ink2); }
.field, .pk, .seg-wrap, .static-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.box { height: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 12px; display: flex; align-items: center; gap: 6px; }
.box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.box input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; outline: none; font: 500 20px var(--mono); }
.box input::placeholder { color: var(--ink2); opacity: 0.7; }
.field.text .box input { font: 400 16px var(--sans); }
.field.area .box { height: auto; padding: 10px 12px; }
.field.area textarea { width: 100%; min-height: 84px; border: 0; padding: 0; background: transparent; outline: none; resize: vertical; font: 400 16px/1.4 var(--sans); }
.unit { flex: none; font-size: 15px; color: var(--ink2); }
.field.static .box, .static-box { background: var(--disabled); }
.field.static .num { flex: 1; min-width: 0; font: 500 20px var(--mono); }
.static-box { height: 52px; border-radius: 12px; padding: 0 12px; display: flex; align-items: center; gap: 6px; }
.static-box .mono { flex: 1; min-width: 0; font: 500 18px var(--mono); }

.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.grid { display: grid; gap: 12px; align-items: end; }
.grid.c1 { grid-template-columns: minmax(0, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid.c3 .box { padding: 0 10px; }
.grid.c3 .box input { font-size: 18px; }

/* ---------- переключатель */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--seg); }
.seg button { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; color: var(--ink2); font: 500 14px/16px var(--sans); }
.seg button[aria-checked="true"] { background: var(--seg-on); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 23, 27, 0.12); }
.seg.small button { height: 36px; font-size: 13px; }

/* ---------- выпадающий список */
.pk { position: relative; }
.pk.open { z-index: 31; }
.pk-btn { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 12px; display: flex; align-items: center; gap: 10px; font: 500 16px var(--sans); text-align: left; }
.pk.open .pk-btn { border-color: var(--gold); }
.pk-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-meta { flex: none; font: 400 13px var(--mono); color: var(--ink2); }
.pk-btn > svg { flex: none; width: 18px; height: 18px; color: var(--ink2); transition: transform 0.15s; }
.pk.open .pk-btn > svg { transform: rotate(180deg); }
.pk-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 230px; max-height: 340px; overflow-y: auto; z-index: 30; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.pk.narrow .pk-list { left: auto; }
.pk-opt { flex: none; height: 46px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; background: transparent; font: 500 15px var(--sans); text-align: left; }
.pk-opt.on { background: var(--tint); }
.pk-opt > svg { flex: none; width: 16px; height: 16px; color: var(--gold); opacity: 0; }
.pk-opt.on > svg { opacity: 1; }
.dot { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.dot.ring { box-shadow: inset 0 0 0 1px var(--pt-ring); }
.backdrop { position: fixed; inset: 0; z-index: 20; }

/* поле с частыми значениями: число вписывается, стрелка открывает список */
.field.has-list { position: relative; }
.field.open { z-index: 31; }
.field.open .box { border-color: var(--gold); }
.box-pk { flex: none; align-self: stretch; width: 44px; margin-right: -12px; display: grid; place-items: center; border: 0; border-left: 1px solid var(--divider); border-radius: 0 11px 11px 0; background: transparent; color: var(--ink2); }
.box-pk svg { width: 18px; height: 18px; transition: transform 0.15s; }
.field.open .box-pk svg { transform: rotate(180deg); }
.field .pk-list { min-width: 244px; }
.field .pk-val { flex: none; font-family: var(--mono); }
.field .pk-meta { flex: 1; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid.c2 > .field:nth-child(2n) .pk-list { left: auto; }

/* ---------- проба и быстрые значения */
.fin { display: flex; flex-direction: column; gap: 8px; }
.fin-top { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: center; }
.hallmark { width: 100%; min-width: 0; height: 52px; padding: 0 12px; border: 2px solid var(--gold); border-radius: 999px; box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--ring); background: var(--surface); text-align: center; font: 400 24px var(--serif); outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 36px; min-width: 52px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font: 500 14px var(--sans); }
.chips.tenor .chip { font: 400 16px var(--serif); }
.chip.on { border-color: var(--gold); background: var(--tint); }

/* ---------- результат */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.result { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.res-label { font-size: 14px; line-height: 18px; color: var(--ink2); }
.big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.big-num { font: 500 46px/54px var(--mono); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.big-num.s2 { font-size: 36px; line-height: 44px; }
.big-num.s3 { font-size: 30px; line-height: 38px; }
.big-unit { font-size: 20px; color: var(--ink2); }
.err { padding: 12px; border-radius: 10px; background: var(--err-bg); color: var(--err-ink); font-size: 14px; line-height: 20px; }
.err.soft { background: var(--sunk); color: var(--ink2); }
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--divider); }
.details.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-l { font-size: 13px; line-height: 17px; color: var(--ink2); }
.d-v { font: 500 18px var(--mono); overflow-wrap: anywhere; }
.details.c3 .d-v { font-size: 15px; }
.formula { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); }
.f-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ink2); }
.f-rep { margin: -8px -4px; padding: 8px 4px; display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--gold); text-decoration: none; }
.f-rep svg { width: 13px; height: 13px; }
.f-line { font: 400 13px/18px var(--mono); color: var(--ink3); overflow-wrap: anywhere; }
.f-line.gen { color: var(--ink2); }

.cbar { display: flex; height: 12px; overflow: hidden; border-radius: 999px; }
.mix-rows { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
.mr { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 84px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.mix-rows.no-g .mr { grid-template-columns: 12px minmax(0, 1fr) auto; }
.mr-name { display: flex; flex-direction: column; font-weight: 500; }
.mr-sub { font-size: 12px; font-weight: 400; color: var(--ink2); }
.mr-share { font: 400 14px var(--mono); color: var(--ink2); }
.mr-g { font: 500 16px var(--mono); text-align: right; }
.mr.total { border-bottom: 0; font-weight: 600; }

.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cell { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.cell.on { border-color: var(--gold); background: var(--tint); }
.c-sys { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink2); }
.c-big { font: 500 26px/32px var(--mono); }
.c-note { font-size: 12px; line-height: 16px; color: var(--ink2); }
.size-table { overflow: hidden; border: 1px solid var(--divider); border-radius: 12px; }
.st-head, .st-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 12px; }
.st-head { font-size: 12px; color: var(--ink2); background: var(--sunk); }
.st-row { font: 400 14px var(--mono); border-top: 1px solid var(--divider); }
.st-row.on { background: var(--tint); font-weight: 600; }

.chart { position: relative; height: 150px; overflow: hidden; border-radius: 10px; background: var(--sunk); }
.chart svg { display: block; width: 100%; height: 100%; }
.ch-area { fill: var(--tint); }
.ch-line { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ch-max, .ch-min { position: absolute; right: 8px; font: 400 11px var(--mono); color: var(--ink2); }
.ch-max { top: 6px; }
.ch-min { bottom: 6px; }
.ch-dates { display: flex; justify-content: space-between; font: 400 12px var(--mono); color: var(--ink2); }

/* ---------- тексты и ссылки */
.note { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink2); }
.text { margin: 0; font-size: 15px; line-height: 21px; }
.hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--err-ink); }
.sec { margin: 4px 0 0; font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink2); }
.link-row { width: 100%; min-height: 48px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 15px; line-height: 20px; text-decoration: none; text-align: left; }
.link-row:hover { color: var(--ink); border-color: var(--sec-bd); }
.link-row .grow { flex: 1; min-width: 0; }
.link-row > svg { flex: none; color: var(--gold); }
.chev { flex: none; color: var(--gold); }

.actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.btn { height: 52px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--sec-bd); border-radius: 12px; background: transparent; color: var(--ink); font: 500 16px var(--sans); text-decoration: none; }
.btn:hover { color: var(--ink); }
.btn.main { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 600; }
.btn.wide { width: 100%; }
.actions .btn:only-child { grid-column: 1 / -1; }

/* ---------- главная */
.brand { display: flex; align-items: center; gap: 12px; }
.hallmark-logo { flex: none; width: 46px; height: 46px; border-radius: 11px; }
.hallmark-logo img { display: block; width: 100%; height: 100%; }
.brand-name { margin: 0; font: 400 28px/32px var(--serif); letter-spacing: 0.01em; }
.brand-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink2); }
.price-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.price-card:hover { color: var(--ink); }
.pc-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ink2); }
.pc-more { color: var(--gold); font-weight: 600; white-space: nowrap; }
.pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pc-cell { display: flex; flex-direction: column; gap: 2px; }
.pc-name { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.pc-name .dot { width: 10px; height: 10px; }
.pc-val { font: 500 18px/24px var(--mono); white-space: nowrap; }
.group { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.group .sec { margin: 0; }
.list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.li { position: relative; min-height: 60px; padding: 9px 12px; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; transition: background-color 0.15s; }
.li + .li::before { content: ''; position: absolute; top: 0; left: 60px; right: 0; border-top: 1px solid var(--divider); }
.li:hover { color: var(--ink); background: var(--sunk); }
.li:active { background: var(--sunk); }
.li-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--tint); color: var(--gold); }
.li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.li-name { font-size: 16px; line-height: 21px; font-weight: 500; }
.li-sub { font-size: 13px; line-height: 17px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li > .chev { color: var(--ink2); opacity: 0.55; width: 18px; height: 18px; }
.recent { display: flex; flex-direction: column; gap: 8px; }
.recent .sec { margin: 0; }
.rc-row { display: flex; gap: 8px; margin-inline: -16px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
.rc-row::-webkit-scrollbar { display: none; }
.rc { flex: none; height: 40px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 14px var(--sans); white-space: nowrap; text-decoration: none; }
.rc:hover { color: var(--ink); border-color: var(--gold); }
.rc svg { width: 18px; height: 18px; color: var(--gold); }
.live:empty { display: none; }
.help-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--help-bd); border-radius: 14px; background: var(--tint); color: var(--ink); text-decoration: none; }
.help-card:hover { color: var(--ink); }
.help-card > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.help-title { font-size: 15px; line-height: 20px; font-weight: 600; }
.help-sub { font-size: 13px; line-height: 18px; color: var(--help-sub); }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); }
.tabs-in { max-width: 480px; height: 64px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink2); font: 500 12px/14px var(--sans); text-decoration: none; }
.tabs a.on { color: var(--ink); font-weight: 600; }
.tabs a.on svg { color: var(--gold); }
.tabs svg { width: 22px; height: 22px; }

/* ---------- отдельные экраны */
.price-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--disabled); }
.price-box.empty { display: block; background: var(--err-bg); color: var(--err-ink); font-size: 14px; line-height: 20px; }
.pb-title { font-size: 13px; color: var(--ink2); }
.pb-val { font: 500 18px var(--mono); white-space: nowrap; }

.drop { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed var(--sec-bd); border-radius: 14px; background: var(--surface); cursor: pointer; }
.drop.on { border-style: solid; border-color: var(--gold); }
.drop:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.drop-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--tint); color: var(--gold); }
.drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drop-title { font-weight: 600; overflow-wrap: anywhere; }
.drop-sub { font-size: 13px; line-height: 18px; color: var(--ink2); }
.drop-sub.warn { color: var(--err-ink); }

.fit-box { margin-inline: -16px; padding: 16px 0; display: flex; flex-direction: column; gap: 14px; border-left: 0; border-right: 0; border-radius: 0; }
.ruler-wrap { min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ruler { display: block; overflow: visible; }
.ru-body { fill: var(--tint); }
.ru-ticks line { stroke: var(--ink); stroke-width: 1; }
.ru-ticks text { font: 500 11px var(--mono); fill: var(--ink2); text-anchor: middle; }
.ru-edge { fill: var(--gold); }
.ru-cap { font: 600 12px var(--mono); fill: var(--gold); text-anchor: middle; }
.cal-px { font: 400 12px var(--mono); color: var(--ink2); }
/* кольцо на экране: полоса из золота, внутренний край полосы и есть мерка */
.ring-stage { height: 300px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(closest-side, var(--tint), transparent); }
.rg { display: block; overflow: visible; }
.rg-body { filter: drop-shadow(0 6px 8px rgba(80, 55, 10, 0.28)); }
.rg-band { fill: none; stroke: url(#rgGold); stroke-dasharray: 100; animation: rg-draw 1s cubic-bezier(0.4, 0.1, 0.2, 1) both; }
.rg-shine { fill: none; stroke: url(#rgShine); opacity: 0.9; }
.rg-spin { transform-box: fill-box; transform-origin: center; animation: rg-spin 6s linear infinite; }
.rg-in { fill: none; stroke: rgba(70, 45, 5, 0.6); stroke-width: 1; }
.rg-out { fill: none; stroke: rgba(120, 85, 20, 0.35); stroke-width: 1; }
.rg-spark { fill: #FFFFFF; opacity: 0; transform-box: fill-box; transform-origin: center; animation: rg-twinkle 3.6s ease-in-out 1.2s infinite; }
.rg-lbl { transition: opacity 0.2s; animation: rg-fade 0.5s 0.6s both; }
.rg-lbl.hide { opacity: 0; }
.rg-lbl text { text-anchor: middle; }
.rg-num { font-family: var(--serif); fill: var(--ink); dominant-baseline: central; }
.rg-unit { font: 500 11px var(--sans); fill: var(--ink2); letter-spacing: 0.08em; }
@keyframes rg-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes rg-spin { to { transform: rotate(360deg); } }
@keyframes rg-twinkle { 0%, 72%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 82% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes rg-fade { from { opacity: 0; } }
.cal-status { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border: 1px solid var(--help-bd); border-radius: 14px; background: var(--tint); }
.cal-status.ok { border-color: var(--line); background: var(--surface); }
.cs-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--gold); }
.cal-status.ok .cs-ic { background: var(--tint); }
.cs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-title { font-size: 15px; line-height: 20px; font-weight: 600; }
.cs-sub { font-size: 13px; line-height: 18px; color: var(--help-sub); }
.cs-btn { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-weight: 600; }
.cal-status.ok .cs-btn { padding: 0 8px; background: transparent; color: var(--gold); }
.slider-row { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.slider-row input[type=range] { flex: 1; min-width: 0; height: 32px; accent-color: var(--gold); }
.pm { flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: 500 22px var(--sans); }

.gems { padding: 4px 0; }
.g-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 6px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--divider); font-size: 14px; }
.g-head { border-top: 0; font-size: 12px; color: var(--ink2); }
.g-row .mono { font-size: 13px; }
.r { justify-self: end; text-align: right; }
.pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.heat-y { background: var(--heat-y-bg); color: var(--heat-y); }
.heat-c { background: var(--heat-c-bg); color: var(--heat-c); }
.heat-n { background: var(--heat-n-bg); color: var(--heat-n); }

.dens { padding: 4px 14px; }
.dens-row { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--divider); }
.dens-row:first-child { border-top: 0; }

.saved { display: flex; flex-direction: column; gap: 8px; }
.saved .sec { margin: 0; }
.saved-row { display: flex; align-items: stretch; gap: 8px; }
.saved-open { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; }
.saved-name { font-weight: 600; }
.saved-desc { font: 400 12px var(--mono); color: var(--ink2); }
.icon-btn { flex: none; width: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink2); }

.help-list { display: flex; flex-direction: column; gap: 8px; }
.help-item { padding: 12px 14px; border-radius: 14px; }
.help-item h2 { margin: 0 0 4px; font-size: 15px; line-height: 20px; font-weight: 600; }
.help-item p { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink2); }

.ctx { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.ctx-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink2); }
.ctx-tag { color: var(--gold); font-weight: 600; }
.ctx-body { max-height: 170px; margin: 0; overflow: auto; font: 400 12px/17px var(--mono); color: var(--ink3); white-space: pre-wrap; overflow-wrap: anywhere; }
.sent { display: flex; flex-direction: column; gap: 6px; }
.sent-title { font: 400 24px var(--serif); }
.sent p { margin: 0; color: var(--ink2); }

.install { display: flex; flex-direction: column; gap: 10px; }
.install .sec { margin: 0; }
.install .text { margin: 0; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 26px; }
.steps li::before { content: counter(step); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--gold); font: 600 14px var(--mono); }
.key { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunk); color: var(--ink); font-weight: 500; white-space: nowrap; vertical-align: top; }
.key svg { flex: none; width: 16px; height: 16px; }
.version { margin: 0; text-align: center; font-size: 12px; color: var(--ink2); }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 50; max-width: min(440px, calc(100% - 32px)); padding: 12px 16px; border-radius: 12px; background: var(--btn); color: var(--btn-ink); box-shadow: var(--shadow); font-size: 14px; line-height: 19px; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity 0.2s, transform 0.2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast { width: max-content; }
.toast.has-btn { display: flex; align-items: center; gap: 10px; padding-right: 6px; }
.toast.show.has-btn { pointer-events: auto; }
.toast-btn { flex: none; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ring); font-weight: 700; }

/* пока открыта клавиатура, нижнее меню убрано */
body.typing .tabs { display: none; }
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- движение: смена экранов, нажатия, списки, график, блик на логотипе */
.top.in-fwd, .screen.in-fwd { animation: in-fwd 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.top.in-back, .screen.in-back { animation: in-back 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.top.in-fade, .screen.in-fade { animation: in-fade 0.2s ease-out; }
@keyframes in-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes in-back { from { opacity: 0; transform: translateX(-28px); } }
@keyframes in-fade { from { opacity: 0; } }
.btn, .pm, .chip, .seg button, .pk-btn, .cs-btn, .rc, .help-card, .price-card, .link-row, .drop { transition: transform 0.12s ease, background-color 0.15s, border-color 0.15s; }
.btn:active, .pm:active, .chip:active, .seg button:active, .pk-btn:active, .cs-btn:active, .rc:active, .help-card:active, .price-card:active, .link-row:active { transform: scale(0.97); }
.pk-list { transform-origin: top center; animation: pop 0.14s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.chart svg { animation: reveal 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hallmark-logo { position: relative; overflow: hidden; }
.boot .hallmark-logo::after { content: ''; position: absolute; inset: -2px; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.8) 50%, transparent 65%); transform: translateX(-120%); animation: glint 1.1s 0.35s ease-out forwards; }
@keyframes glint { to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 359px) {
  .fin-top { grid-template-columns: minmax(0, 1fr) 120px; }
  .big-num { font-size: 38px; line-height: 46px; }
  .pc-val { font-size: 15px; }
  .pc-head { flex-wrap: wrap; }
}