/* =====================================================================
   ChannelSite components — drop-in for the cabinet. Requires tokens.css.
   v0.6 (30 Sep 2026): restyled IN PLACE to the editorial newspaper look (paper, ink, one accent, thin rules,
   column grid, square-ish ink buttons, no cards/shadows/pills/uppercase eyebrows, no line icons beside text).
   Class names are unchanged, so the v0.4 production markup and the v0.5/v0.5.1 screens restyle with no HTML change.
   Previous version: /tmp/cabinet-restyle-bak/components.css.
   • Logical properties only (inline/block, start/end) → RTL works by setting dir="rtl".
   • Every interactive element ≥ 44px hit area, visible :focus-visible ring.
   • html.cs-in-telegram is set when running as a Telegram Mini App (see SPEC.md);
     .cs-web-only is then hidden because the primary action moves to Telegram MainButton.
   ===================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cs-bg); color: var(--cs-text); font: 17px/var(--cs-lh) var(--cs-font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: var(--cs-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 3px; border-radius: 0; }
h1, h2, h3 { font-family: var(--cs-font-serif); font-stretch: var(--cs-display-stretch); color: var(--cs-text); margin: 0; line-height: var(--cs-lh-tight); font-weight: 700; }
::selection { background: #F6D5CC; color: #111111; }
p { margin: 0; }
.cs-sr { position: absolute !important; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* 1 Oct late (Design P2-1): left:0 + clip-path, an EN step label pushed it 2px past 390 */
.cs-skip { position: absolute; inset-inline-start: 8px; inset-block-start: -80px; z-index: 100; background: var(--cs-text); color: var(--cs-bg);
  padding: 10px 14px; border-radius: 0; font-family: var(--cs-font-sans); }
.cs-skip:focus { inset-block-start: 8px; }
[data-brand]:empty::before { content: var(--cs-brand-name); }
[data-bot]:empty::before { content: "@" var(--cs-bot-username) var(--cs-bot-suffix, ""); }
/* numbers/prices/handles/URLs always Latin and LTR, isolated inside RTL text */
.cs-num, .cs-ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.cs-ltr { font-variant-numeric: normal; }
/* directional icons (arrows, chevrons, "back") mirror in RTL */
[dir="rtl"] .cs-flip { transform: scaleX(-1); }
.cs-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-ico-sm { width: 16px; height: 16px; }
.cs-ico-lg { width: 28px; height: 28px; }
/* v0.6: no generic line icons beside text. An icon stays only where it IS the control (icon-only buttons, drag grip).
   Markup keeps its <svg>s (aria-hidden), so nothing changes for assistive tech. */
.cs-ico { display: none; }
.cs-icon-btn .cs-ico, .pn-grip .cs-ico { display: block; }
.cs-user .cs-ico { display: block; width: 12px; height: 12px; stroke-width: 2.5; } /* the account-menu chevron is an affordance, not decoration */
.cs-in-telegram .cs-web-only { display: none !important; }
.cs-tg-only { display: none !important; }
.cs-in-telegram .cs-tg-only { display: revert !important; }

/* ---------- layout ---------- */
.cs-wrap { max-width: var(--cs-max-narrow); margin-inline: auto;
  padding-inline: max(var(--cs-gutter), var(--cs-safe-left)) max(var(--cs-gutter), var(--cs-safe-right)); }
.cs-wrap-wide { max-width: var(--cs-max); }
.cs-stack { display: grid; gap: var(--cs-sp-4); }
.cs-stack-sm { display: grid; gap: var(--cs-sp-2); }
.cs-row { display: flex; align-items: center; gap: var(--cs-sp-3); flex-wrap: wrap; }
.cs-grow { flex: 1 1 auto; min-width: 0; }

/* ---------- top bar (cabinet) ---------- */
.cs-topbar { position: sticky; inset-block-start: 0; z-index: 30; background: var(--cs-bg);
  border-block-end: 3px solid var(--cs-rule-strong); padding-block-start: var(--cs-safe-top); }
.cs-topbar::after { content: ""; display: block; block-size: 2px; border-block-end: 1px solid var(--cs-rule-strong); } /* masthead: 3px + 1px rule */
.cs-topbar-row { display: flex; align-items: center; gap: var(--cs-sp-3); min-height: 60px; }
.cs-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--cs-text); text-decoration: none; min-height: var(--cs-touch); }
/* Logo: brand/logo-wordmark.svg (ink) on light, brand/logo-wordmark-white.svg on dark. 160px wide = brand minimum for the full lockup. */
.cs-logo img { display: block; width: 160px; height: auto; }
.cs-logo .cs-logo-paper { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cs-logo .cs-logo-ink { display: none; }
  :root:not([data-theme="light"]) .cs-logo .cs-logo-paper { display: block; }
}
:root[data-theme="dark"] .cs-logo .cs-logo-ink { display: none; }
:root[data-theme="dark"] .cs-logo .cs-logo-paper { display: block; }
.cs-user { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; min-height: var(--cs-touch); padding-inline: 4px;
  border: 0; border-radius: 0; background: none; color: var(--cs-text); font: 500 15px/1 var(--cs-font-sans); cursor: pointer; }
.cs-user:hover { text-decoration: underline; text-underline-offset: 4px; }
.cs-user-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--cs-text);
  border: 1px solid var(--cs-rule-strong); font: 600 12px/1 var(--cs-font-sans); }
.cs-in-telegram .cs-topbar { display: none; } /* Telegram provides its own header; see SPEC */

/* ---------- typography helpers ---------- */
.cs-kicker { font: 600 14px/1.3 var(--cs-font-sans); letter-spacing: 0; text-transform: none; color: var(--cs-kicker); } /* no uppercase eyebrow */
.cs-h1 { font-size: 34px; line-height: 1.04; font-weight: 750; letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 960px) { .cs-h1 { font-size: 44px; } }
.cs-h2 { font-size: 24px; line-height: 1.1; }
.cs-h3 { font: 600 var(--cs-fs-md)/1.3 var(--cs-font-sans); }
[dir="rtl"] .cs-h1, [dir="rtl"] .cs-h2 { letter-spacing: 0; line-height: 1.35; font-weight: 700; }
.cs-lead { font: 400 18px/1.5 var(--cs-font-text); color: var(--cs-text-2); max-inline-size: 36em; }
.cs-hint { font: 400 var(--cs-fs-sm)/1.45 var(--cs-font-sans); color: var(--cs-hint); }
.cs-fine { font: 400 var(--cs-fs-xs)/1.45 var(--cs-font-sans); color: var(--cs-hint); }

