:root {
  color-scheme: light dark;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --bg:#f3f6fa; --surface:#fff; --ink:#19283b; --muted:#617087;
  --line:#dce4ee; --accent:#176d79; --soft:#edf6f6;
  --success-bg:#e9f6ed; --success-ink:#15613b; --error-bg:#fbeef0; --error-ink:#a52d34;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { max-width:1080px; margin:0 auto; padding:32px 24px 40px; color:var(--ink); background:var(--bg); }
h1 { margin:7px 0 10px; font-size:1.85rem; letter-spacing:-.03em; }
h2 { margin:0; font-size:1.1rem; }
p { line-height:1.65; }
.eyebrow { color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:.16em; }
.page-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
.intro { margin:0; color:var(--muted); }
.header-label { border:1px solid var(--line); border-radius:10px; padding:9px 13px; background:var(--surface); white-space:nowrap; font-size:.85rem; }
.steps { display:flex; list-style:none; padding:0; margin:0 0 24px; gap:12px; }
.steps li { flex:1; display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--muted); padding:13px 16px; border:1px solid var(--line); border-radius:12px; }
.steps span { font-size:.75rem; font-weight:700; }
.steps li[aria-current="step"] { background:var(--soft); color:var(--accent); border-color:var(--accent); }
.steps li[data-done="true"] { color:var(--success-ink); background:var(--success-bg); }
.workspace { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:20px; align-items:start; }
.main-column,.side-column { display:grid; gap:20px; min-width:0; }
.panel { padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface); min-width:0; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.badge { display:inline-flex; padding:6px 11px; border-radius:20px; background:var(--bg); color:var(--muted); font-size:.8rem; }
.badge[data-state="success"] { color:var(--success-ink); background:var(--success-bg); }
.badge[data-state="working"] { background:var(--soft); color:var(--accent); }
.badge[data-state="error"] { color:var(--error-ink); background:var(--error-bg); }
.device-card { display:flex; align-items:center; gap:16px; margin:22px 0; }
.device-card strong { overflow-wrap:anywhere; }
.device-card p { margin:5px 0 0; }
.dogbot-mark { flex-shrink:0; width:62px; height:54px; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--soft); border:1px solid var(--line); border-radius:17px; }
.dogbot-mark i { display:block; width:10px; height:17px; background:var(--accent); border-radius:7px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
button,input { font:inherit; }
button { min-height:44px; padding:10px 15px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--accent); background:var(--soft); }
button:disabled { opacity:.5; cursor:default; }
button.primary { color:#fff; background:var(--accent); border-color:var(--accent); }
button.primary:hover:not(:disabled) { filter:brightness(1.08); }
.wide { width:100%; }
:focus-visible { outline:3px solid #2c9fa8; outline-offset:3px; }
.help,.field-help { color:var(--muted); font-size:.85rem; }
.help { margin:14px 0; }
fieldset { border:0; padding:0; margin:22px 0 0; min-width:0; }
fieldset:disabled { opacity:.65; }
label { display:block; margin:0 0 8px; font-size:.9rem; font-weight:600; }
label span { margin-left:5px; font-size:.78rem; font-weight:400; color:var(--muted); }
input[type="text"],input[type="password"] { width:100%; min-width:0; min-height:46px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); }
input::placeholder { color:var(--muted); opacity:.85; }
.field-help { margin:7px 0 20px; font-size:.78rem; }
.password-field { display:flex; position:relative; }
.password-field input { padding-right:68px; }
.password-field button { position:absolute; right:3px; top:3px; min-height:40px; padding:7px 11px; border:0; background:transparent; color:var(--accent); font-size:.82rem; }
.checkbox-label { display:flex; align-items:center; gap:9px; margin:0 0 22px; font-size:.85rem; font-weight:400; }
.checkbox-label input { width:17px; height:17px; margin:0; accent-color:var(--accent); }
.feedback { min-height:1.65em; margin:16px 0 0; font-size:.85rem; color:var(--muted); overflow-wrap:anywhere; }
.feedback[data-state="error"] { color:var(--error-ink); }
.feedback[data-state="success"] { color:var(--success-ink); }
.details { margin:18px 0; }
.details div { display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.details dt { flex-shrink:0; color:var(--muted); font-size:.85rem; }
.details dd { margin:0; text-align:right; overflow-wrap:anywhere; font-size:.9rem; }
.tips ul { padding-left:18px; margin:18px 0; color:var(--muted); font-size:.85rem; line-height:1.8; }
.tips li+li { margin-top:10px; }
.privacy { margin:0; padding:12px; border-radius:10px; background:var(--soft); font-size:.8rem; color:var(--accent); }
.notice { padding:14px 16px; margin-bottom:20px; border:1px solid var(--line); border-radius:12px; color:var(--error-ink); background:var(--error-bg); line-height:1.65; font-size:.85rem; }
.page-footer { margin-top:24px; font-size:.8rem; color:var(--muted); line-height:1.7; }
@media (prefers-color-scheme:dark) {
  :root { --bg:#111b28; --surface:#192638; --ink:#e5edf7; --muted:#a0b1c7; --line:#304359; --accent:#267d87; --soft:#213e48; --success-bg:#1c3d30; --success-ink:#a9e1bc; --error-bg:#482c35; --error-ink:#ffc0c7; }
  .privacy,.eyebrow { color:#9ad0d5; }
}
@media (max-width:760px) {
  body { padding:24px 16px 32px; }
  .workspace { grid-template-columns:1fr; }
  .header-label { display:none; }
  .steps { gap:7px; }
  .steps li { padding:11px 9px; gap:6px; font-size:.8rem; }
}
@media (max-width:420px) {
  body { padding:22px 12px 28px; }
  h1 { font-size:1.6rem; }
  .intro { font-size:.9rem; }
  .panel { padding:20px; }
  .steps li { flex-direction:column; align-items:flex-start; }
}