/* Shared stylesheet for the step-by-step help viewers (public/{locale}/help-assets/{topic}/index.html). */
* { box-sizing:border-box }
html,body { margin:0 }
body { font-family:Inter,Arial,sans-serif;background:#f7f6fb;color:#241d3c }
button { cursor:pointer;font:inherit }
a { color:inherit }
.page-kicker { font-size:13px;font-weight:900;color:#6e52e1;letter-spacing:.16em;text-transform:uppercase }
h1 { font-size:53px;line-height:1.07;letter-spacing:-.048em;margin:0 0 24px }
h2 { margin:0 }
.viewer-page { max-width:1120px;margin:auto;padding:38px 24px }
.viewer-top { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:34px }
.viewer-brand { display:flex;align-items:center;gap:14px;color:#5941d4;font-weight:850;font-size:21px }
.viewer-brand img { width:42px;border-radius:12px }
.viewer-hero { background:#221c40;border-radius:30px;padding:36px;color:#fff }
.viewer-hero h1 { color:#fff;font-size:43px }
.viewer-hero p { color:#d8cff3;max-width:690px;font-size:17px;line-height:1.65 }
.viewer-main { display:grid;grid-template-columns:1fr 360px;gap:28px;margin-top:26px }
.viewer-visual { background:white;border:1px solid #ece7f6;border-radius:27px;overflow:hidden }
.viewer-visual img { display:block;width:100%;height:390px;object-fit:contain;background:#faf8ff }
.viewer-controls { display:flex;justify-content:space-between;align-items:center;padding:18px;border-top:1px solid #ece7f6 }
.viewer-controls button { background:#7253e7;color:#fff;border:0;padding:12px 15px;border-radius:12px;font-weight:800 }
.viewer-controls button:disabled { opacity:.3 }
.viewer-current { font-weight:900;color:#3e325d }
.viewer-sidebar { display:flex;flex-direction:column;gap:10px }
.viewer-step { padding:15px 16px;border:1px solid #e5def4;border-radius:15px;text-align:left;background:#fff;cursor:pointer;line-height:1.4 }
.viewer-step b { display:block;color:#4f4381;font-size:14px }
.viewer-step small { display:block;color:#878099;font-size:12px;margin-top:4px }
.viewer-step.active { border-color:#7c5ded;background:#f3eefe }
.viewer-step.active b { color:#5a3fe0 }
.viewer-tip { margin-top:18px;background:#f5f1fd;padding:17px;border-radius:18px;color:#665786;font-size:14px;line-height:1.6 }
@media(max-width:850px) {
.viewer-hero h1 { font-size:29px }
.viewer-main { display:flex;flex-direction:column }
.viewer-visual img { height:auto }
.viewer-page { padding:20px 12px }
.viewer-hero { padding:24px }
.viewer-sidebar { display:grid;grid-template-columns:1fr 1fr }
.viewer-top { align-items:flex-start }
 }
.viewer-brand img { display:block;width:122px;height:32px;object-fit:contain;border-radius:0;flex:none }