/* 10_money.css — частина style.css, винесена без перестановки правил.
   Гроші: підписка й собівартість, кредити в шапці, згода TikTok,
   ключі доступу ззовні, батч варіантів Studio.
   Порядок підключення в index.html повторює порядок частин:
   каскад від розділення не змінився (перевірено побайтно). */
/* ── Гроші: підписка + собівартість (розділ billing) ──────────────────── */
/* Дві вкладки одного розділу. Словник той самий, що в Бібліотеці
   (.lib-tabs / .lib-tab.active), щоб перемикач упізнавався як той самий
   елемент, а не як ще один винахід. */
/* Рядок запрошення в команду — над списком людей, бо це дія, а список —
   наслідок. Поле пошти тягнеться, роль і кнопка лишаються свого розміру. */
.bl-invite{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; margin-bottom:14px; }
.bl-invite #blInviteEmail{ flex:1 1 200px; min-width:0; }
.bl-invite-msg{ flex:1 0 100%; font:500 var(--fs-12)/1.5 var(--sans); color:var(--ok); }
.bl-invite-msg[hidden]{ display:none; }
.bl-invite-msg.bl-invite-bad{ color:var(--danger); }

.bl-tabs{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; margin-bottom:18px; }
/* 🛑 Був суцільний бурштин. На екрані про гроші бурштин належить
   ЦІНІ — кнопці «Підключити за $149»; вкладка, пофарбована тим самим,
   ділила з нею увагу, і правило «один бурштин на екран» порушувалось
   рівно там, де воно найдорожче. Вибрана вкладка тепер яскравість
   плюс заливка, як активний пункт рейки. */
.bl-tab.active{ border-color:transparent; color:var(--text); background:var(--fill-2); }
.bl-pane[hidden]{ display:none; }

.bl-grid{ display:grid; gap:var(--sp-14); grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-bottom:14px; }
.bl-card{ padding:20px; }
.bl-card + .bl-card{ margin-top:14px; }
.bl-card-head{ display:flex; align-items:baseline; gap:var(--sp-12); margin-bottom:14px; }
.bl-card-head h3{ margin:0; font:650 var(--fs-15)/1.2 var(--sans); }
.bl-hint{ color:var(--text-mute); font:500 var(--fs-12)/1.4 var(--sans); }

.bl-plan{ font:700 26px/1.1 var(--sans); letter-spacing:-.02em; }
.bl-plan-meta{ color:var(--text-dim); font-size: var(--fs-13); margin-top:4px; }
.bl-months{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft);
  font-size: var(--fs-13); color:var(--text-dim); }
.bl-months b{ color:var(--text); }
.bl-actions{ margin-top:16px; }

.bl-big{ font:700 34px/1 var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.bl-big span{ font:500 var(--fs-13)/1 var(--sans); color:var(--text-mute); letter-spacing:0; }
.bl-bar{ height:6px; border-radius:999px; background:var(--bg-soft); margin:14px 0 16px;
  overflow:hidden; }
/* 🛑 Було --ok, тобто ЗЕЛЕНИЙ. Дві біди в одному оголошенні: зелений
   тут єдиний холодний тон на теплій базі, і він же другий акцент на
   екрані, де бурштин уже витрачено на число залишку просто над
   смугою. Смуга — вторинне читання (скільки з'їдено), число —
   первинне; вторинному кольору не належить. Нейтральна заливка.
   Попередження й аварія свій колір лишають: там колір — сенс. */
.bl-bar-fill{ height:100%; background:var(--fill-3); border-radius:999px;
  transition:width var(--t-med) var(--ease); }
.bl-bar-fill.warn{ background:var(--warn); }
.bl-bar-fill.danger{ background:var(--danger); }

.bl-lines{ list-style:none; margin:0; padding:0; }
.bl-lines li{ display:flex; justify-content:space-between; gap:var(--sp-12); padding:7px 0;
  border-bottom:1px solid var(--border-soft); font-size: var(--fs-14); color:var(--text-dim); }
.bl-lines li:last-child{ border-bottom:0; }
.bl-lines b{ color:var(--text); font-variant-numeric:tabular-nums; }
.bl-note{ color:var(--text-mute); font-size: var(--fs-12); margin:12px 0 0; }

.bl-banner{ border-radius:var(--radius); padding:12px 14px; margin-bottom:14px;
  font-size: var(--fs-14); border:1px solid var(--border-soft); }
.bl-banner.warn{ border-color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,transparent); }
.bl-banner.danger{ border-color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); }

