/* ============================================================================
   Christi — styles.css
   Полная дизайн-система ДВУХ тем по build-контракту §4–§5.
   (A) ТЁМНЫЙ кабинет — глобальный «тёплый нуар + коралл».
   (B) СВЕТЛЫЙ премиум-сайт — изолирован скоупом `.site-canvas .site*`.
   Vanilla CSS. Без внешних ресурсов (шрифты подключает index.html через <link>).
   Все имена классов/токенов/id — нормативны (контракт §3, §4, §5).
============================================================================ */

/* ========================================================================
   §5 (A) ТОКЕНЫ ТЁМНОГО КАБИНЕТА — ДОСЛОВНО из блюпринта §4.2
======================================================================== */
:root{
  /* SURFACES — студийная тьма */
  --ink-900:#0B0D12; --ink-850:#11141B; --surface-800:#161A23; --surface-700:#1E232E;
  --surface-600:#28303D; --hairline:#333B49; --hairline-soft:rgba(255,255,255,.06);
  /* TEXT */
  --text-hi:#F4F6FB; --text-mid:#AEB6C6; --text-low:#6B7486; --text-disabled:#454D5C;
  /* ACCENT «коралл-стрела» */
  --coral-600:#FF5A3C; --coral-500:#FF7150; --coral-400:#FF8E72;
  --coral-glow:rgba(255,90,60,.45); --coral-tint:rgba(255,90,60,.10);
  /* ACCENT-2 «эфир» (ИИ/данные) */
  --ether-500:#6E8BFF; --ether-tint:rgba(110,139,255,.12);
  /* SEMANTIC */
  --success:#2FBF8F; --warning:#F2B33D; --danger:#F2545B; --info:#6E8BFF;
  /* SIGNATURE GRADIENTS */
  --grad-arrow:linear-gradient(100deg,#FF5A3C,#FF8E72 60%,#FFB38A);
  --grad-ai-aura:radial-gradient(120% 120% at 50% 0%,rgba(255,90,60,.22),rgba(110,139,255,.10) 45%,transparent 70%);
  /* TYPOGRAPHY (Clash Display недоступен в Google → ведущий Space Grotesk) */
  --font-display:"Space Grotesk","Manrope",sans-serif;
  --font-sans:"Inter","Manrope",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --fs-display:4.000rem; --fs-h1:3.052rem; --fs-h2:2.441rem; --fs-h3:1.953rem;
  --fs-h4:1.563rem; --fs-lg:1.250rem; --fs-base:1rem; --fs-sm:.800rem; --fs-xs:.640rem;
  --lh-tight:1.06; --lh-body:1.6; --tracking-display:-0.02em; --tracking-overline:0.18em;
  /* RADII / SHADOWS / GLOW */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-md:0 8px 24px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --glow-ai:0 0 0 1px rgba(255,90,60,.30),0 0 28px var(--coral-glow);
  /* GRID / SPACE / MOTION */
  --space:4px; --container:1240px; --grid-cols:12; --col-gap:24px;
  --inset-page:clamp(20px,4vw,56px); --section-y:clamp(72px,12vw,160px);
  --ease-out:cubic-bezier(.16,1,.30,1); --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
}

/* ========================================================================
   БАЗА / RESET (кабинет — тёмный по умолчанию)
======================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink-900);
  color:var(--text-hi);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--font-display); line-height:var(--lh-tight); letter-spacing:var(--tracking-display); margin:0 0 .4em; font-weight:600; }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:inherit; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--coral-tint); color:var(--text-hi); }
:focus-visible{ outline:2px solid var(--coral-500); outline-offset:2px; border-radius:var(--r-xs); }

/* Тонкий «инженерный» скроллбар */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink-850); }
::-webkit-scrollbar-thumb{ background:var(--surface-600); border-radius:var(--r-pill); border:2px solid var(--ink-850); }
::-webkit-scrollbar-thumb:hover{ background:var(--hairline); }

/* Оверлайн-микролейбл с коралловой ›-стрелкой (сигнатура блюпринта) */
.overline{
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--tracking-overline); text-transform:uppercase;
  color:var(--text-mid); display:inline-flex; align-items:center; gap:.5em;
}
.overline::before{ content:"›"; color:var(--coral-500); font-weight:700; }

/* ========================================================================
   §4(A) КАБИНЕТ — КАРКАС: app-shell / nav / topbar / main / screen
======================================================================== */
.app-shell{
  display:grid;
  grid-template-columns:248px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"nav topbar" "nav main";
  min-height:100vh;
}

/* ── левый рельс навигации ── */
.nav{
  grid-area:nav;
  background:linear-gradient(180deg,var(--ink-850),var(--ink-900));
  border-right:1px solid var(--hairline);
  padding:24px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h4);
  letter-spacing:-.02em; color:var(--text-hi);
  display:flex; align-items:center; gap:10px;
  padding:6px 10px 22px; margin-bottom:6px;
}
.brand::before{
  content:""; width:14px; height:14px; flex:0 0 auto;
  background:var(--grad-arrow);
  clip-path:polygon(0 0,100% 50%,0 100%,30% 50%);
  filter:drop-shadow(0 0 6px var(--coral-glow));
}
.nav__item{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--r-md);
  color:var(--text-mid); font-weight:500; font-size:var(--fs-sm);
  letter-spacing:.01em; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  position:relative;
}
.nav__item::before{
  content:""; width:7px; height:7px; border-radius:2px;
  background:var(--surface-600); transition:background var(--dur-fast), box-shadow var(--dur-fast);
}
.nav__item:hover{ background:var(--surface-800); color:var(--text-hi); }
.nav__item--active{
  background:var(--coral-tint); color:var(--text-hi); font-weight:600;
}
.nav__item--active::before{ background:var(--coral-500); box-shadow:0 0 10px var(--coral-glow); }
.nav__spacer{ flex:1 1 auto; }

