/* ═══════════════════════════════════════════
   小草 GNOTHI · 设计系统 v1.0
   大地暖土 — 长在土里的生命
   ═══════════════════════════════════════════ */

/* ── CSS Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{line-height:1.6}

/* ── 大地暖土 · 默认皮肤 ── */
:root {
  /* 底色 */
  --bg:              #F5E6D3;
  --bg-card:         #FFFBF7;
  --bg-input:        #FDF6ED;

  /* 强调 */
  --accent:          #C4A88B;
  --accent-strong:   #8B6F5C;
  --accent-soft:     #E8D9C8;

  /* 绿色系 */
  --green:           #A8C97B;
  --green-deep:      #6B8F71;
  --green-mist:      #9DC5B4;

  /* 暖色 */
  --warm-pink:       #E8C4B8;
  --warm-gold:       #D4B896;

  /* 冷色 */
  --cool-blue:       #B8C9D4;
  --cool-gray:       #7A6E65;

  /* 文字 */
  --text:            #6B5B4F;
  --text-secondary:  #9B8E84;
  --text-muted:      #BFA89E;

  /* 字体 */
  --font-ui:         "PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-report:     "Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --font-mono:       "Inter",monospace;

  /* 圆角 */
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       20px;
  --radius-full:     9999px;

  /* 阴影 */
  --shadow-sm:       0 1px 4px rgba(139,111,92,0.06);
  --shadow-md:       0 2px 16px rgba(180,160,200,0.10);
  --shadow-lg:       0 8px 32px rgba(139,111,92,0.12);

  /* 间距 */
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        12px;
  --space-lg:        16px;
  --space-xl:        20px;
  --space-2xl:       24px;

  /* 动效 */
  --ease:            cubic-bezier(0.25,0.46,0.45,0.94);
  --fast:            150ms;
  --normal:          250ms;
  --slow:            400ms;

  /* 尺寸 */
  --max-width:       480px;
  --sidebar-width:   260px;
}

/* ── 🍬 蜜桃糖果皮肤 ── */
[data-theme="candy"] {
  --bg:              #FFF5ED;
  --bg-card:         #FFFBF7;
  --bg-input:        #FFF8F2;
  --accent:          #FF9A76;
  --accent-strong:   #FF7A56;
  --accent-soft:     #FFD4E0;
  --green:           #8EC8A0;
  --green-deep:      #6BAA8A;
  --green-mist:      #B8E8C8;
  --warm-pink:       #FFD4E0;
  --warm-gold:       #FFF0C4;
  --cool-blue:       #C4D8F0;
  --cool-gray:       #B8A0A0;
  --text:            #6B5B4F;
  --text-secondary:  #9B8E84;
  --text-muted:      #C4A8A8;
  --shadow-sm:       0 1px 4px rgba(255,154,118,0.06);
  --shadow-md:       0 2px 16px rgba(255,180,200,0.10);
  --shadow-lg:       0 8px 32px rgba(255,154,118,0.12);
}

/* ── 🌲 雨后森林皮肤 ── */
[data-theme="forest"] {
  --bg:              #EDF3EE;
  --bg-card:         #F7FBF8;
  --bg-input:        #F2F7F3;
  --accent:          #5C8B6F;
  --accent-strong:   #3D6B4F;
  --accent-soft:     #A8C9B8;
  --green:           #7BA86C;
  --green-deep:      #4A7A5C;
  --green-mist:      #A8D8C0;
  --warm-pink:       #D4C0B8;
  --warm-gold:       #C8B888;
  --cool-blue:       #A0C0D0;
  --cool-gray:       #6A7068;
  --text:            #4A5A44;
  --text-secondary:  #7A8A74;
  --text-muted:      #A0A898;
}

/* ── ☀️ 暖阳皮肤 ── */
[data-theme="sunny"] {
  --bg:              #FFF8E7;
  --bg-card:         #FFFAF0;
  --bg-input:        #FFF5E6;
  --accent:          #F4A460;
  --accent-strong:   #E8923A;
  --accent-soft:     #FFE8CC;
  --green:           #9ACD32;
  --green-deep:      #7AB020;
  --green-mist:      #D4F0A0;
  --warm-pink:       #FFD4C0;
  --warm-gold:       #FFE8A0;
  --cool-blue:       #C0D8F0;
  --cool-gray:       #A0A090;
  --text:            #666666;
  --text-secondary:  #999999;
  --text-muted:      #BBBBBB;
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.04);
  --shadow-md:       0 2px 12px rgba(0,0,0,0.06);
  --shadow-lg:       0 4px 16px rgba(244,164,96,0.3);
}

