.sub-status-row { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.sub-status-row > div { display: flex; flex-direction: column; gap: var(--space-1); }

/* 2026-07-13 — Підписка redesign: three cards (overview / products /
   license+connection) instead of one long unbroken card, each internally
   split by .sub-divider rather than bare stacked rows — see
   settings-subscription.js's header comment for the full rationale. */
.sub-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.sub-card-head h2 { margin: 0; }
.sub-divider { height: 1px; background: var(--color-border); border: 0; margin: var(--space-4) 0; }

/* One glanceable status indicator, shared by the card header and the
   License block (settings-subscription.js's statusPillHTML) — a dot plus a
   word, never color alone (color-not-decorative-only). */
.status-pill { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot--success { background: var(--color-success); }
.status-dot--warn { background: var(--color-warning); }
.status-dot--danger { background: var(--color-danger); }
.status-dot--muted { background: var(--color-fg-subtle); }

/* A tinted block for a modal's important-but-not-a-form-error text
   (Cloudflare-token custody, "this logs everyone out"), replacing a plain
   <p> wall of text — an icon + surface tint reads as "worth noting"
   without the weight of the danger palette, which is reserved for errors. */
.info-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); color: var(--color-fg-muted); line-height: 1.5; }
.info-card .icon { flex-shrink: 0; margin-top: 2px; color: var(--color-fg-subtle); }
.info-card--warning { background: var(--color-warning-soft); color: var(--color-fg); }
.info-card--warning .icon { color: var(--color-warning); }

/* A value line that mixes body text with a small chip and/or a button
   (e.g. "11.07.2026, 02:00 [Активний] [Перевірити зараз]") — align-items:
   center keeps the chip's smaller font-size from reading as a mismatch,
   and keeps the button on the same line as what it acts on instead of a
   separate flex column that visually floats apart from its context. */
.sub-check-line { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.sub-key-input { font-family: var(--font-mono, monospace); font-size: var(--text-sm); resize: vertical; }

.btn--danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:hover:not(:disabled) { background: var(--color-danger-soft); }

.table-wrap { overflow-x: auto; margin-bottom: var(--space-2); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th { text-align: left; color: var(--color-fg-muted); font-weight: var(--font-medium); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.data-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: none; }

.chip { display: inline-block; font-size: var(--text-xs); padding: 2px 10px; border-radius: var(--radius-full); background: var(--color-surface-hover); color: var(--color-fg-muted); }
.chip--success { background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 14%, transparent)); color: var(--color-primary); }
.chip--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.chip--warn { background: var(--color-warning-soft); color: var(--color-warning); }

/* 2026-07-13 — app version, one slim line (not a big centered box — a
   version number doesn't deserve its own prominent card). --update tints
   the row warm without being as alarming as the danger palette. */
.sub-version-card {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2);
  background: var(--color-surface-hover); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4);
  border: 1px solid var(--color-border); font-size: var(--text-sm);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.sub-version-card--update { background: var(--color-warning-soft); border-color: var(--color-warning); }
.sub-version-card__note { color: var(--color-warning); font-weight: var(--font-medium); }

/* 2026-07-12 — the license-key activation modal centers its own placeholder
   (:placeholder-shown only matches while empty) but reverts to left-aligned
   once a long pasted key is actually typed in, since a centered multi-line
   token would be hard to read/verify. */
.sub-key-input:placeholder-shown { text-align: center; }

/* 2026-07-13 — a small "?" affordance next to a heading whose meaning
   ("З'єднання з License Admin") isn't self-evident. Pure-CSS tooltip (no
   permanent on-page text, no JS) — content lives in data-tooltip and only
   renders on hover/focus via ::after, dismissed the instant the pointer/
   focus leaves. aria-label carries the same text for screen readers, since
   ::after content is decorative and invisible to them. */
.sub-help-heading { display: flex; align-items: center; gap: var(--space-2); }
.sub-help-icon {
  display: inline-flex; position: relative; color: var(--color-fg-subtle); cursor: help; border-radius: var(--radius-full);
}
.sub-help-icon:hover, .sub-help-icon:focus-visible { color: var(--color-primary); }
.sub-help-icon:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.sub-help-icon::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 280px; text-align: left; white-space: normal;
  background: var(--color-fg); color: var(--color-bg);
  font-size: var(--text-xs); font-weight: var(--font-normal); line-height: 1.4;
  text-transform: none; letter-spacing: normal;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); z-index: 10;
}
.sub-help-icon:hover::after, .sub-help-icon:focus-visible::after { opacity: 1; }
@media (max-width: 480px) { .sub-help-icon::after { left: 0; transform: none; } }

/* 2026-07-19 — ported verbatim from HRlume-Admin's admin.css (same class
   names, same variables): the update-request modal asks for the same kind
   of Cloudflare API token as Admin's provision modal, so it gets the same
   numbered section title + token-help card answering "which token?" with a
   one-click pre-scoped template link instead of a wall of prose. */
.form-section-title {
  font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-fg-muted);
  padding-top: var(--space-2); border-top: 1px solid var(--color-border);
}
.form-section-title:first-child { padding-top: 0; border-top: none; }
.token-help {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-primary-soft); border-radius: var(--radius-lg);
  padding: var(--space-4); font-size: var(--text-sm);
}
.token-help p { margin: 0; }
.token-help__lead { color: var(--color-fg); }
.token-help__cta { align-self: flex-start; background: var(--color-surface); }
.token-help__details summary { cursor: pointer; font-weight: var(--font-medium); color: var(--color-primary); }
.token-help__details ul { margin: var(--space-2) 0; padding-left: var(--space-5); }
.token-help__details li { font-family: var(--font-mono); font-size: var(--text-xs); padding: 2px 0; }
.token-help__details p { color: var(--color-fg-muted); font-size: var(--text-xs); }
.token-help__note { color: var(--color-fg-muted); font-size: var(--text-xs); }

