/* 账号与外观(xn-account.js)的样式:文档页 / 文档首页 / 表格页 / 首页 / 帮助中心的「设置」弹窗、首页的账号菜单。
   颜色先用页面自己的变量(小诺界面那套:--panel / --text / --border …;首页那套:--ink / --line …),都没有就用下面的默认值 */
.xna {
  --xa-bg: var(--panel, #fff); --xa-text: var(--text, var(--ink, #0d1424)); --xa-text2: var(--text-2, var(--ink2, #3a4458));
  --xa-muted: var(--muted, #6a7487); --xa-line: var(--border, var(--line, #e2e7f0)); --xa-hover: var(--hover, var(--soft, #f2f5fa));
  --xa-chip: var(--chip, var(--accent-soft, #e9efff)); --xa-accent: var(--accent, #1d4ed8); --xa-fill: var(--accent-fill, var(--btn-bg, #1d4ed8));
  --xa-ink: var(--accent-ink, var(--btn-ink, #fff)); --xa-ok: var(--ok, #15803d); --xa-danger: var(--danger, #c43c1c);
  color: var(--xa-text); font-family: inherit; font-size: 14px; line-height: 1.5;
}
.xna *, .xna *::before, .xna *::after { box-sizing: border-box; }
.xna-i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* 页面里放「设置」按钮的占位:按钮直接当页面顶栏的一员(不多出一个 flex 空位) */
[data-xn-settings] { display: contents; }
.xd-ib .xna-i, .dh-btn .xna-i { width: 18px; height: 18px; vertical-align: 0; }
.dh-btn .xna-i { width: 16px; height: 16px; }
@media (max-width: 640px) { .dh-btn.xna-hide-label span { display: none; } }
/* 页面上的「设置」按钮(没有指定页面自己的按钮样式时) */
.xna-gear { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted, #6a7487); cursor: pointer; font: inherit; }
.xna-gear:hover { background: var(--hover, #f2f5fa); color: var(--text, #0d1424); }
.xna-gear .xna-i { width: 18px; height: 18px; }

/* 弹窗 */
.xna-ov { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 12, 22, .42); }
.xna-dlg { background: var(--xa-bg); color: var(--xa-text); border: 1px solid var(--xa-line); border-radius: 14px; box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .35); }
.xna-set { width: min(760px, 100%); height: min(600px, calc(100vh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.xna-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--xa-line); }
.xna-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; }
.xna-head b .xna-i { color: var(--xa-accent); }
.xna-x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--xa-muted); cursor: pointer; }
.xna-x:hover { background: var(--xa-hover); color: var(--xa-text); }
.xna-wrap { flex: 1; min-height: 0; display: flex; }
.xna-nav { width: 168px; flex: none; padding: 10px 8px; border-right: 1px solid var(--xa-line); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.xna-nav button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--xa-text2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.xna-nav button:hover { background: var(--xa-hover); color: var(--xa-text); }
.xna-nav button.on { background: var(--xa-chip); color: var(--xa-accent); font-weight: 600; }
.xna-nav button[hidden] { display: none; }
.xna-body { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px 24px; }
.xna-ph { margin-bottom: 12px; }
.xna-ph h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: 0; }
.xna-ph p { margin: 4px 0 0; color: var(--xa-muted); font-size: 13px; }
.xna-sec { padding: 12px 0; border-bottom: 1px solid var(--xa-line); }
.xna-sec:last-child { border-bottom: 0; }
.xna-st { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; margin-bottom: 6px; }
.xna-st .xna-i { color: var(--xa-accent); }
.xna-lead { margin: 0 0 10px; font-size: 13px; color: var(--xa-muted); line-height: 1.6; }
.xna-lead b { color: var(--xa-text2); font-weight: 600; }
.xna-sub { font-size: 12.5px; color: var(--xa-muted); margin: 16px 0 7px; }
.xna-sub:first-child { margin-top: 0; }
.xna-seg { display: flex; background: var(--xa-hover); border-radius: 9px; padding: 3px; gap: 2px; max-width: 420px; }
.xna-seg button { flex: 1; padding: 7px 0; border: 0; border-radius: 7px; background: transparent; color: var(--xa-muted); font: inherit; font-size: 13px; cursor: pointer; }
.xna-seg button:hover { color: var(--xa-text); }
.xna-seg button.on { background: var(--xa-bg); color: var(--xa-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.xna-sw { display: flex; gap: 10px; flex-wrap: wrap; padding: 2px; margin-bottom: 12px; }
.xna-sw button { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid var(--xa-bg); box-shadow: 0 0 0 1px var(--xa-line); cursor: pointer; }
.xna-sw button:hover { transform: scale(1.08); }
.xna-sw button.on { box-shadow: 0 0 0 2px var(--sw); }
.xna-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--xa-line); cursor: pointer; }
.xna-check span { display: flex; flex-direction: column; min-width: 0; }
.xna-check b { font-weight: 550; font-size: 13.5px; }
.xna-check small { color: var(--xa-muted); font-size: 12px; }
.xna-check input { width: 18px; height: 18px; accent-color: var(--xa-fill); flex: none; }
.xna-hours { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 13px; color: var(--xa-text2); }
.xna-hours[hidden] { display: none; }
.xna-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-bottom: 8px; border: 1px solid var(--xa-line); border-radius: 10px; color: var(--xa-text); text-decoration: none; }
.xna-link:hover { background: var(--xa-hover); }
.xna-link > .xna-i:first-child { width: 20px; height: 20px; color: var(--xa-accent); }
.xna-link span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.xna-link b { font-weight: 600; font-size: 13.5px; }
.xna-link small { color: var(--xa-muted); font-size: 12px; }
.xna-link .xna-end { color: var(--xa-muted); }
.xna-qr { display: block; width: 132px; height: 132px; border-radius: 10px; border: 1px solid var(--xa-line); background: #fff; }

/* 账号那一块:和小诺界面「设置 → 账号」同样的 markup(.ac-row / .st-btn …),在独立页里用这里的样式 */
.xna .ac-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--xa-line); flex-wrap: wrap; min-height: 46px; }
.xna .ac-k { color: var(--xa-muted); width: 64px; flex: none; }
.xna .ac-v { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--xa-text2); }
.xna .ac-v b { font-weight: 600; color: var(--xa-text); font-variant-numeric: tabular-nums; }
.xna .ac-none { color: var(--xa-muted); }
.xna .ac-b { display: flex; gap: 6px; flex: none; margin-left: auto; align-items: center; }
.xna .ac-panel { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--xa-chip); display: grid; gap: 10px; }
.xna .ac-panel[hidden] { display: none; }
.xna .ac-title { font-size: 13.5px; font-weight: 600; color: var(--xa-text); }
.xna .ac-pre { font-size: 13px; font-weight: 600; color: var(--xa-text2); }
.xna .ac-soon { font-size: 12px; color: var(--xa-muted); white-space: nowrap; }
.xna .ac-foot { margin-top: 10px; }
.xna .st-lead { margin: 0; font-size: 12.5px; color: var(--xa-muted); line-height: 1.6; }
.xna .st-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xna .st-inline[hidden] { display: none; }
.xna input[type="text"], .xna input[type="password"], .xna select { height: 34px; padding: 0 10px; border: 1px solid var(--xa-line); border-radius: 8px; background: var(--xa-bg); color: var(--xa-text); font: inherit; font-size: 13.5px; min-width: 0; }
.xna input[type="text"], .xna input[type="password"] { flex: 1 1 160px; }
.xna input:focus, .xna select:focus { outline: 2px solid color-mix(in srgb, var(--xa-accent) 40%, transparent); outline-offset: 0; border-color: var(--xa-accent); }
.xna .st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 1px solid var(--xa-line); background: var(--xa-bg); color: var(--xa-text); border-radius: 8px; padding: 0 13px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.xna .st-btn:hover { background: var(--xa-hover); }
.xna .st-btn:disabled { opacity: .55; cursor: default; }
.xna .st-btn.primary { background: var(--xa-fill); border-color: var(--xa-fill); color: var(--xa-ink); }
.xna .st-btn.primary:hover { filter: brightness(1.06); }
.xna .st-btn.ghost { border-color: transparent; background: transparent; color: var(--xa-muted); }
.xna .st-btn.ghost:hover { color: var(--xa-text); background: var(--xa-hover); }
.xna .st-btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.xna .st-btn.outline { border-color: var(--xa-accent); color: var(--xa-accent); background: transparent; }
.xna .st-msg { font-size: 12.5px; line-height: 1.5; margin-top: 8px; color: var(--xa-muted); }
.xna .st-msg:empty { display: none; }
.xna .st-msg.ok { color: var(--xa-ok); }
.xna .st-msg.err { color: var(--xa-danger); }

/* 确认框 */
.xna-cf { z-index: 9100; }
.xna-cf-card { width: min(380px, 100%); padding: 20px 20px 16px; }
.xna-cf-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.xna-cf-acts { display: flex; justify-content: flex-end; gap: 8px; }

/* 首页 / 帮助中心的账号菜单 */
.xna-menu { position: fixed; z-index: 9000; background: var(--xa-bg); border: 1px solid var(--xa-line); border-radius: 12px; box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .3); padding: 6px; }
.xna-mh { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.xna-mh .xna-av { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--xa-chip); color: var(--xa-accent); }
.xna-mh span, .xna-menu button span { display: flex; flex-direction: column; min-width: 0; }
.xna-mh b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xna-mh small, .xna-menu button small { color: var(--xa-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xna-msep { height: 1px; background: var(--xa-line); margin: 4px 6px; }
.xna-menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--xa-text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.xna-menu button b { font-weight: 550; }
.xna-menu button .xna-i { color: var(--xa-muted); }
.xna-menu button:hover, .xna-menu button:focus-visible { background: var(--xa-hover); outline: none; }
.xna-menu button:disabled { opacity: .55; cursor: default; }
.xna-menu button[data-act="logout"] .xna-i, .xna-menu button[data-act="logout"] b { color: var(--xa-danger); }

/* 手机:设置铺满屏幕,分类变成顶上一排 */
@media (max-width: 640px) {
  .xna-ov { padding: 0; align-items: stretch; }
  .xna-set { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .xna-wrap { flex-direction: column; }
  .xna-nav { width: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--xa-line); padding: 6px 10px; overflow-x: auto; overflow-y: hidden; }
  .xna-nav button { width: auto; flex: none; padding: 7px 12px; }
  .xna-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .xna .ac-b { margin-left: 74px; }
}
/* 头像(首页 / 帮助中心顶栏的账号按钮、账号菜单顶部):社交头像图片 / 预设颜色 / 名字首字 */
.xna-av2 { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--av, var(--accent-fill, var(--accent, #1d4ed8))); color: #fff; }
.xna-av2.dflt { background: var(--accent-fill, var(--accent, #1d4ed8)); }
.xna-av2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xna-av2 b { font-size: 12.5px; font-weight: 650; line-height: 1; }
.xna-av2.lg { width: 36px; height: 36px; }
.xna-av2.lg b { font-size: 15px; }