/* ── 🌙 深夜大地皮肤 ── */
[data-theme="dark"] {
  --bg:              #1a1817;
  --bg-card:         #24211f;
  --bg-input:        #2d2a28;
  --accent:          #a08868;
  --accent-strong:   #c4a88b;
  --accent-soft:     #3d3833;
  --green:           #7ba86c;
  --green-deep:      #5a8a50;
  --green-mist:      #3d5a38;
  --warm-pink:       #8a6858;
  --warm-gold:       #887050;
  --cool-blue:       #506070;
  --cool-gray:       #706860;
  --text:            #d4c8b8;
  --text-secondary:  #a09888;
  --text-muted:      #706860;
  --shadow-sm:       0 1px 4px rgba(0,0,0,.3);
  --shadow-md:       0 2px 16px rgba(0,0,0,.4);
  --shadow-lg:       0 8px 32px rgba(0,0,0,.5);
}

/* ── 🌅 秋日暖阳皮肤 ── */
[data-theme="autumn"] {
  --bg:              #F5EDE0;
  --bg-card:         #FFF9F2;
  --bg-input:        #FDF4E8;
  --accent:          #D4986A;
  --accent-strong:   #B07040;
  --accent-soft:     #F0C8A0;
  --green:           #98B870;
  --green-deep:      #708840;
  --green-mist:      #C0D0A0;
  --warm-pink:       #E8C0A8;
  --warm-gold:       #E8C888;
  --cool-blue:       #B0B8C8;
  --cool-gray:       #8A7A68;
  --text:            #5A4A3A;
  --text-secondary:  #8A7A6A;
  --text-muted:      #B0A090;
}