/* ---------- buttons ---------- */
.cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--cs-btn-h); padding: 10px 22px;
  font: 600 var(--cs-fs-md)/1.2 var(--cs-font-sans); text-align: center; text-decoration: none; border-radius: var(--cs-r-sm);
  border: 1px solid transparent; cursor: pointer; transition: background var(--cs-dur), border-color var(--cs-dur), transform var(--cs-dur); }
.cs-btn:hover { text-decoration: none; }
.cs-btn:active { transform: translateY(1px); }
.cs-btn:focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 3px; }
.cs-btn-primary { background: var(--cs-primary); color: var(--cs-on-primary); border-color: var(--cs-primary); box-shadow: none; } /* solid ink */
.cs-btn-primary:hover { background: var(--cs-primary-hover); }
.cs-btn-secondary { background: transparent; color: var(--cs-text); border-color: var(--cs-rule-strong); }
.cs-btn-secondary:hover { background: var(--cs-surface-2); }
/* ghost = an underlined ink link with a 44px+ target (the landing's text links) */
.cs-btn-ghost { background: transparent; color: var(--cs-link); padding-inline: 4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cs-btn-ghost:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* links that leave the site keep a typographic marker instead of the line icon */
.cs-btn[target="_blank"]::after { content: "\2197"; font-weight: 400; }
.cs-btn-tg { background: var(--cs-tg); color: var(--cs-on-tg); }
.cs-btn-tg:hover { background: var(--cs-tg-hover); }
.cs-btn-danger { background: var(--cs-danger); color: var(--cs-surface); }
.cs-btn-lg { min-height: var(--cs-btn-h-lg); font-size: 17px; padding-inline: 28px; }
.cs-btn[disabled].cs-btn-primary, .cs-btn[aria-disabled="true"].cs-btn-primary { background: var(--cs-surface-2); border-color: var(--cs-rule); color: var(--cs-hint); opacity: 1; }
.cs-btn-sm { min-height: var(--cs-touch); padding: 8px 14px; font-size: var(--cs-fs-sm); }
.cs-btn-block { display: flex; width: 100%; }
.cs-btn[disabled], .cs-btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; }
.cs-btn[aria-busy="true"] { cursor: progress; }
.cs-btn .cs-spinner { width: 18px; height: 18px; border-width: 2px; }
.cs-icon-btn { display: inline-grid; place-items: center; width: var(--cs-touch); height: var(--cs-touch); border-radius: 0; border: 0;
  background: transparent; color: inherit; cursor: pointer; flex: none; }
.cs-icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* ---------- spinner ---------- */
.cs-spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
  animation: cs-spin .8s linear infinite; flex: none; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cs-spinner { animation-duration: 2.4s; } }

/* ---------- cards ---------- */
/* v0.6: a "card" is a ruled section on the paper: one ink rule on top, no box, no fill, no radius */
.cs-card { background: transparent; border: 0; border-block-start: 1px solid var(--cs-rule-strong); border-radius: 0; padding: var(--cs-sp-3) 0 0; }
.cs-card-tight { padding: var(--cs-sp-3) 0 0; border-radius: 0; }
.cs-card-title { font: 700 20px/1.15 var(--cs-font-serif); font-stretch: var(--cs-display-stretch); letter-spacing: 0; text-transform: none; color: var(--cs-text);
  margin-block-end: var(--cs-sp-2); }
[dir="rtl"] .cs-card-title { font-size: 20px; }

/* ---------- badges ---------- */
/* v0.6: a badge is a newspaper flag: bold text after a short accent rule. No pill, no fill. */
.cs-badge { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; font: 700 13px/1.2 var(--cs-font-sans);
  background: none; color: var(--cs-text); white-space: nowrap; }
.cs-badge::before { content: ""; width: 18px; height: 2px; border-radius: 0; background: var(--cs-accent); }
.cs-badge-plain::before { display: none; }
.cs-badge-success { color: var(--cs-text); }
.cs-badge-success::before { background: var(--cs-rule-strong); }
.cs-badge-warn { color: var(--cs-accent-text); }
.cs-badge-danger { color: var(--cs-accent-text); }
.cs-badge-accent { color: var(--cs-text); }
.cs-sample-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px dashed var(--cs-rule-strong); border-radius: 0;
  font: 600 11.5px/1.5 var(--cs-font-sans); color: var(--cs-hint); letter-spacing: .02em; white-space: nowrap; }

/* ---------- status stepper (v0.6: a ruled row, as on the flow-simplify mocks; the current step carries the accent rule) ---------- */
.cs-card:has(> .cs-stepper) { border: 0; padding: 0; }
.cs-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); counter-reset: cs-step;
  border-block-start: 1px solid var(--cs-rule); }
.cs-step { position: relative; display: block; padding-block: 8px 0; padding-inline-end: 4px; margin-block-start: -2px; border-block-start: 3px solid transparent;
  text-align: start; font: 500 13px/1.25 var(--cs-font-sans); color: var(--cs-hint); counter-increment: cs-step; min-width: 0; }
.cs-step::before { display: none; }
.cs-step-dot { display: none; }
.cs-step-label { display: block; overflow-wrap: anywhere; }
.cs-step[data-state="done"] { color: var(--cs-text); }
.cs-step[data-state="done"] .cs-step-label > span:first-child::before { content: "\2713\00a0"; }
.cs-step[data-state="current"] { color: var(--cs-text); font-weight: 700; border-block-start-color: var(--cs-accent); }
.cs-step[data-state="error"] { color: var(--cs-accent-text); font-weight: 700; border-block-start-color: var(--cs-accent); }
.cs-step[data-state="error"] .cs-step-label > span:first-child::before { content: "!\00a0"; }
@media (min-width: 768px) { .cs-step { font-size: 14px; } }

