/* Фианит CRM — минималистичный интерфейс в духе iOS */
:root {
  --bg: #f2f2f7;
  --card: #ffffff;
  --card-2: #f2f2f7;
  --label: #000000;
  --label-2: rgba(60, 60, 67, .6);
  --label-3: rgba(60, 60, 67, .3);
  --sep: rgba(60, 60, 67, .2);
  --fill: rgba(118, 118, 128, .12);
  --fill-2: rgba(118, 118, 128, .2);
  --tint: #5856d6;
  --tint-soft: rgba(88, 86, 214, .12);
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --blue: #007aff;
  --pink: #ff2d55;
  --teal: #30b0c7;
  --gray: #8e8e93;
  --bar: rgba(249, 249, 249, .82);
  --bubble: #e9e9eb;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: calc(50px + var(--safe-bottom));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1c1c1e;
    --card-2: #2c2c2e;
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, .6);
    --label-3: rgba(235, 235, 245, .3);
    --sep: rgba(84, 84, 88, .55);
    --fill: rgba(118, 118, 128, .24);
    --fill-2: rgba(118, 118, 128, .32);
    --tint: #7d7aff;
    --tint-soft: rgba(125, 122, 255, .18);
    --green: #30d158;
    --red: #ff453a;
    --orange: #ff9f0a;
    --blue: #0a84ff;
    --pink: #ff375f;
    --teal: #40c8e0;
    --bar: rgba(22, 22, 24, .82);
    --bubble: #26252a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); overscroll-behavior: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.29; letter-spacing: -.41px; color: var(--label);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overflow: hidden; position: fixed; inset: 0;
  user-select: none; -webkit-user-select: none;
}
.selectable, textarea, input, .bubble, .prose { user-select: text; -webkit-user-select: text; }
a { color: var(--tint); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.fill { fill: currentColor; stroke: none; }

/* ---------- страницы и навигация ---------- */
#app { position: fixed; inset: 0; }
.page {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--bg);
  -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--tabbar-h) + 24px);
  will-change: transform;
}
.page.no-tabs { padding-bottom: calc(var(--safe-bottom) + 32px); }
.page.enter { animation: pushIn .42s cubic-bezier(.2, .9, .25, 1) both; box-shadow: -8px 0 30px rgba(0,0,0,.12); }
.page.leave { animation: pushOut .36s cubic-bezier(.3, .7, .3, 1) both; z-index: 5; box-shadow: -8px 0 30px rgba(0,0,0,.12); }
.page.under { animation: dimIn .42s cubic-bezier(.2, .9, .25, 1) both; }
.page.under-back { animation: dimOut .36s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes pushIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pushOut { from { transform: none; } to { transform: translateX(100%); } }
@keyframes dimIn { from { transform: none; } to { transform: translateX(-28%); } }
@keyframes dimOut { from { transform: translateX(-28%); } to { transform: none; } }
.page.fade { animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.nav {
  position: sticky; top: 0; z-index: 20; height: calc(44px + var(--safe-top)); padding-top: var(--safe-top);
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; transition: background .2s, border-color .2s; border-bottom: .5px solid transparent;
}
.nav.solid, .nav.always { background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--sep); }
.nav .nav-title {
  position: absolute; left: 90px; right: 90px; text-align: center; font-weight: 600; font-size: 17px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s;
}
.nav.solid .nav-title, .nav.always .nav-title { opacity: 1; }
.nav-btn { display: flex; align-items: center; gap: 2px; color: var(--tint); font-size: 17px; height: 44px; padding: 0 16px; min-width: 44px; }
.nav-btn.back { padding-left: 8px; }
.nav-btn.back svg { width: 26px; height: 26px; stroke-width: 2.4; }
.nav-btn.bold { font-weight: 600; }
.nav-btn[disabled] { opacity: .35; }
.nav-right { display: flex; margin-left: auto; }

.head { padding: 2px 16px 12px; }
.head .eyebrow { font-size: 13px; font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: -.08px; margin-bottom: 2px; }
.head h1 { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .37px; margin: 0; }
.head .sub { color: var(--label-2); font-size: 15px; margin-top: 2px; }

/* ---------- группы и строки ---------- */
.section { margin: 0 16px 28px; }
.section-title { font-size: 13px; color: var(--label-2); text-transform: uppercase; letter-spacing: -.08px; padding: 0 16px 7px; display: flex; justify-content: space-between; align-items: baseline; }
.section-title.big { text-transform: none; font-size: 22px; font-weight: 700; color: var(--label); letter-spacing: .35px; padding: 0 4px 8px; }
.section-title .count { color: var(--label-2); font-weight: 400; font-size: 17px; }
.section-footer { font-size: 13px; color: var(--label-2); padding: 7px 16px 0; line-height: 1.38; }
.group { background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.row {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px;
  color: var(--label); width: 100%; text-align: left;
}
.row + .row::before, .row + details::before, details + .row::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: .5px solid var(--sep); }
.row.has-icon + .row::before, .row + .row.has-icon::before { left: 58px; }
.row.has-avatar + .row::before { left: 68px; }
a.row:active, button.row:active, .row.tap:active { background: var(--fill); }
.row .main { flex: 1; min-width: 0; }
.row .title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .title.wrap { white-space: normal; }
.row .sub { font-size: 15px; color: var(--label-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub.wrap { white-space: normal; }
.row .detail { color: var(--label-2); font-size: 17px; text-align: right; white-space: nowrap; }
.row .detail.small { font-size: 15px; }
.row .chev { color: var(--label-3); width: 18px; height: 18px; stroke-width: 2.6; margin-right: -4px; }
.row.red .title { color: var(--red); }
.row.center { justify-content: center; }
.row.btn .title { color: var(--tint); }
.row.danger .title { color: var(--red); }
.row.kv .title { color: var(--label); flex: none; }
.row.kv .detail { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.row.dim { opacity: .5; }
.right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.ic { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; }
.ic svg { width: 19px; height: 19px; stroke-width: 2.1; }
.ic.indigo { background: var(--tint); } .ic.green { background: var(--green); } .ic.red { background: var(--red); }
.ic.orange { background: var(--orange); } .ic.blue { background: var(--blue); } .ic.pink { background: linear-gradient(45deg, #f9a03f, #e1306c 55%, #833ab4); }
.ic.gray { background: var(--gray); } .ic.teal { background: var(--teal); }
.ic.round { border-radius: 50%; }
.ic.ghost { background: transparent; color: var(--label-2); }
.ic.ghost.red { color: var(--red); } .ic.ghost.green { color: var(--green); } .ic.ghost.blue { color: var(--blue); }

.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 16px; flex: none; letter-spacing: 0; }
.avatar.xl { width: 84px; height: 84px; font-size: 34px; }
.av0 { background: linear-gradient(180deg, #a5a5f8, #5856d6); } .av1 { background: linear-gradient(180deg, #7ad8ff, #007aff); }
.av2 { background: linear-gradient(180deg, #ffb27a, #ff6a3d); } .av3 { background: linear-gradient(180deg, #7ee8a1, #22a55a); }
.av4 { background: linear-gradient(180deg, #ff9fb5, #e8395e); } .av5 { background: linear-gradient(180deg, #c0c0c8, #8e8e93); }

.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; letter-spacing: 0; }
.pill.orange { color: var(--orange); background: rgba(255, 149, 0, .14); }
.pill.green { color: var(--green); background: rgba(52, 199, 89, .14); }
.pill.blue { color: var(--blue); background: rgba(0, 122, 255, .12); }
.pill.red { color: var(--red); background: rgba(255, 59, 48, .12); }
.pill.gray { color: var(--label-2); background: var(--fill); }
.pill.indigo { color: var(--tint); background: var(--tint-soft); }
.score { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0; }
.score.g { background: var(--green); } .score.o { background: var(--orange); } .score.r { background: var(--red); }

.time { font-size: 15px; color: var(--label-2); }
.time.warn { color: var(--orange); font-weight: 600; }
.time.bad { color: var(--red); font-weight: 600; }
.call-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.call-btn svg { width: 18px; height: 18px; stroke-width: 2.2; }
.call-btn:active { opacity: .7; }

/* ---------- плитки ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 16px 28px; }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tile { background: var(--card); border-radius: 14px; padding: 12px 14px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; }
.tile .top { display: flex; justify-content: space-between; align-items: center; }
.tile .ic { width: 30px; height: 30px; border-radius: 50%; }
.tile .num { font-size: 28px; font-weight: 700; letter-spacing: .3px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .num small { font-size: 15px; color: var(--label-2); font-weight: 600; }
.tile .lbl { font-size: 13px; color: var(--label-2); font-weight: 600; }
.tile .note { font-size: 12px; color: var(--label-2); }
.tile.hot .num { color: var(--red); }
.tiles.three .tile .num { font-size: 22px; }

/* ---------- кольцо оценки ---------- */
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .val { position: absolute; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ring .track { stroke: var(--fill-2); }
.hero { background: var(--card); border-radius: 14px; margin: 0 16px 28px; padding: 18px; display: flex; gap: 18px; align-items: center; box-shadow: var(--shadow); }
.hero .h-title { font-size: 20px; font-weight: 700; }
.hero .h-sub { color: var(--label-2); font-size: 15px; margin-top: 3px; line-height: 1.35; }

/* ---------- профиль (карточка заявки) ---------- */
.profile { text-align: center; padding: 4px 16px 18px; }
.profile .avatar { margin: 0 auto 10px; }
.profile .name { font-size: 26px; font-weight: 700; letter-spacing: .3px; }
.profile .meta { color: var(--label-2); font-size: 15px; margin-top: 4px; display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 16px 24px; }
.actions.three { grid-template-columns: repeat(3, 1fr); }
.act { background: var(--card); border-radius: 12px; padding: 9px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--tint); font-size: 12px; font-weight: 500; letter-spacing: 0; box-shadow: var(--shadow); }
.act svg { width: 22px; height: 22px; }
.act:active { opacity: .6; }
.act[disabled] { color: var(--label-3); }
.banner { margin: 0 16px 24px; border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; font-size: 15px; }
.banner.orange { background: rgba(255, 149, 0, .14); color: #b25f00; }
.banner.red { background: rgba(255, 59, 48, .12); color: var(--red); }
.banner.green { background: rgba(52, 199, 89, .14); color: #1d7a36; }
@media (prefers-color-scheme: dark) { .banner.orange { color: var(--orange); } .banner.green { color: var(--green); } }
.prose { padding: 12px 16px; font-size: 16px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.prose.small { font-size: 14px; color: var(--label-2); }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; color: var(--tint); font-weight: 600; font-size: 15px; }
.ai-head svg { width: 18px; height: 18px; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev.rot { transform: rotate(90deg); }
.chev.rot { transition: transform .2s; }

/* ---------- карточки-подсказки ---------- */
.card-cta { background: var(--card); border-radius: 14px; margin: 0 16px 24px; padding: 16px; box-shadow: var(--shadow); display: flex; gap: 14px; align-items: flex-start; }
.card-cta .ic { width: 40px; height: 40px; border-radius: 10px; }
.card-cta .ic svg { width: 22px; height: 22px; }
.card-cta .t { font-weight: 600; font-size: 17px; }
.card-cta .d { color: var(--label-2); font-size: 15px; margin-top: 3px; line-height: 1.36; }
.card-cta .b { margin-top: 10px; }
.btn-fill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--tint); color: #fff; font-weight: 600; font-size: 17px; border-radius: 12px; padding: 0 18px; height: 50px; }
.btn-fill.small { height: 34px; font-size: 15px; border-radius: 17px; padding: 0 14px; }
.btn-fill.wide { width: 100%; }
.btn-fill:active { opacity: .75; }
.btn-fill[disabled] { opacity: .45; }
.btn-plain { color: var(--tint); font-size: 15px; font-weight: 500; }
.x-close { margin-left: auto; color: var(--label-3); }

/* ---------- сегменты, поиск ---------- */
.seg { display: flex; background: var(--fill); border-radius: 9px; padding: 2px; margin: 0 16px 16px; position: relative; }
.seg button { flex: 1; height: 28px; font-size: 13px; font-weight: 500; border-radius: 7px; position: relative; z-index: 1; letter-spacing: -.08px; white-space: nowrap; }
.seg button.on { background: var(--card); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
@media (prefers-color-scheme: dark) { .seg button.on { background: #636366; } }
.search { margin: 0 16px 12px; position: relative; }
.search input { width: 100%; height: 36px; border-radius: 10px; border: 0; background: var(--fill); padding: 0 12px 0 34px; font: inherit; font-size: 17px; color: var(--label); outline: none; }
.search input::placeholder { color: var(--label-2); }
.search svg { position: absolute; left: 9px; top: 9px; width: 18px; height: 18px; color: var(--label-2); }

/* ---------- формы ---------- */
.field { display: flex; align-items: center; min-height: 44px; padding: 0 16px; position: relative; gap: 12px; }
.field + .field::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: .5px solid var(--sep); }
.field label { flex: none; width: 118px; color: var(--label); }
.field input, .field select, .field textarea { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: var(--label); padding: 11px 0; }
.field textarea { resize: none; min-height: 88px; line-height: 1.35; }
.field.stack { flex-direction: column; align-items: stretch; gap: 0; }
.field.stack textarea { padding-top: 11px; }
.field input::placeholder, .field textarea::placeholder { color: var(--label-3); }
.field select { -webkit-appearance: none; appearance: none; text-align: right; color: var(--label-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 12px; }
.chip { height: 32px; padding: 0 13px; border-radius: 16px; background: var(--fill); font-size: 15px; display: inline-flex; align-items: center; }
.chip.on { background: var(--tint); color: #fff; }
.stepper { display: inline-flex; background: var(--fill); border-radius: 8px; overflow: hidden; }
.stepper button { width: 46px; height: 32px; font-size: 22px; font-weight: 300; display: grid; place-items: center; }
.stepper button + button { border-left: .5px solid var(--sep); }
.stepper-val { min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; color: var(--label-2); }

.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { opacity: 0; position: absolute; inset: 0; margin: 0; z-index: 1; cursor: pointer; }
.switch span { position: absolute; inset: 0; background: var(--fill-2); border-radius: 16px; transition: background .25s; }
.switch span::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 .25s cubic-bezier(.3, .7, .3, 1.2); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }

/* ---------- вход ---------- */
.login { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--safe-top) + 24px) 0 calc(var(--safe-bottom) + 24px); max-width: 460px; margin: 0 auto; }
.login .logo { width: 92px; height: 92px; border-radius: 22px; margin: 0 auto 18px; display: block; box-shadow: 0 10px 30px rgba(88, 86, 214, .35); }
.login h1 { text-align: center; font-size: 30px; font-weight: 700; margin: 0 0 6px; letter-spacing: .3px; }
.login p.lead { text-align: center; color: var(--label-2); margin: 0 32px 30px; font-size: 15px; }
.login .group { margin: 0 16px 16px; }
.login .field label { width: 76px; }
.login .btn-fill { margin: 8px 16px 0; width: calc(100% - 32px); }
.login .hint { text-align: center; color: var(--label-2); font-size: 13px; margin-top: 18px; }
.err { color: var(--red); text-align: center; font-size: 15px; min-height: 20px; margin: 0 16px 8px; }

/* ---------- таббар ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--tabbar-h); padding-bottom: var(--safe-bottom);
  display: flex; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--sep); transition: transform .3s;
}
.tabbar.hidden { transform: translateY(100%); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--gray); font-size: 10px; font-weight: 500; letter-spacing: .1px; position: relative; }
.tabbar a.on { color: var(--tint); }
.tabbar a svg { width: 26px; height: 26px; stroke-width: 1.8; }
.tabbar a.on svg { stroke-width: 2.2; }
.tabbar .badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; padding: 0 5px; letter-spacing: 0; }

/* ---------- листы, алерты, тосты ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 90; animation: fade .2s both; }
.scrim.out { animation: fadeOut .2s both; }
@keyframes fadeOut { to { opacity: 0; } }
.sheet { position: fixed; left: 8px; right: 8px; bottom: calc(var(--safe-bottom) + 8px); z-index: 91; animation: up .32s cubic-bezier(.2, .9, .25, 1) both; max-width: 520px; margin: 0 auto; }
.sheet.out { animation: down .22s ease-in both; }
@keyframes up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes down { to { transform: translateY(110%); } }
.sheet .opts { background: var(--bar); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border-radius: 14px; overflow: hidden; margin-bottom: 8px; }
@media (prefers-color-scheme: light) { .sheet .opts { background: rgba(255, 255, 255, .92); } }
.sheet .opts .cap { text-align: center; font-size: 13px; color: var(--label-2); padding: 14px 16px; line-height: 1.35; }
.sheet .opts button { display: block; width: 100%; height: 57px; font-size: 20px; color: var(--tint); border-top: .5px solid var(--sep); letter-spacing: .38px; }
.sheet .opts .cap + button, .sheet .opts button:first-child { border-top-color: var(--sep); }
.sheet .opts button:first-child { border-top: 0; }
.sheet .opts button.danger { color: var(--red); }
.sheet .opts button.cur { font-weight: 600; }
.sheet .opts button:active { background: var(--fill); }
.sheet .cancel { display: block; width: 100%; height: 57px; border-radius: 14px; background: var(--card); color: var(--tint); font-size: 20px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .sheet .cancel { background: #2c2c2e; } }

.modal {
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--safe-top) + 10px); z-index: 91; background: var(--bg);
  border-radius: 12px 12px 0 0; overflow-y: auto; animation: up .38s cubic-bezier(.2, .9, .25, 1) both; padding-bottom: calc(var(--safe-bottom) + 24px);
  max-width: 640px; margin: 0 auto;
}
.modal.out { animation: down .25s ease-in both; }
.modal .nav { position: sticky; height: 56px; padding-top: 0; background: var(--bg); }
.modal .nav .nav-title { opacity: 1; }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--fill-2); margin: 6px auto 0; }

.alert { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; }
.alert .box { width: 100%; max-width: 300px; border-radius: 14px; background: var(--bar); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); text-align: center; overflow: hidden; animation: pop .25s cubic-bezier(.2, .9, .25, 1.2) both; }
@media (prefers-color-scheme: light) { .alert .box { background: rgba(242, 242, 247, .96); } }
@keyframes pop { from { transform: scale(1.12); opacity: 0; } to { transform: none; opacity: 1; } }
.alert .t { font-weight: 600; font-size: 17px; padding: 19px 16px 2px; }
.alert .m { font-size: 13px; padding: 2px 16px 18px; line-height: 1.38; }
.alert .m .code { display: block; margin: 10px auto 0; font: 600 20px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1px; user-select: all; -webkit-user-select: all; }
.alert .bts { display: flex; border-top: .5px solid var(--sep); }
.alert .bts button { flex: 1; height: 44px; color: var(--tint); font-size: 17px; }
.alert .bts button + button { border-left: .5px solid var(--sep); }
.alert .bts button.bold { font-weight: 600; }
.alert .bts button.danger { color: var(--red); }
.alert .bts.v { flex-direction: column; }
.alert .bts.v button + button { border-left: 0; border-top: .5px solid var(--sep); }
.alert input { width: calc(100% - 32px); margin: 0 16px 16px; height: 32px; border-radius: 7px; border: .5px solid var(--sep); background: var(--card); padding: 0 8px; font: inherit; font-size: 15px; color: var(--label); outline: none; }

.toast { position: fixed; left: 50%; top: 42%; z-index: 99; transform: translate(-50%, -50%); background: var(--bar); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border-radius: 16px; padding: 22px 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 150px; text-align: center; font-weight: 600; font-size: 15px; animation: pop .25s both; box-shadow: 0 10px 40px rgba(0,0,0,.15); }
.toast svg { width: 44px; height: 44px; stroke-width: 2.4; }
.toast.out { animation: fadeOut .3s both; }

/* ---------- обновление жестом ---------- */
.ptr { height: 0; overflow: visible; display: flex; justify-content: center; position: relative; z-index: 1; }
.ptr .sp { position: absolute; top: 6px; width: 26px; height: 26px; opacity: 0; color: var(--label-2); }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- пусто ---------- */
.empty { text-align: center; padding: 26px 24px 28px; color: var(--label-2); }
.empty svg { width: 46px; height: 46px; margin-bottom: 8px; stroke-width: 1.6; }
.empty .t { color: var(--label); font-weight: 600; font-size: 17px; margin-bottom: 3px; }
.empty.green svg { color: var(--green); }
.loading { display: flex; justify-content: center; padding: 60px; color: var(--label-2); }
.loading svg { width: 28px; height: 28px; }

/* ---------- расшифровка ---------- */
.chat { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.bubble-wrap { display: flex; flex-direction: column; max-width: 84%; }
.bubble-wrap.l { align-self: flex-start; align-items: flex-start; }
.bubble-wrap.r { align-self: flex-end; align-items: flex-end; }
.bubble-wrap + .bubble-wrap.l, .bubble-wrap + .bubble-wrap.r { margin-top: 4px; }
.who { font-size: 11px; color: var(--label-2); margin: 6px 12px 2px; letter-spacing: 0; }
.bubble { padding: 7px 12px 8px; border-radius: 18px; font-size: 16px; line-height: 1.32; background: var(--bubble); overflow-wrap: anywhere; }
.bubble-wrap.r .bubble { background: var(--tint); color: #fff; }
.bubble .ts { font-size: 11px; opacity: .55; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ---------- плеер ---------- */
.player { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.play { width: 44px; height: 44px; border-radius: 50%; background: var(--tint); color: #fff; display: grid; place-items: center; flex: none; }
.play svg { width: 20px; height: 20px; }
.play svg.fill { margin-left: 2px; }
.play.pause svg.fill { margin-left: 0; }
.scrub { flex: 1; min-width: 0; }
.scrub .bar { height: 4px; border-radius: 2px; background: var(--fill-2); position: relative; overflow: hidden; touch-action: none; }
.scrub .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tint); border-radius: 2px; width: 0; }
.scrub .bar-hit { padding: 10px 0; margin: -10px 0; }
.scrub .tl { display: flex; justify-content: space-between; font-size: 12px; color: var(--label-2); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ---------- графики ---------- */
.chart { padding: 14px 14px 10px; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.bars .col { flex: 1; display: flex; flex-direction: column-reverse; align-items: stretch; height: 100%; min-width: 0; }
.bars .seg-a { background: var(--tint); border-radius: 3px 3px 0 0; }
.bars .seg-b { background: var(--red); border-radius: 3px 3px 0 0; }
.bars .seg-a + .seg-b { border-radius: 3px 3px 0 0; }
.bars .col .seg-a:not(:last-child) { border-radius: 0; }
.bars-x { display: flex; gap: 5px; margin-top: 6px; }
.bars-x span { flex: 1; text-align: center; font-size: 10px; color: var(--label-2); letter-spacing: 0; min-width: 0; overflow: hidden; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--label-2); margin-top: 10px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.meter { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; border-radius: 3px; }

.footer-note { text-align: center; color: var(--label-2); font-size: 13px; padding: 4px 16px 16px; }
.footer-note.err { color: var(--red); }
.steps { counter-reset: s; padding: 4px 0; }
.steps .row { align-items: flex-start; }
.steps .num { width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; flex: none; margin-top: 1px; }
.kbd-icon { display: inline-flex; vertical-align: -5px; color: var(--blue); }
.kbd-icon svg { width: 20px; height: 20px; }

@media (min-width: 700px) {
  .page > .wrap { max-width: 680px; margin: 0 auto; }
}