/* Xyvero — Maison d'API. Портировано из faq cluade api / frontend (globals.css + tailwind theme). */
:root {
  color-scheme: dark;
  --void: #050505;
  --bg: #050505;
  --bg2: #050505;
  --ivory: #efe6d6;
  --mist: #a39a8c;
  --brass: #b0894d;
  --cognac: #8a6a3b;
  --text: #efe6d6;
  --muted: #a39a8c;
  --accent: #b0894d;
  --green: #a9bd85;
  --purple: #c9a86a;
  --orange: #cf8f5c;
  --danger: #e0655a;
  --line: rgba(239, 230, 214, 0.12);
  --line-soft: rgba(239, 230, 214, 0.08);
  --panel: rgba(5, 5, 5, 0.55);
  --panel-solid: #0b0a08;
  --radius: 2px;
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: #050505; color: var(--ivory); min-height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}
* { scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
::selection { background: #b0894d; color: #050505; }
a { color: var(--ivory); text-decoration: none; }
a:hover { color: var(--brass); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
code, pre { font-family: var(--font-mono); }

/* ---------- атмосфера (из Atmosphere.tsx + globals.css) ---------- */
.atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.damier {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(45deg, #0c0c0c 25%, transparent 25%),
    linear-gradient(-45deg, #0c0c0c 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0c0c0c 75%),
    linear-gradient(-45deg, transparent 75%, #0c0c0c 75%);
  background-size: 72px 72px;
  background-position: 0 0, 0 36px, 36px -36px, -36px 0;
  opacity: 0.55;
  animation: damier-drift 48s linear infinite;
}
.nn-stream { position: absolute; inset: -8%; overflow: hidden; opacity: 0.5; }
.nn-stream-row {
  position: absolute; left: 0; display: flex; width: max-content;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(176, 137, 77, 0.22);
  white-space: nowrap; animation: nn-scroll linear infinite;
}
.nn-stream-row b { font-weight: 700; color: rgba(176,137,77,.5); margin: 0 0.45em; }
@keyframes nn-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.monogram-veil {
  position: absolute; inset: 0; opacity: 0.12;
  background-image: url("/static/brands.svg"); /* tile: data-uri ниже переехала в brands.svg height='240' viewBox='0 0 360 240'%3E%3Cg fill='none' stroke='%23b0894d' stroke-width='1.1'%3E%3Cg transform='translate(31.2 31.2) scale(0.9)'%3E%3Cpath d='M32 8 L52 54 H41.5 L38 44 H26 L22.5 54 H12 Z'/%3E%3Cpath d='M28.2 37 H35.8 L32 26 Z'/%3E%3C/g%3E%3Cg transform='translate(151.2 31.2) scale(0.9)'%3E%3Cpath d='M32 8 C24 8 18 14 18 21 C13 23 10 28 12 34 C10 40 14 46 20 47 C21 53 27 57 33 55 C38 59 46 57 49 51 C55 50 58 43 56 37 C59 32 57 25 51 23 C50 16 42 8 32 8 Z'/%3E%3Ccircle cx='32' cy='33' r='7'/%3E%3C/g%3E%3Cg transform='translate(271.2 31.2) scale(0.9)'%3E%3Cpath d='M16 14 L32 32 L16 50'/%3E%3Cpath d='M48 14 L32 32 L48 50'/%3E%3C/g%3E%3Cg transform='translate(31.2 151.2) scale(0.9)'%3E%3Cpath d='M10 34 C16 18 28 12 40 16 C50 19 56 28 54 38 C52 48 42 54 32 52 C22 50 14 44 10 34 Z'/%3E%3Ccircle cx='42' cy='28' r='3'/%3E%3Cpath d='M18 36 C24 32 34 32 44 38'/%3E%3C/g%3E%3Cg transform='translate(151.2 151.2) scale(0.9)'%3E%3Cpath d='M32 6 L36 26 L56 32 L36 38 L32 58 L28 38 L8 32 L28 26 Z'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3Cg transform='translate(271.2 151.2) scale(0.9)'%3E%3Cpath d='M14 32 C14 24 24 24 32 32 C40 40 50 40 50 32 C50 24 40 24 32 32 C24 40 14 40 14 32 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
  animation: monogram-float 90s linear infinite;
}
.grain {
  position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: 0.18; mix-blend-mode: overlay;
  animation: grain-shift 0.9s steps(2) infinite;
}
.silk {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(176,137,77,.045) 48%, rgba(239,230,214,.05) 50%, rgba(176,137,77,.04) 52%, transparent 62%);
  background-size: 220% 100%;
  animation: silk-sweep 14s ease-in-out infinite;
}
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, #000 92%); }
.spot {
  position: absolute; width: 42vw; height: 42vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(176,137,77,.09), transparent 68%);
  transform: translate(-50%, -50%);
  transition: left 0.6s ease-out, top 0.6s ease-out;
}
.dust span {
  position: absolute; bottom: -8px; width: 1.5px; height: 1.5px;
  background: #b0894d; border-radius: 50%; opacity: 0;
  animation: dust linear infinite;
}
@keyframes damier-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-72px,-72px,0); } }
@keyframes monogram-float { from { background-position: 0 0; } to { background-position: 360px 240px; } }
@keyframes grain-shift { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1.2%,.8%); } 50% { transform: translate(1%,-1.4%); } 75% { transform: translate(-.6%,1.1%); } }
@keyframes silk-sweep { 0%,100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
@keyframes dust { 0% { transform: translate3d(0,20px,0); opacity: 0; } 12% { opacity: .7; } 100% { transform: translate3d(12px,-110vh,0); opacity: 0; } }
.site-frame { pointer-events: none; position: fixed; inset: 18px; z-index: 30; border: 1px solid rgba(176,137,77,.22); }
.page-wrap { position: relative; z-index: 1; }

/* ---------- типографика донора ---------- */
.kicker, .eyebrow {
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 6px; font-family: var(--font-sans);
}
.eyebrow { display: flex; align-items: center; gap: 7px; }
.eyebrow .nicon { width: 13px; height: 13px; color: var(--brass); opacity: .8; }
.display { font-family: var(--font-display); }
.italic-brass, .accent { font-style: italic; color: var(--brass); }
.muted { color: var(--muted); }
.ok { color: var(--green); }
.bad, .error { color: var(--danger); }
.rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(176,137,77,.7), transparent); }

/* ---------- каркас ---------- */
main { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem 4rem; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
/* Дашборд шире витрины: таблице ключей нужно место. */
main:has(.cabinet) { max-width: 120rem; }

/* ---------- шапка ---------- */
.topbar {
  position: relative; z-index: 2;
  max-width: 120rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 1.75rem 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ivory); }
.brand:hover { color: var(--ivory); text-decoration: none; }
.brand svg { width: 36px; height: 36px; }
.topbar nav { display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap; }
.topbar nav a {
  color: var(--mist); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0; border: none; background: none;
}
.topbar nav a:hover { color: var(--ivory); text-decoration: none; }
.inline { display: inline; }
.link { background: none; border: none; color: var(--mist); cursor: pointer; padding: 0; font: inherit; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.link:hover { color: var(--ivory); }

/* ---------- панели / карточки ---------- */
.card, .panel {
  border: 1px solid rgba(239,230,214,.1);
  background: rgba(5,5,5,.55);
  border-radius: 2px;
  padding: 2rem;
  margin: 1rem 0;
}
.key-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.key-head h2 { margin: 0; font-size: 2rem; }
.badge {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--mist); white-space: nowrap;
}
.badge.ok { color: var(--green); border-color: rgba(169,189,133,.4); background: rgba(169,189,133,.08); }
.badge.bad { color: var(--danger); border-color: rgba(224,101,90,.4); background: rgba(224,101,90,.08); }

/* ---------- hero главной ---------- */
.hero-grid { display: grid; gap: 2.5rem; padding: 1.5rem 0 4rem; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.45fr 0.75fr; align-items: start; } }
.hero-title { font-size: clamp(3rem, 8vw, 6.4rem); line-height: 0.9; margin: 1.25rem 0 0; font-weight: 500; }
.hero-title em { font-style: italic; color: var(--brass); }
.hero-side { border-top: 1px solid rgba(239,230,214,.15); padding-top: 1.5rem; }
@media (min-width: 900px) { .hero-side { margin-top: 4rem; } }
.hero-side p { font-size: 0.9rem; line-height: 1.9; color: var(--mist); }
.hero-facts { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--mist); }
.hero-facts dd { margin: 0.5rem 0 0; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; letter-spacing: normal; text-transform: none; color: var(--ivory); font-variant-numeric: tabular-nums; }
.hero-facts dt { margin: 0; line-height: 1.4; display: flex; align-items: center; gap: 7px; }
.hero-facts dt .nicon { width: 13px; height: 13px; color: var(--brass); opacity: .85; }

/* ---------- бегущая строка ---------- */
.marquee { overflow: hidden; border-top: 1px solid rgba(239,230,214,.1); border-bottom: 1px solid rgba(239,230,214,.1); }
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; padding: 0.85rem 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.marquee-dot { margin: 0 0.55rem; font-weight: 700; color: var(--brass); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- секции ---------- */
.section { padding: 4rem 0; }
.section h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin: 1rem 0 0; font-weight: 500; }
.section h2 em { font-style: italic; }
.quote { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 3rem); line-height: 1.25; }
.quote em { font-style: italic; color: var(--brass); }
.rituals { margin-top: 3rem; display: grid; gap: 1px; background: rgba(239,230,214,.1); }
@media (min-width: 900px) { .rituals { grid-template-columns: repeat(4, 1fr); } }
.rituals article { background: var(--void); padding: 1.75rem; }
.look-num { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass); line-height: 1.4; }
/* хвостовой трекинг letter-spacing сдвигает «01» влево — компенсируем */
.rituals article:hover .look-num { letter-spacing: 0.5em; margin-right: -0.18em; }
.rituals article h3 { display: flex; align-items: center; gap: 9px; }
.rituals article h3 .nicon { width: 17px; height: 17px; color: var(--brass); opacity: .85; transition: transform .3s ease, opacity .3s ease; }
.rituals article:hover h3 .nicon { opacity: 1; transform: scale(1.12); }
.rituals h3 { font-size: 1.9rem; margin: 2.5rem 0 0; }
.rituals p { margin: 1rem 0 0; font-size: 0.85rem; line-height: 1.7; color: var(--mist); }

/* ---------- формы / кнопки ---------- */
button, .button {
  font-family: var(--font-sans);
  background: transparent; color: var(--ivory);
  border: 1px solid var(--brass); border-radius: 0;
  padding: 0.75rem 1.75rem; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 400; cursor: pointer; transition: background 0.2s, color 0.2s;
}
button:hover, .button:hover { background: var(--brass); color: #050505; filter: none; }
button.danger { border-color: var(--danger); color: var(--danger); background: transparent; }
button.danger:hover { background: var(--danger); color: #050505; }
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  border: 1px solid #b0894d; padding: 0.75rem 1.75rem; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: #efe6d6; background: transparent;
}
.btn-gold:hover { background: #b0894d; color: #050505; text-decoration: none; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #a39a8c; border: none; background: none; padding: 0.75rem 0;
}
.btn-ghost:hover { color: #efe6d6; background: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 0; border: 1px solid var(--line); cursor: pointer; background: transparent; color: var(--ivory);
}
.btn:hover { text-decoration: none; border-color: var(--brass); background: transparent; color: var(--ivory); }
.btn.green { color: var(--green); border-color: rgba(169,189,133,.45); background: rgba(169,189,133,.08); }
.btn.blue { color: var(--ivory); border-color: rgba(176,137,77,.5); background: rgba(176,137,77,.1); }
.btn.purple { color: #d8c9a4; border-color: rgba(176,137,77,.45); background: rgba(176,137,77,.08); }
.btn.orange { color: var(--orange); border-color: rgba(207,143,92,.45); background: rgba(207,143,92,.08); margin-left: auto; }
.btn.ghost { color: var(--text); border-color: var(--line); background: transparent; }
input, select, textarea {
  width: 100%;
  background: transparent; color: var(--ivory);
  border: 1px solid rgba(239,230,214,.15); border-radius: 0;
  padding: 0.75rem 1rem; font-family: var(--font-sans); font-size: 14px; min-width: 0; outline: none;
}
input::placeholder { color: rgba(163,154,140,.5); }
input:focus, select:focus, textarea:focus { border-color: var(--brass); }
select option { background: #0b0a08; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row input { flex: 1 1 160px; }
.stack { display: grid; gap: 12px; max-width: 420px; }
.stack label { display: grid; gap: 6px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); }
.field {
  width: 100%; border: 1px solid rgba(239,230,214,.15); background: transparent;
  padding: 0.75rem 1rem; font-size: 0.875rem; color: #efe6d6; outline: none;
}
.field:focus { border-color: #b0894d; }

/* портал: ввод ключа */
.portal { padding: 8px 0; }
.key-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.key-form input { flex: 1 1 280px; font-family: var(--font-mono); }
.key-form button { flex: 0 0 auto; }
.key-form button[disabled] { opacity: 0.6; cursor: default; }

.meter { height: 3px; background: rgba(239,230,214,.08); overflow: hidden; margin: 8px 0 14px; }
.meter > div { height: 100%; width: 0; background: linear-gradient(90deg, #8a6a3b, #b0894d); transition: width 0.35s ease; }
.pct-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-top: 14px; }
.pct-row strong { color: var(--brass); font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.sep { border: none; border-top: 1px solid var(--line-soft); margin: 28px 0 0; }

/* статистика (витрина — базовые стили, админка переопределяет ниже в .cabinet) */
.stats { display: grid; gap: 1px; background: var(--line); margin: 14px 0 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stats { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.stat { background: var(--void); padding: 1.1rem 1.25rem 1rem; display: flex; flex-direction: column; transition: background .25s ease; }
.stat:hover { background: rgba(176,137,77,.05); }
.stat span { display: block; color: var(--mist); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 6px; }
.stat strong { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat strong.accent { color: var(--brass); font-style: normal; }
.stat strong em { font-style: italic; font-weight: 400; font-size: 0.5em; color: var(--muted); margin-left: 0.45em; letter-spacing: 0.05em; }
.stat strong.accent em { color: rgba(176,137,77,.7); }
.stat-bar { height: 3px; margin: 12px 0 4px; background: rgba(239,230,214,.12); }
.stat-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cognac), var(--brass)); }
.stat-sub { margin: auto 0 0; padding-top: 8px; color: var(--muted); font-size: 11px; letter-spacing: 0.04em; }

/* статистика админки: плитки с рамкой */
.cabinet .stats { display: grid; gap: 10px; margin: 18px 0 10px; grid-template-columns: repeat(2, 1fr); background: none; }
@media (min-width: 720px) { .cabinet .stats { grid-template-columns: repeat(4, 1fr); } }
.cabinet .stat {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(176,137,77,.06), rgba(176,137,77,0) 60%), var(--panel-solid);
  border: 1px solid var(--line-soft);
  padding: 1.1rem 1.25rem 1.05rem;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .5s ease;
}
.cabinet .stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,137,77,.55), transparent);
  opacity: .5; transition: opacity .25s ease;
}
.cabinet .stat:hover { border-color: rgba(176,137,77,.4); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.cabinet .stat:hover::before { opacity: 1; }
.cabinet .stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.stat-label { color: var(--mist); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.cabinet .stat-ico { color: var(--brass); opacity: .75; animation: ico-glow 3.2s ease-in-out infinite; }
@keyframes ico-glow {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
.cabinet .stat:hover .stat-ico { opacity: 1; }
.cabinet .stat strong { font-size: 2rem; }
.cabinet .stat-hero strong { font-size: 2.7rem; animation: hero-in .7s cubic-bezier(.22,.9,.3,1) both .15s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.stat-bar { position: relative; }
.cabinet .stat-bar { height: 8px; margin: 14px 0 6px; background: rgba(239,230,214,.08); overflow: hidden; }
.cabinet .stat-bar i { position: relative; display: block; height: 100%; transition: width .5s ease; }
.cabinet .stat-bar i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(239,230,214,.55) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: bar-shine 3.4s ease-in-out infinite;
}
@keyframes bar-shine {
  0%, 100% { background-position: 130% 0; }
  55% { background-position: -30% 0; }
}
.cabinet .stat-bar-warn i { background: linear-gradient(90deg, #8a5a2b, var(--orange)); }
.cabinet .stat-bar-hot i { background: linear-gradient(90deg, #8a3b32, var(--danger)); }
.cabinet .stat-bar-mini { height: 4px; margin-top: auto; }
.cabinet .stat-scale { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; letter-spacing: 0.04em; }
.cabinet .stat-sub { margin: auto 0 0; padding-top: 10px; }

/* наценки: блок базового коэффициента */
.markup-default {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(176,137,77,.07), rgba(176,137,77,0) 70%), rgba(0,0,0,.3);
  border: 1px solid rgba(176,137,77,.35);
}
.markup-default-info { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.markup-default-info strong { font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; }

/* история запросов: сводка-чипы */
.hist-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.hist-summary:empty { display: none; }
.hist-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(176,137,77,.06), rgba(176,137,77,0) 70%), rgba(0,0,0,.3);
}
.hist-chip span { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.hist-chip strong { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.1; color: var(--ivory); font-variant-numeric: tabular-nums; }
#history-body tr[data-req] { cursor: pointer; }
#history-body tr[data-req]:hover { background: rgba(176,137,77,.06); }
.kv { margin-top: 6px; }
.kv > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.kv > div:last-child { border-bottom: none; }
.kv span:first-child { color: var(--muted); flex: 0 0 auto; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.kv code, .kv span:last-child { text-align: right; word-break: break-all; }
.kv code { color: var(--text); background: none; font-size: 12.5px; }

.inline-ico { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; color: var(--brass); opacity: .8; }
#key-result .stats span { display: flex; align-items: center; gap: 7px; }
#key-result .stats span .nicon { width: 12px; height: 12px; color: var(--brass); opacity: .8; }
#models .nicon, h2#models { display: inline-flex; align-items: center; gap: 9px; }
#models .nicon { width: 17px; height: 17px; color: var(--brass); opacity: .85; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.wide { display: block; overflow-x: auto; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
/* Перенос длинных значений вместо горизонтального скролла всей таблицы. */
td, th { white-space: normal; word-break: break-word; }
td code, th code { word-break: break-all; }
td .actions, td.actions { white-space: nowrap; }
th { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions button { padding: 6px 10px; font-size: 10px; }
.models { columns: 2; list-style: none; padding: 0; color: var(--muted); font-size: 13.5px; font-family: var(--font-mono); }
.models li { break-inside: avoid; padding: 3px 0; display: flex; align-items: center; gap: 8px; }

/* Иконки провайдеров перед моделями (спрайт _brand_icons.html, золото Maison). */
.micon { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; color: #b0894d; }
.chip .micon { width: 13px; height: 13px; }

/* кабинет */
.cabinet { display: block; }
/* minmax(0,1fr) вместо 1fr: без этого nowrap-таблицы раздували колонку
   и весь дашборд уезжал вправо за край экрана. */
@media (min-width: 900px) { .cabinet { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0; } }
.cabinet-side { border-bottom: 1px solid var(--line); padding: 0 0 1.5rem; }
@media (min-width: 900px) {
  .cabinet-side {
    border-bottom: 0; border-right: 1px solid var(--line); padding: 0 2rem 0 0;
    position: sticky; top: 24px; align-self: start;
    max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain;
  }
}
/* якоря не упираются в край при переходе из меню */
.cabinet-main section[id], .cabinet-main .stats[id] { scroll-margin-top: 16px; }

/* мобильный вид: плоская лента чипов вместо групп */
@media (max-width: 899px) {
  .cabinet-side nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .nav-groups, .nav-group-body, .nav-group-inner { display: contents; }
  .nav-group { flex: 0 0 auto; }
  .nav-group-head, .sidenav-toggle { display: none; }
  .cabinet-side nav a .nicon { width: 12px; height: 12px; stroke-width: 1.9; }
  .cabinet-side nav a {
    padding: 6px 12px; border: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft);
    border-radius: 999px; font-size: 10px;
  }
  .cabinet-side nav a.active { border-color: var(--brass); }
}
@media (min-width: 900px) {
  /* Схлопывание всего меню: единственный ребёнок .nav-groups — иначе
     grid-template-rows: 0fr сжимает только первую строку grid. */
  .cabinet-side nav { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease, opacity .25s ease; opacity: 1; }
  .cabinet-side nav > * { min-height: 0; overflow: hidden; }
  .cabinet-side.collapsed nav { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
}
/* stroke-иконки сайдбара (спрайт _nav_icons.html) */
.nicon {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .9; transition: opacity .2s ease, transform .3s ease;
}
/* ссылки: единая левая направляющая внутри группы, активный пункт — латунная риска */
.cabinet-side nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 0.42rem 0 0.42rem 14px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mist); white-space: nowrap;
  border-left: 1px solid transparent; transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.cabinet-side nav a:hover { color: var(--ivory); }
.cabinet-side nav a:hover .nicon { opacity: 1; transform: scale(1.08); }
.cabinet-side nav a.active {
  color: var(--brass); border-left-color: var(--brass);
  background: linear-gradient(90deg, rgba(176,137,77,.12), transparent 85%);
}
.cabinet-side nav a.active .nicon { opacity: 1; }
/* счётчик-бейдж справа в пункте */
.nav-count {
  margin-left: auto; font-family: var(--font-mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0; color: var(--muted); border: 1px solid var(--line-soft);
  padding: 2px 7px; line-height: 1.5; border-radius: 999px; background: rgba(239,230,214,.03);
}
a.active .nav-count { color: var(--brass); border-color: rgba(176,137,77,.5); }
.cabinet-side nav a[data-exit] { color: var(--muted); }
.cabinet-side nav a[data-exit]:hover { color: var(--brass); }

/* группы меню */
.nav-group { margin-bottom: 16px; }
.nav-group:last-child { margin-bottom: 0; }
.nav-group-head {
  display: flex; align-items: center; justify-content: flex-start; width: 100%;
  background: none; border: none; cursor: pointer; padding: 0.2rem 0 0.5rem;
  font-family: var(--font-sans); font-weight: 400; font-size: 10px;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted);
  text-align: left; transition: color .2s ease;
}
.nav-group-head .nicon { width: 13px; height: 13px; color: var(--brass); opacity: .75; margin-right: 2px; }
.nav-group-head:hover .nicon { opacity: 1; }
.nav-group-head .nav-caret { margin-left: auto; }
.nav-group-head:hover { color: var(--brass); }
.nav-caret {
  font-style: normal; font-size: 9px; color: var(--brass);
  transition: transform .3s ease, color .3s ease; flex: 0 0 auto;
}
.nav-group-head[aria-expanded="false"] .nav-caret { transform: rotate(-90deg); }
/* Плавное сворачивание группы: обёртка .nav-group-inner — единственный ребёнок grid,
   0fr/1fr + overflow hidden, display не трогаем — иначе анимации нет. */
.nav-group-body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .3s ease, opacity .3s ease;
  opacity: 1;
}
.nav-group-body > .nav-group-inner {
  min-height: 0; overflow: hidden;
  border-left: 1px solid var(--line-soft); margin-left: 3px; padding-left: 0;
}
.nav-group-body[hidden] { display: none; }
.nav-group.collapsed .nav-group-body { grid-template-rows: 0fr; opacity: 0; }

/* кнопка свернуть меню */
.sidenav-toggle {
  background: none; border: 1px solid var(--line-soft); color: var(--muted);
  font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; margin: 14px 0 12px;
  transition: color .2s ease, border-color .2s ease;
}
.sidenav-toggle:hover { color: var(--brass); border-color: rgba(176,137,77,.4); }
.cabinet-main { padding: 0; min-width: 0; max-width: 100%; }
@media (min-width: 900px) { .cabinet-main { padding: 0 0 0 3rem; } }
.dash-head { margin: 8px 0 4px; }
.dash-head h1 { margin: 0.5rem 0 2px; font-size: 3rem; font-style: italic; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.card-head h2 { margin: 0; font-size: 1.9rem; }
.form-grid { display: grid; gap: 12px; margin: 14px 0 4px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.form-grid label { display: grid; gap: 5px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.form-grid .form-field { display: grid; gap: 5px; align-content: end; }
.form-grid .form-actions { display: flex; align-items: end; }
.form-grid .flabel { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.models-cell { font-size: 11.5px; word-break: break-all; white-space: normal; max-width: 220px; display: inline-block; }
.model-picker { position: relative; display: grid; gap: 6px; }
.picker-card { position: relative; z-index: 5; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 5px 8px; background: transparent; border: 1px solid rgba(239,230,214,.15); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(176,137,77,.15); border: 1px solid rgba(176,137,77,.5); color: var(--ivory); font-size: 12px; padding: 2px 4px 2px 9px; border-radius: 999px; }
.chip button { background: none; border: none; color: inherit; cursor: pointer; padding: 0 4px; font-size: 13px; line-height: 1; letter-spacing: 0; }
.chip button:hover { filter: brightness(1.4); background: none; color: var(--ivory); }
.chip-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 6px; text-decoration: underline; letter-spacing: 0; text-transform: none; }
.chip-clear:hover { color: var(--danger); background: none; }
.model-drop { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--panel-solid); border: 1px solid var(--line); max-height: 240px; overflow-y: auto; padding: 4px; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.model-drop[hidden] { display: none; }
.model-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 13px; padding: 6px 9px; cursor: pointer; letter-spacing: 0; text-transform: none; }
.model-item:hover { background: rgba(176,137,77,.15); color: var(--text); }
.model-empty { display: block; padding: 6px 9px; font-size: 13px; }
.new-keys { margin-top: 14px; background: rgba(169,189,133,.06); border: 1px solid rgba(169,189,133,.4); padding: 14px; }
.new-keys[hidden] { display: none; }
.new-keys-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.new-keys-head strong { font-size: 13px; font-family: var(--font-sans); font-weight: 400; }
.new-key-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.new-key-row code { word-break: break-all; font-size: 12px; }
.new-key-row button { background: transparent; border: 1px solid var(--line); color: var(--text); font-size: 10px; padding: 4px 12px; white-space: nowrap; letter-spacing: 0.18em; }
.hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.new-key { background: rgba(169,189,133,.08); border: 1px solid rgba(169,189,133,.4); padding: 12px; word-break: break-all; }

/* инструкции */
.setup-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 720px) { .setup-grid { grid-template-columns: 220px 1fr; } }

/* docs-flow: 3 шага подключения */
.docs-flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.docs-flow-step {
  flex: 1 1 200px; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(176,137,77,.06), rgba(176,137,77,0) 70%), rgba(0,0,0,.3);
  transition: border-color .3s ease, transform .3s ease;
  animation: card-in .7s cubic-bezier(.22,.9,.3,1) both;
}
.docs-flow-step:nth-child(3) { animation-delay: .12s; }
.docs-flow-step:nth-child(5) { animation-delay: .24s; }
.docs-flow-step:hover { border-color: rgba(176,137,77,.45); transform: translateY(-3px); }
.docs-flow-num {
  flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(176,137,77,.5); border-radius: 50%;
  color: var(--brass); font-family: var(--font-display); font-size: 14px;
  line-height: 1; padding-bottom: 2px; /* оптическая центровка цифры в серифе */
  margin-top: 1px; /* по первой строке текста, не по блоку */
}
.docs-flow-step strong { display: block; font-weight: 400; font-size: 13.5px; letter-spacing: .04em; line-height: 1.35; }
.docs-flow-step p { margin: 3px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.docs-flow-arrow { align-self: center; color: var(--brass); font-size: 18px; opacity: .6; animation: arrow-pulse 2.4s ease-in-out infinite; }
@keyframes arrow-pulse { 0%,100% { opacity: .35; transform: translateX(0); } 50% { opacity: .9; transform: translateX(3px); } }

/* env-grid: карточки сред */
.env-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 14px 0 8px; }
.env-card {
  padding: 13px 15px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.3);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  animation: card-in .7s cubic-bezier(.22,.9,.3,1) both;
}
.env-card:nth-child(2) { animation-delay: .08s; }
.env-card:nth-child(3) { animation-delay: .16s; }
.env-card:nth-child(4) { animation-delay: .24s; }
.env-card:hover { border-color: rgba(176,137,77,.45); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.4); }
.env-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.env-ico { color: var(--brass); font-size: 15px; }
.env-ico-svg.nicon { width: 18px; height: 18px; color: var(--brass); opacity: .9; }
/* SVG-иконка пингвина (Tux) в золотом стиле вместо эмодзи */
.env-ico-svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; color: var(--brass); }
.env-card strong { font-weight: 400; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.env-card p { margin: 0 0 7px; font-size: 12px; color: var(--muted); line-height: 1.55; }
.env-path { font-size: 10.5px; color: var(--brass); opacity: .8; word-break: break-all; }

/* клиенты: активная карточка с золотым шевроном */
.clients .client-item { transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.clients .client-item:hover { transform: translateX(3px); }
.clients { background: transparent; border: 1px solid var(--line-soft); padding: 10px; align-self: start; }
.client-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: none; padding: 8px 10px; margin: 2px 0; font-weight: 300; }
.client-item:hover { background: rgba(239,230,214,.03); color: var(--ivory); }
.client-item.active { background: rgba(176,137,77,.14); border-color: rgba(176,137,77,.5); color: var(--text); }
.client-item .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; flex: 0 0 auto; }
.client-item.active .dot { background: var(--brass); opacity: 1; box-shadow: 0 0 8px var(--brass); }
.client-item .kind { margin-left: auto; font-size: 9.5px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.client-item .cname { font-size: 13px; }
.detail { background: transparent; border: 1px solid var(--line-soft); padding: 16px; min-width: 0; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.detail-head h3 { font-size: 1.7rem; margin: 0 0 4px; }
.tabs { display: inline-flex; gap: 4px; background: rgba(239,230,214,.03); border: 1px solid var(--line-soft); padding: 3px; }
.tab { background: transparent; border: none; color: var(--muted); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; padding: 5px 12px; }
.tab:hover { color: var(--text); background: transparent; }
.tab.active { background: rgba(176,137,77,.25); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(176,137,77,.5); }
.tabs.small { margin-bottom: 12px; }
.steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; margin: 0 0 14px; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { font-size: 12.5px; color: var(--muted); counter-increment: step; }
.steps strong { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 12.5px; font-family: var(--font-sans); font-weight: 400; margin-bottom: 2px; }
.steps strong::before { content: counter(step); display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; background: rgba(176,137,77,.2); color: var(--brass); font-size: 10px; font-weight: 700; line-height: 1; padding-bottom: 1px; }
.codeblock { margin: 10px 0; border: 1px solid var(--line-soft); transition: border-color .3s ease; }
.codeblock:hover { border-color: rgba(176,137,77,.4); }
.codeblock[hidden] { display: none; }
/* плавное появление панелей при переключении клиента/ОС/режима */
.codeblock:not([hidden]) { animation: card-in .4s cubic-bezier(.22,.9,.3,1) both; }
.client-pane:not([hidden]) { animation: card-in .35s ease both; }
.codehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0.6rem 1rem; border-bottom: 1px solid var(--line-soft); }
.codehead span { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.codehead button { background: none; border: none; color: var(--text); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 4px 0; }
.codehead button:hover { color: var(--brass); background: none; }
pre { background: rgba(0,0,0,.4); border: none; padding: 1.1rem 1rem; overflow-x: auto; font-size: 12px; line-height: 1.85; margin: 0; }
pre code { word-break: break-all; white-space: pre-wrap; color: rgba(239,230,214,.82); }
.gui td:first-child { color: var(--muted); }
.params { display: grid; gap: 1px; background: rgba(239,230,214,.1); grid-template-columns: 1fr; margin: 16px 0 8px; }
@media (min-width: 720px) { .params { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.params > div { background: var(--void); padding: 12px 14px; }
.params span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 4px; }
.params span .nicon { width: 12px; height: 12px; color: var(--brass); opacity: .8; }
.params code { word-break: break-all; font-size: 12.5px; }
.docs ul { color: var(--muted); max-width: 72ch; }
.narrow { max-width: 480px; margin: 0 auto; }
.login-card { margin-top: 4rem; }

/* прайс / модели (витрина) */
.price-panel { padding: 0; }
.price-row { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; border-bottom: 1px solid rgba(239,230,214,.1); padding: 1.25rem; gap: 0.5rem; }
.price-row:last-child { border-bottom: 0; }
.model-cards { margin-top: 3.5rem; display: grid; gap: 1px; background: rgba(239,230,214,.1); }
@media (min-width: 900px) { .model-cards { grid-template-columns: repeat(3, 1fr); } }
.model-cards article { position: relative; min-height: 280px; background: var(--void); padding: 2rem; overflow: hidden; }
.model-cards .ghost-num { pointer-events: none; position: absolute; right: 1.5rem; top: 4rem; font-family: var(--font-display); font-size: 4.5rem; color: rgba(239,230,214,.05); }
.cta-band { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 2rem; }
@media (min-width: 900px) { .cta-band { flex-direction: row; align-items: flex-end; padding: 3rem 2rem; } }
.cta-band h2 { font-style: italic; font-size: clamp(2rem, 4vw, 3rem); margin: 1rem 0 0; }

footer.site-footer { position: relative; z-index: 1; border-top: 1px solid rgba(239,230,214,.1); padding: 3rem 1.5rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--mist); }
footer.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
footer.site-footer nav { display: flex; flex-wrap: wrap; gap: 2rem; }
footer.site-footer a { color: var(--mist); }
footer.site-footer a:hover { color: var(--ivory); }

/* ---------- анимации админки ---------- */
/* появление секций карточек при прокрутке (только админка — витрина без JS reveal) */
.cabinet .card, .cabinet .stat, .cabinet .markup-default, .cabinet .hist-chip {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.cabinet .revealed.card, .cabinet .revealed.stat, .cabinet .revealed.markup-default, .cabinet .revealed.hist-chip {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .cabinet .card, .cabinet .stat, .cabinet .markup-default, .cabinet .hist-chip { opacity: 1; transform: none; transition: none; }
}

/* модалки: вход */
.modal { animation: modal-in .22s ease both; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay { animation: fade-in .2s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* строки таблиц при добавлении */
#history-body tr[data-req], #markups-body tr { animation: row-in .35s ease both; }
@keyframes row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* сайдбар: плавное подчёркивание активного пункта */
.cabinet-side nav a.active { animation: nav-pulse .4s ease both; }
@keyframes nav-pulse {
  0% { background: rgba(176,137,77,.28); }
  100% { background: rgba(176,137,77,.1); }
}

/* кнопки: блик при наведении */
button { position: relative; overflow: hidden; }
button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(239,230,214,.14) 50%, transparent 60%);
  background-size: 220% 100%;
  background-position: 130% 0;
  transition: background-position .6s ease;
  pointer-events: none;
}
button:hover::after { background-position: -30% 0; }
button:active { transform: scale(.98); transition: transform .08s ease; }

/* каретка групп меню */
.nav-group.collapsed .nav-caret { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- анимации витрины ---------- */
/* Hero-заголовок: построчное появление */
.hero-title { overflow: hidden; }
.hero-title em, .hero-title {
  animation: hero-line 1s cubic-bezier(.19,1,.22,1) both;
}
.hero-title em { animation-delay: .35s; display: inline-block; }
@keyframes hero-line {
  from { opacity: 0; transform: translateY(60%) rotate(2deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
.kicker { animation: fade-slide .8s ease both; }
@keyframes fade-slide {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
.hero-side { animation: fade-slide .9s ease .25s both; }
.hero-facts { animation: fade-slide .9s ease .5s both; }
.hero-side .card { animation: card-in .8s cubic-bezier(.22,.9,.3,1) .4s both; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* reveal при прокрутке (JS в portal.js добавляет .revealed) */
.section .rituals article, .section .quote, .section > div > .kicker,
.section h2, .model-cards article, .price-row, #docs, .cta-band {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);
}
.revealed.section .rituals article, .revealed .quote, .revealed .kicker,
.revealed h2, .revealed.model-cards article, .revealed.price-row, .revealed#docs, .revealed.cta-band,
.revealed .rituals article, .revealed .model-cards article, .revealed .price-row,
.revealed .quote, .revealed .kicker, .revealed h2, .revealed #docs, .revealed .cta-band {
  opacity: 1; transform: translateY(0);
}

/* ritуалы: золотая линия растёт сверху + номер */
.rituals article { position: relative; transition: background .3s ease, opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1); }
.rituals article::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--cognac), var(--brass));
  transition: width .6s ease .2s;
}
.rituals article:hover { background: rgba(176,137,77,.05); }
.rituals article:hover::before { width: 100%; }
.rituals article .look-num { transition: letter-spacing .4s ease, color .3s ease; }
.rituals article:hover .look-num { color: var(--ivory); }

/* model-cards: ghost-номер всплывает при hover */
.model-cards article { transition: opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1), background .3s ease; }
.model-cards article:hover { background: rgba(176,137,77,.04); }
.model-cards article:hover .ghost-num { color: rgba(176,137,77,.14); transform: translateY(-6px); }
.model-cards .ghost-num { transition: color .4s ease, transform .4s ease; }

/* quote: золотая вертикальная черта */
.quote { position: relative; padding-left: 1.5rem; }
.quote::before {
  content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 2px;
  background: linear-gradient(180deg, var(--brass), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .8s cubic-bezier(.22,.9,.3,1) .2s;
}
.revealed .quote::before, .quote.revealed::before { transform: scaleY(1); }

/* кнопки витрины — общий button::after уже даёт блик */

/*-meter: плавное заполнение уже через transition width */

/* иконки моделей в списках: точка-свечение при hover */
.models li { transition: color .25s ease, padding-left .25s ease; }
.models li:hover { color: var(--ivory); padding-left: 6px; }

/* hero-facts: числа поднимаются */
.hero-facts dd { transition: color .3s ease, text-shadow .3s ease; }
.hero-facts > div { transition: transform .3s ease; }
.hero-facts > div:hover { transform: translateY(-3px); }
.hero-facts > div:hover dd { color: var(--brass); text-shadow: 0 0 18px rgba(176,137,77,.4); }

/* key-result: появление после проверки ключа */
#key-result { animation: card-in .7s cubic-bezier(.22,.9,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-title em, .kicker, .hero-side, .hero-facts, .hero-side .card, #key-result { animation: none; opacity: 1; transform: none; }
  .section .rituals article, .section .quote, .section > div > .kicker,
  .section h2, .model-cards article, .price-row, #docs, .cta-band { opacity: 1; transform: none; transition: none; }
}

/* логи переписки */
.chatlog-list { display: grid; gap: 8px; margin-top: 8px; }
.chatlog { border: 1px solid var(--line-soft); background: rgba(0,0,0,.25); transition: border-color .25s ease, background .25s ease; }
.chatlog:hover { border-color: rgba(176,137,77,.3); }
.chatlog[open] { border-color: rgba(176,137,77,.45); background: rgba(0,0,0,.4); }
.chatlog.has-error { border-left: 2px solid var(--danger); }
.chatlog summary { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13px; min-width: 0; transition: background .2s ease; }
.chatlog summary::-webkit-details-marker { display: none; }
.chatlog summary:hover { background: rgba(176,137,77,.06); }
/* каретка раскрытия */
.chatlog summary::after {
  content: "▾"; color: var(--brass); font-size: 11px; flex: 0 0 auto;
  transition: transform .25s ease; margin-left: auto;
}
.chatlog[open] summary::after { transform: rotate(180deg); }
.chatlog-time { font-family: var(--font-mono); font-size: 12px; color: var(--brass); white-space: nowrap; }
.chatlog-key { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ivory); }
.chatlog-model { font-size: 11.5px; color: var(--muted); word-break: break-all; }
/* бейдж статуса в шапке и метаданных */
.chatlog-badge {
  display: inline-block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid; white-space: nowrap; font-family: var(--font-mono);
}
.chatlog-badge.is-ok { color: var(--green); border-color: rgba(169,189,133,.45); background: rgba(169,189,133,.08); }
.chatlog-badge.is-bad { color: var(--danger); border-color: rgba(224,101,90,.45); background: rgba(224,101,90,.08); }
/* мини-чипы в шапке лога */
.chatlog-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.chatlog-chip {
  font-size: 10px; letter-spacing: .06em; color: var(--mist);
  border: 1px solid var(--line-soft); padding: 1px 7px; white-space: nowrap;
  background: rgba(239,230,214,.03);
}
.chatlog-prev { flex: 1 1 100%; min-width: 0; color: var(--muted); font-size: 12.5px; white-space: normal; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chatlog-body { padding: 0 12px 12px; display: grid; gap: 10px; animation: chatlog-open .3s ease both; }
@keyframes chatlog-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chatlog-meta { font-size: 11.5px; font-family: var(--font-mono); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* расход токенов: мини-бар вход/выход */
.chatlog-spend { display: grid; gap: 4px; padding: 10px 12px; background: rgba(176,137,77,.05); border: 1px solid var(--line-soft); }
.chatlog-spend-nums { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--muted); }
.chatlog-spend-nums strong { color: var(--ivory); font-family: var(--font-mono); font-weight: 400; margin-left: 3px; }
.chatlog-spend-bar { height: 5px; background: rgba(239,230,214,.08); overflow: hidden; }
.chatlog-spend-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cognac), var(--brass)); transition: width .6s cubic-bezier(.22,.9,.3,1); }
.chatlog-spend-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
/* дата-разделитель */
.chatlog-day {
  display: flex; align-items: center; gap: 12px; margin: 10px 0 2px;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--brass);
}
.chatlog-day::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(176,137,77,.4), transparent); }
.chatlog-files { font-size: 12.5px; color: var(--muted); }
.chatlog-files code { font-size: 11.5px; margin-right: 6px; }
.chatlog-cols { display: grid; gap: 10px; }
@media (min-width: 860px) { .chatlog-cols { grid-template-columns: 1fr 1fr; } }
.chatlog-text { white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; font-size: 12.5px; }
/* переписка кусочками: №1, №2, №3... */
.chatlog-thread { display: grid; gap: 8px; }
.msg { border: 1px solid var(--line-soft); border-left: 2px solid var(--brass); background: rgba(0,0,0,.25); padding: 8px 10px; animation: row-in .35s ease both; }
.msg-assistant { border-left-color: var(--green); }
.msg-system { border-left-color: var(--muted); opacity: .9; }
.msg-tool { border-left-color: var(--orange); }
.msg-reasoning { border-left-color: var(--muted); opacity: .88; }
.msg-answer { border-color: rgba(169,189,133,.4); background: rgba(169,189,133,.05); }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.msg-num { font-family: var(--font-mono); font-size: 11px; color: var(--brass); border: 1px solid rgba(176,137,77,.5); padding: 0 6px; white-space: nowrap; }
.msg-answer .msg-num { color: var(--green); border-color: rgba(169,189,133,.5); }
.msg-role { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.msg .chatlog-text { max-height: 240px; margin: 0; background: none; border: none; padding: 0; }

/* модальные окна */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.65); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-overlay[hidden] { display: none; }
.modal {
  width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto;
  background: var(--panel-solid); border: 1px solid rgba(176,137,77,.45);
  padding: 1.5rem; box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-head h3 { margin: 0; font-size: 1.5rem; }
.modal-x { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; letter-spacing: 0; }
.modal-x:hover { color: var(--danger); background: none; }
.modal-field { display: grid; gap: 5px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.modal-field input, .modal-field textarea { font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

@media (max-width: 720px) {
  main { padding: 0 1rem 3rem; }
  .card, .panel { padding: 1.25rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cabinet .stat-hero { grid-column: 1 / -1; }
  .models { columns: 1; }
  .topbar { padding: 1.25rem 1rem; }
  .topbar nav { gap: 1.25rem; }
  .site-frame { inset: 10px; }
}