/* HelpRetouch · удобство раздела «ИИ-генерация» (26.10): сценарии, загрузка, этапы ожидания,
   «до / после», «Мои работы». Только переменные темы — работает во всех четырёх темах. */
:root{
  --motion-fast:160ms;--motion:280ms;--motion-slow:620ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* ─── Меньше текста: длинные пояснения прячем, суть остаётся в заголовках ─── */
#promptMain .ai-generation-hero>p{display:none}
#promptMain .ai-generate-card .ai-auto-note{display:none}

/* ─── Сценарии одним нажатием ─── */
.scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-2)}
.scenario-card{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:72px;padding:var(--space-3);
  text-align:left;border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--s2);color:var(--ink);cursor:pointer;
  transition:border-color var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out),box-shadow var(--motion) var(--ease-out)}
.scenario-card:hover{border-color:color-mix(in srgb,var(--brass) 55%,var(--line2));transform:translateY(-1px)}
.scenario-card:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.scenario-card.on{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 12%,var(--s2));box-shadow:0 0 0 1px var(--brass) inset}
.scenario-icon{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:color-mix(in srgb,var(--brass) 14%,transparent);color:var(--brass-l)}
.scenario-svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scenario-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.scenario-text b{font-size:var(--text-sm);font-weight:700;line-height:1.25}
.scenario-text small{font-size:var(--text-2xs);color:var(--muted);line-height:1.35}
.scenario-check{position:absolute;top:6px;right:8px;font-size:12px;font-weight:800;color:var(--brass-l);opacity:0;transform:scale(.6);
  transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.scenario-card.on .scenario-check{opacity:1;transform:none}
.scenario-summary{margin-top:var(--space-2);min-height:18px;font-size:var(--text-xs);color:var(--muted);line-height:1.45}
.scenario-summary b{color:var(--brass-l)}
.scenario-summary.is-manual b{color:var(--warn,var(--brass-l))}

/* «Тонкая настройка» — всё подробное в одном свёрнутом блоке. */
.fine-tune{margin-top:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--s2) 55%,transparent)}
.fine-tune>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);padding:var(--space-2) var(--space-3);cursor:pointer;list-style:none;font-weight:700;font-size:var(--text-sm)}
.fine-tune>summary::-webkit-details-marker{display:none}
.fine-tune>summary small{font-weight:400;color:var(--muted);font-size:var(--text-2xs)}
.fine-tune>summary .fine-tune-chev{margin-left:auto;transition:transform var(--motion) var(--ease-out)}
.fine-tune[open]>summary .fine-tune-chev{transform:rotate(180deg)}
.fine-tune-body{padding:0 var(--space-3) var(--space-3)}
.fine-tune-body>.group:first-child{margin-top:0}

/* ─── Загрузка: камера, вставка, перетаскивание на всю страницу ─── */
.upload-alt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--text-2xs);color:var(--muted)}
.upload-alt .btn{min-height:var(--tap)}
.upload-alt .upload-camera{display:none}
@media (hover:none) and (pointer:coarse){.upload-alt .upload-camera{display:inline-flex}}
.upload-alt kbd{font:inherit;font-size:11px;padding:1px 6px;border:1px solid var(--line2);border-radius:5px;background:var(--s2);color:var(--ink)}
.auto-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.auto-tools .btn{min-height:36px;padding:6px 10px;font-size:12.5px}
.gen-drop-overlay{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;pointer-events:none;
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(3px);opacity:0;transition:opacity var(--motion-fast) var(--ease-out)}
.gen-drop-overlay.on{opacity:1}
.gen-drop-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 46px;border:2px dashed var(--brass);border-radius:var(--radius-lg);
  background:var(--s1);color:var(--ink);box-shadow:0 18px 60px var(--theme-shadow,rgba(0,0,0,.5));transform:scale(.97);transition:transform var(--motion) var(--ease-out)}
.gen-drop-overlay.on .gen-drop-box{transform:none}
.gen-drop-icon{font-size:34px;line-height:1;color:var(--brass-l)}
.gen-drop-box b{font-size:var(--text-md)}
.gen-drop-box small{color:var(--muted)}
.auto-thumb.is-fresh{animation:genFadeIn var(--motion) var(--ease-out)}

/* ─── Окно кадрирования ─── */
.gen-crop-back{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;padding:16px;background:rgba(5,7,10,.72)}
.gen-crop{width:min(920px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);
  border:1px solid var(--line2);border-radius:var(--radius-lg);background:var(--s1);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.55);animation:genPop var(--motion) var(--ease-out)}
