/* BB VPN — shared look for every page of the site.
   One header, one footer, one set of buttons, cards, form fields and messages, so
   the site reads as one product. Pages keep only their own layout rules and take
   every colour, radius and face from the variables below - never a literal hex.
   No framework, no animation library, no web font beyond /assets/fonts.css. */

:root {
  color-scheme: dark;              /* native checkbox, range and scrollbars draw dark */

  /* ── palette: the BrawlBoost colours (the app's lib/theme/brawl_theme.dart) ── */
  --navy: #0A0E2A;
  --navy-2: #131836;
  --navy-3: #1B2148;
  --gold: #FFC907;
  --gold-hi: #FFD84A;
  --cyan: #00E0FF;
  --pink: #FF3A8A;
  --red: #E61E50;
  --green: #37D67A;
  --text: #E8ECFF;
  --muted: #9AA3C7;

  /* ── roles: what pages use ───────────────────────────────────────────────── */
  --ground: var(--navy);           /* the page */
  --surface: var(--navy-2);        /* cards, steps, questions */
  --surface-raised: var(--navy-3); /* fields, result boxes inside cards */
  --accent: var(--gold);           /* headings, prices, key figures, keyboard focus */
  --accent-hover: var(--gold-hi);
  --on-accent: var(--navy);        /* text on gold: 12.3:1 */
  --link: var(--cyan);             /* links, secondary buttons, card titles */
  --cta-from: var(--pink);         /* the primary action: pink to crimson */
  --cta-to: var(--red);
  --on-cta: #FFFFFF;
  --text-muted: var(--muted);      /* 7.6:1 on the ground, 6.9:1 on a card */
  --line: rgba(154, 163, 199, 0.18);       /* separators, card edges: decoration only */
  --field-line: rgba(154, 163, 199, 0.62); /* the edge of anything you type in or pick:
                                              at least 3:1 on the ground, a card and a field */
  --success: var(--green);
  --success-line: rgba(55, 214, 122, 0.7);
  --success-tint: rgba(55, 214, 122, 0.10);
  --danger: var(--pink);           /* error text and icons: 5.6:1 on the ground */
  --danger-line: rgba(255, 58, 138, 0.75);
  --danger-tint: rgba(230, 30, 80, 0.14);
  --info: var(--cyan);
  --info-line: rgba(0, 224, 255, 0.6);
  --info-tint: rgba(0, 224, 255, 0.08);

  /* ── type ─────────────────────────────────────────────────────────────────── */
  --font-display: 'BB Display', system-ui, sans-serif;
  /* 'BB Text' draws Latin, 'BB Text Cyrillic' draws Russian: two families, so that
     bold Russian can be drawn heavier than the same CSS weight (see fonts.css). */
  --font-text: 'BB Text', 'BB Text Cyrillic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Codes, hashes and commands people read character by character: I/l and O/0
     must differ. The system's own monospace, never a download. */
  --font-code: ui-monospace, 'Cascadia Mono', Consolas, 'Roboto Mono', 'Droid Sans Mono', monospace;
  /* Text sizes are in rem: the same pixels at the browser's default 16px, and they
     grow when a visitor sets a larger default text size. Widths and breakpoints
     stay in px. */
  --fs-body: 1.0625rem;            /* 17px */
  --fs-lead: 1.1875rem;            /* 19px */
  --fs-small: 0.90625rem;          /* 14.5px */
  --fs-amount: 1.875rem;           /* 30px: prices and money figures, in the display face */

  /* ── shape, depth, layout ────────────────────────────────────────────────── */
  --radius: 18px;                  /* cards */
  --radius-sm: 12px;               /* fields, messages, questions */
  --pill: 999px;                   /* buttons, badges */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-cta: 0 6px 16px rgba(255, 58, 138, 0.22);
  --wrap: 1040px;
  --measure: 760px;                /* the longest comfortable line of text */
  --gutter: 20px;

  accent-color: var(--accent);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The browser hides [hidden] with its own stylesheet, which ANY author rule with a
   display value beats: a hidden .bb-btn (inline-flex) or a row inside a flex list
   stayed on screen. Pages toggle `hidden` meaning gone, so make it mean gone. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body {
  min-height: 100vh;
  display: flex;                   /* .bb-main grows, so a short page keeps its footer at the bottom */
  flex-direction: column;
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: break-word;       /* a long address or @handle breaks instead of pushing the page sideways at a large text size */
  /* One backdrop for the whole site: a soft pink glow top left, cyan bottom right.
     Fixed sizes, not a share of the page: a short page and a long one get the same
     glow at the top and at the bottom. */
  background:
    radial-gradient(1100px 800px at 18% 0, rgba(255, 58, 138, 0.10), transparent),
    radial-gradient(1100px 800px at 85% 100%, rgba(0, 224, 255, 0.07), transparent),
    var(--ground);
}
img { max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
code, kbd, pre, samp { font-family: var(--font-code); }
input[type="checkbox"], input[type="radio"] { flex: none; width: 20px; height: 20px; accent-color: var(--accent); }

/* Links inside text are underlined: colour alone is not a cue (cyan on muted text
   is only 1.55:1). Menus, buttons and the brand opt out below. */
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* The outline follows the element's own corners; no radius is forced here, or a
   pill button would turn into a rectangle while it has focus. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bb-skip { position: absolute; left: -9999px; }
.bb-skip:focus { left: 16px; top: 12px; display: inline-flex; align-items: center; min-height: 44px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; z-index: 10; border-radius: var(--radius-sm); }
.bb-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── header ─────────────────────────────────────────────────────────────── */
.bb-header {
  border-bottom: 1px solid var(--line);
  background: rgba(10, 14, 42, 0.88);
}
.bb-header-inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  flex-wrap: wrap;
}
.bb-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.5px;
}
.bb-brand picture { display: inline-flex; }
.bb-brand img { width: 50px; height: auto; }
.bb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.bb-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.96875rem;
  line-height: 1.2;                /* 44px tall at 16px either way; at a larger text size the pill does not grow into the menu row */
  padding: 8px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
}
.bb-nav a:hover { color: var(--accent); }
/* The current section: gold AND a bar under it, so it is not told by colour alone. */
.bb-nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); border-radius: 0; }
.bb-nav a.bb-nav-account {
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 700;
  border-radius: var(--pill);
  padding: 8px 16px;
  margin-left: 6px;
}
.bb-nav a.bb-nav-account:hover { background: var(--accent-hover); color: var(--on-accent); }
.bb-nav a.bb-nav-account[aria-current="page"] { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--accent); }

/* ── layout ─────────────────────────────────────────────────────────────── */
.bb-main { flex: 1; width: 100%; }
.bb-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* A narrow section keeps the SAME left edge as everything else on the page and
   only limits how long its lines get; centring it made headings jump sideways
   between sections. */
.bb-narrow { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.bb-narrow > * { max-width: var(--measure); }
/* padding-block, not the shorthand: a section is usually also .bb-wrap or
   .bb-narrow, and "padding: 48px 0" would zero their side gutter. */
.bb-section { padding-block: 56px; }
.bb-section + .bb-section { padding-top: 8px; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.5px; line-height: 1.15; font-weight: 400; text-wrap: balance; }
h1 { color: var(--accent); font-size: clamp(2rem, 6.4vw, 3.25rem); }
h2 { color: var(--accent); font-size: clamp(1.5625rem, 4.4vw, 2rem); margin-bottom: 16px; }
h3 { color: var(--link); font-size: 1.3125rem; }
p { margin-bottom: 12px; }
.bb-lead { font-size: var(--fs-lead); max-width: 640px; }
h1 + .bb-lead { margin-top: 12px; }
.bb-muted { color: var(--text-muted); }
.bb-small { font-size: var(--fs-small); }
.bb-num { font-variant-numeric: tabular-nums; }

/* ── buttons ────────────────────────────────────────────────────────────── */
/* Labels are 20px bold. White on the pink-to-crimson gradient measures 3.5-4.3:1
   under the text; at this size and weight WCAG counts it as large text (3:1), so
   the brand gradient stays exactly as it is and still reads. */
.bb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 26px;
  border-radius: var(--pill);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  background: transparent;
}
.bb-btn-primary { color: var(--on-cta); background: linear-gradient(135deg, var(--cta-from), var(--cta-to)); box-shadow: var(--shadow-cta); }
.bb-btn-ghost { color: var(--link); border-color: var(--link); }
.bb-btn:hover { filter: brightness(1.06); }
/* A smaller secondary button (sign out, copy). Cyan on navy is 11.8:1, so it may be
   small; a primary button may not. */