/* ── верхняя панель ── */
.topbar{
  grid-area:topbar;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 var(--inset-page); height:68px;
  background:rgba(17,20,27,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
  position:sticky; top:0; z-index:40;
}
.topbar__title{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em; }
.topbar__actions{ display:flex; align-items:center; gap:12px; }

/* ── основная область + экраны ── */
#main{ grid-area:main; min-width:0; }
.screen{
  display:none;
  padding:clamp(28px,4vw,56px) var(--inset-page) 96px;
  max-width:var(--container); margin:0 auto;
  animation:screen-in var(--dur-slow) var(--ease-out);
}
.screen.is-active{ display:block; }
[hidden]{ display:none !important; }
@keyframes screen-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.screen__head{ margin-bottom:clamp(24px,3vw,40px); }
.screen__head h2{ font-size:var(--fs-h2); margin-bottom:.25em; }
.screen__head p{ color:var(--text-mid); max-width:62ch; }

/* ========================================================================
   §4(A) КНОПКИ
======================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); background:var(--surface-700);
  color:var(--text-hi); font-weight:600; font-size:var(--fs-sm); letter-spacing:.01em;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover{ background:var(--surface-600); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{
  background:var(--grad-arrow); color:#1A0B07; border-color:transparent;
  box-shadow:0 6px 18px rgba(255,90,60,.28);
}
.btn--primary:hover{ box-shadow:0 10px 26px rgba(255,90,60,.42); }
.btn--ghost{ background:transparent; border-color:var(--hairline); color:var(--text-mid); }
.btn--ghost:hover{ color:var(--text-hi); border-color:var(--coral-500); background:var(--coral-tint); }
.btn--danger{ background:transparent; border-color:rgba(242,84,91,.5); color:var(--danger); }
.btn--danger:hover{ background:rgba(242,84,91,.12); border-color:var(--danger); }
.btn--sm{ padding:7px 14px; font-size:var(--fs-xs); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

/* ========================================================================
   §4(A) КАРТОЧКИ / template-card
======================================================================== */
.card{
  background:var(--surface-800);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.card__head{
  padding:18px 22px; border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card__head h3{ font-size:var(--fs-h4); margin:0; }
.card__body{ padding:22px; }

/* Витрина шаблонов */
.template-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px; align-items:stretch;
}
.template-card{
  display:flex; flex-direction:column;
  background:var(--surface-800); border:1px solid var(--hairline);
  border-radius:var(--r-lg); overflow:hidden;
  cursor:pointer; transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.template-card:hover{ transform:translateY(-4px); border-color:var(--coral-500); box-shadow:var(--shadow-lg); }
.template-card__media{
  aspect-ratio:16/10; position:relative;
  background:
    linear-gradient(135deg,var(--surface-700),var(--ink-850)),
    var(--grad-ai-aura);
  display:flex; align-items:center; justify-content:center; font-size:3rem;
  border-bottom:1px solid var(--hairline);
}
.template-card__body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.template-card__name{ font-family:var(--font-display); font-size:var(--fs-h4); font-weight:600; }
.template-card__vertical{ color:var(--text-mid); font-size:var(--fs-sm); }
.template-card__badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.template-card__badge{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em;
  padding:3px 9px; border-radius:var(--r-pill);
  background:var(--ether-tint); color:var(--ether-500); border:1px solid rgba(110,139,255,.28);
}
/* Флагман — крупнее, с короной-бейджем */
.template-card--flagship{
  grid-column:1/-1;
  flex-direction:row; align-items:stretch;
  border-color:var(--coral-500);
  box-shadow:0 0 0 1px var(--coral-tint), var(--shadow-lg);
  background:linear-gradient(120deg,var(--surface-800),var(--ink-850));
}
.template-card--flagship .template-card__media{ flex:0 0 46%; aspect-ratio:auto; border-bottom:none; border-right:1px solid var(--hairline); font-size:4.5rem; }
.template-card--flagship .template-card__body{ justify-content:center; padding:clamp(20px,3vw,40px); }
.template-card--flagship .template-card__name{ font-size:var(--fs-h2); }
.template-card__flag{
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--grad-arrow); color:#1A0B07; font-weight:700;
  box-shadow:0 4px 14px var(--coral-glow);
}

/* ========================================================================
   §4(A) ОНБОРДИНГ
======================================================================== */
.onboard{ max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:28px; }
.onboard__step{
  background:var(--surface-800); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:28px;
  opacity:.55; transition:opacity var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
}
.onboard__step.is-active{ opacity:1; border-color:var(--coral-500); box-shadow:var(--glow-ai); }
.onboard__step.is-done{ opacity:.8; border-color:var(--success); }
.onboard__q{ font-family:var(--font-display); font-size:var(--fs-h4); margin-bottom:16px; }
.onboard__opts{ display:flex; flex-wrap:wrap; gap:10px; }
.onboard__opt{
  padding:10px 18px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); background:var(--surface-700);
  color:var(--text-mid); font-weight:500; font-size:var(--fs-sm);
  transition:all var(--dur-fast) var(--ease-out);
}
.onboard__opt:hover{ color:var(--text-hi); border-color:var(--coral-400); }
.onboard__opt.is-selected{ background:var(--coral-tint); border-color:var(--coral-500); color:var(--text-hi); }

/* ========================================================================
   §4(A) РЕДАКТОР: голос / waveform / chips / diff / publish
======================================================================== */
.editor-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; }
@media (max-width:1080px){ .editor-layout{ grid-template-columns:1fr; } }

.editor__preview-wrap{
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  background:var(--surface-800); padding:14px; box-shadow:var(--shadow-md);
}
.editor__preview-bar{
  display:flex; align-items:center; gap:8px; padding:4px 8px 12px;
  color:var(--text-low); font-family:var(--font-mono); font-size:var(--fs-xs);
}
.editor__dot{ width:11px; height:11px; border-radius:50%; background:var(--surface-600); }
.editor__dot:nth-child(1){ background:#FF5F57; } .editor__dot:nth-child(2){ background:#FEBC2E; } .editor__dot:nth-child(3){ background:#28C840; }
.editor__url{ margin-left:8px; }

.editor__side{ display:flex; flex-direction:column; gap:18px; position:sticky; top:88px; }

/* — voice-bar — */
.voice-bar{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-800); border:1px solid var(--hairline);
  border-radius:var(--r-pill); padding:8px 8px 8px 18px;
  transition:border-color var(--dur-base), box-shadow var(--dur-base);
}
.voice-bar:focus-within{ border-color:var(--coral-500); box-shadow:var(--glow-ai); }
.voice-bar__field{
  flex:1; min-width:0; background:transparent; border:none; color:var(--text-hi);
  font-size:var(--fs-sm); padding:6px 0;
}
.voice-bar__field::placeholder{ color:var(--text-low); }
.voice-bar__field:focus{ outline:none; }
.voice-mic{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--grad-arrow); color:#1A0B07; border:none; font-size:1.05rem;
  box-shadow:0 4px 14px var(--coral-glow); transition:transform var(--dur-fast);
}
.voice-mic:hover{ transform:scale(1.06); }
.voice-mic.is-listening{ animation:mic-pulse 1.2s var(--ease-out) infinite; }
@keyframes mic-pulse{ 0%,100%{ box-shadow:0 0 0 0 var(--coral-glow); } 50%{ box-shadow:0 0 0 10px rgba(255,90,60,0); } }

/* — waveform (анимация «слушаю») — */
.waveform{
  display:flex; align-items:center; justify-content:center; gap:4px;
  height:40px; padding:0 6px;
}
.waveform[hidden]{ display:none; }
.waveform__bar{
  width:4px; height:30%; border-radius:var(--r-pill);
  background:var(--grad-arrow);
  animation:wave 1s ease-in-out infinite;
}
.waveform__bar:nth-child(1){ animation-delay:-.9s; }
.waveform__bar:nth-child(2){ animation-delay:-.8s; }
.waveform__bar:nth-child(3){ animation-delay:-.7s; }
.waveform__bar:nth-child(4){ animation-delay:-.6s; }
.waveform__bar:nth-child(5){ animation-delay:-.5s; }
.waveform__bar:nth-child(6){ animation-delay:-.4s; }
.waveform__bar:nth-child(7){ animation-delay:-.3s; }
.waveform__bar:nth-child(8){ animation-delay:-.2s; }
.waveform__bar:nth-child(9){ animation-delay:-.1s; }
.waveform__bar:nth-child(10){ animation-delay:0s; }
.waveform__bar:nth-child(11){ animation-delay:-.35s; }
.waveform__bar:nth-child(12){ animation-delay:-.55s; }
@keyframes wave{ 0%,100%{ height:18%; opacity:.55; } 50%{ height:100%; opacity:1; } }

/* — chips (подсказки) — */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--surface-700); border:1px solid var(--hairline);
  color:var(--text-mid); font-size:var(--fs-xs); font-weight:500;
  transition:all var(--dur-fast) var(--ease-out);
}
.chip::before{ content:"›"; color:var(--coral-500); font-weight:700; }
.chip:hover{ color:var(--text-hi); border-color:var(--coral-500); background:var(--coral-tint); transform:translateY(-1px); }
.chip--ghost{ background:transparent; }

/* — diff-панель — */
.diff{ display:flex; flex-direction:column; gap:8px; }
.diff__empty{ color:var(--text-low); font-size:var(--fs-sm); font-style:italic; padding:8px 2px; }
.diff__row{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 14px; border-radius:var(--r-md);
  background:var(--surface-800); border:1px solid var(--hairline);
  font-size:var(--fs-sm); line-height:1.45;
  animation:diff-in var(--dur-base) var(--ease-out);
}
@keyframes diff-in{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
.diff__row::before{
  font-family:var(--font-mono); font-weight:700; flex:0 0 auto;
  width:18px; text-align:center; line-height:1.5;
}
.diff--add{ border-left:3px solid var(--success); }
.diff--add::before{ content:"+"; color:var(--success); }
.diff--edit{ border-left:3px solid var(--warning); }
.diff--edit::before{ content:"~"; color:var(--warning); }
.diff--del{ border-left:3px solid var(--danger); }
.diff--del::before{ content:"−"; color:var(--danger); }

/* — publish-bar — */
.publish-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px; border-radius:var(--r-lg);
  background:var(--surface-800); border:1px solid var(--hairline);
}
.publish-bar__status{ color:var(--text-mid); font-size:var(--fs-sm); margin-right:auto; }
.publish-bar__status strong{ color:var(--success); }

/* — CONFIRM-карточка (денежные/публичные операции) — */
.confirm-card{
  background:var(--surface-800); border:1px solid var(--coral-500);
  border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--glow-ai);
  display:flex; flex-direction:column; gap:12px;
  animation:diff-in var(--dur-base) var(--ease-out);
}
.confirm-card__q{ font-weight:600; }
.confirm-card__actions{ display:flex; gap:10px; }

/* — gate / clarify чип-карточка — */
.gate-card{
  background:var(--ether-tint); border:1px solid rgba(110,139,255,.4);
  border-radius:var(--r-md); padding:16px 18px;
  display:flex; flex-direction:column; gap:12px;
}
.gate-card__q{ font-weight:500; color:var(--text-hi); }

/* ========================================================================
   §4(A) ЦЕНТР УПРАВЛЕНИЯ: модули / коннекторы / аудит
======================================================================== */
.control-layout{ display:grid; gap:28px; }

.module-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;
}
.module-tile{
  display:flex; flex-direction:column; gap:10px;
  padding:18px; border-radius:var(--r-lg);
  background:var(--surface-800); border:1px solid var(--hairline);
  transition:border-color var(--dur-base), box-shadow var(--dur-base), opacity var(--dur-base);
}
.module-tile__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.module-tile__name{ font-family:var(--font-display); font-weight:600; }
.module-tile__subs{ display:flex; flex-wrap:wrap; gap:6px; }
.module-tile__sub{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.04em;
  padding:3px 8px; border-radius:var(--r-pill);
  background:var(--surface-700); border:1px solid var(--hairline); color:var(--text-mid);
}
.module-tile__sub.is-off{ opacity:.4; text-decoration:line-through; }
.module-tile--off{ opacity:.6; border-style:dashed; }
.module-tile--off .module-tile__name{ color:var(--text-mid); }

/* — toggle — */
.toggle{
  --tg-w:46px; --tg-h:26px;
  position:relative; width:var(--tg-w); height:var(--tg-h); flex:0 0 auto;
  border-radius:var(--r-pill); background:var(--surface-600);
  border:1px solid var(--hairline); cursor:pointer;
  transition:background var(--dur-base), border-color var(--dur-base);
}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--text-mid); transition:transform var(--dur-base) var(--ease-out), background var(--dur-base);
}
.toggle--on{ background:var(--coral-tint); border-color:var(--coral-500); }
.toggle--on::after{ transform:translateX(calc(var(--tg-w) - 24px)); background:var(--coral-500); box-shadow:0 0 10px var(--coral-glow); }

/* — таблица коннекторов — */
.connector-table{
  width:100%; border-collapse:collapse;
  background:var(--surface-800); border:1px solid var(--hairline);
  border-radius:var(--r-lg); overflow:hidden;
}
.connector-table thead th{
  text-align:left; padding:12px 16px; font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-low); background:var(--ink-850); border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono); font-weight:500;
}
.connector-row td{ padding:13px 16px; border-bottom:1px solid var(--hairline-soft); font-size:var(--fs-sm); vertical-align:middle; }
.connector-row:last-child td{ border-bottom:none; }
.connector-row:hover{ background:var(--surface-700); }
.connector-row__label{ font-weight:600; }
.connector-row__kind{ color:var(--text-low); font-family:var(--font-mono); font-size:var(--fs-xs); }
.connector-row--revoked{ opacity:.5; }
.connector-row--revoked .connector-row__label{ text-decoration:line-through; }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:600; padding:3px 10px; border-radius:var(--r-pill);
}
.status-pill::before{ content:""; width:7px; height:7px; border-radius:50%; }
.status-pill--active{ background:rgba(47,191,143,.14); color:var(--success); }
.status-pill--active::before{ background:var(--success); box-shadow:0 0 8px rgba(47,191,143,.7); }
.status-pill--degraded{ background:rgba(242,179,61,.14); color:var(--warning); }
.status-pill--degraded::before{ background:var(--warning); }
.status-pill--revoked{ background:rgba(242,84,91,.14); color:var(--danger); }
.status-pill--revoked::before{ background:var(--danger); }

/* — SecretRef-указатель (НИКОГДА не значение) — */
.secret-ref{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--fs-xs);
  padding:3px 10px; border-radius:var(--r-sm);
  background:var(--ink-850); border:1px solid var(--hairline); color:var(--ether-500);
}
.secret-ref::before{ content:"🔒"; }

/* — аудит-лента — */
.audit{ display:flex; flex-direction:column; gap:2px; }
.audit__row{
  display:grid; grid-template-columns:140px 1fr auto auto; gap:14px; align-items:center;
  padding:10px 14px; border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-mid);
}
.audit__row:nth-child(odd){ background:var(--surface-800); }
.audit__time{ color:var(--text-low); }
.audit__actor{ color:var(--text-hi); }
.audit__result--ok{ color:var(--success); }
.audit__result--denied{ color:var(--danger); }
@media (max-width:680px){ .audit__row{ grid-template-columns:1fr auto; row-gap:4px; } }

.control-note{
  font-size:var(--fs-sm); color:var(--text-mid);
  border-left:3px solid var(--coral-500); padding:6px 0 6px 14px; margin-bottom:6px;
}

