/* =========================================================================
   首次初始化向导（templates/setup.html + static/setup.js）
   依赖 app.css + system.css 的颜色变量与组件（.btn / .field / .badge / .skeleton / .toast）。
   结构：顶栏 → 步骤进度 → 卡片（.sw-viewport 里切换 7 个面板 + 底部按钮 + 等待层 .sw-boot）
   步骤：1 管理员 2 数据库 3 称呼 4 外观 5 确认 →（应用设置，重启）→ 6 连接账号 7 完成 →（完成初始化，重启）→ 登录页
   动画：一律用 transform / opacity（面板切换另加轻微 blur）；html[data-motion="off"] 时全部关闭
         （CSS 动画 / 过渡由 app.css、system.css 的全局规则关闭，JS 的 Web Animations 由 setup.js 跳过）。
   ========================================================================= */

body.sw {
  min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(900px 420px at 50% -160px, color-mix(in srgb, var(--panel-3) 70%, transparent), transparent 72%),
    var(--bg);
  background-attachment: fixed;
}
.sw-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------- 顶栏 ---------- */
.sw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 28px 10px; padding-top: max(22px, env(safe-area-inset-top)); }
.sw-brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.sw-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--text); color: var(--panel); font-size: 15px; font-weight: 650; line-height: 1;
  transition: background .3s, color .3s; }
.sw-top-tag { font-size: 12px; color: var(--muted); white-space: nowrap; }

.sw-main { flex: 1; width: min(616px, 100%); margin: 0 auto; padding: 14px 20px 40px; display: flex; flex-direction: column; }

/* ---------- 步骤进度 ---------- */
.sw-progress { position: relative; margin: 4px 0 22px; animation: sw-fade-down .5s var(--ease) both; }
.sw-progress { --steps: 7; }
.sw-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); }
.sw-step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
/* 连线：从第一个点的中心到最后一个点的中心（N 等分列 → 两端各留 1/2N） */
.sw-track { position: absolute; left: calc(100% / var(--steps) / 2); right: calc(100% / var(--steps) / 2); top: 15px; height: 2px; border-radius: 2px;
  background: var(--border); overflow: hidden; }
.sw-track-fill { display: block; height: 100%; background: var(--text); transform: scaleX(0); transform-origin: left center;
  transition: transform .6s var(--ease), background .3s; }
.sw-dot { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--panel); color: var(--faint);
  font: 600 12px/1 inherit; font-variant-numeric: tabular-nums; cursor: default;
  transition: background .32s var(--ease), border-color .32s var(--ease), color .32s, box-shadow .32s, transform .2s var(--ease); }
.sw-dot:disabled { opacity: 1; }
.sw-dot:not(:disabled) { cursor: pointer; }
.sw-dot > * { grid-area: 1 / 1; }
.sw-num { transition: opacity .2s, transform .3s var(--ease); }
.sw-tick { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sw-tick path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .42s .14s cubic-bezier(.65, 0, .35, 1); }
.sw-step-label { font-size: 12px; color: var(--faint); white-space: nowrap; transition: color .3s; }

.sw-step.is-done .sw-dot { background: var(--text); border-color: var(--text); color: var(--panel); }
.sw-step.is-done .sw-num { opacity: 0; transform: scale(.4); }
.sw-step.is-done .sw-tick path { stroke-dashoffset: 0; }
.sw-step.is-done .sw-step-label { color: var(--muted); }
.sw-step.is-done .sw-dot:not(:disabled):hover { transform: scale(1.08); }
.sw-step.is-current .sw-dot { border-color: var(--text); color: var(--text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 8%, transparent); animation: sw-halo .7s var(--ease); }
.sw-step.is-current .sw-step-label { color: var(--text); font-weight: 550; }
.sw-step:not(.is-done):not(.is-current) .sw-dot:not(:disabled):hover { border-color: var(--faint); color: var(--muted); }

/* ---------- 卡片 ---------- */
.sw-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 1px 2px rgb(25 30 40 / .03), 0 18px 60px rgb(25 30 40 / .06);
  animation: sw-rise .6s var(--ease) both; animation-delay: .05s; }