.bl-limit-row{ display:flex; align-items:center; gap:var(--sp-12); padding:10px 0;
  border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.bl-limit-row:last-child{ border-bottom:0; }
.bl-limit-name{ flex:1; min-width:160px; font-size: var(--fs-14); }
.bl-limit-name .bl-hint{ display:block; }
/* Кегль полю потрібен свій: `font-family: inherit` дає родину, але не
   розмір — його браузер лишає своїм (13.3333px). У полі, куди вписують
   ліміт витрат, це помітно поруч із підписом, набраним нашим шрифтом. */
.bl-limit-input{ width:140px; font: 500 var(--fs-13)/1 var(--sans); }

.bl-user{ display:flex; justify-content:space-between; gap:var(--sp-14); padding:11px 0;
  border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.bl-user:last-child{ border-bottom:0; }
.bl-user-main b{ display:block; font-size: var(--fs-14); }
.bl-user-access{ display:flex; gap:var(--sp-6); flex-wrap:wrap; align-items:center; }
.chip-sm{ font-size: var(--fs-12); padding:3px 8px; }

.bl-table{ width:100%; border-collapse:collapse; font-size: var(--fs-14); }
.bl-table td{ padding:9px 0; border-bottom:1px solid var(--border-soft); color:var(--text-dim); }
.bl-table td.num{ text-align:right; color:var(--text); font-variant-numeric:tabular-nums; }
.bl-table tr:last-child td{ border-bottom:0; }

@media (max-width:640px){
  .bl-limit-input{ width:100%; }
  .bl-limit-row{ gap:var(--sp-8); }
}

/* Довідка в розділі «Інформація» */
.info-faq{ display:flex; flex-direction:column; gap:var(--sp-8); }
.info-faq-item{ border:1px solid var(--border-soft); border-radius:var(--radius);
  background:var(--bg-soft); overflow:hidden; }
.info-faq-item summary{ cursor:pointer; padding:13px 16px; font:600 var(--fs-14)/1.4 var(--sans);
  list-style:none; }
.info-faq-item summary::-webkit-details-marker{ display:none; }
.info-faq-item summary::before{ content:"+"; display:inline-block; width:16px;
  color:var(--text-mute); font-weight:600; }
.info-faq-item[open] summary::before{ content:"−"; }
.info-faq-item[open] summary{ border-bottom:1px solid var(--border-soft); }
.info-faq-body{ padding:14px 16px 16px 32px; font-size: var(--fs-14); color:var(--text-dim); }
.info-faq-body p{ margin:0 0 10px; }
.info-faq-body ul{ margin:0 0 10px; padding-left:18px; }
.info-faq-body li{ margin:5px 0; }
.info-faq-body b{ color:var(--text); }
.info-link{ background:none; border:0; padding:0; font:inherit; color:var(--brand-ink);
  cursor:pointer; text-decoration:underline; }

/* ── Кредити в шапці ──────────────────────────────────────────────────── */
.credits-chip{
  display: inline-flex; align-items: center; gap: var(--sp-6); flex: none;
  height: 30px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border-soft);
  color: var(--text); font: 600 var(--fs-12)/1 var(--mono);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.credits-chip:hover{ border-color: var(--border-hover); }
.credits-chip .cc-ic{ display: inline-flex; width: 14px; height: 14px; opacity: .75; }
.credits-chip .cc-ic svg{ width: 100%; height: 100%; }
/* Стан читається кольором рамки, а не заливкою: залитий чип у шапці
   конкурує за увагу з активним прогоном, а це важливіше. */
/* Класи станів у власному просторі імен (cc-*). Голі `low`/`empty` — вже
   зайняті: `.empty` у застосунку це глобальна утиліта порожнього стану з
   пунктирною рамкою, і чип успадковував би її вигляд та семантику. */
.credits-chip.cc-low{ border-color: var(--warn); color: var(--warn); }
.credits-chip.cc-empty{ border-color: var(--danger); color: var(--danger); }

.credits-overlay{ position: fixed; inset: 0; z-index: 60; background: transparent; }
.credits-panel{
  position: fixed; width: min(320px, calc(100vw - 24px));
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  padding: 14px; max-height: calc(100vh - var(--topbar-h) - 24px); overflow-y: auto;
}
.cw-head{ font: 650 var(--fs-13)/1.2 var(--sans); margin-bottom: 10px; }

.cw-lines{ display: flex; flex-direction: column; gap: 1px; }
.cw-line{ display: flex; justify-content: space-between; gap: var(--sp-10); padding: 6px 0;
  border-bottom: 1px solid var(--border-soft); font-size:  var(--fs-13); color: var(--text-dim); }
.cw-line:last-child{ border-bottom: 0; }
.cw-line b{ color: var(--text); font-variant-numeric: tabular-nums; }

.cw-calc{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.cw-calc-title{ font: 650 var(--fs-12)/1.2 var(--sans); color: var(--text-dim);
letter-spacing: .05em; margin-bottom: 8px; }
.cw-rows{ display: flex; flex-direction: column; }
.cw-row{ display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-10);
  align-items: baseline; padding: 5px 0; font-size:  var(--fs-12); }
.cw-model{ color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-price{ color: var(--text-mute); font: 500 var(--fs-11)/1 var(--mono); }
.cw-count{ min-width: 26px; text-align: right; font: 700 var(--fs-13)/1 var(--mono);
  color: var(--ok); font-variant-numeric: tabular-nums; }
.cw-count.zero{ color: var(--text-mute); }
.cw-note{ margin: 10px 0 0; font-size:  var(--fs-11); line-height: 1.45; color: var(--text-mute); }
.cw-actions{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.cw-actions .chip{ width: 100%; justify-content: center; }

@media (max-width: 640px){
  /* Шапка на телефоні вже щільна — лишаємо саме число, іконку прибираємо. */
  .credits-chip{ padding: 0 8px; }
  .credits-chip .cc-ic{ display: none; }
}

/* ── Собівартість (розділ власника) ──────────────────────────────────────
   Виглядає навмисно інакше за клієнтські розділи: попередження вгорі й
   моноширинні числа. Це не стилістика заради стилістики — розділ легко
   випадково показати на демо, і він має сам про себе попереджати. */
.cst-warn{
  display: flex; gap: var(--sp-8); align-items: flex-start;
  padding: 10px 14px; margin-bottom: 16px; border-radius: var(--radius);
  border: 1px solid var(--warn); background: var(--panel);
  font: 600 var(--fs-12)/1.5 var(--sans); color: var(--text-dim);
}
.cst-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap; margin-bottom: 14px; }
.cst-periods{ display: flex; gap: var(--sp-6); flex-wrap: wrap; }
/* Той самий закон, що й для вкладок і рейки: ВИБІР — яскравість,
   ДІЯ — колір. Бурштиновий чип періоду обіцяв дію, якої немає:
   перемикання «7 днів / 30 днів» нічого не витрачає й нікуди не веде. */
.cst-periods .chip.active{ border-color: transparent; color: var(--text); background: var(--fill-3); }
.cst-health{
  display: flex; align-items: flex-start; gap: var(--sp-8); padding: 10px 14px; margin-bottom: 14px;
  border-radius: var(--radius); border: 1px solid var(--danger); background: var(--panel);
  font: 600 var(--fs-12)/1.45 var(--sans); color: var(--danger);
}
.cst-health .svg-ic{ flex: 0 0 auto; margin-top: 1px; }
.cst-health-text{ flex: 1 1 auto; min-width: 0; }
.cst-tiles .tl-val{ font-variant-numeric: tabular-nums; }
.cst-tiles .tl-val.ok{ color: var(--ok); }
.cst-tiles .tl-val.bad{ color: var(--danger); }
.cst-note{ font: 600 var(--fs-12)/1.5 var(--sans); color: var(--text-mute); margin: 10px 0 0; }
.cst-note.bad{ color: var(--danger); }

.cst-retry{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-12); }
.cst-retry-card{
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--border-soft); background: var(--panel);
}
.cst-retry-card.over{ border-color: var(--danger); }
.cst-retry-card.unmeasured{ border-style: dashed; }
.cst-retry-head{ font: 700 var(--fs-11)/1 var(--sans); color: var(--text-mute); margin-bottom: 6px; }
.cst-retry-val{ font: 700 var(--fs-24)/1.1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.cst-retry-card.unmeasured .cst-retry-val{ font-size: 17px; color: var(--text-dim); }
.cst-retry-val .as{ display: block; font: 600 var(--fs-10)/1.4 var(--sans); color: var(--text-mute); text-transform: none; letter-spacing: 0; }
.cst-retry-sub{ margin-top: 7px; font: 500 var(--fs-12)/1.55 var(--sans); color: var(--text-dim); }

.cst-table-wrap{ overflow-x: auto; }
.cst-table{ width: 100%; border-collapse: collapse; font: 600 var(--fs-12)/1.4 var(--sans); }
.cst-table th{
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft);
  font: 700 var(--fs-11)/1 var(--sans); color: var(--text-mute);
  white-space: nowrap;
}
.cst-table td{ padding: 9px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cst-table tr.bad td{ color: var(--danger); }
.cst-table .cst-brand{ font-weight: 700; white-space: normal; }
.cst-table .cst-margin .n{ color: var(--text-mute); font-weight: 600; }

.cst-two{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.cst-bar-row{ display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; gap: var(--sp-10); align-items: center; margin-bottom: 7px; }
.cst-bar-name{ font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-bar{ height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.cst-bar span{ display: block; height: 100%; background: var(--brand-ink); border-radius: 999px; }
.cst-bar-val{ font: 700 var(--fs-12)/1.2 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.cst-bar-val .n{ display: block; font-weight: 600; color: var(--text-mute); font-size:  var(--fs-10); }

.cst-days{ display: flex; align-items: flex-end; gap: var(--sp-4); height: 120px; padding-top: 6px; }
.cst-day{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.cst-day-bar{ width: 100%; max-width: 22px; background: var(--brand-ink); border-radius: 3px 3px 0 0; opacity: .85; }
.cst-day-lbl{ margin-top: 4px; font: 600 var(--fs-10)/1 var(--mono); color: var(--text-mute); }

/* Рахунки провайдерів — Anthropic і fal. Блоки навмисно виглядають так само,
   як решта розділу: це не «інтеграція», а те саме питання «скільки ми
   витратили», просто відповідь дає постачальник, а не наш лічильник. */
.cst-provider{ margin-top: 4px; }
.cst-provider-tiles{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-12); margin-bottom: 12px;
}
.cst-provider-tiles .tile{ padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--panel); }
.cst-provider-tiles .tl-lbl{ font: 600 var(--fs-11)/1.2 var(--sans); color: var(--text-mute); }
.cst-provider-tiles .tl-val{ font: 700 20px/1.2 var(--sans); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cst-provider-tiles .tl-val.bad{ color: var(--danger); }
.cst-provider-tiles .tl-val.warn{ color: var(--warn); }
.cst-provider-tiles .tl-sub{ font: 600 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); margin-top: 3px; }
.cst-provider .n{ color: var(--text-mute); font-weight: 600; }
.cst-provider b.bad{ color: var(--danger); }
.cst-note.warn{ color: var(--warn); }
/* Смуга тривоги стає товстішою, лише коли збій БЛОКУЮЧИЙ. Ліміт запитів
   мине сам; порожній баланс — ні, і на екрані це має бути видно без читання. */
.cst-health.blocking{ border-width: 2px; }

.cst-links{ margin-top: 12px; }
.cst-links > summary{ cursor: pointer; font: 700 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); padding: 6px 0; }
.cst-links-body{ padding-top: 8px; }
.cst-link-row{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.cst-link-brand{ flex: 1 1 160px; font: 700 var(--fs-12)/1.3 var(--sans); color: var(--text); }
.cst-link-select{
  flex: 1 1 200px; max-width: 280px; padding: 6px 8px; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font: 600 var(--fs-12)/1.2 var(--sans);
}

/* ── Екран згоди TikTok ───────────────────────────────────────────────────
   Візуально відокремлений від решти композера рамкою: це не наші
   налаштування, а обов'язковий крок чужої платформи, і плутати його з
   рештою форми не можна. */
.tt-consent{
  margin-top: 14px; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--panel);
}
.tt-head{ display: flex; align-items: center; gap: var(--sp-10); margin-bottom: 10px; }
.tt-av{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--panel-2); }
.tt-title{ font: 700 var(--fs-13)/1.2 var(--sans); color: var(--text); }
.tt-who{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); }
.tt-note{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-mute); margin: 8px 0; }
.tt-note.warn{
  color: var(--text-dim); border-left: 2px solid var(--warn);
  padding-left: 10px; margin: 10px 0 12px;
}
.tt-field{ display: block; margin-bottom: 12px; }
.tt-lbl{
  display: block; font: 700 var(--fs-11)/1 var(--sans); color: var(--text-mute); margin-bottom: 6px;
}
.tt-select{
  width: 100%; max-width: 320px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); background: var(--panel-2); color: var(--text);
  font: 600 var(--fs-13)/1.2 var(--sans);
}
.tt-select:focus{ outline: none; border-color: var(--brand-ink); }
.tt-checks{ display: flex; flex-direction: column; gap: 7px; }
.tt-check, .tt-consent-row{
  display: flex; align-items: flex-start; gap: var(--sp-8); cursor: pointer;
  font: 600 var(--fs-12)/1.45 var(--sans); color: var(--text);
}
.tt-check input, .tt-consent-row input{ margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand-ink); }
.tt-check.off{ cursor: default; color: var(--text-mute); }
.tt-hint{ font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); }
.tt-check .tt-hint{ margin-left: 4px; }
.tt-sub{
  margin: 8px 0 0 24px; padding-left: 12px; display: flex; flex-direction: column; gap: 7px;
  border-left: 1px solid var(--border-soft);
}
.tt-consent-row{
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft);
  font-weight: 500; color: var(--text-dim);
}
.tt-consent-row a{ color: var(--brand-ink); }