/* ========================================================================
   §4(A) ВЫЖИВАЕМОСТЬ: dr-card / phoenix / keymode
======================================================================== */
.survive-layout{ display:grid; gap:24px; grid-template-columns:1fr 1fr; align-items:start; }
@media (max-width:900px){ .survive-layout{ grid-template-columns:1fr; } }

.dr-card{
  background:linear-gradient(135deg,var(--surface-800),var(--ink-850));
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:16px;
}
.dr-card__headline{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:var(--fs-h4); }
.dr-card__headline::before{ content:"✓"; color:var(--success); font-weight:700; }
.dr-card__meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.dr-card__stat{ background:var(--surface-700); border:1px solid var(--hairline); border-radius:var(--r-md); padding:12px 14px; }
.dr-card__stat-n{ font-family:var(--font-display); font-size:var(--fs-h4); color:var(--text-hi); }
.dr-card__stat-l{ font-size:var(--fs-xs); color:var(--text-low); text-transform:uppercase; letter-spacing:.06em; }
.dr-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.dr-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:600; padding:5px 12px; border-radius:var(--r-pill);
  background:var(--surface-700); border:1px solid var(--hairline); color:var(--text-mid);
}
.dr-badge--immutable{ background:rgba(47,191,143,.12); border-color:rgba(47,191,143,.4); color:var(--success); }
.dr-badge--immutable::before{ content:"🛡"; }

/* — Феникс: лог 9 фаз — */
.phoenix{
  background:var(--surface-800); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:22px; display:flex; flex-direction:column; gap:6px;
  font-family:var(--font-mono); font-size:var(--fs-sm);
}
.phoenix__phase{
  display:grid; grid-template-columns:24px 1fr auto; gap:12px; align-items:center;
  padding:9px 12px; border-radius:var(--r-sm);
  color:var(--text-low); transition:color var(--dur-base), background var(--dur-base);
}
.phoenix__phase::before{ content:"○"; text-align:center; }
.phoenix__phase--run{ color:var(--text-hi); background:var(--coral-tint); }
.phoenix__phase--run::before{ content:"◐"; color:var(--coral-500); animation:spin 1s linear infinite; }
.phoenix__phase--ok{ color:var(--text-mid); }
.phoenix__phase--ok::before{ content:"✓"; color:var(--success); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.phoenix__name{ letter-spacing:.02em; }
.phoenix__eta{ font-size:var(--fs-xs); color:var(--text-low); }
.phoenix__bar{
  grid-column:1/-1; height:4px; border-radius:var(--r-pill);
  background:var(--surface-600); overflow:hidden; margin-top:2px;
}
.phoenix__bar > i{
  display:block; height:100%; width:0%;
  background:var(--grad-arrow); transition:width var(--dur-base) var(--ease-out);
}
.phoenix__final{
  margin-top:14px; padding:16px; border-radius:var(--r-md);
  background:rgba(47,191,143,.1); border:1px solid rgba(47,191,143,.4);
  color:var(--text-hi); font-family:var(--font-sans); font-weight:500;
}
.phoenix__final strong{ color:var(--success); }
.phoenix__reconnect{ display:flex; flex-direction:column; gap:6px; margin-top:10px; font-family:var(--font-sans); }
.phoenix__reconnect li{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-mid); }
.phoenix__reconnect li::before{ content:"→"; color:var(--coral-500); }

/* — keymode toggle — */
.keymode{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 18px; border-radius:var(--r-lg);
  background:var(--surface-800); border:1px solid var(--hairline);
}
.keymode__opt{ color:var(--text-mid); font-family:var(--font-mono); font-size:var(--fs-sm); }
.keymode__opt.is-active{ color:var(--text-hi); font-weight:600; }
.keymode__hint{ flex:1 1 100%; color:var(--text-low); font-size:var(--fs-xs); }

/* ========================================================================
   §4(A) ТАРИФЫ
======================================================================== */
.tier-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; align-items:stretch;
}
.tier-card{
  display:flex; flex-direction:column; gap:14px;
  background:var(--surface-800); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:24px 22px;
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.tier-card:hover{ transform:translateY(-3px); border-color:var(--coral-400); }
.tier-card__name{ font-family:var(--font-display); font-size:var(--fs-h4); font-weight:600; }
.tier-card__price{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--coral-500); }
.tier-card__price small{ font-size:var(--fs-sm); color:var(--text-low); font-family:var(--font-sans); }
.tier-card__feats{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.tier-card__feats li{ display:flex; gap:9px; font-size:var(--fs-sm); color:var(--text-mid); line-height:1.4; }
.tier-card__feats li::before{ content:"✓"; color:var(--success); flex:0 0 auto; font-weight:700; }
.tier-card--vip{
  border-color:var(--coral-500);
  background:linear-gradient(160deg,var(--surface-800),rgba(255,90,60,.06));
  box-shadow:0 0 0 1px var(--coral-tint), var(--shadow-md);
}
.tier-card--vip .tier-card__name::after{ content:"VIP"; margin-left:8px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--coral-500); letter-spacing:.1em; }
.tier-card--current{
  outline:2px solid var(--coral-500); outline-offset:-2px;
  box-shadow:var(--glow-ai);
}
.tier-card--current .tier-card__name::before{ content:"● "; color:var(--success); }

/* ========================================================================
   §4(A) ДОНАТЫ
======================================================================== */
.donation{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:min(340px,calc(100vw - 48px));
  background:var(--surface-800); border:1px solid var(--coral-500);
  border-radius:var(--r-lg); padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), var(--glow-ai);
  display:flex; flex-direction:column; gap:14px;
  animation:donation-in var(--dur-slow) var(--ease-out);
}
.donation[hidden]{ display:none; }
@keyframes donation-in{ from{ opacity:0; transform:translateY(20px) scale(.96); } to{ opacity:1; transform:none; } }
.donation__sub{ font-size:var(--fs-xs); color:var(--text-low); text-transform:uppercase; letter-spacing:.08em; }
.donation__title{ font-family:var(--font-display); font-size:var(--fs-h4); font-weight:600; }
.donation__anchors{ display:flex; gap:8px; }
.donation__btn{
  flex:1; padding:11px 8px; border-radius:var(--r-md);
  border:1px solid var(--hairline); background:var(--surface-700);
  color:var(--text-hi); font-weight:600; font-size:var(--fs-sm);
  transition:all var(--dur-fast) var(--ease-out);
}
.donation__btn:hover{ border-color:var(--coral-500); background:var(--coral-tint); }
.donation__btn.is-anchor{ border-color:var(--coral-500); background:var(--grad-arrow); color:#1A0B07; }
.donation__later{
  background:none; border:none; color:var(--text-mid); font-size:var(--fs-sm);
  align-self:center; padding:4px 8px; text-decoration:underline; text-underline-offset:3px;
}
.donation__later:hover{ color:var(--text-hi); }

/* ========================================================================
   §4(A) БЕЙДЖ (тариф/благодарность)
======================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-sm); font-weight:600; padding:6px 14px; border-radius:var(--r-pill);
  background:var(--surface-700); border:1px solid var(--hairline); color:var(--text-hi);
}
.badge--patron{
  background:var(--grad-arrow); color:#1A0B07; border-color:transparent;
  box-shadow:0 4px 14px var(--coral-glow);
}
.badge--gratitude{ background:var(--ether-tint); border-color:rgba(110,139,255,.4); color:var(--ether-500); }

/* ========================================================================
   §4(A) КАБИНЕТ-ДАННЫЕ: kanban / chat / feed / finance
======================================================================== */
.cabinet-tabs{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.cabinet-tab{
  padding:9px 18px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); background:var(--surface-700);
  color:var(--text-mid); font-weight:500; font-size:var(--fs-sm);
  transition:all var(--dur-fast) var(--ease-out);
}
.cabinet-tab:hover{ color:var(--text-hi); }
.cabinet-tab.is-active{ background:var(--coral-tint); border-color:var(--coral-500); color:var(--text-hi); }
.cabinet-panel{ display:none; }
.cabinet-panel.is-active{ display:block; }

/* — kanban — */
.kanban{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; align-items:start; }
.kanban__col{
  background:var(--ink-850); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:14px; display:flex; flex-direction:column; gap:10px;
}
.kanban__col-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-low); padding:2px 4px 6px;
}
.kanban__count{ background:var(--surface-700); border-radius:var(--r-pill); padding:1px 8px; color:var(--text-mid); }
.kanban__card{
  background:var(--surface-800); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:13px 14px; box-shadow:var(--shadow-md); cursor:grab;
  transition:transform var(--dur-fast), border-color var(--dur-fast);
}
.kanban__card:hover{ transform:translateY(-2px); border-color:var(--coral-500); }
.kanban__card-name{ font-weight:600; font-size:var(--fs-sm); margin-bottom:4px; }
.kanban__card-meta{ font-size:var(--fs-xs); color:var(--text-low); }
.kanban__card-tag{
  display:inline-block; margin-top:8px; font-family:var(--font-mono); font-size:var(--fs-xs);
  padding:2px 8px; border-radius:var(--r-pill); background:var(--coral-tint); color:var(--coral-400);
}

