/* Self-service: signup (signup.js, /o/register), «Оплата и тариф» (billing.js, #billing) and the shell's subscription
   banner + trial chip (app.js). Same language as owner.css / wizard.css: white cards on #f5f5f7, Inter Tight headlines,
   black / white / grey, the logo red only for progress, «live» dots and what needs attention.
   Prefixes: .su- (signup), .bl- (billing tab), .ow-billbar / .ow-trial / .ow-login-new (shell). */

/* ---------- login: the second action and the support line ---------- */
.ow-login-new {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px 14px 18px; min-height: 56px; border-radius: 16px;
  background: #f2f2f4; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.35; transition: background .2s, transform .15s;
}
.ow-login-new:hover { background: #e8e8ed; }
.ow-login-new:active { transform: scale(.985); }
.ow-login-new > span { flex: 1; min-width: 0; }
.ow-login-new b { font-weight: 700; }
.ow-login-new small { font-size: 15px; color: var(--ink-3); }
.ow-login-new svg { flex: none; color: var(--ink); }
.ow-login-help a, .su-help a, .su-alt a, .ow-login-err a, .su-card .bxf-msg a, .su-err a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .25); }
.ow-login-err a { color: inherit; border-bottom-color: currentColor; }
.ow-login-help, .su-help { line-height: 1.5; }
.ow-login-card .ow-lf .ow-lf-pw { margin: 0; } /* the password box is as wide as the field above it */

/* ---------- signup ---------- */
.su-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.su-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #1d1d1f; }
.su-steps i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; font: 800 16px/1 var(--display); font-style: normal; color: #fff; box-shadow: inset 0 0 0 1.3px #48484a; }
.su-steps li:first-child i { background: var(--ow-red); box-shadow: none; }
.su-steps span { display: grid; gap: 2px; min-width: 0; }
.su-steps b { font-size: 15.5px; color: #fff; }
.su-steps small { font-size: 13.5px; color: #a1a1a6; }
.ow-login.su .ow-login-side { grid-template-columns: minmax(0, 400px); justify-content: center; } /* the column never grows past the screen */
.su-card { padding: 8px 0; min-width: 0; }
.su-offer { position: relative; padding-left: 16px; }
.su-offer::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--ow-red); }
.su-card .ow-lf span em { font-style: normal; font-weight: 500; opacity: .85; margin-left: 6px; }
.su-err { display: block; margin: 8px 4px 0; font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--ow-red); }
.su-err:empty { display: none; }
.ow-login-card .ow-lf.bad input { border-color: var(--ow-red); box-shadow: 0 0 0 4px rgba(227, 38, 43, .12); }
/* the shared phone field, sized like the other fields of the form */
.su-phone .bxf { margin: 0 0 14px; }
.su-phone .bxf-box { height: 56px; }
.su-phone .bxf-pre, .su-phone .bxf-box input { font-size: 19px; }
.su-phone .bxf-msg { min-height: 0; margin-top: 7px; }
.su-consent {
  position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 2px; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #d2d2d7; font-size: 14px; line-height: 1.45; color: var(--ink-2); transition: box-shadow .2s;
}
.su-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.su-box { width: 22px; height: 22px; border-radius: 7px; flex: none; margin-top: 0; display: grid; place-items: center; color: transparent; box-shadow: inset 0 0 0 1.5px #c7c7cc; background: #fff; transition: background .2s, box-shadow .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.su-consent input:checked + .su-box { background: var(--ink); box-shadow: none; color: #fff; transform: scale(1.04); }
.su-consent input:focus-visible + .su-box { outline: 3px solid rgba(29, 29, 31, .6); outline-offset: 2px; }
.su-consent a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .25); }
.su-consent.bad { box-shadow: inset 0 0 0 2px var(--ow-red); }
.su-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.su-alt { margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--ink-3); }
.su-card .ow-login-err:empty { min-height: 12px; margin-bottom: 4px; }
.su-card .ow-login-err:not(:empty) { margin-top: 12px; }

/* ---------- top bar: trial chip ---------- */
.ow-trial {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(0, 0, 0, .055);
  color: var(--ink-2); font: 600 12.5px/1 var(--font); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s;
}
.ow-trial::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ow-red); }
.ow-trial:hover { background: rgba(0, 0, 0, .09); color: var(--ink); }
.ow-trial[hidden] { display: none; }

