/* Sidebar plan card — compact "Credit" surface (Figma Credit/Free). */
.sb-plan{
  --plan-accent:#98a2b3;
  --plan-soft:#f9fafb;
  --plan-border:rgba(159,159,159,.16);
  --plan-fill:#ff6357;
  --plan-track:rgba(255,99,87,.24);
  --plan-text:#101010;
  --plan-muted:#9f9f9f;
  --plan-strong:#101010;
  --plan-cta:#101010;
  --plan-manage-bg:#fff;
  --plan-manage-border:rgba(159,159,159,.24);
  --plan-manage-fg:#101010;
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  /* 6px between the rows the card is made of. The card is always expanded, so the
     account head, notice, meters and CTA are siblings and this gap spaces them. */
  gap:6px;
  width:100%;
  min-width:0;
  margin:0 0 6px;
  padding:12px;
  background:#fff;
  border:1px solid var(--plan-border);
  border-radius:20px;
  box-shadow:0 2px 20px rgba(0,0,0,.08);
  overflow:visible;
  overflow-wrap:anywhere;
}
.sb-plan[hidden]{display:none}
.sb-plan[data-plan="guest"],.sb-plan[data-plan="free"]{--plan-accent:#98a2b3;--tag-bg:rgba(159,159,159,.16);--tag-fg:#101010}
.sb-plan[data-plan="starter"]{--plan-accent:#31cc5b;--tag-bg:rgba(49,204,91,.24);--tag-fg:#31cc5b}
.sb-plan[data-plan="creator"]{--plan-accent:#4285f4;--tag-bg:rgba(66,133,244,.24);--tag-fg:#4285f4}
.sb-plan[data-plan="pro"]{--plan-accent:#fbbc05;--tag-bg:rgba(251,188,5,.24);--tag-fg:#fbbc05}
.sb-plan[data-plan="business"]{--plan-accent:#7c3aed;--tag-bg:rgba(124,58,237,.16);--tag-fg:#7c3aed}

.sb-plan-account{display:flex;align-items:center;gap:1px;min-width:0;padding:4px 0}
.sb-plan-avatar{flex:none;width:32px;height:32px;border-radius:100px;overflow:hidden;background:#f2f4f7;display:grid;place-items:center}
.sb-plan-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.sb-plan-avatar-fallback{font-size:13px;font-weight:700;line-height:1;color:#667085;text-transform:uppercase}
.sb-plan-who{display:flex;flex-direction:column;flex:1;min-width:0;gap:1.5px;padding:0 4px}
/* Account head mirrors the developers console card: the identity stacks — account
   name on line 1, plan badge on line 2, both left-aligned — instead of sitting on
   one row. The name keeps its ellipsis so a long name clips at the container edge
   rather than pushing the badge out; the badge keeps its inline-block pill (a
   centred flex pill clips at BOTH ends: "reator (legac"). */
.sb-plan-identity{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;width:100%}
.sb-plan-name{flex:0 0 auto;max-width:100%;min-width:0;font-size:14px;line-height:18px;font-weight:700;color:var(--plan-text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-plan-status{box-sizing:border-box;flex:0 200 auto;min-width:46px;max-width:88px;height:16px;padding:1px 6px;border:0;border-radius:100px;background:var(--tag-bg,rgba(159,159,159,.16));color:var(--tag-fg,#101010);font-size:10px;line-height:14px;font-weight:500;display:inline-block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-plan-status.active{background:var(--tag-bg,rgba(159,159,159,.16));color:var(--tag-fg,#101010)}
.usage-refresh{flex:none;width:24px;height:24px;margin-left:auto;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--plan-muted);cursor:pointer;touch-action:manipulation;transition:background .15s ease,color .15s ease}
.usage-refresh svg{width:14px;height:14px}
.usage-refresh:hover{background:#f2f4f7;color:var(--plan-text)}
.usage-refresh:disabled{cursor:wait;opacity:.55}
.usage-refresh.is-loading svg{animation:usage-spin .8s linear infinite}
/* Collapse toggle for the plan card. Hides the notice, meters and CTA; the
   account row (avatar, name, badge, refresh) stays. The preference persists in
   localStorage (ov-sidebar-collapsed — historical key name, kept stable). */
.sb-collapse-btn{flex:none;width:24px;height:24px;padding:0;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:#6b6b76;cursor:pointer;touch-action:manipulation;transition:background .15s ease,color .15s ease}
.sb-collapse-btn:hover{background:#e7e7ec;color:#16161a}
.sb-collapse-btn svg{transition:transform .25s ease}
.sb-collapse-btn .sb-chevron-collapsed{transform:rotate(-180deg)}
#usageBar[data-collapsed] .sb-plan-notice,
#usageBar[data-collapsed] .sb-plan-credit,
#usageBar[data-collapsed] .sb-plan-upgrade{display:none}
/* No margin: .sb-plan's 6px gap spaces the rows, always-expanded card. */
.sb-plan-notice{margin:0;color:var(--plan-muted);font-size:10px;line-height:14px}
.sb-plan-notice:empty{display:none}

/* Near-limit paywall. No separate warning panel — a stacked red box in a 256px
   column wrapped to four lines and read as an error. The state is carried by the
   rows the card already has: the meter captions ("Còn 4.141/50.000 ký tự") take the
   warn tone and the card border is tinted, while the CTA opens the pricing view.
   Text always states the numbers, never colour alone. */
/* Only the metric that is actually nearly spent, plus the daily row when that is
   what will refuse the next run. Everything else stays muted, so red means "this is
   what is about to block you". */
.sb-plan-caption b[data-alert="true"],
.sb-plan-subrow[data-alert="true"]{color:var(--ov-action-dark);font-weight:600}
.sb-plan[data-quota-state="low"],
.sb-plan[data-quota-state="exhausted"]{border-color:var(--ov-brand-line)}

.sb-plan-credit{display:flex;flex-direction:column;gap:12px;min-width:0;padding:10px;background:#fff;border:1.2px solid var(--plan-border);border-radius:14px}
.sb-plan-metric{display:flex;flex-direction:column;gap:3px;min-width:0}
.sb-plan-label{position:relative;display:flex;align-items:center;gap:2px;min-width:0}
.sb-plan-label > span[data-usage-i18n]:not(.sb-plan-tip){min-width:0;font-size:13px;line-height:18px;font-weight:400;color:var(--plan-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-plan-info{flex:none;width:12px;height:12px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--plan-muted);display:grid;place-items:center;cursor:help}
.sb-plan-info:hover,.sb-plan-info:focus-visible{color:var(--plan-text)}
.sb-plan-info svg{width:12px;height:12px;display:block}
.sb-plan-tip{position:absolute;left:-8px;top:calc(100% + 4px);z-index:20;width:max-content;max-width:min(207px,calc(100% + 48px));padding:7px 8px;background:#282828;border:1.2px solid rgba(159,159,159,.12);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.18);color:#fff;font-size:11px;line-height:15px;font-weight:400;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease,visibility .12s;pointer-events:none}
.sb-plan-info:hover + .sb-plan-tip,.sb-plan-info:focus-visible + .sb-plan-tip{opacity:1;visibility:visible;transform:translateY(0)}

.usage-track{width:100%;height:6px;background:var(--plan-track);border-radius:100px;overflow:hidden;flex:none;margin:0}
.usage-track.is-unavailable{background:repeating-linear-gradient(135deg,#f2f4f7,#f2f4f7 5px,#e4e7ec 5px,#e4e7ec 10px)}
.usage-fill{height:100%;width:0;background:var(--plan-fill);border-radius:100px;transition:width .3s ease}
.usage-fill.warn{background:#f79009}
.usage-fill.over{background:#d92d20}
.sb-plan-caption{display:flex;justify-content:flex-end;min-width:0}
.sb-plan-caption b{min-width:0;font-size:11px;line-height:15px;font-weight:400;color:var(--plan-muted);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.sb-plan-subrow{margin:-9px 0 0;color:var(--plan-muted);font-size:10px;line-height:13px;font-variant-numeric:tabular-nums;text-align:right}
.sb-plan-subrow[hidden]{display:none}
.sb-plan-period{margin:0;color:var(--plan-muted);font-size:10px;line-height:13px;opacity:.8}
.sb-plan-period:empty{display:none}

/* Renewal strip (last 7 days of a bank-paid plan). Sits inside the credit block
   so it reads as part of the plan, not as a banner: one line of text explaining
   when it ends, one 44px button that opens the same QR at the same price.
   The accent is the plan's own colour, so it never competes with the paywall's
   coral CTA below it. */
.sb-plan-renew{display:flex;align-items:center;gap:8px;margin:2px 0 0;padding:8px 10px;border:1px solid var(--plan-track);background:var(--plan-soft);border-radius:12px;min-width:0}
.sb-plan-renew[hidden]{display:none}
.sb-plan-renew-text{margin:0;flex:1 1 auto;min-width:0;font-size:11px;line-height:15px;font-weight:500;color:var(--plan-text);overflow-wrap:anywhere}
.sb-plan-renew-btn{flex:none;min-height:32px;padding:6px 12px;border:0;border-radius:999px;background:var(--plan-fill);color:#fff;font-family:inherit;font-size:12px;font-weight:700;line-height:16px;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.sb-plan-renew-btn:hover{filter:brightness(.95)}
.sb-plan-renew-btn:focus-visible{outline:2px solid var(--plan-text);outline-offset:2px}
@media (max-width:680px){
  /* On a phone the card is narrower than the sidebar: stack the button under the
     sentence instead of squeezing the date into two broken lines. */
  .sb-plan-renew{flex-direction:column;align-items:stretch;gap:6px}
  .sb-plan-renew-btn{min-height:44px;font-size:13px}
}

.sb-plan-upgrade{box-sizing:border-box;width:100%;min-height:36px;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border:1px solid rgba(0,0,0,.08);border-radius:10px;text-decoration:none;font-size:13px;line-height:18px;font-weight:500;letter-spacing:0;text-align:center;touch-action:manipulation;transition:background .15s ease,border-color .15s ease,color .15s ease,filter .15s ease}
.sb-plan-upgrade[data-cta="upgrade"]{background:var(--plan-cta);color:#fff}
.sb-plan-upgrade[data-cta="upgrade"]:hover{background:#262626}
.sb-plan-upgrade[data-cta="manage"]{border-color:var(--plan-manage-border);background:var(--plan-manage-bg);color:var(--plan-manage-fg)}
.sb-plan-upgrade[data-cta="manage"]:hover{background:#f9fafb;border-color:var(--plan-text)}
.sb-plan-upgrade svg{flex:none}
.sb-plan[data-state="loading"]{opacity:.72}
.usage-refresh:focus-visible,.sb-collapse-btn:focus-visible,.sb-plan-info:focus-visible,.sb-plan-upgrade:focus-visible{outline:2px solid var(--plan-accent);outline-offset:2px}
.sidebar.collapsed .sb-bottom{padding-left:12px;padding-right:12px}
.sidebar.collapsed .sb-plan{display:none}
.gen-cost-hint,.dub-cost-hint{font-size:12px;color:#61616a;white-space:nowrap}
.gen-cost-hint.over,.dub-cost-hint.over{color:#8a4705;font-weight:700}
.ov-plan-quota-overlay{position:fixed;inset:0;background:rgba(20,20,25,.62);display:grid;place-items:center;z-index:99999;padding:20px}
.ov-plan-quota-modal{background:#fff;border-radius:20px;max-width:420px;width:100%;padding:24px;box-shadow:0 24px 80px rgba(20,20,25,.25);position:relative;overflow-wrap:anywhere}
.ov-plan-quota-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:transparent;font-size:22px;line-height:1;color:#50505a;cursor:pointer;border-radius:8px;touch-action:manipulation}
.ov-plan-quota-close:hover{background:#f1f1f4}.ov-plan-quota-close:focus-visible,.ov-plan-quota-actions a:focus-visible,.ov-plan-quota-actions button:focus-visible{outline:3px solid #185abc;outline-offset:2px}
.ov-plan-quota-modal h2{margin:0 44px 8px 0;font-size:19px}.ov-plan-quota-msg{margin:0 0 8px;color:#42424b;font-size:14px}.ov-plan-quota-suggest{margin:0 0 16px;color:#8f2018;font-weight:800;font-size:13.5px}
.ov-plan-quota-actions{display:flex;flex-direction:column;gap:8px}.ov-plan-quota-actions a,.ov-plan-quota-actions button{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;border-radius:999px;padding:11px 14px;font-weight:800;font-size:13.5px;cursor:pointer;touch-action:manipulation}
.ov-plan-quota-primary{background:var(--ov-action);color:#fff}.ov-plan-quota-primary:hover{background:var(--ov-action-dark)}.ov-plan-quota-later{background:transparent;border:0;color:var(--ov-ink-3)}
@keyframes usage-spin{to{transform:rotate(360deg)}}
@media (max-width:820px){.sidebar.collapsed .sb-plan{display:block}}
@media (prefers-reduced-motion:reduce){.usage-fill,.usage-refresh svg{transition:none!important;animation:none!important}}

/* Quota exceeded -> inline SePay upgrade. Keeps checkout in the studio so the
   user can pay and resume the skipped generation without losing their text. */
.ov-plan-quota-modal.ov-upgrade-payment{max-width:780px;max-height:92vh;overflow:auto;padding:22px 24px 24px}
.ov-upgrade-payment h2{margin:0 44px 4px 0;font-size:19px}
.ov-upgrade-subtitle{margin:0 0 12px;color:#4b5563;font-size:13.5px;line-height:1.5}
.ov-upgrade-countdown{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:6px 10px;border:1px solid var(--ov-brand-line);border-radius:999px;background:var(--ov-brand-soft);color:#b93a35;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.ov-upgrade-dot{width:6px;height:6px;border-radius:50%;background:#fe655d;box-shadow:0 0 0 4px rgba(254,101,93,.12)}
.ov-upgrade-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
.ov-upgrade-qr-card{border:1px solid #ece7e7;border-radius:16px;background:#fff;padding:11px;text-align:center;box-shadow:0 6px 18px rgba(31,41,55,.05)}
.ov-upgrade-qr-card img{display:block;width:100%;height:auto;border-radius:10px}
.ov-upgrade-qr-download{margin-top:10px;width:100%;min-height:38px;border:1px solid var(--ov-brand-line);border-radius:11px;background:#fff;color:#b93a35;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;touch-action:manipulation}
.ov-upgrade-qr-download:hover{background:var(--ov-brand-soft)}
.ov-upgrade-info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:7px 0;font-size:13.5px;line-height:1.4}
.ov-upgrade-label{color:#6b7280;flex:0 0 auto}
.ov-upgrade-value{color:#1f2937;font-weight:700;text-align:right;word-break:break-word}
.ov-upgrade-value.copy{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}
.ov-upgrade-copy{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:#6b7280;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;font-size:15px}
.ov-upgrade-copy:hover{background:var(--ov-brand-soft);color:#b93a35}
.ov-upgrade-divider{border:0;border-top:1px solid #ece7e7;margin:9px 0}
.ov-upgrade-warning{margin-top:12px;padding:11px 12px;border:1px solid #f4daa7;border-radius:12px;background:#fff8e8;color:#704400;font-size:12.5px;line-height:1.5}
.ov-upgrade-status{margin:14px 0 0;font-size:13px;font-weight:700;color:#6b7280;min-height:18px}
.ov-upgrade-status.ok{color:#047857}.ov-upgrade-status.error{color:#be123c}
.ov-upgrade-actions{flex-direction:row;margin-top:16px}
.ov-upgrade-actions .ov-plan-quota-primary{flex:2}
.ov-upgrade-actions .ov-plan-quota-later{flex:1}
.ov-plan-quota-modal.ov-upgrade-payment .ov-plan-quota-close{top:10px;right:10px}
@media(max-width:680px){
  .ov-plan-quota-modal.ov-upgrade-payment{padding:18px 16px}
  .ov-upgrade-grid{grid-template-columns:1fr;gap:16px}
  .ov-upgrade-qr-card{max-width:260px;margin:0 auto}
  .ov-upgrade-actions{flex-direction:column-reverse}
  .ov-upgrade-actions .ov-plan-quota-primary,.ov-upgrade-actions .ov-plan-quota-later{flex:none}
}

/* Inline post-quota notice: keeps the editor text intact and offers the two
   shortest paths forward (upgrade or shorten) without a dead end. */
.ov-quota-notice{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:9px 10px 9px 12px;border:1px solid var(--ov-brand-line);border-radius:12px;background:var(--ov-brand-soft);color:var(--ov-ink);font-size:12.5px;line-height:1.4}
.ov-quota-notice-text{min-width:0;flex:1 1 260px;font-weight:650}
.ov-quota-notice-actions{display:flex;align-items:center;gap:7px;flex:none}
.ov-quota-notice-primary,.ov-quota-notice-secondary{min-height:32px;border-radius:9px;padding:0 11px;font-size:12.5px;font-weight:800;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.ov-quota-notice-primary{border:1px solid var(--ov-action);background:var(--ov-action);color:#fff}
.ov-quota-notice-primary:hover{background:var(--ov-action-dark)}
.ov-quota-notice-secondary{border:1px solid var(--ov-brand-line);background:#fff;color:var(--ov-action-dark)}
.ov-quota-notice-secondary:hover{background:var(--ov-brand-tint)}
.ov-quota-notice-close{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--ov-action-dark);font-size:19px;line-height:1;cursor:pointer;touch-action:manipulation}
.ov-quota-notice-close:hover{background:var(--ov-brand-tint)}
@media(max-width:760px){.ov-quota-notice{align-items:flex-start}.ov-quota-notice-text{flex-basis:100%}.ov-quota-notice-actions{width:100%;justify-content:flex-end}}

/* KB1 — in-editor paywall for the PER-REQUEST limit (max_chars_request).
   The monthly-quota notice above only appears once the period budget is nearly
   gone; this one warns while typing, before Generate, because 86% of paywall
   modals fire on the 3,000-chars-per-run limit of the free plan. Same palette
   and shape as .ov-quota-notice so the two read as one system. */
.ov-paywall-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 10px;padding:9px 10px 9px 12px;border:1px solid var(--ov-brand-line);border-radius:12px;
  background:var(--ov-brand-soft);color:var(--ov-ink);font-size:12.5px;line-height:1.4}
.ov-paywall-banner[hidden]{display:none}
.ov-paywall-text{min-width:0;font-weight:650}
.ov-paywall-offer{min-width:0;color:var(--ov-action-dark)}
.ov-paywall-actions{display:flex;align-items:center;gap:7px;margin-left:auto;flex:none}
.ov-paywall-primary,.ov-paywall-secondary{min-height:32px;border-radius:9px;padding:0 11px;font-size:12.5px;font-weight:800;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.ov-paywall-primary{border:1px solid var(--ov-action);background:var(--ov-action);color:#fff}
.ov-paywall-primary:hover{background:var(--ov-action-dark)}
.ov-paywall-secondary{border:1px solid var(--ov-brand-line);background:#fff;color:var(--ov-action-dark)}
.ov-paywall-secondary:hover{background:var(--ov-brand-tint)}
@media(max-width:760px){.ov-paywall-banner{align-items:flex-start}.ov-paywall-text,.ov-paywall-offer{flex-basis:100%}.ov-paywall-actions{width:100%;margin-left:0;justify-content:flex-end}}

/* KB3 — plan ladder inside the quota modal. The old step named a single plan,
   so anyone who needed a bigger one had to guess or leave. Rows are led by the
   limit that actually triggered the modal (chars per run). */
.ov-plan-compare-title{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}
.ov-plan-compare{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.ov-plan-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid #e6e6ea;border-radius:12px;padding:10px 12px;background:#fff}
.ov-plan-row.is-rec{border-color:var(--ov-action);background:var(--ov-brand-soft)}
.ov-plan-row-main{min-width:0;flex:1 1 220px}
.ov-plan-row-head{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#1c1c22}
.ov-plan-badge{font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--ov-action);border-radius:999px;padding:2px 8px;white-space:nowrap}
.ov-plan-row-meta{font-size:12px;color:var(--ov-ink-3);margin-top:3px;line-height:1.35}
.ov-plan-row-yearly{font-size:11.5px;color:#6b6b74;margin-top:2px}
/* KB: phần tăng thêm so với gói đang dùng — chỉ hiện với khách đã trả tiền */
.ov-plan-row-delta{font-size:11.5px;font-weight:700;color:#1f7a45;margin-top:3px}
.ov-plan-row-cta{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.ov-plan-row-price{font-size:13px;font-weight:800;color:#1c1c22;white-space:nowrap}
.ov-plan-row-btn{min-height:32px;border:1px solid #d8d8de;background:#fff;color:#1c1c22;border-radius:9px;padding:0 11px;font-size:12.5px;font-weight:800;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.ov-plan-row-btn:hover{background:#f5f5f7}
.ov-plan-row .ov-plan-quota-primary{min-height:32px;padding:0 12px;border-radius:9px;font-size:12.5px}
.ov-plan-quota-secondary{min-height:32px;border:1px solid #d8d8de;background:#fff;color:var(--ov-ink-3);border-radius:9px;padding:0 11px;font-size:12.5px;font-weight:700;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.ov-plan-quota-secondary:hover{background:#f5f5f7}
@media(max-width:680px){.ov-plan-row-cta{margin-left:0;width:100%;justify-content:space-between}.ov-plan-compare{margin-bottom:10px}}

/* --- dialogs that own the screen ------------------------------------------
   A dialog that covers the viewport must own the scroll: before this the page
   behind it kept scrolling on touch devices, so a swipe on the plan ladder
   scrolled the editor underneath and the customer lost their place. */
html.ov-modal-open,
html.ov-modal-open body{overflow:hidden}

/* Never taller than the viewport, always scrollable inside. Only the payment step
   had a max-height, so a three-plan ladder in 360px could push the actions (and
   the "not now" exit) below the visible area with no way to reach them. */
.ov-plan-quota-modal{
  /* width:100% + padding is content-box by default, which made the dialog 32px
     wider than the phone that opened it and pushed the close button off-screen. */
  box-sizing:border-box;
  max-height:calc(100dvh - 32px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* The recommended plan is chosen for the customer and pinned to the bottom, so
   on a phone the main action is reachable without scrolling the ladder. */
.ov-plan-quota-actions.is-sticky{
  position:sticky;bottom:-1px;z-index:2;
  margin-top:12px;padding:10px 0 calc(2px + env(safe-area-inset-bottom,0px));
  background:#fff;
  box-shadow:0 -12px 18px -14px rgba(20,20,25,.32);
}
.ov-plan-row-selected{
  display:inline-grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--ov-action);color:#fff;font-size:14px;font-weight:800;
}
.ov-inline-offer{scroll-margin-top:12px}

/* Phones: the quota/payment dialog becomes a bottom sheet, the whole width of the
   screen, with the safe-area inset respected so the primary button clears the
   iOS home indicator. Tap targets grow to ~44px (the platform minimum). */
@media (max-width:680px){
  .ov-plan-quota-overlay{padding:0;place-items:end stretch}
  .ov-plan-quota-modal{
    width:100%;max-width:100%;
    max-height:94dvh;
    border-radius:20px 20px 0 0;
    padding:18px 16px calc(12px + env(safe-area-inset-bottom,0px));
  }
  .ov-plan-quota-modal h2{font-size:17.5px;margin-right:40px}
  .ov-plan-quota-close{top:6px;right:6px}
  .ov-plan-quota-msg{font-size:13.5px;margin-bottom:6px}
  /* Keep the ladder visible above the pinned action: three stacked buttons
     (primary + split + not-now) ate ~160px of a 640px screen and hid the last
     plan behind the bar. Primary keeps the full width; the two exits share a row.
     When there is no split button, "not now" takes the whole row instead. */
  .ov-plan-quota-actions.is-sticky{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ov-plan-quota-actions.is-sticky > *{grid-column:1/-1}
  .ov-plan-quota-actions.is-sticky > .ov-plan-quota-later{grid-column:1/-1}
  .ov-plan-quota-actions.is-sticky.is-sticky-split > .ov-plan-quota-secondary,
  .ov-plan-quota-actions.is-sticky.is-sticky-split > .ov-plan-quota-later{grid-column:auto}
  .ov-plan-quota-actions a,.ov-plan-quota-actions button{min-height:46px}
  .ov-plan-quota-actions.is-sticky > .ov-plan-quota-secondary,
  .ov-plan-quota-actions.is-sticky > .ov-plan-quota-later{min-height:40px}
  .ov-plan-row-btn,.ov-plan-quota-secondary{min-height:40px;padding:0 14px;font-size:13px}
  .ov-plan-row-cta{width:100%;justify-content:space-between}
  .ov-plan-row-price{font-size:12.5px}
  /* Tighter ladder on a phone: four lines of copy per plan plus the pinned bar
     has to fit 640px without hiding the last plan. */
  .ov-plan-compare{gap:6px;margin-bottom:8px}
  .ov-plan-row{padding:9px 10px}
  .ov-plan-row-head{font-size:13px}
  .ov-plan-row-meta{font-size:11.5px;line-height:1.3;margin-top:2px}
  .ov-plan-row-yearly{font-size:11px;margin-top:1px}
  .ov-plan-compare-title{margin-bottom:6px}
  .ov-paywall-actions{width:100%;margin-left:0}
  .ov-paywall-primary,.ov-paywall-secondary,.ov-quota-notice-primary,.ov-quota-notice-secondary{min-height:40px}
  .ov-plan-quota-modal.ov-upgrade-payment{max-height:94dvh}
  .ov-upgrade-qr-card{max-width:min(260px,72vw)}
}

/* ==========================================================================
   Paywall — proposal C
   Brand ramp for identity/graphics, a darker action step for text-bearing
   buttons (4.84:1 with white), ink for copy, one action colour, and a
   two-step dialog (offer → optional compare → payment → done).
   ========================================================================== */
:root{
  --ov-brand:#FE655D;
  --ov-brand-strong:#FC3E57;
  --ov-brand-soft:#FFF4F2;
  --ov-brand-tint:#FFE7E4;
  --ov-brand-line:#FFD6D2;
  --ov-action:#CC3F39;
  --ov-action-dark:#B93631;
  --ov-ink:#111111;
  --ov-ink-2:#4B5563;
  --ov-ink-3:#6B7280;
  --ov-line:#E5E7EB;
  --ov-line-soft:#F1F1F4;
  --ov-success:#1F7A45;
  --ov-warn:#B45309;
  --ov-font:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

.ov-plan-quota-overlay{background:rgba(10,10,10,.45);padding:20px}
.ov-plan-quota-modal{
  box-sizing:border-box;
  width:100%;max-width:460px;
  max-height:calc(100dvh - 32px);
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:22px 22px 14px;
  border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.2);
  font-family:var(--ov-font);
  color:var(--ov-ink);
  word-spacing:.07em;
}
.ov-plan-quota-modal h2:focus{outline:none}
.ov-plan-quota-modal h2{margin:0 38px 6px 0;color:var(--ov-ink);font-size:20px;line-height:1.3;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.ov-plan-quota-modal .ov-sub{margin:0 0 14px;color:var(--ov-ink-2);font-size:14px;line-height:1.55}
.ov-plan-quota-close{top:6px;right:6px;width:44px;height:44px;color:var(--ov-ink-3)}
.ov-plan-quota-close:hover{background:var(--ov-line-soft);color:var(--ov-ink)}

/* gap meter: what the current plan covers vs what is missing */
.ov-gap{margin:0 0 16px}
.ov-gap-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--ov-line-soft)}
.ov-gap-bar .have{background:#D1D5DB;box-shadow:inset 0 0 0 1px #6B7280}
.ov-gap-bar .need{background:var(--ov-action)}
.ov-gap-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--ov-ink-3)}
.ov-gap-legend span{display:inline-flex;align-items:center;gap:6px}
.ov-gap-legend i{width:7px;height:7px;border-radius:2px;display:inline-block}
.ov-gap-legend .have{background:#D1D5DB;border:1px solid #6B7280}
.ov-gap-legend .need{background:var(--ov-action)}

/* one recommended plan */
.ov-offer{border:1px solid var(--ov-brand-line);background:linear-gradient(180deg,var(--ov-brand-soft),#fff 64%);border-radius:16px;padding:14px 15px;margin:0 0 14px;box-shadow:0 6px 18px rgba(254,101,93,.06)}
.ov-offer-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ov-offer-top b{font-size:16px;letter-spacing:-.01em;color:var(--ov-ink)}
.ov-badge{font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ov-action-dark);background:var(--ov-brand-tint);border-radius:999px;padding:3px 8px}
.ov-offer-price{margin-left:auto;text-align:right;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}
.ov-offer-price strong{font-size:19px;letter-spacing:-.01em;color:var(--ov-ink)}
.ov-offer-price span{font-size:11.5px;color:var(--ov-ink-3)}
.ov-offer-meta{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--ov-ink-2)}

/* Billing-cycle switch. Two 44px targets inside the offer card; the yearly one
   carries its own discount, computed from the catalogue (never hard-coded), so a
   price change cannot leave a stale "-66%" badge on screen. */
.ov-cycles{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 13px;padding:4px;border:1px solid var(--ov-line);border-radius:999px;background:var(--ov-line-soft)}
.ov-cycle{flex:1 1 0;min-width:0;min-height:38px;padding:7px 10px;border:0;border-radius:999px;background:transparent;color:var(--ov-ink-2);font-family:var(--ov-font);font-size:12.5px;font-weight:700;line-height:16px;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.ov-cycle.is-on{background:#fff;color:var(--ov-ink);box-shadow:0 1px 4px rgba(20,20,25,.12)}
.ov-cycle:focus-visible{outline:2px solid var(--ov-action);outline-offset:2px}
.ov-cycle-save{flex:none;margin:0 6px 0 2px;font-size:11px;font-weight:800;letter-spacing:.01em;color:var(--ov-action-dark);background:var(--ov-brand-tint);border-radius:999px;padding:4px 9px;white-space:nowrap}
.ov-pick-year{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--ov-ink-2)}
@media (max-width:680px){.ov-cycle{min-height:44px;font-size:13px}}

/* trust + free path + exits */
.ov-trust{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.ov-trust li{position:relative;padding-left:22px;font-size:13px;line-height:1.5;color:var(--ov-ink-2)}
.ov-trust li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ov-success);font-weight:800}
.ov-free{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:0 0 4px;border:1px solid var(--ov-line);border-radius:14px;background:#fff;color:var(--ov-ink);font-family:var(--ov-font);font-size:13px;font-weight:600;cursor:pointer;touch-action:manipulation}
.ov-free:hover{background:var(--ov-line-soft);border-color:#d7dae0}
.ov-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;margin-bottom:2px}
.ov-link{background:none;border:0;border-radius:6px;padding:4px;color:var(--ov-action-dark);font-family:var(--ov-font);font-size:12.5px;font-weight:600;cursor:pointer}
.ov-link:hover{background:var(--ov-brand-soft)}
.ov-quiet{background:none;border:0;border-radius:6px;padding:4px;color:var(--ov-ink-3);font-family:var(--ov-font);font-size:12.5px;cursor:pointer}
.ov-quiet:hover{color:var(--ov-ink);background:var(--ov-line-soft)}

/* actions pinned to the bottom of the dialog */
.ov-actions.is-sticky{position:sticky;bottom:-1px;z-index:2;display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:10px 0 calc(2px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--ov-line-soft)}
.ov-primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border:0;border-radius:14px;background:var(--ov-action);color:#fff;font-family:var(--ov-font);font-size:14.5px;font-weight:700;letter-spacing:-.01em;text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 8px 20px rgba(204,63,57,.22);transition:filter .12s ease,box-shadow .12s ease,transform .12s ease}
.ov-primary:hover{background:var(--ov-action-dark);box-shadow:0 10px 24px rgba(204,63,57,.3)}
.ov-primary:active{transform:translateY(1px)}
.ov-secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;border:1px solid var(--ov-line);border-radius:14px;background:#fff;color:var(--ov-ink);font-family:var(--ov-font);font-size:13.5px;font-weight:600;cursor:pointer}
.ov-secondary:hover{background:var(--ov-line-soft)}
.ov-micro{margin:8px 0 0;text-align:center;color:var(--ov-ink-3);font-size:11.5px;line-height:1.5}

/* compare step: radio rows, one CTA */
.ov-back{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--ov-ink-3);font-family:var(--ov-font);font-size:12.5px;cursor:pointer;padding:2px 0;margin:0 0 8px}
.ov-back:hover{color:var(--ov-ink)}
.ov-picks{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.ov-pick{position:relative;display:flex;align-items:center;gap:11px;border:1px solid var(--ov-line);border-radius:14px;padding:11px 12px;background:#fff;cursor:pointer}
.ov-pick.is-on{border-color:var(--ov-brand-line);background:linear-gradient(180deg,var(--ov-brand-soft),#fff 70%);box-shadow:0 6px 16px rgba(254,101,93,.07)}
.ov-pick input{position:absolute;opacity:0;pointer-events:none}
.ov-pick:focus-within{outline:2px solid var(--ov-action);outline-offset:2px}
.ov-radio{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid #6B7280;background:#fff;display:grid;place-items:center}
.ov-pick.is-on .ov-radio{border-color:var(--ov-action);background:var(--ov-action)}
.ov-radio::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;opacity:0}
.ov-pick.is-on .ov-radio::after{opacity:1}
.ov-pick-main{min-width:0;flex:1}
.ov-pick-name{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--ov-ink)}
.ov-pick-meta{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--ov-ink-3)}
.ov-pick.is-on .ov-pick-meta,.ov-pick.is-on .ov-pick-price span{color:var(--ov-ink-2)}
.ov-pick-price{font-size:13.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ov-ink)}
.ov-pick-price span{font-size:11px;font-weight:400;color:var(--ov-ink-3)}

/* payment */
.ov-steps{margin:0 0 10px;color:var(--ov-ink-3);font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.ov-amount{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:2px 0 10px;padding:0 0 12px;border-bottom:1px solid var(--ov-line-soft)}
.ov-amount-plan{font-size:12.5px;line-height:1.4;color:var(--ov-ink-3)}
.ov-amount-plan b{display:block;color:var(--ov-ink);font-size:13.5px}
.ov-amount strong{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ov-qr{width:min(210px,70%);aspect-ratio:1;border:1px solid #ECE7E7;border-radius:14px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.ov-qr img{width:100%;height:100%;object-fit:contain;display:block}
.ov-qr-dl{display:block;margin:0 auto 12px;min-height:36px;padding:0 12px;border:1px solid var(--ov-brand-line);border-radius:10px;background:#fff;color:var(--ov-action-dark);font-family:var(--ov-font);font-size:12px;font-weight:700;cursor:pointer}
.ov-rows{display:flex;flex-direction:column;margin:0 0 10px}
.ov-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--ov-line-soft);font-size:12.5px;line-height:1.45}
.ov-row:last-child{border-bottom:0}
.ov-row span{flex:none;color:var(--ov-ink-3)}
.ov-row b{text-align:right;word-break:break-word;font-weight:700;font-variant-numeric:tabular-nums}
.ov-copy{width:28px;height:28px;margin-left:4px;border:0;border-radius:8px;background:transparent;color:var(--ov-ink-3);cursor:pointer}
.ov-copy:hover{background:var(--ov-brand-soft);color:var(--ov-action-dark)}
.ov-countdown{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:5px 10px;border:1px solid var(--ov-brand-line);border-radius:999px;background:var(--ov-brand-soft);color:var(--ov-action-dark);font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.ov-countdown::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ov-brand-strong)}
.ov-status{margin:0 0 12px;color:var(--ov-ink-3);font-size:12.5px;line-height:1.5}
.ov-status.error{color:#B42318}
.ov-status.ok{color:var(--ov-success)}
.ov-support{margin:10px 0 0;text-align:center;color:var(--ov-ink-3);font-size:11.5px;line-height:1.5}
.ov-fine{margin:6px 0 0;text-align:center;color:var(--ov-ink-3);font-size:11px;line-height:1.5}

/* done */
.ov-done-tick{width:44px;height:44px;margin:0 0 12px;border-radius:50%;background:var(--ov-brand-tint);color:var(--ov-action-dark);display:grid;place-items:center;font-size:20px;font-weight:800}
.ov-progress{height:5px;margin:0 0 12px;border-radius:999px;background:var(--ov-line-soft);overflow:hidden}
.ov-progress span{display:block;height:100%;width:62%;border-radius:999px;background:var(--ov-action)}

/* focus */
.ov-primary:focus-visible,.ov-secondary:focus-visible,.ov-free:focus-visible,.ov-link:focus-visible,.ov-quiet:focus-visible,.ov-back:focus-visible,.ov-plan-quota-close:focus-visible,.ov-qr-dl:focus-visible,.ov-copy:focus-visible{outline:2px solid var(--ov-action);outline-offset:2px}

/* inline surfaces adopt the same palette */
.ov-paywall-banner,.ov-quota-notice{border-color:var(--ov-brand-line);background:var(--ov-brand-soft);color:var(--ov-ink)}
.ov-paywall-offer{color:var(--ov-action-dark)}
.ov-paywall-primary,.ov-quota-notice-primary{border:1px solid transparent;background:var(--ov-action);color:#fff}
.ov-paywall-primary:hover,.ov-quota-notice-primary:hover{background:var(--ov-action-dark)}
.ov-paywall-secondary,.ov-quota-notice-secondary{border:1px solid var(--ov-brand-line);background:#fff;color:var(--ov-action-dark)}
.ov-paywall-secondary:hover,.ov-quota-notice-secondary:hover{background:var(--ov-brand-tint)}
.ov-quota-notice-close{color:var(--ov-action-dark)}
.ov-quota-notice-close:hover{background:var(--ov-brand-tint)}

@media (max-width:680px){
  .ov-plan-quota-overlay{padding:0;place-items:end stretch}
  .ov-plan-quota-modal{width:100%;max-width:100%;max-height:94dvh;border-radius:20px 20px 0 0;padding:18px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .ov-plan-quota-modal h2{font-size:18.5px}
  .ov-primary{min-height:46px}
  .ov-free,.ov-secondary{min-height:40px}
  .ov-pick{padding:10px}
  .ov-pick-price{font-size:13px}
  .ov-amount strong{font-size:24px}
  .ov-qr{width:min(190px,66%)}
}