/* ---------- status (hero) card: one per cabinet state, holds the ONE primary action ---------- */
.cs-status { display: grid; gap: var(--cs-sp-4); background: none; border: 0; border-radius: 0; padding: var(--cs-sp-2) 0 0; box-shadow: none; }
.cs-status-head { display: flex; align-items: flex-start; gap: var(--cs-sp-3); }
.cs-status-ico { display: none; } /* v0.6: no icon tile */
.cs-status[data-tone="success"] .cs-status-ico { background: var(--cs-success-soft); color: var(--cs-success); }
.cs-status[data-tone="danger"] { border-block-start: 3px solid var(--cs-accent); padding-block-start: var(--cs-sp-3); }
.cs-status[data-tone="danger"] .cs-status-ico { background: var(--cs-danger-soft); color: var(--cs-danger); }
.cs-status[data-tone="wait"] .cs-status-ico { background: var(--cs-warn-soft); color: var(--cs-warn); }
.cs-status h2 { font-size: 28px; line-height: 1.08; }
.cs-status-text { font: 400 18px/1.5 var(--cs-font-text); color: var(--cs-text-2); max-inline-size: 36em; }
.cs-status-actions { display: grid; gap: var(--cs-sp-2); }
@media (min-width: 768px) {
  .cs-status-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-sp-2) var(--cs-sp-5); }
  .cs-status-actions .cs-btn-primary { min-inline-size: 240px; }
}

/* ---------- alerts ---------- */
/* v0.6: an alert is a note with a 3px rule at the inline start (accent = needs action, ink = done / info). No tint box. */
.cs-alert { display: flex; gap: var(--cs-sp-3); align-items: flex-start; padding: 2px 0; padding-inline: 12px 0; border-radius: 0;
  background: none; color: var(--cs-text); font: 400 15px/1.45 var(--cs-font-sans); border: 0; border-inline-start: 3px solid var(--cs-rule-strong); }
.cs-alert .cs-ico { margin-block-start: 2px; }
.cs-alert b { font-weight: 700; font-size: 16px; }
.cs-alert-success { border-inline-start-color: var(--cs-rule-strong); }
.cs-alert-success > .cs-ico { color: var(--cs-success); }
.cs-alert-warn { border-inline-start-color: var(--cs-accent); }
.cs-alert-warn > .cs-ico { color: var(--cs-warn); }
.cs-alert-danger { border-inline-start-color: var(--cs-accent); }
.cs-alert-danger b { color: var(--cs-accent-text); }
.cs-alert-danger > .cs-ico { color: var(--cs-danger); }
.cs-alert-info > .cs-ico { color: var(--cs-link); }

/* ---------- channel card ---------- */
.cs-channel { display: flex; align-items: center; gap: var(--cs-sp-3); min-width: 0; }
.cs-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--cs-surface-2); border: 1px solid var(--cs-rule-strong); color: var(--cs-text); font: 600 15px/1 var(--cs-font-sans); }
.cs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cs-channel-title { font: 600 var(--cs-fs-md)/1.3 var(--cs-font-sans); color: var(--cs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-channel-handle { font-size: var(--cs-fs-sm); color: var(--cs-hint); }

/* ---------- URL card ---------- */
.cs-url { display: flex; align-items: center; gap: var(--cs-sp-2); min-width: 0; padding: 6px; padding-inline-start: 14px; border: 1px solid var(--cs-rule-strong);
  border-radius: var(--cs-r-sm); background: var(--cs-field); }
.cs-url-text { flex: 1; min-width: 0; font: 500 15px/1.3 var(--cs-font-mono); color: var(--cs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
[dir="rtl"] .cs-url-text { text-align: end; }
.cs-url-lock { color: var(--cs-hint); }

/* ---------- key/value list ---------- */
.cs-kv { display: grid; margin: 0; }
.cs-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cs-sp-3); padding-block: 12px; border-block-end: 1px solid var(--cs-rule);
  font: 400 15px/1.35 var(--cs-font-sans); }
.cs-kv > div:last-child { border-block-end: 0; }
.cs-kv dt { color: var(--cs-hint); }
.cs-kv dd { margin: 0; font-weight: 600; text-align: end; }

/* ---------- help link ---------- */
.cs-help { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: var(--cs-touch); font: 400 var(--cs-fs-sm)/1.4 var(--cs-font-sans); color: var(--cs-hint);
  border-block-start: 1px solid var(--cs-rule); padding-block-start: 4px; }
.cs-help a { font-weight: 600; display: inline-flex; align-items: center; min-height: var(--cs-touch); }

/* ---------- numbered instructions ---------- */
/* v0.6: numbered steps = big display numerals in the accent, rows split by hairlines */
.cs-instructions { list-style: none; margin: 0; padding: 0; counter-reset: cs-ins; display: grid; gap: 0; }
.cs-instructions > li { counter-increment: cs-ins; position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: var(--cs-sp-3);
  padding-block: var(--cs-sp-3) var(--cs-sp-4); border-block-end: 1px solid var(--cs-rule); }
.cs-instructions > li:last-child { border-block-end: 0; }
.cs-instructions > li::before { content: counter(cs-ins); display: block; width: auto; height: auto; border-radius: 0; background: none;
  color: var(--cs-accent-text); font: 800 34px/1 var(--cs-font-serif); font-stretch: 72%; grid-row: span 2; }
[dir="rtl"] .cs-instructions > li::before { font-family: 'yt-display', Georgia, serif; } /* Latin numerals keep the display face */
.cs-ins-title { font: 700 19px/1.3 var(--cs-font-serif); font-stretch: 86%; display: block; padding-block-start: 4px; }
[dir="rtl"] .cs-ins-title { font-stretch: 100%; }
.cs-ins-title .cs-kbd { margin-block: 1px; }
.cs-ins-body { grid-column: 2; color: var(--cs-text-2); font: 400 15px/1.45 var(--cs-font-sans); display: grid; gap: var(--cs-sp-2); margin-block-start: 4px; }
.cs-ins-body:empty { display: none; }
.cs-kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--cs-rule-strong); border-radius: 0; background: transparent;
  font: 600 14px/1.5 var(--cs-font-sans); color: var(--cs-text); white-space: nowrap; }
.cs-perm { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-sp-3); padding: 8px 12px; border-radius: 0;
  background: var(--cs-surface-2); font-size: var(--cs-fs-sm); }
.cs-perm-off { width: 30px; height: 16px; border: 1px solid var(--cs-hint); border-radius: 0; background: none; position: relative; flex: none; }
.cs-perm-off::after { content: ""; position: absolute; inset-block: 2px; inset-inline-start: 2px; width: 9px; border-radius: 0; background: var(--cs-hint); }

/* ---------- copy field ---------- */
.cs-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--cs-rule-strong); border-radius: var(--cs-r-sm);
  background: var(--cs-field); max-inline-size: 100%; }