.bb-btn-ghost.bb-btn-compact { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
/* Unavailable: flat, dashed and muted - not a faded gradient that looks pressable.
   Pages also say next to it what is missing. */
.bb-btn:disabled, .bb-btn[aria-disabled="true"] {
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 2px dashed var(--field-line);
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}
/* A button that looks like a link (resend a code, change the address). */
.bb-linkish { background: none; border: 0; color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; padding: 0 2px; }
.bb-linkish:disabled { color: var(--text-muted); text-decoration: none; cursor: default; }

/* ── cards ──────────────────────────────────────────────────────────────── */
/* Column minimums in rem (280px and 220px at 16px), never wider than the container:
   a larger text size gets fewer, wider columns instead of words spilling out. */
.bb-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.bb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.bb-card.featured { border-color: rgba(255, 201, 7, 0.5); }
/* A card's title is cyan and card-sized whether the page's outline makes it an h2
   or an h3; section headings stay gold. */
.bb-card > h2, .bb-card > h3 { color: var(--link); font-size: 1.375rem; margin-bottom: 8px; }
/* A card title with a badge beside it; the badge wraps under a long title. */
.bb-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.bb-card-head > h2, .bb-card-head > h3 { color: var(--link); font-size: 1.375rem; margin: 0; }
.bb-badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 12px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  vertical-align: middle;
}
.bb-badge.is-on { background: var(--success); color: var(--on-accent); }
.bb-badge.is-off { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--field-line); }
.bb-price { font-size: 1.125rem; line-height: 1.3; margin: 12px 0 4px; }
.bb-price + .bb-price { margin-top: 0; }
.bb-price strong { color: var(--accent); font-family: var(--font-display); font-size: var(--fs-amount); font-weight: 400; }
/* "каждые 28 дней" moves to the next line whole, never "дней" alone. */
.bb-price .period { white-space: nowrap; }
.bb-list { padding-left: 22px; margin: 12px 0; }
.bb-list li { margin-bottom: 6px; }
.bb-list li::marker { color: var(--text-muted); }

/* ── messages ───────────────────────────────────────────────────────────── */
/* One component for every status line on the site. The kind shows three ways:
   the icon's shape (check, exclamation, clock, i), its colour, and the words.
   The container gets role="status" (or role="alert" for errors) in the page. */