:root[data-theme="dark"] .sw-card { box-shadow: 0 18px 60px rgb(0 0 0 / .25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sw-card { box-shadow: 0 18px 60px rgb(0 0 0 / .25); } }
.sw-viewport { position: relative; transition: filter .35s var(--ease), opacity .35s var(--ease); }
.sw-viewport.is-moving { overflow: hidden; overflow: clip; }
.sw-panel { padding: 32px 34px 26px; }
.sw-panel.is-leaving { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.sw-foot { display: flex; align-items: center; gap: 8px; padding: 16px 24px 18px; border-top: 1px solid var(--border);
  border-radius: 0 0 18px 18px; background: var(--panel); transition: filter .35s var(--ease), opacity .35s var(--ease); }
.sw-foot .btn { min-height: 38px; padding: 9px 16px; }
.sw-foot .btn .icon { width: 16px; height: 16px; }
.sw-foot .btn.ghost .icon { margin-left: -4px; }
.sw-next-label { display: inline-block; }
.sw-next-ico { display: inline-flex; margin-right: -3px; transition: transform .25s var(--ease); }
#sw-next:hover .sw-next-ico { transform: translateX(2px); }
#sw-next[data-busy] .sw-next-ico { display: none; }
.sw-foot-note { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--faint); animation: sw-fade .6s .4s both; }

/* 加载 / 加载失败 */
.sw-loading-body { animation: sw-fade .3s .25s both; }
.sw-loading-body .skeleton { margin: 0 0 12px; }
.sw-loading-err { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 10px; text-align: center; }
.sw-loading-ico { color: var(--red); }
.sw-loading-ico .icon { width: 28px; height: 28px; }
.sw-loading-msg { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- 面板头 ---------- */
.sw-head { margin-bottom: 24px; }
.sw-kicker { margin: 0 0 7px; font-size: 12px; color: var(--muted); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sw-title { margin: 0; font-size: 24px; font-weight: 550; letter-spacing: -.035em; line-height: 1.3; text-wrap: balance; }
.sw-title:focus { outline: none; }
.sw-sub { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); max-width: 58ch; text-wrap: pretty; }

/* ---------- 表单 ---------- */
.sw-form { display: block; }
.sw-field { margin-bottom: 16px; }
.sw-field .hint { margin: 1px 0 0; }
.sw-field > label { transition: color .2s; }
.sw-field:focus-within > label { color: var(--text); }
.sw-field.is-invalid input { border-color: color-mix(in srgb, var(--red) 70%, var(--border)); }
.sw-field.is-invalid input:focus { box-shadow: 0 0 0 3px var(--red-bg); }
.sw-err { margin: 2px 0 0; font-size: 12px; line-height: 1.55; color: var(--red); }
.sw-err:empty { display: none; }
.sw-err:not(:empty) { animation: sw-err-in .28s var(--ease); }
.sw-form-err:not(:empty) { margin-top: 4px; padding: 9px 12px; border-radius: 9px; background: var(--red-bg); }
.sw-input-wrap { position: relative; }
.sw-input-wrap input { padding-right: 46px; }
.sw-input-wrap input.has-lead { padding-left: 40px; }
.sw-lead { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; transition: color .2s; }
.sw-lead .icon { width: 17px; height: 17px; }
.sw-input-wrap:focus-within .sw-lead { color: var(--text); }
.sw-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; font-size: 16px !important; letter-spacing: .12em; text-transform: uppercase; }
.sw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color .18s, background .18s; }
.sw-eye:hover { color: var(--text); background: var(--panel-2); }
.sw-eye .icon { width: 17px; height: 17px; }
.sw-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--faint);
  font-variant-numeric: tabular-nums; pointer-events: none; transition: color .2s; }
.sw-count.over { color: var(--red); }
.sw-note { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: var(--panel-2); color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.sw-note > [data-sw-icon] { margin-top: 2px; color: var(--muted); flex-shrink: 0; }
.sw-note .icon { width: 15px; height: 15px; }
.sw-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sw-actions .btn .icon { width: 15px; height: 15px; }
.sw-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

/* 「口令在哪里」说明 */
.sw-where { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.sw-where summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--muted);
  border-radius: 6px; transition: color .18s; }