.gen-crop-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gen-crop-head b{font-size:var(--text-md)}
.gen-crop-stage{position:relative;flex:1 1 auto;min-height:220px;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-sm);background:#07090c;touch-action:none}
.gen-crop-canvas{max-width:100%;max-height:min(60vh,620px);display:block}
.gen-crop-rect{position:absolute;box-shadow:0 0 0 9999px rgba(0,0,0,.55);border:1.5px solid #fff;cursor:move;touch-action:none;
  background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:33.33% 33.33%;background-position:-1px -1px}
.gen-crop-rect:focus-visible{outline:2px solid var(--brass-l);outline-offset:2px}
.gen-crop-rect i{position:absolute;width:22px;height:22px;border:3px solid #fff;background:transparent}
.gen-crop-rect i[data-h="nw"]{left:-4px;top:-4px;border-right:0;border-bottom:0;cursor:nwse-resize}
.gen-crop-rect i[data-h="ne"]{right:-4px;top:-4px;border-left:0;border-bottom:0;cursor:nesw-resize}
.gen-crop-rect i[data-h="sw"]{left:-4px;bottom:-4px;border-right:0;border-top:0;cursor:nesw-resize}
.gen-crop-rect i[data-h="se"]{right:-4px;bottom:-4px;border-left:0;border-top:0;cursor:nwse-resize}
.gen-crop-tools{display:flex;flex-direction:column;gap:var(--space-2)}
.gen-crop-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.gen-crop-row .btn{min-height:var(--tap)}
.gen-crop-straight{display:flex;align-items:center;gap:var(--space-2);flex:1 1 220px;font-size:var(--text-xs);color:var(--muted)}
.gen-crop-straight input{flex:1}
.gen-crop-straight output{min-width:40px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.gen-crop-foot{display:flex;align-items:center;gap:var(--space-2)}
.gen-crop-foot span{flex:1}
.gen-crop-foot .btn{min-height:var(--tap)}

/* ─── Этапы ожидания ─── */
.gen-stages{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line2);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brass) 8%,var(--s2)),var(--s2));animation:genFadeIn var(--motion) var(--ease-out)}
.gen-stages-head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.gen-stages-head b{font-size:var(--text-sm)}
.gen-stages-eta{margin-left:auto;font-size:var(--text-2xs);color:var(--muted);font-variant-numeric:tabular-nums}
.gen-stages-spinner{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--brass) 30%,transparent);border-top-color:var(--brass);animation:genSpin .9s linear infinite}
.gen-stages.is-done .gen-stages-spinner{animation:none;border-color:var(--ok);background:var(--ok);box-shadow:inset 0 0 0 3px var(--s2)}
.gen-stages.is-failed .gen-stages-spinner{animation:none;border-color:var(--danger)}
.gen-stages-list{list-style:none;margin:var(--space-3) 0 var(--space-2);padding:0;display:flex;flex-direction:column;gap:6px}
.gen-stages-list li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted);transition:color var(--motion) var(--ease-out)}
.gen-stage-dot{flex:0 0 12px;width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);transition:all var(--motion) var(--ease-out)}
.gen-stages-list li.is-active{color:var(--ink);font-weight:600}
.gen-stages-list li.is-active .gen-stage-dot{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 35%,transparent);animation:genPulse 1.4s var(--ease-in-out) infinite}
.gen-stages-list li.is-done{color:var(--ink)}
.gen-stages-list li.is-done .gen-stage-dot{border-color:var(--ok);background:var(--ok)}
.gen-stage-time{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.gen-stages-bar{height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.gen-stages-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--brass-d),var(--brass-l));transition:width .5s linear}
.gen-stages.is-done .gen-stages-bar i{background:var(--ok)}
.gen-stages-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-2);font-size:var(--text-2xs);color:var(--muted)}
.gen-stages-foot [data-stage-queue]{flex:1 1 auto}
.gen-notify{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:32px;white-space:nowrap}
.gen-notify input{margin:0;width:16px;height:16px;flex:0 0 16px}
/* Шкалу «процентов» под кнопкой прячем, пока видны этапы: два индикатора — лишний шум. */
#genCard.is-staged #genMsg .ai-prog{display:none}