.bb-alert {
  position: relative;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-line);
  background: rgba(154, 163, 199, 0.08);
  color: var(--text);
}
.bb-alert.is-ok, .bb-alert.is-err, .bb-alert.is-wait, .bb-alert.is-info { padding-left: 48px; }
.bb-alert.is-ok { border-color: var(--success-line); background: var(--success-tint); --alert-icon: var(--success); }
.bb-alert.is-err { border-color: var(--danger-line); background: var(--danger-tint); --alert-icon: var(--danger); }
.bb-alert.is-wait { border-color: var(--info-line); background: var(--info-tint); --alert-icon: var(--info); }
.bb-alert.is-info { border-color: var(--info-line); background: var(--info-tint); --alert-icon: var(--info); }
.bb-alert.is-ok::before, .bb-alert.is-err::before, .bb-alert.is-wait::before, .bb-alert.is-info::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 14px;
  width: 22px;
  height: 22px;
  background: var(--alert-icon);
  -webkit-mask: var(--alert-shape) center / contain no-repeat;
  mask: var(--alert-shape) center / contain no-repeat;
}
.bb-alert.is-ok { --alert-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21zM10.4 16.6 5.9 12.1l1.6-1.6 2.9 2.9 6.1-6.1 1.6 1.6z'/%3E%3C/svg%3E"); }
.bb-alert.is-err { --alert-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21zM10.8 6h2.4v8h-2.4zm0 10h2.4v2.4h-2.4z'/%3E%3C/svg%3E"); }
.bb-alert.is-wait { --alert-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21zm0 2.3a8.2 8.2 0 1 1 0 16.4 8.2 8.2 0 0 1 0-16.4zM10.9 6.5v6.2l4.9 2.9 1.1-1.9-3.8-2.2v-5z'/%3E%3C/svg%3E"); }
.bb-alert.is-info { --alert-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21zM10.8 10h2.4v8h-2.4zm0-4h2.4v2.4h-2.4z'/%3E%3C/svg%3E"); }
.bb-alert > :last-child { margin-bottom: 0; }
.bb-alert .bb-actions { margin-top: 12px; }

/* ── forms ──────────────────────────────────────────────────────────────── */
.bb-field { display: grid; gap: 6px; margin-top: 14px; }
.bb-field > label, .bb-label { font-weight: 700; }
.bb-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-line);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 1.125rem;
}
.bb-input::placeholder { color: var(--text-muted); opacity: 1; }
.bb-input:hover { border-color: rgba(154, 163, 199, 0.85); }
.bb-input[aria-invalid="true"] { border: 2px solid var(--danger); padding: 9px 13px; }
.bb-input.is-code { letter-spacing: 6px; font-size: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.bb-hint { color: var(--text-muted); font-size: var(--fs-small); }
/* Inside a field the grid gap already spaces the hint; a <p> keeps no margin of its own. */
.bb-field .bb-hint { margin: 0; }
.bb-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.bb-check input { margin-top: 3px; }

/* A row of choices drawn as pills. Chosen = a thick gold edge, bolder text and the
   native radio dot, so the choice is visible without colour. */
.bb-seg { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.bb-seg legend { font-weight: 700; margin-bottom: 8px; }
.bb-seg label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-line);
  background: var(--surface-raised);
  cursor: pointer;
  font-weight: 600;
}
.bb-seg label:has(input:checked) { border: 2px solid var(--accent); padding: 9px 15px; background: rgba(255, 201, 7, 0.08); font-weight: 800; }
.bb-seg input { margin: 0; }

/* Label / value rows. */
.bb-kv { display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bb-kv dt { color: var(--text-muted); }
.bb-kv dd { font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* ── steps, questions ───────────────────────────────────────────────────── */
.bb-steps { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr)); counter-reset: step; }
.bb-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 18px 60px; position: relative; counter-increment: step; }
.bb-steps li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb-faq details, details.bb-details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; }
.bb-faq summary, .bb-details > summary { cursor: pointer; padding: 12px 18px; font-weight: 700; min-height: 48px; display: flex; align-items: center; gap: 10px; list-style: none; overflow-wrap: anywhere; }
.bb-faq summary::-webkit-details-marker, .bb-details > summary::-webkit-details-marker { display: none; }
/* A chevron that turns when open: the open/closed state has a shape, not just a colour. */
.bb-faq summary::before, .bb-details > summary::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
  margin: 0 4px 0 2px;
}
.bb-faq details[open] > summary::before, details.bb-details[open] > summary::before { transform: rotate(45deg); }
.bb-faq details > div, .bb-details > div { padding: 0 18px 16px; color: var(--text); }

