/* ============================================================
   零零导航 · 全局主题与公共样式
   四套主题：cream(奶油橙·默认) / sakura(樱花粉) / matcha(抹茶绿) / candy(糖果色)
   通过 <html data-theme="xxx"> 切换，选择持久化在 localStorage
   ============================================================ */

/* ---------- 主题变量 ---------- */
:root,
html[data-theme="cream"] {
  --bg: #FFF6EC;
  --bg-grad: linear-gradient(135deg, #FFF8EF 0%, #FFEFDB 52%, #FFE9D4 100%);
  --dot-color: rgba(255, 159, 67, 0.10);
  --blob-1: rgba(255, 183, 120, 0.20);
  --blob-2: rgba(255, 214, 165, 0.22);
  --card-bg: #FFFDF9;
  --card-bg-soft: #FFF7EC;
  --primary: #FF9F43;
  --primary-hover: #F08C1E;
  --primary-active: #DE7E12;
  --primary-light: #FFE7C7;
  --on-primary: #FFFFFF;
  --accent: #FF6B9D;
  --accent-light: #FFDFEA;
  --text: #5A4632;
  --text-secondary: #A68A6E;
  --text-faint: #C9B49A;
  --border: #F3E2C9;
  --shadow-color: rgba(224, 138, 46, 0.16);
  --shadow-strong: rgba(224, 138, 46, 0.26);
  --danger: #F26D6D;
  --danger-light: #FFE0E0;
  --success: #5CB87A;
  --mask: rgba(90, 70, 50, 0.35);
}

html[data-theme="sakura"] {
  --bg: #FFF4F7;
  --bg-grad: linear-gradient(135deg, #FFF8FA 0%, #FFEBF1 52%, #FFE1EA 100%);
  --dot-color: rgba(255, 143, 171, 0.10);
  --blob-1: rgba(255, 183, 200, 0.22);
  --blob-2: rgba(255, 209, 222, 0.24);
  --card-bg: #FFFDFE;
  --card-bg-soft: #FFF5F8;
  --primary: #FF8FAB;
  --primary-hover: #F5739A;
  --primary-active: #E45F89;
  --primary-light: #FFDCE6;
  --on-primary: #FFFFFF;
  --accent: #B491F5;
  --accent-light: #EDE3FC;
  --text: #6B4352;
  --text-secondary: #B98FA0;
  --text-faint: #D6B7C3;
  --border: #F8DCE4;
  --shadow-color: rgba(240, 120, 155, 0.16);
  --shadow-strong: rgba(240, 120, 155, 0.26);
  --danger: #F26D6D;
  --danger-light: #FFE0E0;
  --success: #5CB87A;
  --mask: rgba(107, 67, 82, 0.35);
}

html[data-theme="matcha"] {
  --bg: #F6FAEF;
  --bg-grad: linear-gradient(135deg, #F9FCF3 0%, #EFF6E0 52%, #E7F1D5 100%);
  --dot-color: rgba(127, 176, 105, 0.10);
  --blob-1: rgba(178, 211, 145, 0.22);
  --blob-2: rgba(209, 231, 176, 0.24);
  --card-bg: #FCFEF8;
  --card-bg-soft: #F5FAEB;
  --primary: #7FB069;
  --primary-hover: #699B54;
  --primary-active: #598A46;
  --primary-light: #DDEDCB;
  --on-primary: #FFFFFF;
  --accent: #F4A259;
  --accent-light: #FCE4C8;
  --text: #46543A;
  --text-secondary: #93A382;
  --text-faint: #BAC7AC;
  --border: #E3EDD5;
  --shadow-color: rgba(110, 155, 84, 0.16);
  --shadow-strong: rgba(110, 155, 84, 0.26);
  --danger: #F26D6D;
  --danger-light: #FFE0E0;
  --success: #5CB87A;
  --mask: rgba(70, 84, 58, 0.35);
}

html[data-theme="candy"] {
  --bg: #F8F5FF;
  --bg-grad: linear-gradient(135deg, #FAF7FF 0%, #FFF0F7 52%, #EDF6FF 100%);
  --dot-color: rgba(155, 126, 222, 0.10);
  --blob-1: rgba(196, 171, 244, 0.22);
  --blob-2: rgba(255, 195, 218, 0.22);
  --card-bg: #FDFCFF;
  --card-bg-soft: #F7F3FE;
  --primary: #9B7EDE;
  --primary-hover: #8463CC;
  --primary-active: #7352BB;
  --primary-light: #E5DBF8;
  --on-primary: #FFFFFF;
  --accent: #FF8FAB;
  --accent-light: #FFDFE8;
  --text: #574B6E;
  --text-secondary: #A193BE;
  --text-faint: #C6BBDC;
  --border: #E9E2F6;
  --shadow-color: rgba(140, 113, 205, 0.16);
  --shadow-strong: rgba(140, 113, 205, 0.26);
  --danger: #F26D6D;
  --danger-light: #FFE0E0;
  --success: #5CB87A;
  --mask: rgba(87, 75, 110, 0.35);
}

/* ---------- 基础 reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.6;
  transition: background 0.4s ease, color 0.4s ease;
}

/* 背景氛围：渐变 + 漂浮色块 + 圆点纹理（不用纯白平铺） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-grad);
  z-index: -3;
  transition: opacity 0.4s ease;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(420px circle at 12% 18%, var(--blob-1), transparent 70%),
    radial-gradient(380px circle at 88% 12%, var(--blob-2), transparent 70%),
    radial-gradient(460px circle at 82% 85%, var(--blob-1), transparent 70%),
    radial-gradient(360px circle at 18% 88%, var(--blob-2), transparent 70%),
    radial-gradient(var(--dot-color) 1.4px, transparent 1.6px);
  background-size: auto, auto, auto, auto, 30px 30px;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; color: var(--text); }

::selection { background: var(--primary-light); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); background-clip: content-box; border: 2px solid transparent; }

/* 键盘焦点态（无障碍） */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 通用组件 ---------- */

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  user-select: none;
  white-space: nowrap;
}

.btn:active { transform: scale(0.96); }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 4px 14px var(--shadow-color);
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 6px 20px var(--shadow-strong); transform: translateY(-1px); }
.btn-primary:active { background: var(--primary-active); }

.btn-ghost {
  background: var(--card-bg);
  color: var(--text);
  border: 2px solid var(--border);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--card-bg-soft); }

.btn-danger {
  background: var(--danger-light);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-sm { min-height: 36px; padding: 0 14px; font-size: 0.85rem; }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* 卡片 */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 3px 12px var(--shadow-color);
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

/* 输入框 */
.input,
.select,
.textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.input::placeholder, .textarea::placeholder { color: var(--text-faint); }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}

.textarea { resize: vertical; min-height: 84px; }

.form-item { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-error {
  display: none;
  font-size: 0.82rem;
  color: var(--danger);
  margin-top: 4px;
}
.form-item.has-error .form-error { display: block; }
.form-item.has-error .input,
.form-item.has-error .select,
.form-item.has-error .textarea { border-color: var(--danger); }

/* ---------- Toast ---------- */
.toast-wrap {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px var(--shadow-strong);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
  word-break: break-all;
}

.toast.hide { animation: toast-out 0.25s ease forwards; }
.toast-success { border-color: var(--success); }
.toast-error { border-color: var(--danger); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-18px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-14px) scale(0.94); }
}

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--mask);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease;
}

/* display:flex 会覆盖 hidden 属性的 display:none，必须显式还原 */
.modal-mask[hidden] { display: none; }

.modal {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--card-bg);
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px var(--shadow-strong);
  padding: 26px 26px 22px;
  animation: modal-pop 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 主题切换：单点触发 + 悬浮/点击展开 ---------- */
.theme-picker { position: relative; display: inline-flex; }

/* 触发点：平时只显示当前主题的一颗色点 */
.theme-picker-trigger {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  box-shadow: 0 0 0 1px var(--border), 0 2px 6px var(--shadow-color);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.theme-picker-trigger:hover { transform: scale(1.15); }
.theme-picker-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 展开面板：默认隐藏，向下弹出、右对齐防溢出 */
.theme-picker-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 28px var(--shadow-strong);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(0.92);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* 展开通道一：JS 点击切换（全设备通用，触屏主通道）；
   展开通道二：键盘聚焦（无障碍） */
.theme-picker.open .theme-picker-pop,
.theme-picker:focus-within .theme-picker-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
/* 展开通道三：鼠标悬浮。仅真实支持 hover 的设备启用，
   避免触屏 (pointer:coarse) 上 :hover 粘滞导致面板关不掉 */
@media (hover: hover) {
  .theme-picker:hover .theme-picker-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
}

/* 向上弹出变体：抽屉等贴底场景 */
.theme-picker.pop-up .theme-picker-pop {
  top: auto;
  right: auto;
  bottom: calc(100% + 10px);
  left: 0;
  transform-origin: bottom left;
  transform: translateY(5px) scale(0.92);
}
.theme-picker.pop-up.open .theme-picker-pop,
.theme-picker.pop-up:focus-within .theme-picker-pop {
  transform: translateY(0) scale(1);
}
@media (hover: hover) {
  .theme-picker.pop-up:hover .theme-picker-pop {
    transform: translateY(0) scale(1);
  }
}

/* 触屏设备：放大触控目标 */
@media (pointer: coarse) {
  .theme-picker-pop { gap: 12px; padding: 12px 16px; }
  .theme-picker-pop .theme-dot { width: 30px; height: 30px; }
}

.theme-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  position: relative;
  flex: 0 0 auto;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.theme-dot:hover { transform: scale(1.2); }
.theme-dot.active { border-color: var(--text); }
.theme-dot.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.theme-dot[data-theme="cream"],
.theme-picker-trigger[data-theme="cream"]   { background: linear-gradient(135deg, #FF9F43 50%, #FFE7C7 50%); }
.theme-dot[data-theme="sakura"],
.theme-picker-trigger[data-theme="sakura"]  { background: linear-gradient(135deg, #FF8FAB 50%, #FFDCE6 50%); }
.theme-dot[data-theme="matcha"],
.theme-picker-trigger[data-theme="matcha"]  { background: linear-gradient(135deg, #7FB069 50%, #DDEDCB 50%); }
.theme-dot[data-theme="candy"],
.theme-picker-trigger[data-theme="candy"]   { background: linear-gradient(135deg, #9B7EDE 50%, #FFB3C6 50%); }

/* ---------- 骨架屏 / 空状态 ---------- */
.skeleton {
  border-radius: 18px;
  background: linear-gradient(90deg, var(--card-bg-soft) 25%, var(--border) 50%, var(--card-bg-soft) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.4s infinite;
}
@keyframes skeleton-wave {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-secondary);
}
.empty-state .empty-emoji { font-size: 3rem; display: block; margin-bottom: 12px; }
.empty-state .empty-text { font-size: 1rem; font-weight: 600; }

/* ---------- 动效减负 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}