:root {
  --page-bg: #ffffff;
  --surface: #f3f5ef;
  --surface-secondary: #e8ecdf;
  --border: #dce0d5;
  --text: #1b1e18;
  --muted: #666b60;
  --accent: #1b1e18;
  --accent-text: #ffffff;
  --highlight: #d6fb54;
  --highlight-soft: #edf7d6;
  --brand-green: #557f00;
  color: var(--text);
  background: var(--page-bg);
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 100% 0, rgb(214 251 84 / 22%), transparent 31%),
    var(--page-bg);
}

.page {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 32px 16px 44px;
}

.initial-loader {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.initial-loader-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--surface-secondary);
  border-top-color: var(--brand-green);
  border-radius: 50%;
  animation: initial-loader-spin 700ms linear infinite;
}

@keyframes initial-loader-spin {
  to { transform: rotate(360deg); }
}

.hero { padding: 12px 6px 26px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0;
}

.brand-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  padding-right: 2px;
  color: var(--text);
  background: var(--highlight);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -3px;
}

.brand-wordmark {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -1.2px;
}

.brand-wordmark > span { font-weight: 400; }

.app-version {
  border: 1px solid #cdd4c0;
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
}

h1, h2, h3, p { margin-top: 0; }

h1 { margin-bottom: 9px; font-size: 32px; letter-spacing: -.04em; line-height: 1.1; }
h2 { margin-bottom: 0; font-size: 18px; }
h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }

.page-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.page-title-row h1 { margin-bottom: 9px; }

.page-title-row .count {
  flex-shrink: 0;
  margin-bottom: 9px;
}

.tariff-help {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  margin-bottom: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
  padding: 0;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.tariff-help[hidden] { display: none; }

.tariff-help-modal {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(16 29 47 / 42%);
}

.tariff-help-modal[hidden] { display: none; }

.tariff-help-dialog {
  width: min(520px, calc(100vw - 40px));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 18px;
  padding: 14px 16px 16px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 11%, transparent), transparent 48%),
    var(--surface);
  box-shadow: 0 22px 52px rgb(14 31 54 / 30%);
}

.tariff-help-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  justify-content: end;
  margin: -7px -9px 1px;
}

.tariff-help-dialog-header h3 { font-size: 18px; }

.tariff-help-close {
  display: inline-flex;
  width: 44px;
  height: 28px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
}

