/* 账号相关 UI：主页账号卡 + 设置 → 账号页。
   只写结构与布局；颜色、字号、边框、圆角、阴影全部取自编辑器皮肤 token：
   --rpen-*（自定义皮肤生效时）并回落到 --accent / --muted / --line 及 styles.css 的本体值（默认皮肤）。
   控件沿用现有组件类 .field / .hint / button.primary / .wide-button，不另造按钮外观。
   组件别名 account-chip / account-settings 已登记在 edit/src/core/editor-skin.js。 */

/* ---------- 主页账号卡 ---------- */

/* 主页标题栏右侧原来只是一个裸容器，这里改成可换行的横排，窄屏不会把标题栏撑破 */
#home .home-heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

#account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  max-width: min(240px, 46vw);
  min-height: var(--rpen-control-height, 29px);
  padding: 4px 12px 4px 5px;
  text-align: left;
}

#account-chip .account-chip-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: 50%;
  background: var(--rpen-input, #383838);
  color: var(--rpen-muted, var(--muted));
  font-size: .92em;
  line-height: 1;
}

#account-chip .account-chip-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#account-chip .account-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#account-chip[data-state="offline"] {
  color: var(--rpen-muted, var(--muted));
}

/* ---------- 设置 → 账号页 ---------- */

#settings-modal .settings-account {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* 设置正文左右没有内边距（其他分类靠 .field 的 20px 外边距），账号页用卡片排版，这里补齐同样的起始缩进 */
  padding: 0 20px 8px;
}

/* .hint 自带 16px 20px 外边距，账号页里由卡片间距统一控制 */
#settings-modal .settings-account .hint {
  margin: 0;
}

#settings-modal .settings-account-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

#settings-modal .settings-account-badge {
  flex: none;
  padding: 2px 10px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius, 1px);
  background: var(--rpen-surface-alt, #282828);
  color: var(--rpen-muted, var(--muted));
  font-size: .9em;
  line-height: 1.8;
  white-space: nowrap;
}

#settings-modal .settings-account-badge[data-tone="online"] {
  color: var(--rpen-accent-text, var(--accent));
  border-color: var(--rpen-accent, var(--accent));
}

#settings-modal .settings-account-badge[data-tone="expired"] {
  color: var(--rpen-error, #e46e6e);
  border-color: var(--rpen-error, #e46e6e);
}

#settings-modal .settings-account-status-hint {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--rpen-surface-alt, #282828);
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
}

#settings-modal .settings-account-main-label {
  color: var(--rpen-muted, var(--muted));
  font-size: .82em;
  letter-spacing: .06em;
}

#settings-modal .settings-account-main-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

#settings-modal .settings-account-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: 50%;
  background: var(--rpen-input, #383838);
  color: var(--rpen-muted, var(--muted));
  font-size: 1.35em;
  line-height: 1;
}

#settings-modal .settings-account-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#settings-modal .settings-account-main-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 180px;
  min-width: 0;
}

#settings-modal .settings-account-main-name {
  font-size: 1.15em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-main-meta {
  color: var(--rpen-muted, var(--muted));
  font-size: .92em;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-heading {
  margin: 0;
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.5;
}

#settings-modal .settings-account-profile-intro {
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-profile-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

#settings-modal .settings-account-avatar-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
  width: 128px;
  min-width: 0;
}

#settings-modal .settings-account-avatar-column .settings-account-note {
  text-align: center;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-profile-avatar {
  width: 64px;
  height: 64px;
}

#settings-modal .settings-account-profile-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 240px;
  min-width: 0;
}

#settings-modal .settings-account-profile-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

#settings-modal .settings-account-sync-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#settings-modal .settings-account-sync-hint {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-offline-hint {
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-profile .field {
  margin: 0;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#settings-modal .settings-account-profile .field > input {
  min-width: 0;
}

#settings-modal .settings-account-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#settings-modal .settings-account-profile-actions {
  justify-content: flex-end;
}

#settings-modal .settings-account-danger {
  color: var(--rpen-error, #e46e6e);
  border-color: var(--rpen-error, #e46e6e);
}

#settings-modal .settings-account-auth {
  gap: 10px;
}

/* 切换账号和退出制谱器登录分两行：切换在上，退出单独占一行 */
#settings-modal .settings-account-switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#settings-modal .settings-account-switch-row > button {
  flex: none;
}

#settings-modal .settings-account-account-count {
  flex: 1 1 180px;
  min-width: 0;
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-auth .wide-button {
  display: block;
  width: 100%;
  margin: 0;
}

#settings-modal .settings-account-auth-hint {
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-feedback {
  min-height: 1.5em;
  overflow-wrap: anywhere;
}

#settings-modal .settings-account-feedback:empty {
  display: none;
}

#settings-modal .settings-account-feedback[data-tone="error"] {
  color: var(--rpen-error, #e46e6e);
}

@media (max-width: 700px) {
  #settings-modal .settings-account {
    padding-inline: 0;
  }
}

@media (max-width: 620px) {
  #home .home-heading-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  #account-chip {
    max-width: 100%;
  }

  #settings-modal .settings-account-profile-row {
    flex-direction: column;
  }

  #settings-modal .settings-account-avatar-column {
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: 10px;
  }

  #settings-modal .settings-account-avatar-column .settings-account-note {
    text-align: left;
  }

  #settings-modal .settings-account-profile .field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  #settings-modal .settings-account-profile .field > input {
    flex: 1 1 auto;
    width: 100%;
  }

  #settings-modal .settings-account-profile-actions {
    justify-content: stretch;
  }

  #settings-modal .settings-account-profile-actions > button {
    flex: 1 1 auto;
  }
}