/* ─── Результат: появление, «до / после», значок сходства, крупные кнопки ─── */
.gen-stage.is-revealing #genImg{animation:genReveal var(--motion-slow) var(--ease-out) both}
.ba-layer{position:absolute;left:0;top:0;width:100%;height:100%;--ba-pos:50%;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;border-radius:10px;overflow:hidden}
.ba-layer[hidden]{display:none}
.gen-stage.is-zoomed .ba-layer{display:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0);background:var(--s2)}
.ba-before img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);cursor:ew-resize}
.ba-handle:focus-visible{outline:none;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 0 4px color-mix(in srgb,var(--brass) 55%,transparent)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#1a1d22;font-size:13px;font-weight:800;letter-spacing:-1px;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform var(--motion-fast) var(--ease-out)}
.ba-layer.is-dragging .ba-knob{transform:translate(-50%,-50%) scale(1.08)}
.ba-tag{position:absolute;top:10px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;color:#fff;background:rgba(10,12,16,.62);pointer-events:none}
.ba-tag-before{left:10px}.ba-tag-after{right:10px}
.ba-full{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:10px;border:0;display:grid;place-items:center;
  background:rgba(10,12,16,.62);color:#fff;font-size:18px;cursor:pointer}
.ba-full:hover{background:rgba(10,12,16,.82)}
.gen-view-toggle{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line2);border-radius:999px;background:var(--s2)}
.gen-view-toggle button{min-height:30px;padding:4px 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.gen-view-toggle button.on{background:var(--brass-fill-lo,var(--brass));color:var(--on-brass,#1a1408)}
.likeness-badge{display:inline-flex!important;align-items:center;gap:6px;margin-top:6px;padding:3px 10px;border-radius:999px;width:auto;
  font-size:12px!important;font-weight:700;border:1px solid var(--line2);background:var(--s2);color:var(--ink)!important;cursor:pointer}
.likeness-badge small{font-weight:400;color:var(--muted)}
.likeness-badge.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));background:var(--ok-soft)}
.likeness-badge.check{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));background:var(--warn-soft)}
.likeness-badge.warn{border-color:color-mix(in srgb,var(--danger) 60%,var(--line));background:var(--danger-soft)}
.likeness-badge[hidden]{display:none!important}
.generation-next .gen-big{min-height:48px;padding:10px 18px;font-size:var(--text-base);font-weight:700}
.gen-more{position:relative}
.gen-more>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:48px;padding:0 12px;
  border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--s2);color:var(--ink);cursor:pointer;font-weight:700}
.gen-more>summary::-webkit-details-marker{display:none}
.gen-more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:250px;display:flex;flex-direction:column;gap:4px;padding:6px;
  border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--theme-panel,var(--s1));box-shadow:0 14px 40px var(--theme-shadow,rgba(0,0,0,.45));animation:genPop var(--motion-fast) var(--ease-out)}
.gen-more-menu .btn{justify-content:flex-start;text-align:left;width:100%;min-height:42px}
.gen-more-menu .btn[hidden],.gen-more-menu a[style*="display: none"]{display:none!important}

/* ─── Полноэкранное сравнение ─── */
html.ba-fs-open,html.ba-fs-open body{overflow:hidden}
.ba-fullscreen{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;background:#05070a;animation:genFadeIn var(--motion) var(--ease-out)}
.ba-fs-stage{position:relative;max-width:100vw;max-height:100vh;touch-action:none}
.ba-fs-after{display:block;max-width:100vw;max-height:100vh;object-fit:contain}
.ba-fullscreen .ba-layer{border-radius:0;touch-action:none}
.ba-fs-close{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;width:48px;height:48px;min-height:48px;border-radius:50%;font-size:18px;z-index:2}
.ba-fs-hint{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:6px 14px;border-radius:999px;
  background:rgba(10,12,16,.7);color:#fff;font-size:12px;pointer-events:none;animation:genHint 3.2s var(--ease-out) forwards}

/* ─── «Мои работы» ─── */
.works-card{margin-top:var(--space-3)}
.works-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:var(--space-2)}
.works-head h2{margin:0;font-size:var(--text-md)}
.works-head small{color:var(--muted);font-size:var(--text-2xs)}
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-2)}
.work-item{position:relative;display:flex;flex-direction:column;gap:4px;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--s2);overflow:hidden;
  animation:genFadeIn var(--motion) var(--ease-out)}
.work-open{display:block;padding:0;border:0;background:transparent;cursor:pointer}
.work-open img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--s3);transition:transform var(--motion) var(--ease-out)}
.work-open:hover img{transform:scale(1.03)}
.work-meta{padding:0 6px;font-size:11px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-actions{display:flex;gap:4px;padding:0 6px 6px}
.work-actions .btn{flex:1;min-height:32px;padding:4px 6px;font-size:11.5px}
.work-del{position:absolute;top:4px;right:4px;width:26px;height:26px;min-height:0;padding:0;border:0;border-radius:50%;background:rgba(10,12,16,.6);color:#fff;font-size:13px;cursor:pointer;opacity:.85}
.works-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:var(--space-2);font-size:var(--text-2xs);color:var(--muted)}
.works-foot .btn{min-height:32px;padding:4px 10px;font-size:12px}

/* ─── Анимации (одни на весь раздел) ─── */
@keyframes genFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes genPop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes genSpin{to{transform:rotate(360deg)}}
@keyframes genPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brass) 40%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
@keyframes genReveal{0%{opacity:.2;filter:blur(14px) saturate(.4);clip-path:inset(0 0 100% 0)}55%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;filter:none;clip-path:inset(0 0 0 0)}}
@keyframes genHint{0%,70%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .scenario-card,.scenario-check,.gen-drop-overlay,.gen-drop-box,.gen-stage-dot,.gen-stages-bar i,.work-open img,.ba-knob{transition:none!important}
  .gen-stages,.gen-crop,.gen-more-menu,.work-item,.ba-fullscreen,.auto-thumb.is-fresh,.ba-fs-hint{animation:none!important}
  .gen-stages-spinner,.gen-stages-list li.is-active .gen-stage-dot{animation:none!important}
  .gen-stage.is-revealing #genImg{animation:none!important}
  .scenario-card:hover{transform:none}
}

/* ─── Телефон: крупные цели, две колонки сценариев, кнопки результата во всю ширину ─── */
@media (max-width:760px){
  .scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scenario-card{min-height:76px;flex-direction:column;align-items:flex-start;gap:6px}
  .scenario-icon{width:34px;height:34px;flex-basis:34px}
  .generation-next .gen-big{width:100%;min-height:52px}
  .gen-more{width:100%}.gen-more>summary{width:100%}
  .gen-more-menu{left:0;right:0;min-width:0}
  .ba-knob{width:44px;height:44px}
  .gen-crop{padding:var(--space-3)}
  .gen-crop-foot{flex-wrap:wrap}.gen-crop-foot .btn{flex:1 1 40%}
  .works-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:380px){.scenario-text small{display:none}}

/* Светлая тема: подложки чуть плотнее, чтобы карточки не терялись на бумаге. */
html[data-theme="ivory"] .scenario-card{background:#fff}
html[data-theme="ivory"] .scenario-card.on{background:#fff4df}
html[data-theme="ivory"] .gen-stages{background:#fffaf1}

/* ─── Главная: живое сравнение «до / после» ─── */
.live-compare{max-width:560px;margin:var(--space-5,24px) auto 0;padding:var(--space-3);border:1px solid var(--line2);border-radius:var(--radius-lg);background:var(--s1)}
.live-compare[hidden]{display:none}
.wc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:var(--space-2)}
.wc-head b{font-size:var(--text-md)}
.wc-head>span:not(.wc-switch){font-size:var(--text-2xs);color:var(--muted)}
.wc-switch{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.wc-switch button{min-height:40px;padding:6px 12px;border:1px solid var(--line2);border-radius:999px;background:var(--s2);color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer}
.wc-switch button.on{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 16%,var(--s2))}
.wc-stage{position:relative;aspect-ratio:733/1100;border-radius:12px;overflow:hidden;background:var(--s2)}
.wc-stage .wc-after{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.wc-stage .ba-before img{object-fit:cover}
.wc-stage .ba-layer{border-radius:12px}

/* ─── 27.10: меньше кнопок, главный шаг — HelpRetouch Ultra; сила доводки волос ─── */
.generation-next .gen-primary{padding-inline:16px}
#genResult .generation-next .gen-big{padding-inline:14px}
#genResult .gen-more>summary{padding:0 12px;min-width:0}
#genResult .gen-zoom-hint{display:none}
.gen-hair-tune{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 10px;padding:10px 14px;
  border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--s2)}
.gen-hair-tune[hidden]{display:none}
.gen-hair-tune label{display:flex;flex-direction:column;gap:2px;min-width:150px}
.gen-hair-tune label b{font-size:var(--text-sm)}
.gen-hair-tune label small{font-size:var(--text-2xs);color:var(--muted)}
.gen-hair-tune input[type=range]{flex:1 1 180px;accent-color:var(--brass);min-height:32px}
.gen-hair-tune output{min-width:46px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.gen-hair-tune .btn{min-height:36px;font-size:12.5px}
@media (max-width:760px){.gen-hair-tune .btn{flex:1 1 100%}}
#genResult .generation-next>.generation-next-actions{flex:1 1 100%;justify-content:flex-start;align-items:center}

/* ─── Цепочки «одной кнопкой» (29.10) ─── */
.recipe-group{margin-bottom:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--s2) 55%,transparent);padding:0}
.recipe-group>summary{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);min-height:var(--tap);padding:var(--space-2) var(--space-3);cursor:pointer;list-style:none;font-weight:700;font-size:var(--text-sm)}
.recipe-group>summary::-webkit-details-marker{display:none}
.recipe-group>summary small{font-weight:400;color:var(--muted);font-size:var(--text-2xs)}
.recipe-group>summary .fine-tune-chev{margin-left:auto;transition:transform var(--motion) var(--ease-out)}
.recipe-group[open]>summary .fine-tune-chev{transform:rotate(180deg)}
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-2);padding:0 var(--space-3) var(--space-3)}
.recipe-card{position:relative;display:flex;border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--s2);color:var(--ink)}
.recipe-card.on{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 12%,var(--s2));box-shadow:0 0 0 1px var(--brass) inset}
.recipe-pick{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:var(--tap);padding:var(--space-3);border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.recipe-pick:focus-visible,.recipe-add:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.recipe-pick small,.recipe-add small{color:var(--muted);font-size:var(--text-2xs);line-height:1.35}
.recipe-steps{margin:4px 0 0;padding-left:18px;font-size:var(--text-2xs);color:var(--ink);line-height:1.45}
.recipe-steps li::marker{color:var(--brass);font-weight:700}
.recipe-remove{position:absolute;top:4px;right:4px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.recipe-remove:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.recipe-add{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:var(--space-3);border-style:dashed;cursor:pointer;text-align:left;font:inherit}
.recipe-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-3);padding:var(--space-3);border:1px solid var(--brass);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--brass) 10%,var(--s2))}
.recipe-bar small{display:block;margin-top:4px;color:var(--muted);font-size:var(--text-2xs)}
.recipe-next{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-2) 0;padding:var(--space-2) var(--space-3);border:1px solid var(--brass);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--brass) 10%,var(--s2));font-size:var(--text-sm)}
.recipe-next span{flex:1 1 220px}
.recipe-dialog{width:min(520px,100%);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--line2);border-radius:var(--radius-lg);background:var(--s1);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.55)}
.recipe-dialog h2{margin:0;font-size:var(--text-md)}
.recipe-dialog p{margin:0;color:var(--muted);font-size:var(--text-sm)}
.recipe-dialog label{display:flex;flex-direction:column;gap:4px;font-size:var(--text-sm)}
.recipe-dialog input,.recipe-dialog select{min-height:var(--tap);padding:0 10px;border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--s2);color:var(--ink);font:inherit}
.recipe-dialog input[aria-invalid="true"]{border-color:var(--danger)}
.recipe-dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}
@media (max-width:760px){
  .recipe-grid{grid-template-columns:1fr}
  .recipe-bar{flex-direction:column}
  .recipe-next .btn,.recipe-dialog-actions .btn{flex:1 1 40%;min-height:var(--tap)}
}
html[data-theme="ivory"] .recipe-card{background:#fff}
html[data-theme="ivory"] .recipe-card.on{background:#fff4df}
.recipe-bar[hidden],.recipe-next[hidden],.recipe-group[hidden]{display:none}
/* Строку «⚡ Одной кнопкой» должно быть видно сразу (владелец не нашёл её в свёрнутом виде). */
.recipe-group{border-color:color-mix(in srgb,var(--brass) 70%,var(--line2));background:color-mix(in srgb,var(--brass) 9%,var(--s2))}
.recipe-group>summary{min-height:52px;font-size:var(--text-md)}
.recipe-group>summary .recipe-group-title{color:var(--brass-l,var(--brass))}
.recipe-group>summary .recipe-group-open{margin-left:auto;padding:6px 12px;border:1px solid var(--brass);border-radius:999px;font-size:var(--text-2xs);font-weight:700;color:var(--ink)}
.recipe-group[open]>summary .recipe-group-open{display:none}
.recipe-group>summary .recipe-group-open+.fine-tune-chev{margin-left:8px}
.recipe-group>summary small{flex:1 1 160px;min-width:0}.recipe-group>summary .recipe-group-open{margin-left:0;white-space:nowrap}
.recipe-group:not([open])>summary .fine-tune-chev{display:none}
.recipe-pick-dialog{width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto}.recipe-pick-dialog .recipe-grid{padding:0}.recipe-pick-note{color:var(--muted);font-size:var(--text-2xs)}
.recipe-autostart{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);width:100%;margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid color-mix(in srgb,var(--brass) 40%,transparent)}.recipe-autostart span{flex:1 1 200px}.recipe-bar{flex-wrap:wrap}