/* ============================================================
   PROMO-СТРАНИЦА «ЖИВЫЕ ИКОНКИ» (promo.css)
   Подключается ПОСЛЕ base.css и theme-*.css, поэтому
   переопределяет их там, где селекторы совпадают.

   НЕ ДУБЛИРУЮТСЯ ЗДЕСЬ (живут в base.css):
   .wrap, .grad, .over, .lead, .sec, .sec-alt, .final, .cta-row,
   .consent, .contacts, .ftr, .cookie, .refbar, .rev, .hide,
   @keyframes shake, медиа 960/620px, сброс *,::before,::after.
   ============================================================ */

/* ------------------------------------------------------------
   1. ПЕРЕМЕННЫЕ СТРАНИЦЫ
   Расширенный набор — фолбэк на случай, если data-theme не
   выставлена; при data-theme="ember" значения приходят из
   theme-ember.css (у него выше специфичность).
   ------------------------------------------------------------ */

/* основной голубой; акцент янтарный; */
/*
:root {
	--accent:     #09d;                  
	--accent2:    #fbbf24;               
	--accent-rgb: 251, 191, 36;  
	--bg:         #0a0e1a;
	--panel:      rgba(30, 41, 59, .5);
	--field:      #1e293b;
	--code-bg:    #0f172a;
	--text:       #e2e8f0;
	--muted:      #94a3b8;
	--dim:        #64748b;
	--ok:         #10b981;
	--err:        #ef4444;
	// фолбэк темы «янтарь» (зеркало theme-ember.css) 
	--line: rgba(255, 255, 255, .09);
	--acc:  #FFB020;
	--acc2: #FF6A00;
	--acc3: #FFD54A;
	--glow: rgba(255, 140, 30, .30);
	--fav:  #FFB020;
	--favbg:#131521;
}
*/


/* кофейная тема */
:root {
	--accent:     #ff9600;
	--accent2:    #fbbf24;              
	--accent3:    #d2900e;              
	--accent-rgb: 251, 191, 36;         
	--bg:         #0f0c09;
	--bg2:        #1a0e0a;
	--panel:      rgba(54, 39, 18, .5);
	--panel:      rgba(212, 164, 92, .03);
	--panel-2:    #1e1201;
	--border:     rgb(212 164 92 / 16%);
	--field:      #1e293b;
	--code-bg:    #0f172a;
	--text:       #e2e8f0;
	--muted:      #94a3b8;
	--dim:        #64748b;
	--ok:         #10b981;
	--err:        #ef4444;
	/* фолбэк темы «янтарь» (зеркало theme-ember.css) */
	--line: rgba(255, 255, 255, .09);
	--acc:  #FFB020;
	--acc2: #FF6A00;
	--acc3: #FFD54A;
	--glow: rgba(255, 140, 30, .30);
	--fav:  #FFB020;
	--favbg:#131521;
	--color-border-2: #36270d; 
	
	--color-1: #36270d; 
	--color-2: #7b7770; 
	--color-3: #302106; 
	--color-4: #F93; 
	
}

/* ------------------------------------------------------------
   2. БАЗА СТРАНИЦЫ (переопределяем base.css под промо-вид)
   ------------------------------------------------------------ */