/* — chat / inbox — */
.chat{
  display:flex; flex-direction:column; gap:12px;
  background:var(--ink-850); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:20px; max-width:680px;
}
.chat__msg{
  max-width:75%; padding:11px 15px; border-radius:var(--r-lg);
  font-size:var(--fs-sm); line-height:1.45;
}
.chat__msg-name{ display:block; font-size:var(--fs-xs); color:var(--text-low); margin-bottom:3px; }
.chat__msg--in{ align-self:flex-start; background:var(--surface-700); border:1px solid var(--hairline); border-bottom-left-radius:var(--r-xs); }
.chat__msg--out{ align-self:flex-end; background:var(--coral-tint); border:1px solid var(--coral-500); border-bottom-right-radius:var(--r-xs); }
.chat__compose{ display:flex; gap:8px; margin-top:8px; }
.chat__compose input{
  flex:1; background:var(--surface-700); border:1px solid var(--hairline);
  border-radius:var(--r-pill); padding:9px 16px; color:var(--text-hi);
}

/* — feed (соцлента) — */
.feed{ display:flex; flex-direction:column; gap:16px; max-width:600px; }
.feed__composer{
  background:var(--surface-800); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:16px; display:flex; flex-direction:column; gap:12px;
}
.feed__composer textarea{
  width:100%; min-height:72px; resize:vertical;
  background:var(--surface-700); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:11px 14px; color:var(--text-hi);
}
.feed__post{
  background:var(--surface-800); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:18px; display:flex; flex-direction:column; gap:10px;
}
.feed__post-head{ display:flex; align-items:center; gap:10px; }
.feed__post-avatar{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:var(--grad-arrow); display:flex; align-items:center; justify-content:center; color:#1A0B07; font-weight:700;
}
.feed__post-name{ font-weight:600; font-size:var(--fs-sm); }
.feed__post-time{ font-size:var(--fs-xs); color:var(--text-low); }
.feed__post-text{ font-size:var(--fs-sm); line-height:1.5; color:var(--text-hi); }
.feed__post-media{
  aspect-ratio:16/9; border-radius:var(--r-md); border:1px solid var(--hairline);
  background:linear-gradient(135deg,var(--surface-700),var(--ink-850)),var(--grad-ai-aura);
}
.feed__post-actions{ display:flex; gap:18px; color:var(--text-low); font-size:var(--fs-sm); }

/* — finance — */
.finance{ display:flex; flex-direction:column; gap:18px; }
.finance__stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.finance__stat{
  background:var(--surface-800); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:18px;
}
.finance__stat-l{ font-size:var(--fs-xs); color:var(--text-low); text-transform:uppercase; letter-spacing:.06em; }
.finance__stat-n{ font-family:var(--font-display); font-size:var(--fs-h3); margin-top:6px; }
.finance__stat-delta{ font-size:var(--fs-xs); margin-top:4px; }
.finance__stat-delta--up{ color:var(--success); }
.finance__stat-delta--down{ color:var(--danger); }
.finance__chart{
  height:160px; border-radius:var(--r-lg); border:1px solid var(--hairline);
  background:
    linear-gradient(180deg,transparent,var(--coral-tint)),
    repeating-linear-gradient(90deg,var(--hairline-soft) 0 1px,transparent 1px 56px);
  display:flex; align-items:flex-end; gap:8px; padding:16px;
}
.finance__bar{ flex:1; background:var(--grad-arrow); border-radius:var(--r-xs) var(--r-xs) 0 0; opacity:.85; }

/* — port-stub (заглушка при выкл. модуле) — */
.port-stub{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:48px 24px; border-radius:var(--r-lg);
  border:1px dashed var(--hairline); background:var(--surface-800); color:var(--text-mid);
}
.port-stub__icon{ font-size:2.4rem; opacity:.7; }

/* ========================================================================
   §4(A) SIGNATURE / ДЕКОР: glow-ai / hairline-bg / arrow-cursor
======================================================================== */
.glow-ai{ box-shadow:var(--glow-ai); position:relative; }
.glow-ai::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--grad-ai-aura); opacity:.6; mix-blend-mode:screen;
}
.hairline-bg{
  background-image:
    repeating-linear-gradient(0deg,var(--hairline-soft) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,var(--hairline-soft) 0 1px,transparent 1px 32px);
}
.arrow-cursor{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 3 L15 10 L3 17 L7 10 Z' fill='%23FF5A3C'/%3E%3C/svg%3E") 4 4, pointer; }

/* fallback-подсветка блоков в кабинете (узлы с data-fallback) */
[data-fallback]{ position:relative; }

/* Утилиты */
.stack{ display:flex; flex-direction:column; gap:16px; }
.row{ display:flex; align-items:center; gap:12px; }
.muted{ color:var(--text-mid); }
.mono{ font-family:var(--font-mono); }
.section-gap{ margin-top:clamp(40px,6vw,72px); }

/* ============================================================================
   ============================================================================
   §5 (B) СВЕТЛАЯ ТЕМА САЙТА — СКОУП `.site-canvas` / `.site*`
   Тёплый off-white, графит-текст, ОДИН коралл-акцент строго на CTA/активных.
   Все правила группы B префиксованы `.site-canvas` (изоляция тем, §7.1).
   ============================================================================
============================================================================ */
.site-canvas{
  --s-bg:#FBF8F4;            /* тёплый off-white фон */
  --s-surface:#FFFFFF;
  --s-ink:#1B1D22;          /* графит-текст */
  --s-ink-soft:#5A5F6B;
  --s-line:#E7E2DA;         /* тёплая разделительная линия */
  --s-coral:#FF5A3C;        /* акцент строго на CTA/активных */
  --s-coral-700:#E04A2E;    /* тёмный коралл для hover (исправл. плейсхолдер) */
  --s-coral-tint:rgba(255,90,60,.08);
  --s-air:clamp(96px,12vw,128px);   /* воздух между секциями (премиум) */
  --s-inset:clamp(20px,5vw,64px);
  --s-radius:16px;
  --s-shadow:0 18px 50px rgba(27,29,34,.08);
  /* флюид-типографика */
  --s-display:clamp(2.5rem,5vw,4.5rem);   /* hero 40→72px */
  --s-h2:clamp(1.8rem,3vw,2.75rem);
  --s-body:clamp(1rem,1.1vw,1.125rem);
  --s-font-display:"Space Grotesk",sans-serif;
  --s-font-body:"Inter",system-ui,sans-serif;
  --s-max:1280px;
  background:var(--s-bg); color:var(--s-ink); font-family:var(--s-font-body);
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--hairline);
}
/* «тёмная тема сайта» по голос-команде */
.site-canvas[data-mode="dark"]{
  --s-bg:#14161B; --s-surface:#1C1F26; --s-ink:#F2F2F0; --s-ink-soft:#A9AEB8; --s-line:#2A2E37;
  --s-shadow:0 18px 50px rgba(0,0,0,.5);
}