.cs-copy code { flex: 1 1 9em; min-width: 0; padding: 8px 6px; font: 600 15px/1.3 var(--cs-font-mono); color: var(--cs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.cs-copy .cs-btn { flex: 1 0 auto; min-height: 44px; padding-block: 6px; }
.cs-copied { color: var(--cs-success); }

/* ---------- segmented toggle (billing period) ---------- */
.cs-seg { display: inline-flex; padding: 0; border-radius: var(--cs-r-sm); background: transparent; border: 1px solid var(--cs-rule-strong); gap: 0; overflow: hidden; }
.cs-seg button { min-height: 44px; min-width: 44px; border: 0; background: transparent; padding: 8px 18px; border-radius: 0; cursor: pointer;
  font: 600 var(--cs-fs-sm)/1.1 var(--cs-font-sans); color: var(--cs-text-2); display: inline-flex; align-items: center; gap: 6px; }
.cs-seg button + button { border-inline-start: 1px solid var(--cs-rule-strong); }
.cs-seg button[aria-checked="true"] { background: var(--cs-text); color: var(--cs-surface); }
.cs-seg .cs-save { color: var(--cs-accent-text); font-weight: 700; }
.cs-seg button[aria-checked="true"] .cs-save { color: var(--cs-seg-save); }
.cs-in-telegram .cs-seg button[aria-checked="true"] .cs-save { color: inherit; }
.cs-seg-wrap { padding: 2px; } /* keeps 44px total hit height with the 4px track padding */

/* ---------- plan cards ---------- */
/* v0.6: plans are newspaper columns: an ink rule on top (3px accent when chosen), a hairline between the columns */
.cs-plans { display: grid; gap: var(--cs-sp-6); }
@media (min-width: 900px) {
  .cs-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .cs-plans > .cs-plan + .cs-plan { border-inline-start: 1px solid var(--cs-rule); padding-inline-start: var(--cs-sp-6); }
  .cs-plans > .cs-plan:first-of-type { padding-inline-end: var(--cs-sp-6); }
}
.cs-plan { position: relative; display: flex; flex-direction: column; gap: var(--cs-sp-4); padding: var(--cs-sp-3) 0 var(--cs-sp-2); border-radius: 0;
  background: none; border: 0; box-shadow: inset 0 1px 0 var(--cs-rule-strong); cursor: pointer; transition: box-shadow var(--cs-dur); }
.cs-plan:hover { box-shadow: inset 0 2px 0 var(--cs-rule-strong); }
.cs-plan:has(input:checked) { box-shadow: inset 0 3px 0 var(--cs-accent); }
.cs-plan:has(input:focus-visible) { outline: 2px solid var(--cs-focus); outline-offset: 3px; }
.cs-plan input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.cs-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cs-sp-3); }
.cs-plan-name { font-size: 26px; line-height: 1.08; }
.cs-plan-desc { color: var(--cs-text-2); font: 400 16px/1.45 var(--cs-font-text); margin-block-start: 4px; }
.cs-radio { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--cs-rule-strong); flex: none; display: grid; place-items: center; margin-block-start: 2px; }
.cs-plan:has(input:checked) .cs-radio { border-color: var(--cs-primary); background: var(--cs-primary); }
.cs-plan:has(input:checked) .cs-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-on-primary); }
.cs-price-setup { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cs-price-big { font: 750 var(--cs-fs-3xl)/1 var(--cs-font-serif); font-stretch: 78%; letter-spacing: -.01em; color: var(--cs-text); }
[dir="rtl"] .cs-price-big { font-family: 'yt-display', Georgia, 'Times New Roman', serif; } /* Latin digits keep the display face */
.cs-price-label { display: inline-flex; flex-direction: column; font: 400 var(--cs-fs-sm)/1.25 var(--cs-font-sans); color: var(--cs-text-2); }
.cs-price-label b { color: var(--cs-text); font-weight: 700; }
.cs-recurring { display: grid; gap: 8px; padding: var(--cs-sp-3) 0 0; border-radius: 0; background: none; border-block-start: 1px solid var(--cs-rule); }
.cs-recurring-head { font: 600 14px/1.2 var(--cs-font-sans); color: var(--cs-text-2); letter-spacing: 0; text-transform: none; }
.cs-recurring-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 400 15px/1.3 var(--cs-font-sans); color: var(--cs-hint); }
.cs-rp { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 10px; border-radius: 0; border: 1px solid transparent; color: var(--cs-hint); transition: all var(--cs-dur); }
.cs-rp b { font-weight: 600; font-size: 16px; }
.cs-rp[aria-current="true"] { background: var(--cs-surface); border-color: var(--cs-text); color: var(--cs-text); }
.cs-rp[aria-current="true"] b { font-weight: 800; }
.cs-plan-feats { list-style: none; margin: 0; padding: var(--cs-sp-3) 0 0; border-block-start: 1px solid var(--cs-rule); display: grid; gap: 8px; font: 400 15px/1.4 var(--cs-font-sans); }
.cs-plan-feats li { position: relative; padding-inline-start: 26px; }
.cs-plan-feats li::before { content: ""; position: absolute; inset-inline-start: 3px; inset-block-start: .42em; width: 12px; height: 7px;
  border-left: 1.5px solid var(--cs-text); border-bottom: 1.5px solid var(--cs-text); transform: rotate(-45deg); } /* physical: check marks don't mirror */
/* "Most complete": an in-flow flag above the plan name (accent rule + bold text), not a floating pill */
.cs-plan-badge { position: static; order: -1; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0;
  background: none; color: var(--cs-accent-text); border: 0; font: 700 13px/1.2 var(--cs-font-sans); letter-spacing: 0; text-transform: none; }
.cs-plan-badge::before { content: ""; width: 18px; height: 2px; background: var(--cs-accent); }

/* order summary */
.cs-summary { display: grid; gap: var(--cs-sp-3); }
.cs-summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cs-sp-3); padding-block-start: var(--cs-sp-2);
  border-block-start: 3px solid var(--cs-rule-strong); font: 700 20px/1.2 var(--cs-font-serif); font-stretch: var(--cs-display-stretch); }
.cs-methods { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-sp-2); }
.cs-methods legend { padding: 0; margin-block-end: var(--cs-sp-2); font: 400 var(--cs-fs-sm)/1.3 var(--cs-font-sans); color: var(--cs-hint); }
.cs-method { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--cs-rule-strong);
  border-radius: var(--cs-r-sm); background: var(--cs-field); cursor: pointer; font-family: var(--cs-font-sans); }
.cs-method input { position: absolute; opacity: 0; }
.cs-method:has(input:checked) { border-color: var(--cs-text); box-shadow: inset 0 0 0 2px var(--cs-text); }
.cs-method:has(input:focus-visible) { outline: 2px solid var(--cs-focus); outline-offset: 2px; }
.cs-method-name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.cs-method-sub { display: block; font-size: 12.5px; color: var(--cs-hint); font-weight: 500; }
.cs-method-ico { display: none; } /* v0.6: no icon tiles */

/* ---------- dropzone / upload ---------- */
.cs-dropzone { display: grid; place-items: center; gap: 8px; text-align: center; padding: var(--cs-sp-6) var(--cs-sp-4); border: 1px dashed var(--cs-rule-strong);
  border-radius: 0; background: none; color: var(--cs-text-2); font-family: var(--cs-font-sans); }
.cs-dropzone.is-over { border-style: solid; border-color: var(--cs-accent); background: var(--cs-surface-2); }
.cs-progress { height: 4px; border-radius: 0; background: var(--cs-rule); overflow: hidden; }
.cs-progress > span { display: block; height: 100%; inline-size: var(--p, 40%); background: var(--cs-text); border-radius: 0; }

/* ---------- demo bar (sticky over the watermarked demo) ---------- */
.cs-has-demo-bar { padding-block-end: calc(var(--cs-demo-bar-h, 132px) + var(--cs-safe-bottom)); }
.cs-has-demo-bar.cs-bar-min { padding-block-end: calc(var(--cs-demo-bar-h-min, 76px) + var(--cs-safe-bottom)); }
.cs-demo-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--cs-z-bar); color: var(--cs-bar-ink); background: var(--cs-bar-bg);
  box-shadow: none; border-block-start: 3px solid var(--cs-accent);
  padding: 12px max(16px, var(--cs-safe-right)) calc(12px + var(--cs-safe-bottom)) max(16px, var(--cs-safe-left));
  border-radius: 0; font-family: var(--cs-font-sans); }
.cs-demo-bar-inner { max-width: var(--cs-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "msg min" "cta cta"; gap: 10px 8px; align-items: center; }
.cs-demo-msg { grid-area: msg; display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cs-demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cs-raw-accent); box-shadow: none; flex: none; margin-block-start: 7px; } /* the logo dot */
.cs-demo-title { font: 700 17px/1.25 var(--cs-font-serif); font-stretch: var(--cs-display-stretch); color: var(--cs-bar-ink); }
.cs-demo-sub { font-size: 13.5px; line-height: 1.35; color: var(--cs-bar-hint); }
.cs-demo-bar .cs-btn-primary { grid-area: cta; background: var(--cs-bar-ink); color: var(--cs-bar-bg); border-color: var(--cs-bar-ink); box-shadow: none; } /* paper button on the ink band */
.cs-demo-bar .cs-btn-primary:hover { background: #FFFFFF; }
.cs-demo-min { grid-area: min; color: var(--cs-bar-hint); align-self: start; margin-block-start: -6px; margin-inline-end: -8px; }
.cs-demo-bar :focus-visible { outline-color: var(--cs-bar-ink); }
@media (min-width: 768px) {
  .cs-has-demo-bar { padding-block-end: calc(var(--cs-demo-bar-h, 80px) + var(--cs-safe-bottom)); }
  .cs-demo-bar { border-radius: 0; padding-block: 14px calc(14px + var(--cs-safe-bottom)); }
  .cs-demo-bar-inner { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "msg cta min"; gap: 16px; }
  .cs-demo-bar .cs-btn-primary { min-inline-size: 220px; }
  .cs-demo-min { margin: 0; align-self: center; }
}
/* minimized: a compact pill at the inline-end corner; CTA stays one tap away */
.cs-demo-pill { position: fixed; z-index: var(--cs-z-bar); inset-inline-end: max(16px, var(--cs-safe-right)); inset-block-end: calc(16px + var(--cs-safe-bottom));
  display: none; align-items: center; gap: 8px; min-height: 56px; padding-block: 6px; padding-inline: 16px 6px; border-radius: 0; border-block-start: 3px solid var(--cs-accent);
  background: var(--cs-bar-bg); color: var(--cs-bar-ink); box-shadow: var(--cs-shadow-lg); font: 600 14px/1.2 var(--cs-font-sans); }
.cs-demo-pill .cs-btn { min-height: 44px; padding: 8px 14px; font-size: 14.5px; background: var(--cs-bar-ink); color: var(--cs-bar-bg); border-radius: var(--cs-r-sm); }
.cs-demo-pill .cs-icon-btn { color: var(--cs-bar-hint); border-radius: 0; }
.cs-bar-min .cs-demo-bar { display: none; }
.cs-bar-min .cs-demo-pill { display: inline-flex; }
/* Inside Telegram the CTA moves to MainButton; the bar keeps only the message line */
.cs-in-telegram .cs-demo-bar-inner { grid-template-areas: "msg min"; }
.cs-in-telegram .cs-has-demo-bar, .cs-in-telegram.cs-has-demo-bar { padding-block-end: calc(72px + var(--cs-safe-bottom)); }

/* watermark treatment on demo content */
.cs-watermark { position: fixed; inset: 0; pointer-events: none; z-index: 25; opacity: var(--cs-wm-opacity, .07); background-repeat: repeat;
  background-image: var(--cs-wm-img); }
.cs-preview-chip { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none;
  color: var(--cs-accent-text); font: 700 13px/1.2 var(--cs-font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.cs-preview-chip::before { content: ""; width: 18px; height: 2px; background: var(--cs-accent); }
.cs-wm-img { position: relative; }
.cs-wm-img::after { content: attr(data-wm); position: absolute; inset-block-end: 8px; inset-inline-end: 8px; padding: 3px 8px; border-radius: 0;
  background: rgba(20,18,15,.72); color: #fff; font: 600 11.5px/1.2 var(--cs-font-sans); }

/* ---------- sheet / dialog ---------- */
.cs-scrim { position: fixed; inset: 0; z-index: var(--cs-z-sheet); background: var(--cs-scrim); display: flex; align-items: flex-end; justify-content: center; }
.cs-sheet { position: relative; inline-size: 100%; max-block-size: calc(var(--cs-vh) - 24px); overflow: auto; background: var(--cs-surface); color: var(--cs-text);
  border-radius: 0; border-block-start: 3px solid var(--cs-rule-strong); box-shadow: none;
  padding: 8px max(20px, var(--cs-safe-right)) calc(20px + var(--cs-safe-bottom)) max(20px, var(--cs-safe-left)); }
.cs-sheet-handle { width: 40px; height: 4px; border-radius: 0; background: var(--cs-rule); margin: 4px auto 8px; }
.cs-sheet-close { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; color: var(--cs-hint); }
.cs-sheet-body { display: grid; gap: var(--cs-sp-4); padding-block-start: 8px; }
@media (min-width: 768px) {
  .cs-scrim { align-items: center; padding: 24px; }
  .cs-sheet { max-inline-size: 460px; border-radius: 0; border: 1px solid var(--cs-rule-strong); border-block-start-width: 3px; padding: 28px 32px; }
  .cs-sheet-handle { display: none; }
}
.cs-divider { display: flex; align-items: center; gap: var(--cs-sp-3); color: var(--cs-hint); font: 400 var(--cs-fs-sm)/1.3 var(--cs-font-sans); }
.cs-divider::before, .cs-divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--cs-rule); }
.cs-widget-slot { position: relative; display: grid; place-items: center; gap: 6px; min-block-size: 96px; padding: 14px; border: 1px dashed var(--cs-rule-strong);
  border-radius: 0; background: none; text-align: center; }
.cs-widget-slot-label { position: absolute; inset-block-start: -9px; inset-inline-start: 12px; padding-inline: 6px; background: var(--cs-surface);
  font: 600 11px/1.4 var(--cs-font-mono); color: var(--cs-hint); }
/* stand-in for Telegram's own login widget (mocks only; the real widget is Telegram's iframe).
   No Telegram blue anywhere in our CSS; the mock is an ink button like every Telegram action */
.cs-widget-mock { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 0;
  background: var(--cs-tg); color: var(--cs-on-tg); font: 600 15px/1 var(--cs-font-sans); cursor: pointer; }
.cs-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font: 400 14.5px/1.45 var(--cs-font-sans); color: var(--cs-text-2);
  border-block-start: 1px solid var(--cs-rule); }
.cs-checklist li { display: flex; gap: 10px; align-items: flex-start; padding-block: 8px; border-block-end: 1px solid var(--cs-rule); }
.cs-checklist .cs-ico { color: var(--cs-success); margin-block-start: 2px; }

/* ---------- toast ---------- */
.cs-toast { position: fixed; inset-inline: 16px; inset-block-end: calc(16px + var(--cs-safe-bottom)); z-index: var(--cs-z-toast); max-inline-size: 420px; margin-inline: auto;
  padding: 12px 16px; border-radius: 0; background: var(--cs-text); color: var(--cs-surface); font: 500 15px/1.4 var(--cs-font-sans); box-shadow: none; border-block-start: 3px solid var(--cs-accent);
  opacity: 0; transform: translateY(8px); transition: all var(--cs-dur); pointer-events: none; }
.cs-toast.is-on { opacity: 1; transform: none; }

/* ---------- sign-in sheet: bot deep link is primary on phones, the web widget on desktop ---------- */
.cs-signin { display: flex; flex-direction: column; gap: var(--cs-sp-3); }
.cs-signin-deeplink { order: 1; } .cs-signin-deeplink-hint { order: 2; } .cs-signin-or { order: 3; } .cs-signin-widget { order: 4; }
@media (min-width: 768px) and (hover: hover) {
  .cs-signin-widget { order: 1; } .cs-signin-or { order: 2; } .cs-signin-deeplink { order: 3; } .cs-signin-deeplink-hint { order: 4; }
  .cs-signin-deeplink.cs-btn-tg { background: var(--cs-surface); color: var(--cs-text); border-color: var(--cs-rule-strong); }
  .cs-signin-deeplink.cs-btn-tg .cs-ico { color: var(--cs-tg); }
}

/* ---------- cabinet layout ---------- */
.cs-cabinet { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cs-sp-4); padding-block: var(--cs-sp-4) var(--cs-sp-10); }
.cs-cabinet-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cs-sp-4); align-content: start; min-width: 0; }
/* v0.6: a two-column newspaper grid (7 : 4) split by a hairline, instead of cards side by side */
@media (min-width: 1000px) {
  .cs-cabinet { grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr); gap: 0; padding-block-start: var(--cs-sp-8); align-items: start; }
  .cs-cabinet > :first-child { padding-inline-end: var(--cs-sp-8); }
  .cs-cabinet-side { padding-inline-start: var(--cs-sp-8); border-inline-start: 1px solid var(--cs-rule); align-self: stretch; }
  .cs-cabinet-full { grid-column: 1 / -1; }
}
.cs-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cs-touch); font: 500 15px/1.2 var(--cs-font-sans); color: var(--cs-text); text-decoration: none; }
.cs-back::before { content: "\2190"; } /* typographic arrow instead of the icon */
[dir="rtl"] .cs-back::before { content: "\2192"; }
.cs-back:hover { text-decoration: underline; text-underline-offset: 4px; }
[data-bot] { direction: ltr; unicode-bidi: isolate; }
.cs-pricing-layout { display: grid; gap: var(--cs-sp-5); align-items: start; }
@media (min-width: 1000px) {
  .cs-pricing-layout { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 0; }
  .cs-pricing-layout > :first-child { padding-inline-end: var(--cs-sp-8); }
  .cs-pricing-layout > .cs-summary { position: sticky; inset-block-start: 84px; margin-block-start: 12px; padding-inline-start: var(--cs-sp-8);
    border-inline-start: 1px solid var(--cs-rule); }
}

/* Inside Telegram: status tints are mixed from the Telegram surface so they sit well on any user theme */
.cs-in-telegram {
  --cs-success-soft: color-mix(in srgb, var(--cs-success) 16%, var(--cs-surface));
  --cs-warn-soft: color-mix(in srgb, var(--cs-warn) 16%, var(--cs-surface));
  --cs-danger-soft: color-mix(in srgb, var(--cs-danger) 14%, var(--cs-surface));
  --cs-accent-soft: color-mix(in srgb, var(--cs-primary) 16%, var(--cs-surface));
  --cs-accent-ink: var(--cs-text);
  --cs-rule-strong: color-mix(in srgb, var(--cs-hint) 55%, var(--cs-surface));
}

/* ---- v0.3: optional last step (Full archive can come after Live) ---- */
.cs-step-opt { display: block; font-weight: 400; font-size: 12px; color: var(--cs-hint); }

/* ---- v0.3: "Manage your site" links in the cabinet side column ---- */
.cs-tools { list-style: none; margin: 0; padding: 0; display: grid; }
.cs-tools li + li { border-block-start: 1px solid var(--cs-rule); }
.cs-tools li:has(> [hidden]) { display: none; }
.cs-tool { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-block: 6px; color: var(--cs-text); text-decoration: none; font-weight: 600; font-size: var(--cs-fs-sm); }
.cs-tool:hover .cs-grow { text-decoration: underline; }
.cs-tool { font-family: var(--cs-font-sans); }

/* ---- v0.3: collapsible export how-to inside cabinet state d ---- */
.cs-archive-how { border: 0; border-block: 1px solid var(--cs-rule); border-radius: 0; padding: 0; background: none; }
.cs-archive-how > summary { min-height: 48px; padding-block: 13px; box-sizing: border-box; cursor: pointer; font: 600 15px/1.3 var(--cs-font-sans); }
.cs-archive-how[open] { padding-block-end: var(--cs-sp-4); }
.cs-archive-how[open] > summary { margin-block-end: 8px; }
@media (max-width: 420px) { .cs-url-text { font-size: 13.5px; letter-spacing: -.01em; } }
/* launch-review fix P1-C3 (30 Sep): keep the word; .cs-ico is hidden globally, so a visually-hidden label left an empty box */
@media (max-width: 420px) { .cs-url .cs-btn { padding-inline: 12px; } .cs-url .cs-copy-label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; } }

/* =====================================================================
   v0.5 (simplified flow, adopted 30 Sep 2026). Additive only: no v0.4 class was renamed or removed.
   ===================================================================== */
/* device utilities: "touch" = no hover or narrower than 768px; "hover" = desktop with a mouse */
@media (max-width: 767px), (hover: none) { .cs-hover-only { display: none !important; } }
@media (min-width: 768px) and (hover: hover) { .cs-touch-only { display: none !important; } }
/* site address inside running text (always LTR, mono) */
.cs-site { font: 600 0.94em/1.3 var(--cs-font-mono); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }

/* channel line above the status (replaces kicker + H1 + channel card) */
.cs-channel-line { display: flex; align-items: center; gap: 10px; min-width: 0; font: 500 15px/1.3 var(--cs-font-sans); color: var(--cs-hint); }
.cs-channel-line .cs-avatar { width: 32px; height: 32px; font-size: 12px; border-width: 1px; }
.cs-channel-line b { color: var(--cs-text); font-weight: 600; }

/* status card, v0.5 layout: optional flag, title, one paragraph, one primary, a "Next" line. No icon tile, no badge soup. */
.cs-status-title { font: 750 34px/1.04 var(--cs-font-serif); font-stretch: var(--cs-display-stretch); letter-spacing: -.01em; color: var(--cs-text); text-wrap: balance; }
@media (min-width: 960px) { .cs-status-title { font-size: 44px; } }
[dir="rtl"] .cs-status-title { font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.cs-status-url { font: 600 17px/1.3 var(--cs-font-mono); direction: ltr; unicode-bidi: isolate; text-align: start; overflow-wrap: anywhere; color: var(--cs-text); }
[dir="rtl"] .cs-status-url { text-align: end; }
.cs-status > .cs-badge { justify-self: start; }
.cs-next { padding-block-start: var(--cs-sp-3); border-block-start: 1px solid var(--cs-rule); font: 400 15px/1.45 var(--cs-font-sans); color: var(--cs-text-2); }
.cs-next b { color: var(--cs-text); }
.cs-next a { font-weight: 600; }

/* waiting line (spinner + text), used while polling */
.cs-wait { display: flex; align-items: center; gap: 10px; font: 400 15px/1.4 var(--cs-font-sans); color: var(--cs-text-2); }
.cs-wait .cs-spinner { width: 16px; height: 16px; border-width: 2px; color: var(--cs-accent); flex: none; }
/* auto-advance countdown under a success result ("Opening plans in 3 s") */
.cs-countdown { font: 400 var(--cs-fs-sm)/1.4 var(--cs-font-sans); color: var(--cs-hint); }

/* generic disclosure (same look as .cs-archive-how) */
/* v0.6: a ruled disclosure (hairline above and below, +/− at the end) */
.cs-more { border: 0; border-block: 1px solid var(--cs-rule); border-radius: 0; padding: 0; background: none; }
.cs-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 12px;
  cursor: pointer; font: 600 15px/1.3 var(--cs-font-sans); }
.cs-more > summary::-webkit-details-marker { display: none; }
.cs-more > summary::after { content: "+"; flex: none; font: 400 22px/1 var(--cs-font-sans); }
.cs-more[open] > summary::after { content: "\2212"; }
.cs-more[open] { padding-block-end: var(--cs-sp-4); }
.cs-more-body { display: grid; gap: var(--cs-sp-3); font: 400 15px/1.5 var(--cs-font-sans); color: var(--cs-text-2); }
.cs-more dl { margin: 0; display: grid; gap: 10px; }
.cs-more dt { font-weight: 700; color: var(--cs-text); }
.cs-more dd { margin: 2px 0 0; line-height: 1.9; }

/* wireframe of a Telegram screen inside a step: what the owner will see, labels as Telegram shows them (not real UI) */
.cs-tgscr { max-inline-size: 300px; border: 1px solid var(--cs-rule-strong); border-radius: 0; background: var(--cs-field); overflow: hidden;
  font: 500 13px/1.3 var(--cs-font-sans); color: var(--cs-text); }
.cs-tgscr-bar { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; font-weight: 700; background: none; border-block-end: 1px solid var(--cs-rule); }
.cs-tgscr-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-block-end: 1px solid var(--cs-rule); }
.cs-tgscr-row:last-child { border-block-end: 0; }
.cs-tgscr-row .cs-ltr { color: var(--cs-hint); }
.cs-tgscr .is-hit { box-shadow: inset 0 0 0 2px var(--cs-accent); } /* the accent marks what to tap */
.cs-tgscr-btn { margin: 8px 10px; padding: 7px; border-radius: 0; text-align: center; font-weight: 700; box-shadow: inset 0 0 0 2px var(--cs-accent); }
.cs-tgscr-sw { position: relative; flex: none; width: 26px; height: 14px; border: 1px solid var(--cs-hint); border-radius: 0; background: none; }
.cs-tgscr-sw::after { content: ""; position: absolute; inset-block: 2px; inset-inline-start: 2px; width: 8px; border-radius: 0; background: var(--cs-hint); }

