/* ============================================================
   胡77 解压生态区 · 美术层（三主题自适应 · 2026 Calm UI）
   火星红 / 77紫 / Per黑 共用一套角色与资产语言，
   颜色细节（logo 色、花瓣线稿、logo 胶囊）走 CSS 变量随主题切换。

   四条设计 DNA
     ① 圆角色块 + 极简表情：圆润剪影、两点眼、波浪嘴、腮红
     ② 描边语言：炭色角色浅描边=贴纸感；花朵线稿随主题
     ③ 低饱和主色 + 柔和点缀：情绪热度 vs 情绪缓冲
     ④ 几何极简 logo：三角 + 圆 + 横线，像「被扎住的炸毛」

   动效规范：无循环动画、无闪烁；仅 hover/按下微交互 + 一次性入场。
   ============================================================ */
:root{
  /* ---- 角色：炭色剪影（深浅主题通用） ---- */
  --coal:#333A45; --coal-lt:#48515F; --coal-dk:#242932;

  /* ---- 花朵四色（背景花丛与角色脚下） ---- */
  --petal-pink:#FFB9CF; --petal-blue:#8FB8F2;
  --petal-cream:#F3DFB4; --daisy:#FFD166; --pistil:#F59A1F;

  --mars-orange:var(--orange);     /* 徽章/渐变辅助橙（跟随主题） */
  --outline:#FFFFFF;               /* 角色身上的浅描边 */

  /* ---- 主题化细节：logo 主色 / 花的线稿 / logo 玻璃胶囊 ---- */
  --mark:var(--brand);           /* logo 三角 + 77 字：跟随主题主色 */
  --petal-line:#8C5A44;
  --chip-a:rgba(255,255,255,.88); --chip-b:rgba(255,255,255,.50);
  --chip-line:rgba(42,26,19,.10);

  /* ---- 圆角刻度（卡片 16 / 按钮 14-16 / 大件 20） ---- */
  --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:20px;
}
:root[data-theme="mint"]{
  --mark:var(--brand);
  --petal-line:#5B4F8C;
  --chip-a:rgba(255,255,255,.85); --chip-b:rgba(255,255,255,.46);
  --chip-line:rgba(30,20,60,.12);
}
:root[data-theme="night"]{
  --mark:#B9C0CB;                /* 炭底上改用亮银灰，深主色看不见 */
  --petal-line:rgba(255,255,255,.62);
  --chip-a:rgba(255,255,255,.16); --chip-b:rgba(255,255,255,.04);
  --chip-line:rgba(255,255,255,.20);
}

/* ============================================================
   一、圆润化：卡片 / 按钮 / 输入 / 头像
   ============================================================ */
.btn{ border-radius:var(--r-lg); }
.btn.sm{ border-radius:13px; }
.input{ border-radius:var(--r-sm); }
.avatar{ border-radius:50%; }
.card, .gcard, .rec, .stat, .feed-card{ border-radius:var(--r-lg); }

/* ============================================================
   二、角色（黑煤球 / perper）：空态主角（一次性入场，不循环）
   ============================================================ */
.mars-mascot{
  display:block; margin:0 auto;
  animation:mars-in .45s ease both;
  transform-origin:50% 100%;
}
@keyframes mars-in{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
  to  { opacity:1; transform:none; }
}
.empty .e-ic{ opacity:1; margin-bottom:8px; line-height:0; }
.empty .e-ic svg{ display:block; margin:0 auto; }
.empty{ padding-top:16px; }
.mars-shadow{ display:block; margin:-8px auto 0; opacity:.5; }

/* ============================================================
   三、花朵层：背景花丛（固定层，静态低存在感，不摆动）
   ============================================================ */
#marsFlora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#marsFlora .fl{ position:absolute; opacity:.5; }
#marsFlora .fl.dim{ opacity:.3; }

/* ============================================================
   四、页头：logo 标 + 标题 同一行（DNA ④）
   ============================================================ */
.mars-title-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.mars-title-row h1,
.mars-title-row .page-title{ margin:0; }
.mars-mark{
  display:inline-flex; flex:none; align-items:center;
  padding:8px; border-radius:12px;
  background:linear-gradient(180deg,var(--chip-a),var(--chip-b));
  border:1px solid var(--chip-line);
  box-shadow:inset 0 1px 0 var(--inset-hi), 0 2px 8px rgba(16,24,40,.05);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.mars-mark svg{ display:block; }
/* 主页 hero：玻璃卡上 logo 用浅色描线，任何主题下保持浅描线 */
.hero .mars-mark{
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 3px 10px rgba(16,24,40,.10);
}
.hero .mars-mark svg path,
.hero .mars-mark svg line{ stroke:#fff !important; }
.hero .mars-mark svg text{ fill:#fff !important; }

/* ============================================================
   五、卡片角落小花（静态点缀）
   ============================================================ */
.mars-bloom{ position:absolute; pointer-events:none; opacity:.55; }
.panel.hot{ position:relative; }

/* ============================================================
   六、底栏选中态：主题色胶囊 + 白字（含主页，五格对齐）
   ============================================================ */
.tabnav a.on::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(100% - 26px); max-width:62px; height:calc(100% - 8px);
  background:linear-gradient(180deg,var(--brand-hi),var(--brand) 55%,var(--brand-dk));
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px var(--btn-shadow);
  pointer-events:none;
}
.tabnav a.on{ color:#fff; }

/* ============================================================
   七、无障碍：系统开了「减弱动效」就停掉一切动效
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *:before, *:after{ animation:none !important; transition:none !important; }
}