@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/static/fonts/golos-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/static/fonts/golos-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/static/fonts/golos-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/poppins-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Палітра «Холодний туман» */
:root {
  --u: clamp(0.78px, 0.2778vw, 1.25px); /* 1px на екрані шириною 360px; росте й зменшується разом із шириною */
  --primary: #2349a8;
  --on-primary: #fbfaf7;
  --nav-active-ink: #fbfaf7;
  --bg: #e4eaec;
  --on-bg: #1f2328;
  --surface: #f8fafa;
  --surface-variant: #d6e0e3;
  --on-surface-variant: #1f2328;
  --outline: #9fb0b6;
  --error: #c0392b;

  --header-top: #dbe3e6;
  --header-bottom: #d2dce0;
  --header-text: #1f2328;
  --accent: #2349a8;
  --accent-ink: #fbfaf7;
  --card-bg: #f8fafa;
  --card-muted: #1f2328;
  --card-line: rgba(31, 35, 40, 0.32);
  --card-step-bg: rgba(31, 35, 40, 0.06);
  --chip-bg: rgba(31, 35, 40, 0.06);
  --window-line: rgba(31, 35, 40, 0.32);
  --nav-bg: #f8fafa;
  --nav-inactive: #5d6560;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --primary: #7a5a34;
    --on-primary: #ddd3c8;
    --bg: #100b08;
    --on-bg: #ddd3c8;
    --surface: #1c130d;
    --surface-variant: #241a12;
    --on-surface-variant: #b9a58f;
    --outline: #3a2a1d;
    --error: #f5455c;
    --header-top: #1a0e05;
    --header-bottom: #100b08;
    --header-text: #ddd3c8;
    --card-bg: #1c130d;
    --accent: #b08a55;
    --accent-ink: #100b08;
    --nav-active-ink: #ddd3c8;
    --nav-bg: #1c130d;
    --card-muted: #c9ccd0;
    --card-line: rgba(255, 255, 255, 0.22);
    --card-step-bg: rgba(255, 255, 255, 0.1);
    --chip-bg: rgba(255, 255, 255, 0.06);
    --window-line: rgba(245, 237, 229, 0.12);
    --nav-inactive: #9c8770;
  }
}

:root[data-theme='dark'] {
  --primary: #7a5a34;
  --on-primary: #ddd3c8;
  --bg: #100b08;
  --on-bg: #ddd3c8;
  --surface: #1c130d;
  --surface-variant: #241a12;
  --on-surface-variant: #b9a58f;
  --outline: #3a2a1d;
  --error: #f5455c;
  --header-top: #1a0e05;
  --header-bottom: #100b08;
  --header-text: #ddd3c8;
  --card-bg: #1c130d;
  --accent: #b08a55;
  --accent-ink: #100b08;
  --nav-active-ink: #ddd3c8;
  --nav-bg: #1c130d;
  --card-muted: #c9ccd0;
  --card-line: rgba(255, 255, 255, 0.22);
  --window-line: rgba(245, 237, 229, 0.12);
  --card-step-bg: rgba(255, 255, 255, 0.1);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --nav-inactive: #9c8770;
}

* { box-sizing: border-box; }

html, body, #root { height: 100%; margin: 0; }
html, body { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--on-bg);
  font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Каркас: колонка (шапка + вміст + нижнє меню), на широких екранах — по центру */
.shell { display: flex; flex-direction: column; height: 100%; max-width: 720px; zoom: 1.1; margin: 0 auto; position: relative; background: var(--bg); }
.shell-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.app-header {
  position: sticky; top: 0; z-index: 4;
  padding: 10px 20px 10px;
  border-radius: 0 0 28px 28px; border-bottom: 1px solid var(--window-line);
  box-shadow: 0 8px 24px rgba(10, 14, 20, 0.25);
  background: linear-gradient(100deg, color-mix(in srgb, var(--header-top) 40%, transparent), color-mix(in srgb, var(--header-bottom) 40%, transparent));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--header-text);
  text-align: center;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  flex: none;
}

.screen { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.screen > * { width: 100%; }

.bottom-nav { display: flex; gap: 4px; border: 1px solid var(--window-line); background: color-mix(in srgb, var(--nav-bg) 40%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 26px; padding: 6px; box-shadow: 0 10px 28px rgba(10, 14, 20, 0.35); position: fixed; left: 16px; right: 16px; bottom: 14px; max-width: 700px; margin: 0 auto; z-index: 5; pointer-events: none; }
.shell-main:not(:last-child) { padding-bottom: 84px; box-sizing: border-box; }
.shell:has(.bottom-nav) .shell-main { padding-bottom: 84px; box-sizing: border-box; }
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px; border-radius: 20px; background: transparent; pointer-events: auto; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none; color: var(--nav-inactive); font-size: calc(11 * var(--u)); font-weight: 600;
}
.bottom-nav a .pill { display: flex; }
.bottom-nav a:active { transform: translateY(1px) scale(0.94); }
.bottom-nav a.active { background-color: var(--primary); background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.1) 100%); color: var(--nav-active-ink); box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -1px -1px 3px rgba(255, 255, 255, 0.1); }
@media (prefers-reduced-motion: reduce) { .bottom-nav a { transition: none; } .bottom-nav a:active { transform: none; } }
.bottom-nav svg { width: 22px; height: 22px; fill: currentColor; }

.deep-card {
  background: var(--card-bg); border-radius: 16px; padding: 16px; border: 1px solid var(--window-line);
  box-shadow: 0 3px 15px rgba(10, 14, 20, 0.22); color: var(--header-text);
  display: flex; flex-direction: column; align-items: center;
}

.btn-pill {
  border: 1px solid var(--window-line); border-radius: 20px; padding: 4px 22px; font: inherit; font-size: calc(13 * var(--u)); font-weight: 600;
  background: var(--primary); color: var(--on-primary); cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 16px rgba(10, 14, 20, 0.2); text-align: center;
}
.btn { border-radius: 20px; padding: 8px 16px; font: inherit; font-size: calc(13 * var(--u)); font-weight: 600; cursor: pointer;
  background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); }
.btn.outlined { background: transparent; color: var(--primary); }
.btn-text { background: none; border: 0; color: var(--accent); font: inherit; font-size: calc(13 * var(--u)); font-weight: 600; cursor: pointer; padding: 4px 8px; }
.message-card .btn-text { color: var(--primary); text-align: left; padding-left: 0; }

.message-card { background: var(--surface-variant); border: 1px solid var(--window-line); border-radius: 12px; padding: 14px; font-size: calc(13 * var(--u)); display: flex; flex-direction: column; gap: 8px; }
.message-card .row { display: flex; gap: 8px; }

.info-note {
  display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--outline);
  border-radius: 12px; padding: 10px 11px; font-size: calc(11.5 * var(--u)); line-height: 1.45; color: var(--on-surface-variant);
}