.sw-where summary::-webkit-details-marker { display: none; }
.sw-where summary:hover, .sw-where[open] summary { color: var(--text); }
.sw-where summary .icon { width: 14px; height: 14px; }
.sw-where-body { margin-top: 8px; padding: 11px 13px; border-radius: 10px; background: var(--panel-2); line-height: 1.7; }
.sw-where[open] .sw-where-body { animation: sw-err-in .3s var(--ease); }
.sw-where-body p { margin: 0; }
.sw-where-body ul { margin: 6px 0; padding-left: 18px; }
.sw-where-body li { margin: 3px 0; }
.sw-where-body code { font-size: 12px; background: var(--panel-3); }

/* 密码强度条：4 段依次填充，颜色随强度变化 */
.sw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 9px; }
.sw-meter i { position: relative; height: 4px; border-radius: 2px; background: var(--panel-3); overflow: hidden; }
.sw-meter i::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--meter, var(--text));
  transform: scaleX(0); transform-origin: left center; transition: transform .38s var(--ease), background-color .38s; }
.sw-meter i.on::after { transform: scaleX(1); }
.sw-meter i:nth-child(2)::after { transition-delay: .05s; }
.sw-meter i:nth-child(3)::after { transition-delay: .1s; }
.sw-meter i:nth-child(4)::after { transition-delay: .15s; }
.sw-meter[data-level="1"] { --meter: var(--red); }
.sw-meter[data-level="2"] { --meter: var(--yellow); }
.sw-meter[data-level="3"] { --meter: var(--green); }
.sw-meter[data-level="4"] { --meter: var(--green); }
.sw-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sw-label-row > label { font-size: 12px; font-weight: 500; color: var(--muted); transition: color .2s; }
.sw-field:focus-within .sw-label-row > label { color: var(--text); }
.sw-meter-text { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-meter-text:not(:empty) { animation: sw-err-in .25s var(--ease); }
.sw-field:has(.sw-meter[data-level="1"]) .sw-meter-text { color: var(--red); }
.sw-field:has(.sw-meter[data-level="2"]) .sw-meter-text { color: var(--yellow); }
.sw-field:has(.sw-meter[data-level="3"]) .sw-meter-text, .sw-field:has(.sw-meter[data-level="4"]) .sw-meter-text { color: var(--green); }
.sw-rules-extra { margin: 4px 0 0; font-size: 12px; color: var(--red); }
.sw-rules-extra:empty { display: none; }
.sw-rules { list-style: none; margin: 10px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; }
.sw-rule { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--muted); transition: color .25s, opacity .25s; }
.sw-rule-ico { position: relative; display: grid; place-items: center; width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--border); transition: background .25s, border-color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.sw-rule-ico svg { width: 9px; height: 9px; fill: none; stroke: var(--panel); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sw-rule-ico path { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .3s .08s ease-out; }
.sw-rule.ok { color: var(--faint); }
.sw-rule.ok .sw-rule-ico { background: var(--green); border-color: var(--green); transform: scale(1.06); }
.sw-rule.ok .sw-rule-ico path { stroke-dashoffset: 0; }
.sw-rule.bad { color: var(--text); }
.sw-rule.bad .sw-rule-ico { border-color: color-mix(in srgb, var(--red) 65%, var(--border)); }
/* 确认密码一致时，输入框右侧出现勾 */
.sw-match { position: absolute; right: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.sw-match svg { width: 12px; height: 12px; fill: none; stroke: var(--panel); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sw-match path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .3s .1s ease-out; }
.sw-confirm.is-match .sw-match { opacity: 1; transform: scale(1); }
.sw-confirm.is-match .sw-match path { stroke-dashoffset: 0; }

/* ---------- 选项卡片（数据库） ---------- */
.sw-choices { display: grid; gap: 10px; margin-bottom: 4px; }
.sw-choice { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 15px 16px; border: 1px solid var(--border);
  border-radius: 13px; background: var(--panel); cursor: pointer;
  transition: border-color .22s, background .22s, box-shadow .22s, transform .22s var(--ease); }
.sw-choice:hover { border-color: color-mix(in srgb, var(--text) 24%, var(--border)); }
.sw-choice:active { transform: scale(.992); }
.sw-choice input, .sw-theme input, .sw-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sw-choice:has(input:checked) { border-color: var(--text); background: color-mix(in srgb, var(--panel-2) 55%, var(--panel));
  box-shadow: inset 0 0 0 .5px var(--text); }
.sw-choice:has(input:focus-visible), .sw-theme:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw-choice-ico { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--panel-2); color: var(--muted);
  transition: background .3s var(--ease), color .3s; }
.sw-choice-ico .icon { width: 19px; height: 19px; }
.sw-choice:has(input:checked) .sw-choice-ico { background: var(--text); color: var(--panel); }
.sw-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sw-choice-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; }
.sw-choice-sub { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.sw-radio { position: relative; display: grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--faint); transition: border-color .2s; }
.sw-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text); transform: scale(0);
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1); }
.sw-choice:has(input:checked) .sw-radio, .sw-theme:has(input:checked) .sw-radio { border-color: var(--text); }
.sw-choice:has(input:checked) .sw-radio::after, .sw-theme:has(input:checked) .sw-radio::after { transform: scale(1); }

