Мастер настройки как помощник установки: шаги слева, одна карточка, «Назад»/«Далее» внизу

Слева — шаги этой установки по порядку (номер, галочка у сделанных, текущий выделен),
справа — карточка шага: заголовок, пояснение, сведения «название — значение», зелёная
плашка итога. Подготовка модулей — в том же виде.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014FsEKyJrYF69Cj9ZXzFLRi

internal/lkgateway/web/templates/admin_prepare.html

@@ -1,33 +1,41 @@
 {{define "content"}}
 <style>
-.prep-head { text-align:center; padding:8px 0 4px; }
-.prep-head h1 { font-size:26px; font-weight:720; letter-spacing:-0.02em; margin:0 0 6px; }
-.prep-head p { color:var(--muted); margin:0 auto; max-width:620px; }
-.prep { max-width:680px; margin:24px auto 0; }
-.prep-row { display:grid; grid-template-columns:26px 1fr; gap:4px 10px; padding:12px 0; border-bottom:1px solid var(--border); }
-.prep-row:last-child { border-bottom:0; }
-.prep-row .ic { font-size:16px; line-height:22px; text-align:center; }
-.prep-row b { font-weight:620; }
+/* Тот же язык, что у мастера: одна карточка, заголовок и пояснение, строки «название — значение», «Далее» справа внизу. */
+.prep { max-width:720px; margin:10px auto 0; padding:28px 32px 22px; border-radius:16px; }
+.prep h2 { font-size:21px; font-weight:680; letter-spacing:-0.015em; margin:0 0 6px; }
+.prep-lead { color:var(--muted); font-size:14.5px; margin:0 0 18px; }
+.prep-kv { display:grid; grid-template-columns:minmax(120px,170px) minmax(0,1fr); gap:10px 20px; font-size:14.5px; margin:0 0 14px; }
+.prep-kv dt { color:var(--muted); } .prep-kv dd { margin:0; }
+.prep-ok { display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:10px; font-size:14px; margin:0 0 16px; background:var(--ok-weak); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
+.prep-row { display:grid; grid-template-columns:22px 1fr; gap:2px 12px; padding:12px 0; border-top:1px solid var(--border); font-size:14.5px; }
+.prep-row .ic { display:grid; place-items:center; height:22px; }
+.prep-row b { font-weight:600; }
 .prep-row .muted { font-size:13px; }
+.ic-ok { position:relative; width:18px; height:18px; border-radius:50%; background:var(--ok); }
+.ic-ok::after { content:""; position:absolute; left:50%; top:45%; width:4px; height:8px; border:solid #fff; border-width:0 1.8px 1.8px 0; transform:translate(-50%,-50%) rotate(45deg); }
+.ic-wait { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border-strong); }
 .prep-bar { height:6px; border-radius:3px; background:var(--card-2); overflow:hidden; margin:6px 0 0; }
 .prep-bar i { display:block; height:100%; width:100%; background:var(--accent); transform-origin:left center; transform:scaleX(0); transition:transform .4s ease; }
-.prep-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap; }
+.prep-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); flex-wrap:wrap; }
+.prep-foot .btn { border-radius:999px; padding:10px 22px; font-size:14.5px; font-weight:600; text-decoration:none; }
 @keyframes prepspin { to { transform:rotate(360deg); } }
 .spin { display:inline-block; width:14px; height:14px; border:2px solid var(--accent-weak); border-top-color:var(--accent); border-radius:50%; animation:prepspin .8s linear infinite; vertical-align:-2px; }
 @media (prefers-reduced-motion: reduce) { .spin { animation:none; } .prep-bar i { transition:none; } }
+@media (max-width:600px) { .prep { padding:20px 18px 16px; } .prep-kv { grid-template-columns:minmax(0,1fr); gap:2px 0; } .prep-kv dd { margin-bottom:8px; } }
 </style>
-<div class="prep-head">
-  <h1>Подготовка модулей</h1>
-  <p>Ключ принят: <b>{{.Tenant}}</b>. bj проверяет обновления, ставит и запускает модули, которые входят в вашу лицензию, — затем откроется мастер настройки.</p>
-</div>
 <div class="card prep">
-  {{if .Flash}}<p style="margin:0 0 6px;color:var(--ok)">✓ {{.Flash}}</p>{{end}}
-  <p class="muted" style="margin:0 0 4px;font-size:13px">Лицензия активна · {{.Until}}</p>
-  <div id="prep-rows"><p class="muted" style="margin:12px 0">Проверяю обновления и состав лицензии…</p></div>
+  <h2>Подготовка модулей</h2>
+  <p class="prep-lead">bj проверяет обновления, ставит и запускает модули вашей лицензии — затем откроется мастер настройки.</p>
+  {{if .Flash}}<div class="prep-ok"><i class="ic-ok"></i><span>{{.Flash}}</span></div>{{end}}
+  <dl class="prep-kv">
+    <dt>Организация</dt><dd>{{.Tenant}}</dd>
+    <dt>Лицензия</dt><dd>активна · {{.Until}}</dd>
+  </dl>
+  <div id="prep-rows"><p class="muted" style="margin:12px 0 0">Проверяю обновления и состав лицензии…</p></div>
   <div id="prep-prog" style="display:none;margin-top:8px"><span class="muted" id="prep-stage" style="font-size:13px"></span><div class="prep-bar"><i id="prep-fill"></i></div></div>
   <div class="prep-foot">
     <span id="prep-sum" style="font-weight:600"></span>
-    <a class="btn" id="prep-next" href="{{.Next}}" style="text-decoration:none;display:none">Перейти к настройке →</a>
+    <a class="btn" id="prep-next" href="{{.Next}}" style="display:none">Перейти к настройке →</a>
   </div>
 </div>
 <script>
@@ -36,7 +44,7 @@
   var prog=document.getElementById('prep-prog'), stage=document.getElementById('prep-stage'), fill=document.getElementById('prep-fill');
   var next={{.Next}}, started=false, redirect=null, boot=null, lost=0;
   function esc(s){return String(s==null?'':s).replace(/[&<>"]/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]})}
-  var ic={ok:'<span style="color:var(--ok)">✓</span>',run:'<span class="spin" aria-label="идёт"></span>',wait:'<span class="muted">○</span>',warn:'<span style="color:var(--warn)">⚠</span>',err:'<span style="color:var(--err)">✗</span>',info:'<span class="muted">ⓘ</span>'};
+  var ic={ok:'<i class="ic-ok" aria-label="готово"></i>',run:'<span class="spin" aria-label="идёт"></span>',wait:'<i class="ic-wait" aria-label="ждёт"></i>',warn:'<span style="color:var(--warn)">⚠</span>',err:'<span style="color:var(--err)">✗</span>',info:'<span class="muted">ⓘ</span>'};
   function mb(n){return (n/1048576).toFixed(1).replace('.',',')+' МБ'}
   function draw(d){
     rows.innerHTML=d.items.map(function(it){return '<div class="prep-row"><div class="ic">'+ic[it.state]+'</div><div><b>'+esc(it.title)+'</b>'+(it.detail?'<br><span class="muted">'+esc(it.detail)+'</span>':'')+'</div></div>'}).join('');