@media (max-width: 680px){
  .tt-consent{ padding: 12px; }
  .tt-select{ max-width: none; }
}

/* ── Доступ ззовні: ключі API / MCP (Налаштування) ──────────────────────────
   Свіжий ключ — окремий блок із рамкою, а не рядок у списку: він живе рівно
   до перезавантаження сторінки, і виглядати він має так, щоб його не
   прогортали. */
.set-hint{ color: var(--muted); font-size:  var(--fs-13); line-height: 1.5; margin: 0 0 12px; }

/* Результат дії в Налаштуваннях. Успіх і відмова — різні стани, а не різні
   кольори одного рядка: перший підтверджує, друга вимагає щось зробити. */
.set-msg{
  margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  font: 500 var(--fs-13)/1.5 var(--sans); color: var(--text);
  border: 1px solid rgba(var(--ok-rgb, 60,180,120), .38);
  background: rgba(var(--ok-rgb, 60,180,120), .10);
}
.set-msg[hidden]{ display: none; }
.set-msg-bad{
  border-color: rgba(var(--danger-rgb), .40);
  background: rgba(var(--danger-rgb), .10);
}
.set-hint b{ color: var(--ink); }
.set-section .set-actions{ gap: var(--sp-8); justify-content: flex-start; flex-wrap: wrap; }
.set-section .set-actions .inp{ min-width: 180px; }

.key-fresh{ border: 1px solid var(--brand); border-radius: var(--radius-sm); padding: 14px;
  margin-bottom: 14px; background: var(--panel-2); }
.key-fresh-head{ font-weight: 600; margin-bottom: 8px; }
.key-token{ display: block; padding: 10px 12px; border-radius: var(--ctl-radius-sm); background: var(--panel);
  border: 1px solid var(--line); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size:  var(--fs-12); word-break: break-all; user-select: all; }
.key-fresh-note{ color: var(--warn, #d19a00); font-size:  var(--fs-13); margin: 8px 0; }
.key-fresh-how{ color: var(--muted); font-size:  var(--fs-12); line-height: 1.7; margin-bottom: 10px; }
.key-fresh-how code{ background: var(--panel); padding: 1px 5px; border-radius: var(--radius-xs); }

.key-list{ display: flex; flex-direction: column; gap: var(--sp-8); }
.key-row{ display: flex; align-items: center; gap: var(--sp-12); padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--ctl-radius-sm); background: var(--panel); }
.key-row.revoked{ opacity: .5; }
.key-main{ flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline;
  gap: var(--sp-8); flex-wrap: wrap; }
.key-tail{ color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size:  var(--fs-12); }
.key-scopes{ color: var(--muted); font-size:  var(--fs-12); }
.key-meta{ color: var(--muted); font-size:  var(--fs-12); flex: 0 0 auto; }

@media (max-width: 640px){
  .key-row{ flex-wrap: wrap; }
  .key-meta{ width: 100%; }
}

/* ── Батч варіантів (Studio) ────────────────────────────────────────────────
   Ціна стоїть між формою й кнопкою навмисно: її неможливо не побачити на
   шляху до «Запустити». */
.bt-box{ margin: 0 0 18px; padding: 16px; }
.bt-form{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-14); margin-bottom: 12px; }
.bt-estimate{ padding: 10px 12px; border-radius: var(--ctl-radius-sm); background: var(--panel-2);
  border: 1px solid var(--line); font-size:  var(--fs-13); line-height: 1.6; margin-bottom: 12px; }