/* ── 区域渐变（SPEC 二十三）── */
.bg-archive { background: linear-gradient(to bottom, #F5E6D3, #E8D9C8); }           /* 人生档案 → 老树年轮 */
.bg-garden  { background: linear-gradient(135deg, #9DC5B4, #E8F0E3, #F5E6D3); }    /* 小草花园 → 雨后花园 */
.bg-chat    { background: #F5E6D3; }                                                 /* 聊天 → 晨光暖土纯色 */
.bg-dash    { background: linear-gradient(to bottom, #F5EDE3, #EBF5EE); }           /* 仪表盘 → 树荫下 */
.bg-starsea { background: linear-gradient(135deg, #1f1817, #2d2018, #3d2a1a); }     /* 时光星海 → 深夜大地 */

/* ── 材质感：手工纸微纹理 ── */
.card{position:relative}
.card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0}
.card>*{position:relative;z-index:1}

/* ── 排版 ── */
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── 心情天气图标 ── */
.mood-blossom  { color: var(--warm-pink); }  /* 🌸 开了花 */
.mood-breeze   { color: var(--green-mist); } /* 🍃 微风 */
.mood-drizzle  { color: var(--cool-blue); }  /* 🌧 毛毛雨 */
.mood-night    { color: var(--accent-strong); } /* 🌙 静夜 */
.mood-thunder  { color: var(--accent); }      /* ⚡ 闷雷 */
.mood-rainbow  { color: var(--warm-gold); }   /* 🌈 等彩虹 */
.mood-cloud    { color: var(--cool-gray); }   /* ☁️ 软绵绵 */
.mood-mist     { color: var(--text-muted); }  /* 🌫 薄雾 */

/* ── 心绪热力图色块 ── */
.heat-blossom  { background: var(--warm-pink); }  /* 开心 */
.heat-breeze   { background: var(--green-mist); } /* 平静 */
.heat-drizzle  { background: var(--cool-blue); }  /* 低落 */
.heat-night    { background: var(--accent-strong); } /* 难过 */
.heat-mist     { background: var(--text-muted); } /* 未言 */

/* ── 加载动画 ── */
.spinner{width:28px;height:28px;border:3px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{text-align:center;padding:40px;color:var(--text-muted);font-size:14px}
.loading .spinner{margin-bottom:12px}

/* ── 空状态 ── */
.empty{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:14px;line-height:2}
.empty .empty-icon{font-size:48px;display:block;margin-bottom:12px;opacity:.5}
.empty .empty-title{font-size:16px;color:var(--text-secondary);margin-bottom:4px}
.empty .empty-desc{font-size:13px}

/* ── 品牌图标 ── */
.brand-icon{background-image:url('/assets/brand/icon-512.png');background-size:contain;background-repeat:no-repeat;background-position:center;display:inline-block}
.brand-icon-sm{width:32px;height:32px}
.brand-icon-md{width:48px;height:48px}
.brand-icon-lg{width:72px;height:72px}

/* 场景1：欢迎/等待 — 呼吸缩放 */
.brand-icon--breathing{animation:brandBreathe 3s ease-in-out infinite}
@keyframes brandBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* 场景3：思考中 — 3个点 */
.brand-icon--thinking{position:relative}
.brand-icon--thinking::after{content:'...';position:absolute;top:-8px;right:-16px;font-size:14px;color:var(--accent);letter-spacing:2px;animation:brandDots 1.5s steps(3) infinite}
@keyframes brandDots{0%{content:'.'}33%{content:'..'}66%{content:'...'}}

/* 场景5：成就粒子（背景光环） */
.brand-icon--celebrating{animation:brandGlow 1s ease-in-out 3}
@keyframes brandGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)drop-shadow(0 0 8px gold)}}

/* ── 四季换装 + 节日皮肤 ── */
.brand-icon--spring,.brand-icon--summer,.brand-icon--autumn,.brand-icon--winter,
.brand-icon--springfestival,.brand-icon--midautumn{position:relative}
.brand-icon--spring::after,.brand-icon--summer::after,.brand-icon--autumn::after,
.brand-icon--winter::after,.brand-icon--springfestival::after,.brand-icon--midautumn::after{
  position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;pointer-events:none;
}

/* spring 🌸 */
.brand-icon--spring{filter:drop-shadow(0 0 4px rgba(255,183,197,.4))}
.brand-icon--spring::after{content:'🌸';background:rgba(255,183,197,.3)}

/* summer 🌺 */
.brand-icon--summer{filter:drop-shadow(0 0 4px rgba(72,199,142,.4))}
.brand-icon--summer::after{content:'🌺';background:rgba(72,199,142,.25)}

/* autumn 🍂 + breeze sway */
.brand-icon--autumn{filter:drop-shadow(0 0 4px rgba(255,165,0,.4))}
.brand-icon--autumn::after{content:'🍂';background:rgba(255,165,0,.25)}
.brand-icon--autumn{animation:autumnSway 4s ease-in-out infinite}
@keyframes autumnSway{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}

/* winter ❄️ */
.brand-icon--winter{filter:drop-shadow(0 0 4px rgba(200,220,255,.5))}
.brand-icon--winter::after{content:'❄️';background:rgba(180,200,240,.25)}

/* spring festival 🧧 */
.brand-icon--springfestival{filter:drop-shadow(0 0 6px rgba(255,50,50,.5))}
.brand-icon--springfestival::after{content:'🧧';background:rgba(255,50,50,.3)}
.brand-icon--springfestival{animation:festiveGlow 1.5s ease-in-out infinite}
@keyframes festiveGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,50,50,.5))}50%{filter:drop-shadow(0 0 12px rgba(255,50,50,.8))brightness(1.1)}}

/* mid-autumn 🌕 */
.brand-icon--midautumn{filter:drop-shadow(0 0 6px rgba(255,215,0,.5))}
.brand-icon--midautumn::after{content:'🌕';background:rgba(255,215,0,.3)}
.brand-icon--midautumn{animation:festiveGlow 2s ease-in-out infinite}

/* ── 通用组件 ── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  border: none; border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff; font-family: var(--font-ui); font-size: 15px;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.btn:hover   { background: var(--accent-strong); }
.btn:active  { transform: scale(0.97); }
.btn--ghost  { background: transparent; color: var(--accent); }
.btn--danger { background: #E57373; }

.input {
  width: 100%; padding: 10px 14px;
  border: 2px solid var(--accent-soft); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text);
  font-family: var(--font-ui); font-size: 15px; outline: none;
  transition: border var(--fast) var(--ease);
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-muted); }

/* ── 打印样式（报告打印） ── */
@media print {
  body{background:#fff!important;color:#333!important;font-family:"Noto Serif SC","Source Han Serif SC",serif!important;font-size:13px;line-height:2}
  .sidebar,.header,.input-area,.search-overlay,.sidebar-overlay,#toast,.hamburger,.header-icon{display:none!important}
  .main-content{max-width:100%!important;padding:0!important}
  .card{box-shadow:none!important;border:1px solid #ddd!important;page-break-inside:avoid}
  .bubble{background:#fafafa!important;color:#333!important;border:1px solid #eee!important}
  a{color:#333!important;text-decoration:underline}
  @page{margin:2cm}
}

/* ── 工具类 ── */
.text-muted { color: var(--text-muted); font-size: 13px; }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }