/* ============================================================
   设置模块
   ============================================================ */

.settings {
  height: 100%; overflow-y: auto;
  display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-auto-rows: max-content; gap: var(--sp-5);
  padding: var(--sp-5); align-content: start;
}

/* 左侧 Tab */
.set-tabs {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-3); border-radius: var(--r-lg);
  height: fit-content; position: sticky; top: 0;
}
.set-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--tx-2); text-align: left;
  transition: all var(--t-fast) var(--ease);
}
.set-tab:hover { background: var(--bg-3); color: var(--tx-1); }
.set-tab.active {
  background: var(--grad-brand-soft); color: var(--neon-cyan);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* 右侧内容 */
.set-content { padding: var(--sp-6); min-height: 420px; }
.set-pane { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 520px; animation: fadeIn var(--t-mid) var(--ease); }
.set-pane h3 { font-size: var(--fs-xl); }
.set-pane .btn { align-self: flex-start; }

/* 个人资料 */
.set-profile-head { display: flex; align-items: center; gap: var(--sp-4); }
.set-profile-head > div { min-width: 0; }
.set-profile-head h3, .set-profile-head .muted { overflow-wrap: anywhere; }
.avatar-presets { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-preset {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), box-shadow var(--t-fast);
}
.avatar-preset:hover { transform: scale(1.1); }
.avatar-preset.active { border-color: var(--neon-cyan); box-shadow: var(--glow-cyan); transform: scale(1.08); }

/* 自定义头像操作 */
.avatar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-url-row { display: flex; gap: var(--sp-2); align-items: center; }
.avatar-url-row .input { flex: 1; }

/* 上一个头像 */
.avatar-prev { display: flex; align-items: center; gap: 10px; }
.avatar-prev .avatar { flex: none; }
.avatar-prev-label { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--tx-3); }
.set-sub { font-size: var(--fs-xs); margin-top: 2px; }
.zodiac-hint { font-size: var(--fs-xs); color: var(--neon-cyan); min-height: 14px; }
.set-pane input[type="date"] { color-scheme: dark; }
.set-pane select.input { appearance: auto; }
/* 移动端兜底：原生控件（日期/下拉）min-content 较大时不允许超出卡片背景 */
.set-pane .field { min-width: 0; }
.set-pane .input, .set-pane .textarea, .set-pane select.input { max-width: 100%; min-width: 0; }
.avatar-url-row .input, .bind-row .input { min-width: 0; }

.avatar-crop-overlay {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  padding: 20px; background: rgba(2, 6, 18, .78); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
}
.avatar-crop-overlay.show { opacity: 1; }
.avatar-crop-dialog { width: min(92vw, 520px); max-height: calc(100dvh - 40px); overflow: auto; border-radius: var(--r-xl); }
.avatar-crop-head, .avatar-crop-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.avatar-crop-head { border-bottom: 1px solid var(--line-1); }
.avatar-crop-head h3 { font-size: var(--fs-lg); }
.avatar-crop-close { font-size: 26px; line-height: 1; }
.avatar-crop-body { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-5); }
.avatar-crop-stage { position: relative; width: min(76vw, 360px); aspect-ratio: 1; overflow: hidden; background: #050811; touch-action: none; cursor: grab; user-select: none; }
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-canvas { display: block; width: 100%; height: 100%; }
.avatar-crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .58); outline: 2px solid rgba(255, 255, 255, .92); outline-offset: -2px; }
.avatar-crop-controls { width: min(100%, 360px); display: flex; align-items: center; gap: var(--sp-3); }
.avatar-crop-range { flex: 1; min-width: 0; accent-color: var(--neon-cyan); }
.avatar-crop-zoom-mark { width: 20px; text-align: center; color: var(--tx-2); font-size: var(--fs-xl); }
.avatar-crop-preview-row { width: min(100%, 360px); display: flex; align-items: center; gap: var(--sp-4); }
.avatar-crop-preview { width: 80px; height: 80px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2), var(--glow-cyan); }
.avatar-crop-preview-row strong { display: block; margin-bottom: 4px; }
.avatar-crop-preview-row p { font-size: var(--fs-xs); }
.avatar-crop-foot { justify-content: flex-end; border-top: 1px solid var(--line-1); padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom)); }

/* 账号安全分区卡 */
.set-section {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--line-1); border-radius: var(--r-lg);
  background: var(--bg-glass);
}
.set-section h3 { font-size: var(--fs-lg); }
.set-section .field { margin-bottom: 0; }
.set-section .btn { align-self: flex-start; }
.bind-row { display: flex; gap: var(--sp-2); align-items: center; }
.bind-row .input { flex: 1; }

/* 外观 */
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--line-1); border-radius: var(--r-lg);
  background: var(--bg-glass);
}
.set-row-title { font-weight: 600; margin-bottom: 2px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--bg-1); border: 1px solid var(--line-1); }
.seg-item { padding: 6px 16px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--tx-2); transition: all var(--t-fast); }
.seg-item:hover { color: var(--tx-1); }
.seg-item.active { background: var(--grad-brand); color: var(--tx-on-neon); box-shadow: var(--glow-brand); }

/* 关于 */
.set-about-logo {
  width: 72px; height: 72px; margin: 0 auto;
  border-radius: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: var(--tx-on-neon);
  box-shadow: var(--glow-brand); animation: pulseGlow 3.4s ease-in-out infinite;
}
.set-about-logo .i { width: 34px; height: 34px; }
.set-shortcuts { display: flex; flex-direction: column; gap: 10px; }
.set-shortcut { display: flex; align-items: center; gap: 12px; }
.set-shortcut kbd {
  min-width: 96px; text-align: center;
  padding: 4px 12px; border-radius: var(--r-sm);
  background: var(--bg-3); border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--neon-cyan);
}

/* ---------- 任务8：意见与反馈 ---------- */
.set-row-btn { width: 100%; cursor: pointer; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.set-row-btn:hover { border-color: var(--neon-cyan); box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-cyan) 25%, transparent); }
.set-row-go { color: var(--tx-3); display: inline-flex; }
.fb-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.fb-type { width: fit-content; }
.fb-contact-row { display: flex; gap: var(--sp-2); }
.fb-contact-row .fb-contact-type { max-width: 170px; flex: none; }
.fb-contact-row .input { flex: 1; min-width: 0; }
.fb-shots { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.fb-shot { position: relative; width: 84px; height: 84px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-1); }
.fb-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-shot-del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: var(--r-full); border: none; cursor: pointer;
  background: rgba(6, 10, 24, 0.72); color: #fff; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.fb-shot-add {
  width: 84px; height: 84px; border-radius: var(--r-md); cursor: pointer;
  border: 1px dashed var(--line-2); background: transparent; color: var(--tx-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: var(--fs-xs); transition: all var(--t-fast);
}
.fb-shot-add:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.fb-history { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 34vh; overflow-y: auto; padding-right: 2px; }
.fb-item { border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 10px 12px; background: var(--bg-glass); }
.fb-item-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; }
.fb-item-type { font-size: var(--fs-xs); font-weight: 600; color: var(--tx-2); }
.fb-status { font-size: var(--fs-xs); padding: 1px 8px; border-radius: var(--r-full); border: 1px solid var(--line-1); }
.fb-pending { color: var(--neon-gold); border-color: color-mix(in srgb, var(--neon-gold) 35%, transparent); background: color-mix(in srgb, var(--neon-gold) 8%, transparent); }
.fb-replied { color: var(--neon-cyan); border-color: color-mix(in srgb, var(--neon-cyan) 35%, transparent); background: color-mix(in srgb, var(--neon-cyan) 8%, transparent); }
.fb-closed { color: var(--tx-3); }
.fb-item-time { margin-left: auto; font-size: var(--fs-xs); color: var(--tx-3); }
.fb-item-content { font-size: var(--fs-sm); color: var(--tx-1); white-space: pre-wrap; word-break: break-word; }
.fb-item-reply { margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--neon-cyan) 28%, transparent); background: color-mix(in srgb, var(--neon-cyan) 6%, transparent); }
.fb-item-reply-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--neon-cyan); margin-bottom: 4px; }
.fb-item-reply-body { font-size: var(--fs-sm); color: var(--tx-1); white-space: pre-wrap; word-break: break-word; }

@media (max-width: 768px) {
  /* minmax(0,1fr) + overflow-x:hidden：禁止页面级左右滑动，与工作站其它移动页面对齐 */
  .settings { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; padding: var(--sp-3); gap: var(--sp-3); }
  .set-tabs { flex-direction: row; overflow-x: auto; position: static; }
  .set-tab { white-space: nowrap; }
  .set-content { min-width: 0; padding: var(--sp-4); min-height: 0; }
  .avatar-crop-overlay { padding: 0; align-items: end; }
  .avatar-crop-dialog { width: 100%; max-height: 100dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .avatar-crop-body { padding: var(--sp-4); }
  .avatar-crop-stage { width: min(88vw, 390px); }
  .avatar-crop-head, .avatar-crop-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .avatar-crop-foot .btn { flex: 1; }
}