.tariff-help-close:active,
.category-picker-close:active {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.modal-back-arrow {
  display: block;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
}

.tariff-help-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tariff-help-item {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.tariff-help-number {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.tariff-help-standard,
.tariff-help-premium {
  font-weight: 800;
}

.tariff-help-standard { color: var(--accent); }
.tariff-help-premium { color: #d99016; }
.tariff-help-premium-item .tariff-help-number { background: var(--accent); }

.subtitle, .details, .empty { color: var(--muted); }
.subtitle {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 16px;
}

.subtitle[hidden] { display: none !important; }

.viewer-primary-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.viewer-name { color: var(--muted); }

.viewer-status-icon {
  font-size: 14px;
  line-height: 1;
}

.viewer-details-line {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.back-button {
  margin: 0 0 14px;
  border: 0;
  padding: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-weight: 700;
}

.status, .integration-card {
  border-radius: 16px;
  background: var(--surface);
}

.status { margin-bottom: 24px; padding: 14px 16px; color: var(--muted); }
.status-error { color: #f19a9a; }

.loading-dots span {
  display: inline-block;
  animation: loading-dot-first 1.2s steps(1, end) infinite;
}

.loading-dots span:nth-child(2) { animation-name: loading-dot-second; }
.loading-dots span:nth-child(3) { animation-name: loading-dot-third; }

@keyframes loading-dot-first {
  0%, 24% { opacity: 0; }
  25%, 100% { opacity: 1; }
}

@keyframes loading-dot-second {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes loading-dot-third {
  0%, 74% { opacity: 0; }
  75%, 100% { opacity: 1; }
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-heading[hidden] { display: none !important; }

.count {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.count[hidden] { display: none; }

.integration-list { display: grid; gap: 14px; }

.information-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
}

.information-links[hidden] { display: none; }

.information-footer-link {
  border: 0;
  padding: 6px 2px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}

.information-footer-link:active { color: var(--accent); }
.information-footer-separator { color: color-mix(in srgb, var(--muted) 65%, transparent); }

.information-dialog .tariff-help-dialog-header {
  justify-content: space-between;
  margin: -2px -5px 10px 0;
}

.information-dialog .tariff-help-dialog-header h3 { font-size: 19px; }
.information-close-symbol { font-size: 27px; font-weight: 400; line-height: 1; }
.information-choice-list { display: grid; gap: 8px; }

.information-choice {
  display: flex;
  min-width: 0;
  min-height: 60px;
  align-items: center;
  gap: 12px;
  border-radius: 13px;
  padding: 10px 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  text-decoration: none;
}

.information-choice:active { opacity: .72; }
.information-choice-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 11px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  font-size: 18px;
  object-fit: contain;
}
.information-choice-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.information-choice-title { min-width: 0; font-size: 14px; font-weight: 700; }
.information-choice-detail { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.information-choice-arrow { flex: 0 0 auto; color: var(--accent); font-size: 24px; }
.information-empty { margin: 10px 4px; color: var(--muted); font-size: 14px; }

.integration-card {
  display: block;
  overflow: hidden;
  padding: 19px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 17%, transparent), transparent 44%),
    linear-gradient(150deg, color-mix(in srgb, var(--surface) 88%, var(--accent)), var(--surface));
}

.interactive-card {
  width: 100%;
  border: 0;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.interactive-card:active { opacity: .78; }

.integration-card-content {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
}

.integration-card-header,
.usage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.integration-title-row {
  display: flex;
  align-items: center;
  width: calc(100% - 48px);
  min-width: 0;
  gap: 6px;
}

.integration-title {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  overflow: hidden;
  font-size: clamp(14px, 4.4vw, 17px);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integration-title-row.has-ready-drafts .integration-title {
  flex: 0 1 auto;
}

.integration-draft-alert {
  flex: 0 0 auto;
  margin-left: 4px;
  color: #f1a52e;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.integration-card:not(.integration-card-collapsed):has(.quota-draft-signal) .integration-draft-alert {
  display: none;
}

.integration-lock {
  display: grid;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  place-items: center;
  margin-top: -2px;
  font-size: 12px;
  line-height: 1;
}

.integration-card-header,
.integration-card-content .integration-card-header {
  display: block;
  position: relative;
}

.integration-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  padding-right: 0;
}

.integration-header-actions[hidden] { display: none !important; }

.integration-header-actions .role {
  align-self: auto;
}

.role {
  display: inline-flex;
  align-items: center;
  align-self: start;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.role-platform { vertical-align: middle; }

.plan-badge {
  background: color-mix(in srgb, var(--accent) 88%, #5b6eff);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent) 22%, transparent);
}

.plan-premium {
  color: #2a1d00;
  background: linear-gradient(135deg, #ffd36b, #f5ae35);
  box-shadow: 0 5px 15px rgb(245 174 53 / 27%);
}

.plan-inactive {
  color: #fff;
  background: #657082;
  box-shadow: none;
}

.subscription-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.subscription-note {
  display: block;
  margin: 3px 0 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.content-category-label {
  display: block;
  margin: -6px 0 13px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.content-category-status {
  color: #fff;
  background: #35b875;
  box-shadow: 0 6px 14px rgb(46 165 104 / 18%);
}

.category-collector-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin-right: 7px;
  border-radius: 50%;
  background: #32bb70;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgb(18 35 27 / 8%);
}

.category-collector-error {
  background: #fb4c29;
}

.category-collector-stale {
  background: #e6b91e;
}

.category-collector-reading {
  background: #f3a426;
  animation: collector-reading-pulse 850ms ease-in-out infinite alternate;
}

@keyframes collector-reading-pulse {
  from { opacity: .35; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

.action-button.category-tariff-button {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 76%, #5d77ff));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 23%, transparent);
}

.channel-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  margin-top: 6px;
}

.channel-status-row-confirmed {
  animation: channel-status-confirmed 320ms ease-out;
}

@keyframes channel-status-confirmed {
  from { opacity: .35; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.channel-connected-badge {
  display: inline-flex;
  margin: 0;
}

.content-category-status {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-status-toggle {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #319e69;
  border-radius: 50%;
  padding: 0;
  color: #fff;
  background: linear-gradient(135deg, #3db77a, #299b63);
  box-shadow: 0 4px 10px rgb(46 165 104 / 18%);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.category-status-toggle .category-collector-dot {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  margin: 0;
  border-width: 2px;
  box-shadow: none;
}

.category-status-toggle.is-expanded {
  width: auto;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: clamp(10px, 3.4vw, 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-status-toggle.is-expanded .category-collector-dot {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  border-width: 2px;
}

.resource-setup-notice {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.subscription-active { color: #3dae75; }
.subscription-past-due { color: #e3a83b; }
.subscription-cancelled, .subscription-unknown { color: var(--muted); }

.draft-signal {
  background: #f1a52e;
  color: #201300;
  cursor: pointer;
}

.source-settings {
  margin-top: 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
}

.source-settings h3 {
  margin: 0 0 10px;
}

.channel-settings {
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.channel-settings-caption {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.channel-connect-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}

.channel-reference-input {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  padding: 10px 11px;
  color: var(--text);
  background: color-mix(in srgb, var(--page-bg) 35%, var(--surface));
  font: inherit;
}

.channel-connect-button { white-space: nowrap; }

.channel-setting {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-secondary) 82%, var(--page-bg));
}

.channel-title, .channel-reference { display: block; }
.channel-title { font-size: 14px; font-weight: 750; }
.channel-reference { margin-top: 3px; color: var(--muted); font-size: 12px; }
.channel-verify-button { width: 100%; }

.source-setting {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-secondary) 82%, var(--page-bg));
  margin-bottom: 12px;
  padding: 14px;
}

.source-setting p {
  margin: 5px 0 0;
}

.resource-ready, .resource-awaiting {
  display: block;
  margin-top: 7px;
  font-size: 12px;
}
.resource-ready { color: #58c98b; }
.resource-awaiting { color: var(--muted); }

.collector-health {
  margin: 10px 0 12px;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--page-bg) 48%, transparent);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.collector-health-run, .collector-health-counters, .collector-health-published, .collector-health-success, .collector-health-stale, .collector-health-error { display: block; }
.collector-health-counters { margin-top: 2px; }
.collector-health-published { margin-top: 2px; color: var(--muted); }
.collector-health-success { color: #58c98b; }
.collector-health-stale { margin-top: 5px; color: #a57a00; }
.collector-health-error { margin-top: 5px; color: #e45d64; overflow-wrap: anywhere; }

.resource-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.resource-url { display: inline-block; margin-top: 6px; color: var(--accent); font-size: 12px; text-decoration: none; }

.source-active {
  color: #0e2a1b;
  background: #58c98b;
}

.resource-timers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.resource-timer-field {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--page-bg) 35%, transparent);
}

.resource-timer-label, .resource-timer-value { display: block; }
.resource-timer-label { color: var(--muted); font-size: 11px; }
.resource-timer-value { margin-top: 3px; color: var(--text); font-size: 14px; font-weight: 750; }
.resource-timer-input { width: 100%; margin-top: 5px; border: 0; padding: 0; color: var(--text); background: transparent; font: inherit; font-size: 14px; font-weight: 750; }
.resource-url-fixed a { display: block; margin-top: 5px; overflow: hidden; color: var(--accent); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.resource-save-button { width: 100%; margin-top: 10px; }

.generation-usage {
  padding: 15px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--page-bg) 30%, var(--surface));
}

.usage-caption {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.usage-count {
  font-size: 18px;
  letter-spacing: -.02em;
}

.usage-progress {
  height: 8px;
  margin: 12px 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
}

.usage-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #8cdaff));
  transition: width .35s ease;
}

.usage-remaining {
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.limit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.limit-tile {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--page-bg) 24%, var(--surface));
}

.limit-tile strong { font-size: 17px; }

.limit-tile span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revision-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
}

.revision-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fce9b, #a4ebbd);
}

.integration-meta {
  margin: 14px 1px 0;
  color: var(--muted);
  font-size: 12px;
}

.generation-queue-status {
  margin: 8px 1px 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.generation-queue-error { color: #e3a83b; }

.operational-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.metric-tile {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--page-bg) 20%, var(--surface));
  font-size: 11px;
  line-height: 1.2;
}

.metric-value {
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-error .metric-value { color: #e3a83b; }

.checkout-actions {
  margin-top: 8px;
}

.checkout-actions-with-delete {
  display: flex;
  align-items: stretch;
  gap: 9px;
}

.checkout-actions-with-delete .checkout-button {
  min-width: 0;
  flex: 1;
}

.checkout-actions-with-delete .integration-delete-button {
  height: auto;
}

.subscription-expiry {
  display: block;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.subscription-summary {
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%),
    var(--surface);
}

.subscription-summary-caption {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.subscription-summary-plan {
  margin: 5px 0 0;
  color: var(--accent);
  font-size: 25px;
  line-height: 1.15;
}

.subscription-summary-price {
  display: block;
  margin-top: 7px;
  color: var(--accent);
  font-size: 20px;
  font-weight: 800;
}

.subscription-summary-premium {
  border-color: color-mix(in srgb, #f5ae35 52%, transparent);
  background:
    radial-gradient(circle at 100% 0, rgb(245 174 53 / 25%), transparent 50%),
    var(--surface);
}

.subscription-summary-premium .subscription-summary-plan,
.subscription-summary-premium .subscription-summary-price { color: #d99016; }

.subscription-change-button { margin-top: 6px; }

.quota-usage {
  display: grid;
  gap: 9px;
  margin-top: 13px;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: color-mix(in srgb, var(--surface) 74%, var(--surface-secondary));
  box-shadow: 0 4px 12px rgb(15 28 46 / 6%);
}

.quota-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.auto-publish-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 12px;
  padding: 2px 0;
}

.auto-publish-copy { display: grid; gap: 2px; min-width: 0; }
.auto-publish-title { margin: 0; color: var(--text); font-size: 14px; font-weight: 800; }
.auto-publish-confirm-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.auto-publish-toggle { width: 44px; height: 25px; }
.auto-publish-toggle::after { width: 19px; height: 19px; }
.auto-publish-toggle:checked::after { transform: translateX(19px); }

.quota-caption {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quota-draft-signal {
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  padding: 4px 7px;
  color: #201300;
  background: #f1a52e;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.quota-draft-signal-readonly {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, var(--surface-secondary));
  box-shadow: none;
  cursor: default;
}

.quota-cells {
  display: grid;
  grid-template-columns: repeat(var(--quota-cells), minmax(0, 1fr));
  gap: 6px;
}

.quota-cell {
  min-width: 0;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
}

.quota-cell-used { background: var(--quota-color); }

.revision-usage { margin-top: 9px; }

.resource-request-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.resource-request-actions .action-button {
  min-width: 0;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.resource-request-actions .secondary-button {
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  font-size: 17px;
  font-weight: 800;
}

.resource-request-actions .checkout-note {
  grid-column: 1 / -1;
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.resource-request-form {
  display: grid;
  grid-column: 1 / -1;
  gap: 11px;
  margin-top: 2px;
  padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}

.resource-request-form label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.resource-request-form .onboarding-note {
  font-size: 12px;
}

.resource-owner {
  display: block;
  margin: -4px 0 2px;
  color: var(--muted);
  font-size: 13px;
}

.integration-technical-info {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
}

.integration-technical-info h3 { margin: 0; }

.technical-facts {
  display: grid;
  grid-template-columns: minmax(105px, .8fr) minmax(0, 1.5fr);
  gap: 9px 12px;
  margin: 0;
  font-size: 14px;
}

.technical-facts dt { color: var(--muted); font-weight: 700; }
.technical-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-weight: 700; }

.technical-resources {
  display: grid;
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.technical-section-title { font-size: 14px; font-weight: 800; }

.technical-resource {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, var(--surface-secondary));
}

.technical-resource > div { display: grid; gap: 3px; min-width: 0; }
.technical-category { color: #28a968; font-size: 13px; font-weight: 800; }
.technical-source-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.technical-source { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.technical-resource-status {
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 46%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 10%, transparent);
}
.technical-resource-status.is-available { background: #35b875; box-shadow: 0 0 0 4px rgb(53 184 117 / 15%); }
.technical-resource-status.is-unavailable { background: #d95362; box-shadow: 0 0 0 4px rgb(217 83 98 / 15%); }
.technical-resource-status.is-checking { background: var(--accent); animation: technical-resource-pulse 1s ease-in-out infinite; }
@keyframes technical-resource-pulse { 50% { opacity: .35; transform: scale(.72); } }
.technical-resource-check { flex: 0 0 auto; border: 0; padding: 6px 9px; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.technical-resource-check:disabled { opacity: .7; cursor: wait; }
.technical-resource-check.technical-resource-unavailable { color: #c94e5d; background: color-mix(in srgb, #d95362 12%, var(--surface)); }

.resource-request-submitted::before {
  content: "✓";
  margin-right: 7px;
  font-size: 16px;
  font-weight: 800;
}

.resource-request-submitted,
.resource-request-submitted:disabled {
  color: #fff;
  border-color: #3cae72;
  background: linear-gradient(135deg, #43c47b, #2eaa68);
  box-shadow: 0 8px 18px rgb(46 170 104 / 24%);
  opacity: 1;
}

.integration-admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.integration-settings-button {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 25px;
  height: 25px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 50%;
  padding: 0;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 23%, transparent);
  font: inherit;
  font-size: 12px;
  line-height: 1;
}

.integration-settings-alert {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: #e45462;
}

.integration-delete-button {
  display: flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 0;
  color: #fff;
  background: linear-gradient(135deg, #ea676f, #cc4e62);
  box-shadow: 0 6px 14px rgb(217 83 94 / 18%);
  cursor: pointer;
}

.integration-delete-icon {
  display: block;
  width: 18px;
  height: 21px;
  fill: #fff;
}

.integration-delete-icon-cross { fill: #d45363; }

.integration-delete-button:not(:disabled):hover {
  background: linear-gradient(135deg, #f07279, #d94c5d);
}

.integration-delete-modal {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(16 29 47 / 48%);
}

.integration-delete-dialog {
  position: relative;
  display: grid;
  width: min(100%, 390px);
  gap: 14px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, #e45a66 18%, var(--border));
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 22px 50px rgb(14 31 54 / 30%);
}

.integration-delete-dialog h3 {
  margin: 0;
  padding-right: 30px;
  font-size: 19px;
}

.integration-delete-warning,
.integration-delete-instruction {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.integration-delete-warning-icon { color: #d89017; font-size: 17px; }

.integration-delete-dialog input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 10px;
  padding: 10px 11px;
  color: var(--text);
  background: var(--page-bg);
  font: inherit;
}

.integration-delete-error { color: #cd4c5c; font-size: 12px; font-weight: 700; }
.integration-delete-error[hidden] { display: none; }

.integration-delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

.integration-delete-cancel,
.integration-delete-confirm {
  min-height: 37px;
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.integration-delete-cancel {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  color: var(--accent);
  background: transparent;
}

.integration-delete-confirm {
  border: 1px solid #cc4e62;
  color: #fff;
  background: linear-gradient(135deg, #ea676f, #cc4e62);
}

.content-category-actions {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.integration-primary-actions {
  display: flex;
  align-items: stretch;
  gap: 9px;
}

.integration-primary-actions .action-button {
  min-width: 0;
  min-height: 42px;
  flex: 1;
  padding: 9px 12px;
  font-size: 15px;
}

.categories-link {
  width: fit-content;
  border: 0;
  padding: 4px 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}

.categories-link:not(:disabled):hover { color: color-mix(in srgb, var(--accent) 78%, #fff); }

.content-category-note {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.content-category-note[hidden] { display: none !important; }

.content-category-list {
  display: grid;
  gap: 7px;
}

.content-category-option {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 12px;
  padding: 11px 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 76%, var(--accent) 7%);
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.content-category-option:not(:disabled):hover { border-color: var(--accent); }

.content-category-option-selected,
.content-category-option-selected:disabled {
  border-color: #3cae72;
  color: #fff;
  background: linear-gradient(135deg, #43c47b, #2eaa68);
}

.content-category-option-unavailable,
.content-category-option-unavailable:disabled {
  border-color: color-mix(in srgb, var(--muted) 24%, transparent);
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, var(--muted) 8%);
  box-shadow: none;
}

.category-picker-modal {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 16px;
  background: rgb(16 29 47 / 42%);
  opacity: 1;
  transition: opacity 220ms ease;
}

.category-picker-modal[hidden] { display: none; }

.category-picker-modal-closing {
  pointer-events: none;
  opacity: 0;
}

.category-picker-dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  max-height: min(68vh, 560px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 20px 48px rgb(14 31 54 / 28%);
  transform: translateY(0) scale(1);
  transition: transform 220ms ease;
}

.category-picker-modal-closing .category-picker-dialog {
  transform: translateY(14px) scale(.985);
}

.category-picker-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}

.category-picker-header h3 { font-size: 16px; }

.category-picker-feedback {
  margin: 8px 16px;
  flex-shrink: 0;
}

.category-picker-close {
  display: inline-flex;
  width: 44px;
  height: 32px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
}

.category-picker-close .modal-back-arrow {
  font-size: 29px;
}

.category-picker-dialog .content-category-list {
  min-height: 0;
  max-height: calc(min(68vh, 560px) - 62px);
  overflow-y: auto;
  padding: 12px 16px 16px;
}

.integration-card-collapsed .integration-card-content > :not(.integration-card-header):not(.channel-status-row):not(.subscription-status),
.integration-card-collapsed .integration-admin-actions,
.integration-card-collapsed .checkout-actions,
.integration-card-collapsed .resource-request-actions,
.integration-card-collapsed .content-category-actions {
  display: none;
}

.integration-card-collapsed,
.integration-card-compact {
  padding: 12px 14px;
  border-radius: 13px;
}

.integration-card-collapsed .integration-title,
.integration-card-compact .integration-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.integration-card-collapsed .integration-header-actions,
.integration-card-compact .integration-header-actions {
  gap: 6px;
  margin-top: 7px;
}

.integration-card-collapsed .plan-badge,
.integration-card-compact .plan-badge {
  padding: 5px 8px;
  font-size: 12px;
}

.integration-card-collapsed .subscription-status,
.integration-card-compact .subscription-status {
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12px;
}

.integration-card-collapsed .status-dot,
.integration-card-compact .status-dot {
  width: 7px;
  height: 7px;
}

.integration-card-handle {
  display: flex;
  touch-action: none;
  user-select: none;
  width: 100%;
  min-height: 22px;
  align-items: flex-end;
  justify-content: center;
  margin: 4px 0 -10px;
  border: 0;
  padding: 5px 0 2px;
  background: transparent;
}

.integration-card-handle-bar {
  display: block;
  width: calc(100% - 16px);
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 32%, transparent);
  transition: width 140ms ease, background 140ms ease;
}

.integration-card-handle:active .integration-card-handle-bar {
  background: color-mix(in srgb, var(--accent) 55%, var(--muted));
}

.test-draft-button, .resource-settings-button { width: 100%; }

.resource-settings-action {
  min-width: 0;
  position: relative;
  padding-top: 12px;
}

.resource-request-badge {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 8px;
  color: #fff;
  background: #e45462;
  box-shadow: 0 3px 10px color-mix(in srgb, #e45462 28%, transparent);
}

.checkout-caption {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.subscription-plan-card {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 19%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%),
    var(--surface);
  box-shadow: 0 10px 25px rgb(15 28 46 / 8%);
}

.subscription-plan-premium {
  border-color: color-mix(in srgb, #f5ae35 50%, transparent);
  background:
    radial-gradient(circle at 100% 0, rgb(245 174 53 / 25%), transparent 50%),
    var(--surface);
}

.subscription-plan-name {
  color: var(--text);
  font-size: 20px;
  letter-spacing: -.02em;
}

.subscription-plan-price {
  margin: 5px 0 14px;
  color: var(--accent);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.subscription-plan-premium .subscription-plan-price { color: #d99016; }

.subscription-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.subscription-feature {
  display: inline-flex;
  align-items: center;
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-secondary) 86%, var(--accent) 6%);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.subscription-feature::before {
  content: "✓";
  margin-right: 5px;
  color: var(--accent);
  font-weight: 900;
}

.subscription-plan-premium .subscription-feature::before { color: #d99016; }

.checkout-buttons { display: grid; gap: 8px; margin-top: 10px; }

.checkout-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 82%, #2d5dc7);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.checkout-button:disabled { opacity: .6; cursor: wait; }

.details {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
}

.draft-list-preview {
  display: -webkit-box;
  margin-top: 9px;
  overflow: hidden;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.draft-list-status { margin-top: 10px; }

.empty { margin: 0; padding: 12px 4px; line-height: 1.45; }

.tariff-admin { margin-top: 20px; }

.tariff-admin-toggle {
  width: 100%;
  min-height: 46px;
  color: #66717f;
  border-color: #cbd1d8;
  background: #f4f5f6;
  box-shadow: none;
}

.secondary-button.tariff-admin-toggle:not(:disabled):hover {
  color: #46515f;
  border-color: #aeb7c1;
  background: #e9ecef;
}

.platform-settings-list {
  display: grid;
  gap: 8px;
}

.page:has(.platform-settings-list) {
  padding: 22px 12px 32px;
}

.page:has(.platform-settings-list) .hero {
  padding: 2px 0 12px;
}

.page:has(.platform-settings-list) .page-title-row h1 {
  margin-bottom: 0;
  font-size: clamp(22px, 5.8vw, 26px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.platform-settings-block {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 9%, var(--border));
  border-radius: 13px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--surface) 97%, var(--accent) 3%);
  box-shadow: 0 2px 8px rgb(14 31 54 / 4%);
}

.platform-settings-block > h2,
.platform-settings-block .platform-settings-title {
  margin: 0;
  font-size: 18px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.platform-tariff-table { display: grid; gap: 10px; }

.platform-tariff-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 44%);
  align-items: center;
  gap: 6px;
  min-height: 52px;
  border: 1.5px solid color-mix(in srgb, var(--text) 70%, transparent);
  border-radius: 999px;
  padding: 5px;
  background: var(--surface);
}

.platform-settings-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  min-height: 30px;
  border-radius: 8px;
  cursor: pointer;
}

.platform-settings-title-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.platform-settings-title { margin: 0; font-size: 18px; }
.platform-settings-chevron {
  margin-left: auto;
  color: var(--muted);
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 160ms ease;
}
.platform-settings-title-row[aria-expanded="true"] .platform-settings-chevron { transform: rotate(90deg); }
.platform-settings-content { padding-top: 9px; }
.platform-settings-block .platform-settings-content[hidden] { display: none; }
.platform-settings-loading {
  display: block;
  padding: 4px 0;
  color: var(--muted);
  font-size: 12px;
}
.platform-settings-help {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin: 0;
  font-size: 11px;
}

.platform-settings-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.platform-log-download,
.platform-report-download {
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  border-radius: 12px;
}

.platform-log-download {
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: none;
}

.page:has(.metrics-dashboard) {
  padding: 18px 12px 28px;
}

.page:has(.metrics-dashboard) .hero {
  padding-bottom: 8px;
}

.metrics-dashboard {
  display: grid;
  gap: 10px;
}

.metrics-updated {
  margin: -2px 1px 1px;
  color: var(--muted);
  font-size: 11px;
}

.metrics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.metrics-kpi {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 13px;
  padding: 10px 11px;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent) 5%, var(--surface)));
  box-shadow: 0 3px 10px rgb(14 31 54 / 5%);
}

.metrics-kpi-label {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  min-height: 26px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.metrics-kpi-marker {
  color: var(--accent);
  font-weight: 800;
}

.metrics-kpi-value {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--text);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metrics-period-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border-radius: 11px;
  padding: 3px;
  background: color-mix(in srgb, var(--border) 48%, transparent);
}

.metrics-period-button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.metrics-period-button.is-active {
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 28%, transparent);
}

.metrics-panel {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  border-radius: 14px;
  padding: 12px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgb(14 31 54 / 5%);
}

.metrics-panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 11px;
}

.metrics-panel-heading h2,
.metrics-panel-heading h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.metrics-panel-description {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.metrics-panel-body {
  min-width: 0;
}

.metrics-funnel-row,
.metrics-category-row {
  margin-top: 9px;
}

.metrics-funnel-row:first-child,
.metrics-category-row:first-child {
  margin-top: 0;
}

.metrics-chart-label {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.metrics-chart-label > :first-child {
  min-width: 0;
}

.metrics-chart-value {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.metrics-bar-track {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.metrics-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 260ms ease;
}

.metrics-funnel-bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, white), var(--accent));
}

.metrics-category-bar {
  background: linear-gradient(90deg, #69d8a5, #2fbd77);
}

.metrics-funnel-detail {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.metrics-edit-layout {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.metrics-donut {
  display: grid;
  width: 82px;
  height: 82px;
  place-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface) 0 54%, transparent 56%),
    conic-gradient(#3ea9e5 0 var(--edit-a), #30bc77 var(--edit-a) var(--edit-b), #f4a941 var(--edit-b) var(--edit-c), #de5563 var(--edit-c) 360deg);
  text-align: center;
}

.metrics-donut-value {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.metrics-donut-label {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.metrics-edit-legend {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.metrics-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 9px;
}

.metrics-legend-label {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--text);
}

.metrics-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-right: 5px;
  border-radius: 50%;
}

.metrics-dot-blue { background: #3ea9e5; }
.metrics-dot-green { background: #30bc77; }
.metrics-dot-orange { background: #f4a941; }
.metrics-dot-red { background: #de5563; }

.metrics-edit-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 11px;
}

.metrics-edit-summary span {
  border-radius: 9px;
  padding: 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
}

.metrics-renewal-chart {
  display: grid;
  grid-auto-columns: minmax(28px, 1fr);
  grid-auto-flow: column;
  align-items: end;
  height: 116px;
  border-bottom: 1px solid var(--border);
  padding: 8px 2px 0;
  background: repeating-linear-gradient(to bottom, transparent 0 28px, color-mix(in srgb, var(--border) 45%, transparent) 29px);
}

.metrics-renewal-column {
  display: grid;
  grid-template-rows: 88px 18px;
  align-items: end;
  justify-items: center;
  height: 106px;
}

.metrics-renewal-bars {
  display: flex;
  align-items: end;
  gap: 2px;
  width: 17px;
  height: 82px;
}

.metrics-renewal-bars span {
  width: 7px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}

.metrics-renewed-bar { background: #30bc77; }
.metrics-lost-bar { background: #de5563; }
.metrics-renewal-month { color: var(--muted); font-size: 9px; }

.metrics-renewal-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.metrics-renewal-key {
  position: relative;
  padding-left: 12px;
  color: var(--muted);
  font-size: 9px;
}

.metrics-renewal-key::before {
  position: absolute;
  top: 3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  content: "";
}

.metrics-renewal-key.is-renewed::before { background: #30bc77; }
.metrics-renewal-key.is-lost::before { background: #de5563; }

.metrics-renewal-summary {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 10px;
  font-weight: 650;
}

.metrics-downloads {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 2px;
}

.metrics-downloads button {
  min-width: 0;
  min-height: 44px;
  border-radius: 12px;
  padding-inline: 8px;
  font-size: 13px;
}

.metrics-empty {
  display: block;
  border-radius: 10px;
  padding: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--border) 28%, transparent);
  font-size: 11px;
  text-align: center;
}

.metrics-skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.metrics-skeleton span {
  height: 73px;
  border-radius: 13px;
  background: linear-gradient(100deg, #edf1f3 20%, #f8fafb 40%, #edf1f3 60%);
  background-size: 220% 100%;
  animation: metrics-shimmer 1.2s infinite linear;
}

.metrics-skeleton span:last-child {
  grid-column: 1 / -1;
  height: 190px;
}

@keyframes metrics-shimmer { to { background-position-x: -220%; } }

.platform-tariff-name {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-tariff-name-standard,
.platform-tariff-name-premium { color: var(--text); }
.platform-tariff-price-button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--accent-text);
  background: var(--accent);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  box-shadow: none;
}
.platform-tariff-price-button:active { filter: brightness(.92); }

@media (max-width: 360px) {
  .platform-tariff-row { gap: 6px; }
  .platform-tariff-price-button { font-size: 15px; }
  .platform-tariff-name { font-size: 13px; }
}

.platform-price-help-dialog { padding-bottom: 18px; }

.platform-price-help-text {
  display: block;
  padding: 7px 2px 2px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.platform-price-dialog-title { padding-right: 48px; }
.platform-price-editor-field {
  position: relative;
  display: block;
}
.platform-price-editor-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 12px;
  padding: 9px 42px 9px 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--page-bg) 28%, var(--surface));
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}
.platform-price-editor-currency {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  transform: translateY(-50%);
  pointer-events: none;
}
.platform-price-dialog-action { width: 100%; min-height: 42px; }
.platform-price-confirm-warning { padding-top: 30px; }
.platform-price-confirm-question { padding-right: 44px; }
.platform-price-confirm-plan { font-weight: 750; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.secondary-button {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.tariff-price-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  margin-top: 15px;
}

.tariff-price-form label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.tariff-price-input {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  padding: 10px 11px;
  color: var(--text);
  background: color-mix(in srgb, var(--page-bg) 35%, var(--surface));
  font: inherit;
  font-weight: 700;
}

.draft-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    var(--surface);
  box-shadow: 0 16px 36px rgb(0 0 0 / 14%);
}

.draft-card-header {
  margin-bottom: 8px;
}

.draft-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.draft-status-badge {
  display: inline-flex;
  margin: 0 0 16px;
  color: #1f1600;
  background: #ffd36b;
  box-shadow: none;
}

.draft-image {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--page-bg);
  box-shadow: 0 9px 22px rgb(0 0 0 / 16%);
}

.draft-image-editor,
.draft-text-editor {
  position: relative;
  margin: 0 0 18px;
}

.draft-image-editor.is-revising .draft-image,
.draft-image-editor.is-uploading .draft-image,
.draft-text-editor.is-revising .draft-text {
  filter: blur(3px);
  opacity: .54;
}

.draft-revision-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, #fff);
  border-top-color: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: draft-revision-spin .8s linear infinite;
}

@keyframes draft-revision-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.draft-text-editor {
  min-height: 76px;
  padding-bottom: 46px;
}

.draft-revision-button {
  position: absolute;
  right: 9px;
  bottom: 9px;
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  padding: 4px 7px;
  color: var(--accent);
  background: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  box-shadow: 0 3px 9px rgb(14 31 54 / 14%);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.draft-image-actions {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.draft-image-actions .draft-revision-button {
  position: static;
}

.draft-image-upload-control { display: contents; }

.draft-image-upload-button {
  color: var(--accent-text);
  background: var(--accent);
}

.draft-revision-button:disabled {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-secondary) 86%, var(--muted) 8%);
  box-shadow: none;
  cursor: not-allowed;
}

.draft-text-revision-modal {
  position: fixed;
  z-index: 35;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(16 29 47 / 42%);
}

.draft-text-revision-dialog {
  position: relative;
  display: grid;
  width: min(100%, 390px);
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 48%),
    var(--surface);
  box-shadow: 0 22px 52px rgb(14 31 54 / 30%);
}

.draft-text-revision-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.draft-text-revision-prompt {
  padding-right: 26px;
}

.draft-text-revision-question {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.35;
}

.draft-publication-question {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}

.draft-text-revision-prompt { font-weight: 400; }

.draft-revision-warning {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.draft-image-revision-guidance {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.draft-image-revision-instruction {
  width: 100%;
  min-height: 88px;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--page-bg) 35%, var(--surface));
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
}

.draft-image-revision-instruction:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.draft-image-revision-instruction::placeholder {
  color: color-mix(in srgb, var(--muted) 42%, transparent);
  opacity: 1;
}

.draft-publication-question strong {
  font-weight: 800;
}

.draft-deletion-warning {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.draft-text-revision-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.draft-text-revision-choices .action-button,
.draft-text-revision-choices .secondary-button {
  min-width: 0;
  min-height: 44px;
  padding: 9px;
  font-size: 13px;
}

.draft-manual-text-input {
  width: 100%;
  min-height: 210px;
  max-height: min(48vh, 430px);
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  padding: 11px;
  color: var(--text);
  background: color-mix(in srgb, var(--page-bg) 35%, var(--surface));
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  outline: none;
}

.draft-manual-text-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.draft-manual-text-input:empty::before {
  color: var(--muted);
  content: attr(data-placeholder);
  pointer-events: none;
}

.draft-manual-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.draft-manual-format-button {
  display: grid;
  min-width: 38px;
  min-height: 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 10px;
  padding: 6px 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.draft-manual-format-button[data-command="formatBlock"] { color: var(--text); }
.draft-manual-format-button[data-command="italic"] { font-style: italic; }
.draft-manual-format-button[data-command="underline"] { text-decoration: underline; }
.draft-manual-format-button:disabled { opacity: .55; }

.draft-text b,
.draft-manual-text-input b { font-weight: 800; }

.draft-text i,
.draft-manual-text-input i { font-style: italic; }

.draft-text u,
.draft-manual-text-input u { text-decoration: underline; }

.draft-text {
  margin: 0;
  padding: 2px 1px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.62;
  white-space: pre-wrap;
}

.draft-text > b:first-child {
  font-size: 19px;
  line-height: 1.35;
}

.resource-disable-button {
  margin-top: 8px;
  border-color: #e6a2a2;
  color: #b33a3a;
}

.source-create-form { margin-bottom: 18px; }

.source-setup-toggle {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.source-setup-channel {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.source-setup-content {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.source-create-form.is-collapsed .source-setup-content { display: none; }

.resource-setup-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.resource-create-caption { margin: 10px 0 0; color: var(--muted-text-color, #7c8793); font-size: 13px; line-height: 1.4; }
.collector-inline-secret {
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #43c47b 58%, transparent);
  border-radius: 10px;
  padding: 11px;
  color: var(--text);
  background: color-mix(in srgb, #43c47b 12%, var(--surface));
  font: 12px ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: copy;
}


.draft-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 24px;
}

.action-button {
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 14px;
  padding: 12px;
  color: var(--accent-text);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 76%, #5d77ff));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 23%, transparent);
  font: inherit;
  font-weight: 700;
  letter-spacing: -.01em;
}

.action-button:active { transform: translateY(1px); box-shadow: none; }

.action-button:only-child { grid-column: 1 / -1; }

.action-button-danger {
  color: #ffffff;
  border-color: rgb(238 113 119 / 62%);
  background: linear-gradient(135deg, #ea676f, #cc4e62);
  box-shadow: 0 8px 18px rgb(217 83 94 / 22%);
}

@media (max-width: 390px) {
  .page { padding-inline: 12px; }
  .integration-card { padding: 16px; }
  .resource-timers { grid-template-columns: 1fr; }
  .channel-connect-form { grid-template-columns: 1fr; }
}
.onboarding-form { display: grid; gap: 18px; }
.onboarding-form label { display: grid; gap: 8px; font-weight: 600; }
.onboarding-form input { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; }
.onboarding-reference-field { display: grid; gap: 8px; font-weight: 600; }
.onboarding-reference-title {
  display: flex;
  align-items: center;
  gap: 7px;
}
.onboarding-url-help {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  margin: 0;
  font-size: 12px;
}
.channel-url-help-dialog {
  display: grid;
  width: min(100%, 390px);
  gap: 10px;
  overflow: hidden;
}
.channel-url-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.channel-url-help-header h3 { font-size: 18px; }
.channel-url-help-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.channel-url-help-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(56vh, 390px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 13px;
}
.onboarding-note { margin: 0; color: var(--muted, #777); font-size: 14px; line-height: 1.55; white-space: pre-line; }
.onboarding-form input::placeholder { color: color-mix(in srgb, var(--muted) 62%, transparent); opacity: .72; }
.onboarding-form .action-button:disabled { cursor: not-allowed; opacity: .48; }
.channel-checks { display: grid; gap: 8px; }
.channel-checks[hidden], .channel-check[hidden] { display: none !important; }
.channel-check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.channel-check-icon { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; font-weight: 800; }
.is-idle .channel-check-icon { color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); }
.is-pending .channel-check-icon { border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: channel-check-spin .7s linear 1 both; }
.is-success { color: #31986a; }.is-success .channel-check-icon { color: #fff; background: #38b978; }
.is-failure { color: #d14e5b; }.is-failure .channel-check-icon { box-sizing: border-box; padding-bottom: 2px; color: #fff; background: #df5967; line-height: 1; }
@keyframes channel-check-spin { to { transform: rotate(360deg); } }
.onboarding-add-button {
  width: 100%;
  min-height: 48px;
  border-color: rgb(53 180 109 / 65%);
  background: linear-gradient(135deg, #44c77e, #2ea568);
  box-shadow: 0 8px 18px rgb(46 165 104 / 23%);
}
.onboarding-pending { background: #fff0d0; color: #805200; }
.onboarding-progress {
  width: min(150px, 46%);
  height: 5px;
  margin: 8px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.onboarding-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  animation: onboarding-progress 1.5s ease-in-out infinite;
}
@keyframes onboarding-progress {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(310%); }
}

/* Короткая анимация подтверждает нажатие, не задерживая сценарий. */
button, a, [role="button"] {
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, opacity 140ms ease;
}

button:not(:disabled), [role="button"] { cursor: pointer; }

button:not(:disabled):active, [role="button"]:active {
  transform: scale(.975);
  filter: brightness(.96);
}

.interactive-card:not(:disabled):active {
  transform: scale(.99);
}

@media (hover: hover) {
  .action-button:not(:disabled):hover,
  .checkout-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 22px color-mix(in srgb, var(--accent) 30%, transparent);
  }

  .secondary-button:not(:disabled):hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  }

  .interactive-card:not(:disabled):hover {
    filter: brightness(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  button, a, [role="button"] { transition: none; }
  .onboarding-progress span { animation: none; transform: translateX(70%); }
  .channel-status-row-confirmed { animation: none; }
}

.platform-resource-category-list { display: grid; gap: 11px; }
.platform-resource-category {
  min-width: 0;
}
.platform-resource-category-name {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.platform-resource-category + .platform-resource-category {
  border-top: 1px solid var(--border);
  padding-top: 11px;
}
.platform-resource-row { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 10px; padding: 5px 0; cursor: pointer; }
.platform-resource-name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; font-weight: 500; }
.platform-feature-copy .platform-resource-name { font-size: 14px; font-weight: 650; }
.platform-feature-copy { display: grid; min-width: 0; gap: 4px; }
.platform-provider-models,
.platform-provider-state { color: var(--muted); font-size: 11px; line-height: 1.3; }
.platform-provider-picker { display: grid; gap: 8px; }
.platform-provider-choice {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; width: 100%; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text);
  text-align: left; cursor: pointer;
}
.platform-provider-choice.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.platform-provider-choice-title { font-size: 14px; font-weight: 700; }
.platform-provider-choice .platform-provider-models { grid-column: 1; }
.platform-provider-readiness { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 11px; }
.platform-provider-readiness.is-ready { color: #2eaf6d; }
.platform-provider-readiness.is-down { color: #e05252; }
.platform-provider-choice:disabled { opacity: .68; cursor: wait; }
.platform-resource-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.platform-resource-toggle { appearance: none; width: 38px; height: 22px; margin: 0; flex: 0 0 auto; border-radius: 99px; background: #aeb9c1; cursor: pointer; position: relative; transition: background 160ms ease; }
.platform-resource-toggle::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; box-shadow: 0 1px 3px #0004; transition: transform 160ms ease; }
.platform-resource-toggle:checked { background: #35bd72; }
.platform-resource-toggle:checked::after { transform: translateX(16px); }
.platform-resources-toggle { margin-left: 4px; }
.platform-resources-toggle + .platform-settings-chevron { margin-left: auto; }
.platform-resources-toggle:indeterminate { background: color-mix(in srgb, var(--accent) 68%, #aeb9c1); }
.platform-resources-toggle:indeterminate::after { transform: translateX(8px); }
.platform-resources-toggle.is-initializing,
.platform-resources-toggle.is-initializing::after { transition: none; }
.platform-resource-toggle:disabled { opacity: .55; cursor: wait; }

/* Brand system shared with contentfarm.pro. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline-color: var(--brand-green);
}

h1 {
  font-weight: 500;
  letter-spacing: -1.45px;
}

h2,
h3 { font-weight: 500; }

.status,
.integration-card,
.draft-card,
.subscription-plan-card,
.platform-settings-block,
.tariff-help-dialog,
.draft-text-revision-dialog,
.category-picker-dialog {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 14px 34px rgb(27 30 24 / 7%);
}

.integration-card,
.draft-card { border-radius: 20px; }

.tariff-help-modal,
.draft-text-revision-modal,
.category-picker-modal,
.integration-delete-modal {
  background: rgb(27 30 24 / 36%);
  backdrop-filter: blur(3px);
}

.integration-delete-dialog {
  background: var(--surface);
  box-shadow: 0 14px 34px rgb(27 30 24 / 9%);
}

.action-button,
.checkout-button,
.integration-settings-button,
.platform-tariff-price-button,
.onboarding-add-button {
  border-color: var(--text);
  color: #ffffff;
  background: var(--text);
  box-shadow: 0 8px 18px rgb(27 30 24 / 14%);
}

.action-button.category-tariff-button {
  border-color: var(--text);
  color: #ffffff;
  background: var(--text);
  box-shadow: 0 8px 18px rgb(27 30 24 / 14%);
}

.secondary-button {
  border-color: #c9cdbf;
  color: var(--text);
  background: #ffffff;
}

.tariff-admin-toggle,
.secondary-button.tariff-admin-toggle:not(:disabled):hover {
  border-color: var(--border);
  color: var(--muted);
  background: var(--surface);
}

.role,
.count,
.plan-badge,
.draft-status-badge {
  color: var(--text);
  background: var(--highlight);
  box-shadow: none;
}

.plan-premium {
  color: var(--text);
  background: var(--highlight);
  box-shadow: none;
}

.plan-inactive {
  color: #ffffff;
  background: #73796c;
}

.subscription-plan-premium {
  border-color: #aecb48;
  background: var(--highlight);
}

.subscription-plan-price,
.subscription-plan-premium .subscription-plan-price,
.subscription-feature::before,
.subscription-plan-premium .subscription-feature::before {
  color: var(--text);
}

.subscription-feature,
.benefit-tag {
  background: var(--highlight-soft);
}

.content-category-option {
  border-color: var(--border);
  background: #ffffff;
}

.content-category-option:not(:disabled):hover {
  border-color: #99b64e;
  background: #f6fce8;
}

.content-category-option-selected,
.content-category-option-selected:disabled {
  border-color: #99b64e;
  color: var(--text);
  background: var(--highlight);
}

.tariff-help,
.draft-image-upload-button {
  border-color: #aecb48;
  color: var(--text);
  background: var(--highlight);
}

.back-button,
.content-category-label,
.categories-link,
.resource-url,
.resource-url-fixed a,
.information-footer-link:active,
.information-choice-arrow,
.technical-resource-check,
.draft-revision-button {
  color: var(--brand-green);
}

.information-choice,
.sample-chip,
input,
textarea,
select,
.platform-price-editor-input,
.tariff-price-input {
  border-color: var(--border);
  color: var(--text);
  background: #ffffff;
}

.information-choice:active,
.secondary-button:not(:disabled):active {
  background: var(--highlight-soft);
}

.information-footer-link {
  color: #555c4e;
  font-weight: 600;
}

.information-footer-separator { color: #a8ae9e; }

.integration-card-handle-bar { background: #b8bdae; }

.onboarding-progress { background: var(--surface-secondary); }
.onboarding-progress span { background: var(--highlight); }

.usage-progress-fill { background: var(--highlight); }
.usage-remaining { color: var(--brand-green); }

.platform-resource-toggle:checked { background: var(--highlight); }
.platform-resource-toggle:checked::after { background: var(--text); }

@media (hover: hover) {
  .action-button:not(:disabled):hover,
  .checkout-button:not(:disabled):hover {
    background: #35392d;
    box-shadow: 0 11px 22px rgb(27 30 24 / 16%);
  }

  .secondary-button:not(:disabled):hover {
    border-color: #aeb5a1;
    background: var(--highlight-soft);
  }

  .interactive-card:not(:disabled):hover { filter: none; }
}

@media (max-width: 390px) {
  .brand-wordmark { font-size: 20px; }
  .brand-icon { width: 32px; height: 32px; flex-basis: 32px; }
}

.draft-text-validation { display: block; white-space: normal; line-height: 1.45; color: var(--text-color, inherit); margin: 8px 0; }

/* Mini App V2: the approved light/graphite palette, using real platform data. */
:root{--page-bg:#f2f4ec;--surface:#fff;--surface-secondary:#edf2e4;--border:#d9e2ce;--text:#24321c;--muted:#69775d;--accent:#d5fa68;--accent-text:#213411;--highlight:#d5fa68;--brand-green:#52732a;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif}
body{background:#f2f4ec;font-size:18px;line-height:1.6}button,input,select,textarea{font-family:inherit}button{touch-action:manipulation}h1,h2,h3{font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #759b35;outline-offset:3px}[hidden]{display:none!important}
.v2-environment{height:38px;background:#141f10;color:#cce399;padding:8px 28px;font-size:12px;letter-spacing:.3px;display:flex;gap:15px}.v2-environment span{color:#91a977}.v2-shell{max-width:1680px;min-height:calc(100svh - 38px);margin:auto;display:grid;grid-template-columns:244px minmax(0,1fr)}.v2-sidebar{background:#1a2515;color:#edf4e2;display:flex;flex-direction:column;gap:42px;padding:36px 25px;position:sticky;top:0;height:100svh;max-height:calc(100svh - 38px)}.v2-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:21px;letter-spacing:-.6px}.v2-logo{width:37px;height:37px;border-radius:12px;background:#d5fa68;color:#15230c;display:grid;place-items:center;font:bold italic 29px Arial;letter-spacing:-2px;padding-right:3px}.v2-side-nav{display:grid;gap:9px}.v2-side-nav button{display:flex;align-items:center;gap:13px;text-align:left;border:0;background:none;color:#b4c69d;border-radius:13px;min-height:54px;padding:12px 15px;font-size:16px}.v2-side-nav button>span{font-size:25px;width:24px;line-height:1}.v2-side-nav button.selected{background:#314425;color:#eef7df}.v2-side-nav button.selected>span{color:#d5fa68}.v2-profile{margin-top:auto;display:flex;gap:12px;text-align:left;border:0;border-top:1px solid #a8bd7c24;padding:24px 0 0;background:none;color:#e6f1d8;align-items:center}.v2-profile strong{font-size:16px;font-weight:550;display:block;max-width:140px;overflow-wrap:anywhere}.v2-profile small{display:block;color:#9caf84;font-size:13px}.v2-avatar{display:grid;place-items:center;width:39px;height:39px;flex-shrink:0;border-radius:50%;background:#354b24;color:#d8eab8;font-size:13px}.page{width:100%;max-width:none;margin:0;padding:30px 44px 60px;min-width:0;background:radial-gradient(ellipse at 100% 0,#d7ed9b29,transparent 42%)}.v2-app-header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:36px;min-height:43px}.v2-breadcrumb{font-size:16px;color:#687859}.v2-header-meta{display:flex;align-items:center;gap:10px}.v2-mobile-brand,.v2-mobile-profile{display:none}.v2-mobile-nav{display:none}.app-version{font-size:11px;color:#748464;background:#f6f9f0;border:1px solid #d4dfc5;padding:3px 8px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero{padding:0 0 22px}.hero .eyebrow{display:none}.page-title-row h1{font-size:clamp(34px,2.75vw,44px);letter-spacing:-1.1px;font-weight:600;line-height:1.18;margin:0}.back-button{font-size:15px;margin-bottom:22px;padding:8px 0;color:#56733a}.v2-lead{font-size:18px;color:#68765a;margin:0 0 28px;max-width:850px}.integration-list{display:block}.integration-list>.action-button{width:auto;margin-bottom:24px}.action-button,.secondary-button{font-size:16px;border-radius:12px;min-height:49px;padding:12px 19px;line-height:1.45}.action-button{background:#d5fa68;color:#203010;border:1px solid #d5fa68;box-shadow:none}.secondary-button{background:#f8faf3;color:#496231;border:1px solid #cedcbc}.action-button:hover{background:#e0ff8b}.v2-setup{display:grid;grid-template-columns:1.12fr .88fr;gap:25px;align-items:start}.v2-platform-panel{padding:29px;background:#fff;border:1px solid #dbe3d1;border-radius:23px}.v2-platform-panel :is(h2,h3){font-size:24px;font-weight:600;margin:0 0 25px}.v2-platform-option{border:1px solid #d8e3c9;background:#f8fbf3;border-radius:17px;padding:25px}.v2-platform-heading{display:flex;align-items:center;gap:14px}.v2-service-mark{width:49px;height:49px;border-radius:14px;background:#e6efd6;display:grid;place-items:center;font-size:30px;color:#55752f}.v2-platform-heading h3{font-size:26px;line-height:1.25;margin:0;font-weight:600}.v2-platform-heading p{font-size:15px;color:#6e7c61;margin:3px 0 0}.v2-platform-heading .v2-pill{margin-left:auto}.v2-platform-option>p{font-size:17px;color:#65735b;margin:24px 0}.v2-connect-action button{width:100%;text-align:left}.v2-pill{display:inline-flex;border-radius:20px;background:#edf3e1;padding:4px 10px;font-size:12px;white-space:nowrap;color:#668644}.v2-access-note{color:#6b7e55;font-size:14px;margin:25px 0 0}.v2-guide{border-radius:23px;background:#203119;color:#e9f2dd;padding:28px 30px}.v2-guide summary{font-size:14px;color:#b3ca91;cursor:pointer}.v2-guide :is(h2,h3){font-size:32px;line-height:1.2;letter-spacing:-.7px;font-weight:550;margin:26px 0}.v2-guide ol{padding-left:25px;display:grid;gap:25px}.v2-guide li::marker{color:#d5fa68}.v2-guide strong{font-size:18px}.v2-guide p{font-size:16px;color:#adbf98;margin:8px 0}.v2-home-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px}.v2-attention>:is(h2,h3){font-size:22px;margin:0 0 18px}.v2-attention-card,.v2-blank{background:#fff;border:1px solid #dce5d0;border-radius:22px;padding:30px;margin-bottom:20px}.v2-attention-card:first-of-type{background:#24351b;color:#edf5e2}.v2-attention-card :is(h2,h3){font-size:31px;line-height:1.25;letter-spacing:-.7px;font-weight:550;margin:18px 0}.v2-attention-card .action-button{margin-top:20px;width:auto}.v2-attention-copy{font-size:18px;color:#748565}.v2-attention-card:first-of-type .v2-attention-copy{color:#b9cba4}.v2-eyebrow{font-size:12px;color:#78905f;letter-spacing:1.5px}.v2-attention-card:first-of-type .v2-eyebrow{color:#c0da93}.v2-blank :is(h2,h3){font-size:29px;font-weight:550;margin:0 0 14px}.v2-blank p{font-size:17px;color:#728163}.v2-blank button{margin-top:22px}.v2-home-rail{display:grid;gap:22px;align-content:start}.v2-panel{padding:25px;border:1px solid #dbe4cf;border-radius:20px;background:#fff}.v2-panel :is(h2,h3){font-size:20px;line-height:1.3;margin:0 0 24px;font-weight:600}.v2-panel>button.secondary-button{font-size:14px;width:100%;margin-top:22px}.v2-channel-row{display:flex;gap:12px;width:100%;align-items:center;justify-content:space-between;padding:13px 0;border:0;background:none;text-align:left;color:#2d4420}.v2-channel-name{display:block;font-size:16px;font-weight:550;overflow-wrap:anywhere}.v2-muted{display:block;font-size:13px;color:#7a8b68}.v2-channel-row .v2-pill{font-size:10px}.v2-panel-dark{background:#24351b;color:#edf4e3;border-color:#24351b}.v2-panel-dark p{color:#b1c69a;font-size:16px;margin:0}.v2-connections-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}.integration-card{border-radius:20px;padding:25px;background:#fff;border:1px solid #dbe4d0;box-shadow:none;margin:0 0 20px;min-width:0}.integration-title{font-size:25px;line-height:1.3;font-weight:600}.integration-card-header{gap:15px}.integration-card-handle{display:none}.integration-card-content{padding:0}.integration-primary-actions{margin-top:20px}.quota-caption{font-size:15px}.quota-usage{padding-top:17px}.quota-cells{height:8px;gap:3px}.quota-cell{border-radius:3px}.quota-cell-used{background:#9bbb57}.subscription-status{font-size:15px}.auto-publish-title{font-size:16px}.quota-draft-signal{font-size:12px}.v2-material-channel{background:#fff;border:1px solid #dbe4ce;border-radius:18px;padding:24px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:24px}.v2-material-channel :is(h2,h3){font-size:25px;font-weight:550;margin:8px 0}.v2-material-channel button{width:auto}.v2-material-channel p{color:#71845e}.v2-profile-card{padding:28px;background:#fff;border:1px solid #dbe4ce;border-radius:20px;max-width:680px;display:grid;gap:15px}.v2-profile-card :is(h2,h3){font-size:28px;margin:0}.v2-profile-card button{width:100%}.v2-draft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.interactive-card{font-size:17px;text-align:left}.interactive-card h2{font-size:20px}.draft-list-preview{font-size:17px;line-height:1.65}.draft-card{border:1px solid #dbe4ce;background:#fff;border-radius:22px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}.draft-card-header,.draft-status-badge,.draft-actions,.draft-card>.revision-usage{grid-column:1/-1}.draft-card-header h2{font-size:20px}.draft-status-badge{justify-self:start}.draft-image{width:100%;object-fit:contain;border-radius:15px}.draft-image-editor{align-self:start}.draft-text-editor{align-self:start;min-width:0;background:#f5f8ef;padding:22px;border-radius:17px}.draft-text{font-size:18px;line-height:1.75;overflow-wrap:anywhere;margin:0 0 22px}.draft-revision-button{font-size:15px;min-height:44px;border-radius:10px;padding:8px 14px}.draft-actions{display:flex;gap:12px;border-top:1px solid #e0e7d8;padding-top:20px}.draft-actions button{font-size:16px}.draft-card>.revision-usage{max-width:520px}.tariff-help-dialog,.draft-text-revision-dialog,.draft-image-upload-dialog{background:#f8faf3;border:1px solid #d8e3c9;border-radius:22px;padding:26px;font-size:17px}.draft-text-revision-dialog{max-width:780px}.draft-text-revision-question{font-size:23px}.draft-revision-warning,.draft-deletion-warning{font-size:15px}.tariff-price-input,input,select,textarea{font-size:16px;min-height:48px;border-radius:11px}.onboarding-form{max-width:720px;padding:30px}.onboarding-reference-field label{font-size:20px}.channel-check{font-size:16px}.section-heading h2{font-size:26px}.resource-settings-card,.resource-card,.subscription-card{background:#fff;border:1px solid #dbe4ce;border-radius:20px;padding:25px}.platform-settings-section{font-size:17px}.status{font-size:16px;border-radius:14px}.onboarding-note{font-size:16px}.action-button-danger{background:#faeee8;border-color:#e6c6b7;color:#8e4c32}.v2-draft-channel-label{font-size:16px;color:#738662;margin-bottom:22px}
@media(max-width:1200px){.v2-shell{grid-template-columns:220px minmax(0,1fr)}.page{padding:28px 28px 50px}.v2-sidebar{padding-inline:18px}.v2-home-grid{grid-template-columns:minmax(0,1fr) 280px}.v2-connections-grid{grid-template-columns:1fr}.v2-setup{grid-template-columns:1fr}.v2-guide :is(h2,h3) br{display:none}.v2-guide ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.v2-guide :is(h2,h3){font-size:29px}.v2-guide p{font-size:15px}.draft-card{gap:18px;padding:22px}}
@media(max-width:980px){.v2-home-grid{grid-template-columns:1fr}.v2-home-rail{grid-template-columns:1fr 1fr}.v2-draft-grid{grid-template-columns:1fr}.draft-card{grid-template-columns:1fr}.v2-material-channel{flex-wrap:wrap}.page-title-row h1{font-size:34px}.v2-guide ol{grid-template-columns:1fr}}
@media(max-width:700px){body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px}.v2-environment{padding:8px 16px;height:34px;font-size:10px}.v2-environment span{font-size:10px}.v2-shell{display:block}.v2-sidebar{display:none}.page{padding:20px 18px calc(100px + env(safe-area-inset-bottom))}.v2-app-header{margin-bottom:29px;min-height:40px}.v2-breadcrumb{display:none}.v2-mobile-brand{display:flex;font-size:16px;gap:8px;align-items:center;font-weight:600}.v2-mobile-brand .v2-logo{width:29px;height:29px;font-size:23px;border-radius:10px}.v2-header-meta .app-version{display:none}.v2-mobile-profile{display:grid;place-items:center;border:1px solid #d3dec3;border-radius:50%;padding:5px;background:#eef4e4;min-width:42px;min-height:42px}.v2-mobile-profile .v2-avatar{width:30px;height:30px;background:#e1ebd1;color:#6b8352;font-size:11px}.v2-mobile-nav{display:flex;position:fixed;z-index:20;bottom:0;left:0;right:0;background:#1f2e17;border-top:1px solid #adc28728;padding:8px 12px max(8px,env(safe-area-inset-bottom));justify-content:space-around}.v2-mobile-nav button{display:grid;justify-items:center;gap:3px;font-size:11px;min-height:45px;min-width:76px;border:0;background:none;color:#97ad7f}.v2-mobile-nav button span{font-size:24px;line-height:1}.v2-mobile-nav button.selected{color:#d5fa68}.page-title-row h1{font-size:29px;line-height:1.2;letter-spacing:-.7px}.hero{padding-bottom:17px}.v2-lead{font-size:16px;line-height:1.65;margin-bottom:25px}.v2-platform-panel{padding:20px;border-radius:20px}.v2-platform-panel :is(h2,h3){font-size:21px;margin-bottom:20px}.v2-platform-option{padding:18px}.v2-platform-heading{gap:10px}.v2-platform-heading h3{font-size:23px}.v2-platform-heading p{font-size:14px}.v2-service-mark{width:41px;height:41px;font-size:24px}.v2-pill{font-size:10px;padding:4px 8px}.v2-platform-option>p{font-size:16px;margin:20px 0}.action-button,.secondary-button{font-size:15px;min-height:48px;padding:12px 14px}.v2-access-note{font-size:13px}.v2-guide{padding:19px 23px;border-radius:20px}.v2-guide summary{font-size:16px;min-height:26px;color:#e4efce}.v2-guide :is(h2,h3){font-size:26px}.v2-guide ol{gap:20px}.v2-setup{gap:22px}.v2-home-rail{grid-template-columns:1fr}.v2-attention-card,.v2-blank{padding:25px;border-radius:19px}.v2-attention-card :is(h2,h3){font-size:27px}.v2-attention-copy{font-size:16px}.v2-attention-card .action-button{width:100%}.v2-blank :is(h2,h3){font-size:25px}.v2-blank p{font-size:16px}.v2-panel{padding:23px}.integration-card{padding:22px}.integration-title{font-size:23px}.v2-material-channel{padding:22px}.v2-material-channel :is(h2,h3){font-size:23px}.v2-material-channel button{width:100%}.draft-card{padding:18px;border-radius:19px;gap:17px}.draft-text-editor{padding:18px}.draft-text{font-size:16px;line-height:1.7}.draft-actions{position:sticky;bottom:66px;z-index:5;background:#fff;padding:15px 0;margin:0;box-shadow:0 -8px 15px #25401a08}.draft-actions button{font-size:14px}.draft-revision-button{font-size:14px}.draft-card-header h2{font-size:18px}.v2-profile-card{padding:23px}.onboarding-form{padding:22px}.onboarding-reference-field label{font-size:18px}.tariff-help-dialog,.draft-text-revision-dialog{padding:22px;width:calc(100vw - 24px);max-height:calc(100svh - 30px);overflow:auto}.draft-text-revision-question{font-size:21px}.back-button{font-size:14px}.v2-draft-channel-label{font-size:14px}}
@media(max-width:370px){.page{padding-inline:14px}.page-title-row h1{font-size:27px}.v2-platform-panel{padding:17px}.v2-platform-option{padding:16px}.v2-brand{font-size:15px}.v2-channel-row{flex-wrap:wrap}.v2-environment{gap:10px;font-size:9px}.v2-environment span{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.v2-lead,.v2-attention-copy,.v2-blank>span{display:block}.v2-panel-dark>span{display:block;font-size:16px;color:#b1c69a}.v2-attention-card .action-button{display:block}.v2-attention>h3{font-size:22px;margin:0 0 18px}.v2-profile-card>h3{font-size:28px;margin:0}.v2-material-channel h3{font-size:25px;font-weight:550;margin:8px 0}.v2-blank h3{font-size:29px;font-weight:550;margin:0 0 14px}