.status-pill {
  align-self: center; width: auto !important; font-size: calc(11 * var(--u)); font-weight: 700; padding: 5px 12px; border-radius: 20px;
  color: var(--primary); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.status-pill.approx { color: var(--error); background: color-mix(in srgb, var(--error) 14%, transparent); border-color: color-mix(in srgb, var(--error) 40%, transparent); }

/* Товщина */
.eye-title { display: flex; align-items: flex-end; gap: 6px; }
.eye-title b { font-size: calc(15 * var(--u)); font-weight: 700; }
.eye-title span { font-size: calc(11 * var(--u)); font-weight: 500; color: var(--card-muted); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin-top: 10px; }
.tile {
  display: flex; flex-direction: column; align-items: center; padding: 9px 4px; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--card-line); background: rgba(231, 245, 243, 0.05);
  font: inherit; color: var(--header-text);
}
.tile.picked { background: rgba(52, 211, 153, 0.16); border: 1.4px solid var(--accent); }
.tile .t-idx { font-size: calc(10 * var(--u)); font-weight: 700; color: var(--card-muted); }
.tile .t-val { font-size: calc(14.5 * var(--u)); font-weight: 700; color: var(--accent); }
.tile .t-val.t-pair { font-size: calc(12.5 * var(--u)); }
.tile.picked .t-val { color: var(--header-text); }
.tile .t-sub { font-size: calc(10 * var(--u)); color: var(--card-muted); }
.tile.picked .t-idx, .tile.picked .t-sub { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tile.picked .t-idx, :root:not([data-theme='light']) .tile.picked .t-sub { color: var(--card-muted); } }
:root[data-theme='dark'] .tile.picked .t-idx, :root[data-theme='dark'] .tile.picked .t-sub { color: var(--card-muted); }
.tile:not(.picked) .t-idx, .tile:not(.picked) .t-sub { color: var(--header-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tile:not(.picked) .t-idx, :root:not([data-theme='light']) .tile:not(.picked) .t-sub { color: var(--card-muted); } }
:root[data-theme='dark'] .tile:not(.picked) .t-idx, :root[data-theme='dark'] .tile:not(.picked) .t-sub { color: var(--card-muted); }

/* Профіль лінзи на весь екран (імітація альбомного вигляду в портретній орієнтації вузьких екранів) */
.profile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; position: sticky; top: 0; z-index: 4; background: var(--bg); }
.profile-top .rx-line { font-size: calc(12.5 * var(--u)); font-weight: 700; opacity: .85; text-align: right; }
.back-btn { border: 1px solid var(--outline); border-radius: 20px; background: none; color: inherit; font: inherit; font-size: calc(12.5 * var(--u)); font-weight: 700; padding: 8px 14px; cursor: pointer; }
.diagram { background: #f3f6f5; border: 1px solid var(--window-line); border-radius: 18px; padding: 14px 12px; color: #0e1c1f; margin: 0 16px 16px; }
.diagram h3 { margin: 0 0 10px; font-size: calc(13 * var(--u)); font-weight: 700; }
.diagram .note { margin: 10px 0 0; font-size: calc(11 * var(--u)); line-height: 1.4; color: #6c8582; }
.diagram-row { display: flex; align-items: center; gap: 8px; height: 96px; margin-bottom: 10px; }
.diagram-row .idx { width: 34px; background: #7c8f8c; border-radius: 6px; padding: 7px 0; text-align: center; color: #fff; font-size: calc(12 * var(--u)); font-weight: 700; }
.diagram-row .shape { flex: 1; height: 100%; }
.compare { background: #f3f6f5; border: 1px solid var(--window-line); border-radius: 18px; padding: 14px 12px; color: #0e1c1f; margin: 0 16px 16px; }
.compare h3 { margin: 0 0 10px; font-size: calc(13 * var(--u)); font-weight: 700; }
.compare .compare-svg { width: 100%; height: 170px; display: block; }
.compare .note { margin: 10px 0 0; font-size: calc(11 * var(--u)); line-height: 1.4; color: #6c8582; }
.diagram-row .edge { width: 90px; height: 100%; }

.placeholder { color: var(--on-surface-variant); text-align: center; padding: 32px 16px; }
.more-list { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.more-list > .btn-pill { width: 75%; font-size: calc(14 * var(--u)); font-weight: 600; }
.more-list > .btn-pill:first-child { margin-top: auto; }
.more-list > .btn-pill:nth-last-child(2) { margin-bottom: auto; }
.more-list > .gap-before { margin-top: 28px; }
.more-list .dev-footer { width: 100%; }
.shape-wrap { position: relative; flex: 1; height: 100%; }
.shape-wrap .shape { width: 100%; height: 100%; display: block; }

/* Профіль лінзи: на вузькому вертикальному екрані вміст повертається на 90° («ніби екран горизонтальний») */
/* Степер і поля Оправи */
.step-circle {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--window-line); cursor: pointer; touch-action: manipulation;
  background: var(--card-step-bg); color: var(--accent); font-size: calc(18 * var(--u)); font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); user-select: none; -webkit-user-select: none; padding: 0;
}
.big-number {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700; text-align: center;
  color: var(--header-text); cursor: pointer; font-size: calc(1em + 1 * var(--u));
}
.big-number.warn { color: #e3a552; }
.big-number.highlighted { color: var(--accent); }
input.big-number { outline: none; border-bottom: 1px solid var(--accent); cursor: text; }
.field-card { padding: 12px; }
.field-label { display: flex; gap: 6px; align-items: center; font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--card-muted); margin-bottom: 4px; }
.field-label .badge { font-size: calc(12 * var(--u)); color: var(--accent); }
.stepper-row { display: flex; align-items: center; gap: 18px; }
#frame-root .deep-card > .label-pill { margin-bottom: 8px; }
.field-hint { margin-top: 2px; font-size: calc(11.5 * var(--u)); color: var(--card-muted); text-align: center; }

/* Результати Оправи */
.result-card { align-items: stretch; }
.result-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--card-line); width: 100%; }
.result-row:first-child { border-top: 0; }
.result-row span { font-size: calc(12 * var(--u)); color: var(--card-muted); }
.result-row b { font-size: calc(16 * var(--u)); font-weight: 700; color: var(--accent); }
.warn-banner { margin-top: 10px; padding: 9px 11px; border-radius: 12px; font-size: calc(11 * var(--u)); font-weight: 600; background: #3a2a0a; color: #e3a552; }
.advisor-card { text-align: center; }
.advisor-title { font-size: calc(12 * var(--u)); font-weight: 600; color: var(--card-muted); }
.advisor-big { font-size: calc(31 * var(--u)); font-weight: 700; color: var(--accent); margin-top: 4px; }
.advisor-big small { font-size: calc(13 * var(--u)); font-weight: 700; color: var(--card-muted); }
.advisor-formula { margin-top: 8px; font-size: calc(12 * var(--u)); font-weight: 700; color: var(--card-muted); }
.advisor-explain { margin-top: 3px; font-size: calc(11.5 * var(--u)); color: var(--card-muted); }
.advisor-none { margin-top: 6px; font-size: calc(13 * var(--u)); font-weight: 700; color: #e3a552; }
.advisor-table { width: 100%; margin-top: 10px; }
#frame-root .field-label, #frame-root .field-hint, #frame-root .result-row span, #frame-root .advisor-title, #frame-root .advisor-big small, #frame-root .advisor-formula, #frame-root .advisor-explain { color: var(--header-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) #frame-root .field-label, :root:not([data-theme='light']) #frame-root .field-hint, :root:not([data-theme='light']) #frame-root .result-row span, :root:not([data-theme='light']) #frame-root .advisor-title, :root:not([data-theme='light']) #frame-root .advisor-big small, :root:not([data-theme='light']) #frame-root .advisor-formula, :root:not([data-theme='light']) #frame-root .advisor-explain { color: var(--card-muted); } }
:root[data-theme='dark'] #frame-root .field-label, :root[data-theme='dark'] #frame-root .field-hint, :root[data-theme='dark'] #frame-root .result-row span, :root[data-theme='dark'] #frame-root .advisor-title, :root[data-theme='dark'] #frame-root .advisor-big small, :root[data-theme='dark'] #frame-root .advisor-formula, :root[data-theme='dark'] #frame-root .advisor-explain { color: var(--card-muted); }

/* Рецепт */
.lens-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.lens-chip {
  padding: 9px 0; border-radius: 14px; font: inherit; font-size: calc(13 * var(--u)); font-weight: 600; cursor: pointer;
  background: var(--chip-bg); color: var(--header-text); border: 1px solid var(--card-line);
}
.lens-chip.selected { background: var(--accent); color: var(--accent-ink); font-weight: 700; border-color: var(--accent);  font-size: calc(15 * var(--u));}
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lens-chip:not(.selected) { color: var(--nav-inactive); border-color: rgba(245, 237, 229, 0.12); } }
:root[data-theme='dark'] .lens-chip:not(.selected) { color: var(--nav-inactive); border-color: rgba(245, 237, 229, 0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .bottom-nav a.active { background: rgba(52, 211, 153, 0.16); color: #ddd3c8; box-shadow: inset 0 0 0 1.4px var(--accent); } :root:not([data-theme='light']) .lens-chip.selected { background: rgba(52, 211, 153, 0.16); color: #ddd3c8; border-color: var(--accent); } }
:root[data-theme='dark'] .bottom-nav a.active { background: rgba(52, 211, 153, 0.16); color: #ddd3c8; box-shadow: inset 0 0 0 1.4px var(--accent); }
:root[data-theme='dark'] .lens-chip.selected { background: rgba(52, 211, 153, 0.16); color: #ddd3c8; border-color: var(--accent); }

.rx-screen { padding: 14px 18px; align-items: stretch; }
.eye-row { display: flex; gap: 10px; }
.eye-row > * { flex: 1; min-width: 0; }
.eye-block { padding: 14px 12px 4px; }
.field-row { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 8px 0; border-top: 1px solid var(--card-line); }
.field-row.first { border-top: 0; }
.fr-label { font-size: calc(11 * var(--u)); font-weight: 600; color: var(--card-muted); margin-bottom: 3px; }
.fr-controls { display: flex; align-items: center; gap: 6px; }

.warn-box { display: flex; gap: 9px; padding: 12px 14px; border: 1px solid var(--window-line); border-radius: 14px; font-size: calc(12.5 * var(--u)); font-weight: 500; background: #f3eada; color: #8a5a18; }
.warn-box.small { margin-top: 8px; padding: 9px 10px; border-radius: 10px; font-size: calc(11 * var(--u)); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .warn-box { background: #3a2a0a; color: #e3a552; } }
:root[data-theme='dark'] .warn-box { background: #3a2a0a; color: #e3a552; }
.warn-text { color: #8a5a18; font-size: calc(11.5 * var(--u)); font-weight: 600; text-align: center; }

.neu-panel {
  background: var(--surface); border-radius: 16px; padding: 14px 16px; text-align: center; border: 1px solid var(--window-line);
  box-shadow: 0 8px 26px rgba(10, 14, 20, 0.12);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.label-pill { background: var(--primary); color: var(--on-primary); border-radius: 20px; padding: 4px 1em; font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap; }
.segmented { display: flex; border: 1px solid var(--window-line); background: var(--surface-variant); border-radius: 20px; padding: 3px; }
.segmented button { border: 0; background: none; font: inherit; font-size: calc(12 * var(--u)); font-weight: 600; padding: 5px 12px; border-radius: 17px; color: var(--on-surface-variant); cursor: pointer; }
.segmented button.on { background: var(--primary); color: var(--on-primary); }
.pd-row { display: flex; align-items: center; gap: 8px; }
.pd-row .big-number { color: var(--on-bg); }
.pd-pair { display: flex; gap: 20px; width: 100%; justify-content: space-around; }
.pd-pair small { display: block; font-size: calc(12 * var(--u)); color: var(--on-surface-variant); margin-bottom: 4px; }
.pd-pair { gap: 10px; }
.pd-pair > div { min-width: 0; }
.pd-pair .pd-row { gap: 4px; }
.pd-pair .step-circle { width: 26px; height: 26px; flex: none; }
.pd-pair .big-number { width: 52px !important; font-size: 20px !important; min-width: 0; }
.btn-pill:disabled { opacity: 0.45; cursor: default; }

.transpose-card { align-items: stretch; }
.transpose-title {
  align-self: center; border: 1px solid var(--window-line); border-radius: 20px; padding: 4px 1em; text-align: center;
  font-size: calc(14 * var(--u)); font-weight: 600; background: var(--primary); color: var(--on-primary); white-space: nowrap;
  box-shadow: 0 6px 16px rgba(10, 14, 20, 0.2); margin-bottom: 12px;
}
.transpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.transpose-eye { display: flex; flex-direction: column; align-items: center; }
.preview-field { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-top: 1px solid var(--card-line); width: 100%; }
.preview-field.first { border-top: 0; }
.pf-label { font-size: calc(11 * var(--u)); font-weight: 600; color: var(--card-muted); }
.pf-label.strong { font-size: calc(13 * var(--u)); font-weight: 700; }
.preview-field b { font-size: calc(20 * var(--u)); font-weight: 700; color: var(--accent); }
.pf-was { font-size: calc(11 * var(--u)); color: var(--card-muted); }
.transpose-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; justify-items: center; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-line); }
.transpose-actions.both .btn { grid-column: 1 / -1; }
.transpose-actions.only-od .btn { grid-column: 1; }
.transpose-actions.only-os .btn { grid-column: 2; }
.btn-text.muted { color: var(--card-muted); }
.btn-text.primary { color: var(--primary); }
/* Екран «Рецепт»: кнопки й типи лінз — 14 / 600 */
.rx-screen .lens-chip:not(.selected), .rx-screen .btn, .rx-screen .btn-pill, .rx-screen .btn-text,
.dialog-backdrop[data-action='dismiss-clear'] .btn { font-size: calc(14 * var(--u)); font-weight: 600; }
.rx-screen .btn-text.danger, .rx-screen .btn.accent { font-weight: 600; }
.btn-text.danger { color: var(--error); font-weight: 700; }
.btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

.neu-panel > .eye-row { width: 100%; }
.cl-card { padding: 10px 8px; }
.cl-value { font-size: calc(20 * var(--u)); font-weight: 700; }
.cl-caption { margin-top: 5px; font-size: calc(10 * var(--u)); line-height: 11px; color: var(--card-muted); text-align: center; white-space: pre-line; }

.vertex-title { display: flex; align-items: center; gap: 8px; }
.help-btn { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--primary); color: var(--on-primary); font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 0;  font-size: calc(13.333px + 1 * var(--u));}
.vertex-result { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vertex-hint { font-size: calc(11 * var(--u)); font-weight: 600; color: #8a5a18; }
.vertex-header, .vertex-line { font-size: calc(12 * var(--u)); color: var(--on-surface-variant); }
.footer-row { display: flex; align-items: center; }

.prog-diagram { display: flex; flex-direction: column; align-items: center; width: 100%; }
.prog-diagram svg { max-width: 100%; height: auto; cursor: pointer; }
.zone-card { margin-top: 10px; width: 100%; align-items: flex-start; padding: 12px; border-radius: 12px; text-align: left; }
.zone-card span { font-size: calc(12.5 * var(--u)); color: var(--card-muted); margin-top: 3px; }

.dialog-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.dialog { background: var(--surface); border: 1px solid var(--window-line); border-radius: 18px; padding: 20px; max-width: 360px; width: 100%; text-align: center; }
.dialog p { margin: 0 0 16px; font-size: calc(15 * var(--u)); font-weight: 700; }
.dialog-actions { display: flex; gap: 10px; justify-content: center; }

.dialog.modal { max-width: 460px; max-height: 85vh; display: flex; flex-direction: column; text-align: left; padding: 16px; }
.modal-head { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 12px; min-height: 30px; }
.modal-title { font-size: calc(16 * var(--u)); font-weight: 700; }

.modal-body p { font-weight: 400; }
.modal-body .sub { font-weight: 700;  font-size: calc(1em + 1 * var(--u));}
.modal-body { overflow-y: auto; padding: 0; flex: 1; }
.modal-foot { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.modal-question { font-size: calc(14 * var(--u)); font-weight: 700; }
.modal-foot .row-2 { justify-content: center; }

/* ── Клієнти ── */
.clients-screen, .client-detail { align-items: stretch; }
.muted-text { color: var(--on-surface-variant); font-size: calc(13 * var(--u)); }
.muted { color: var(--card-muted); font-size: calc(12 * var(--u)); }
.accent { color: var(--accent); font-weight: 600; }
.small { font-size: calc(12 * var(--u)); }
.btn-text.muted { color: var(--card-muted); }
.btn-text.danger { color: var(--error); font-weight: 700; }
.search-field {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 14px; font: inherit; font-size: calc(13 * var(--u));
  background: var(--surface); color: var(--on-bg); border: 1px solid transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.search-field:focus { outline: none; border-color: var(--accent); }
.row-2 { display: flex; gap: 8px; }
.btn-dark {
  flex: 1; border: 1px solid var(--window-line); border-radius: 20px; padding: 9px; font: inherit; font-size: calc(12.5 * var(--u)); font-weight: 600;
  background: var(--card-bg); color: var(--header-text); cursor: pointer;
}
.import-result { display: flex; align-items: center; justify-content: space-between; color: var(--primary); font-size: calc(12 * var(--u)); font-weight: 600; }
.chips { display: flex; gap: 6px; overflow-x: auto; }
#clients-root .chip { font-size: calc(12.5 * var(--u)); }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
#knowledge-root .chips::-webkit-scrollbar { height: 3px; }
#knowledge-root .chips::-webkit-scrollbar-track { background: var(--chip-bg); border-radius: 2px; }
#knowledge-root .chips::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 2px; }
.chip {
  flex: none; border: 1px solid var(--outline); border-radius: 16px; background: none; color: var(--on-surface-variant);
  font: inherit; font-size: calc(13 * var(--u)); font-weight: 600; padding: 6px 12px; cursor: pointer;
}
.chip.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.deep-card .chip { color: var(--card-muted); border-color: var(--card-line); }
.deep-card .chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.client-card { align-items: stretch; text-decoration: none; padding: 12px 14px; gap: 2px; }
.client-name { display: flex; align-items: center; gap: 6px; font-size: calc(14.5 * var(--u)); }
.client-name b { flex: 1; }
.client-phone { font-size: calc(12 * var(--u)); color: var(--card-muted); }
.client-dates { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--card-line); font-size: calc(11.5 * var(--u)); color: var(--card-muted); }
.form-panel { align-items: stretch; gap: 10px; text-align: left; }
.text-field { display: flex; flex-direction: column; gap: 3px; font-size: calc(11.5 * var(--u)); font-weight: 600; text-align: left; }
.text-field > span { color: var(--card-muted); }
.neu-panel .text-field > span { color: var(--on-surface-variant); }
.text-field input, .text-field textarea {
  font: inherit; font-size: calc(14 * var(--u)); font-weight: 400; color: inherit; background: transparent; padding: 9px 11px;
  border-radius: 10px; border: 1px solid var(--card-line); resize: vertical;
}
.neu-panel .text-field input { border-color: var(--outline); }
.text-field input:focus, .text-field textarea:focus { outline: none; border-color: var(--accent); }
.text-field.invalid input { border-color: var(--error); }
.text-field small { color: var(--error); }
.avatar {
  align-self: center; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, var(--accent), var(--primary)); color: var(--accent-ink); font-weight: 700; font-size: calc(18 * var(--u));
}
.detail-section { display: flex; flex-direction: column; gap: 8px; }
.section-title { display: flex; justify-content: flex-start; align-items: center; gap: 8px; flex: 1; font-size: calc(13 * var(--u)); }
.section-title span { font-size: calc(11 * var(--u)); color: var(--on-surface-variant); font-weight: 700; }
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.list-row { align-items: stretch; gap: 2px; padding: 12px; text-align: left; border: 0; font: inherit; width: 100%; box-sizing: border-box; }
.list-row.clickable { cursor: pointer; }
.picker-row { display: block; width: 100%; border-bottom: 1px solid var(--window-line); background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; font-size: calc(15 * var(--u)); color: inherit; text-align: left; padding: 8px 0; cursor: pointer; }
.picker-sub { display: block; font-size: calc(13 * var(--u)); color: var(--card-muted); opacity: 0.75; }
.picker-row.create { color: var(--primary); font-weight: 700; }
.saved-banner { align-items: center; justify-content: space-between; }
.footer-row { justify-content: space-between; }

/* ── База знань ── */
.tab-row { padding: 10px 16px; flex: none; }
.knowledge-row { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; text-align: left; border: 0; font: inherit; width: 100%; box-sizing: border-box; cursor: pointer; }
.knowledge-row b { flex: 1; font-size: calc(13.5 * var(--u)); font-weight: 700; }
.row-bookmark { color: var(--card-muted); display: flex; }
.row-bookmark.on, .bookmark-btn.on { color: var(--accent); }
.article-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 4px; position: sticky; top: 0; z-index: 3; background: var(--bg); }
.article-top .bookmark-btn { margin-left: auto; }
.bookmark-btn { background: none; border: 0; padding: 8px; color: var(--on-surface-variant); cursor: pointer; display: flex; }
.bookmark-btn.on { color: var(--primary); }
.article { padding: 8px 22px 24px; }
.article h1 { font-size: calc(20 * var(--u)); font-weight: 700; margin: 0 0 14px; }
.article-body { display: flex; flex-direction: column; gap: 14px; }
.article-body p { margin: 0; font-size: calc(14.5 * var(--u)); line-height: 1.6; opacity: 0.85; white-space: pre-line; }
.article-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: calc(14 * var(--u)); line-height: 1.5; opacity: 0.85; }
.article-bullets li::before { content: '•'; color: var(--primary); margin-right: 8px; }
.article-example { border-left: 3.5px solid var(--primary); background: rgba(14, 122, 108, 0.08); border-radius: 0 10px 10px 0; padding: 11px 14px 11px 11px; }
.article-example p { font-size: calc(13.5 * var(--u)); line-height: 1.55; opacity: 1; }
.example-label { display: block; font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: 0.6px; color: var(--primary); margin-bottom: 4px; }

/* ── Налаштування ── */
.settings-screen { align-items: stretch; gap: 14px; padding: 20px; }
.chips.center { justify-content: center; }
.row-2.full { width: 100%; }
.dev-footer { display: flex; justify-content: space-between; font-size: calc(11 * var(--u)); color: var(--on-surface-variant); padding: 6px 0; }
.dev-footer span:last-child { color: var(--primary); font-weight: 700; display: flex; align-items: center; gap: 5px; }
.dev-footer .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); display: inline-block; }
.legal-text { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.legal-text p { margin: 0; font-size: calc(13 * var(--u)); line-height: 1.5; white-space: pre-line; }
.legal-accept { padding: 16px 22px; display: flex; flex-direction: column; }

/* Фото маркування оправи */

/* Профіль і вхід */
.profile-card { background: var(--surface-variant); border: 1px solid var(--window-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.profile-card h2 { margin: 0; font-size: calc(18 * var(--u)); }
.profile-card p { margin: 0; font-size: calc(13 * var(--u)); }
.profile-card .btn { align-self: flex-start; }
.profile-card .chips { display: flex; gap: 8px; }
.phone-row { display: flex; gap: 8px; align-items: center; }
.phone-row select { font: inherit; font-size: calc(14 * var(--u)); padding: 7px 8px; border-radius: 8px; border: 1px solid var(--outline); background: transparent; color: inherit; }
.phone-row > div { flex: 1; min-width: 0; }
.phone-row .text-field input { min-width: 0; width: 100%; box-sizing: border-box; }

/* Welcome / заставка / Expired (порт ui/trial) */
.welcome { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--on-bg); }
.welcome-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 16px 32px; max-width: 480px; width: 100%; margin: 0 auto; }
.welcome-logo { width: 64%; max-height: 32vh; object-fit: contain; }
.welcome h1 { margin: 10px 0 0; font-size: calc(35 * var(--u)); font-weight: 700; text-align: center; }
.welcome-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.welcome-features li { display: flex; align-items: center; gap: 10px; font-size: calc(16 * var(--u)); font-weight: 600; }
.welcome-features li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.welcome-note { margin: 14px 0 0; font-size: calc(12 * var(--u)); text-align: center; color: var(--card-muted); }
.welcome-spacer { flex: 1; min-height: 24px; }
.welcome-start { width: 100%; padding: 12px 16px; font-size: calc(14 * var(--u)); }
.welcome-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 24px 22px; font-size: calc(11 * var(--u)); font-weight: 600; color: var(--on-surface-variant); flex: none; }
.welcome-footer b { font-weight: 600; color: inherit; }
.iris { width: 70px; height: 70px; margin-top: 58px; }
.iris circle, .iris path { fill: none; }
.iris-track { stroke: var(--outline); stroke-width: 5; }
.iris-arc { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 198; transform: rotate(-90deg); transform-origin: 35px 35px; }
.iris-eye { stroke: var(--accent); stroke-width: 2.8; }
.iris-pupil { fill: var(--accent) !important; }
.expired { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; padding: 32px; max-width: 480px; margin: 0 auto; text-align: center; }
.expired h1 { margin: 0; font-size: calc(21 * var(--u)); font-weight: 700; }
.expired p { margin: 2px 0 16px; font-size: calc(14 * var(--u)); color: var(--card-muted); }

[hidden] { display: none !important; }

/* Адаптивність: кнопки в один рядок, без виходу за межі */
.btn-pill, .btn, .btn-text, .back-btn, .tile, .chip, .segmented button {
  white-space: nowrap; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; text-overflow: clip;
}
.message-card .row > .btn, .message-card .row > .btn-pill { flex: 1; }
.welcome-start, .expired .btn-pill { width: 100%; }

/* Світла тема: чорний текст у нижньому меню, рядку внизу та Базі знань */
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .bottom-nav a:not(.active), :root:not([data-theme='dark']) .dev-footer span, :root:not([data-theme='dark']) .dev-footer span:last-child, :root:not([data-theme='dark']) #knowledge-root .chip:not(.on), :root:not([data-theme='dark']) #knowledge-root .muted-text, :root:not([data-theme='dark']) #knowledge-root .example-label, :root:not([data-theme='dark']) #knowledge-root .knowledge-row, :root:not([data-theme='dark']) #knowledge-root .knowledge-row b, :root:not([data-theme='dark']) #knowledge-root .article h1, :root:not([data-theme='dark']) #knowledge-root .article-body p, :root:not([data-theme='dark']) #knowledge-root .article-bullets, :root:not([data-theme='dark']) #knowledge-root .article-example p { color: var(--header-text); opacity: 1; } }
:root[data-theme='light'] .bottom-nav a:not(.active), :root[data-theme='light'] .dev-footer span, :root[data-theme='light'] .dev-footer span:last-child, :root[data-theme='light'] #knowledge-root .chip:not(.on), :root[data-theme='light'] #knowledge-root .muted-text, :root[data-theme='light'] #knowledge-root .example-label, :root[data-theme='light'] #knowledge-root .knowledge-row, :root[data-theme='light'] #knowledge-root .knowledge-row b, :root[data-theme='light'] #knowledge-root .article h1, :root[data-theme='light'] #knowledge-root .article-body p, :root[data-theme='light'] #knowledge-root .article-bullets, :root[data-theme='light'] #knowledge-root .article-example p { color: var(--header-text); opacity: 1; }
.pull-indicator { position: fixed; top: 0; left: 50%; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; box-shadow: 0 4px 12px rgba(10, 14, 20, 0.3); opacity: 0; transform: translate(-50%, 0); transition: opacity 0.15s, transform 0.15s; pointer-events: none; z-index: 10; }

/* Перемикач індексів на екрані профілю лінзи (мінусові лінзи) */
.switcher { background: #f3f6f5; border: 1px solid var(--window-line); border-radius: 18px; padding: 14px 12px; color: #0e1c1f; margin: 0 16px 16px; }
.switcher h3 { text-align: center; margin: 0 0 10px; font-size: calc(13 * var(--u)); font-weight: 700; }
.switcher .note { margin: 4px 0 0; font-size: calc(11 * var(--u)); line-height: 1.4; color: #6c8582; }
.sw-seg { display: grid; gap: 6px; margin-bottom: 8px; }
.sw-seg button { font: inherit; font-weight: 700; font-size: calc(12.5 * var(--u)); padding: 10px 0; border-radius: 10px; border: 1px solid #cfdad8; background: #e3ecea; color: #0e1c1f; cursor: pointer; }
.sw-seg button[aria-pressed='true'] { background: #1f8f50; border-color: #1f8f50; color: #fff; }
.sw-result { display: flex; gap: 8px; align-items: baseline; flex-wrap: nowrap; margin-top: 6px; }
.sw-result .sw-big { white-space: nowrap; }
.sw-result .sw-chip { flex: none; }
.sw-big { font-size: calc(16 * var(--u) * var(--sw-k, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-big small { font-size: calc(15 * var(--u) * var(--sw-k, 1)); color: #6c8582; font-weight: 500; }
.sw-cap { font-size: calc(11 * var(--u)); color: #6c8582; }
.sw-chip { margin-left: auto; background: #d6efe0; color: #1f8f50; border-radius: 999px; padding: 3px 9px; font-size: calc(11.5 * var(--u)); font-weight: 700; }
.sw-chip.zero { background: #e3ecea; color: #6c8582; }
.sw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: calc(11 * var(--u)); color: #6c8582; margin-top: 6px; }
.sw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-legend i.dash { background: none; border: 1.5px dashed #1f8f50; }

/* Екран «Профіль лінз»: усе вміщається в один екран без прокрутки; малюнок бере залишок висоти */
#profile-root { flex: 1 0 auto; }
.profile-page { display: flex; flex-direction: column; min-height: 100%; }
.profile-page .profile-top { position: static; flex: none; }
.profile-page .switcher { flex: 1 0 auto; display: flex; flex-direction: column; margin-bottom: 12px; }
.profile-page .switcher svg[data-role='svg'] { flex: 1 0 auto; height: auto; width: 100%; display: block; }

/* Тариф Free: закриті блоки (приглушені, без натискання) і значок замка в правому верхньому куті */
section:has(> .locked) { position: relative; }
.locked { opacity: 0.55; pointer-events: none; user-select: none; }
.locked .advisor-big, .locked .advisor-formula, .locked .advisor-explain, .locked .vertex-result { filter: blur(3px); }
.lock { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--chip-bg); color: var(--nav-inactive); display: grid; place-items: center; pointer-events: none; }
.lock svg { width: 15px; height: 15px; }
.chip-locked { position: relative; opacity: 0.55; cursor: default; padding-right: 36px; }
.chip-locked .lock { top: 50%; right: 6px; transform: translateY(-50%); width: 22px; height: 22px; }
.chip-locked .lock svg { width: 12px; height: 12px; }
.bottom-nav a.locked-tab { position: relative; opacity: 0.55; cursor: default; }
.bottom-nav .tab-lock { position: absolute; top: 4px; right: 14px; width: 16px; height: 16px; display: grid; place-items: center; }
.bottom-nav .tab-lock svg { width: 12px; height: 12px; }

/* Вхід за паролем і вікна реєстрації */
.welcome-start { display: block; box-sizing: border-box; text-align: center; text-decoration: none; }
.welcome-start + .welcome-start { margin-top: 10px; }
.auth-page { max-width: 420px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.auth-page .welcome-logo { width: 50%; max-height: 22vh; }
.auth-page h1 { margin: 0 0 clamp(6px, 1.5dvh, 14px); font-size: calc(35 * var(--u)); font-weight: 700; }
.auth-page .profile-card { width: 100%; box-sizing: border-box; }
.auth-page .profile-card .btn { align-self: stretch; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form .btn { align-self: stretch; text-align: center; text-decoration: none; }

/* Профіль */
.profile-main { align-items: stretch; }
.profile-main input[readonly] { opacity: 0.7; }
.danger-btn { color: var(--error); border-color: var(--error); }
.profile-page .screen > .btn-pill, #profile-root .screen > .btn-pill { width: 80%; }
#profile-root .screen > .gap-before { margin-top: 28px; }
#profile-root .btn-pill.danger-btn { background: var(--error); color: var(--on-error, #fff); border-color: var(--error); }
.row-2 > .btn { flex: 1; }
.sub-tier { border-radius: 16px; border: 1.5px solid var(--outline); margin-bottom: 12px; overflow: hidden; }
.sub-tier.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sub-tier-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; gap: 10px; }
.sub-tier-name { font-size: calc(18 * var(--u)); font-weight: 700; }
.sub-tier-from { font-size: calc(13 * var(--u)); color: var(--on-surface-variant); font-weight: 600; margin-top: 2px; }
.sub-tier-right { display: flex; align-items: center; gap: 8px; }
.sub-tier-chev { display: flex; width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; }
.sub-tier.open .sub-tier-chev { transform: rotate(180deg); }
.sub-tier-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.sub-tier.open .sub-tier-body { max-height: 400px; }
.sub-period-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; text-align: left; }
.sub-period-row { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--outline); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.sub-period-row.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sub-radio { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; flex-shrink: 0; position: relative; }
.sub-period-row.sel .sub-radio { border-color: var(--accent); }
.sub-period-row.sel .sub-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.sub-label-block { display: flex; align-items: center; gap: 8px; font-size: calc(13 * var(--u)); font-weight: 700; }
.sub-until { display: none; font-size: calc(12.5 * var(--u)); font-weight: 700; color: var(--on-surface-variant); text-decoration: underline; text-underline-offset: 2px; }
.sub-period-row.sel .sub-until { display: block; }
.sub-price { font-size: calc(17 * var(--u)); font-weight: 700; }
.sub-price span { font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--on-surface-variant); }
.sub-save-badge { font-size: calc(11.5 * var(--u)); font-weight: 700; color: #2e8b57; background: color-mix(in srgb, #2e8b57 14%, transparent); padding: 2px 7px; border-radius: 999px; }
.sub-btn-pay { width: 100%; padding: 11px; border-radius: 20px; font: inherit; font-size: calc(15 * var(--u)); font-weight: 700; border: 1px solid var(--outline); background: transparent; color: var(--on-surface-variant); cursor: not-allowed; margin-bottom: 6px; }
.sub-pay-note { font-size: calc(11.5 * var(--u)); color: var(--on-surface-variant); text-align: center; margin-bottom: 14px; line-height: 1.4; }
.sub-tier-body-inner { padding: 0 16px 16px; text-align: center; }
.sub-feat-toggle { font: inherit; font-size: calc(13 * var(--u)); font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: none; padding: 0; }
.pill-current { font-size: calc(11.5 * var(--u)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 3px 9px; }
.plan-list { margin: 0; padding-left: 18px; font-size: calc(13 * var(--u)); line-height: 1.45; }
.plan-list li { margin-bottom: 8px; }
.more-list > .locked-pill { position: relative; opacity: 0.55; cursor: default; box-sizing: border-box; }
.locked-pill .tab-lock { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 16px; height: 16px; display: grid; place-items: center; }
.locked-pill .tab-lock svg { width: 14px; height: 14px; }

.locked .tiles { filter: blur(3px); }

.name-row { display: flex; align-items: center; gap: 8px; }
.name-row input { flex: 1; min-width: 0; box-sizing: border-box; }

.birth-row { position: relative; display: flex; }
.birth-row .text-field { flex: 1; min-width: 0; }
.birth-row .text-field input { width: 100%; box-sizing: border-box; padding-right: calc(46 * var(--u)); }

.birth-row:has(.text-field.invalid) .calendar-btn { bottom: calc(11.5 * var(--u) * 1.25 + 8px); }
.calendar-btn svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.birth-picker { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rx-block { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rx-line { font-size: calc(13 * var(--u)); font-weight: 400; }
.rx-line b { font-weight: 700; margin-right: 4px; }
.purchase-tile { position: relative; padding-right: calc(64 * var(--u)); }

.pill-delete svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.purchase-amount { margin-left: auto; flex: none; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 700; font-size: calc(13 * var(--u)); }

.text-field select, .select-btn {
  font: inherit; font-size: calc(14 * var(--u)); font-weight: 400; color: inherit; background: transparent; padding: 9px 11px;
  border-radius: 10px; border: 1px solid var(--card-line); text-align: left; width: 100%; cursor: pointer;
}
.text-field select option { color: #000; }
.check-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--card-line); border-radius: 10px; padding: 4px 8px; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: calc(14 * var(--u)); font-weight: 400; padding: 7px 0; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }

.pair-row { display: flex; gap: 10px; align-items: flex-start; }
.pair-row > .text-field { flex: 1 1 0; min-width: 0; }
.pair-row > .text-field:last-child { flex: 0 0 38%; }

.pair-row.even > * { flex: 1 1 0; min-width: 0; }
.pair-row.even > .text-field:last-child { flex: 1 1 0; }

.identity-card { position: relative; display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 8px 12px; width: 100%; text-align: left; font: inherit; color: inherit; }
.identity-card .avatar { flex: none; }
.identity-info { flex: 1; }
.identity-actions { display: flex; flex-direction: column; gap: 8px; flex: none; }
.call-wrap { position: relative; }
.call-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 160px; padding: 6px; display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--window-line); border-radius: 14px; box-shadow: 0 6px 20px rgba(10, 14, 20, 0.35); }
.call-pop a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; font-size: calc(14 * var(--u)); }
.call-pop .ci { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.call-pop .ci .icon { width: 15px; height: 15px; }
.call-pop .ci.phone { background: color-mix(in srgb, #16A34A 72%, #6b7280); }
.call-pop .ci.whatsapp { background: color-mix(in srgb, #22B04B 72%, #6b7280); }
.call-pop .ci.telegram { background: color-mix(in srgb, #2AA3E8 72%, #6b7280); }
.call-pop .ci.viber { background: color-mix(in srgb, #7B5AC7 72%, #6b7280); }
.call-wrap .icon-btn { --c: color-mix(in srgb, #16A34A 72%, #6b7280); --ic: #fff; }
.call-pop a:active { background: var(--chip-bg); }
.identity-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.identity-info .muted { font-size: calc(14 * var(--u)); white-space: pre-wrap; overflow-wrap: anywhere; }

.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.avatar-big { width: 76px; height: 76px; font-size: calc(28 * var(--u)); }
.photo-pick { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 18px; padding: 4px 0 10px; }
.photo-pick .avatar { flex: none; }
.photo-actions { display: flex; flex-direction: row; gap: 10px; }
.modal-body.form-panel { display: flex; flex-direction: column; gap: 14px; }

.icon { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; stroke: none; }
.modal-x .icon { width: 14px; height: 14px; }
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn.kn-cat { --ic: #fff; width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
.icon-btn.kn-cat.cheatsheet { --c: color-mix(in srgb, #16A34A 72%, #6b7280); }
.icon-btn.kn-cat.objection { --c: color-mix(in srgb, #F59E0B 72%, #6b7280); }
.icon-btn.kn-cat.red_flag { --c: color-mix(in srgb, #7C3AED 72%, #6b7280); }
.icon-btn.kn-bm { --ic: #fff; --c: color-mix(in srgb, #6b7280 85%, white); width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
.icon-btn.kn-bm.on { --ic: var(--accent-ink); --c: var(--accent); }

/* М'які кнопки-іконки: легкий градієнт, тонка світла обвідка, невелика тінь і слабкий відблиск */
.modal-x, .calendar-btn, .pill-delete, .icon-btn {
  --c: var(--accent); --ic: var(--accent-ink);
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none;
  padding: 0; cursor: pointer; border-radius: 50%; color: var(--ic);
  border: 1.5px solid color-mix(in srgb, #fff 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 90%, white) 0%, var(--c) 60%, color-mix(in srgb, var(--c) 90%, black) 100%);
  box-shadow: 0 2px 5px -1px rgba(15, 23, 42, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}
.modal-x::after, .calendar-btn::after, .pill-delete::after, .icon-btn::after {
  content: ''; position: absolute; top: 8%; left: 18%; width: 52%; height: 30%; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2); filter: blur(1px); pointer-events: none;
}
.modal-x svg, .calendar-btn svg, .pill-delete svg, .icon-btn svg { position: relative; z-index: 1; }
.pill-delete, .icon-btn.danger { --c: color-mix(in srgb, var(--error) 72%, #6b7280); --ic: #fff; }
.modal-x { position: absolute; top: -2px; right: 0; width: calc(29 * var(--u)); height: calc(29 * var(--u)); --c: var(--primary); --ic: var(--on-primary); }
.icon-btn { width: calc(29 * var(--u)); height: calc(29 * var(--u)); }
.calendar-btn { position: absolute; right: 8px; bottom: 4px; width: calc(29 * var(--u)); height: calc(29 * var(--u)); }
.pill-delete { position: absolute; top: 10px; right: 10px; width: calc(29 * var(--u)); height: calc(29 * var(--u)); }

/* Нижнє меню: значок вкладки — м'яка кругла кнопка; активна має колір теми */
.bottom-nav a .pill {
  --c: color-mix(in srgb, var(--nav-inactive) 85%, var(--nav-bg)); --ic: #fff;
  position: relative; overflow: hidden; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; color: var(--ic);
  border: 1.5px solid color-mix(in srgb, #fff 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 90%, white) 0%, var(--c) 60%, color-mix(in srgb, var(--c) 90%, black) 100%);
  box-shadow: 0 2px 5px -1px rgba(15, 23, 42, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}
.bottom-nav a .pill::after { content: ''; position: absolute; top: 8%; left: 18%; width: 52%; height: 30%; border-radius: 50%; background: rgba(255, 255, 255, 0.2); filter: blur(1px); pointer-events: none; }
.bottom-nav a .pill svg { position: relative; z-index: 1; width: 18px; height: 18px; }
.bottom-nav a.active .pill { --c: var(--accent); --ic: var(--accent-ink); }

/* Значки без кнопки: легка тінь під значком */
.lock svg, .tab-lock svg, .row-bookmark svg, [data-bookmark] svg, .sub-tier-chev svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }

/* Глянець великих кнопок і чипів — як у круглих кнопок-значків: колір лишається власний, зверху лише м'яке світло */
.btn-pill, .btn:not(.outlined), .btn-dark, .chip, .lens-chip, .label-pill, .segmented button.on, .transpose-title, .help-btn { position: relative; overflow: hidden; }
.btn-pill, .btn:not(.outlined), .btn-dark, .chip, .lens-chip, .label-pill, .segmented button.on, .transpose-title, .help-btn {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.1) 100%);
  box-shadow: 0 2px 5px -1px rgba(15, 23, 42, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

.note-box { position: relative; }
.note-box textarea { box-sizing: border-box; width: 100%; min-height: calc(3 * 29 * var(--u) + 2 * 6px + 16px); padding-right: calc(29 * var(--u) + 18px); }
.note-tools { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.note-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; cursor: pointer; align-self: flex-start; }
.icon-btn.recording { --c: color-mix(in srgb, var(--error) 72%, #6b7280); --ic: #fff; }
.photo-full { max-width: 94vw; max-height: 86vh; border-radius: 12px; pointer-events: none; }
.icon-btn[data-action$="camera"], .icon-btn[data-action$="gallery"] { --c: color-mix(in srgb, #2AA3E8 72%, #6b7280); --ic: #fff; }
.icon-btn[data-action="note-voice"] { --c: color-mix(in srgb, #7B5AC7 72%, #6b7280); --ic: #fff; }
.icon-btn[data-action="note-voice"].recording { --c: color-mix(in srgb, var(--error) 72%, #6b7280); }
.note-error { color: var(--error); font-size: calc(11.5 * var(--u)); font-weight: 600; }
.app-header.has-back { position: sticky; }
.header-back { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.client-detail .delete-client { align-self: flex-end; width: auto; margin-top: -10px; padding: 4px 8px; }
.note-photo.note-photo-small { width: 53px; height: 53px; display: block; align-self: flex-end; flex: none; border-radius: 8px; }
.note-photo-wrap { position: relative; align-self: flex-start; width: 96px; height: 96px; }
.note-photo-wrap .note-photo { width: 100%; height: 100%; }
.icon-btn.note-photo-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; }
.icon-btn.note-photo-del .icon { width: 12px; height: 12px; }
.tile-note { white-space: pre-line; overflow-wrap: anywhere; }
.purchase-tile { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 2px 8px; }
.purchase-tile > .tile-line { flex: 0 0 100%; }
.tile-main { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 2px; }
.tile-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-right: calc(-52 * var(--u)); }
.support-error { color: var(--error, #c0392b); font-size: calc(12 * var(--u)); margin: 0; }

/* Вхід за відбитком */
.passkey-row { width: 80%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 22px; border-radius: 20px;
  border: 1px solid var(--window-line); background-color: var(--primary); color: var(--on-primary);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.1) 100%);
  box-shadow: 0 2px 5px -1px rgba(15, 23, 42, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.12); }
.passkey-row > .icon { width: 24px; height: 24px; margin-right: 20px; color: var(--on-primary); }
.passkey-text { flex: 1; min-width: 0; text-align: center; font-size: calc(13 * var(--u)); font-weight: 700; }
.theme-row { flex-direction: column; gap: 8px; }
.theme-row .passkey-text { flex: none; }
.theme-switch { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: calc(13 * var(--u)); font-weight: 700; }
.theme-switch .active { text-decoration: underline; text-underline-offset: 4px; }
#profile-root .screen > .warn-banner { width: 80%; box-sizing: border-box; }
.settings-screen > .passkey-row, .settings-screen > .btn-pill, .settings-screen > .warn-banner { width: 80%; align-self: center; box-sizing: border-box; }
.switch { position: relative; flex: none; width: 44px; height: 24px; border-radius: 12px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.3); transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform 0.15s; }
.switch[aria-checked="true"] { background: rgba(255, 255, 255, 0.85); }
.switch[aria-checked="true"]::after { background: var(--primary); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }
.auth-page .profile-card .btn.passkey-btn { display: flex; align-items: center; justify-content: center; align-self: center; padding: 4px; border: 0; background: none; box-shadow: none; color: var(--primary); }
.passkey-btn .icon { width: 48px; height: 48px; }

/* Екрани входу й привітання: насичений синій, великі помірні кнопки, жирним лише назва */
.auth-page, .welcome { --a-blue: #2349a8; --a-blue2: #12286b; --a-sky: #e6edfb; --a-fg: #14213d; --a-card: #fff; --a-line: rgba(20, 33, 61, 0.18); --a-page: #f4f7f8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .auth-page, :root:not([data-theme='light']) .welcome { --a-blue: #7a5a34; --a-blue2: #523a1e; --a-sky: #241a12; --a-fg: #ddd3c8; --a-card: #1c130d; --a-line: rgba(241, 230, 214, 0.2); --a-page: #100b08; } }
:root[data-theme='dark'] .auth-page, :root[data-theme='dark'] .welcome { --a-blue: #7a5a34; --a-blue2: #523a1e; --a-sky: #241a12; --a-fg: #ddd3c8; --a-card: #1c130d; --a-line: rgba(241, 230, 214, 0.2); --a-page: #100b08; }
body:has(.auth-page), .shell:has(.auth-page), .welcome { background: linear-gradient(180deg, #e6edfb, #f4f7f8); color: #14213d; }
:root[data-theme='dark'] body:has(.auth-page), :root[data-theme='dark'] .shell:has(.auth-page), :root[data-theme='dark'] .welcome { background: #100b08; color: #ddd3c8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) body:has(.auth-page), :root:not([data-theme='light']) .shell:has(.auth-page), :root:not([data-theme='light']) .welcome { background: #100b08; color: #ddd3c8; } }
.auth-page { gap: 12px; }
.auth-page h1, .welcome h1 { color: var(--a-fg); }
.welcome-features li { font-weight: 500; color: var(--a-fg); }
.welcome-features li::before { background: var(--a-blue); }
.welcome-footer, .welcome-footer b { font-weight: 500; color: var(--a-fg); opacity: 0.8; }
.auth-page .profile-card { background: none; border: 0; border-radius: 0; padding: 0; gap: 12px; box-shadow: none; color: var(--a-fg); }
.auth-page .text-field { font-size: calc(12 * var(--u)); font-weight: 500; gap: 4px; }
.auth-page .text-field > span { color: var(--a-blue); }
.auth-page .text-field input, .auth-page .phone-row select { height: 38px; box-sizing: border-box; font-size: calc(15 * var(--u)); font-weight: 400; border: 2px solid var(--a-line); border-radius: 14px; background: var(--a-sky); color: var(--a-fg); padding: 0 12px; }
.auth-page .phone-row select { margin-top: calc(12 * var(--u) * 1.2 + 4px); padding: 0 8px; }
.auth-page .text-field input:focus { border-color: var(--a-blue); }
.auth-page .profile-card .btn, .welcome-start { height: 38px; border-radius: 22px; padding: 0 16px; font-size: calc(15 * var(--u)); font-weight: 500; display: flex; align-items: center; justify-content: center; }
.auth-page .profile-card .btn:not(.outlined), .welcome-start.accent { background-color: var(--a-blue); background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.1) 100%); border-color: transparent; color: var(--on-primary); box-shadow: 0 2px 5px -1px rgba(15, 23, 42, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.12); }
.auth-page .profile-card .btn.outlined, .welcome-start.outlined { background: transparent; border: 2px solid var(--a-blue); color: var(--a-blue); box-shadow: none; }
.auth-page .profile-card .btn-text { height: 38px; border-radius: 22px; background: var(--a-sky); color: var(--a-blue); font-size: calc(15 * var(--u)); font-weight: 500; padding: 0; display: flex; align-items: center; justify-content: center; }
.auth-page .profile-card .btn.passkey-btn { width: 56px; height: 56px; padding: 0; border-radius: 50%; align-self: center; border: 0; background-color: var(--a-blue); background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.1) 100%); color: var(--on-primary); box-shadow: 0 2px 5px -1px rgba(15, 23, 42, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.12); }
.auth-page .passkey-btn .icon { width: 32px; height: 32px; }
.auth-page > a.btn-text { color: var(--a-blue); font-size: calc(14 * var(--u)); font-weight: 500; }

/* Адаптація екранів входу й привітання до висоти пристрою (лише висота елементів і відступи) */
.auth-page { --vh: calc(1vh / 1.1); }
@supports (height: 1dvh) { .auth-page { --vh: calc(1dvh / 1.1); } }
.welcome { --vh: 1vh; --vh: 1dvh; }
.auth-page, .welcome { --ctl: clamp(32px, calc(4.8 * var(--vh)), 38px); --gap: clamp(6px, calc(1.5 * var(--vh)), 12px); }
#auth-root { flex: 1; display: flex; flex-direction: column; }
.auth-page { flex: 1; justify-content: center; gap: var(--gap); padding-block: clamp(8px, calc(3 * var(--vh)), 24px); }
.auth-page .profile-card { gap: var(--gap); }
.auth-page .text-field input, .auth-page .phone-row select { height: var(--ctl); }
.auth-page .phone-row select { margin-top: calc(12 * var(--u) * 1.2 + 4px); }
.auth-page .profile-card .btn, .auth-page .profile-card .btn-text, .welcome-start { height: var(--ctl); }
.auth-page .profile-card .btn.passkey-btn { width: clamp(44px, calc(7 * var(--vh)), 56px); height: clamp(44px, calc(7 * var(--vh)), 56px); }
.welcome-body { padding-block: 12px; padding-block: clamp(10px, 2dvh, 20px); }
.welcome-logo { width: auto; max-width: 64%; max-height: 20vh; max-height: clamp(30px, calc(60dvh - 210px), clamp(20dvh, calc(60dvh - 280px), 32dvh)); }
.welcome h1 { margin-top: 8px; margin-top: clamp(6px, 1.2dvh, 14px); }
.welcome-features { gap: 4px; gap: clamp(3px, calc(1.5dvh - 5px), 10px); }
.welcome-start { height: 46px; }
.welcome-spacer { min-height: 12px; }
.welcome-start + .welcome-start { margin-top: var(--gap); }

/* Екран входу: «Назад» унизу, відбиток — коло на все вільне місце між «Реєстрація» і «Назад» */
.auth-page { justify-content: flex-start; }
.auth-page .profile-card { flex: 1 1 auto; align-self: stretch; }
/* Відбиток: коло явного розміру (ширина = висота), по центру вільного місця */
.auth-page .profile-card .btn.passkey-btn { flex: none; width: 56px; height: 56px; width: clamp(56px, calc(24 * var(--vh) - 90px), 130px); height: clamp(56px, calc(24 * var(--vh) - 90px), 130px); margin-block: auto; align-self: center; }
.auth-page .passkey-btn .icon { width: 60%; height: 60%; }
.auth-page .welcome-logo { max-height: 18vh; max-height: clamp(40px, calc(51 * var(--vh) - 205px), 22vh); }
@media (max-height: 520px) { .auth-page .welcome-logo { display: none; } }

/* Рядок «версія і розробник» завжди внизу видимої частини екрана */
.welcome-footer { position: sticky; bottom: 0; margin-top: auto; padding-top: 6px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); background: #f4f7f8; }
:root[data-theme='dark'] .welcome-footer { background: #100b08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .welcome-footer { background: #100b08; } }

/* Привітання: висота рівно у вікно сторінки, щоб рядок версії був унизу екрана */
.welcome { height: 100%; min-height: 0; overflow-y: auto; }

/* Запасні правила для старих браузерів (екран входу): фон без :has */
#auth-root { background: linear-gradient(180deg, #e6edfb, #f4f7f8); color: #14213d; }
:root[data-theme='dark'] #auth-root { background: #100b08; color: #ddd3c8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) #auth-root { background: #100b08; color: #ddd3c8; } }

.settings-footer { margin-top: auto; padding: 6px 16px 22px; }

/* Назва застосунку: «Opti» темним, «Mate» кольором застосунку */
h1.app-name { display: flex; justify-content: center; gap: 0.28em; font-family: 'Poppins', 'Golos Text', system-ui, sans-serif; font-weight: 600; }
h1.app-name span:last-child { color: var(--a-blue); }

/* Екран входу: вищі поля й кнопка, дві дрібні дії в одному рядку */
.auth-page { --fld: clamp(40px, calc(5.8 * var(--vh)), 46px); }
.auth-page .text-field input, .auth-page .phone-row select { height: var(--fld); border-radius: 16px; }
.auth-page .profile-card .btn:not(.passkey-btn) { height: var(--fld); }
.auth-links { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.auth-page .profile-card .auth-links .btn-text { height: auto; background: none; padding: 6px 4px; border-radius: 0; font-size: calc(13 * var(--u)); font-weight: 500; }
.phone-block { display: flex; flex-direction: column; gap: 4px; }
.auth-page .phone-label { font-size: calc(12 * var(--u)); font-weight: 500; color: var(--a-blue); }
.auth-page .phone-row select { margin-top: 0; }
.phone-row .text-field > span:empty { display: none; }

/* Екран входу, новий вигляд: біла картка, поля в картці, код країни й номер одним полем */
.auth-page { --fld: clamp(42px, calc(6 * var(--vh)), 50px); }
.auth-page .auth-card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: var(--gap); box-shadow: 0 14px 30px -14px rgba(18, 40, 107, 0.4); margin-top: auto; }
:root[data-theme='dark'] .auth-page .auth-card { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .auth-page .auth-card { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7); } }
.auth-page .auth-sub { margin: -4px 0 2px; font-size: calc(13 * var(--u)); color: var(--a-fg); opacity: 0.7; }
.auth-page .auth-card .text-field input, .auth-page .auth-card .phone-row select { background: var(--a-page); border-width: 1.5px; }
.auth-page .auth-card .text-field input::placeholder { color: var(--a-fg); opacity: 0.4; }
.auth-page .phone-row { gap: 0; }
.auth-page .phone-row select { border-radius: 16px 0 0 16px; border-right-width: 1px; }
.auth-page .phone-row .text-field input { border-radius: 0 16px 16px 0; border-left-width: 0; }
.auth-page > a.btn-text { text-decoration: none; }
@media (max-height: 700px) { .auth-page .auth-sub { display: none; } }

/* Новий вигляд, варіант 2: синя (у темній темі коричнева) шапка зі значком і назвою, нижче основа із заокругленим краєм */
.auth-page, .welcome { --a-hero1: #2f5bd3; --a-hero2: #12286b; --a-hero-fg: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .auth-page, :root:not([data-theme='light']) .welcome { --a-hero1: #7a5a34; --a-hero2: #3a2814; --a-hero-fg: #ddd3c8; } }
:root[data-theme='dark'] .auth-page, :root[data-theme='dark'] .welcome { --a-hero1: #7a5a34; --a-hero2: #3a2814; --a-hero-fg: #ddd3c8; }
.auth-hero, .welcome-hero { background: linear-gradient(170deg, var(--a-hero1), var(--a-hero2)); display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 100%; padding: clamp(14px, calc(3 * var(--vh)), 26px) 22px clamp(36px, calc(5 * var(--vh)), 48px); }
.auth-hero .welcome-logo, .welcome-hero .welcome-logo { border-radius: 20%; }
.auth-hero h1.app-name, .welcome-hero h1.app-name { color: var(--a-hero-fg); margin: 6px 0 0; }
.auth-hero h1.app-name span:last-child, .welcome-hero h1.app-name span:last-child { color: var(--a-hero-fg); opacity: 0.8; }
.auth-hero .auth-sub { color: var(--a-hero-fg); opacity: 0.85; margin: 4px 0 0; text-align: center; }
.auth-page { padding: 0; gap: 0; max-width: 480px; justify-content: flex-start; }
.auth-page .profile-card { margin-top: -26px; background: var(--a-page); border-radius: 28px 28px 0 0; padding: 20px 22px 14px; position: relative; flex: 1 1 auto; align-self: stretch; }
.auth-page .auth-card { background: none; border: 0; box-shadow: none; padding: 0; margin-top: 0; border-radius: 0; }
.auth-page .auth-card .text-field input, .auth-page .auth-card .phone-row select { background: var(--a-card); }
.auth-page .profile-card > a.btn-text { align-self: center; height: auto; background: none; border-radius: 0; padding: 4px; font-size: calc(14 * var(--u)); }
.welcome-hero { flex: none; }
.welcome-body { margin: -26px auto 0; background: var(--a-page); border-radius: 28px 28px 0 0; padding: 22px 32px 12px; position: relative; box-sizing: border-box; align-items: stretch; }
.welcome-features { align-self: center; }
.welcome-features li { justify-content: flex-start; }
/* Під значком: тінь з картинки прихована, замість неї тонка риска кольору слова Mate */
.auth-hero .welcome-logo, .welcome-hero .welcome-logo { clip-path: inset(0 4% 4% 4%); }
.auth-hero h1.app-name, .welcome-hero h1.app-name { position: relative; margin-top: -14px; }
.auth-hero h1.app-name::before, .welcome-hero h1.app-name::before { content: ''; position: absolute; top: -2px; left: 50%; width: 36px; height: 3px; margin-left: -18px; border-radius: 2px; background: var(--a-hero-fg); opacity: 0.8; }
/* Значок у шапці однакового розміру на вході й привітанні */
.auth-hero .welcome-logo, .welcome-hero .welcome-logo { width: auto; max-width: none; height: 172px; max-height: none; }
/* Вхід лежить у загальній оболонці зі збільшенням 1.1, тому значок і назву тут зменшено на ті самі 10%, щоб виглядали як на привітанні */
.auth-hero .welcome-logo { height: calc(172px / 1.1); }
.auth-page .auth-hero h1.app-name { font-size: calc(35 * var(--u) / 1.1); margin-top: calc(-14px / 1.1); }
.auth-hero h1.app-name::before { top: calc(-2px / 1.1); width: calc(36px / 1.1); height: calc(3px / 1.1); margin-left: calc(-18px / 1.1); }
.auth-hero, .welcome-hero { padding-top: 16.4px; }
.auth-hero { padding-top: calc(16.4px / 1.1); }
.auth-hero h1.app-name::before, .welcome-hero h1.app-name::before { top: -0.65px; }
.auth-hero h1.app-name::before { top: calc(-0.65px / 1.1); }
.auth-hero, .welcome-hero { padding-bottom: 36px; }
.auth-hero { padding-bottom: calc(36px / 1.1); }
.auth-page .profile-card > .auth-sub { margin: 0 0 4px; text-align: center; }
.auth-page .profile-card > .auth-sub, .welcome-footer, .welcome-footer b { color: #000; opacity: 1; }
:root[data-theme='dark'] .auth-page .profile-card > .auth-sub, :root[data-theme='dark'] .welcome-footer, :root[data-theme='dark'] .welcome-footer b { color: var(--a-fg); opacity: 0.8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .auth-page .profile-card > .auth-sub, :root:not([data-theme='light']) .welcome-footer, :root:not([data-theme='light']) .welcome-footer b { color: var(--a-fg); opacity: 0.8; } }
.auth-page, .welcome { --a-name1: #ffffff; --a-name2: #a9c8ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .auth-page, :root:not([data-theme='light']) .welcome { --a-name1: #ece3d8; --a-name2: #d8b88e; } }
:root[data-theme='dark'] .auth-page, :root[data-theme='dark'] .welcome { --a-name1: #ece3d8; --a-name2: #d8b88e; }
.auth-hero h1.app-name, .welcome-hero h1.app-name { color: var(--a-name1); }
.auth-hero h1.app-name span:last-child, .welcome-hero h1.app-name span:last-child { color: var(--a-name2); opacity: 1; }
.auth-hero h1.app-name::before, .welcome-hero h1.app-name::before { background: var(--a-name2); opacity: 1; }

/* ── Клієнти: дні народження, значки, стани покупок ── */
.badge-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex: none; }
.badge-dot .icon { width: 14px; height: 14px; }
.badge-dot.gift { background: color-mix(in srgb, #D6336C 16%, transparent); color: #D6336C; }
.badge-dot.ready { background: color-mix(in srgb, #16A34A 18%, transparent); color: #16A34A; }
.client-name .badge-dot { margin-left: 2px; }
.client-name b { min-width: 0; overflow-wrap: anywhere; }
.bday-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 11px 14px; border: 0; border-radius: 14px; font: inherit; font-size: calc(13.5 * var(--u)); font-weight: 700; text-align: left; cursor: pointer;
  background: color-mix(in srgb, #D6336C 14%, transparent); color: #D6336C; }
.reports-row { display: flex; align-items: stretch; gap: 8px; }
.reports-row > .btn-pill { flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding-top: 4px; padding-bottom: 4px; padding-left: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); }
.reports-row > .bday-line {
  flex: 1; width: auto; min-width: 0; box-sizing: border-box; padding: 4px 14px; font-size: calc(13 * var(--u)); font-weight: 600; border: 1px solid var(--window-line); border-radius: 20px;
  position: relative; overflow: hidden; background-color: color-mix(in srgb, #D6336C 72%, #6b7280); color: #fff;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.1) 100%);
  box-shadow: 0 2px 5px -1px rgba(15, 23, 42, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}
.report-tabs { position: sticky; top: var(--hdr-h, 52px); z-index: 3; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; background: var(--bg); }
.report-tabs .chips { overflow: visible; }
.report-tabs .chip { flex: 1; text-align: center; padding: 7px 6px; }
.report-big { align-items: stretch; gap: 4px; padding: 5px 16px; text-decoration: none; }
.report-big .num { font-size: calc(32 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.report-big .num small { font-size: calc(14 * var(--u)); font-weight: 600; color: var(--card-muted); }
.report-big.debt .num { color: var(--error); }
.report-big .tap { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; color: var(--accent); font-weight: 700; font-size: calc(12 * var(--u)); }
.report-card .muted { font-size: calc(11.5 * var(--u)); }
svg.rc { width: 100%; height: auto; display: block; }
.rc-text, .rc-lab, .rc-val { font-family: inherit; font-size: 10.5px; fill: var(--card-muted); }
.rc-lab { font-size: 12px; fill: var(--header-text); }
.rc-val { font-weight: 700; fill: var(--header-text); font-variant-numeric: tabular-nums; }
.rc-grid { stroke: var(--card-line); stroke-opacity: 0.35; stroke-width: 1; }
.rc-bar { fill: var(--accent); }
.report-card { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 5px 14px; }
.bday-line > span:first-child { display: flex; align-items: center; gap: 8px; }
.bday-line .icon { width: 18px; height: 18px; }
.bday-go { font-size: calc(20 * var(--u)); line-height: 1; }
.bday-pick { flex: none; width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.modal-body.form-panel:has(.bday-pick), .modal-body.form-panel.rel-body { padding: 4px 4px 10px; }
.call-pop.up { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.call-pop .ci.sms { background: color-mix(in srgb, #F59E0B 72%, #6b7280); }
.gw-note { margin: 0; padding: 8px 10px; max-width: 220px; }
.dialog textarea[data-greet-text] { width: 100%; resize: vertical; }
.status-pill { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: calc(11.5 * var(--u)); font-weight: 700; }
.status-pill.in-work { background: color-mix(in srgb, #D97706 18%, transparent); color: #B45309; }
.status-pill.ready { background: color-mix(in srgb, #16A34A 18%, transparent); color: #15803D; }
.status-pill.done { background: var(--chip-bg); color: var(--card-muted); }
.greet-q { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, #D6336C 12%, transparent); color: var(--on-surface-variant); }
.greet-q .icon { width: 28px; height: 28px; flex: none; color: #D6336C; }
.greet-q p { margin: 0; font-size: calc(15 * var(--u)); font-weight: 500; }
.greet-q b { font-weight: 800; }
.btn-pill.soft { background: transparent; background-image: none; box-shadow: none; color: var(--accent); border: 1.5px solid var(--accent); }

/* Статус клієнта */
.client-phone-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 1.2em; }
.st-pill { display: inline-flex; align-items: center; border: 0; font: inherit; padding: 2px 10px; border-radius: 999px; font-size: calc(11.5 * var(--u)); font-weight: 700; white-space: nowrap; }
.st-pill.new { background: color-mix(in srgb, #2349A8 16%, transparent); color: #2349A8; }
.st-pill.regular { background: color-mix(in srgb, #16A34A 18%, transparent); color: #15803D; }
.st-pill.vip { background: color-mix(in srgb, #D97706 20%, transparent); color: #B45309; }
.st-pill.no-disturb { background: color-mix(in srgb, #DC2626 16%, transparent); color: #B91C1C; }
.client-header { display: flex; align-items: center; gap: 8px; padding-left: 56px; padding-right: 12px; text-align: left; }
.header-name { flex: none; max-width: 60%; overflow-wrap: anywhere; }
.header-status-slot { flex: 1; display: flex; justify-content: center; min-width: 0; }
.header-status { gap: 4px; cursor: pointer; padding: 5px 8px 5px 12px; border: 1px solid currentColor; box-shadow: 0 2px 5px rgba(10, 14, 20, 0.22); }
.header-status .icon { width: 14px; height: 14px; }
.header-status-slot { position: relative; }
.header-status.open .icon { transform: rotate(180deg); }
.status-pop { right: 0; min-width: 150px; gap: 4px; }
.status-opt { display: flex; width: 100%; border: 1px solid transparent; border-radius: 10px; background: none; color: inherit; font: inherit; padding: 6px 8px; cursor: pointer; }
.status-opt.on { border-color: var(--accent); background: var(--chip-bg); }
.tile-line { display: flex; align-items: center; gap: 8px; }
.status-pill.pstatus-btn { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: inherit; font-size: calc(11.5 * var(--u)); font-weight: 700; padding: 5px 8px 5px 12px; border: 1px solid currentColor; box-shadow: 0 2px 5px rgba(10, 14, 20, 0.22); }
.pstatus-btn .icon { width: 14px; height: 14px; }
.pstatus-btn.open .icon { transform: rotate(180deg); }
.pstatus-pop { right: auto; left: 0; min-width: 190px; gap: 4px; }
.status-pill.pstatus-btn.ready { border-radius: 14px; text-align: left; line-height: 1.2; }
.pstatus-pop .status-pill.ready { border-radius: 14px; text-align: left; line-height: 1.2; }
.pstatus-slot { flex: 1; display: flex; justify-content: center; min-width: 0; }
.pstatus-wrap { position: relative; display: inline-flex; max-width: 100%; }
.pstatus-btn .nw, .pstatus-pop .nw { white-space: nowrap; }
.status-pill.pstatus-btn { text-align: left; }
.tile-line .pill-delete { top: auto; right: 10px; }
.pstatus-label { min-width: 0; }
.pstatus-wrap, .status-pill.pstatus-btn { min-width: 0; }
.purchase-tile.no-photo { padding-right: 12px; }
.purchase-tile.no-photo > .tile-line { box-sizing: border-box; padding-right: calc(52 * var(--u)); }
.purchase-tile.no-photo > .tile-main { flex: 0 0 100%; }
.tile-last { display: flex; align-items: center; gap: 8px; }
.tile-last > .muted { flex: 1; min-width: 0; min-height: 1.2em; }

.journal-add { display: flex; gap: 8px; align-items: center; }
.journal-field { position: relative; flex: 1; min-width: 0; display: flex; }
.journal-field .journal-input { padding-right: calc(40 * var(--u)); }
.journal-remind-btn { bottom: 50%; transform: translateY(50%); }
.journal-remind-btn.on { color: var(--accent); }
.journal-remind { display: flex; align-items: center; gap: 4px; font-size: calc(12 * var(--u)); color: var(--accent); }
.journal-remind svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.journal-input { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: calc(14 * var(--u)); color: inherit; background: transparent; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--card-line); }
.journal-input:focus { outline: none; border-color: var(--accent); }
.journal-add .btn-pill { flex: none; width: auto; padding-left: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); }
.journal-row { position: relative; padding-right: calc(52 * var(--u)); display: flex; flex-direction: column; gap: 2px; text-align: left; }
.journal-date { font-size: calc(12 * var(--u)); color: var(--accent); }
.journal-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-tools.photo-only { position: static; flex-direction: row; }
a.journal-row, button.journal-row { text-decoration: none; color: inherit; width: 100%; }
.journal-row.on { outline: 2px solid var(--accent); }
.call-pop.role-list { right: 0; }
.role-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: calc(14 * var(--u)); text-align: left; cursor: pointer; }
.role-opt.on { box-shadow: inset 0 0 0 1px var(--accent); background: var(--chip-bg); }
.role-opt:active { background: var(--chip-bg); }
.call-pop .ci.role-spouse { background: color-mix(in srgb, #E11D74 72%, #6b7280); }
.call-pop .ci.role-child { background: color-mix(in srgb, #F59E0B 72%, #6b7280); }
.call-pop .ci.role-parent { background: color-mix(in srgb, #2AA3E8 72%, #6b7280); }
.call-pop .ci.role-sibling { background: color-mix(in srgb, #16A34A 72%, #6b7280); }
.call-pop .ci.role-other { background: color-mix(in srgb, #7B5AC7 72%, #6b7280); }
.rel-search { margin: 4px 0 8px; flex: none; }

.remind-row { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; font: inherit; font-size: calc(14 * var(--u)); color: inherit; text-align: left; background: transparent; padding: 9px calc(44 * var(--u)) 9px 11px; font-weight: 400; border-radius: 10px; border: 1px solid var(--card-line); cursor: pointer; }
.remind-row-btn { bottom: 50%; transform: translateY(50%); pointer-events: none; }
.remind-badge { position: static; width: calc(20 * var(--u)); height: calc(20 * var(--u)); pointer-events: none; }
.remind-badge .icon { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-nav { font-size: calc(22 * var(--u)); line-height: 1; }
.cal-nav:disabled { opacity: 0.3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-week { font-size: calc(11 * var(--u)); color: var(--muted, inherit); opacity: 0.7; margin-bottom: 2px; }
.cal-day { font: inherit; font-size: calc(14 * var(--u)); color: inherit; background: transparent; border: 0; border-radius: 50%; aspect-ratio: 1; cursor: pointer; }
.cal-day.today { outline: 1px solid var(--accent); }
.cal-day.on { background: var(--accent); color: #fff; }
.cal-day:disabled { opacity: 0.3; cursor: default; }
.clock-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clock-day { display: flex; align-items: center; gap: 6px; font: inherit; font-size: calc(13 * var(--u)); color: var(--accent); background: transparent; border: 0; cursor: pointer; }
.clock-day svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.clock-time { font-size: calc(30 * var(--u)); font-weight: 600; }
.clock-time button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0 4px; border-radius: 8px; cursor: pointer; }
.clock-time button.on { color: var(--accent); }
.clock { position: relative; width: calc(230 * var(--u)); height: calc(230 * var(--u)); border-radius: 50%; border: 1px solid var(--card-line); }
.clock-num { position: absolute; transform: translate(-50%, -50%); width: calc(34 * var(--u)); height: calc(34 * var(--u)); display: flex; align-items: center; justify-content: center; font: inherit; font-size: calc(14 * var(--u)); color: inherit; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.clock-num.inner { width: calc(28 * var(--u)); height: calc(28 * var(--u)); font-size: calc(12 * var(--u)); opacity: 0.8; }
.clock-num.on { background: var(--accent); color: #fff; opacity: 1; }
.finance-block { display: flex; gap: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.finance-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; font-size: calc(12 * var(--u)); }
.finance-cell b { font-size: calc(14 * var(--u)); }
.purchase-debt { margin-left: auto; flex: none; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); font-weight: 700; font-size: calc(13 * var(--u)); white-space: nowrap; }
.client-dates .purchase-debt { margin-left: 0; padding: 2px 10px; font-size: calc(11.5 * var(--u)); }
.client-dates { flex-wrap: nowrap; align-items: center; }
.client-dates > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }