/* ========================================
   十四行诗 — Style Sheet v13 — 高端视觉重构
   星星点缀 + 滚动按钮 + 时间戳 + 模型徽标 + 星云背景 + 胶囊按钮 + 毛玻璃
   参考：ChatGPT-Next-Web / LobeChat 设计模式
   ======================================== */

:root {
  --bg-primary: #fdf6f0;
  --bg-secondary: #fce8e8;
  --bg-tertiary: #f0e8f5;
  --bg-card: rgba(255,255,255,0.65);
  --bg-card-blur: 16px;
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #5a3a4a;
  --text-secondary: #8a6a7a;
  --text-muted: #b8909a;
  --text-faint: #c9a8b8;
  --accent-1: #d4a0c0;
  --accent-2: #e8b4c0;
  --accent-gradient: linear-gradient(135deg, #e8b4c0, #d4a0c0);
  --border-color: rgba(212,180,200,0.35);
  --border-light: rgba(212,180,200,0.25);
  --shadow-sm: 0 2px 12px rgba(212,160,192,0.15), 0 1px 4px rgba(212,160,192,0.08);
  --shadow-md: 0 4px 24px rgba(212,160,192,0.15), 0 2px 8px rgba(212,160,192,0.1);
  --shadow-lg: 0 8px 32px rgba(212,160,192,0.18), 0 4px 16px rgba(212,160,192,0.1);
  --shadow-xl: 0 12px 48px rgba(212,160,192,0.2), 0 6px 24px rgba(212,160,192,0.12);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #e8b4c0, #d4a0c0);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(255,255,255,0.85);
  --sidebar-width: 280px;
  --font-family: 'Georgia', 'Noto Serif SC', 'SimSun', serif;
  --font-mono: 'Menlo', 'Consolas', 'Courier New', monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 50%;
  --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-normal: 0.35s cubic-bezier(0.32,0.72,0,1);
  --transition-slow: 0.5s cubic-bezier(0.32,0.72,0,1);
  --transition-spring: 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

[data-theme="dark"] {
  --bg-primary: #1a1420;
  --bg-secondary: #2a1a2a;
  --bg-tertiary: #1e1828;
  --bg-card: rgba(40,30,45,0.8);
  --bg-card-solid: #2a1a2a;
  --bg-input: rgba(40,30,45,0.92);
  --text-primary: #e8d0d8;
  --text-secondary: #c9a8b8;
  --text-muted: #a07888;
  --text-faint: #7a5868;
  --accent-1: #c890b0;
  --accent-2: #b87098;
  --accent-gradient: linear-gradient(135deg, #b87098, #c890b0);
  --border-color: rgba(180,140,160,0.35);
  --border-light: rgba(180,140,160,0.2);
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.2);
  --bot-msg-bg: rgba(40,30,45,0.88);
  --user-msg-bg: linear-gradient(135deg, #b87098, #a05880);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(30,20,35,0.92);
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
  outline: none; margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background var(--transition-slow), color var(--transition-slow);
}

textarea::placeholder { color: var(--text-faint); }
textarea::-webkit-scrollbar { display: none; }
input::-webkit-scrollbar { display: none; }

/* ========== INTRO ========== */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 35%, var(--bg-tertiary) 100%);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#intro-screen.hidden { display: none; }

/* ✨ 开屏星星 */
.intro-stars {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
}


/* ===== 国风传统色主题（浅色模式） ===== */
[data-color-style="lvchen"] {
  --bg-primary: #f0f5ec;
  --bg-secondary: #e4ede0;
  --bg-tertiary: #d8e5d4;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #2a5a28;
  --text-secondary: #4a8a48;
  --text-muted: #70b068;
  --text-faint: #a0d098;
  --accent-1: #4a8a38;
  --accent-2: #6aaa58;
  --accent-gradient: linear-gradient(135deg, #6aaa58, #4a8a38);
  --border-color: rgba(80,140,60,0.3);
  --border-light: rgba(80,140,60,0.2);
  --shadow-sm: 0 2px 12px rgba(60,120,40,0.12), 0 1px 4px rgba(60,120,40,0.06);
  --shadow-md: 0 4px 24px rgba(60,120,40,0.12), 0 2px 8px rgba(60,120,40,0.08);
  --shadow-lg: 0 8px 32px rgba(60,120,40,0.15), 0 4px 16px rgba(60,120,40,0.08);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #6aaa58, #4a8a38);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(240,245,236,0.92);
  --watermark-color: rgba(74,138,56,0.12);
}

[data-color-style="dingxiang"] {
  --bg-primary: #f5f0f8;
  --bg-secondary: #ede4f2;
  --bg-tertiary: #e4d8ec;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #4a2870;
  --text-secondary: #7848a0;
  --text-muted: #a880c8;
  --text-faint: #c8b0e0;
  --accent-1: #b080d0;
  --accent-2: #c8a0e0;
  --accent-gradient: linear-gradient(135deg, #c8a0e0, #b080d0);
  --border-color: rgba(170,130,200,0.3);
  --border-light: rgba(170,130,200,0.2);
  --shadow-sm: 0 2px 12px rgba(150,100,180,0.12), 0 1px 4px rgba(150,100,180,0.06);
  --shadow-md: 0 4px 24px rgba(150,100,180,0.12), 0 2px 8px rgba(150,100,180,0.08);
  --shadow-lg: 0 8px 32px rgba(150,100,180,0.15), 0 4px 16px rgba(150,100,180,0.08);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #c8a0e0, #b080d0);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(245,240,248,0.92);
  --watermark-color: rgba(176,128,208,0.12);
}

[data-color-style="tianpiao"] {
  --bg-primary: #ecf2f4;
  --bg-secondary: #e0e8ec;
  --bg-tertiary: #d4dee4;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #1a4060;
  --text-secondary: #386888;
  --text-muted: #6098b8;
  --text-faint: #98c8d8;
  --accent-1: #5090b0;
  --accent-2: #70b0c8;
  --accent-gradient: linear-gradient(135deg, #70b0c8, #5090b0);
  --border-color: rgba(70,140,170,0.3);
  --border-light: rgba(70,140,170,0.2);
  --shadow-sm: 0 2px 12px rgba(50,120,150,0.12), 0 1px 4px rgba(50,120,150,0.06);
  --shadow-md: 0 4px 24px rgba(50,120,150,0.12), 0 2px 8px rgba(50,120,150,0.08);
  --shadow-lg: 0 8px 32px rgba(50,120,150,0.15), 0 4px 16px rgba(50,120,150,0.08);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #70b0c8, #5090b0);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(236,242,244,0.92);
  --watermark-color: rgba(80,144,176,0.12);
}

[data-color-style="daizhe"] {
  --bg-primary: #f5ece0;
  --bg-secondary: #ece0d4;
  --bg-tertiary: #e4d4c8;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #4a2818;
  --text-secondary: #7a5038;
  --text-muted: #a88060;
  --text-faint: #c8b098;
  --accent-1: #b07048;
  --accent-2: #c88860;
  --accent-gradient: linear-gradient(135deg, #c88860, #b07048);
  --border-color: rgba(170,110,70,0.3);
  --border-light: rgba(170,110,70,0.2);
  --shadow-sm: 0 2px 12px rgba(150,90,50,0.12), 0 1px 4px rgba(150,90,50,0.06);
  --shadow-md: 0 4px 24px rgba(150,90,50,0.12), 0 2px 8px rgba(150,90,50,0.08);
  --shadow-lg: 0 8px 32px rgba(150,90,50,0.15), 0 4px 16px rgba(150,90,50,0.08);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #c88860, #b07048);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(245,236,224,0.92);
  --watermark-color: rgba(176,112,72,0.12);
}
/* 🌠 流星雨 */
.intro-shooting-stars {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  overflow: hidden;
}
.shooting-star {
  position: absolute;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.6), 0 0 20px 6px rgba(255,255,255,0.2);
  animation: shoot 1.5s ease-out forwards;
}
.shooting-star::after {
  content: '';
  position: absolute;
  top: 50%; right: 100%;
  width: 80px; height: 1px;
  background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);
  transform: translateY(-50%);
}
.shooting-star {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(255,255,255,0.5), 0 0 12px 4px rgba(255,255,255,0.15);
  animation: shoot var(--dur, 1.2s) ease-out forwards;
  opacity: 0;
}
.shooting-star::after {
  content: '';
  position: absolute;
  top: 50%; right: 100%;
  width: 60px; height: 1px;
  background: linear-gradient(to left, rgba(255,255,255,0.7), transparent);
  transform: translateY(-50%);
}
.shooting-star.big {
  width: 4px; height: 4px;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.6), 0 0 20px 6px rgba(255,255,255,0.2);
}
.shooting-star.big::after { width: 100px; }
@keyframes shoot {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-250px, 250px) scale(0); opacity: 0; }
}
  70% { opacity: 1; }
  100% { transform: translate(-200px, 200px) scale(0); opacity: 0; }
}

/* 刘海屏适配 */
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-left { padding-left: env(safe-area-inset-left, 0px); }
.safe-right { padding-right: env(safe-area-inset-right, 0px); }

[data-color-style="oubi"] {
  --bg-primary: #ecf4ee;
  --bg-secondary: #e0ece4;
  --bg-tertiary: #d4e4d8;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #1a5038;
  --text-secondary: #387858;
  --text-muted: #68a080;
  --text-faint: #98c8a8;
  --accent-1: #50a078;
  --accent-2: #70c098;
  --accent-gradient: linear-gradient(135deg, #70c098, #50a078);
  --border-color: rgba(70,150,110,0.3);
  --border-light: rgba(70,150,110,0.2);
  --shadow-sm: 0 2px 12px rgba(50,130,90,0.12), 0 1px 4px rgba(50,130,90,0.06);
  --shadow-md: 0 4px 24px rgba(50,130,90,0.12), 0 2px 8px rgba(50,130,90,0.08);
  --shadow-lg: 0 8px 32px rgba(50,130,90,0.15), 0 4px 16px rgba(50,130,90,0.08);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #70c098, #50a078);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(236,244,238,0.92);
  --watermark-color: rgba(80,160,120,0.12);
}

[data-color-style="haitianxia"] {
  --bg-primary: #f8eee8;
  --bg-secondary: #f0e2dc;
  --bg-tertiary: #e8d6d0;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #5a2820;
  --text-secondary: #8a5048;
  --text-muted: #b88078;
  --text-faint: #d0b0a8;
  --accent-1: #d08068;
  --accent-2: #e8a088;
  --accent-gradient: linear-gradient(135deg, #e8a088, #d08068);
  --border-color: rgba(200,130,110,0.3);
  --border-light: rgba(200,130,110,0.2);
  --shadow-sm: 0 2px 12px rgba(180,100,80,0.12), 0 1px 4px rgba(180,100,80,0.06);
  --shadow-md: 0 4px 24px rgba(180,100,80,0.12), 0 2px 8px rgba(180,100,80,0.08);
  --shadow-lg: 0 8px 32px rgba(180,100,80,0.15), 0 4px 16px rgba(180,100,80,0.08);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #e8a088, #d08068);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(248,238,232,0.92);
  --watermark-color: rgba(208,128,104,0.12);
}


[data-color-style="vercel"] {
  --bg-primary: #f0faf0;
  --bg-secondary: #e8f5e8;
  --bg-tertiary: #ddf0dd;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #205030;
  --text-secondary: #408050;
  --text-muted: #70a870;
  --text-faint: #a0c8a0;
  --accent-1: #50a870;
  --accent-2: #60c080;
  --accent-gradient: linear-gradient(135deg, #60c080, #50a870);
  --border-color: rgba(80,160,100,0.3);
  --border-light: rgba(80,160,100,0.2);
  --shadow-sm: 0 2px 12px rgba(60,140,80,0.12), 0 1px 4px rgba(60,140,80,0.06);
  --shadow-md: 0 4px 24px rgba(60,140,80,0.12), 0 2px 8px rgba(60,140,80,0.08);
  --shadow-lg: 0 8px 32px rgba(60,140,80,0.15), 0 4px 16px rgba(60,140,80,0.08);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #60c080, #50a870);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(240,250,240,0.92);
}

[data-color-style="ultraviolet"] {
  --bg-primary: #fff0f8;
  --bg-secondary: #ffe8f4;
  --bg-tertiary: #ffddf0;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #7a2050;
  --text-secondary: #a05080;
  --text-muted: #c080a8;
  --text-faint: #d8a8c8;
  --accent-1: #d060c0;
  --accent-2: #e070d0;
  --accent-gradient: linear-gradient(135deg, #e070d0, #d060c0);
  --border-color: rgba(200,80,160,0.3);
  --border-light: rgba(200,80,160,0.2);
  --shadow-sm: 0 2px 12px rgba(180,60,140,0.12), 0 1px 4px rgba(180,60,140,0.06);
  --shadow-md: 0 4px 24px rgba(180,60,140,0.12), 0 2px 8px rgba(180,60,140,0.08);
  --shadow-lg: 0 8px 32px rgba(180,60,140,0.15), 0 4px 16px rgba(180,60,140,0.08);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #e070d0, #d060c0);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(255,240,248,0.92);
}

[data-color-style="nebula"] {
  --bg-primary: #f0eeff;
  --bg-secondary: #e8e4ff;
  --bg-tertiary: #ddd8ff;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.85);
  --text-primary: #3a3080;
  --text-secondary: #5a50a0;
  --text-muted: #8a80c0;
  --text-faint: #b0a8d8;
  --accent-1: #7060d0;
  --accent-2: #8878e0;
  --accent-gradient: linear-gradient(135deg, #8878e0, #7060d0);
  --border-color: rgba(120,100,200,0.3);
  --border-light: rgba(120,100,200,0.2);
  --shadow-sm: 0 2px 12px rgba(100,80,180,0.12), 0 1px 4px rgba(100,80,180,0.06);
  --shadow-md: 0 4px 24px rgba(100,80,180,0.12), 0 2px 8px rgba(100,80,180,0.08);
  --shadow-lg: 0 8px 32px rgba(100,80,180,0.15), 0 4px 16px rgba(100,80,180,0.08);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #8878e0, #7060d0);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(240,238,255,0.92);
}






.intro-stars::before {
  content: '✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧';
  position: absolute;
  top: 0;
  font-size: 14px;
  color: rgba(212,160,192,0.15);
  letter-spacing: 1.5em;
  white-space: nowrap;
  animation: starFloat 25s linear infinite;
}
.intro-stars::after {
  content: '✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦';
  position: absolute;
  top: 40%;
  font-size: 10px;
  color: rgba(212,160,192,0.1);
  letter-spacing: 2em;
  white-space: nowrap;
  animation: starFloat 30s linear infinite;
  animation-delay: -10s;
}
.intro-stars span {
  position: absolute;
  display: block;
  width: 3px; height: 3px;
  background: var(--accent-1);
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.6; transform: scale(1.2); }
}
.intro-bg-pattern {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212,160,192,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(180,140,200,0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(232,180,192,0.04) 0%, transparent 60%);
  animation: bgDrift 20s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.03) translate(-0.5%, -0.5%); }
}
.intro-top-nav.visible { opacity: 1; transform: translateY(0); }
.intro-nav-btn {
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 40px; height: 40px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-spring);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.intro-nav-btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.intro-nav-btn:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.intro-nav-btn:hover::before { opacity: 1; }
.intro-nav-btn:active { transform: scale(0.9) translateY(0); }
.intro-skip-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto; height: auto;
  font-size: 14px;
  color: var(--text-muted);
  box-shadow: none;
  padding: 8px 12px;
}
.intro-skip-btn:hover { color: var(--text-primary); transform: none; box-shadow: none; }
.intro-skip-btn::before { display: none; }
.intro-skip-btn { font-size: 14px; color: var(--text-muted); }

.intro-slides {
  position: absolute; inset: 0;
  z-index: 5;
  overflow: hidden;
}
.intro-slide {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.intro-slide.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.intro-slide.exit-left { opacity: 0; transform: translateX(-100%); }
.intro-slide.exit-right { opacity: 0; transform: translateX(100%); }

.intro-slide-inner {
  text-align: center;
  padding: 0 48px;
  max-width: 420px;
  animation: introContentIn 0.6s 0.15s both cubic-bezier(0.4,0,0.2,1);
}
@keyframes introContentIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.intro-icon {
  width: 110px; height: 110px;
  margin: 0 auto 32px;
  border-radius: 32px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-1);
  box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  position: relative;
  transition: transform var(--transition-spring), box-shadow var(--transition-normal);
}
.intro-slide.active .intro-icon {
  animation: iconReveal 0.7s var(--bounce-in) both;
}
@keyframes iconReveal {
  from { transform: scale(0.85) rotate(-5deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
.intro-icon svg { opacity: 0.85; }
.splash-icon { border-radius: 50%; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); }
.icon-star { font-size: 42px; color: var(--accent-1); }

/* 🐱 颜文字图标修复：圆形 + 居中 */
.welcome-icon {
  border-radius: 50% !important;
  background: rgba(255,255,255,0.9);
  width: 120px; height: 120px;
}
.welcome-emoji-big {
  font-size: 32px;
  line-height: 1.3;
  text-align: center;
  color: var(--text-primary);
}

.intro-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.intro-slide.active .intro-title {
  animation: titleReveal 0.6s 0.2s both cubic-bezier(0.32,0.72,0,1);
}
@keyframes titleReveal {
  from { opacity: 0; transform: translateY(12px) scale(0.97); letter-spacing: 0.1em; }
  to   { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.04em; }
}
.intro-divider {
  width: 40px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent-1), transparent);
  margin: 0 auto 14px;
}
.intro-subtitle { font-size: 15px; color: var(--text-muted); font-style: italic; line-height: 1.6; }
.intro-desc { font-size: 15px; color: var(--text-secondary); line-height: 2; }
.intro-slide.active .intro-desc {
  animation: descReveal 0.6s 0.3s both cubic-bezier(0.32,0.72,0,1);
}
@keyframes descReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.intro-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px calc(env(safe-area-inset-bottom, 16px) + 32px);
}
.intro-dots { display: flex; gap: 10px; margin-bottom: 28px; }
.intro-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(212,180,200,0.3);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.intro-dot.active {
  width: 28px;
  border-radius: 5px;
  background: var(--accent-gradient);
  box-shadow: 0 2px 10px rgba(212,160,192,0.4);
}
.intro-next-btn {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border: none; border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff; font-size: 16px; font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(212,160,192,0.45), 0 0 0 0 rgba(212,160,192,0.3);
  transition: width 0.5s cubic-bezier(0.32,0.72,0,1),
              border-radius 0.5s cubic-bezier(0.32,0.72,0,1),
              box-shadow 0.3s, transform 0.2s;
  overflow: hidden; position: relative;
}
.intro-next-btn:hover { box-shadow: 0 8px 32px rgba(212,160,192,0.55), 0 0 0 4px rgba(212,160,192,0.15); }
.intro-next-btn:active { transform: scale(0.92); }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(212,160,192,0.45); }
  50% { box-shadow: 0 8px 32px rgba(212,160,192,0.6), 0 0 0 6px rgba(212,160,192,0.1); }
}
.intro-next-btn:active { transform: scale(0.95); }
.intro-next-btn.expanded { width: 200px; border-radius: 29px; }
.intro-next-btn.expanded .btn-arrow { opacity: 0; width: 0; margin: 0; }
.intro-next-btn.expanded .btn-text { opacity: 1; max-width: 160px; }
.btn-arrow { width: 20px; height: 20px; flex-shrink: 0; transition: opacity 0.3s, width 0.3s, margin 0.3s; }
.btn-text {
  position: absolute; opacity: 0; max-width: 0; overflow: hidden;
  white-space: nowrap; font-size: 16px; font-weight: 500;
  letter-spacing: 0.04em; transition: opacity 0.3s 0.1s, max-width 0.3s;
}