.bt-estimate b{ font-size:  var(--fs-15); }
.bt-short{ color: var(--warn, #d19a00); }

.bt-list{ display: flex; flex-direction: column; gap: var(--sp-8); margin-top: 14px; }
.bt-row{ display: grid; grid-template-columns: 1fr 120px auto; align-items: center;
  gap: var(--sp-12); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--ctl-radius-sm); }
.bt-row-main{ display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap; min-width: 0; }
.bt-failed{ color: var(--danger); font-size:  var(--fs-12); }
.bt-bar{ height: 6px; border-radius: var(--radius-xs); background: var(--panel-2); overflow: hidden; }
.bt-bar span{ display: block; height: 100%; background: var(--brand); }
.bt-row-side{ display: flex; align-items: center; gap: var(--sp-8); }

@media (max-width: 640px){
  .bt-row{ grid-template-columns: 1fr; }
  .bt-bar{ width: 100%; }
}

/* ══ ЧИСЛО — ГЕРОЙ ═══════════════════════════════════════════════════════════
   Наш продукт — не малювалка й не планувальник, а пульт, де кожна кнопка має
   ціну. У конкурентів герой екрана — заголовок на 60-140px; у нас ним має
   бути ЧИСЛО: залишок кредитів, ціна дії, скільки з цього вийде роликів.

   JetBrains Mono вже лежав у токенах і майже не використовувався. Табличні
   цифри тут не косметика: без них число «дригається» при кожному оновленні,
   бо різні цифри мають різну ширину — а саме ці числа й оновлюються найчастіше. */
.num{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; letter-spacing: -.02em; line-height: 1;
}
.num-xl{ font-size: 40px; letter-spacing: -.035em; }
.num-lg{ font-size: 26px; letter-spacing: -.03em; }
.num-md{ font-size:  var(--fs-18); }
.num-accent{ color: var(--accent); }
.num-unit{ font: 600 var(--fs-12)/1 var(--sans); color: var(--text-mute); letter-spacing: 0; margin-left: 4px; }

/* ══ КОНТРАСТ ФОРМ ═══════════════════════════════════════════════════════════
   Було майже все на --radius: 14px, тож кнопка всередині картки відрізнялась
   від неї лише кольором. Керування — 8px (тісніше, «прилад»), контейнери —
   20px (м'якше, «поверхня»). Різниця форм дає відчуття зробленості дешевше
   за будь-яку тінь. */
.panel, .card, .tile{ border-radius: var(--radius-lg); }
/* 🛑 `.btn` ЗВІДСИ ПРИБРАНО. Радіус кнопки тепер приходить токеном
   (--ctl-radius / --ctl-radius-sm) з єдиного правила в 02_shell.css.
   Поки `.btn` стояв тут, це правило вантажилось пізніше за 02_shell і
   перемагало `.btn-sm` за однакової ваги — виміряно: маленькі кнопки
   отримували радіус 11px замість своїх 9px. */
/* 🛑 `.chip` звідси теж прибрано — слідом за `.btn`. Радіус чипа тепер
   приходить токеном --chip-radius з єдиного правила в 02_shell.css.
   Поки він стояв тут, це правило вантажилось пізніше й непомітно
   керувало формою чипів з файлу про гроші. */
.inp, select, input[type="text"], input[type="number"],
input[type="email"], input[type="password"], textarea{ border-radius: var(--radius-sm); }

/* ══ РІДНИЙ ВИПАДАЮЧИЙ СПИСОК ════════════════════════════════════════════════
   Перерахування, яке не треба бачити цілком (модель, якість, голос), має бути
   селектом, а не стіною пігулок — виміряно в нас 17 чипів і 0 селектів на
   одному кроці. Стилізуємо рідний <select>: він дає безкоштовно клавіатуру,
   доступність і рідний список на мобільному. */
/* Базовий контрол форми. Його НЕ БУЛО: `.inp` використовувався в розмітці,
   але жодного правила під нього не існувало, тож селекти й поля показувались
   рідним віджетом ОС — сірою коробкою, що не має нічого спільного з рештою.
   Знайдено оком під час перевірки, не тестом: CSS такого не ловить. */
.inp{
  width: 100%; max-width: 100%;
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; font: 500 var(--fs-13)/1.4 var(--sans);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.inp::placeholder{ color: var(--text-mute); }
.inp:hover{ border-color: var(--border-hover); }
.inp:focus{ outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-t-wash-3); }
.inp:disabled{ opacity: .55; cursor: not-allowed; }

select.inp{
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                     linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
select.inp:hover{ border-color: var(--border-hover); }
select.inp:focus{ outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-t-wash-3); }

/* ═══ ЗАЛИШОК — ГЕРОЙ ЕКРАНА ═════════════════════════════════════════════
   Питання, з яким сюди приходять, рівно одне: скільки лишилось і на скільки
   стане. Число мусить бути головним предметом картки, а не підписом до неї. */
.bl-big{
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:clamp(38px, 5vw, 56px); line-height:1; font-weight:700;
  letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:var(--sp-10);
}
.bl-big span{ font-family:inherit; font-size: var(--fs-13); font-weight:500; color:var(--text-mute); letter-spacing:0 }
/* Відповідь одразу під числом: кредит абстрактний, доки не перекладений
   у дату. Рядок зникає, якщо витрат ще не було — вигадана дата гірша за
   її відсутність, бо на неї почнуть покладатись. */
.bl-until{ margin-top:6px; font-size: var(--fs-13); color:var(--text-dim) }

/* Смуга з двома сегментами: витрачене й зарезервоване. Друге тьмяне —
   це не витрата, це обіцянка роботам у черзі. */
.bl-bar{ position:relative }
.bl-bar-res{
  position:absolute; top:0; height:100%; border-radius:999px;
  background:repeating-linear-gradient(115deg,
    var(--fill-3) 0 4px, transparent 4px 8px);
}

/* ═══ ВИБІР ТАРИФУ ═══════════════════════════════════════════════════════
   Порожній стан, намальований як дані, — найгірший з можливих: на місці
   назви тарифу стояв прочерк у 34px, тобто найбільший предмет картки не
   казав нічого. Тепер тут вибір із цінами.

   Бурштин рівно один: кнопка того тарифу, з якого починають. Друга кнопка
   — звичайна заливка, бо два бурштинові варіанти поруч не радять нічого. */
.bl-choose{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-10); margin-top:4px }
.bl-opt{
  display:flex; flex-direction:column; gap:var(--sp-6); padding:14px;
  border-radius:var(--radius-md); background:var(--fill-1);
}
.bl-opt.rec{ background:var(--fill-2) }
.bl-opt-h{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap }
.bl-opt-h b{ font-size: var(--fs-14); font-weight:700; color:var(--text) }
.bl-opt-tag{ font-size: var(--fs-10); color:var(--text-mute) }
.bl-opt-price{ display:flex; align-items:baseline; gap:3px }
.bl-opt-price b{
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:26px; line-height:1; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.bl-opt-price span{ font-size: var(--fs-12); color:var(--text-mute) }
.bl-opt-meta{ font-size: var(--fs-11); color:var(--text-mute); line-height:1.4 }
.bl-opt-go{ margin-top:6px; width:100% }
/* Посилання на повну таблицю лишається, але як довідка внизу, а не як
   головна дія: людині, що вже тут, треба підключити тариф, а не читати
   порівняння на іншому сайті. */
.bl-all{ font-size: var(--fs-12); color:var(--text-mute); text-decoration:none }
.bl-all:hover{ color:var(--text) }

@media (max-width:720px){ .bl-choose{ grid-template-columns:minmax(0,1fr) } }

/* ── Промокод ───────────────────────────────────────────────────────────── */
/* Стоїть у картці підписки, бо знижка стосується рахунку, а не кредитів.
   Поле й кнопка в один рядок: тут одна дія, і розносити її на два рівні
   означало б натякати, що дій дві. */
.bl-promo{ margin-top:14px; padding-top:14px;
  border-top:1px solid var(--border-soft) }
.bl-promo-lab{ display:block; margin-bottom:7px;
  font-size:12px; color:var(--text-mute) }
.bl-promo-row{ display:flex; gap:8px; align-items:center }
.bl-promo-inp{ flex:1 1 auto; min-width:0; text-transform:uppercase }
.bl-promo-inp::placeholder{ text-transform:none }
.bl-promo-btn{ flex:0 0 auto }
.bl-promo-msg{ margin:9px 0 0; font-size:12px; line-height:1.5;
  color:var(--text-mute) }
/* Відмова — попередження, а не аварія: людина просто набрала не той код. */
.bl-promo-msg.bad{ color:var(--warn) }

/* ── ЖУРНАЛ ВЛАСНИКА ────────────────────────────────────────────────────
   Живе у файлі «Грошей», бо це третя вкладка того самого розділу.
   Окремий файл означав би ще один тег у index.html заради ~80 рядків.

   Рядок журналу — не картка. Тут читають ПОТІК: очі біжать по лівому
   краю, шукаючи час і рівень. Тому жодних рамок навколо кожного рядка,
   лише тонкий роздільник; рамки перетворили б стрічку на список плиток,
   де кожен рядок однаково важливий, а це протилежне тому, що потрібно. */
.lg-note {
  color: var(--text-mute); font-size: 13px; line-height: 1.55;
  max-width: 78ch; margin: 0 0 16px;
}
.lg-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.lg-q { flex: 1 1 220px; min-width: 180px; max-width: 420px; }
.lg-stat { color: var(--text-mute); font-size: 12px; margin-bottom: 10px; }
.lg-stat code, .lg-alarm code { font-size: 11px; opacity: .85; }
/* Не «попередження», а тривога: журнал, якого немає, виглядає точнісінько
   як журнал без помилок. */
.lg-alarm {
  border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent);
  padding: 10px 12px; border-radius: 0 8px 8px 0; font-size: 13px;
  margin-bottom: 12px; line-height: 1.5;
}
.lg-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.lg-h {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-mute); font-weight: 600; margin: 0 0 8px;
}
.lg-col > div {
  max-height: 62vh; overflow: auto; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel);
}
.lg-row {
  padding: 7px 12px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.5;
}
.lg-row:last-child { border-bottom: 0; }
.lg-meta { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lg-at { font-variant-numeric: tabular-nums; color: var(--text-mute); font-size: 11px; }
.lg-lv { font-size: 10px; letter-spacing: .06em; font-weight: 700; color: var(--text-mute); }
.lg-src { font-size: 11px; color: var(--text-mute); opacity: .8; }
/* Повідомлення моноширинним і з збереженням переносів: трасування винятку
   без цього злипається в один абзац і перестає читатись. */
.lg-msg {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; margin-top: 2px;
}
.lg-row.bad .lg-lv { color: var(--danger); }
.lg-row.bad { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.lg-row.warn .lg-lv { color: var(--warn); }
/* Продовження трасування: той самий рядок логічно, тому без власного часу
   й із втягнутим лівим краєм — інакше кожен рядок стека читався б як
   окрема подія. */
.lg-row.raw .lg-meta { display: none; }
.lg-row.raw { border-bottom: 0; padding-top: 0; padding-left: 26px; }
.lg-row.raw .lg-msg { color: var(--text-mute); }

@media (max-width: 900px) {
  .lg-cols { grid-template-columns: 1fr; }
  .lg-col > div { max-height: 48vh; }
}