/* ── documents: terms, refund, privacy, help ────────────────────────────── */
.bb-doc > h1 { margin-bottom: 16px; }
.bb-doc-meta { margin-bottom: 4px; }
.bb-doc hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0 8px; }
.bb-doc h2 { margin: 36px 0 12px; }
.bb-doc h3 { margin: 22px 0 8px; }
.bb-doc ul, .bb-doc ol { padding-left: 22px; margin: 0 0 14px; }
.bb-doc li { margin-bottom: 6px; }
.bb-doc li::marker { color: var(--text-muted); }
.bb-table-wrap { overflow-x: auto; margin: 12px 0 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.bb-table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.bb-table th, .bb-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
/* The head row is set off from the body; only the last BODY row drops its line
   (tr:last-child alone also matched the single row of <thead>). */
.bb-table thead th { border-bottom: 1px solid var(--field-line); }
.bb-table tbody tr:last-child > * { border-bottom: 0; }
.bb-table th { color: var(--text-muted); font-weight: 700; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.bb-footer { border-top: 1px solid var(--line); margin-top: 48px; }
.bb-footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 20px var(--gutter) 32px; color: var(--text-muted); font-size: var(--fs-small); }
.bb-footer nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 8px; }
.bb-footer nav a { color: var(--link); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.bb-footer nav a:hover { text-decoration: underline; }

/* The header in one row needs 743px with "Личный кабинет" in the pill.
   From 760px down: brand and the gold account pill share the first row, the four
   sections sit on the second. Two short rows, never three. */
@media (max-width: 760px) {
  .bb-header-inner { padding: 6px var(--gutter) 2px; gap: 0; }
  .bb-brand { font-size: 1.25rem; }
  .bb-brand img { width: 44px; }
  /* grouped under the brand; the links' own padding hangs outside the text edge */
  .bb-nav { flex-basis: 100%; margin-left: -10px; gap: 0; }
  .bb-nav a { padding: 8px 10px; font-size: 0.9375rem; }
  .bb-nav a.bb-nav-account { position: absolute; top: 6px; right: var(--gutter); margin: 0; padding: 8px 14px; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  /* a phone: the four sections spread across the whole row */
  .bb-nav { margin-left: 0; justify-content: space-between; }
  .bb-nav a { padding: 8px 6px; }
  .bb-section { padding-block: 36px; }
  .bb-btn { width: 100%; }
  /* a small secondary action (sign out, copy) stays its own size under a full-width one */
  .bb-btn.bb-btn-compact { width: auto; }
  .bb-footer nav { gap: 0 14px; }
}
@media (max-width: 360px) {
  .bb-card { padding: 18px 16px; }
}
/* The four sections need 318px at 15px, so they fit one row from 350px wide. Below
   360px they get 14px, which keeps them on one row down to 320px (from 341 to 344px
   "Помощь" used to wrap onto a third row). */
@media (max-width: 359px) {
  .bb-brand span { font-size: 1.125rem; }
  .bb-brand img { width: 38px; }
  .bb-nav a { padding: 8px 4px; font-size: 0.875rem; }
  .bb-nav a.bb-nav-account { padding: 8px 10px; font-size: 0.875rem; }
}
/* A larger default text size on a narrow screen: the pill no longer fits beside the
   brand, so it takes its place in the menu rows instead of covering the brand.
   19.9em is 318px at the default 16px, so at 16px this never applies. */
@media (max-width: 19.9em) {
  .bb-nav a.bb-nav-account { position: static; margin-left: auto; }
}

/* Windows High Contrast and other forced colours drop backgrounds and shadows.
   Every cue that was drawn with them keeps a shape: the message icon, the bar
   under the current section, the pill's edge, the badge's edge. */
@media (forced-colors: active) {
  .bb-alert.is-ok::before, .bb-alert.is-err::before, .bb-alert.is-wait::before, .bb-alert.is-info::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .bb-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .bb-nav a.bb-nav-account { border: 2px solid LinkText; }
  .bb-badge { border: 1px solid CanvasText; }
  .bb-steps li::before { border: 2px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}