/* 高度可动画的折叠区（grid 0fr → 1fr） */
.sw-collapse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--ease), opacity .28s ease; }
.sw-collapse.is-open { grid-template-rows: 1fr; opacity: 1; }
.sw-collapse-inner { min-height: 0; overflow: hidden; padding: 0 4px; margin: 0 -4px; }
.sw-mysql { padding: 16px 0 4px; }
.sw-host-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 0 12px; }

/* 环境变量指定 / 需要登录 的说明块 */
.sw-locked { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 13px; background: var(--panel-2); margin-bottom: 12px; }
.sw-locked-ico { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--panel); color: var(--text); }
.sw-locked-title { margin: 0; font-weight: 550; font-size: 14px; }
.sw-locked-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }

/* 操作结果（测试连接 / 保存） */
.sw-result { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  background: var(--panel-2); color: var(--text); font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.sw-result:empty { display: none; }
.sw-result:not(:empty) { animation: sw-err-in .3s var(--ease); }
.sw-result.ok { background: var(--green-bg); color: var(--green); }
.sw-result.err { background: var(--red-bg); color: var(--red); }
.sw-result .icon { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; }

/* ---------- 第 3 步：称呼预览 ---------- */
.sw-preview { position: relative; margin-top: 6px; padding: 20px 20px 18px; border-radius: 14px; border: 1px dashed var(--border);
  background: linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--panel-2) 30%, var(--panel))); }
