/* Same look as portal/static/style.css, so the client sees one product before and after the hand-off. */
:root{--bg:#111113;--card:#19191c;--card2:#232328;--line:#26262b;--txt:#ececef;--dim:#8c8c98;
--accent:#7fa2ff;--ok:#37d39b;--dead:#ff5d5d;--amber:#ffb23e;--na:#5a5a66;--radius:10px;--tap:44px}
@media (prefers-color-scheme:light){:root{--accent:#2f5bd3;--bg:#f6f6f4;--card:#fff;--card2:#f1f1ee;
--line:#e6e6e2;--txt:#1b1b1f;--dim:#80808c;--na:#a6a6b0}}
*{box-sizing:border-box}
body{margin:0 auto;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);
color:var(--txt);max-width:640px;padding:calc(env(safe-area-inset-top) + 12px) 14px 40px;line-height:1.45}
h1{font-size:1.35rem;margin:0}
a{color:var(--accent)}
p.sub{color:var(--dim);font-size:.85rem;margin:4px 0 14px}
button{font:inherit;font-weight:640;border:0;border-radius:12px;cursor:pointer;min-height:var(--tap);
padding:0 16px;background:var(--card2);color:var(--txt);border:1px solid var(--line)}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btnlink{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border-radius:12px;
background:var(--accent);color:#fff;font-weight:640;text-decoration:none}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:10px 0}
.head{display:flex;align-items:flex-start;gap:12px}
.num{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
font-size:.85rem;font-weight:700;background:var(--card2);color:var(--dim)}
.step.done .num{background:var(--ok);color:#fff}
.step.current{border-color:var(--accent)}
.step.current .num{background:var(--accent);color:#fff}
.main{flex:1;min-width:0}
.name{font-weight:650}
.state{font-size:.8rem;color:var(--dim)}
.step.current .state{color:var(--accent)}
.body{display:none;font-size:.92rem}
.step.current .body{display:block}
.body ol{padding-left:20px}
.shot{margin:10px 0;padding:28px 10px;border:1px dashed var(--line);border-radius:var(--radius);text-align:center;
color:var(--dim);font-size:.8rem}
.help{font-size:.8rem;color:var(--dim)}
label{display:block;font-size:.75rem;color:var(--dim);margin:12px 0 4px}
input{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px;border-radius:10px;border:1px solid var(--line);
background:var(--card2);color:var(--txt)}
.actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.login{max-width:360px;margin:18vh auto 0}
.err{color:var(--dead);font-size:.85rem}
.foot{margin-top:28px}
.linkbtn{background:none;border:0;padding:0;min-height:0;font-weight:400;text-decoration:underline;color:var(--dim)}

.img{margin:10px 0}.img img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius)}
.cmd{background:#111;color:#eee;padding:8px 10px;border-radius:6px;overflow-x:auto;font-size:.9em;user-select:all}