/* 2026-07-30 — subscription workspace: a prominent health overview followed
   by entitlements and compact controls. API actions and IDs are unchanged. */
.sub-page { width: min(1120px, 100%); margin: 0 auto; padding-bottom: var(--space-10); }
.sub-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5);
  margin: var(--space-3) 0 var(--space-6);
}
.sub-page-head__eyebrow {
  display: block; margin-bottom: 5px; color: var(--color-primary);
  font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase;
}
.sub-page-head h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.2rem); letter-spacing: -.045em; }
.sub-page-head p { max-width: 660px; margin: 7px 0 0; color: var(--color-fg-muted); font-size: var(--text-sm); }
.sub-page-head > .status-pill {
  padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); box-shadow: var(--shadow-xs);
}
.sub-overview-card {
  position: relative; padding: clamp(22px, 4vw, 34px); overflow: hidden;
  border-color: color-mix(in srgb, var(--color-primary) 17%, var(--color-border));
  border-radius: 22px; background:
    linear-gradient(120deg, color-mix(in srgb, var(--color-primary-soft) 64%, var(--color-surface)), var(--color-surface) 52%);
  box-shadow: var(--shadow-sm);
}
.sub-overview-card__glow {
  position: absolute; width: 340px; height: 340px; right: -130px; top: -190px;
  border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--color-primary) 13%, transparent);
  filter: blur(2px);
}
.sub-overview-card__title {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.sub-overview-card__title > span {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 14px; background: linear-gradient(145deg, var(--color-primary), var(--color-accent));
  color: var(--color-on-primary); box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 23%, transparent);
}
.sub-overview-card__title small {
  display: block; margin-bottom: 2px; color: var(--color-fg-muted);
  font-size: 10px; font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase;
}
.sub-overview-card__title strong { display: block; font-size: var(--text-lg); }
.sub-overview-card .sub-status-row {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--color-border);
  border-radius: 14px; background: var(--color-border);
}
.sub-overview-card .sub-status-row > div {
  min-width: 0; padding: var(--space-4); background: color-mix(in srgb, var(--color-surface) 93%, transparent);
}
.sub-overview-card .sub-status-row > div:only-child { grid-column: 1 / -1; }
.sub-overview-card .sub-status-row > div > div { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.sub-overview-card .sub-divider { display: none; }
.sub-overview-card .sub-version-card {
  justify-content: flex-start; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0;
  border: 0;
  border-radius: 0; background: transparent;
}
.sub-overview-card #sub-status > .sub-check-line { margin-top: var(--space-5); }
.sub-overview-card #sub-status > .sub-status-row + .sub-status-row { margin-top: var(--space-4); }
.sub-overview-card .sub-version-card .btn { margin-left: auto; }
.sub-content-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr);
  gap: var(--space-5); align-items: start; margin-top: var(--space-5);
}
.sub-products-card, .sub-control-card { border-radius: 20px; }
.sub-products-card { padding: var(--space-6); }
.sub-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.sub-section-head span {
  display: block; margin-bottom: 4px; color: var(--color-primary);
  font-size: 10px; font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase;
}
.sub-section-head h2 { margin: 0; font-size: var(--text-lg); }
.sub-section-head p { margin: 5px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); line-height: 1.45; }
.sub-products-card .table-wrap { margin: 0; border: 1px solid var(--color-border); border-radius: 14px; }
.sub-products-card .data-table th { padding: 11px var(--space-4); background: var(--color-surface-2); font-size: var(--text-xs); }
.sub-products-card .data-table td { padding: var(--space-4); }
.sub-products-card .data-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.sub-products-card .data-table tbody tr:hover { background: var(--color-surface-hover); }
.sub-products-card .data-table strong { display: inline-block; margin-bottom: 3px; }
.sub-side-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.sub-control-card { position: relative; padding: var(--space-6); overflow: visible; }
.sub-control-card__icon {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: var(--space-4);
  border-radius: 13px; background: var(--color-primary-soft); color: var(--color-primary);
}
.sub-control-card__icon--link { background: var(--color-success-soft); color: var(--color-success); }
.sub-control-card__status { padding: var(--space-3); margin-bottom: var(--space-4); border-radius: 11px; background: var(--color-surface-2); }
.sub-control-card .sub-section-head { margin-bottom: var(--space-4); }
.sub-control-card .sub-help-heading { font-size: var(--text-base); }
.sub-control-card #sub-pairing > .dash-empty { margin: 0 0 var(--space-4); line-height: 1.5; }
.sub-control-card #sub-pairing .btn { width: 100%; justify-content: center; }
.sub-control-card .sub-check-line .btn { flex: 1 1 auto; justify-content: center; }

@media (max-width: 900px) {
  .sub-content-grid { grid-template-columns: minmax(0, 1fr); }
  .sub-side-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-content-grid > *,
  .sub-side-stack,
  .sub-control-card,
  .sub-products-card { min-width: 0; }
  .sub-help-heading,
  .sub-section-head h2 { overflow-wrap: anywhere; }
}
@media (max-width: 680px) {
  .sub-page-head { align-items: flex-start; flex-direction: column; }
  .sub-overview-card .sub-status-row { grid-template-columns: 1fr; }
  .sub-side-stack { grid-template-columns: 1fr; }
  .sub-overview-card .sub-version-card .btn { width: 100%; margin-left: 0; }
}