.sw-preview-tag { position: absolute; top: -9px; left: 14px; padding: 0 7px; font-size: 11px; color: var(--faint); background: var(--panel); border-radius: 4px; }
.sw-pv-hello { font-size: 22px; font-weight: 550; letter-spacing: -.03em; line-height: 1.3; overflow-wrap: anywhere; }
.sw-pv-name { transition: color .2s; }
.sw-pv-name.is-placeholder, [data-pv-name].is-placeholder { color: var(--faint); }
.sw-pv-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; border-radius: 1px; background: var(--text); opacity: 0; }
.sw-preview.is-typing .sw-pv-caret { opacity: 1; animation: sw-caret 1s steps(1) infinite; }
.sw-pv-date { margin-top: 3px; font-size: 12px; color: var(--muted); }
.sw-pv-msg { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; }
.sw-pv-msg p { margin: 0; padding: 9px 12px; border-radius: 4px 12px 12px 12px; background: var(--panel); border: 1px solid var(--border); font-size: 13px; line-height: 1.6; }
.sw-pv-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
.sw-pv-avatar .icon { width: 15px; height: 15px; }
.sw-pv-report { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.sw-pv-report .icon { width: 15px; height: 15px; }
.sw-pv-report b { font-weight: 550; color: var(--text); }

/* ---------- 第 4 步：外观 ---------- */
.sw-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.sw-theme { position: relative; display: flex; flex-direction: column; gap: 11px; padding: 9px 9px 11px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); cursor: pointer; transition: border-color .22s, box-shadow .22s, transform .22s var(--ease); }
.sw-theme:hover { border-color: color-mix(in srgb, var(--text) 24%, var(--border)); }
.sw-theme:active { transform: scale(.985); }
.sw-theme:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 .5px var(--text); }
.sw-theme-row { display: flex; align-items: center; gap: 7px; padding: 0 3px; font-size: 13px; font-weight: 500; }
.sw-theme-row .icon { width: 15px; height: 15px; color: var(--muted); }
.sw-theme-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 迷你窗口示意：固定颜色，不随当前主题变化 */
.sw-mini { position: relative; display: flex; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--m-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.sw-theme:has(input:checked) .sw-mini { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent), 0 10px 24px rgb(20 24 30 / .16); }
[data-look="light"] { --m-bg: #fafafa; --m-side: #f0f1f3; --m-card: #ffffff; --m-line: #e2e4e8; --m-ink: #25272b; --m-soft: #c9ccd2; }
[data-look="dark"] { --m-bg: #18191c; --m-side: #1e1f23; --m-card: #25272c; --m-line: #34363c; --m-ink: #eceef2; --m-soft: #55585f; }
.mini-side { width: 26%; padding: 9% 7%; display: flex; flex-direction: column; gap: 9%; background: var(--m-side); }
.mini-side i { display: block; height: 4px; border-radius: 2px; background: var(--m-soft); }
.mini-side i:first-child { width: 70%; background: var(--m-ink); }
.mini-main { flex: 1; padding: 9% 8%; display: flex; flex-direction: column; gap: 7%; }
.mini-main b { display: block; width: 55%; height: 6px; border-radius: 3px; background: var(--m-ink); }
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; flex: 1; }
.mini-cards i { border-radius: 4px; background: var(--m-card); box-shadow: 0 0 0 1px var(--m-line); }
.mini-line { display: block; height: 4px; border-radius: 2px; background: var(--m-line); }
.mini-line.s { width: 60%; }
.sw-mini-auto { display: block; background: none; }
.sw-mini-half { position: absolute; inset: 0; display: flex; background: var(--m-bg); }
.sw-mini-half.dark { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }
.sw-note-apply { margin-bottom: 4px; }

/* 主题切换：View Transitions 圆形扩散（setup.js 控制 clip-path）；不支持时整页颜色渐变 */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
html.sw-theme-fade body, html.sw-theme-fade body *, html.sw-theme-fade body *::before, html.sw-theme-fade body *::after {
  transition: background-color .42s ease, color .42s ease, border-color .42s ease, fill .42s ease, stroke .42s ease, box-shadow .42s ease !important; }

/* ---------- 第 5 步：账号 ---------- */
.sw-accts { display: flex; flex-direction: column; gap: 10px; }
.sw-acct { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); transition: border-color .25s, box-shadow .3s var(--ease); }
.sw-acct.is-open { border-color: color-mix(in srgb, var(--text) 22%, var(--border)); box-shadow: 0 8px 26px rgb(20 24 30 / .06); }
.sw-acct-head { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 14px; border: 0; border-radius: 14px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sw-acct-head:hover .sw-chev { color: var(--text); }
.sw-acct-ico { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--panel-2); color: var(--muted);
  transition: background .35s var(--ease), color .35s; }
.sw-acct-ico .icon { width: 18px; height: 18px; }
.sw-acct[data-ok] .sw-acct-ico { background: var(--green-bg); color: var(--green); }
.sw-acct-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sw-acct-title { font-size: 14px; font-weight: 550; }
.sw-acct-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-state { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
  background: var(--panel-3); color: var(--muted); transition: background .3s, color .3s; }
.sw-state .icon { width: 12px; height: 12px; }
.sw-state[data-tone="ok"] { background: var(--green-bg); color: var(--green); }
.sw-state[data-tone="info"] { background: var(--blue-bg); color: var(--blue); }
.sw-state[data-tone="warn"] { background: var(--yellow-bg); color: var(--yellow); }
.sw-state[data-tone="err"] { background: var(--red-bg); color: var(--red); }
.sw-chev { color: var(--faint); transition: transform .35s var(--ease), color .2s; }
.sw-chev .icon { width: 17px; height: 17px; }
.sw-acct.is-open .sw-chev { transform: rotate(180deg); }
.sw-acct-body { padding: 2px 16px 16px 65px; }
.sw-acct-desc { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.sw-acct-body .hint { margin: 10px 0 0; }
.sw-acct.is-flash { animation: sw-flash 1.4s var(--ease); }

/* 分段选择（协议） */
.sw-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-bottom: 8px; padding: 3px; border-radius: 10px; background: var(--panel-2); }
.sw-seg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 7px;
  background: var(--panel); box-shadow: 0 1px 3px rgb(0 0 0 / .08); transition: transform .32s var(--ease); }
.sw-seg:has(label:nth-child(2) input:checked)::before { transform: translateX(100%); }
.sw-seg label { position: relative; z-index: 1; padding: 6px 14px; border-radius: 7px; font-size: 12.5px; text-align: center; color: var(--muted); cursor: pointer; transition: color .2s; white-space: nowrap; }
.sw-seg label:has(input:checked) { color: var(--text); font-weight: 550; }
.sw-seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 按钮不可用的原因（例如 Compass 需要先连 UWA 邮箱） */
.sw-why { display: flex; gap: 7px; align-items: flex-start; margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.sw-why:not([hidden]) { animation: sw-err-in .28s var(--ease); }
.sw-why > [data-sw-icon] { margin-top: 2px; flex-shrink: 0; color: var(--yellow); }
.sw-why .icon { width: 14px; height: 14px; }
.sw-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sw-link:hover { color: var(--accent-2); }
#cp-login:disabled { opacity: .5; }

/* Compass 登录的长时间等待 */
.sw-wait { margin-top: 12px; padding: 12px 14px; border-radius: 11px; background: var(--panel-2); }
.sw-wait-bar { position: relative; height: 3px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.sw-wait-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--text) 45%, var(--text) 55%, transparent); animation: sw-sweep 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.sw-wait-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; font-size: 12.5px; }
.sw-wait-hint { display: inline-block; color: var(--text); }
.sw-wait-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sw-wait-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------- 第 5 步：确认设置 ---------- */
.sw-review { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; }
.sw-rev-row { display: flex; align-items: center; gap: 13px; padding: 13px 12px 13px 16px; border-top: 1px solid var(--border); min-width: 0; }
.sw-rev-row:first-child { border-top: 0; }
.sw-rev-ico { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--panel-2); color: var(--muted); }
.sw-rev-ico .icon { width: 17px; height: 17px; }
.sw-rev-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sw-rev-label { font-size: 12px; color: var(--muted); }
.sw-rev-val { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.sw-rev-edit { flex-shrink: 0; gap: 5px; }
.sw-rev-edit .icon { width: 14px; height: 14px; }
.sw-rev-row:hover .sw-rev-edit { color: var(--text); }

/* ---------- 第 7 步：总结 ---------- */
.sw-summary { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.sw-sum-group { padding: 9px 16px 7px; font-size: 11.5px; color: var(--muted); background: var(--panel-2); border-top: 1px solid var(--border); letter-spacing: .02em; }
.sw-sum-group:first-child { border-top: 0; }
.sw-sum-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--border); min-width: 0; }
.sw-sum-group + .sw-sum-row { border-top: 1px solid var(--border); }
.sw-sum-ico { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--panel-3); color: var(--faint); }
.sw-sum-ico svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sw-sum-row.ok .sw-sum-ico { background: var(--green-bg); color: var(--green); }
.sw-sum-row.ok .sw-sum-ico path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: sw-draw .45s var(--ease) forwards; animation-delay: var(--d, .3s); }
.sw-sum-label { flex: 1; min-width: 0; font-size: 13.5px; }
.sw-sum-val { min-width: 0; font-size: 13px; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.sw-sum-row.ok .sw-sum-val { color: var(--text); }
.sw-finish-note { margin: 0; }

/* ---------- 等待层：应用设置 / 完成重启 ---------- */
.sw-boot { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 28px 24px; border-radius: inherit;
  background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
.sw-card.is-booting .sw-viewport, .sw-card.is-booting .sw-foot { filter: blur(3px); opacity: .45; }
.sw-boot-inner { width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.sw-orb { position: relative; width: 112px; height: 112px; margin-bottom: 22px; }
.sw-orb svg { width: 100%; height: 100%; overflow: visible; }
.sw-orb circle, .sw-orb path { fill: none; }
.orb-track { stroke: var(--border); stroke-width: 1.5; transition: opacity .3s; }
.orb-arc { transform-box: fill-box; transform-origin: center; stroke-linecap: round; transition: opacity .3s, stroke .3s; }
.orb-arc.a1 { stroke: var(--text); stroke-width: 2.5; stroke-dasharray: 70 245; animation: sw-spin 1.3s linear infinite, sw-breathe 2.6s ease-in-out infinite alternate; }
.orb-arc.a2 { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 34 205; opacity: .75; animation: sw-spin 2.2s linear infinite reverse; }
.orb-ring { stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 315; stroke-dashoffset: 315; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg);
  transition: stroke-dashoffset .7s cubic-bezier(.65, 0, .35, 1), stroke .3s; }
.orb-burst { stroke: var(--green); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.orb-check { stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60;
  transition: stroke-dashoffset .45s .5s cubic-bezier(.65, 0, .35, 1); }
.orb-core { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--text);
  animation: sw-beat 1.6s ease-in-out infinite; transition: background .35s, opacity .3s; }
.orb-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--text); animation: sw-ripple 1.6s ease-out infinite; transition: border-color .35s; }
/* 服务断开期间：心跳变灰、停止扩散 */
.sw-orb[data-net="down"] .orb-core { background: var(--faint); }
.sw-orb[data-net="down"] .orb-core::after { border-color: transparent; }
.sw-orb[data-net="down"] .orb-arc.a1 { stroke: var(--faint); }
/* 成功：转圈收拢成完整的圆，画出勾 */
.sw-orb[data-state="ok"] .orb-arc, .sw-orb[data-state="ok"] .orb-track { opacity: 0; }
.sw-orb[data-state="ok"] .orb-ring { stroke-dashoffset: 0; }
.sw-orb[data-state="ok"] .orb-check { stroke-dashoffset: 0; }
.sw-orb[data-state="ok"] .orb-core { opacity: 0; animation: none; }
.sw-orb[data-state="err"] .orb-arc { animation-play-state: paused; stroke: var(--red); }
.sw-orb[data-state="err"] .orb-core { background: var(--red); animation: none; }
.sw-orb[data-state="err"] .orb-core::after { animation: none; border-color: transparent; }
.sw-boot-title { margin: 0; font-size: 19px; font-weight: 550; letter-spacing: -.03em; }
.sw-boot-title:focus { outline: none; }
.sw-boot-sub { margin: 6px 0 0; min-height: 1.6em; font-size: 13px; color: var(--muted); text-wrap: balance; }
.sw-phases { list-style: none; width: 100%; margin: 20px 0 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; text-align: left;
  border-radius: 12px; background: color-mix(in srgb, var(--panel-2) 80%, transparent); }
