/* IBM Plex Sans, self-hosted: one file per weight with Bulgarian Cyrillic, basic Latin, digits and the
   punctuation the app uses. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); }

/* Design tokens, taken from the design canvas. */
:root {
  --accent: #0B5FA5;
  --accent-hover: #08457A;
  --accent-soft: #F0F7FF;
  --accent-tint: #EAF2FB;  /* Профил's "Покани колега" card */
  --accent-line: #C7DBF0;

  --ink: #17202A;
  --ink-2: #374151;
  --text: #4B5563;
  --muted: #6B7280;
  --faint: #9CA3AF;

  --ground: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #FAFAFB;
  --line: #E5E7EB;
  --line-strong: #D1D5DB;
  --google-ink: #1F1F1F;  /* the label colour Google asks for next to its mark */
  --hairline: #F0F1F3;
  --photo: #E8EAED;                       /* behind a photo until it has loaded */
  --photo-scrim: rgba(23, 32, 42, 0.72);  /* the ink, under white text on a photo */
  --viewer: #0B0F14;                       /* Снимка на цял екран: behind the photo */
  --viewer-shade: rgba(11, 15, 20, 0.85);  /* under its counter, ✕ and hint */
  --viewer-button: rgba(11, 15, 20, 0.55); /* under ‹ and › */

  --green: #1F7A5C;
  --danger: #B91C1C;
  --danger-soft: #FEF2F2;
  --danger-line: #FCA5A5;

  /* Status colours: draft grey, sent blue, accepted green, declined red. Amber warns. */
  --draft-bg: #E5E7EB;    --draft-fg: #374151;
  --sent-bg: #DBEAFE;     --sent-fg: #1E3A8A;
  --accepted-bg: #DCFCE7; --accepted-fg: #14532D;
  --declined-bg: #FEE2E2; --declined-fg: #7F1D1D;
  --warn-bg: #FEF3C7;     --warn-fg: #92400E;     --warn: #D97706;  /* the plan card's amber bar */
  --stopped-bg: #F3F4F6;  /* the plan card's "спрян" pill */

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-title: 26px;
  --fs-display: 28px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 999px;

  --font: "IBM Plex Sans", system-ui, sans-serif;

  /* The canvas draws a phone frame: 44px at the top for the status bar and 16px at the bottom for the home
     indicator. Here that room is whatever the device reports, so a browser tab gets none. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--fs-base); }
h1, h2, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
b, strong { font-weight: 600; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; left: -9999px; }

/* Icons: stroke icons that take the text colour; size comes from where they sit. */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i--solid { fill: currentColor; stroke: none; }

/* Screen frame: phone first, 390px on the canvas. */
.screen { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; max-width: 480px; margin: 0 auto; background: var(--ground); }
.screen--plain { justify-content: space-between; gap: 32px; padding: calc(28px + var(--safe-top)) var(--sp-6) calc(24px + var(--safe-bottom)); background: var(--surface); }
/* Centred on the whole screen, as the canvas draws the email link's pages. */
.screen--center { justify-content: center; padding: 40px var(--sp-6); background: var(--surface); }
/* A back arrow, a form, and its buttons at the foot: Вход с имейл. */
.screen--form { background: var(--surface); }
.screen--white { background: var(--surface); }
.screen--form .bar { border-bottom: 0; }
.form-page { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.form-page__body { display: flex; flex-direction: column; gap: 18px; padding: var(--sp-2) var(--sp-6) 0; }
.form-page__foot { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-6) calc(24px + var(--safe-bottom)); }
@media (min-width: 520px) { .screen { box-shadow: 0 0 0 1px var(--line); } }

.content { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px var(--sp-4); }
.content--even { padding: var(--sp-4); }
.content--list { gap: 10px; padding: var(--sp-4) var(--sp-5); }
.content--sections { gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack--center { align-items: center; }
.split { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.split--baseline { align-items: baseline; gap: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Text */
.eyebrow { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.title { font-size: var(--fs-xl); font-weight: 600; }
.para { font-size: var(--fs-base); line-height: 1.5; color: var(--text); }
.display { margin-top: var(--sp-4); font-size: 30px; line-height: 1.15; font-weight: 600; }
.headline { margin-top: var(--sp-2); font-size: var(--fs-display); line-height: 1.2; font-weight: 600; }
.headline--sm { font-size: var(--fs-title); }
.lead { font-size: var(--fs-lg); line-height: 1.5; color: var(--text); }
.lead strong { color: var(--ink); font-weight: 500; }
.lead--lg { font-size: 17px; }
.lead--lg strong { font-weight: 600; }
.hint { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.big-number { color: var(--ink); font-size: var(--fs-display); font-weight: 600; }
.big-number span { font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
.link-strong { position: relative; font-weight: 600; }
.link-quiet, .link-quiet:hover { color: var(--ink-2); }
.link-under, .link-under:hover { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; color: var(--ink-2); font-size: var(--fs-md); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.link-quiet { display: flex; align-items: center; justify-content: center; height: 44px; font-size: var(--fs-base); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.link-quiet--sm { position: relative; align-self: center; height: auto; padding: var(--sp-1); font-size: var(--fs-md); font-weight: 400; }

/* Top bars */
.bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.bar__row { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + var(--safe-top)) var(--sp-5) 14px; }
.bar--list .bar__row { padding-bottom: 12px; }
.bar--first .bar__row { padding-bottom: 10px; }
.bar__title { font-size: var(--fs-title); font-weight: 600; }
.bar__hint { font-size: var(--fs-sm); color: var(--muted); }
.bar__chips { display: flex; padding: 0 var(--sp-5) 10px; }
.bar .btn { padding: 0 var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-base); }
.bar .btn .i { stroke-width: 2.2; }
.bar--back .bar__row { justify-content: flex-start; gap: var(--sp-2); padding: calc(8px + var(--safe-top)) var(--sp-3) 12px; }
.bar--back .bar__title { font-size: var(--fs-xl); }
.bar__back, .bar__back:hover { color: var(--ink); }
.bar__back { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md); }
.bar__back .i { width: 24px; height: 24px; }
/* The arrow alone above a plain screen's content: Провери имейла, Вход opened from the landing page, the legal pages. */
.screen__back { display: flex; margin: 0 -12px 12px; }
.screen--plain.screen--back { gap: 0; padding-top: calc(8px + var(--safe-top)); }
.screen__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.bar__titles { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bar__sub { font-size: var(--fs-sm); color: var(--muted); }
.bar .badge { padding: 5px 10px; }

.filters { display: flex; gap: var(--sp-2); padding: 8px var(--sp-5) 14px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.pill { position: relative; flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); color: var(--ink-2); font-size: var(--fs-md); white-space: nowrap; }
.pill.is-active { border-color: var(--accent); background: var(--accent); color: #FFFFFF; font-weight: 500; }

/* Bottom bars */
.tabbar { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px 8px calc(12px + var(--safe-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.tabbar__item, .tabbar__item:hover { color: var(--muted); }
.tabbar__item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: 6px 0; font-size: var(--fs-xs); }
.tabbar__item.is-active { color: var(--accent); font-weight: 600; }
.tabbar .i { width: 22px; height: 22px; }
.actions { position: sticky; bottom: 0; padding: 12px var(--sp-4) calc(12px + var(--safe-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.actions--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.actions--2 .btn { gap: 6px; font-size: var(--fs-base); font-weight: 600; }
.actions--2 .btn .i { width: 18px; height: 18px; }
/* A fair-use refusal under the bar's buttons (Spec, "Fair-use limits"). */
.actions__note { grid-column: 1 / -1; margin: 0; }

/* Buttons: 44px, the primary action of a screen 52px. */
.btn, .btn:hover { color: var(--ink); }
.btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: none; font-size: var(--fs-md); font-weight: 500; white-space: nowrap; }
.btn .i { width: 18px; height: 18px; }
.btn--primary, .btn--primary:hover { background: var(--accent); color: #FFFFFF; font-weight: 600; }
.btn--dark, .btn--dark:hover { background: var(--ink); color: #FFFFFF; font-weight: 600; }
.btn--success, .btn--success:hover { background: var(--green); color: #FFFFFF; font-weight: 600; }
.btn--outline { border: 1px solid var(--line-strong); background: var(--surface); }
.btn--accent, .btn--accent:hover { border: 1px solid var(--accent); color: var(--accent); font-weight: 600; }
.btn--danger, .btn--danger:hover { border: 1px solid var(--danger-line); background: var(--surface); color: var(--danger); }
.btn--danger-fill, .btn--danger-fill:hover { background: var(--danger); color: #FFFFFF; font-weight: 600; }
/* "Изтрий акаунта…" under Изход: quiet, so it is not tapped by accident; its tap area is 44px. */
.account-delete { display: flex; justify-content: center; padding: 2px 0 4px; }
.account-delete a, .account-delete a:hover { position: relative; padding: 6px 0; color: var(--muted); font-size: var(--fs-md); text-decoration: underline; text-underline-offset: 3px; }
.account-delete a::after { content: ""; position: absolute; top: -7px; right: 0; bottom: -7px; left: 0; }
.btn--sm { position: relative; height: 40px; padding: 0 14px; }
.btn--md { height: 48px; font-size: var(--fs-base); }
.btn--lg { height: 52px; gap: var(--sp-2); border-radius: var(--r-md); font-size: var(--fs-lg); }
.btn--lg .i { width: 20px; height: 20px; }
.btn--xl { height: 56px; gap: var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-lg); }
.btn--xl .i { width: 22px; height: 22px; }
/* Google allows its four-colour mark only on a white button. */
.btn--google, .btn--google:hover { color: var(--google-ink); font-weight: 600; }
.btn--text, .btn--text:hover { border-radius: var(--r-md); color: var(--ink-2); font-size: var(--fs-base); font-weight: 500; }
.btn--dashed, .btn--dashed:hover { border: 1px dashed var(--faint); color: var(--ink-2); font-size: var(--fs-base); font-weight: 500; }
.btn--dashed .i { width: 18px; height: 18px; stroke-width: 2.2; }
.btn--more, .btn--more:hover { border-radius: var(--r-md); color: var(--accent); font-size: var(--fs-base); font-weight: 600; }
.btn--keep { margin: 0 var(--sp-4) var(--sp-4); border-width: 1.5px; }
.btn--keep .i { width: 18px; height: 18px; }
.answer .btn { font-weight: 600; }
.answer .btn--outline { color: var(--ink-2); }

/* Smaller than 44px on the canvas: the tap area is widened without changing the look. */
.chip::after, .pill::after, .btn--sm::after, .opt::after, .check::after, .switch-row::after, a.kv::after, .link-strong::after, .link-quiet--sm::after, .link-under::after { content: ""; position: absolute; left: 0; right: 0; }
.chip::after { top: -7px; bottom: -7px; }
.pill::after { top: -5px; bottom: -5px; }
.btn--sm::after, .opt::after { top: -3px; bottom: -3px; }
.link-under::after { top: -2px; bottom: -2px; }
.check::after, a.kv::after, .link-strong::after { top: -13px; bottom: -13px; }
.switch-row::after { top: -1px; bottom: -3px; }
.link-quiet--sm::after { top: -9px; bottom: -9px; }
/* The × on a photo takes the photo's top right corner. */
.photo__remove::after { content: ""; position: absolute; top: -4px; right: -4px; width: 44px; height: 44px; }

/* Chips and badges */
.chip, .chip:hover { color: var(--sent-fg); }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--accent-soft); font-size: var(--fs-sm); font-weight: 500; }
.chip .i { width: 14px; height: 14px; stroke-width: 2.2; }
.chip--warning, .chip--warning:hover { background: var(--warn-bg); color: var(--warn-fg); }
.chip--limit, .chip--limit:hover { background: var(--declined-bg); color: var(--declined-fg); }
.badge { display: inline-block; flex: none; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.badge--sm { padding: 2px 8px; font-size: 11px; }
.badge--tag { padding: 3px 10px; }
.badge--draft { background: var(--draft-bg); color: var(--draft-fg); }
.badge--sent { background: var(--sent-bg); color: var(--sent-fg); }
.badge--accepted { background: var(--accepted-bg); color: var(--accepted-fg); }
.badge--declined { background: var(--declined-bg); color: var(--declined-fg); }

/* Cards and rows */
.card { display: flex; flex-direction: column; gap: 10px; padding: 14px var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.card--roomy { padding: var(--sp-4); }
.card--flush { gap: 0; padding: 0; overflow: hidden; }
.card--row { flex-direction: row; align-items: center; }
.card--text { display: block; color: var(--text); font-size: var(--fs-md); line-height: 1.5; }
.card--dashed { flex-direction: row; align-items: center; gap: var(--sp-3); border-style: dashed; border-color: var(--line-strong); color: var(--muted); font-size: var(--fs-md); line-height: 1.45; }
.card--dashed .i { width: 22px; height: 22px; }
.card--welcome { gap: 6px; padding: 18px var(--sp-4); }
.greeting { font-size: var(--fs-xl); font-weight: 600; }

.row, .row:hover { color: var(--ink); }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px var(--sp-4); border-bottom: 1px solid var(--hairline); }
.row:last-child { border-bottom: 0; }
.row--tall { padding: 14px var(--sp-4); font-size: var(--fs-lg); }
.row--tight { padding: 10px var(--sp-4); }
.row--linked { background: var(--accent-soft); }
.row--more, .row--more:hover { padding: 14px var(--sp-4); color: var(--accent); font-size: var(--fs-base); font-weight: 500; }
.row--danger, .row--danger:hover { padding: 14px var(--sp-4); color: var(--danger); font-size: var(--fs-base); }
button.row { width: 100%; border: 0; border-bottom: 1px solid var(--hairline); background: none; text-align: left; }
.row__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.row__title { font-size: var(--fs-base); }
.row__title--lg { font-size: var(--fs-lg); }
.row__meta { font-size: var(--fs-sm); color: var(--muted); }
.row__end { display: flex; align-items: center; gap: 10px; flex: none; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; }
.row__end--stack { flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.row .i { color: var(--muted); }
.copied { color: var(--green); font-weight: 500; }
.row-buttons { display: flex; gap: var(--sp-2); padding: 12px var(--sp-4); }
.row-buttons .btn { flex: 1; }
/* At the fair-use limit of lines (Spec, "Fair-use limits"): the buttons that add lines rest, and the line under them says why. */
.row-buttons .btn.is-disabled { opacity: .5; pointer-events: none; }
.lines-full { margin: 0; padding: 0 var(--sp-4) 12px; }
.kv, a.kv:hover { color: var(--ink); }
.kv { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-base); }
.kv__link { color: var(--accent); font-size: var(--fs-md); font-weight: 600; }

.note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }
.note .i { width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
.note a { text-decoration: underline; }
.note--plain { border: 0; background: var(--ground); }
.note--danger { margin: 14px var(--sp-5) 0; border-color: var(--danger-line); font-size: var(--fs-md); }
.note--danger .i { width: 20px; height: 20px; color: var(--danger); }
.inset { display: flex; flex-direction: column; gap: var(--sp-2); padding: 12px 14px; border-radius: var(--r-md); background: var(--ground); color: var(--text); font-size: var(--fs-md); }
.inset--roomy { padding: 14px var(--sp-4); }
.inset--row { flex-direction: row; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.inset--row .i { width: 18px; height: 18px; }
.inset--checks { gap: 10px; padding: 14px; }
.inset__row { display: flex; justify-content: space-between; }
.inset__row span:last-child { color: var(--ink); font-weight: 500; }
.tick { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.tick .i, .benefit .i { width: 18px; height: 18px; margin-top: 2px; color: var(--green); stroke-width: 2.5; }
.tick--no .i { color: var(--danger); }
/* Изтриване на акаунта: what is lost, in red. */
.inset--danger { gap: 10px; padding: 14px; background: var(--danger-soft); }
.confirm-word strong { color: var(--ink); font-weight: 600; }

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field__label { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.field__label--lg { font-size: var(--fs-md); color: var(--ink); }
.field__hint { font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-base); }
.input--code { height: 56px; padding: 0 var(--sp-4); border-radius: var(--r-md); font-size: 24px; letter-spacing: 0.25em; }
.input--lg { height: 48px; padding: 0 14px; border-radius: var(--r-md); font-size: var(--fs-lg); }
.input--xl { height: 56px; padding: 0 var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-lg); }
.input--narrow { width: 140px; }
.input--area { height: auto; padding: 10px 12px; resize: none; }
.check { position: relative; display: flex; align-items: center; gap: var(--sp-2); }
.check input { width: 18px; height: 18px; margin: 0; }
.switch-row { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-1); }
.switch-row input { flex: none; width: 22px; height: 22px; margin: 0; }
.opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* "Труд" and "Материал" stay on one line at 390px, as on the canvas, by reaching into the card's padding; narrower screens wrap. */
.opts--type { margin-right: -12px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font-size: var(--fs-md); }
.opt input:checked + span { border-color: var(--accent); background: var(--accent); color: #FFFFFF; font-weight: 500; }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--muted); }
.search .i { width: 18px; height: 18px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: var(--fs-base); }
/* "друга": any other unit, typed. */
.unit-other { display: none; width: 96px; height: 40px; padding: 0 10px; }
.units:has(input[value="друга"]:checked) .unit-other { display: block; }
.input--invalid, .field--invalid .opt span { border-color: var(--danger); }
/* A form that only groups fields: its children lay out as if it were not there. */
.contents { display: contents; }

/* Tiles, avatars, progress */
.tile { display: flex; align-items: center; justify-content: center; flex: none; }
.tile--logo { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--accent); color: #FFFFFF; }
.tile--logo .i, .tile--info .i { width: 26px; height: 26px; }
.tile--info { width: 56px; height: 56px; border-radius: 14px; background: var(--sent-bg); color: var(--sent-fg); }
.tile--warn { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn-fg); }
.tile--warn .i { width: 22px; height: 22px; }
.tile--ok { width: 64px; height: 64px; border-radius: 16px; background: var(--accepted-bg); color: var(--accepted-fg); }
.tile--ok .i { width: 30px; height: 30px; stroke-width: 2.2; }
.tile--lg { width: 56px; height: 56px; border-radius: var(--r-lg); }
.tile--lg .i { width: 26px; height: 26px; }
.avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--accent); color: #FFFFFF; font-size: 18px; font-weight: 600; }
.avatar--lg { width: 56px; height: 56px; border-radius: 14px; font-size: 20px; }
.avatar--logo { object-fit: contain; background: var(--surface); }
.avatar--sm { width: 36px; height: 36px; border-radius: 10px; font-size: var(--fs-sm); }
.progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress__bar { display: block; height: 100%; background: var(--green); }
.progress__bar--danger { background: var(--danger); }
.progress-row { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-2); }
.progress-row .progress { flex: 1; }

/* Intro */
.intro { padding: calc(12px + var(--safe-top)) var(--sp-6) calc(24px + var(--safe-bottom)); background: var(--surface); }
.intro__art { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0 20px; }
.intro__panel { display: flex; align-items: center; justify-content: center; width: 300px; max-width: 100%; height: 320px; border-radius: 24px; background: var(--ground); overflow: hidden; }
.intro__step { color: var(--accent); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; }
.intro__title { font-size: 22px; line-height: 1.25; font-weight: 600; }
.intro__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.intro__actions { display: flex; align-items: center; gap: var(--sp-2); }
.intro__actions .btn--text { padding: 0 18px; }
.intro__actions .btn--primary { padding: 0 28px; }
.dots { display: flex; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); }
.dot.is-active { width: 24px; background: var(--accent); }
.art { display: flex; flex-direction: column; gap: 10px; width: 240px; }
.art--templates { width: 250px; }
.art--templates .art__card { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); }
.art__card { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.art__card.is-picked { border-color: var(--accent); }
.art__card .i { width: 18px; height: 18px; color: var(--faint); stroke-width: 2.2; }
.art__card.is-picked .i { color: var(--accent); }
.art__text { display: flex; flex-direction: column; gap: 2px; }
.art__name { font-size: var(--fs-md); font-weight: 600; }
.art__meta { font-size: var(--fs-xs); color: var(--muted); }
.art__price { display: flex; align-items: center; gap: 6px; }
.art__price b { padding: 6px 10px; border: 1px solid var(--accent); border-radius: 8px; font-size: var(--fs-md); }
.art__stepper { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 600; }
.art__stepper i { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; font-style: normal; font-weight: 400; }
.art__stepper i:last-child { border: 0; background: var(--accent); color: #FFFFFF; }
.art__total { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent); color: #FFFFFF; font-size: var(--fs-base); font-weight: 600; }
.art__bubble { box-sizing: content-box; max-width: 210px; padding: 10px 14px; font-size: var(--fs-md); line-height: 1.4; }
.art__bubble--out { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: #7360F2; color: #FFFFFF; }
.art__bubble--in { align-self: flex-start; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--surface); }
.art__offer { justify-content: flex-start; gap: 10px; }

/* Offers */
.offer, .offer:hover { color: var(--ink); }
.offer { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.offer__client { font-size: 17px; font-weight: 600; }
.offer__meta { font-size: var(--fs-md); color: var(--text); }
.offer__total { font-size: 18px; font-weight: 600; }
.pick, .pick:hover { color: var(--ink); }
.pick { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 14px var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pick.is-suggested { border-color: var(--accent); }
button.pick { width: 100%; text-align: left; }
.pick .i { color: var(--muted); }
.step, .step:hover { color: var(--ink); }
.step { display: flex; align-items: center; gap: var(--sp-3); padding: 14px var(--sp-4); border-bottom: 1px solid var(--hairline); }
.step .i { color: var(--faint); }
.step__mark { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 16px; background: var(--line); color: var(--ink-2); font-size: var(--fs-md); font-weight: 600; }
.step__mark .i { width: 18px; height: 18px; color: inherit; stroke-width: 2.5; }
.step__title { font-size: var(--fs-base); font-weight: 600; }
.step.is-current { background: var(--accent-soft); }
.step.is-current .step__mark { background: var(--accent); color: #FFFFFF; }
.step.is-done .step__mark { background: var(--accepted-bg); color: var(--accepted-fg); }
.step.is-done .step__title { color: var(--muted); text-decoration: line-through; }
/* "Виж отново как работи" and "Скрий стъпките", under the first steps. */
.steps-links { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.steps-links__intro, .steps-links__hide { position: relative; padding: 4px 0; border: 0; background: none; font-size: var(--fs-md); }
.steps-links__intro, .steps-links__intro:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.steps-links__hide { color: var(--muted); }
.steps-links__intro::after, .steps-links__hide::after { content: ""; position: absolute; top: -9px; right: 0; bottom: -9px; left: 0; }

/* Offer editor */
/* A line of an editor: the whole row opens the line's sheet. */
.row--line, .row--line:hover { color: var(--ink); }
.row--line .row__end { gap: var(--sp-2); }
.row--line .i { width: 18px; height: 18px; color: var(--faint); }
/* A line's sheet: a field with its unit after it, and the line's total. */
.suffixed { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-md); }
.line-sum { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-md); background: var(--ground); color: var(--text); font-size: var(--fs-md); }
.line-sum strong { color: var(--ink); font-size: 18px; font-weight: 600; }
.totals { gap: var(--sp-2); }
.totals__line { display: flex; align-items: center; justify-content: space-between; color: var(--text); font-size: var(--fs-md); }
.totals__sum { display: flex; justify-content: space-between; padding-top: var(--sp-2); border-top: 1px solid var(--line); font-size: 18px; font-weight: 600; }
.amount { font-size: 22px; font-weight: 600; }
/* Photos: a row of thumbnails, a label on one still being processed, and a dashed tile to add one. */
.photos { display: flex; gap: 10px; padding-bottom: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.photo { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: var(--r-sm); background: var(--photo); overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__open { position: absolute; inset: 0; }
.photo__remove { position: absolute; top: var(--sp-1); right: var(--sp-1); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: var(--photo-scrim); color: #FFFFFF; font-size: var(--fs-sm); line-height: 1; }
.photo__state { position: relative; padding: 3px 7px; border-radius: var(--r-pill); background: var(--photo-scrim); color: #FFFFFF; font-size: 10px; font-weight: 500; white-space: nowrap; }
.photo--add { flex-direction: column; gap: var(--sp-1); border: 1px dashed var(--faint); background: var(--surface); color: var(--ink-2); font-size: var(--fs-xs); }

/* Bottom sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(23, 32, 42, 0.6); }
.sheet { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; max-width: 480px; max-height: 100dvh; padding: var(--sp-5) var(--sp-5) calc(16px + var(--safe-bottom)); border-radius: 20px 20px 0 0; background: var(--surface); overflow-y: auto; outline: 0; }
.sheet__grip { align-self: center; flex: none; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.sheet__head { display: flex; align-items: center; gap: var(--sp-3); }
.sheet__title { font-size: var(--fs-xl); line-height: 1.25; font-weight: 600; }
.sheet__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: 2px; }
.sheet__actions .btn { font-size: var(--fs-base); font-weight: 600; }
.sheet .btn--danger { gap: var(--sp-2); border-radius: var(--r-md); }
/* "От моите услуги: избор": the list runs edge to edge, the rest keeps the sheet's margin. */
.sheet--picker { gap: 14px; padding: var(--sp-5) 0 calc(12px + var(--safe-bottom)); }
.sheet__pad { margin: 0 var(--sp-5); }
.sheet__buttons { display: flex; flex-direction: column; gap: var(--sp-2); }
.picks { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pickrow { display: flex; align-items: center; gap: var(--sp-3); padding: 12px var(--sp-4); border-bottom: 1px solid var(--hairline); cursor: pointer; }
.pickrow:last-child { border-bottom: 0; }
.pickrow:has(input:checked) { background: var(--accent-soft); }
.pickrow input { position: absolute; opacity: 0; pointer-events: none; }
.pickrow__box { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 7px; color: #FFFFFF; }
.pickrow__box .i { display: none; width: 15px; height: 15px; stroke-width: 3; }
.pickrow input:checked + .pickrow__box { border: 0; background: var(--accent); }
.pickrow input:checked + .pickrow__box .i { display: block; }
.pickrow input:focus-visible + .pickrow__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.pickrow__price { font-size: var(--fs-base); font-weight: 600; white-space: nowrap; }
.search--filled { border: 0; background: var(--ground); }

/* Планове and Планът е активен */
.switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: var(--r-md); background: var(--line); }
.switch__option { position: relative; height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font-size: var(--fs-md); font-weight: 500; }
.switch__option::after { content: ""; position: absolute; top: -2px; right: 0; bottom: -2px; left: 0; }
.switch__option.is-on { background: var(--surface); color: var(--ink); font-weight: 600; }
.plan-card { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; }
.plan-card:has(input:checked) { border: 2px solid var(--accent); }
.plan-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.plan-card__name { display: flex; align-items: center; gap: var(--sp-3); }
.plan-card__name input { width: 20px; height: 20px; margin: 0; }
.plan-card__title { display: flex; align-items: center; gap: var(--sp-2); font-size: 18px; font-weight: 600; }
.plan-card__title .badge { padding: 3px 8px; font-size: 11px; }
.plan-card__price { display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; font-weight: 600; }
.plan-card__price small { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.plan-card__points { display: flex; flex-direction: column; gap: 6px; padding-left: 32px; }
.plan-card--current .plan-card__points { padding-left: 0; }
.plan-card__point { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-size: var(--fs-md); font-weight: 400; }
.plan-card__point .i { width: 16px; height: 16px; color: var(--green); stroke-width: 2.5; }
/* Планове before payments, once he has asked to hear when the plans start (artboard 2b). */
.joined { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; color: var(--ink); font-size: var(--fs-md); line-height: 1.45; overflow-wrap: anywhere; }
.joined .i { width: 22px; height: 22px; color: var(--green); stroke-width: 2.5; }
.tile--wait { width: 64px; height: 64px; border-radius: 16px; background: var(--ground); }
.tile--wait .spinner { width: 30px; height: 30px; border-width: 3px; border-top-color: var(--muted); }

/* Профил's plan card: one layout in every state; the bold line and the bar take the chip's colours. */
.plan-now__strip { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--declined-bg); color: var(--declined-fg); font-size: var(--fs-sm); line-height: 1.45; }
.plan-now__strip .i { width: 18px; height: 18px; margin-top: 1px; }
/* A failed request's strip (Spec, "Fair-use limits"): the failed payment's colours, held at the top under the bar. */
.failed-strip { position: sticky; top: 0; z-index: 20; display: flex; gap: 10px; padding: 10px var(--sp-4); background: var(--declined-bg); color: var(--declined-fg); font-size: var(--fs-sm); line-height: 1.45; }
.failed-strip[hidden] { display: none; }
.failed-strip .i { width: 18px; height: 18px; margin-top: 1px; }
.plan-now__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-now__name { display: flex; flex-direction: column; gap: 2px; }
.plan-now__left { font-size: var(--fs-lg); font-weight: 600; }
.plan-now__left--warning { color: var(--warn-fg); }
.plan-now__left--limit { color: var(--declined-fg); }
.progress__bar--normal { background: var(--accent); }
.progress__bar--warning { background: var(--warn); }
.progress__bar--limit { background: var(--danger); }
.plan-now__actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: 2px; }
.plan-now .btn { height: 46px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 600; }
.plan-now__link { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 0; font-size: var(--fs-md); font-weight: 500; }
.plan-now__link .i { width: 16px; height: 16px; }
/* 44px to tap: up to the button above, down to the card's edge. */
.plan-now__link::after { content: ""; position: absolute; top: -8px; right: 0; bottom: -14px; left: 0; }
.badge--plan { background: var(--accent-soft); color: var(--sent-fg); }
.badge--stopped { background: var(--stopped-bg); color: var(--ink-2); }

/* Покани колега, and its card on Профил */
.invite-card, .invite-card:hover { color: var(--ink); }
.invite-card { display: flex; align-items: center; gap: var(--sp-3); padding: 14px var(--sp-4); border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--accent-tint); }
.invite-card .tile { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent); color: #FFFFFF; }
.invite-card > .i { color: var(--muted); }
.invite-how { gap: 14px; padding: 18px var(--sp-4); }
.invite-how__step { display: flex; align-items: flex-start; gap: var(--sp-3); }
.invite-how__mark { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 14px; background: var(--line); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 700; }
.invite-how__step.is-key .invite-how__mark { background: var(--accent); color: #FFFFFF; }
.invite-how__title { font-size: var(--fs-base); font-weight: 600; }
.invite-how__text { color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }
.invite-link { display: flex; align-items: center; gap: var(--sp-2); }
.invite-link__box { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: var(--r-md); background: var(--ground); font-size: var(--fs-base); font-weight: 500; line-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invite-link__copy { height: 48px; padding: 0 var(--sp-4); border-radius: var(--r-md); color: var(--ink); font-weight: 600; }
.invite-message { padding: 10px 12px; border-radius: var(--r-sm); background: var(--ground); color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }
.invite-counts__head { padding: 12px var(--sp-4); border-bottom: 1px solid var(--hairline); }
.invite-counts__row { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--sp-4); border-bottom: 1px solid var(--hairline); }
.invite-counts__row:last-child { border-bottom: 0; }
.invite-counts__row .row__main { gap: 1px; }
.invite-counts__n { font-size: var(--fs-base); font-weight: 600; }
.invite-counts__n--won { color: var(--green); }

/* The client's page: the line Про takes away. */
.made-with { padding: 2px 0; color: var(--faint); font-size: var(--fs-xs); text-align: center; }
.made-with a, .made-with a:hover { position: relative; color: var(--muted); font-weight: 500; }
.made-with a::after { content: ""; position: absolute; top: -15px; right: 0; bottom: -15px; left: 0; }

/* Подготвяме PDF-а: the client's page's PDF while the worker makes it. */
.preparing { position: relative; gap: 18px; text-align: center; }
.preparing .headline { margin-top: 6px; font-size: 24px; }
.preparing .lead { line-height: 1.55; }
.preparing .btn { margin-top: 6px; padding: 0 24px; border-radius: var(--r-md); font-weight: 600; }
.spinner { width: 56px; height: 56px; border: 4px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Поверителност and Условия: plain text. */
.legal { gap: var(--sp-3); padding: calc(8px + var(--safe-top)) var(--sp-5) 40px; background: var(--surface); font-size: var(--fs-base); line-height: 1.55; color: var(--text); }
.legal h2 { margin: var(--sp-3) 0 0; color: var(--ink); font-size: 17px; font-weight: 600; }
.legal p { margin: 0; }
.legal ul { margin: 0; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal .screen__back { margin-bottom: 0; }
.hint { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }

/* The client's page */
.offer-page .content { padding-top: 40px; padding-bottom: var(--sp-4); }
/* "Преглед като клиент": only on the craftsman's own offer, with the way back to Детайли и версии. The client never gets it. */
.as-client { display: flex; align-items: center; gap: var(--sp-2); padding: calc(2px + var(--safe-top)) var(--sp-3) 0; font-size: var(--fs-sm); color: var(--muted); }
.offer-page .as-client + .content { padding-top: 14px; }
.preparing .as-client { position: absolute; top: 0; left: 0; }
.offer-head h1 { font-size: 22px; font-weight: 600; }
.offer-head__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); padding-top: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.lines { width: 100%; border-spacing: 0; }
.lines td { padding: 12px var(--sp-4); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.lines small { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); }
.lines .num { padding-left: 0; font-weight: 500; text-align: right; white-space: nowrap; }
.sums { display: flex; flex-direction: column; gap: 6px; padding: 12px var(--sp-4); background: var(--surface-2); }
.sums .totals__sum { padding-top: 6px; font-size: var(--fs-xl); }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--photo); object-fit: cover; }

/* Снимка на цял екран (canvas version 85): hidden until the address ends in its #snimka-N. */
.viewer { display: none; position: fixed; inset: 0; z-index: 50; background: var(--viewer); color: #FFFFFF; }
.viewer:target { display: block; }
.viewer__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.viewer__bar { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: center; padding: calc(var(--safe-top) + 4px) 8px 8px 20px; background: linear-gradient(180deg, var(--viewer-shade) 0%, transparent 100%); }
.viewer__count { font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.9); }
.viewer__btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 24px; color: #FFFFFF; }
.viewer__btn .i { width: 26px; height: 26px; stroke-width: 2.4; }
.viewer__close { margin-left: auto; }
.viewer__close .i { stroke-width: 2.2; }
.viewer__prev, .viewer__next { position: absolute; top: calc(50% - 24px); background: var(--viewer-button); }
.viewer__prev { left: 8px; }
.viewer__next { right: 8px; }
.viewer__hint { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding: 16px 20px calc(var(--safe-bottom) + 18px); text-align: center; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.6); background: linear-gradient(0deg, var(--viewer-shade) 0%, transparent 100%); }

/* Small adjustments, last so they win over the components above. */
.gap-4 { gap: var(--sp-1); }
.gap-6 { gap: 6px; }
.gap-8 { gap: var(--sp-2); }
.gap-12 { gap: var(--sp-3); }
.gap-14 { gap: 14px; }
.gap-16 { gap: var(--sp-4); }
.gap-18 { gap: 18px; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-1); }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: var(--sp-2); }
.t-12 { font-size: var(--fs-xs); }
.t-13 { font-size: var(--fs-sm); }
.t-14 { font-size: var(--fs-md); }
.t-15 { font-size: var(--fs-base); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.muted { color: var(--muted); }
.text { color: var(--text); }
.text-danger { color: var(--danger); }
.lh { line-height: 1.5; }
.lh-tight { line-height: 1.45; }
.lh-normal { line-height: normal; }
.lh-loose { line-height: 1.55; }
.w-full { width: 100%; }
.center { text-align: center; }
.self-start { align-self: flex-start; }
[x-cloak] { display: none !important; }
.link-button { margin: 0 auto; border: 0; background: none; }