/* ========== APP LAYOUT ========== */
#app-layout {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#app-layout.visible { display: flex; }

/* ========== SIDEBAR ========== */
#sidebar {
  width: var(--sidebar-width); min-width: var(--sidebar-width); height: 100%;
  background: var(--sidebar-bg);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column;
  z-index: 30;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
  overflow: hidden;
}
#sidebar.collapsed { transform: translateX(calc(-1 * var(--sidebar-width))); opacity: 0; pointer-events: none; min-width: 0; width: 0; flex: 0 0 0; }
.sidebar-header {
  display: flex; gap: 8px;
  padding: calc(env(safe-area-inset-top, 12px) + 12px) 12px 8px;
  border-bottom: 1px solid var(--border-light);
}
.sidebar-btn { border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: inherit; font-size: 13px; cursor: pointer; transition: all var(--transition-fast); }
.sidebar-btn.primary { flex: 1; padding: 10px 0; background: var(--accent-gradient); color: #fff; font-weight: 500; border: none; box-shadow: var(--shadow-sm); }
.sidebar-btn.primary:active { transform: scale(0.97); }
.sidebar-btn.icon-btn {
  width: 40px; height: 40px;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-spring);
  position: relative;
  overflow: hidden;
}
.sidebar-btn.icon-btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.sidebar-btn.icon-btn:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.sidebar-btn.icon-btn:hover::before { opacity: 1; }
.sidebar-btn.icon-btn:active { transform: scale(0.9) translateY(0); }
.sidebar-btn.text-btn { background: transparent; border: none; color: var(--text-muted); padding: 8px 4px; font-size: 12px; }
.sidebar-btn.text-btn:hover { color: var(--text-primary); }
#sidebar-diary {
  width: calc(100% - 24px); margin: 4px 12px 0;
  padding: 5px 0; font-size: 12px;
  letter-spacing: 0.08em;
  position: relative;
}
#sidebar-diary::before {
  content: "✦";
  position: absolute; left: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px; opacity: 0.7;
  animation: starFloat 4s ease-in-out infinite;
}
#sidebar-diary::after {
  content: "✦";
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px; opacity: 0.7;
  animation: starFloat 4s ease-in-out infinite 2s;
}
.sidebar-search { padding: 8px 12px; }
.sidebar-field,
.sidebar-conv-item {
  backdrop-filter: blur(8px);
}

.sidebar-field { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; background: var(--bg-card); color: var(--text-primary); outline: none; transition: border-color var(--transition-fast); }
.sidebar-field:focus { border-color: var(--accent-1); }
.sidebar-conv-list { flex: 1; overflow-y: auto; padding: 4px 8px; }
.sidebar-conv-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast); margin-bottom: 2px; }
.sidebar-conv-item:hover { background: rgba(212,160,192,0.1); }
.sidebar-conv-item.active { background: rgba(212,160,192,0.18); border: 1px solid var(--border-light); }
.sidebar-conv-item .conv-title { flex: 1; font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-conv-item .conv-date { font-size: 10px; color: var(--text-faint); white-space: nowrap; }
.sidebar-conv-item .conv-del { font-size: 14px; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px; opacity: 0; transition: opacity var(--transition-fast); }
.sidebar-conv-item:hover .conv-del { opacity: 1; }
.sidebar-conv-item .conv-del:hover { color: #e06060; background: rgba(224,96,96,0.1); }
.sidebar-footer { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--border-light); }
/* ========== 嵌入式主题选择器 ========== */
.theme-selector {
  position: relative;
  padding: 4px 12px;
  z-index: 35;
}
.theme-current {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  position: relative;
}
.theme-current:hover {
  border-color: var(--accent-1);
  background: var(--bg-input);
}
.theme-current:active {
  transform: scale(0.98);
}
.theme-current-icon {
  font-size: 14px;
  line-height: 1;
}
.theme-current-label {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}
.theme-current-arrow {
  font-size: 8px;
  color: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
}
.theme-selector.open .theme-current-arrow {
  transform: rotate(180deg);
}
.theme-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 12px;
  right: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.32,0.72,0,1);
  max-height: 320px;
  overflow-y: auto;
}
.theme-selector.open .theme-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}
.theme-option:hover {
  background: rgba(212,160,192,0.1);
  color: var(--text-primary);
  padding-left: 18px;
}
.theme-option:active {
  transform: scale(0.98);
}
.theme-option.active {
  color: var(--accent-1);
  background: rgba(212,160,192,0.12);
  border-left-color: var(--accent-1);
  font-weight: 600;
}
.theme-option:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

/* ========== CHAT SCREEN ========== */
#chat-screen { flex: 1; height: 100%; display: flex; flex-direction: column; position: relative; background: var(--bg-primary); transition: background var(--transition-slow); }

/* ✨ 对话页面星星点缀 */
.chat-stars {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.chat-stars::before, .chat-stars::after {
  content: '✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧';
  position: absolute;
  font-size: 11px;
  color: rgba(212,160,192,0.06);
  letter-spacing: 2em;
  white-space: nowrap;
  animation: starFloat 25s linear infinite;
}
.chat-stars::after {
  top: 60%;
  font-size: 8px;
  color: rgba(212,160,192,0.04);
  animation-duration: 35s;
  animation-delay: -15s;
}

.chat-watermark {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
  display: flex; flex-direction: column;
}
.watermark-row {
  white-space: nowrap; font-size: 13px;
  color: rgba(212,160,192,0.5);
  letter-spacing: 0.08em; line-height: 2.7em;
  animation: wmScroll 22s linear infinite;
  will-change: transform;
}
.watermark-row:nth-child(even) { animation-name: wmScrollR; animation-duration: 26s; }


/* ========== 多主题系统 ========== */
/* 主题1: 原版玫瑰金（默认）— 已在 :root 中定义 */

/* 主题2: 星云紫蓝 (NC-01 inspired) */


/* 主题3: 紫外光 (NC-04 inspired) */


/* 主题4: VERCEL清爽 (NC-09 inspired) */




/* ===== Dark Mode + Color Theme Combinations ===== */
[data-theme="dark"][data-color-style="nebula"] {
  --bg-primary: #0a0820;
  --bg-secondary: #121030;
  --bg-tertiary: #080620;
  --bg-card: rgba(18,14,40,0.8);
  --bg-input: rgba(18,14,40,0.92);
  --text-primary: #c8c0f0;
  --text-secondary: #a090d8;
  --text-muted: #8070b0;
  --text-faint: #605090;
  --accent-1: #8070e0;
  --accent-2: #7060c8;
  --accent-gradient: linear-gradient(135deg, #8070e0, #6050b8);
  --border-color: rgba(80,60,180,0.4);
  --border-light: rgba(80,60,180,0.25);
  --bot-msg-bg: rgba(20,16,45,0.88);
  --user-msg-bg: linear-gradient(135deg, #8070e0, #6050b8);
  --sidebar-bg: rgba(10,8,32,0.95);
}

[data-theme="dark"][data-color-style="ultraviolet"] {
  --bg-primary: #1a0820;
  --bg-secondary: #2a1030;
  --bg-tertiary: #120418;
  --bg-card: rgba(30,10,35,0.8);
  --bg-input: rgba(30,10,35,0.92);
  --text-primary: #f0c0e8;
  --text-secondary: #d098c8;
  --text-muted: #b070a0;
  --text-faint: #905080;
  --accent-1: #e060d0;
  --accent-2: #c850b8;
  --accent-gradient: linear-gradient(135deg, #e060d0, #c040b0);
  --border-color: rgba(200,60,160,0.4);
  --border-light: rgba(200,60,160,0.25);
  --bot-msg-bg: rgba(35,12,40,0.88);
  --user-msg-bg: linear-gradient(135deg, #e060d0, #c040b0);
  --sidebar-bg: rgba(26,8,32,0.95);
}

[data-theme="dark"][data-color-style="vercel"] {
  --bg-primary: #0a1a0a;
  --bg-secondary: #122812;
  --bg-tertiary: #081408;
  --bg-card: rgba(14,35,14,0.8);
  --bg-input: rgba(14,35,14,0.92);
  --text-primary: #c0e8c0;
  --text-secondary: #90c890;
  --text-muted: #60a868;
  --text-faint: #408848;
  --accent-1: #50c070;
  --accent-2: #40a860;
  --accent-gradient: linear-gradient(135deg, #50c070, #40a060);
  --border-color: rgba(40,160,60,0.4);
  --border-light: rgba(40,160,60,0.25);
  --bot-msg-bg: rgba(14,40,18,0.88);
  --user-msg-bg: linear-gradient(135deg, #50c070, #40a060);
  --sidebar-bg: rgba(10,26,10,0.95);
}

[data-theme="dark"][data-color-style="rose"] {
  --bg-primary: #1a1420;
  --bg-secondary: #2a1a2a;
  --bg-tertiary: #1e1828;
  --bg-card: rgba(40,30,45,0.75);
  --bg-input: rgba(40,30,45,0.88);
  --text-primary: #e8d0d8;
  --text-secondary: #c9a8b8;
  --text-muted: #a07888;
  --text-faint: #7a5868;
  --accent-1: #c890b0;
  --accent-2: #b87098;
  --accent-gradient: linear-gradient(135deg, #b87098, #c890b0);
  --border-color: rgba(180,140,160,0.35);
  --border-light: rgba(180,140,160,0.2);
  --bot-msg-bg: rgba(40,30,45,0.88);
  --user-msg-bg: linear-gradient(135deg, #b87098, #a05880);
  --sidebar-bg: rgba(30,20,35,0.92);
}








/* ===== 国风传统色 · 暗色模式 ===== */
[data-theme="dark"][data-color-style="lvchen"] {
  --bg-primary: #0e1a0c;
  --bg-secondary: #1a2a18;
  --bg-tertiary: #0e140c;
  --bg-card: rgba(14,28,12,0.8);
  --bg-input: rgba(14,28,12,0.92);
  --text-primary: #b8d8a8;
  --text-secondary: #80b070;
  --text-muted: #589048;
  --text-faint: #387028;
  --accent-1: #5aaa40;
  --accent-2: #4a8a30;
  --accent-gradient: linear-gradient(135deg, #4a8a30, #5aaa40);
  --border-color: rgba(60,140,40,0.35);
  --border-light: rgba(60,140,40,0.25);
  --bot-msg-bg: rgba(14,30,14,0.88);
  --user-msg-bg: linear-gradient(135deg, #4a8a30, #5aaa40);
  --sidebar-bg: rgba(14,26,12,0.95);
}

[data-theme="dark"][data-color-style="dingxiang"] {
  --bg-primary: #1a0e28;
  --bg-secondary: #2a1a38;
  --bg-tertiary: #140e20;
  --bg-card: rgba(28,14,40,0.8);
  --bg-input: rgba(28,14,40,0.92);
  --text-primary: #d0b0e8;
  --text-secondary: #a080c8;
  --text-muted: #8060a8;
  --text-faint: #604088;
  --accent-1: #b080d8;
  --accent-2: #a068c8;
  --accent-gradient: linear-gradient(135deg, #a068c8, #b080d8);
  --border-color: rgba(160,100,200,0.35);
  --border-light: rgba(160,100,200,0.25);
  --bot-msg-bg: rgba(30,16,45,0.88);
  --user-msg-bg: linear-gradient(135deg, #a068c8, #b080d8);
  --sidebar-bg: rgba(26,14,40,0.95);
}

[data-theme="dark"][data-color-style="tianpiao"] {
  --bg-primary: #0a1620;
  --bg-secondary: #142230;
  --bg-tertiary: #0a1218;
  --bg-card: rgba(10,24,35,0.8);
  --bg-input: rgba(10,24,35,0.92);
  --text-primary: #a0c8d8;
  --text-secondary: #70a0b8;
  --text-muted: #508098;
  --text-faint: #386078;
  --accent-1: #50a0c0;
  --accent-2: #4090b0;
  --accent-gradient: linear-gradient(135deg, #4090b0, #50a0c0);
  --border-color: rgba(40,140,180,0.35);
  --border-light: rgba(40,140,180,0.25);
  --bot-msg-bg: rgba(10,26,38,0.88);
  --user-msg-bg: linear-gradient(135deg, #4090b0, #50a0c0);
  --sidebar-bg: rgba(10,22,32,0.95);
}

[data-theme="dark"][data-color-style="daizhe"] {
  --bg-primary: #1a0e08;
  --bg-secondary: #2a1a10;
  --bg-tertiary: #140a08;
  --bg-card: rgba(35,16,8,0.8);
  --bg-input: rgba(35,16,8,0.92);
  --text-primary: #d8b8a0;
  --text-secondary: #b08868;
  --text-muted: #906848;
  --text-faint: #704828;
  --accent-1: #c08050;
  --accent-2: #b07040;
  --accent-gradient: linear-gradient(135deg, #b07040, #c08050);
  --border-color: rgba(180,100,50,0.35);
  --border-light: rgba(180,100,50,0.25);
  --bot-msg-bg: rgba(40,18,10,0.88);
  --user-msg-bg: linear-gradient(135deg, #b07040, #c08050);
  --sidebar-bg: rgba(26,14,8,0.95);
}

[data-theme="dark"][data-color-style="oubi"] {
  --bg-primary: #0a1a0e;
  --bg-secondary: #142a18;
  --bg-tertiary: #0a140c;
  --bg-card: rgba(10,28,14,0.8);
  --bg-input: rgba(10,28,14,0.92);
  --text-primary: #a0d0b0;
  --text-secondary: #70a880;
  --text-muted: #508868;
  --text-faint: #386848;
  --accent-1: #50b080;
  --accent-2: #40a070;
  --accent-gradient: linear-gradient(135deg, #40a070, #50b080);
  --border-color: rgba(40,160,100,0.35);
  --border-light: rgba(40,160,100,0.25);
  --bot-msg-bg: rgba(10,30,16,0.88);
  --user-msg-bg: linear-gradient(135deg, #40a070, #50b080);
  --sidebar-bg: rgba(10,26,14,0.95);
}

[data-theme="dark"][data-color-style="haitianxia"] {
  --bg-primary: #1e0e0a;
  --bg-secondary: #2e1a12;
  --bg-tertiary: #180a08;
  --bg-card: rgba(38,14,8,0.8);
  --bg-input: rgba(38,14,8,0.92);
  --text-primary: #e0b8a8;
  --text-secondary: #c08878;
  --text-muted: #a06858;
  --text-faint: #804838;
  --accent-1: #d08068;
  --accent-2: #c07058;
  --accent-gradient: linear-gradient(135deg, #c07058, #d08068);
  --border-color: rgba(200,100,70,0.35);
  --border-light: rgba(200,100,70,0.25);
  --bot-msg-bg: rgba(42,16,10,0.88);
  --user-msg-bg: linear-gradient(135deg, #c07058, #d08068);
  --sidebar-bg: rgba(30,14,10,0.95);
}


/* ===== 主题细节增强：跟随主题色变化 ===== */

/* 侧栏选中项高亮 */
[data-color-style="lvchen"] .sidebar-conv-item.active { 
  background: rgba(74,138,56,0.15) !important; 
  border-color: rgba(74,138,56,0.3) !important;
  box-shadow: inset 3px 0 0 rgba(74,138,56,0.5);
}
[data-color-style="dingxiang"] .sidebar-conv-item.active { 
  background: rgba(176,128,208,0.15) !important; 
  border-color: rgba(176,128,208,0.3) !important;
  box-shadow: inset 3px 0 0 rgba(176,128,208,0.5);
}
[data-color-style="tianpiao"] .sidebar-conv-item.active { 
  background: rgba(80,144,176,0.15) !important; 
  border-color: rgba(80,144,176,0.3) !important;
  box-shadow: inset 3px 0 0 rgba(80,144,176,0.5);
}
[data-color-style="daizhe"] .sidebar-conv-item.active { 
  background: rgba(176,112,72,0.15) !important; 
  border-color: rgba(176,112,72,0.3) !important;
  box-shadow: inset 3px 0 0 rgba(176,112,72,0.5);
}
[data-color-style="oubi"] .sidebar-conv-item.active { 
  background: rgba(80,160,120,0.15) !important; 
  border-color: rgba(80,160,120,0.3) !important;
  box-shadow: inset 3px 0 0 rgba(80,160,120,0.5);
}
[data-color-style="haitianxia"] .sidebar-conv-item.active { 
  background: rgba(208,128,104,0.15) !important; 
  border-color: rgba(208,128,104,0.3) !important;
  box-shadow: inset 3px 0 0 rgba(208,128,104,0.5);
}

/* 按钮悬停跟随主题色 */
[data-color-style="lvchen"] .send-btn.ready:hover { box-shadow: 0 4px 20px rgba(74,138,56,0.45), 0 0 0 4px rgba(74,138,56,0.15); }
[data-color-style="dingxiang"] .send-btn.ready:hover { box-shadow: 0 4px 20px rgba(176,128,208,0.45), 0 0 0 4px rgba(176,128,208,0.15); }
[data-color-style="tianpiao"] .send-btn.ready:hover { box-shadow: 0 4px 20px rgba(80,144,176,0.45), 0 0 0 4px rgba(80,144,176,0.15); }
[data-color-style="daizhe"] .send-btn.ready:hover { box-shadow: 0 4px 20px rgba(176,112,72,0.45), 0 0 0 4px rgba(176,112,72,0.15); }
[data-color-style="oubi"] .send-btn.ready:hover { box-shadow: 0 4px 20px rgba(80,160,120,0.45), 0 0 0 4px rgba(80,160,120,0.15); }
[data-color-style="haitianxia"] .send-btn.ready:hover { box-shadow: 0 4px 20px rgba(208,128,104,0.45), 0 0 0 4px rgba(208,128,104,0.15); }

/* 输入框聚焦边框 */
[data-color-style="lvchen"] .field-input:focus,
[data-color-style="lvchen"] .sidebar-field:focus { border-color: #4a8a38 !important; }
[data-color-style="dingxiang"] .field-input:focus,
[data-color-style="dingxiang"] .sidebar-field:focus { border-color: #b080d0 !important; }
[data-color-style="tianpiao"] .field-input:focus,
[data-color-style="tianpiao"] .sidebar-field:focus { border-color: #5090b0 !important; }
[data-color-style="daizhe"] .field-input:focus,
[data-color-style="daizhe"] .sidebar-field:focus { border-color: #b07048 !important; }
[data-color-style="oubi"] .field-input:focus,
[data-color-style="oubi"] .sidebar-field:focus { border-color: #50a078 !important; }
[data-color-style="haitianxia"] .field-input:focus,
[data-color-style="haitianxia"] .sidebar-field:focus { border-color: #d08068 !important; }

/* 顶部导航栏主题色 */

/* 模型徽标跟随主题 */
[data-color-style="lvchen"] .model-badge { background: rgba(74,138,56,0.12) !important; color: #4a8a38 !important; }
[data-color-style="dingxiang"] .model-badge { background: rgba(176,128,208,0.12) !important; color: #b080d0 !important; }
[data-color-style="tianpiao"] .model-badge { background: rgba(80,144,176,0.12) !important; color: #5090b0 !important; }
[data-color-style="daizhe"] .model-badge { background: rgba(176,112,72,0.12) !important; color: #b07048 !important; }
[data-color-style="oubi"] .model-badge { background: rgba(80,160,120,0.12) !important; color: #50a078 !important; }
[data-color-style="haitianxia"] .model-badge { background: rgba(208,128,104,0.12) !important; color: #d08068 !important; }

/* 主题选择器 */
}

/* 暗色模式水印可见度 */
[data-theme="dark"] .watermark-row {
  color: rgba(180,140,160,0.1);
}

/* 暗色模式星云背景 */
[data-theme="dark"] .chat-bg-pattern {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(212,160,192,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(180,140,200,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(232,180,192,0.04) 0%, transparent 60%);
  animation: nebulaDrift 30s ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.05) translate(-1%, -1%); }
}

/* ========== 多主题系统 ========== */
/* 主题1: 原版玫瑰金（默认）— 已在 :root 中定义 */

/* 主题2: 星云紫蓝 (NC-01 inspired) */
[data-theme="nebula"] {
  --bg-primary: #0f0a1a;
  --bg-secondary: #1a1030;
  --bg-tertiary: #251840;
  --bg-card: rgba(20,12,40,0.75);
  --bg-card-solid: #1a1030;
  --bg-input: rgba(20,12,40,0.88);
  --text-primary: #d0c8e8;
  --text-secondary: #a898c8;
  --text-muted: #8870a8;
  --text-faint: #685088;
  --accent-1: #8870d0;
  --accent-2: #7060b8;
  --accent-gradient: linear-gradient(135deg, #8870d0, #6050a8);
  --border-color: rgba(100,80,160,0.35);
  --border-light: rgba(100,80,160,0.2);
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.2);
  --bot-msg-bg: rgba(30,20,50,0.88);
  --user-msg-bg: linear-gradient(135deg, #8870d0, #6050a8);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(15,10,30,0.92);
}

/* 主题3: 紫外光 (NC-04 inspired) — 适合潮流暗色 */
[data-theme="ultraviolet"] {
  --bg-primary: #1a0a1e;
  --bg-secondary: #2a1030;
  --bg-tertiary: #381840;
  --bg-card: rgba(30,12,35,0.75);
  --bg-card-solid: #2a1030;
  --bg-input: rgba(30,12,35,0.88);
  --text-primary: #e8c8e0;
  --text-secondary: #c8a0b8;
  --text-muted: #a07890;
  --text-faint: #785870;
  --accent-1: #d060c0;
  --accent-2: #b850a8;
  --accent-gradient: linear-gradient(135deg, #d060c0, #a84090);
  --border-color: rgba(180,80,160,0.35);
  --border-light: rgba(180,80,160,0.2);
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.2);
  --bot-msg-bg: rgba(35,15,40,0.88);
  --user-msg-bg: linear-gradient(135deg, #d060c0, #a84090);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(26,10,30,0.92);
}

/* 主题4: VERCEL清爽 (NC-09 inspired) — 适合浅色模式 */
[data-theme="vercel"] {
  --bg-primary: #f8faf8;
  --bg-secondary: #f0f4f0;
  --bg-tertiary: #e8f0e8;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(255,255,255,0.88);
  --text-primary: #2a3a3a;
  --text-secondary: #5a7a6a;
  --text-muted: #8aaa8a;
  --text-faint: #aac8aa;
  --accent-1: #70b890;
  --accent-2: #90d0a8;
  --accent-gradient: linear-gradient(135deg, #90d0a8, #70b890);
  --border-color: rgba(180,210,180,0.35);
  --border-light: rgba(180,210,180,0.25);
  --shadow-sm: 0 2px 12px rgba(120,180,140,0.15), 0 1px 4px rgba(120,180,140,0.08);
  --shadow-md: 0 4px 24px rgba(120,180,140,0.15), 0 2px 8px rgba(120,180,140,0.1);
  --shadow-lg: 0 8px 32px rgba(120,180,140,0.18), 0 4px 16px rgba(120,180,140,0.1);
  --bot-msg-bg: rgba(255,255,255,0.88);
  --user-msg-bg: linear-gradient(135deg, #90d0a8, #70b890);
  --user-msg-text: #fff;
  --sidebar-bg: rgba(255,255,255,0.85);
  --watermark-color: rgba(120,180,140,0.15);
}@keyframes wmScroll  { from { transform: translateX(0);   } to { transform: translateX(-50%); } }
@keyframes wmScrollR { from { transform: translateX(-50%); } to { transform: translateX(0);   } }

.chat-bg-pattern {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(212,160,192,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(180,140,200,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(232,180,192,0.04) 0%, transparent 60%);
  animation: nebulaDrift 30s ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.05) translate(-1%, -1%); }
}

#chat-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 12px) + 8px) 16px 8px;
  background: transparent;
  border: none;
  pointer-events: none;
}
.topbar-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-spring);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
}
.topbar-btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.topbar-btn:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.topbar-btn:hover::before { opacity: 1; }
.topbar-btn:active { transform: scale(0.9) translateY(0); }
.topbar-title { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.04em; }

#chat-messages { flex: 1; position: relative; z-index: 5; overflow-y: auto; padding: 52px 18px 8px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

.chat-hero { position: relative; z-index: 10; text-align: center; padding: 0; flex-shrink: 0; }
.hero-brand { font-size: 10px; letter-spacing: 0.28em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; font-weight: 400; }
.hero-title { font-size: 24px; font-weight: 400; color: var(--text-primary); margin: 0; letter-spacing: 0.06em; line-height: 1.3; transition: transform var(--transition-spring); }
.hero-title:hover { transform: translateY(-1px); }
.hero-divider { width: 44px; height: 1.2px; background: linear-gradient(90deg, transparent, var(--accent-1), transparent); margin: 10px auto 0; }
.hero-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 8px; font-style: italic; letter-spacing: 0.03em; transition: transform var(--transition-spring); }
.hero-subtitle:hover { transform: translateY(-1px); }
.clear-chat-btn { margin-top: 8px; font-size: 11px; color: var(--text-faint); background: none; border: 1px solid var(--border-color); border-radius: 20px; padding: 3px 14px; cursor: pointer; font-family: inherit; transition: background var(--transition-fast), color var(--transition-fast); }
.clear-chat-btn:hover { background: rgba(212,160,192,0.12); color: var(--text-secondary); }

.welcome-msg { display: flex; justify-content: center; padding: 12px 8px 4px; animation: msgIn 0.4s both; }
.welcome-center { text-align: center; max-width: 320px; }
.welcome-emoji { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; letter-spacing: 0.05em; }
.welcome-text { font-size: 14px; color: var(--text-secondary); line-height: 2.2; font-style: italic; }

.msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; animation: msgIn 0.35s both; position: relative; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }

@keyframes msgIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 🕐 消息时间戳 */
.msg-time {
  font-size: 10px;
  color: var(--text-faint);
  text-align: right;
  margin-top: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.msg-row:hover .msg-time { opacity: 1; }

/* 🏷️ 模型徽标 */
.model-badge {
  display: inline-block;
  font-size: 9px;
  font-family: var(--font-mono);
  background: rgba(212,160,192,0.12);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* 消息操作按钮 */
.msg-row .msg-actions {
  position: absolute; top: -22px; right: 0;
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.msg-row:hover .msg-actions { opacity: 1; }
.msg-row .msg-actions button {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  transition: all var(--transition-fast);
}
.msg-row .msg-actions button:hover { color: var(--text-primary); background: var(--bg-input); }

.bot-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; flex-shrink: 0; }
.bot-msg, .msg-bubble {
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.75;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
}
.bot-msg { transition: transform var(--transition-spring), box-shadow var(--transition-normal); }
.bot-msg:hover { transform: translateY(-1px);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 1px rgba(255,255,255,0.08);
}
.bot-msg::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(212,160,192,0.15), transparent 40%, rgba(212,160,192,0.05));
  pointer-events: none;
  z-index: -1;
}
.msg-bubble.user-msg { transition: transform var(--transition-spring), box-shadow var(--transition-normal);
  background: linear-gradient(135deg, #e8b4c0, #d4a0c0, #c890b0);
  border-radius: 20px 20px 4px 20px;
  color: var(--user-msg-text);
  box-shadow: 0 4px 20px rgba(212,160,192,0.35), 0 0 0 1px rgba(255,255,255,0.15), inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-normal);
}
.msg-bubble.user-msg:active { transform: scale(0.98); }
.msg-bubble.user-msg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 100%);
  pointer-events: none;
  border-radius: inherit;
}

.bot-msg p { margin-bottom: 8px; transition: transform var(--transition-spring); }
.bot-msg p:hover { transform: translateY(-1px); }
.bot-msg p:last-child { margin-bottom: 0; }
.bot-msg ul, .bot-msg ol { padding-left: 20px; margin-bottom: 8px; }
.bot-msg li { margin-bottom: 4px; }
.bot-msg blockquote { border-left: 3px solid var(--accent-1); padding-left: 12px; margin: 8px 0; color: var(--text-muted); font-style: italic; }
.bot-msg a { color: var(--accent-1); text-decoration: underline; }
.bot-msg a:hover { color: var(--accent-2); }

/* 🎨 情绪颜色渲染 */
.emotion-red    { color: #e06060 !important; font-weight: 500; }
.emotion-pink   { color: #d4a0c0 !important; font-style: italic; }
.emotion-blue   { color: #6090c0 !important; }
.emotion-green  { color: #60a060 !important; }
.emotion-purple { color: #a060c0 !important; }
.bot-msg hr { border: none; border-top: 1px solid var(--border-light); margin: 12px 0; }
.bot-msg table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 13px; }
.bot-msg th, .bot-msg td { border: 1px solid var(--border-color); padding: 6px 10px; text-align: left; }
.bot-msg th { background: rgba(212,160,192,0.1); font-weight: 600; }
.bot-msg code { font-family: var(--font-mono); font-size: 13px; background: rgba(212,160,192,0.12); padding: 2px 6px; border-radius: 4px; }
.bot-msg pre { margin: 10px 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); }
.bot-msg pre code { display: block; padding: 14px 16px; background: #1e1e2e; color: #cdd6f4; overflow-x: auto; font-size: 13px; line-height: 1.5; }

.typing-indicator { display: flex; gap: 6px; align-items: center; padding: 12px 18px; }
.typing-indicator span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-1); animation: dotPulse 1.2s ease-in-out infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }

.stream-status { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12px; color: var(--text-muted); animation: msgIn 0.3s both; }
.stream-dot { width: 6px; height: 6px; border-radius: 50%; background: #4caf50; animation: dotPulse 1s ease-in-out infinite; }
.stream-stop-btn { margin-left: auto; background: rgba(224,96,96,0.1); border: 1px solid rgba(224,96,96,0.3); border-radius: 6px; padding: 2px 10px; font-size: 11px; color: #e06060; cursor: pointer; font-family: inherit; }
.stream-stop-btn:active { background: rgba(224,96,96,0.2); }

/* 📍 滚动到底部按钮 */
.scroll-bottom-btn {
  position: absolute;
  bottom: 100px; right: 20px;
  z-index: 20;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-spring);
  animation: scrollBtnIn 0.4s var(--bounce-in) both;
}
@keyframes scrollBtnIn {
  from { transform: scale(0) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.scroll-bottom-btn:active { transform: scale(0.85); }
.scroll-bottom-btn:hover { background: var(--accent-gradient); color: #fff; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.scroll-bottom-btn:hover { background: var(--accent-gradient); color: #fff; }

#input-bar {
  position: relative; z-index: 10;
  padding: 4px 16px calc(env(safe-area-inset-bottom, 8px) + 10px);
  background: linear-gradient(to top, var(--bg-primary) 60%, transparent);
  transition: background var(--transition-slow);
}
.input-wrapper {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--bg-input);
  border-radius: 28px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 1px rgba(255,255,255,0.06);
  transition: all var(--transition-normal);
}
.input-wrapper:focus-within {
  border-color: var(--accent-1);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.08), 0 0 0 3px rgba(212,160,192,0.1);
}
#chat-input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; font-family: inherit; color: var(--text-primary); resize: none; line-height: 1.6; max-height: 160px; padding: 4px 0; }
.send-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(212,180,200,0.3);
  color: #fff;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.send-btn.ready {
  background: linear-gradient(135deg, #e8b4c0, #d4a0c0, #c890b0);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(212,160,192,0.35), 0 0 0 0 rgba(212,160,192,0.3);
  animation: auraPulse 3s ease-in-out infinite;
}
.send-btn.ready:active { transform: scale(0.88); }
.send-btn.ready:hover { box-shadow: 0 4px 24px rgba(212,160,192,0.5), 0 0 0 4px rgba(212,160,192,0.15); transform: translateY(-1px); }
@keyframes auraPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(212,160,192,0.35), 0 0 0 0 rgba(212,160,192,0.2); }
  50% { box-shadow: 0 4px 24px rgba(212,160,192,0.5), 0 0 0 8px rgba(212,160,192,0.08); }
}
.input-hint { text-align: center; font-size: 11px; color: var(--text-faint); margin-top: 8px; letter-spacing: 0.04em; }


/* ========== SETTINGS ========== */
#settings-screen { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; background: linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 35%, var(--bg-tertiary) 100%); }
#settings-screen.active { display: flex; }
#settings-header {
  position: relative; z-index: 10;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 12px) + 14px) 16px 12px;
}
.header-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-spring);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.header-btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.header-btn:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.header-btn:hover::before { opacity: 1; }
.header-btn:active { transform: scale(0.9) translateY(0); }
.header-btn svg {
  transition: transform var(--transition-spring);
}
.header-btn:hover svg {
  transform: translateX(-2px);
}
.header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.settings-body { flex: 1; position: relative; z-index: 5; overflow-y: auto; padding: 8px 22px 40px; -webkit-overflow-scrolling: touch; }
.section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 22px 20px;
  margin-bottom: 18px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-sm), inset 0 1px 1px rgba(255,255,255,0.05);
  transition: box-shadow var(--transition-normal);
}
.section:hover { box-shadow: var(--shadow-md), inset 0 1px 1px rgba(255,255,255,0.05); }
.section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; letter-spacing: 0.04em; transition: transform var(--transition-spring); cursor: default; }
.section-title:hover { transform: translateY(-1px); }
.field-label { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 7px; margin-top: 12px; transition: transform var(--transition-spring); cursor: default; }
.field-label:hover { transform: translateY(-1px); }
.field-label:first-of-type { margin-top: 0; }
.field-val { font-size: 12px; color: var(--accent-1); font-weight: 600; transition: transform var(--transition-spring); }
.field-val:hover { transform: translateY(-1px); }
.field-input { width: 100%; padding: 11px 14px; border: 1px solid var(--border-color); border-radius: 12px; font-size: 13.5px; font-family: inherit; color: var(--text-primary); background: var(--bg-card); outline: none; transition: border-color var(--transition-fast); }
.field-input:focus { border-color: var(--accent-1); }
.field-textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--border-color); border-radius: 12px; font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--bg-card); outline: none; resize: vertical; min-height: 80px; transition: border-color var(--transition-fast); }
.field-textarea:focus { border-color: var(--accent-1); }
.field-range { width: 100%; accent-color: var(--accent-1); margin: 6px 0 4px; }
.model-quick-fill { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.quick-fill-btn { flex: 1; min-width: 80px; padding: 8px 0; border: 1px solid var(--border-color); border-radius: 10px; background: rgba(255,255,255,0.7); font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.quick-fill-btn:hover { border-color: var(--accent-1); background: rgba(212,160,192,0.1); color: var(--text-primary); }
.save-btn { width: 100%; padding: 14px; border: none; border-radius: 16px; background: var(--accent-gradient); color: #fff; font-size: 15px; font-family: inherit; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 4px 20px rgba(212,160,192,0.35); transition: box-shadow var(--transition-normal), transform 0.15s; margin-top: 8px; }
.save-btn:hover { box-shadow: 0 6px 28px rgba(212,160,192,0.5), 0 0 0 4px rgba(212,160,192,0.1); transform: translateY(-1px); }
.save-btn:active { transform: scale(0.98); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



/* ========== 星星点击绽放 ========== */
.star-burst {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  animation: burstOut 0.8s cubic-bezier(0.2,0,0.4,1) forwards;
}
@keyframes starFloat {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes burstOut {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(2.5) rotate(360deg); opacity: 0; }
}
.star-particle {
  position: fixed;
  pointer-events: none;
  z-index: 998;
  font-size: 10px;
  animation: particleFly 1s cubic-bezier(0.2,0,0.6,1) forwards;
}
@keyframes particleFly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { opacity: 0; }
}

/* ========== TOAST ========== */
.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(90,58,74,0.9); color: #fff; font-size: 13px; padding: 10px 22px; border-radius: 20px; z-index: 999; backdrop-filter: blur(8px); opacity: 0; transition: opacity var(--transition-normal), transform var(--transition-normal); pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ========== RESPONSIVE ========== */
@media (max-width: 640px) {
  #sidebar { position: fixed; left: 0; top: 0; height: 100%; z-index: 50; box-shadow: var(--shadow-lg); }
  #sidebar.collapsed { transform: translateX(calc(-1 * var(--sidebar-width))); }
  .msg-row { max-width: 92%; }
  .intro-slide-inner { padding: 0 24px; }
  .quick-fill-btn { font-size: 10px; min-width: 60px; }
}

.msg-del.del-confirm {
  color: #ff6b6b !important;
  font-weight: bold;
  font-size: 12px;
  animation: delPulse 0.6s ease-in-out infinite alternate;
}
@keyframes delPulse {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}
.hidden { display: none !important; }
.no-select { user-select: none; -webkit-user-select: none; }

/* ==========================================
   谷歌灵动风 — 删除确认弹窗（横向布局）
   左：彩虹圆 + 旋转彩虹弧环（贴紧）
   右：标题 + 挽留语 + 按钮
   ========================================== */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(18, 10, 22, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center; justify-content: center;
}
.confirm-overlay.show { display: flex; animation: overlay-fade 0.25s ease; }
@keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } }

/* 长方形卡片：左圆右文 */
.confirm-card {
  position: relative;
  width: min(400px, 92vw);
  padding: 20px 22px 20px 20px;
  border-radius: 24px;
  background: var(--bg-card-solid);
  box-shadow: 0 24px 60px rgba(30, 15, 40, 0.4);
  display: flex; align-items: center; gap: 18px;
  overflow: hidden;
  animation: card-pop 0.32s cubic-bezier(0.34, 1.4, 0.44, 1);
}
@keyframes card-pop {
  from { transform: scale(0.9) translateY(16px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ---- 左侧：彩虹渐变圆 + Play Store 旋转弧环（贴紧） ---- */
.confirm-avatar-wrap {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
}
/* Play Store 下载进度环：彩虹渐变弧线绕圆旋转 */
.confirm-spinner {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      #ff6b6b, #ffd93d, #6bcf7f, #4da6ff, #a78bfa, #f472b6, #ff6b6b);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  animation: rainbow-rotate 1.6s linear infinite;
}
/* 缺口：让彩虹环呈现"一段弧"（Play Store 弧线样式） */
.confirm-spinner::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--bg-card-solid);
  -webkit-mask: radial-gradient(farthest-side, #000 calc(100% - 3.5px), transparent calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, #000 calc(100% - 3.5px), transparent calc(100% - 2.5px));
  transform: rotate(-60deg);
  clip-path: polygon(0 0, 62% 0, 100% 100%, 0 100%);
}
@keyframes rainbow-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 谷歌会员头像：彩虹渐变圆形徽章（贴近外环，减少留白） */
.confirm-avatar {
  position: absolute;
  top: 7px; left: 7px;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  background: conic-gradient(from 210deg,
    #ff6b6b 0deg, #ffd93d 72deg, #6bcf7f 144deg,
    #4da6ff 216deg, #a78bfa 288deg, #ff6b6b 360deg);
  box-shadow: 0 8px 20px rgba(90, 60, 140, 0.35), inset 0 2px 5px rgba(255,255,255,0.35);
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  animation: avatar-glow 2.4s ease-in-out infinite;
}
@keyframes avatar-glow {
  0%, 100% { box-shadow: 0 8px 20px rgba(90,60,140,0.35), inset 0 2px 5px rgba(255,255,255,0.35); }
  50%      { box-shadow: 0 10px 26px rgba(157,90,220,0.55), inset 0 2px 5px rgba(255,255,255,0.45); }
}

/* ---- 右侧：文字 + 按钮 ---- */
.confirm-content {
  flex: 1; min-width: 0;
  text-align: left;
}
.confirm-title {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  letter-spacing: 0.5px; margin-bottom: 6px;
}
.confirm-msg {
  font-size: 12.5px; line-height: 1.7; color: var(--text-secondary);
  margin-bottom: 14px;
}
.confirm-actions { display: flex; gap: 10px; }
.confirm-btn {
  flex: 1; padding: 10px 0; border: none; border-radius: 16px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.4, 0.44, 1);
}
.confirm-btn.cancel {
  background: rgba(212, 180, 200, 0.16);
  color: var(--text-secondary);
}
.confirm-btn.cancel:hover { background: rgba(212, 180, 200, 0.28); transform: translateY(-1px); }
.confirm-btn.cancel:active { transform: scale(0.95); }
.confirm-btn.danger {
  background: linear-gradient(135deg, #f06292, #a855f7);
  color: #fff;
  box-shadow: 0 6px 16px rgba(190, 90, 220, 0.4);
}
.confirm-btn.danger:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(190, 90, 220, 0.5); }
.confirm-btn.danger:active { transform: scale(0.95); }
.cs-trigger .cs-dot { width: 14px; height: 14px; }

.cs-select { position: relative; }
.cs-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--border-color); border-radius: 18px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.4, 0.44, 1);
}
.cs-trigger:hover { border-color: var(--accent-1); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(212,160,192,0.18); }
.cs-trigger-label {
  display: flex; align-items: center; gap: 10px;
}
.cs-arrow { color: var(--text-secondary); transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.44, 1); }
.cs-select.open .cs-arrow { transform: rotate(180deg); }

.cs-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(40, 20, 50, 0.3);
  overflow: hidden;
  opacity: 0; transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.34, 1.4, 0.44, 1);
  z-index: 30;
}
.cs-select.open .cs-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cs-option {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; font-size: 13.5px;
  color: var(--text-secondary); cursor: pointer;
  transition: all 0.2s ease;
}
.cs-option:hover { background: rgba(212, 160, 192, 0.1); color: var(--text-primary); padding-left: 20px; }
.cs-option:active { transform: scale(0.98); }
.cs-option.active {
  color: var(--accent-1); font-weight: 600;
  background: rgba(212, 160, 192, 0.12);
}
.cs-option:not(:last-child) { border-bottom: 1px solid var(--border-light); }
/* 彩虹渐变圆点（谷歌头像迷你版） */
.cs-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.cs-dot-deepseek {
  background: conic-gradient(from 210deg,
    #4da6ff 0deg, #a78bfa 180deg, #6bcf7f 300deg, #4da6ff 360deg);
}
.cs-dot-custom {
  background: conic-gradient(from 210deg,
    #ffd93d 0deg, #ff6b6b 180deg, #f472b6 300deg, #ffd93d 360deg);
}
/* 触发按钮左侧也显示彩虹圆点 */
.cs-trigger .cs-dot { width: 14px; height: 14px; }

/* 侧边栏遮罩 */
#sidebar-overlay {
  position: fixed; inset: 0; z-index: 28;
  background: rgba(0,0,0,0.15);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
#sidebar:not(.collapsed) ~ #sidebar-overlay {
  opacity: 1; pointer-events: auto;
}
/* ==========================================
   Diary（日记系统）v1 — 融合 dwell-on-something 设计
   仿官端 Bento Grid + 便签墙 + 液态玻璃
   ========================================== */

/* --- 日记页面容器 --- */
#diary-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.32,0.72,0,1);
}
#diary-screen.active { transform: translateX(0); }

#diary-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
  flex: none;
  background: var(--bg-card);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  z-index: 2;
}
#diary-header h1 {
  flex: 1; font-family: var(--font-family);
  font-size: 20px; font-weight: 600; letter-spacing: 0.02em;
}
#diary-header .diary-day-count {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#diary-back {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  cursor: pointer; font-size: 16px;
  transition: all 0.2s ease;
}
#diary-back:hover { border-color: var(--accent-1); color: var(--accent-1); }

#diary-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 16px 18px 30px;
  -webkit-overflow-scrolling: touch;
}

/* --- 日记页面导航 --- */
.diary-head { padding: 2px 4px 14px; }
.diary-head h1 {
  margin: 0; font-family: var(--font-family);
  font-size: 26px; font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.25;
}
.diary-head .sub {
  color: var(--text-muted); font-size: 12.5px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.diary-head .shnav {
  float: right; display: flex; gap: 6px; margin-top: 4px;
}
.diary-head .shnav button {
  min-width: 30px; height: 30px; border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); cursor: pointer;
  font-size: 12px; padding: 0 10px;
  transition: all 0.2s ease;
}
.diary-head .shnav button:hover {
  border-color: var(--accent-1); color: var(--accent-1);
}

/* --- 液态玻璃（dwell 4 道内阴影） --- */
.diary-glass {
  background: var(--bg-card);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-card-solid) 76%, transparent),
    color-mix(in srgb, var(--bg-card-solid) 58%, transparent));
  -webkit-backdrop-filter: blur(24px) saturate(1.9) brightness(1.04);
  backdrop-filter: blur(24px) saturate(1.9) brightness(1.04);
  border: 0;
  box-shadow:
    0 10px 34px rgba(0,0,0,.09),
    0 1px 3px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -7px 18px rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(255,255,255,.44);
}
[data-theme="dark"] .diary-glass {
  background: var(--bg-card);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-card-solid) 74%, transparent),
    color-mix(in srgb, var(--bg-card-solid) 56%, transparent));
  box-shadow:
    0 12px 38px rgba(0,0,0,.42),
    0 1px 3px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -7px 18px rgba(255,255,255,.045),
    inset 0 0 0 1px rgba(255,255,255,.09);
}

/* --- Bento Grid（方块主页） --- */
.bn-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.bn-card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--border-light);
  text-align: left; min-height: 118px;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bn-card:active { transform: scale(0.97); }
.bn-card.wide { grid-column: 1 / -1; }
.bn-card.hero {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff; min-height: 148px; border: none;
}
.bn-card .beyebrow {
  font-size: 11px; letter-spacing: .16em; opacity: .7;
  font-style: italic; margin-bottom: 5px;
}
.bn-card .bt {
  font-family: var(--font-family); font-size: 20px; font-weight: 400; line-height: 1.3;
}
.bn-card .bs {
  font-size: 12.5px; margin-top: 5px; opacity: .72; line-height: 1.65;
}
.bn-card.tall { grid-row: span 2; min-height: 256px; }
.bn-card .bicon {
  position: absolute; right: -16px; top: -18px; width: 104px; height: 104px;
  opacity: .13; pointer-events: none;
  font-size: 80px; display: flex; align-items: center; justify-content: center;
  transform: rotate(var(--rot, -9deg));
}
.bn-card.tall .bicon { width: 148px; height: 148px; right: -28px; top: -22px; font-size: 120px; }
.bn-card.hero .bicon { opacity: .3; width: 168px; height: 168px; right: -34px; top: -38px; font-size: 140px; }
.bn-motto {
  font-family: var(--font-family); font-style: italic;
  color: var(--text-muted); font-size: 14px; margin: 2px 0 16px;
  text-align: center; padding-top: 10px;
}

/* --- 时间线 --- */
.tl-day { display: flex; gap: 14px; margin-bottom: 20px; }
.tl-left { flex: none; width: 44px; text-align: center; }
.tl-num { font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tl-mon { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tl-line { flex: none; width: 2px; border-radius: 999px; background: var(--border-color); }
.tl-items { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tl-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-light);
  cursor: pointer; transition: all 0.15s ease;
}
.tl-item:hover { border-color: var(--accent-1); }
.tl-item .tt { font-size: 14px; font-weight: 600; line-height: 1.5; }
.tl-item .tk { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* --- 便签墙 --- */
.board-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px;
}
.board-bar .bnav {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-primary); font-size: 14px;
  transition: all 0.15s ease;
}
.board-bar .bnav:disabled { opacity: 0.3; cursor: default; }
.board-bar .bnav:hover:not(:disabled) { border-color: var(--accent-1); }
.board-bar .bdate {
  font-size: 16px; font-weight: 600; cursor: pointer;
  background: none; border: none; color: var(--text-primary);
  padding: 4px 12px; border-radius: 999px;
  transition: background 0.15s ease;
}
.board-bar .bdate:hover { background: var(--bg-card); }

.dp { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding: 12px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-light); }
.dp.show { display: flex; }
.dpm { width: 100%; font-size: 12px; color: var(--text-muted); margin: 4px 0 2px; font-weight: 600; }
.dpd { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; cursor: pointer; color: var(--text-primary); font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.dpd:hover { background: var(--border-light); }
.dpd.on { background: var(--accent-1); color: #fff; }

#board { position: relative; min-height: 200px; }
.board-empty { text-align: center; color: var(--text-muted); font-size: 14px; padding: 60px 0; }

.note {
  position: absolute; width: 44%; padding: 12px 14px;
  border-radius: 12px; cursor: grab; user-select: none;
  font-size: 13px; line-height: 1.6;
  box-shadow: 0 3px 12px rgba(0,0,0,.12);
  transition: box-shadow 0.15s ease;
  overflow: hidden;
}
.note:active { cursor: grabbing; z-index: 100 !important; }
.note::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--tape, rgba(240,232,212,.92));
  border-radius: 2px 2px 0 0;
}
.note .nt { font-weight: 600; margin-bottom: 4px; }
.note .nk { font-size: 11px; opacity: .7; margin-bottom: 3px; }
.note .nm { font-size: 10px; opacity: .5; margin-top: 6px; }
.note.sq { width: 28%; }
.note.wide { width: 66%; }
.note.big { font-size: 14.5px; }
.note.lined .nt { border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 4px; }
[data-theme="dark"] .note { box-shadow: 0 3px 12px rgba(0,0,0,.45); }

.wall-intro { text-align: center; padding: 10px 6px 18px; }
.wall-intro .big { font-size: 21px; font-weight: 700; }
.wall-intro .sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.wall-month {
  font-size: 14px; color: var(--text-muted); letter-spacing: .15em;
  padding: 16px 4px 8px; display: flex; align-items: center; gap: 10px;
}
.wall-month::after { content: ''; flex: 1; border-top: 1px solid var(--border-light); }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 7px; }
.brick {
  border-radius: 9px; aspect-ratio: 1; cursor: pointer;
  transition: transform 0.15s;
}
.brick:active { transform: scale(.88); }
.brick-card {
  position: sticky; bottom: 0; margin-top: 16px;
  background: var(--bg-card-solid); border-radius: 18px; padding: 14px 18px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.1); border: 1px solid var(--border-light);
  display: none;
}
.brick-card.show { display: block; }
.brick-card .bd { font-size: 12.5px; color: var(--text-muted); }
.brick-card .bt { font-size: 15.5px; font-weight: 600; margin: 3px 0 6px; line-height: 1.5; }

/* --- 你的本子 --- */
.hd-write { border-radius: 18px; padding: 16px; background: var(--bg-card-solid); box-shadow: 0 2px 24px rgba(0,0,0,.08); margin-bottom: 18px; }
.hd-write textarea { width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 15.5px; line-height: 1.8; min-height: 96px; resize: vertical; }
.hd-write textarea::placeholder { color: var(--text-muted); opacity: .7; }
.hd-write .row { display: flex; justify-content: flex-end; margin-top: 8px; }
.hd-write .go { border: 0; border-radius: 999px; padding: 8px 22px; font-size: 13px; background: var(--accent-gradient); color: #fff; font-weight: 500; cursor: pointer; }
.hd-item { border-radius: 15px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-light); margin-bottom: 10px; position: relative; }
.hd-item .hdd { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.hd-item .hdt { font-size: 14px; line-height: 1.75; white-space: pre-wrap; }
.hd-item .hdx { position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; border-radius: 50%; border: none; background: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: opacity 0.15s ease; }
.hd-item:hover .hdx { opacity: 1; }
.hd-item .hdx:hover { color: var(--text-primary); background: var(--border-light); }

/* --- 摘录 --- */
.fav-card { border-radius: 15px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border-light); margin-bottom: 12px; position: relative; }
.fav-card .fq { position: absolute; top: -8px; left: 12px; width: 24px; height: 24px; color: var(--accent-1); opacity: .3; font-size: 28px; }
.fav-card .fd { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.fav-card .fx { font-size: 15px; line-height: 1.7; font-style: italic; color: var(--text-primary); padding-left: 8px; border-left: 2px solid var(--accent-1); }
.fav-card .fn { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* --- 夜记 --- */
.night-item { display: flex; gap: 12px; margin-bottom: 14px; }
.night-item .ntime { flex: none; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.night-item .ntext { flex: 1; font-size: 14px; line-height: 1.75; white-space: pre-wrap; }

/* --- 空状态 --- */
.pp-empty { text-align: center; color: var(--text-muted); font-size: 14px; padding: 60px 0; font-style: italic; }

/* --- 响应式 --- */
@media (max-width: 480px) {
  .bn-grid { gap: 8px; }
  .bn-card { padding: 12px; min-height: 100px; }
  .bn-card .bt { font-size: 17px; }
  .bn-card .bicon { width: 80px; height: 80px; font-size: 60px; right: -12px; top: -14px; }
  .bn-card.hero { min-height: 120px; }
  .note { width: 48%; }
  .note.sq { width: 32%; }
  #diary-body { padding: 12px 14px 20px; }
}

/* --- 日记系统深色模式适配 --- */
[data-theme="dark"] .bn-card {
  background: var(--bg-card-solid);
  border-color: var(--border-color);
}
[data-theme="dark"] .bn-card .bs { opacity: .6; }
[data-theme="dark"] .bn-card .beyebrow { opacity: .6; }
[data-theme="dark"] .bn-card .bicon { opacity: .1; }
[data-theme="dark"] .bn-card.hero { background: linear-gradient(135deg, #7a4a6a, #6a3a5a); }
[data-theme="dark"] .bn-motto { opacity: .5; }
[data-theme="dark"] .tl-item { background: var(--bg-card-solid); border-color: var(--border-color); }
[data-theme="dark"] .tl-item:hover { border-color: var(--accent-1); }
[data-theme="dark"] .tl-line { background: var(--border-color); }
[data-theme="dark"] .board-bar .bnav { background: var(--bg-card-solid); border-color: var(--border-color); }
[data-theme="dark"] .board-bar .bdate { color: var(--text-primary); }
[data-theme="dark"] .dp { background: var(--bg-card-solid); border-color: var(--border-color); }
[data-theme="dark"] .dpd { color: var(--text-primary); }
[data-theme="dark"] .dpd:hover { background: var(--border-color); }
[data-theme="dark"] .hd-write { background: var(--bg-card-solid); }
[data-theme="dark"] .hd-write textarea { color: var(--text-primary); }
[data-theme="dark"] .hd-item { background: var(--bg-card-solid); border-color: var(--border-color); }
[data-theme="dark"] .fav-card { background: var(--bg-card-solid); border-color: var(--border-color); }
[data-theme="dark"] .fav-card .fx { color: var(--text-secondary); }
[data-theme="dark"] .brick-card { background: var(--bg-card-solid); border-color: var(--border-color); }
[data-theme="dark"] .note { box-shadow: 0 3px 12px rgba(0,0,0,.45); }
[data-theme="dark"] .note.lined .nt { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] #diary-header { background: var(--bg-card-solid); }
[data-theme="dark"] .diary-head .shnav button { background: var(--bg-card-solid); border-color: var(--border-color); }
[data-theme="dark"] .diary-head .shnav button:hover { border-color: var(--accent-1); }
[data-theme="dark"] .night-item .ntime { color: var(--text-muted); }
[data-theme="dark"] .wall-month { color: var(--text-muted); }
[data-theme="dark"] .wall-month::after { border-top-color: var(--border-color); }