body { background:var(--bg); color:#DDD; padding:30px 40px; font-family:-apple-system,sans-serif; }
h2 { color:var(--accent); margin-bottom:20px; font-size:24px; }
h3 { color:var(--accent); margin-bottom:12px; font-size:15px; }

/* ------------------------------------------------------------
   3. КАРКАС: колонки, секции, панель управления
   ------------------------------------------------------------ */
.layout { display:grid; grid-template-columns: 1fr 420px; gap:24px; align-items:start; }
.left-col { display:flex; flex-direction:column; gap:0; }
.right-col { position:sticky; top:20px; }
.section { margin-bottom:20px; padding:20px; background:rgba(var(--panel-2)); border-radius:8px; border:1px solid var(--color-border-2); }
.controls {
	display:flex; flex-wrap:wrap; gap:10px;
	align-items:center; justify-content:center;   /* центрирует кнопки по горизонтали */
	width:100%; margin-bottom:12px;
}

/* ------------------------------------------------------------
   4. КНОПКИ
   ------------------------------------------------------------ */
button { padding:7px 14px; background:var(--bg); border:1px solid var(--acc); color:var(--accent3); border-radius:4px; cursor:pointer; font-size:13px; transition:all 0.2s; }
button:hover { background:var(--color-4); color:#0f172a; }
button.stop { border-color:#993333; color:#993333; }
button.stop:hover { background:#993333; color:var(--color-3); }
button.success { border-color:#10b981; color:#10b981; }
button.success:hover { background:#10b981; color:#00ccff; }
button.toggle { min-width:36px; font-weight:bold; }
button.toggle.active { background:var(--acc); color:var(--bg); }

/* ------------------------------------------------------------
   5. ПОЛЯ ВВОДА
   ------------------------------------------------------------ */
input[type="text"], input[type="number"], input[type="url"] { padding:7px 10px; background:var(--bg); color:var(--acc); border:1px solid rgba(251,191,36,0.4); border-radius:4px; font-size:13px; width:70px; }
input[type="text"], input[type="url"] { width:360px; }
input[type="color"] { width:44px; height:34px; border:1px solid rgba(251,191,36,0.4); border-radius:4px; background:#1e293b; cursor:pointer; padding:2px; }
select { padding:7px 10px; background:#1e293b; color:#00ccff; border:1px solid rgba(251,191,36,0.4); border-radius:4px; font-size:13px; }
textarea { padding:10px; background:var(--bg); color:#999; border:1px solid rgba(251,191,36,0.3); border-radius:4px; font-family:'Monaco','Menlo','Courier New',monospace; font-size:11px; resize:vertical; width:100%; box-sizing:border-box; line-height:1.4; }
label { color:#cbd5e1; font-size:14px; display:flex; align-items:center; gap:8px; }
.field label { font-size:14px; color:#cbd5e1; text-transform:none; letter-spacing:normal; font-weight:500; }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; align-items:end; }
.field { display:flex; flex-direction:column; gap:6px; }

/* ------------------------------------------------------------
   6. ПРЕВЬЮ ИКОНОК
   (float убран — он «плыл» на узких экранах, см. также п.14)
   ------------------------------------------------------------ */
.preview-container { display:flex; flex-direction:column; gap:16px; float: left; margin-right: 35px;}
.preview-row { display:flex; gap:40px; align-items:center; justify-content:flex-start; margin-bottom:12px; }
.preview-label { font-size:11px; color:#64748b; min-width:40px; }
.preview-item { /* размеры задаются inline в JS */ box-sizing:border-box; padding:8px; padding-left:50px; border-radius:4px; text-align:center; justify-content:center; display:inline-block; }
.preview-item div:last-child { font-size:9px; color:#64748b; margin-top:4px; }
.preview-item svg { margin:0 auto; }   /* центрируем блочный SVG внутри превью */

/* утилиты выравнивания */
.left { text-align:left; justify-content:left; }
.right { text-align:right; justify-content:right; }
.center { text-align:center; justify-content:center; }
.center-block { display:flex; flex-direction:column; align-items:center; }

/* ------------------------------------------------------------
   7. ПОДСКАЗКИ И СТАТУСЫ
   ------------------------------------------------------------ */
.hint { color:var(--color-2); font-size:12px; font-style:italic; }
.speed-value { color:#00ccff; font-size:13px; min-width:60px; text-align:center; }
.status-badge { display:inline-block; padding:2px 8px; border-radius:3px; font-size:11px; margin-left:8px; vertical-align:middle; }
.status-badge.active { background:rgba(16,185,129,0.2); color:#10b981; border:1px solid #10b981; }
.status-badge.inactive { background:rgba(100,116,139,0.2); color:#999; border:1px solid #666; }
.status-step { color:#94a3b8; font-size:11px; margin:4px 0; padding-left:12px; border-left:2px solid #334155; }
.status-step.active { color:var(--acc); border-left-color:var(--acc); }
.status-step.success { color:#93d046; border-left-color:#93d046; }
.status-step.error { color:#ef4444; border-left-color:#ef4444; }
/* итоговое сообщение об успехе */
.final-status { margin-top:12px; padding:8px; background:rgba(16,185,129,.1); border-radius:4px; border-left:3px solid #10b981; font-size:12px; }
.final-status .ok { color:#10b981; font-weight:bold; }
.final-status .muted { color:#7b7770; }

/* ------------------------------------------------------------
   8. ВКЛАДКИ КОДА И ИНСТРУКЦИЯ
   ------------------------------------------------------------ */
.code-tabs { display:flex; gap:4px; margin-bottom:8px; }
.code-tab { padding:6px 14px; background:rgba(30,41,59,0.6); border:1px solid rgba(251,191,36,0.3); color:#94a3b8; border-radius:4px 4px 0 0; cursor:pointer; font-size:12px; }
.code-tab.active { background:#0f172a; color:#00ccff; border-bottom-color:#0f172a; }
.instruction { background:#0f172a; padding:14px; border-radius:6px; border-left:3px solid #00ccff; margin-top:12px; font-size:13px; line-height:1.6; }
.instruction ol { margin:6px 0 0 0; padding-left:20px; }
.instruction li { margin-bottom:4px; }
.instruction code { background:#1e293b; padding:2px 6px; border-radius:3px; color:#00ccff; font-size:12px; }

/* ------------------------------------------------------------
   9. ТОСТЫ (переопределяют базовый .toast из base.css)
   ------------------------------------------------------------ */
.toast {
	position:fixed; 
	bottom:30px; 
	right:30px;
	padding:12px 24px; 
	border-color:#999;
	border-radius:6px;
	font-size:18px; 
	z-index:1000;
	animation: toastIn 0.4s ease-out;
	transition: opacity 0.4s ease, transform 0.4s ease;
	opacity:1; 
	transform:translateY(0);
	 width:25%;
}
.toast.hiding { opacity:0; transform:translateY(10px);}
.toast.success { background:#393; color:#ffffff; }
.toast.info    { background:#369; color:#ffffff; }
.toast.error   { background:#933; color:#ffffff; }
@keyframes toastIn {
	from { opacity:0; transform:translateY(10px); }
	to   { opacity:1; transform:translateY(0); }
}

/* ------------------------------------------------------------
   10. ПОЛЗУНОК СКОРОСТИ (range)
   ------------------------------------------------------------ */
input[type="range"] {
	-webkit-appearance:none; appearance:none;
	width:140px; height:6px;
	background:#1e293b; border-radius:3px; outline:none;
	border:1px solid rgba(251,191,36,0.3);
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance:none; appearance:none;
	width:0; height:0;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:14px solid #00ccff;
	cursor:pointer;
	filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
input[type="range"]::-moz-range-thumb {
	width:0; height:0;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:14px solid #00ccff;
	cursor:pointer; background:transparent; border-top:none;
}

/* ------------------------------------------------------------
   11. ГРУППА URL И ЗАГРУЗКА ФАЙЛА
   ------------------------------------------------------------ */
.url-input-group { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.url-input-group input { flex:1; }
.file-input-wrapper { position:relative; display:inline-block; }
.file-input-wrapper input[type="file"] { position:absolute; left:0; top:0; opacity:0; width:100%; height:100%; cursor:pointer; }

/* ------------------------------------------------------------
   12. ГАЛЕРЕЯ АНИМАЦИЙ
   ------------------------------------------------------------ */
.anim-cell { background:rgba(42,23,15,.5); border:1px solid rgba(251,191,36,.2); border-radius:6px; padding:10px 6px; text-align:center; min-width: 110px;}
.anim-label { font-size:11px; color:var(--acc); font-family:monospace; margin-bottom:8px; word-break:break-all; }
.anim-empty { color:#64748b; font-size:10px; }
.anim-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(calc(var(--gallery-size,32px) + 70px),1fr)); gap:12px; }
.anim-frame { min-height:calc(var(--gallery-size,32px) + 16px); display:flex; align-items:center; justify-content:center; background:#321; border-radius:4px; overflow:hidden; }
.anim-frame svg { display:block; width:var(--gallery-size,32px); height:var(--gallery-size,32px); }

/* ------------------------------------------------------------
   13. KEYFRAMES АНИМАЦИЙ ГАЛЕРЕИ
   ------------------------------------------------------------ */
@keyframes wiggle   { 0%,100%{transform:rotate(0deg)}   25%{transform:rotate(-15deg)} 75%{transform:rotate(15deg)} }
@keyframes pendulum { 0%,100%{transform:rotate(-20deg)} 50%{transform:rotate(20deg)} }
@keyframes bounce   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-8px)} }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fade     { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes slide    { 0%,100%{transform:translateX(0)}  50%{transform:translateX(6px)} }
@keyframes flip     { 0%{transform:scaleX(1)} 50%{transform:scaleX(0.1)} 100%{transform:scaleX(1)} }
@keyframes draw     { 0%{stroke-dashoffset:100} 100%{stroke-dashoffset:0} }
@keyframes fill     { 0%{transform:scaleY(0)} 100%{transform:scaleY(1)} }
@keyframes morph    { 0%,100%{border-radius:50%} 50%{border-radius:0%} }

/* ------------------------------------------------------------
   14. ВОЛНЫ ВОКРУГ КНОПКИ «БАЗОВЫЕ АНИМАЦИИ»
   (переопределяет @keyframes pulse-ring из base.css)
   ------------------------------------------------------------ */
.pulse-ring { animation:pulse-ring 4s cubic-bezier(0.215,0.61,0.355,1) infinite; margin-right:30px; }
@keyframes pulse-ring {
	0%   { transform:scale(0.98); box-shadow:0 0 0 0 rgba(245,158,11,0.7); }
	70%  { transform:scale(1);    box-shadow:0 0 0 20px rgba(245,158,11,0); }
	100% { transform:scale(0.98); box-shadow:0 0 0 0 rgba(245,158,11,0); }
}
box-shadow: 0 0 0 0 rgb(6 204 251 / 70%);

/* Сердце */
.pulse-round{ position:relative; width:32px; height:32px; display:inline-block; }
.pulse-round svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* волна расходится сердцем и затухает */
.heart-wave{
	transform-origin:50% 50%;
	opacity:0;
	animation:heartWave 2s cubic-bezier(0.215,0.61,0.355,1) infinite;
}
.heart-wave.w2{ animation-delay:1s; }
@keyframes heartWave{
	0%   { transform:scale(1);   opacity:.7; }
	100% { transform:scale(2.1); opacity:0;  }
}

/* ------------------------------------------------------------
   15. БЫСТРЫЕ ДОМЕНЫ-ПРИМЕРЫ
   ------------------------------------------------------------ */
.domain-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.domain-chip {
	background:none; border:none; padding:2px 6px; margin-top:-3px;
	color:#e2e8f0; font-weight:600;
	cursor:pointer; border-radius:3px; transition:.2s;
}
.domain-chip:hover { color:#000000; text-decoration:underline; }
.domain-chip.active { background:var(--color-4); color:var(--bg); }
.domain-link { color:#f93; text-decoration:underline; }
.domain-link:hover { color:#000000; background:#f93; border-radius:4px; border-color:rgb(245 158 11 / 0.5); padding:0 5px; text-decoration:none; }
.domain-img { border-radius:8px; opacity:0.5; }
.domain-img:hover { color:#000000; background:#f93; border-radius:8px; border-color:rgb(245 158 11 / 0.5); text-decoration:none; box-shadow:0 5px 30px rgba(245,158,11,0.4); transform:translateY(-3px); opacity:1; }

/* ------------------------------------------------------------
   16. ШАПКА СТРАНИЦЫ: заголовок, шаги 1-2-3
   ------------------------------------------------------------ */
.page-title { text-align:center; margin-left:0; }
.page-sub { text-align:center; color:var(--color-2); font-size:14px; margin:-8px 0 22px; }
/*.steps-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }*/
.steps-row { grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; margin-top: 110px; }
/*.step-card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:14px 16px 12px; width:31%; }*/
.step-card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:14px 16px 12px; float: right; display: contents;}
.step-card b { float:left; width:26px; height:26px; border:1px solid var(--accent); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); font-size:13px; margin-right:10px; }
.step-card h3 { margin:2px 0 6px 36px; font-size:14px; }
.step-card p { margin:0 0 0 36px; color:var(--color-2); font-size:12px; line-height:1.45; }
@media (max-width:900px) { .steps-row { grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   17. ПРАВАЯ КОЛОНКА: план действий, цены, контакты
   ------------------------------------------------------------ */
.order-steps { color:var(--color-2); font-size:12px; line-height:1.45; margin:0 0 20px 0; padding-left:20px; }
.order-steps li { margin-bottom:6px; }
.order-cta { background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:10px 12px; font-size:13px; color:var(--accent); margin-bottom:12px; line-height:1.5; }
.order-links { display:flex; gap:10px; margin-bottom:12px; }
.order-links a { flex:1; text-align:center; padding:9px 10px; border:1px solid var(--accent); border-radius:4px; color:var(--accent); text-decoration:none; font-size:13px; transition:.2s; }
.order-links a:hover { background:var(--accent); color:#0a0e1a; }

/* ------------------------------------------------------------
   18. АДАПТИВНАЯ ВЕРСТКА
   ------------------------------------------------------------ */
/* инпуты не вылезают за контейнер (переопределяем width:360px из п.5) */
input[type="text"], input[type="url"] { width:min(360px, 100%); }

/* ≤1400px: сужаем правую колонку */
@media (max-width: 1400px) {
	.layout { grid-template-columns: 1fr 380px; gap: 20px; }
}
/* ≤1280px: пары секций слева складываем в столбец */
@media (max-width: 1280px) {
	.left-col > div:has(> .section + .section) {
		display:grid;
		grid-template-columns:1fr;
		gap:20px;
	}
	body { padding:24px; }
}
/* ≤1024px: одна колонка, sticky отключаем */
@media (max-width: 1024px) {
	.layout { grid-template-columns: 1fr; }
	.right-col { position:static; }
	.section { width:100%; }
}
/* ≤900px: каркас в одну колонку (дублирует 1024 для старых сценариев) */
@media (max-width: 900px) {
	.layout { grid-template-columns: 1fr; }
	.right-col { position:static; }
}
/* ≤640px: мобильные */
@media (max-width: 640px) {
	body { padding:14px; }
	h2[style*="margin-left"] { margin-left:0 !important; }
	.steps-row { grid-template-columns:1fr; }
	.order-links { flex-direction:column; }
	.controls button { flex:1 1 auto; }
	.section { width:100%; }
}

/* блоки левой колонки — на всю ширину (обёртки пар) */
.left-col > div:not(.section) {
	display:flex !important;
	flex-wrap:wrap !important;
	gap:20px;
}
.left-col > div:not(.section) > .section {
	flex:1 1 420px;   /* шире экран — по 2 в ряд, уже — во всю ширину */
	min-width:0;
}

/* ------------------------------------------------------------
   19. КРУПНЕЕ ТЕКСТ (ЧИТАЕМОСТЬ)
   Переопределяет размеры выше по файлу — поэтому в конце.
   ------------------------------------------------------------ */
body { font-size:17px; }
.section p, .section li { font-size:15px; line-height:1.55; }
button { font-size:14px; }
label, .field label { font-size:15px; }
input[type="text"], input[type="url"], input[type="number"], select { font-size:14px; }
textarea { font-size:12px; }
.hint { font-size:13px; }
.status-step { font-size:12px; }
.final-status { font-size:13px; }
.order-steps { font-size:14px; }
.order-cta { font-size:15px; }
.order-links a { font-size:14px; }
.step-card h3 { font-size:15px; }
.step-card p { font-size:13px; }
.page-sub { font-size:15px; }
.anim-label { font-size:12px; }
.anim-sub { font-size:10px; }
.domain-chip { font-size:14px; }
.ctl-label { color:var(--color-2); font-size:12px; margin-right:6px; }
.anim-sub { font-size:9px; color:var(--color-2); margin-top:6px; line-height:1.3; }

/* ------------------------------------------------------------
   20. ПАРНЫЕ БЛОКИ ЛЕВОЙ КОЛОНКИ (.section-2)
   Было: width:48% + float:left (не растягивались, плыли).
   Стало: grid — половинки одинаковой высоты, на узких экранах
   складываются в столбец.
   ------------------------------------------------------------ */
.section-2 {
	min-width:0;
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:6px;
	padding:16px;
}
.section:has(> .section-2) {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
	align-items:stretch;   /* половинки одинаковой высоты */
}
@media (max-width: 1280px) {
	.section:has(> .section-2) { grid-template-columns:1fr; }
}
/* ------------------------------------------------------------ */
/* Контейнер: переносит группы как целые блоки */
.preview-head{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:12px 28px;
	width:100%;
}

/* Группа «подпись + её кнопки» = неделимый блок */
.ctl-group{
	display:inline-flex;
	align-items:center;
	gap:8px;
	flex-wrap:nowrap;      /* внутри группы переносов нет */
	white-space:nowrap;
	padding-bottom:5px;
}
/* Добавочный текст в галерее */
.gallery-hint {
  grid-column: 1 / -1;          /* на всю ширину grid-контейнера */
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin-top: 12px;
  padding: 8px;
}
/* ------------------------------------------------------------ */











/* ------------------------------------------------------------ */