/* folder drop zone (archive): the dropzone accepts a folder or a .zip */
.cs-dropzone b { color: var(--cs-text); font-size: var(--cs-fs-md); }
.cs-dropzone input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.cs-dropzone { position: relative; }
.cs-dropzone:has(input:focus-visible) { outline: 2px solid var(--cs-focus); outline-offset: 3px; }
/* links inside key/value rows keep a 44px target without making the row taller */
.cs-kv dd a { display: inline-block; line-height: var(--cs-touch); min-height: var(--cs-touch); margin-block: -12px; font-weight: 600; }

/* =====================================================================
   DARK THEME (v0.5) · component rules. Separate from the v0.5 flow section above; ship either one alone.
   The cabinet kit needs NO dark-only component rules: every component reads --cs-* tokens, and the dark
   values live in tokens.css "DARK THEME" (D1 palette, D3 logo swap). This section only adds an OPTIONAL
   theme toggle for the cabinet top bar (same behaviour as the landing: ../theme-toggle.js).
   Markup: <button class="cs-theme-toggle" type="button" aria-pressed="false" data-theme-toggle>
             <span class="cs-theme-toggle-box" aria-hidden="true"></span><span>Dark</span></button>
   ===================================================================== */
.cs-theme-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: var(--cs-touch); min-width: var(--cs-touch); padding: 0 10px;
  border: 0; border-radius: var(--cs-r-sm); background: none; color: var(--cs-text); font: 500 14px/1 var(--cs-font-sans); cursor: pointer; }
.cs-theme-toggle:hover { background: var(--cs-surface-2); }
.cs-theme-toggle:focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 2px; }
.cs-theme-toggle-box { flex: none; width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; box-shadow: inset 4px 0 0 currentColor; }
.cs-theme-toggle[aria-pressed="true"] .cs-theme-toggle-box { background: currentColor; }
[dir="rtl"] .cs-theme-toggle-box { transform: scaleX(-1); }
.cs-in-telegram .cs-theme-toggle { display: none; }   /* Mini App: Telegram owns the theme */
/* ======================= end DARK THEME ======================= */

/* =====================================================================
   v0.5.1 (verify redo, 30 Sep 2026): ownership via Telegram's chat chooser, code-in-description fallback,
   consent checkbox, optional bot, cabinet sync line. Additive only; independent of the DARK THEME section.
   ===================================================================== */
/* wireframe bits: a bot message, a reply-keyboard button, a blank title bar (we don't invent Telegram's chooser title) */
.cs-tgscr-msg { display: block; margin: 8px 10px; padding: 7px 10px; border-radius: 0; background: var(--cs-surface-2); max-inline-size: 85%; }
.cs-tgscr-key { display: block; margin: 8px 10px 10px; padding: 8px; border-radius: 0; text-align: center; font-weight: 700;
  background: none; box-shadow: inset 0 0 0 2px var(--cs-accent); }
.cs-tgscr-ph { display: block; inline-size: 40%; block-size: 8px; margin-block: 4px; border-radius: 0; background: var(--cs-rule); }
/* a button that reads as a link inside running text, with a 44px target */
.cs-link-btn { display: inline-block; min-height: var(--cs-touch); line-height: var(--cs-touch); margin-block: -12px; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--cs-link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* one-time code: larger mono, letter-spaced so it's easy to read back */
.cs-code code { font-size: 20px; letter-spacing: .1em; }
/* consent (cabinet.consent.v1) */
.cs-consent { display: grid; gap: var(--cs-sp-2); }
.cs-check { display: flex; gap: 12px; align-items: flex-start; min-height: var(--cs-touch); padding: 12px 14px; border: 1px solid var(--cs-rule-strong);
  border-radius: var(--cs-r-sm); background: var(--cs-field); font: 400 16px/1.45 var(--cs-font-text); color: var(--cs-text); cursor: pointer; }
.cs-check input { flex: none; inline-size: 22px; block-size: 22px; margin: 0; margin-block-start: 1px; accent-color: var(--cs-text); cursor: pointer; }
.cs-check:has(input:focus-visible) { outline: 2px solid var(--cs-focus); outline-offset: 2px; }
.cs-check:has(input:checked) { border-color: var(--cs-rule-strong); border-inline-start: 3px solid var(--cs-accent); padding-inline-start: 12px; }
/* optional "Add the bot" block */
.cs-optional-title { font: 700 20px/1.15 var(--cs-font-serif); font-stretch: var(--cs-display-stretch); color: var(--cs-text); }
/* cabinet sync line: "Updated 12 min ago · about every 20 min" / "Bot connected · instant sync" */
.cs-sync { display: flex; align-items: center; gap: 8px; font: 400 var(--cs-fs-sm)/1.4 var(--cs-font-sans); color: var(--cs-text-2); }
.cs-sync-dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: none; border: 1.5px solid var(--cs-hint); }
.cs-sync.is-instant .cs-sync-dot { background: var(--cs-accent); border-color: var(--cs-accent); box-shadow: none; }
/* ======================= end v0.5.1 ======================= */

/* =====================================================================
   v0.6 restyle · shared-page alignment. pinned.css (the pinned editor) reads the same tokens, so it restyles by itself;
   these few rules only undo its uppercase sub-heading and decorative icon tiles (higher specificity, no pinned.css change).
   ===================================================================== */
.cs-wrap .pn-subh { text-transform: none; letter-spacing: 0; font: 700 18px/1.2 var(--cs-font-serif); font-stretch: var(--cs-display-stretch); color: var(--cs-text); }
.cs-wrap .pn-empty-ico { display: none; }
.cs-wrap .pn-counter { border: 1px solid var(--cs-rule-strong); border-radius: 0; background: none; color: var(--cs-text); }
.cs-wrap .pn-pos { border-radius: 0; background: none; color: var(--cs-accent-text); font: 800 18px/1 var(--cs-font-serif); font-stretch: 72%; }
.cs-wrap .pn-field-ico { display: none; }
.cs-wrap .pn-field { border-width: 1px; border-radius: var(--cs-r-sm); background: var(--cs-field); }
.cs-wrap .pn-item { border-inline: 0; border-block-start: 0; border-radius: 0; background: none; }
/* Site Platform's own cabinet.css (loads after this file) has one uppercase eyebrow, the footer column heading;
   body-prefixed so it wins without editing cabinet.css. Harmless where the class isn't used. */
body .cab-footer-h { text-transform: none; letter-spacing: 0; font: 700 16px/1.2 var(--cs-font-serif); font-stretch: var(--cs-display-stretch); color: var(--cs-text); }
body .cab-menu { border-color: var(--cs-rule-strong); }
/* ======================= end v0.6 ======================= */