.sw-phases:empty { display: none; }
.sw-phase { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--faint); transition: color .3s; }
.sw-phase[data-s="run"] { color: var(--text); }
.sw-phase[data-s="done"] { color: var(--muted); }
.sw-phase[data-s="err"] { color: var(--red); }
.ph-ico { position: relative; display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; }
.ph-ico::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border); box-sizing: border-box;
  transition: width .25s var(--ease), height .25s var(--ease), background .25s, border-color .25s; }
.sw-phase[data-s="run"] .ph-ico::before { width: 14px; height: 14px; background: none; border: 1.75px solid var(--text); border-right-color: transparent; animation: sw-spin .75s linear infinite; }
.sw-phase[data-s="done"] .ph-ico::before { width: 16px; height: 16px; background: var(--green); }
.sw-phase[data-s="err"] .ph-ico::before { width: 16px; height: 16px; background: var(--red); }
.ph-ico svg { position: absolute; width: 10px; height: 10px; fill: none; stroke: var(--panel); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ph-ico path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .3s .1s ease-out; }
.sw-phase[data-s="done"] .ph-ico path.ok { stroke-dashoffset: 0; }
.sw-phase[data-s="err"] .ph-ico path.x { stroke-dashoffset: 0; }
.sw-boot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

/* ---------- 远程登录面板（第 6 步：在向导里登录 UWA / Compass，不离开 /setup） ---------- */
body.sw-rl-open { overflow: hidden; }
.sw-rl { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.sw-rl-backdrop { position: absolute; inset: 0; background: rgb(17 24 39 / .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sw-rl-panel { position: relative; display: flex; flex-direction: column; gap: 14px; width: min(1180px, 100%); max-height: 100%; overflow: auto;
  padding: 20px 22px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); box-shadow: 0 24px 80px rgb(10 14 22 / .28);
  overscroll-behavior: contain; }
.sw-rl-head { display: flex; align-items: flex-start; gap: 14px; }
.sw-rl-ico { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: var(--panel-2); color: var(--text); }
.sw-rl-ico .icon { width: 19px; height: 19px; }
.sw-rl-heading { flex: 1; min-width: 0; }
.sw-rl-heading h2 { margin: 0; font-size: 18px; font-weight: 550; letter-spacing: -.02em; }
.sw-rl-heading p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.sw-rl-cancel { flex-shrink: 0; gap: 5px; }
.sw-rl-cancel .icon { width: 14px; height: 14px; }
.sw-rl-body { min-height: 0; }
.sw-rl-body .rlm { --rlm-max-h: calc(100dvh - 330px); }
.sw-rl-note { margin: 0; font-size: 11.5px; color: var(--faint); }
@media (max-width: 640px) {
  .sw-rl { padding: 0; place-items: stretch; }
  .sw-rl-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    padding-top: max(14px, env(safe-area-inset-top)); gap: 12px; }
  .sw-rl-head { gap: 11px; }
  .sw-rl-ico { width: 34px; height: 34px; }
  .sw-rl-heading h2 { font-size: 16px; }
  .sw-rl-heading p { font-size: 12px; }
  .sw-rl-cancel span:last-child { display: none; }
  .sw-rl-body .rlm { --rlm-max-h: none; }
}

/* 庆祝彩纸 */
.sw-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; }

/* ---------- 手机 ---------- */
@media (max-width: 640px) {
  .sw-top { padding: 14px 16px 6px; padding-top: max(14px, env(safe-area-inset-top)); }
  .sw-main { padding: 8px 0 0; }
  .sw-progress { margin: 4px 14px 16px; }
  .sw-step-label { display: none; }
  .sw-dot { width: 28px; height: 28px; font-size: 11px; }
  .sw-tick { width: 14px; height: 14px; }
  .sw-track { top: 13px; }
  .sw-card { flex: 1; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -8px 30px rgb(25 30 40 / .04); }
  .sw-panel { padding: 26px 18px 20px; }
  .sw-head { margin-bottom: 20px; }
  .sw-title { font-size: 21px; }
  .sw-foot { position: sticky; bottom: 0; z-index: 3; margin-top: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0;
    background: color-mix(in srgb, var(--panel) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .sw-foot .btn { min-height: 44px; }
  .sw-foot #sw-next { flex: 1 1 auto; max-width: 62%; }
  .sw-foot-note { display: none; }
  .sw-two { grid-template-columns: minmax(0, 1fr); }
  .sw-rules { gap: 5px 10px; }
  .sw-host-row { grid-template-columns: minmax(0, 1fr) 88px; }
  .sw-themes { gap: 8px; }
  .sw-theme { padding: 7px 7px 9px; gap: 9px; border-radius: 12px; }
  .sw-theme-row { gap: 5px; font-size: 12px; }
  .sw-theme-row > [data-sw-icon] { display: none; }
  .sw-acct-head { padding: 12px; gap: 11px; }
  .sw-acct-body { padding: 0 14px 14px; }
  .sw-acct-sub { white-space: normal; }
  .sw-pv-hello { font-size: 20px; }
  .sw-boot { place-items: start center; padding-top: 12vh; }
  input, select, textarea { font-size: 16px; } /* 防止 iOS 聚焦时放大页面 */
}
@media (max-width: 380px) { .sw-dot { width: 26px; height: 26px; } .sw-track { top: 12px; } }

/* ---------- 关键帧 ---------- */
@keyframes sw-rise { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes sw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sw-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sw-halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 26%, transparent); } 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 8%, transparent); } }
@keyframes sw-err-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sw-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes sw-sweep { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
@keyframes sw-spin { to { transform: rotate(360deg); } }
@keyframes sw-breathe { from { stroke-dasharray: 40 275; } to { stroke-dasharray: 150 165; } }
@keyframes sw-beat { 0%, 100% { transform: scale(.8); } 50% { transform: scale(1); } }
@keyframes sw-ripple { from { transform: scale(1); opacity: .55; } to { transform: scale(3.6); opacity: 0; } }
@keyframes sw-draw { to { stroke-dashoffset: 0; } }
@keyframes sw-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* 关闭界面动画时：预览光标常亮、静态元素直接到终态 */
html[data-motion="off"] .sw-preview.is-typing .sw-pv-caret { opacity: 1; }
html[data-motion="off"] .sw-sum-row.ok .sw-sum-ico path { stroke-dashoffset: 0; }

/* DEV 标记：和登录页一致，低调的描边小标签 */
.sw-brand .devtag { padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; }