/* ---------- the slim banner under the top bar ---------- */
.ow-billbar[hidden] { display: none; }
.ow-billbar { border-bottom: 1px solid rgba(0, 0, 0, .06); animation: ow-bill-in .3s var(--ow-ease); }
@keyframes ow-bill-in { from { opacity: 0; } }
.ow-billbar-in { max-width: var(--ow-max); margin: 0 auto; padding: 8px var(--ow-pad); min-height: 50px; display: flex; align-items: center; gap: 12px; }
.ow-billbar p { margin: 0; flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; font-weight: 500; }
.ow-billbar .s { display: none; }
.ow-billbar-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); }
.ow-billbar-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 14px; border-radius: 999px; flex: none;
  background: var(--ink); color: #fff; font: 600 13.5px/1 var(--font); text-decoration: none; white-space: nowrap; transition: background .2s, transform .15s;
}
.ow-billbar-btn:hover { background: #333336; }
.ow-billbar-btn:active { transform: scale(.97); }
.ow-billbar-btn svg { width: 15px; height: 15px; }
.ow-billbar.t-neutral { background: #ebebef; color: var(--ink); }
.ow-billbar.t-neutral .ow-billbar-dot { background: var(--ow-red); }
.ow-billbar.t-info { background: #fff; color: var(--ink); }
.ow-billbar.t-info .ow-billbar-dot { background: var(--ink); animation: bl-pulse 1.8s infinite; }
.ow-billbar.t-info .ow-billbar-btn { background: var(--ow-fill); color: var(--ink); }
.ow-billbar.t-info .ow-billbar-btn:hover { background: #dedee3; }
.ow-billbar.t-warn { background: #fde9e9; color: #4a0d0f; border-bottom-color: rgba(227, 38, 43, .18); }
.ow-billbar.t-warn .ow-billbar-dot { background: var(--ow-red); animation: bl-pulse-r 1.8s infinite; }
.ow-billbar.t-strong { background: #1d1d1f; color: #fff; border-bottom-color: #000; }
.ow-billbar.t-strong p { font-weight: 600; }
.ow-billbar.t-strong .ow-billbar-dot { background: var(--ow-red); animation: bl-pulse-r 1.8s infinite; }
.ow-billbar.t-strong .ow-billbar-btn { background: #fff; color: var(--ink); }
.ow-billbar.t-strong .ow-billbar-btn:hover { background: #e8e8ed; }
@keyframes bl-pulse { 0% { box-shadow: 0 0 0 0 rgba(29, 29, 31, .45); } 70% { box-shadow: 0 0 0 8px rgba(29, 29, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 29, 31, 0); } }
@keyframes bl-pulse-r { 0% { box-shadow: 0 0 0 0 rgba(227, 38, 43, .55); } 70% { box-shadow: 0 0 0 8px rgba(227, 38, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 38, 43, 0); } }

/* ---------- «Оплата и тариф» ---------- */
.ow-tab-billing .bl { max-width: 1120px; margin: 0 auto; display: grid; gap: var(--ow-gap); }
.bl > * { min-width: 0; }
.bl-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 2px 2px 4px; }
.bl-head h2 { margin: 0; font: 800 34px/1.05 var(--display); letter-spacing: -.035em; }
.bl-skel { display: grid; gap: var(--ow-gap); }
.bl-skel i { display: block; height: 150px; border-radius: 24px; background: linear-gradient(90deg, #ececf0 0%, #f6f6f8 50%, #ececf0 100%); background-size: 200% 100%; animation: bl-shimmer 1.4s infinite linear; }
.bl-skel i:nth-child(2) { height: 360px; }
.bl-skel i:nth-child(3) { height: 120px; }
@keyframes bl-shimmer { to { background-position: -200% 0; } }
.bl-fail { display: grid; justify-items: center; gap: 4px; }
.bl-fail p { margin: 0 0 12px; }

/* status card */
.bl-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 26px 30px; border-radius: 24px; transition: background .3s, color .3s; }
.bl-status-t { min-width: 0; }
.bl-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font: 700 12.5px/1 var(--font); }
.bl-status h3 { margin: 12px 0 8px; font: 800 28px/1.14 var(--display); letter-spacing: -.03em; max-width: 30em; text-wrap: balance; }
.bl-status p { margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.45; max-width: 46em; text-wrap: pretty; }
.bl-days { display: grid; justify-items: center; text-align: center; min-width: 116px; }
.bl-days small { font: 600 13px/1.2 var(--font); color: var(--ink-3); }
.bl-days b { font: 800 66px/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.bl-days span { font-size: 14px; color: var(--ink-3); }
.bl-days.price b { font-size: 40px; letter-spacing: -.035em; margin: 6px 0 4px; }
.bl-tail, .bl-nw { white-space: nowrap; }
.bl-days.icon { min-width: 0; width: 76px; height: 76px; border-radius: 24px; background: var(--soft); place-items: center; color: var(--ink); }
.bl-days.icon svg { width: 32px; height: 32px; }
.bl-segs { display: flex; gap: 5px; margin-top: 18px; max-width: 440px; }
.bl-segs i { flex: 1; height: 6px; border-radius: 3px; background: #e3e3e8; }
.bl-segs i.u { background: var(--ow-red); }
.bl-bar { margin-top: 18px; max-width: 440px; height: 6px; border-radius: 3px; background: #e3e3e8; overflow: hidden; }
.bl-bar i { display: block; height: 100%; background: var(--ow-red); transform-origin: left center; }
.bl-claimed { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-radius: 16px; background: var(--soft); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.bl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; margin-top: 7px; animation: bl-pulse 1.8s infinite; }
.bl-status.s-paid .bl-pill { background: var(--ink); color: #fff; }
.bl-status.s-grace:not(.claimed) { box-shadow: inset 0 0 0 1.5px rgba(227, 38, 43, .4), var(--ow-shadow); }
.bl-status.s-grace:not(.claimed) .bl-pill { background: rgba(227, 38, 43, .1); color: #b3161b; }
.bl-status.s-grace .bl-days b { color: var(--ow-red); }
.bl-status.s-paused { background: #1d1d1f; color: #fff; }
.bl-status.s-paused p { color: #a1a1a6; }
.bl-status.s-paused .bl-pill { background: var(--ow-red); color: #fff; }
.bl-status.s-paused .bl-days.icon { background: #2c2c2e; color: #fff; }
.bl-status.s-paused .bl-claimed { background: #2c2c2e; color: #fff; }
.bl-status.s-paused .bl-dot { background: #fff; }
.bl-status.s-off .bl-pill { background: transparent; box-shadow: inset 0 0 0 1.3px var(--ink-3); }

/* pay + history */
.bl-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--ow-gap); align-items: start; }
.bl-pay, .bl-hist { padding: 24px 26px 26px; border-radius: 24px; min-width: 0; }
.bl-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bl-sec-h h3 { margin: 0; font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.bl-rules { margin: 6px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.bl-cap { margin: 22px 2px 8px; font: 600 13px/1.2 var(--font); color: var(--ink-3); }
.bl-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bl-m {
  display: grid; gap: 5px; justify-items: center; padding: 13px 6px 12px; border-radius: 14px; background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px #d2d2d7; transition: background .2s, box-shadow .2s, color .2s, transform .15s;
}
.bl-m:hover { box-shadow: inset 0 0 0 1.5px #a1a1a6; }
.bl-m:active { transform: scale(.97); }
.bl-m b { font: 800 18px/1 var(--display); letter-spacing: -.02em; }
.bl-m small { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-m.on { background: var(--ink); color: #fff; box-shadow: none; }
.bl-m.on small { color: #c7c7cc; }
.bl-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 16px 2px 0; }
.bl-total span { font-size: 14px; color: var(--ink-3); }
.bl-total b { font: 800 32px/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.bl-total small { font-size: 13.5px; color: var(--ink-3); }
.bl-meths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bl-meth {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 42px 14px 14px; min-height: 74px; border-radius: 16px;
  background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #d2d2d7; transition: box-shadow .2s, transform .15s;
}
.bl-meth:hover { box-shadow: inset 0 0 0 1.5px #a1a1a6; }
.bl-meth:active { transform: scale(.99); }
.bl-meth i { width: 42px; height: 42px; border-radius: 13px; background: var(--soft); display: grid; place-items: center; flex: none; transition: background .2s, color .2s; }
.bl-meth > span:not(.bl-tick) { display: grid; gap: 2px; min-width: 0; }
.bl-meth b { font-size: 15px; font-weight: 700; }
.bl-meth small { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.bl-meth.on { box-shadow: inset 0 0 0 2px var(--ink); }
.bl-meth.on i { background: var(--ink); color: #fff; }
.bl-tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1.5px #c7c7cc; transition: background .2s, box-shadow .2s; }
.bl-tick svg { width: 12px; height: 12px; opacity: 0; }
.bl-meth.on .bl-tick { background: var(--ink); box-shadow: none; }
.bl-meth.on .bl-tick svg { opacity: 1; }
.bl-go { margin-top: 18px; }
.bl-main { width: 100%; min-height: 54px; font-size: 16px; }
.bl-main svg { width: 18px; height: 18px; }
.bl-p { margin: 10px 2px 0; font-size: 13.5px; line-height: 1.45; }
.bl-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.4px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: bl-rot .8s linear infinite; }
@keyframes bl-rot { to { transform: rotate(1turn); } }

/* the QR panel: the code on the left, what to do on the right (phones: the sum and SBP first) */
.bl-qr {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 22px; align-items: start; padding: 18px; border-radius: 20px; background: var(--soft);
  grid-template-areas: "img sum" "img how" "img sbp" "img req" "img btns" "claim claim"; animation: bl-in .35s var(--ow-ease);
}
@keyframes bl-in { from { opacity: 0; transform: translateY(6px); } }
.bl-qr-img { grid-area: img; grid-row: 1 / span 5; margin: 0; padding: 14px; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.bl-qr-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.bl-qr-sum { grid-area: sum; }
.bl-qr-sum b { display: block; font: 800 36px/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.bl-qr-sum span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.bl-qr-how { grid-area: how; margin: 14px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.bl-qr-how b { color: var(--ink); }
.bl-sbp-w { grid-area: sbp; display: grid; gap: 6px; margin-top: 14px; }
.bl-sbp-w small { font-size: 12.5px; }
.bl-sbp { min-height: 46px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.bl-sbp:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.bl-req { grid-area: req; margin: 14px 0 0; display: grid; gap: 8px; font-size: 13px; }
.bl-req dt { color: var(--ink-3); font-weight: 600; }
.bl-req dd { margin: 2px 0 0; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.bl-link { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 2px 0; font: 600 13px/1.2 var(--font); color: var(--ink); vertical-align: baseline; border-bottom: 1px solid rgba(0, 0, 0, .2); }
.bl-link svg { width: 13px; height: 13px; }
.bl-qr .bl-btns { grid-area: btns; }
.bl-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bl-btns .ow-btn { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.bl-btns .ow-btn:hover { background: #fafafa; }
.bl-btns .ow-btn.black { background: var(--ink); }
.bl-claim-w { grid-area: claim; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .08); }
.bl-claim { min-height: 50px; padding: 0 24px; font-size: 15.5px; }
.bl-claim-w small { font-size: 13px; }
.bl-issued, .bl-thanks { padding: 18px; border-radius: 20px; background: var(--soft); animation: bl-in .35s var(--ow-ease); }
.bl-issued-h { display: flex; align-items: center; gap: 12px; }
.bl-issued-h i, .bl-thanks > i { width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.bl-issued-h > div { display: grid; gap: 3px; min-width: 0; }
.bl-issued-h b { font-size: 16px; }
.bl-issued-h small { font-size: 13px; overflow-wrap: anywhere; }
.bl-thanks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bl-thanks > i { border-radius: 50%; }
.bl-thanks > div { flex: 1; min-width: 200px; }
.bl-thanks b { font-size: 16.5px; }
.bl-thanks p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; }
.bl-thanks .ow-btn { background: #fff; }
.bl-inv { display: grid; gap: 12px; }
.bl-f { display: grid; gap: 6px; min-width: 0; }
.bl-f > span { font: 600 12.5px/1.25 var(--font); color: var(--ow-cap); margin: 0 2px; }
.bl-f .ow-input { min-height: 50px; font-size: 16px; }
.bl-err { display: none; font-size: 12.5px; font-weight: 600; color: var(--ow-red); margin: 0 2px; }
.bl-f.bad .bl-err { display: block; }
.bl-f.bad .ow-input { border-color: var(--ow-red); box-shadow: 0 0 0 4px rgba(227, 38, 43, .12); }
.bl-inv .bl-main { margin-top: 4px; }
.bl-soon { margin-top: 14px; padding: 18px; border-radius: 18px; background: var(--soft); }
.bl-soon > b { font: 800 19px/1.25 var(--display); letter-spacing: -.02em; }
.bl-soon p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.bl-contacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bl-contacts .ow-btn { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); min-height: 44px; }
.bl-contacts .ow-btn:first-child { background: var(--ink); color: #fff; }

/* history */
.bl-list { list-style: none; margin: 8px 0 0; padding: 0; }
.bl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 14px 2px; border-top: 1px solid var(--line); }
.bl-row:first-child { border-top: 0; }
.bl-row-m { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bl-row-m b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-row-sum { font: 800 17px/1.2 var(--display); letter-spacing: -.01em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-row-s { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; color: var(--ink-3); overflow-wrap: anywhere; }
.bl-row-a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.bl-act {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--ow-fill); color: var(--ink);
  font: 600 13px/1 var(--font); text-decoration: none; white-space: nowrap; transition: background .2s, transform .15s;
}
.bl-act:hover { background: #dedee3; }
.bl-act:active { transform: scale(.97); }
.bl-st { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font: 700 11.5px/1 var(--font); white-space: nowrap; }
.bl-st svg { width: 11px; height: 11px; }
.bl-st.issued { background: var(--soft); color: var(--ink-2); box-shadow: inset 0 0 0 1px #d2d2d7; }
.bl-st.claimed { background: #fff; color: var(--ink); border: 1.3px dashed var(--ink); } /* dashed = not certain yet, as everywhere in Boxsy */
.bl-st.paid { background: var(--ink); color: #fff; }
.bl-st.cancelled { color: var(--ink-3); box-shadow: inset 0 0 0 1px #e3e3e8; }
.bl-row.st-cancelled .bl-row-sum { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bl-empty { margin: 12px 2px 0; font-size: 14px; line-height: 1.45; }
.bl-foot { margin: 4px 0 0; text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.bl-foot:empty { display: none; }
.bl-foot a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .2); }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .bl-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .ow-login.su .su-steps { display: none; }
  .ow-billbar-in { min-height: 46px; }
}
@media (max-width: 640px) {
  .ow-login.su .ow-login-hero p { font-size: 15px; }
  .ow-billbar-in { padding: 7px 16px; gap: 10px; min-height: 44px; }
  .ow-billbar .l { display: none; }
  .ow-billbar .s { display: inline; }
  .ow-billbar p { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .ow-billbar-btn { height: 32px; padding: 0 10px 0 12px; font-size: 13px; }

  .bl-head h2 { font-size: 30px; }
  .bl-status { padding: 20px 18px; border-radius: 22px; gap: 14px 16px; }
  .bl-status h3 { font-size: 22px; margin-top: 10px; }
  .bl-sep { display: none; }
  .bl-tail { display: block; color: var(--ink-3); }
  .s-trial .bl-tail { color: var(--ink-2); }
  .bl-days.price { display: none; }
  .bl-status p { font-size: 14.5px; }
  .bl-days { min-width: 64px; align-self: start; }
  .bl-days b { font-size: 46px; }
  .bl-days small, .bl-days span { font-size: 12px; }
  .bl-days.icon { width: 56px; height: 56px; border-radius: 18px; }
  .bl-days.icon svg { width: 26px; height: 26px; }
  .bl-pay, .bl-hist { padding: 20px 16px 20px; border-radius: 22px; }
  .bl-months { gap: 6px; }
  .bl-m { padding: 11px 2px 10px; border-radius: 12px; }
  .bl-m b { font-size: 16px; }
  .bl-m small { font-size: 11.5px; }
  .bl-total b { font-size: 28px; }
  .bl-meths { grid-template-columns: minmax(0, 1fr); }
  .bl-meth { min-height: 64px; }
  .bl-qr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sum" "sbp" "img" "how" "req" "btns" "claim"; padding: 16px; }
  .bl-qr-img { grid-row: auto; justify-self: center; width: min(100%, 250px); margin-top: 16px; }
  .bl-qr-sum b { font-size: 32px; }
  /* on a phone the bank app is on the same screen: SBP is the main action, «Я оплатил» comes after it */
  .bl-sbp { background: var(--ink); color: #fff; box-shadow: none; min-height: 52px; font-size: 15.5px; }
  .bl-sbp:hover { background: #333336; box-shadow: none; }
  .bl-sbp-w ~ .bl-claim-w .bl-claim { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .bl-claim-w { display: grid; }
  .bl-claim { width: 100%; }
  .bl-btns .ow-btn { flex: 1; }
  .bl-row-a .bl-act { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ow-billbar, .bl-qr, .bl-issued, .bl-thanks, .bl-skel i, .bl-dot, .ow-billbar-dot { animation: none !important; }
}

/* free point (UX plan У7): one line instead of the status, «платить не нужно» and empty history cards */
.bl-free { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 20px; }
.bl-free > i { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--soft); color: var(--ink); display: grid; place-items: center; }
.bl-free > i svg { width: 20px; height: 20px; }
.bl-free p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.bl-free p b { color: var(--ink); }
@media (max-width: 640px) { .bl-free { padding: 16px; align-items: flex-start; } }