/* Корневой документ сайта */
.site-canvas .site{
  background:var(--s-bg); color:var(--s-ink);
  font-family:var(--s-font-body); font-size:var(--s-body); line-height:1.65;
}
.site-canvas .site h1,
.site-canvas .site h2,
.site-canvas .site h3{ font-family:var(--s-font-display); line-height:1.1; letter-spacing:-.015em; margin:0; color:var(--s-ink); }
.site-canvas .site p{ margin:0; color:var(--s-ink-soft); }
.site-canvas .site section{ padding-block:var(--s-air); }
.site-canvas .site__inner{ width:min(var(--s-max),100% - 2*var(--s-inset)); margin-inline:auto; }

/* — кнопки сайта: ровно один коралл-акцент — */
.site-canvas .site__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--s-radius);
  background:var(--s-coral); color:#fff; border:1px solid var(--s-coral);
  font-family:var(--s-font-body); font-weight:600; font-size:1rem;
  box-shadow:0 8px 22px rgba(255,90,60,.24);
  transition:transform .2s cubic-bezier(.16,1,.3,1), background .2s, box-shadow .2s;
}
.site-canvas .site__btn:hover{ background:var(--s-coral-700); transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,90,60,.34); }
.site-canvas .site__btn--ghost{
  background:transparent; color:var(--s-ink); border:1px solid var(--s-line);
  box-shadow:none;
}
.site-canvas .site__btn--ghost:hover{ background:transparent; border-color:var(--s-coral); color:var(--s-coral); transform:translateY(-2px); }

/* ── header / nav ── */
.site-canvas .site__header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--s-inset);
  background:color-mix(in srgb,var(--s-bg) 86%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--s-line);
}
.site-canvas .site__brand{ font-family:var(--s-font-display); font-weight:700; font-size:1.4rem; letter-spacing:-.02em; }
.site-canvas .site__nav{ display:flex; align-items:center; gap:28px; }
.site-canvas .site__nav-link{
  color:var(--s-ink-soft); font-size:.95rem; font-weight:500;
  position:relative; transition:color .2s;
}
.site-canvas .site__nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--s-coral); transition:width .25s var(--ease-out);
}
.site-canvas .site__nav-link:hover{ color:var(--s-ink); }
.site-canvas .site__nav-link:hover::after{ width:100%; }
.site-canvas .site__cta{
  display:inline-flex; align-items:center; padding:11px 22px;
  background:var(--s-coral); color:#fff; border-radius:var(--s-radius);
  font-weight:600; font-size:.92rem; box-shadow:0 6px 16px rgba(255,90,60,.22);
  transition:background .2s, transform .2s;
}
.site-canvas .site__cta:hover{ background:var(--s-coral-700); transform:translateY(-1px); }
@media (max-width:760px){ .site-canvas .site__nav{ display:none; } }

/* ── hero: асимметричная композиция ── */
.site-canvas .site__hero{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px);
  align-items:center;
  width:min(var(--s-max),100% - 2*var(--s-inset)); margin-inline:auto;
  padding-block:clamp(64px,9vw,120px);
}
.site-canvas .site__hero-overline{
  font-family:"JetBrains Mono",monospace; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--s-coral); margin-bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
}
.site-canvas .site__hero-overline::before{ content:"›"; font-weight:700; }
.site-canvas .site__hero-title{ font-size:var(--s-display); font-weight:600; margin-bottom:20px; max-width:14ch; }
.site-canvas .site__hero-sub{ font-size:clamp(1.05rem,1.4vw,1.25rem); max-width:46ch; margin-bottom:32px; }
.site-canvas .site__hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.site-canvas .site__media{
  aspect-ratio:4/5; border-radius:24px; overflow:hidden; position:relative;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(255,90,60,.16), transparent 55%),
    linear-gradient(155deg,#FFE7D6,#FFF6EF 55%,#EAF1F7);
  display:flex; align-items:center; justify-content:center; font-size:clamp(4rem,8vw,7rem);
  box-shadow:var(--s-shadow);
}
.site-canvas .site__media::after{
  content:""; position:absolute; inset:auto -10% -20% -10%; height:55%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,90,60,.18), transparent 70%);
}
/* hero «темнее» — голос-команда */
.site-canvas .site__hero--dark{
  background:#14161B; color:#F2F2F0;
  border-radius:24px; padding-inline:clamp(28px,4vw,56px);
  width:min(var(--s-max),100% - 2*var(--s-inset)); margin-inline:auto;
}
.site-canvas .site__hero--dark .site__hero-title{ color:#F2F2F0; }
.site-canvas .site__hero--dark .site__hero-sub{ color:#B9BEC8; }
.site-canvas .site__hero--dark .site__media{ box-shadow:0 18px 50px rgba(0,0,0,.5); }
@media (max-width:860px){ .site-canvas .site__hero{ grid-template-columns:1fr; } .site-canvas .site__media{ aspect-ratio:16/10; } }

/* ── stats / counters ── */
.site-canvas .site__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(20px,3vw,40px);
}
.site-canvas .site__stat{ text-align:center; }
.site-canvas .site__stat-n{ font-family:var(--s-font-display); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:600; color:var(--s-ink); line-height:1; }
.site-canvas .site__stat-label{ font-size:.92rem; color:var(--s-ink-soft); margin-top:8px; }

/* ── services ── */
.site-canvas .site__section-head{ max-width:60ch; margin-bottom:clamp(32px,4vw,56px); }
.site-canvas .site__section-head h2{ font-size:var(--s-h2); font-weight:600; margin-bottom:14px; }
.site-canvas .site__services{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px;
}
.site-canvas .site__service-card{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--s-radius);
  padding:30px 28px; display:flex; flex-direction:column; gap:12px;
  transition:transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.site-canvas .site__service-card:hover{ transform:translateY(-6px); box-shadow:var(--s-shadow); border-color:transparent; }
.site-canvas .site__service-card h3{ font-size:1.4rem; font-weight:600; }
.site-canvas .site__service-card p{ flex:1; }
.site-canvas .site__service-price{ font-family:var(--s-font-display); font-weight:600; color:var(--s-coral); font-size:1.15rem; }

/* ── portfolio (masonry) ── */
.site-canvas .site__portfolio .site__filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.site-canvas .site__filter button{
  padding:9px 18px; border-radius:999px; border:1px solid var(--s-line);
  background:transparent; color:var(--s-ink-soft); font-weight:500; font-size:.9rem;
  transition:all .2s var(--ease-out);
}
.site-canvas .site__filter button:hover{ color:var(--s-ink); border-color:var(--s-ink-soft); }
.site-canvas .site__filter button.is-active{ background:var(--s-coral); color:#fff; border-color:var(--s-coral); }
.site-canvas .site__gallery{ columns:3 240px; column-gap:20px; }
.site-canvas .site__gallery-item{
  break-inside:avoid; margin-bottom:20px; border-radius:var(--s-radius); overflow:hidden;
  position:relative; display:flex; align-items:center; justify-content:center;
  font-size:3rem; color:#fff; min-height:160px;
  background:linear-gradient(155deg,#2C3440,#566273);
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.site-canvas .site__gallery-item:nth-child(3n+1){ min-height:220px; background:linear-gradient(155deg,#1F6F8B,#2A9D8F); }
.site-canvas .site__gallery-item:nth-child(3n+2){ min-height:180px; background:linear-gradient(155deg,#E07A5F,#F4A261); }
.site-canvas .site__gallery-item:nth-child(3n){ min-height:260px; background:linear-gradient(155deg,#3D5A80,#98C1D9); }
.site-canvas .site__gallery-item:hover{ transform:scale(1.02); box-shadow:var(--s-shadow); }
.site-canvas .site__gallery-item span{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; font-family:var(--s-font-body); font-size:.85rem; font-weight:600; background:linear-gradient(0deg,rgba(0,0,0,.5),transparent); }
@media (max-width:760px){ .site-canvas .site__gallery{ columns:2 160px; } }
@media (max-width:480px){ .site-canvas .site__gallery{ columns:1; } }

/* ── pricing ── */
.site-canvas .site__pricing{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; align-items:stretch;
}
.site-canvas .site__tier{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--s-radius);
  padding:34px 28px; display:flex; flex-direction:column; gap:16px;
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.site-canvas .site__tier:hover{ transform:translateY(-4px); box-shadow:var(--s-shadow); }
.site-canvas .site__tier-name{ font-family:var(--s-font-display); font-size:1.3rem; font-weight:600; }
.site-canvas .site__tier-price{ font-family:var(--s-font-display); font-size:2.4rem; font-weight:600; }
.site-canvas .site__tier-feats{ display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.site-canvas .site__tier-feats li{ display:flex; gap:10px; font-size:.95rem; color:var(--s-ink-soft); }
.site-canvas .site__tier-feats li::before{ content:"✓"; color:var(--s-coral); font-weight:700; }
.site-canvas .site__tier--featured{
  border:1px solid var(--s-coral);
  box-shadow:0 0 0 1px var(--s-coral-tint), var(--s-shadow);
  position:relative;
}
.site-canvas .site__tier--featured::before{
  content:"Выбор гостей"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--s-coral); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  padding:5px 14px; border-radius:999px; white-space:nowrap;
}
.site-canvas .site__tier--featured .site__tier-price{ color:var(--s-coral); }

/* ── reviews ── */
.site-canvas .site__reviews{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px;
}
.site-canvas .site__review-card{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--s-radius);
  padding:28px; display:flex; flex-direction:column; gap:16px;
}
.site-canvas .site__review-card p{ font-size:1.05rem; color:var(--s-ink); line-height:1.6; }
.site-canvas .site__review-author{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.site-canvas .site__review-logo{
  width:44px; height:44px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background:var(--s-coral-tint);
}
.site-canvas .site__review-name{ font-weight:600; font-size:.95rem; }
.site-canvas .site__review-role{ font-size:.82rem; color:var(--s-ink-soft); }

/* ── faq accordion ── */
.site-canvas .site__faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:0; }
.site-canvas .site__faq-item{
  border-bottom:1px solid var(--s-line); padding:22px 0; cursor:pointer;
}
.site-canvas .site__faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--s-font-display); font-size:1.2rem; font-weight:600; color:var(--s-ink);
}
.site-canvas .site__faq-q::after{ content:"+"; color:var(--s-coral); font-size:1.5rem; transition:transform .25s var(--ease-out); flex:0 0 auto; }
.site-canvas .site__faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease-out), margin .3s; color:var(--s-ink-soft); }
.site-canvas .site__faq-item.is-open .site__faq-q::after{ transform:rotate(45deg); }
.site-canvas .site__faq-item.is-open .site__faq-a{ max-height:240px; margin-top:14px; }

/* ── cta banner ── */
.site-canvas .site__cta-banner{
  width:min(var(--s-max),100% - 2*var(--s-inset)); margin-inline:auto;
  border-radius:28px; padding:clamp(40px,6vw,72px);
  text-align:center; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#1B1D22,#2C2420);
}
.site-canvas .site__cta-banner::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 120% at 50% 0%, rgba(255,90,60,.35), transparent 60%);
}
.site-canvas .site__cta-banner > *{ position:relative; }
.site-canvas .site__cta-banner h2{ font-size:var(--s-h2); color:#fff; margin-bottom:14px; }
.site-canvas .site__cta-banner p{ color:rgba(255,255,255,.78); max-width:48ch; margin:0 auto 28px; }

/* ── lead form ── */
.site-canvas .site__lead{
  max-width:560px; margin-inline:auto;
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--s-radius);
  padding:clamp(28px,4vw,44px); box-shadow:var(--s-shadow);
  display:flex; flex-direction:column; gap:16px;
}
.site-canvas .site__lead h2,
.site-canvas .site__lead h3{ font-size:var(--s-h2); margin-bottom:6px; }
.site-canvas .site__field{
  width:100%; padding:13px 16px; border-radius:var(--s-radius);
  border:1px solid var(--s-line); background:var(--s-bg); color:var(--s-ink);
  font-size:1rem;
}
.site-canvas .site__field:focus{ outline:none; border-color:var(--s-coral); box-shadow:0 0 0 3px var(--s-coral-tint); }
.site-canvas .site__field::placeholder{ color:var(--s-ink-soft); }
/* fallback-вариант формы (deg. при выкл. hard-модуле) */
.site-canvas .site__lead--fallback{
  border-style:dashed; border-color:var(--s-coral); background:var(--s-coral-tint);
  align-items:center; text-align:center;
}
.site-canvas .site__lead--fallback::before{ content:"⚠"; font-size:1.8rem; }

/* ── footer ── */
.site-canvas .site__footer{
  background:#16181D; color:#C9CDD6;
  padding:clamp(48px,6vw,80px) var(--s-inset) 32px;
}
.site-canvas[data-mode="dark"] .site__footer{ background:#0E0F13; }
.site-canvas .site__footer-inner{
  width:min(var(--s-max),100%); margin-inline:auto;
  display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(28px,4vw,56px);
}
.site-canvas .site__footer-brand{ font-family:var(--s-font-display); font-size:1.6rem; font-weight:700; color:#fff; margin-bottom:14px; }
.site-canvas .site__footer-col h4{ color:#fff; font-family:var(--s-font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.site-canvas .site__footer-col a{ display:block; color:#C9CDD6; font-size:.92rem; padding:5px 0; transition:color .2s; }
.site-canvas .site__footer-col a:hover{ color:var(--s-coral); }
.site-canvas .site__footer-socials{ display:flex; gap:10px; margin-top:16px; }
.site-canvas .site__footer-socials a{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:#fff; font-size:.78rem; font-weight:600;
  transition:background .2s, color .2s;
}
.site-canvas .site__footer-socials a:hover{ background:var(--s-coral); }
.site-canvas .site__footer-legal{
  grid-column:1/-1; border-top:1px solid rgba(255,255,255,.08);
  margin-top:24px; padding-top:24px; font-size:.82rem; color:#8A8F9A;
}
@media (max-width:760px){ .site-canvas .site__footer-inner{ grid-template-columns:1fr 1fr; } }

/* ── catalog grid (модуль «Магазин») ── */
.site-canvas .site__catalog{
  display:grid; gap:22px;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
}
@media (max-width:760px){ .site-canvas .site__catalog{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .site-canvas .site__catalog{ grid-template-columns:1fr; } }
.site-canvas .site__catalog-card{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--s-radius);
  overflow:hidden; transition:transform .3s var(--ease-out), box-shadow .3s;
}
.site-canvas .site__catalog-card:hover{ transform:translateY(-5px); box-shadow:var(--s-shadow); }
.site-canvas .site__catalog-media{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; font-size:2.6rem;
  background:linear-gradient(155deg,#EAF1F7,#FFE7D6);
}
.site-canvas .site__catalog-body{ padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.site-canvas .site__catalog-name{ font-weight:600; }
.site-canvas .site__catalog-price{ color:var(--s-coral); font-family:var(--s-font-display); font-weight:600; }

/* ── booking calendar (модуль «Бронирование») ── */
.site-canvas .site__booking{ max-width:720px; margin-inline:auto; }
.site-canvas .site__calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.site-canvas .site__day{
  aspect-ratio:1; border-radius:12px; border:1px solid var(--s-line);
  background:var(--s-surface); display:flex; align-items:center; justify-content:center;
  font-weight:600; color:var(--s-ink); cursor:pointer; transition:all .2s var(--ease-out);
}
.site-canvas .site__day:hover{ border-color:var(--s-coral); color:var(--s-coral); }
.site-canvas .site__day.is-busy{ opacity:.4; cursor:not-allowed; background:var(--s-bg); }
.site-canvas .site__day.is-selected{ background:var(--s-coral); color:#fff; border-color:var(--s-coral); }

/* ── social feed (модуль «Соцсеть») ── */
.site-canvas .site__social{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.site-canvas .site__social-post{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--s-radius);
  overflow:hidden;
}
.site-canvas .site__social-media{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:2.4rem; background:linear-gradient(155deg,#FFE7D6,#EAF1F7); }
.site-canvas .site__social-body{ padding:14px 16px; }
.site-canvas .site__social-likes{ color:var(--s-coral); font-weight:600; font-size:.85rem; }

/* ── checkout / pay (модуль «Оплата») ── */
.site-canvas .site__checkout{
  max-width:480px; margin-inline:auto;
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--s-radius);
  padding:clamp(28px,4vw,40px); box-shadow:var(--s-shadow); text-align:center;
}
.site-canvas .site__checkout-amount{ font-family:var(--s-font-display); font-size:2.6rem; font-weight:600; color:var(--s-ink); margin:10px 0 24px; }
.site-canvas .site__pay-methods{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:24px; }
.site-canvas .site__pay-method{ padding:10px 18px; border:1px solid var(--s-line); border-radius:12px; font-weight:600; font-size:.9rem; }

/* ── FALLBACK-блоки (graceful, §2.2): placeholder / hidden-note ── */
.site-canvas .site__placeholder{
  margin-inline:auto; max-width:560px; text-align:center;
  border:2px dashed var(--s-coral); border-radius:var(--s-radius);
  background:var(--s-coral-tint); color:var(--s-ink);
  padding:clamp(36px,5vw,56px); display:flex; flex-direction:column; align-items:center; gap:14px;
}
.site-canvas .site__placeholder::before{ content:"🔌"; font-size:2.6rem; }
.site-canvas .site__placeholder h3{ font-size:1.3rem; }
.site-canvas .site__placeholder p{ max-width:42ch; }
.site-canvas .site__hidden-note{
  margin-inline:auto; max-width:420px; text-align:center;
  font-size:.85rem; color:var(--s-ink-soft);
  border:1px dashed var(--s-line); border-radius:999px;
  padding:10px 20px; opacity:.8;
}

/* ── data-fallback подсветка в превью (видимость деградации) ── */
.site-canvas [data-fallback]{ outline:1px dashed var(--s-coral); outline-offset:4px; border-radius:var(--s-radius); }

/* ============================================================================
   SCROLL-REVEAL (премиум-анимация появления секций сайта)
   Класс `.reveal` ставит app.js; `.is-visible` — при пересечении вьюпорта.
============================================================================ */
.site-canvas .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.site-canvas .reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================================
   АДАПТИВ КАБИНЕТА
============================================================================ */
@media (max-width:1024px){
  .app-shell{
    grid-template-columns:1fr;
    grid-template-areas:"topbar" "main";
  }
  .nav{
    position:fixed; left:0; top:0; bottom:0; z-index:60; width:248px;
    transform:translateX(-100%); transition:transform var(--dur-base) var(--ease-out);
    height:100vh;
  }
  .nav.is-open{ transform:none; box-shadow:var(--shadow-lg); }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; }
  .nav-backdrop[hidden]{ display:none; }
}
@media (max-width:640px){
  .screen{ padding-inline:18px; }
  .topbar{ padding-inline:18px; }
  .template-card--flagship{ flex-direction:column; }
  .template-card--flagship .template-card__media{ flex-basis:auto; aspect-ratio:16/9; border-right:none; border-bottom:1px solid var(--hairline); }
  .donation{ right:12px; left:12px; bottom:12px; width:auto; }
  .editor__side{ position:static; }
}

/* ============================================================================
   §7 prefers-reduced-motion — отключаем волну/анимации/scroll-reveal/parallax
============================================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .waveform__bar{ height:55%; }
  .voice-mic.is-listening{ animation:none; }
  .phoenix__phase--run::before{ animation:none; }
  .site-canvas .reveal{ opacity:1; transform:none; }
  .site-canvas .site__service-card:hover,
  .site-canvas .site__gallery-item:hover,
  .site-canvas .site__catalog-card:hover,
  .site-canvas .site__tier:hover,
  .site-canvas .site__btn:hover{ transform:none; }
}

/* ============================================================================
   PRINT (минимальная корректность)
============================================================================ */
@media print{
  .nav,.topbar,.donation,.voice-bar,.waveform{ display:none !important; }
  body{ background:#fff; color:#000; }
}