/* ==========================================================================
   卡皮巴拉卡通皮肤 —— 覆盖基础样式，把工作台变成「水豚乐园」
   设计要点：
     1) 暖黄色调 + 大圆角 + 粗描边 + 贴纸阴影，整体卡通化；
     2) 所有颜色走变量，方便再换主题；
     3) 尊重 prefers-reduced-motion，动效可关；
     4) 不依赖任何图片资源，卡皮巴拉全部用内联 SVG / CSS 画出来。
   ========================================================================== */

:root {
  /* 卡皮巴拉配色 */
  --capy-fur: #c89b6a;
  --capy-fur-d: #a87c4d;
  --capy-fur-l: #e3c096;
  --capy-belly: #f4e2c8;
  --capy-muzzle: #f7ead6;
  --capy-nose: #6b4a2c;
  --capy-eyes: #32241a;
  --capy-cheek: #f5a58c;

  /* 场景色（水塘 / 温泉） */
  --water: #7fcfe0;
  --water-d: #4ab2cb;
  --water-l: #bfe9f2;

  /* 卡通化后的主题色 */
  --bg: #fdf4e3;
  --card: #fffdf8;
  --ink: #4a3623;
  --ink-2: #8d7357;
  --line: #ecdcc2;
  --brand: #f2913d;
  --brand-soft: #ffeed8;
  --ok: #3eb489;
  --ok-soft: #e2fabe;
  --warn: #f0a836;
  --warn-soft: #fff0d2;
  --bad: #ef6f6c;
  --bad-soft: #ffe6e6;
  --sun: #ffd166;
  --leaf: #8fd694;
  --radius: 22px;
  --radius-sm: 14px;
  --stroke: #4a3623;
  --shadow: 0 6px 0 rgba(74, 54, 35, .12), 0 12px 26px rgba(74, 54, 35, .10);
  --shadow-hard: 0 4px 0 var(--stroke);
}

/* ---------- 背景：暖色渐变 + 波点 + 漂浮云朵 ---------- */
body {
  background:
    radial-gradient(circle at 12% 18%, #fff6e2 0 18%, transparent 19%) ,
    radial-gradient(circle at 88% 8%, #ffeec9 0 14%, transparent 15%),
    linear-gradient(180deg, #fdf4e3 0%, #fbefd8 60%, #f7e7cb 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  position: relative;
  min-height: 100vh;
}
/* 波点纹理层 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(242, 145, 61, .16) 2.4px, transparent 2.5px),
    radial-gradient(rgba(62, 180, 137, .12) 2.4px, transparent 2.5px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
}
.layout, .topbar, .footer { position: relative; z-index: 1; }

/* ---------- 顶栏：草地 + 云 ---------- */
.topbar {
  background: linear-gradient(120deg, #ffd166 0%, #f9b45b 45%, #f2913d 100%);
  color: #4a3623;
  padding: 16px 26px;
  box-shadow: 0 6px 0 rgba(74, 54, 35, .16);
  border-bottom: 3px solid #4a3623;
  position: sticky;
  top: 0;
  z-index: 30;
  overflow: hidden;
}
.topbar::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .5) 3px, transparent 3.5px);
  background-size: 34px 34px;
  opacity: .5;
  pointer-events: none;
}
.topbar h1 {
  font-size: 21px;
  letter-spacing: .5px;
  color: #3f2d1b;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .55);
  display: flex; align-items: center; gap: 8px;
}
.topbar .sub { color: #6b4f2c; font-weight: 600; opacity: .95; }
.topbar .capy-flag { display: inline-flex; vertical-align: middle; }
.streak {
  background: rgba(255, 255, 255, .8);
  border: 2px solid #4a3623;
  border-radius: 999px;
  padding: 5px 14px;
  color: #4a3623;
  font-weight: 700;
  box-shadow: 0 3px 0 rgba(74, 54, 35, .22);
}

/* ---------- 面板：白卡片 + 粗描边 + 贴纸阴影 ---------- */
.panel {
  background: var(--card);
  border: 3px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 18px;
}
.panel > h2 {
  font-size: 15px; color: #4a3623; font-weight: 800;
  margin-bottom: 10px; letter-spacing: .4px;
  display: flex; align-items: center; gap: 6px;
}
.panel > h2::after {
  content: "";
  flex: 1; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
}

/* ---------- 导航 ---------- */
.tab {
  border: 3px solid transparent;
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-weight: 700;
  color: #6b543c;
  position: relative;
  transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.tab:hover { background: #fff3e0; transform: translateX(2px); }
.tab.active {
  background: var(--brand-soft);
  border-color: var(--stroke);
  color: #b8591a;
  box-shadow: 0 3px 0 var(--stroke);
  transform: translateX(2px);
}
.tab .cnt { background: #f6e7cf; border-radius: 999px; padding: 1px 8px; color: #8d7357; }