/* 设置页 · 从 public/exact/settings.html 内联 <style> 忠实移植,整段 scope 进 .settings-page 防外泄 · 只用 token */
.settings-page {
  /* ─── 设置布局:左 nav + 右 panel ─── */
  .settings-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }

  .settings-nav { position: sticky; top: 16px; }
  .settings-nav .nav-h { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; padding: 0 12px 8px; }
  .settings-nav :where(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--accent-black); border-radius: var(--r-md); border: 1px solid transparent; background: transparent; cursor: pointer; text-decoration: none; text-align: left; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); position: relative; }
  .settings-nav :where(a, button):hover { background: var(--background-lighter); }
  .settings-nav :where(a, button):focus-visible { outline: 2px solid var(--heat); outline-offset: 2px; }
  .settings-nav a.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; }
  .settings-nav :where(a, button) svg { width: 16px; height: 16px; stroke-width: 1.5; flex: 0 0 auto; }
  .settings-nav a .nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); padding: 1px 6px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); letter-spacing: .02em; line-height: 14px; }
  .settings-nav a.active .nav-badge { color: var(--heat); background: var(--accent-white); border-color: var(--heat-20); }
  .settings-nav a .nav-dot { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--heat); display: none; }
  .settings-nav a.has-changes .nav-dot { display: block; }
  .settings-nav a.active .nav-dot { right: -4px; }
  /* 改过的区:nav 文字也带橙提示(active 时已是橙,此处管未选中区) */
  .settings-nav a.has-changes:not(.active) > span:first-of-type { color: var(--heat); }

  /* ─── 顶栏「保存所有变更」脏字段计数 · 主 CTA 内白字 mono ─── */
  .page-head .actions .save-count { font-family: var(--font-mono); font-size: 11px; margin-left: 4px; opacity: .75; font-variant-numeric: tabular-nums; }
  .settings-nav .logout-pill {
    width: calc(100% - 24px);
    height: 38px;
    margin: 4px 12px 0;
    justify-content: center;
    border-radius: var(--r-pill);
    background: var(--accent-black);
    border-color: var(--accent-black);
    color: var(--accent-white);
    font-weight: 500;
  }
  .settings-nav .logout-pill:hover,
  .settings-nav .logout-pill:focus-visible {
    background: var(--black-alpha-88);
    border-color: var(--black-alpha-88);
    color: var(--accent-white);
  }

  /* ─── pane ─── */
  .pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 24px; margin-bottom: 16px; }
  .pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
  .pane .pane-desc { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; margin-bottom: 18px; }

  /* ─── form row ─── */
  .form-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-faint); align-items: center; }
  .form-row:last-child { border-bottom: 0; }
  .form-row .lbl { font-size: 13px; color: var(--black-alpha-56); }
  .form-row .lbl .req { color: var(--accent-crimson); margin-left: 2px; }
  .form-row .lbl-sub { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; }
  .form-row .val { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .form-row .val .input, .form-row .val .select { width: 100%; max-width: 380px; }
  .form-row .val .static { font-size: 13px; color: var(--accent-black); font-variant-numeric: tabular-nums; }
  .form-row .val .static.mono { font-family: var(--font-mono); font-size: 13px; color: var(--black-alpha-56); }
  .form-row .val .role-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: var(--heat-12); color: var(--heat); }
  .form-row .val .role-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--heat); }
  .form-row .val .row-link { font-size: 12px; color: var(--heat); text-decoration: none; margin-left: auto; }
  .form-row .val .row-note { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); }
  .form-row .val .switch-note { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); }
  .form-row.row-top { align-items: flex-start; }
  .form-row.row-top .lbl { padding-top: 4px; }
  .form-row.row-top .val { display: block; }

  /* ─── 头像上传 ─── */
  .avatar-edit { display: flex; align-items: center; gap: 16px; }
  .avatar-edit .av-big { width: 64px; height: 64px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; font-size: 24px; font-weight: 600; color: var(--accent-black); overflow: hidden; }
  .avatar-edit .av-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .avatar-edit .av-actions { display: flex; gap: 8px; }

  /* ─── toggle switch ─── */
  .switch { position: relative; width: 36px; height: 20px; flex: 0 0 36px; display: inline-block; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch .slider { position: absolute; inset: 0; background: var(--black-alpha-24); border-radius: 20px; cursor: pointer; transition: background var(--t-base); }
  .switch .slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: var(--accent-white); border-radius: 50%; transition: transform var(--t-base); }
  .switch input:checked + .slider { background: var(--heat); }
  .switch input:checked + .slider::before { transform: translateX(16px); }
  .switch input:disabled + .slider { cursor: not-allowed; opacity: .55; }

  /* ─── 偏好选项卡 ─── */
  .pref-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-width: 540px; }
  .pref-choice { padding: 10px 12px; border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); }
  .pref-choice:hover { background: var(--background-lighter); }
  .pref-choice.selected { border-color: var(--heat); background: var(--heat-12); }
  .pref-choice .t { font-size: 13px; font-weight: 600; color: var(--accent-black); }
  .pref-choice .d { font-size: 12px; color: var(--black-alpha-48); margin-top: 2px; font-family: var(--font-mono); letter-spacing: .02em; }
  .pref-choice.selected .t { color: var(--heat); }

  /* ─── 时长档 ─── */
  .duration-row { display: flex; gap: 8px; }
  .dur-chip { padding: 6px 14px; border: 1px solid var(--border-faint); border-radius: var(--r-md); font-size: 13px; cursor: pointer; font-family: var(--font-mono); font-variant-numeric: tabular-nums; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); background: var(--surface); }
  .dur-chip:hover { background: var(--background-lighter); }
  .dur-chip.selected { border-color: var(--heat); background: var(--heat-12); color: var(--heat); font-weight: 600; }

  /* ─── 设备列表 ─── */
  .device-list { /* 容器 · 仅承载行 */ }
  .device-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-faint); }
  .device-row:last-child { border-bottom: 0; }
  .device-row .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--background-lighter); display: grid; place-items: center; color: var(--ink-3); flex: 0 0 36px; }
  .device-row .ic svg { width: 18px; height: 18px; }
  .device-row .nm { font-size: 13px; font-weight: 500; display: flex; align-items: center; }
  .device-row .meta { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; }
  .device-row .tag-cur { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; background: var(--accent-forest); color: var(--accent-white); border-radius: var(--r-sm); margin-left: 8px; letter-spacing: .04em; font-weight: 600; }
  .device-row .spacer { margin-left: auto; }
  .device-row .row-note { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); }

  .sub-head { margin-top: 24px; }

  /* ─── 头像上传 modal 正文 · 装订线分隔 ─── */
  .av-up-preview-row { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; position: relative; }
  .av-up-preview-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: repeating-linear-gradient(to right, var(--border-faint) 0, var(--border-faint) 4px, transparent 4px, transparent 8px); }
  .av-up-preview { width: 64px; height: 64px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; font-size: 22px; font-weight: 600; color: var(--accent-black); overflow: hidden; flex: 0 0 64px; }
  .av-up-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .av-up-preview-meta { min-width: 0; }
  .av-up-preview-meta .t { font-size: 13px; font-weight: 600; color: var(--accent-black); margin-bottom: 3px; letter-spacing: .01em; }
  .av-up-preview-meta .d { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; line-height: 1.55; }

  .av-up-rules { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-faint); font-size: 12px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; line-height: 1.7; }
  .av-up-rules .li { display: flex; gap: 8px; }
  .av-up-rules .li::before { content: '//'; color: var(--black-alpha-32); flex: 0 0 auto; }

  /* 头像上传 modal 的 upload-zone · 共享样式仅 scope 在 .np-body,故在此页内补齐 uz-ic / uz-hint */
  .upload-zone {
    border: 1.5px dashed var(--black-alpha-24);
    border-radius: var(--r-md);
    padding: 22px 20px;
    text-align: center;
    background: var(--background-lighter);
    color: var(--black-alpha-56);
    font-size: 13px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
  }
  .upload-zone:hover, .upload-zone.dragover { border-color: var(--heat); background: var(--heat-8); color: var(--heat); }
  .upload-zone:hover .uz-ic, .upload-zone.dragover .uz-ic { background: var(--heat); color: var(--accent-white); border-color: var(--heat); }
  .upload-zone strong { color: var(--heat); font-weight: 600; }
  .upload-zone .uz-ic {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--heat);
    border: 1px solid var(--heat-20);
    display: grid; place-items: center;
    margin-bottom: 8px;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
  }
  .upload-zone .uz-ic svg { width: 18px; height: 18px; }
  .upload-zone .uz-hint { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }

  /* ─── 退出登录确认 modal 正文 ─── */
  .logout-confirm-copy { margin: 0 0 12px; color: var(--black-alpha-72); }
  .logout-confirm-points {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--background-lighter);
    border: 1px solid var(--border-faint);
    border-radius: var(--r-md);
  }
  .logout-confirm-points .li {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--black-alpha-64);
  }
  .logout-confirm-points .li::before {
    content: '//';
    flex: 0 0 auto;
    font-family: var(--font-mono);
    color: var(--black-alpha-32);
  }
  .logout-unsaved-note {
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid var(--heat-20);
    border-radius: var(--r-md);
    background: var(--heat-12);
    color: var(--heat);
    font-size: 13px;
    line-height: 1.6;
  }

  /* ─── 改密 modal · 校验提示 ─── */
  .field .pw-err { color: var(--accent-crimson); }

  /* ─── 页脚 build 标记 ─── */
  .settings-foot { text-align: center; padding: 24px 0 8px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }

  @media (max-width: 1024px) {
    .settings-grid { grid-template-columns: 1fr; }
    .settings-nav { position: static; }
    .form-row { grid-template-columns: 1fr; gap: 6px; }
  }
}