/* ============================================================
   嘚嘚工作台 v2 · 小熊维尼温馨原木风设计系统
   主色：暖蜂蜜黄 #F0B860 / 柔和米杏 #F5E8D0 / 浅原木咖 #B5895A / 淡青草绿 #9CCB7A
   低饱和暖色系，无刺眼亮色
   ============================================================ */

:root {
  --honey: #F0B860;
  --honey-deep: #D89745;
  --honey-light: #F8D89A;
  --cream: #F5E8D0;
  --cream-deep: #E8D5B0;
  --wood: #B5895A;
  --wood-deep: #8B6440;
  --wood-light: #D4B896;
  --grass: #9CCB7A;
  --grass-deep: #7AA85E;
  --pink: #E8A8B8;
  --pink-deep: #C88898;
  --ink: #5A4030;
  --ink-soft: #7A5E48;
  --ink-light: #A08868;
  --paper: #FBF3E4;
  --paper-soft: #FFFAF0;
  --border: #C9A574;
  --border-soft: #E0CFA8;
  --shadow: rgba(140, 100, 60, 0.16);
  --shadow-soft: rgba(181, 137, 90, 0.10);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "Comic Sans MS", "PingFang SC Rounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Quicksand", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

/* 低饱和暖色背景 + 百亩森林淡装饰 */
body {
  background:
    radial-gradient(circle at 8% 12%, rgba(156, 203, 122, 0.08) 0%, transparent 22%),
    radial-gradient(circle at 92% 88%, rgba(232, 168, 184, 0.07) 0%, transparent 24%),
    linear-gradient(135deg, #FFFAF0 0%, #F5E8D0 45%, #FBF3E4 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

@font-face {
  font-family: "DeideEmoji";
  src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Noto Color Emoji");
  unicode-range: U+1F000-1FFFF, U+2600-27BF, U+2300-23FF, U+2B00-2BFF;
}
.emoji, .brand .logo, .card-title, .tc-name, .btn, .nav-item, .deco-winnie,
.modal-emoji, .page-header h1, .tc-link, .badge, .tbl th, .banner-emoji {
  font-family: "Comic Sans MS", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "DeideEmoji", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ===================== 加载动画 ===================== */
.loader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .5s ease;
}
.loader.hide { opacity: 0; pointer-events: none; }
.loader .jar {
  font-size: 56px;
  animation: bob 1.4s ease-in-out infinite;
}
.loader .bee {
  font-size: 22px;
  animation: fly 2.5s linear infinite;
  margin-top: 8px;
}
.loader .txt { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes fly {
  0%{transform:translate(-30px,0) rotate(-10deg);opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{transform:translate(30px,-6px) rotate(10deg);opacity:0}
}

/* ===================== 布局 ===================== */
.app-shell { display: flex; min-height: 100vh; }

/* 左侧原木蜂蜜导航 */
.side-nav {
  width: 240px; flex-shrink: 0;
  background:
    repeating-linear-gradient(90deg,
      #C9A07A 0 2px, #D4B08A 2px 8px, #C99365 8px 14px, #B5895A 14px 20px),
    linear-gradient(180deg, #D4B08A, #B5895A);
  background-blend-mode: overlay;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 3px solid var(--wood-deep);
  box-shadow: 4px 0 16px var(--shadow);
  padding: 18px 14px 32px; z-index: 20;
}
.side-nav .brand {
  text-align: center; margin-bottom: 16px; padding: 14px 8px;
  background: var(--paper-soft); border-radius: var(--radius-lg);
  border: 2.5px dashed var(--wood);
}
.side-nav .brand .logo { font-size: 28px; line-height: 1; }
.side-nav .brand .title { font-size: 15px; font-weight: 700; color: var(--wood-deep); margin-top: 6px; }
.side-nav .brand .sub { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

.nav-list { list-style: none; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; margin-bottom: 5px;
  border-radius: var(--radius-sm); cursor: pointer;
  color: #3D2810; font-size: 13.5px; font-weight: 600;
  background: rgba(255, 250, 235, 0.50);
  border: 1.5px solid transparent;
  transition: all .18s ease; user-select: none;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--honey);
  transform: translateX(2px);
}
.nav-item.active {
  background: var(--paper-soft); border-color: var(--honey-deep);
  box-shadow: 0 3px 8px var(--shadow);
}
.nav-item .num {
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--honey); color: #3D2810;
  font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-item.active .num { background: var(--honey-deep); color: #fff; }
.nav-item .icon { font-size: 16px; }

.nav-toggle {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--honey); border: 2.5px solid var(--wood-deep);
  color: #3D2810; font-size: 19px; cursor: pointer;
  box-shadow: 0 4px 10px var(--shadow);
  align-items: center; justify-content: center;
}

/* 右侧主内容 */
.main-area { flex: 1; min-width: 0; padding: 24px 30px 60px; position: relative; }

/* 顶部横幅 */
.banner {
  background: linear-gradient(135deg, var(--cream) 0%, var(--paper-soft) 100%);
  border: 2.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 24px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 16px;
  position: relative; overflow: hidden;
  box-shadow: 0 3px 0 var(--border-soft), 0 6px 14px var(--shadow-soft);
}
.banner .banner-emoji { font-size: 40px; flex-shrink: 0; }
.banner .banner-text h2 { font-size: 18px; color: var(--wood-deep); font-weight: 700; }
.banner .banner-text p { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.banner::after {
  content: "🍂"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); font-size: 24px; opacity: 0.4;
}

.page-header { margin-bottom: 18px; }
.page-header .crumb { font-size: 11.5px; color: var(--ink-light); margin-bottom: 4px; }
.page-header h1 {
  font-size: 24px; color: var(--wood-deep);
  display: flex; align-items: center; gap: 9px;
  text-shadow: 0 1px 0 rgba(240,184,96,0.18);
}
.page-header .desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }

/* ===================== 卡片 ===================== */
.card {
  background: var(--paper-soft);
  border: 2.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px; position: relative;
  box-shadow: 0 3px 0 var(--border-soft), 0 5px 14px var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--border-soft), 0 9px 20px var(--shadow); }
.card::after { content: "🍯"; position: absolute; top: 8px; right: 10px; font-size: 13px; opacity: 0.5; pointer-events: none; }
.card.flush::after { display: none; }

.card-title {
  font-size: 15.5px; font-weight: 700; color: var(--wood-deep);
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 2px dashed var(--border-soft);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card-title .tag {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: var(--cream-deep); color: var(--ink-soft); font-weight: 600;
}
.card-title .tag.green { background: #DCEFC6; color: #4F7A1E; }
.card-title .tag.pink { background: #FCDCE4; color: #A05A6B; }
.card-title .tag.honey { background: #FFE6B0; color: #8B5E2A; }
.card-title .tag.wood { background: #E8D5B0; color: #6B4A28; }

/* ===================== 网格 ===================== */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-auto { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* ===================== 按钮 / 徽章 ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 30px;
  border: 2px solid var(--wood); background: var(--honey-light);
  color: var(--wood-deep); font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .18s ease; user-select: none;
}
.btn:hover { background: linear-gradient(135deg, var(--honey-light), var(--honey)); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: var(--paper-soft); color: var(--ink-soft); border-color: var(--border); }
.btn.pink { background: var(--pink); color: #8B4A5B; border-color: var(--pink-deep); }
.btn.green { background: #B5DE8A; color: #3F6A12; border-color: var(--grass-deep); }
.btn.sm { padding: 5px 10px; font-size: 11px; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  background: var(--cream-deep); color: var(--ink-soft);
}
.badge.green { background: #DCEFC6; color: #4F7A1E; }
.badge.pink { background: #FCDCE4; color: #A05A6B; }
.badge.honey { background: #FFE6B0; color: #8B5E2A; }
.badge.wood { background: #E8D5B0; color: #6B4A28; }
.badge.gray { background: #EDE3D3; color: #8A6B45; }

/* ===================== 统一活动卡片 ===================== */
.task-card {
  background: var(--paper-soft);
  border: 2.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px; position: relative;
  box-shadow: 0 3px 0 var(--border-soft);
  transition: transform .2s, box-shadow .2s;
}
.task-card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--border-soft), 0 8px 18px var(--shadow-soft); }
.task-card::after { content:"🍯"; position:absolute; top:8px; right:10px; font-size:13px; opacity:.5; }

.task-card .tc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 9px; }
.task-card .tc-name { font-size: 14.5px; font-weight: 700; color: var(--wood-deep); line-height: 1.35; }
.task-card .tc-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.task-card .tc-row { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; line-height: 1.5; }
.task-card .tc-row b { color: var(--wood-deep); }
.task-card .tc-steps {
  font-size: 12px; color: var(--ink-soft);
  background: var(--cream); border-radius: var(--radius-xs);
  padding: 9px 11px; margin: 7px 0;
}
.task-card .tc-steps .step { display: flex; gap: 6px; margin-bottom: 3px; }
.task-card .tc-steps .step .idx {
  flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--honey); color: #3D2810; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.task-card .tc-link {
  font-size: 11.5px; color: var(--honey-deep); text-decoration: underline;
  cursor: pointer; font-weight: 600;
}
.task-card .tc-input {
  width: 100%; padding: 5px 8px; margin-top: 5px;
  border: 1.5px solid var(--border-soft); border-radius: var(--radius-xs);
  background: var(--paper); font-size: 11px; font-family: inherit;
}
.task-card .tc-input:focus { border-color: var(--honey-deep); outline: none; }
.task-card .tc-foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 9px; border-top: 2px dashed var(--border-soft);
}

/* 状态 */
.task-card.mastered { border-color: var(--grass); background: #F4FBEB; }
.task-card.mastered::after { content:"🏅"; }
.task-card.tried { border-color: var(--honey); }
.task-card.favorited { box-shadow: 0 0 0 2px var(--pink), 0 3px 0 var(--border-soft); }
.task-card.archived { opacity: 0.55; border-style: dashed; }
.task-card.locked { opacity: 0.5; filter: grayscale(0.4); }

/* 打卡/按钮组 */
.punch-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 30px;
  border: 2px solid var(--wood); background: var(--paper-soft);
  color: var(--ink-soft); font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all .18s;
}
.punch-btn:hover { background: var(--cream); }
.punch-btn.done { background: #B5DE8A; color: #3F6A12; border-color: var(--grass-deep); }
.punch-btn.tried { background: var(--honey-light); color: var(--wood-deep); border-color: var(--honey-deep); }
.icon-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--paper-soft);
  cursor: pointer; font-size: 14px; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.icon-btn:hover { background: var(--cream); transform: scale(1.08); }
.icon-btn.active { background: var(--honey); border-color: var(--honey-deep); }

/* ===================== 蜂蜜罐进度条 ===================== */
.honey-jar {
  position: relative; width: 100%; height: 28px;
  background: var(--cream-deep);
  border: 2.5px solid var(--wood); border-radius: 14px; overflow: hidden;
}
.honey-jar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--honey-light), var(--honey));
  border-radius: 12px 0 0 12px; transition: width .6s ease;
}
.honey-jar .label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: var(--wood-deep);
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}

/* 圆形进度 */
.ring-progress { position: relative; width: 108px; height: 108px; margin: 0 auto; }
.ring-progress svg { transform: rotate(-90deg); }
.ring-progress .ring-bg { stroke: var(--cream-deep); }
.ring-progress .ring-fg { stroke: var(--honey-deep); stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ring-progress .ring-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-progress .ring-text .num { font-size: 22px; font-weight: 800; color: var(--wood-deep); }
.ring-progress .ring-text .lbl { font-size: 10.5px; color: var(--ink-soft); }

/* ===================== 表格 ===================== */
.tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--paper-soft); border: 2.5px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; font-size: 12.5px;
}
.tbl th, .tbl td { padding: 9px 11px; text-align: left; border-bottom: 1.5px dashed var(--border-soft); }
.tbl th { background: var(--cream-deep); color: var(--wood-deep); font-weight: 700; font-size: 12px; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--cream); }

/* ===================== 输入控件 ===================== */
.input, .select, .textarea {
  width: 100%; padding: 8px 11px;
  border: 2px solid var(--border); border-radius: var(--radius-xs);
  background: var(--paper-soft); color: var(--ink);
  font-size: 12.5px; font-family: inherit; outline: none;
  transition: border-color .18s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--honey-deep); }
.textarea { resize: vertical; min-height: 60px; }
.field { margin-bottom: 11px; }
.field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 3px; }

/* ===================== 模态弹窗 ===================== */
.modal-mask {
  position: fixed; inset: 0; background: rgba(90, 64, 48, 0.42);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal-mask.show { display: flex; }
.modal {
  background: var(--paper-soft); border: 3px solid var(--wood);
  border-radius: var(--radius-xl); padding: 26px 24px;
  max-width: 440px; width: 100%; text-align: center;
  box-shadow: 0 12px 40px var(--shadow); position: relative;
}
.modal .modal-emoji { font-size: 46px; animation: bob 1.2s ease-in-out infinite; }
.modal h3 { color: var(--wood-deep); margin: 8px 0 6px; font-size: 19px; }
.modal p { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 16px; }
.modal .modal-close {
  position: absolute; top: 10px; right: 14px;
  font-size: 22px; color: var(--ink-light); cursor: pointer; border: none; background: none;
}

/* ===================== Toast ===================== */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--wood-deep); color: #fff;
  padding: 9px 18px; border-radius: 30px;
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 20px var(--shadow); z-index: 200;
  transition: transform .3s ease; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ===================== 气泡提示 ===================== */
.bubble {
  background: linear-gradient(135deg, #FFF8E7, var(--cream));
  border: 2px solid var(--honey);
  border-radius: 18px; padding: 12px 16px;
  position: relative; font-size: 12.5px; color: var(--ink-soft);
  box-shadow: 0 3px 10px var(--shadow-soft);
}
.bubble::before {
  content: "🌿"; margin-right: 6px;
}
.bubble.warn { border-color: var(--pink); background: linear-gradient(135deg, #FFF0F4, #FCE4EC); }
.bubble.warn::before { content: "⚠️"; }

/* 装饰分割线 */
.divider {
  text-align: center; margin: 16px 0; color: var(--ink-light); font-size: 14px;
  position: relative;
}
.divider::before, .divider::after {
  content: ""; display: inline-block; width: 80px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--border)); vertical-align: middle;
  margin: 0 12px;
}
.divider::after { background: linear-gradient(90deg, var(--border), transparent); }

/* ===================== 工具类 ===================== */
.muted { color: var(--ink-light); }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 10px; }
.gap-sm { gap: 6px; }
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.flex-1 { flex: 1; }
.hide { display: none !important; }

/* 缩略图 */
.thumb {
  width: 44px; height: 44px; border-radius: var(--radius-xs);
  background: var(--cream-deep); border: 1.5px solid var(--border-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}

/* 看板列 */
.kanban-col {
  background: var(--cream); border: 2px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 12px; min-height: 200px;
}

/* ===================== 响应式 ===================== */
@media (max-width: 980px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .side-nav { position: fixed; left: -260px; transition: left .3s ease; width: 240px; }
  .side-nav.open { left: 0; }
  .main-area { padding: 64px 14px 50px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-auto { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 21px; }
  .banner { padding: 14px 16px; }
  .banner .banner-emoji { font-size: 32px; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--wood); border-radius: 10px; border: 2px solid var(--cream); }

/* 数字+emoji 同行时紧凑 */
.card > div, .tc-row { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }