/* FungTree Education 设计系统 — 从 redesign_mockup_v2.html 抽取 */
/* ===========================================================
   FungTree Education · 田野手记 × 游戏层 设计系统
   - 暖米白纸感底 + 深苔藓绿主色 + 锈橙强调 + 金色XP
   - 菇小二吉祥物全程陪伴
   - 衬线标题 + 无衬线正文 + 等宽数字
=========================================================== */
:root{
  /* 基础纸感 */
  --bg:#f3ede0;            /* 旧标本纸暖米白 */
  --bg-soft:#efe8d8;
  --paper:#fbf7ed;         /* 卡片底,比 bg 更亮 */
  --paper-soft:#f4eedd;    /* 次级面板 */
  --paper-warm:#f7eeda;    /* 暖光面板 */
  --ink:#1c2620;           /* 主文字,深森林墨 */
  --ink-soft:#3a443c;
  --muted:#6a7268;         /* 次文字,苔藓灰 */
  --line:#d9d0bc;          /* 米色分割线 */
  --line-soft:#e6ddc8;

  /* 主色:深苔藓绿 */
  --primary:#1a3a2e;       /* 深森林绿 */
  --primary-2:#2d4a3e;     /* 学生模式中绿 */
  --primary-3:#3d4a45;     /* admin 苔藓灰绿 */
  --primary-soft:#e3ebe4;  /* 浅森林绿 */
  --primary-deep:#0f2419;

  /* 强调:锈橙(蘑菇伞盖) */
  --accent:#c8602c;
  --accent-2:#a8501f;
  --accent-soft:#f5e4d8;
  --accent-glow:rgba(200,96,44,.18);

  /* 游戏化色 */
  --gold:#c8941f;          /* XP 金 */
  --gold-soft:#f5e6c0;
  --xp-grad:linear-gradient(90deg,#e8b339,#c8941f);
  --streak:#e8743c;       /* 连击橙红 */

  /* 状态色 */
  --danger:#a8483f;        /* 毒性红 */
  --danger-soft:#f2d8d4;
  --warning:#b17a27;
  --warning-soft:#f0e0c2;
  --success:#2d6b4f;
  --success-soft:#d4e6da;
  --info:#3d6a7a;
  --info-soft:#d6e3ea;

  /* 字体 */
  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","Cascadia Code","Consolas",monospace;

  /* 圆角 */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  /* 阴影(克制) */
  --shadow-sm:0 2px 8px rgba(28,38,32,.04);
  --shadow:0 4px 16px rgba(28,38,32,.06);
  --shadow-lg:0 14px 40px rgba(28,38,32,.10);
  --shadow-glow:0 0 0 6px var(--accent-glow);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:
    radial-gradient(circle at 88% 8%, rgba(200,96,44,.06), transparent 32rem),
    radial-gradient(circle at 8% 24%, rgba(26,58,46,.06), transparent 30rem),
    radial-gradient(circle at 50% 100%, rgba(200,148,31,.05), transparent 32rem),
    linear-gradient(to bottom right, #f5efe2 0%, #f3ede0 50%, #f1eadb 100%);
  background-attachment:fixed;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:0;background:transparent}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ===========================================================
   主框架:左 sidebar + 右 workspace
=========================================================== */
.app{
  display:grid;
  grid-template-columns:268px 1fr;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  position:sticky;top:0;
  height:100vh;
  background:linear-gradient(180deg,var(--primary-deep) 0%, var(--primary) 100%);
  color:#e8e3d4;
  padding:22px 18px 24px;
  display:flex;flex-direction:column;
  gap:18px;
  overflow-y:auto;
}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-color:transparent}

.brand{
  display:flex;align-items:center;gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.brand-mark{
  width:44px;height:44px;
  border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--accent) 0%,var(--gold) 100%);
  display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:1.05rem;
  box-shadow:0 6px 18px rgba(200,96,44,.35);
}
.brand-title{font-family:var(--font-serif);font-weight:900;font-size:1.12rem;color:#fff;letter-spacing:-.01em}
.brand-sub{font-size:.76rem;color:#b8c0b2;letter-spacing:.04em}

.learner-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);
  padding:14px;
}
.learner-row{display:flex;align-items:center;gap:12px}
.learner-avatar{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold) 0%, var(--accent) 100%);
  display:grid;place-items:center;color:#fff;font-weight:900;font-family:var(--font-serif);
  border:2px solid rgba(255,255,255,.20);
  position:relative;
  overflow:hidden;
}
.learner-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.learner-avatar::after{
  content:"";position:absolute;right:-2px;bottom:-2px;
  width:14px;height:14px;border-radius:50%;
  background:var(--success);border:2px solid var(--primary-deep);
}
.learner-info{flex:1;min-width:0}
.learner-name{font-weight:800;color:#fff;font-size:.95rem}
.learner-mode{font-size:.74rem;color:#b8c0b2}

.home-welcome-card{
  background:linear-gradient(135deg,var(--paper-warm) 0%,var(--paper) 100%);
  border-color:var(--accent);
  position:relative;
  overflow:hidden;
}
.home-welcome-grid{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 120px;
  gap:18px;
  align-items:center;
}
.student-profile-avatar{
  width:96px;
  height:96px;
  border-radius:24px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,#f5e5bf,#c8602c);
  color:#fff;
  font-family:var(--font-serif);
  font-size:2.4rem;
  font-weight:900;
  border:1px solid rgba(200,96,44,.24);
  box-shadow:0 14px 32px rgba(28,38,32,.12);
}
.student-profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.home-welcome-title{
  font-family:var(--font-serif);
  font-size:1.55rem;
  font-weight:800;
  margin:6px 0 4px;
  letter-spacing:0;
}
.home-welcome-copy{
  font-size:.92rem;
  margin:0;
}

.xp-mini{margin-top:10px}
.xp-mini-head{display:flex;justify-content:space-between;font-size:.72rem;color:#c8d0c2;margin-bottom:4px}
.xp-mini-bar{height:6px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden}
.xp-mini-fill{height:100%;background:var(--xp-grad);border-radius:999px;width:62%;
  box-shadow:0 0 8px rgba(232,179,57,.5);}

.streak-pill{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:8px;padding:3px 9px;
  background:rgba(232,116,60,.18);color:#ffd9c2;
  border-radius:999px;font-size:.72rem;font-weight:800;
}
.streak-pill::before{content:""}

.nav-section{display:flex;flex-direction:column;gap:5px}
.nav-section-label{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:#8a9488;padding:0 10px 6px;font-weight:800;
}
.nav-item{
  display:flex;align-items:center;gap:13px;
  padding:13px 13px;border-radius:var(--r-sm);
  color:#cdd5c6;font-size:1rem;font-weight:600;
  transition:all .18s ease;cursor:pointer;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.is-active{
  background:linear-gradient(90deg,rgba(200,96,44,.18) 0%, rgba(200,96,44,.04) 100%);
  color:#fff;font-weight:800;
  box-shadow:inset 3px 0 0 var(--accent);
}
.nav-item .nav-ico{
  width:18px;height:18px;flex-shrink:0;
  display:grid;place-items:center;
  font-size:.95rem;opacity:.85;
}
.nav-item.is-active .nav-ico{opacity:1}
.nav-badge{
  margin-left:auto;font-size:.7rem;font-weight:800;
  background:var(--accent);color:#fff;
  padding:1px 7px;border-radius:999px;
}
.nav-badge.gold{background:var(--gold)}

.sidebar-footer{
  margin-top:auto;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:.74rem;color:#8a9488;line-height:1.55;
}
.sidebar-footer b{color:#b8c0b2}

/* ---------- Workspace ---------- */
.workspace{
  padding:0 0 80px;
  min-width:0;
}
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(243,237,224,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.topbar-left{display:flex;align-items:center;gap:14px}
.topbar-title{font-family:var(--font-serif);font-size:1.2rem;font-weight:800;letter-spacing:-.01em}
.topbar-sub{font-size:.8rem;color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:36px;height:36px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--paper);
  display:grid;place-items:center;font-size:1rem;color:var(--ink-soft);
  transition:all .18s;
}
.icon-btn:hover{background:var(--paper-soft);border-color:var(--accent);color:var(--accent)}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-pill);
  font-weight:700;font-size:.88rem;
  border:1px solid transparent;
  transition:all .18s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary) 0%, var(--primary-2) 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(26,58,46,.18);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(26,58,46,.25)}
.btn-accent{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(200,96,44,.22);
}
.btn-accent:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(200,96,44,.32)}
.btn-ghost{
  background:var(--paper);border-color:var(--line);color:var(--ink);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-soft{
  background:var(--primary-soft);color:var(--primary);
}
.btn-danger{
  background:var(--danger);color:#fff;
}
.btn:disabled,
.icon-btn:disabled{
  opacity:.48;
  cursor:not-allowed;
  transform:none!important;
  box-shadow:none!important;
}
.btn-sm{padding:6px 12px;font-size:.8rem}
.btn-block{width:100%;justify-content:center}
.btn-lg{padding:12px 22px;font-size:.95rem}

.workspace-body{padding:24px 32px 0;max-width:1480px;margin:0 auto}

/* ===========================================================
   页面切换
=========================================================== */
.page{display:none;animation:pageIn .35s ease}
.page.is-active{display:block}
@keyframes pageIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===========================================================
   通用组件
=========================================================== */
.kicker{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-2);
  font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.kicker.green{background:var(--primary-soft);color:var(--primary)}
.kicker.gold{background:var(--gold-soft);color:var(--gold)}
.kicker.danger{background:var(--danger-soft);color:var(--danger)}

.section{margin-bottom:36px}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:14px;flex-wrap:wrap;
}
.section-title{
  font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em;
  margin:6px 0 4px;
}
.section-desc{color:var(--muted);font-size:.92rem;max-width:60ch}

/* 卡片 */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:12px;
}
.card-title{font-family:var(--font-serif);font-weight:800;font-size:1.06rem;letter-spacing:-.01em}
.card-sub{font-size:.8rem;color:var(--muted)}

/* 网格 */
.grid{display:grid;gap:16px}
.grid > *,
.card,
.topbar-left,
.section-head > *{min-width:0}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.col-1-1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.col-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.col-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.col-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}

/* 统计卡 */
.stat{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 16px;
  position:relative;overflow:hidden;
}
.stat-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--accent);
}
.stat.green::before{background:var(--success)}
.stat.gold::before{background:var(--gold)}
.stat.danger::before{background:var(--danger)}
.stat-num{
  font-family:var(--font-serif);font-weight:900;
  font-size:1.85rem;letter-spacing:-.03em;line-height:1;
  color:var(--ink);
}
.stat-num .unit{font-size:.85rem;color:var(--muted);font-weight:600;margin-left:4px;font-family:var(--font-sans)}
.stat-label{font-size:.8rem;color:var(--muted);margin-top:5px}
.stat-trend{font-size:.72rem;font-weight:800;margin-top:4px}
.stat-trend.up{color:var(--success)}
.stat-trend.down{color:var(--danger)}
.stat-week{
  max-width:116px;
  padding:5px 8px;
  border-radius:999px;
  background:var(--paper-soft);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  line-height:1.35;
  text-align:right;
}
.stat-week.up{color:var(--danger);border-color:rgba(180,70,60,.25);background:rgba(180,70,60,.08)}
.stat-week.down{color:var(--success);border-color:rgba(42,124,80,.28);background:rgba(42,124,80,.08)}
.stat-week.flat{color:var(--muted)}

/* XP 大条 */
.xp-card{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%);
  color:#fff;border-radius:var(--r-lg);
  padding:18px 20px;
  position:relative;overflow:hidden;
}
.xp-card::after{
  content:"";position:absolute;right:-20px;top:-30px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,179,57,.25),transparent 70%);
}
.xp-card .level-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px;border-radius:999px;
  background:rgba(232,179,57,.20);color:var(--gold-soft);
  font-size:.72rem;font-weight:800;letter-spacing:.1em;
}
.xp-card .level-num{
  font-family:var(--font-serif);font-weight:900;
  font-size:2.4rem;letter-spacing:-.04em;line-height:1;
  margin:8px 0 4px;
}
.xp-card .level-label{color:#c8d0c2;font-size:.85rem;margin-bottom:12px}
.xp-bar{
  height:10px;background:rgba(255,255,255,.10);
  border-radius:999px;overflow:hidden;position:relative;
}
.xp-fill{
  height:100%;background:var(--xp-grad);border-radius:999px;width:62%;
  position:relative;
  box-shadow:0 0 12px rgba(232,179,57,.4);
}
.xp-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:shimmer 2.2s linear infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.xp-meta{
  display:flex;justify-content:space-between;
  font-size:.74rem;color:#c8d0c2;margin-top:6px;
}

/* 连击卡 */
.streak-card{
  background:linear-gradient(135deg,#e8743c 0%,#c8401f 100%);
  color:#fff;border-radius:var(--r-lg);padding:14px 16px;
  position:relative;overflow:hidden;
}
.streak-achievement-card{
  min-height:152px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:24px;
  align-items:center;
  padding:22px 24px;
}
.streak-card::after{
  content:"";position:absolute;right:-10px;bottom:-20px;
  width:150px;height:150px;opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.streak-card .streak-num{
  font-family:var(--font-serif);font-weight:900;font-size:2.2rem;
  letter-spacing:-.03em;line-height:1;
}
.streak-achievement-card .streak-num{
  font-size:3.2rem;
}
.streak-card .streak-label{font-size:.78rem;opacity:.92;margin-top:4px}
.streak-copy{
  position:relative;
  z-index:1;
}

/* 徽章 */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
.badge{
  aspect-ratio:1;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px;text-align:center;
  transition:all .2s ease;cursor:pointer;position:relative;
}
.badge:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.badge.unlocked{
  background:linear-gradient(135deg,var(--gold-soft) 0%,var(--paper) 100%);
  border-color:var(--gold);
}
.badge.locked{opacity:.45;filter:grayscale(.6)}
.badge-ico{font-size:1.6rem;line-height:1}
.badge-name{font-size:.7rem;font-weight:800;margin-top:4px;color:var(--ink)}
.badge.locked .badge-name{color:var(--muted)}
.badge-rarity{
  position:absolute;top:4px;right:4px;
  width:7px;height:7px;border-radius:50%;
}
.badge-rarity.r-common{background:#9aa6a0}
.badge-rarity.r-rare{background:var(--info)}
.badge-rarity.r-epic{background:var(--accent)}
.badge-rarity.r-legend{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.badge-preview-card{
  width:100%;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition:all .2s ease;
  position:relative;
  z-index:2;
}
.badge-preview-card:hover{
  transform:translateY(-1px);
}
.badge-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.badge-preview-link{
  flex:0 0 auto;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
}
.badge-preview-title{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:1.02rem;
}
.badge-preview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.badge-preview-item{
  position:relative;
  min-height:86px;
  padding:10px 8px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
}
.badge-preview-item.unlocked{
  border-color:rgba(255,238,180,.75);
  background:rgba(255,238,180,.22);
}
.badge-preview-item.locked{
  color:rgba(255,255,255,.86);
}
.badge-preview-item.locked .badge-icon-svg{
  color:rgba(255,255,255,.72);
  opacity:1;
}
.badge-preview-item.unlocked .badge-icon-svg{
  color:#fff2b8;
}
.badge-preview-item .badge-icon-svg{
  width:30px;
  height:30px;
}
.badge-preview-item .badge-name{
  width:100%;
  margin-top:8px;
  font-size:.72rem;
  font-weight:800;
  line-height:1.2;
  color:#fff;
}
.badge-page-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.badge-detail-note{
  margin-top:5px;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.35;
}
.badge-placeholder-item{
  border-style:dashed;
}
.badge-page-item{
  position:relative;
  min-height:170px;
  padding:22px 16px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid var(--line);
  background:var(--paper-soft);
}
.badge-page-item.unlocked{
  border-color:var(--gold);
  background:linear-gradient(135deg,var(--gold-soft),var(--paper));
}
.badge-page-item.locked{
  color:var(--muted);
}
.badge-page-item .badge-icon-svg{
  width:42px;
  height:42px;
}
.badge-page-item.unlocked .badge-icon-svg{
  color:var(--gold);
}
.badge-page-item.locked .badge-icon-svg{
  color:var(--muted);
}
.badge-page-item .badge-name{
  margin-top:12px;
  font-size:.92rem;
  font-weight:800;
  line-height:1.25;
}

.home-quick-card{
  padding:20px 22px 18px;
}
.home-quick-list{
  display:grid;
  gap:0;
  border-top:1px solid var(--line-soft);
}
.home-quick-empty{
  padding:18px;
  border:1px dashed var(--line);
  background:var(--paper-soft);
}
.home-course-entry{
  width:100%;
  min-height:78px;
  padding:14px 0;
  border:0;
  border-bottom:1px solid var(--line-soft);
  background:transparent;
  text-align:left;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto 34px;
  align-items:center;
  gap:14px;
  transition:all .18s ease;
}
.home-course-entry:hover{
  background:rgba(200,96,44,.045);
}
.home-course-no{
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--paper-soft);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:900;
}
.home-course-main{
  min-width:0;
  display:grid;
  gap:3px;
}
.home-course-entry-top{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-size:.74rem;
  font-weight:900;
}
.home-course-entry-top span{
  padding:3px 9px;
  border-radius:999px;
  background:var(--accent-soft);
}
.home-course-entry-top b{
  color:var(--muted);
  font-family:var(--font-mono);
}
.home-course-title{
  font-family:var(--font-serif);
  font-size:1rem;
  font-weight:900;
  line-height:1.25;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-course-lesson{
  color:var(--muted);
  font-size:.8rem;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-course-arrow{
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:900;
}

.home-activity-card{
  padding:20px 22px 18px;
}
.activity-total{
  padding:6px 12px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:900;
  white-space:nowrap;
}
.home-activity-layout{
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);
  gap:18px;
  align-items:start;
  margin-top:14px;
}
.activity-info{
  min-height:100%;
  padding:16px;
  border:1px solid var(--line-soft);
  background:var(--paper-soft);
  border-radius:var(--r-md);
}
.activity-info dl{
  display:grid;
  gap:10px;
  margin:0;
}
.activity-info dl div{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.activity-info dt{
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
}
.activity-info dd{
  margin:0;
  color:var(--ink);
  font-size:.9rem;
  font-weight:800;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.activity-desc{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
  color:var(--muted);
  font-size:.84rem;
  line-height:1.6;
}
.activity-form{
  padding:16px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--paper);
}
.activity-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.activity-form-grid label{
  display:grid;
  gap:6px;
  min-width:0;
}
.activity-form-grid span{
  color:var(--muted);
  font-size:.78rem;
  font-weight:900;
}
.activity-form-grid input{
  width:100%;
  height:38px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 11px;
  background:var(--paper-soft);
  color:var(--ink);
  font:inherit;
  outline:0;
}
.activity-form-grid input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200,96,44,.12);
}
.activity-form-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}
.activity-status{
  min-height:1.2em;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.4;
}
.activity-notes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.activity-note{
  min-height:64px;
  padding:11px 12px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--paper-soft);
}
.activity-note-main{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--ink);
  font-size:.85rem;
}
.activity-note-main b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.activity-note-main span{
  flex-shrink:0;
  color:var(--accent);
  font-family:var(--font-mono);
  font-weight:900;
}
.activity-note p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.activity-note.is-empty{
  grid-column:1 / -1;
  display:grid;
  place-items:center start;
  color:var(--muted);
}

/* 菌物标本卡(图鉴式) */
.specimen-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:all .22s ease;cursor:pointer;
  position:relative;
}
.specimen-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.specimen-img{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#e8e2d2,#d4cdb8);
  position:relative;overflow:hidden;
}
.specimen-img img{width:100%;height:100%;object-fit:cover}
.specimen-lock{
  position:absolute;inset:0;
  background:rgba(28,38,32,.85);
  display:grid;place-items:center;
  color:#c8d0c2;font-size:1.6rem;
  backdrop-filter:blur(2px);
}
.specimen-lock .lock-emoji{filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.specimen-body{padding:11px 12px 12px}
.specimen-name{font-family:var(--font-serif);font-weight:800;font-size:.95rem;letter-spacing:-.01em}
.specimen-latin{font-size:.76rem;color:var(--muted);font-style:italic;margin-top:1px}
.specimen-meta{font-size:.74rem;color:var(--muted);margin-top:4px}
.specimen-tag{
  display:inline-block;padding:1px 7px;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;
  margin-top:6px;
}
.tag-edible{background:var(--success-soft);color:var(--success)}
.tag-toxic{background:var(--danger-soft);color:var(--danger)}
.tag-unknown{background:var(--line-soft);color:var(--muted)}
.tag-rare{background:var(--gold-soft);color:var(--gold)}
.specimen-no{
  position:absolute;top:8px;left:8px;
  font-family:var(--font-mono);font-size:.66rem;
  color:#fff;background:rgba(28,38,32,.55);
  padding:1px 6px;border-radius:4px;letter-spacing:.06em;
}

/* 模块入口卡(游戏中心) */
.module-card{
  display:block;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:0;overflow:hidden;
  transition:all .25s ease;cursor:pointer;
  position:relative;
}
.module-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.module-banner{
  aspect-ratio:16/9;
  position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.module-banner-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
}
.module-card[data-mod="unlock"] .module-banner-bg{background:linear-gradient(135deg,#3d5a3e,#1f3a26)}
.module-card[data-mod="observation"] .module-banner-bg{background:linear-gradient(135deg,#7a6849,#3d3522)}
.module-card[data-mod="classification"] .module-banner-bg{background:linear-gradient(135deg,#2d4a5a,#1a3040)}
.module-card[data-mod="toxicity"] .module-banner-bg{background:linear-gradient(135deg,#a8483f,#5e2620)}
.module-card[data-mod="course"] .module-banner-bg{background:linear-gradient(135deg,#7a5c1f,#3d2f10)}
.module-emoji{
  font-size:3.4rem;z-index:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
  transition:transform .25s ease;
}
.module-card:hover .module-emoji{transform:scale(1.1) rotate(-3deg)}
.module-diff{
  position:absolute;top:10px;right:10px;
  padding:2px 9px;border-radius:999px;
  background:rgba(0,0,0,.35);backdrop-filter:blur(8px);
  color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.15);
}
.module-body{padding:14px 16px 16px}
.module-title{
  font-family:var(--font-serif);font-weight:900;font-size:1.1rem;
  letter-spacing:-.01em;margin-bottom:3px;
}
.module-desc{font-size:.82rem;color:var(--muted);line-height:1.6}
.module-progress{
  display:flex;align-items:center;gap:10px;margin-top:10px;
  font-size:.74rem;color:var(--muted);
}
.module-progress-bar{
  flex:1;height:6px;background:var(--line-soft);
  border-radius:999px;overflow:hidden;
}
.module-progress-fill{height:100%;background:var(--accent);border-radius:999px}
.module-progress-pct{font-family:var(--font-mono);font-weight:800;color:var(--ink);min-width:32px;text-align:right}
.module-cta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);
}
.module-cta-text{font-size:.8rem;font-weight:800;color:var(--accent);letter-spacing:.04em}
.module-cta-arrow{
  width:24px;height:24px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:.9rem;font-weight:900;
  transition:all .2s ease;
}
.module-card:hover .module-cta-arrow{background:var(--accent);color:#fff;transform:translateX(3px)}

/* 旧排行列表样式 */
.leaderboard{list-style:none;padding:0;margin:0}
.leaderboard li{
  display:grid;grid-template-columns:32px 1fr auto auto;
  gap:12px;align-items:center;
  padding:9px 4px;border-bottom:1px dashed var(--line);
}
.leaderboard li:last-child{border-bottom:0}
.rank{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:.85rem;
  background:var(--paper-soft);color:var(--muted);
  font-family:var(--font-serif);
}
.rank.r1{background:linear-gradient(135deg,#f5d96b,#c8941f);color:#fff;box-shadow:0 4px 10px rgba(200,148,31,.35)}
.rank.r2{background:linear-gradient(135deg,#d8d8d8,#9a9a9a);color:#fff}
.rank.r3{background:linear-gradient(135deg,#d9a574,#a86a3f);color:#fff}
.lb-name{font-weight:700;font-size:.9rem}
.lb-meta{font-size:.74rem;color:var(--muted)}
.lb-xp{font-family:var(--font-mono);font-weight:800;color:var(--gold);font-size:.92rem}
.lb-streak{font-size:.78rem;color:var(--streak);font-weight:800}

/* 菌物课统一组件 */
.course-list{gap:14px}
.course-card-live{
  display:grid;
  grid-template-columns:74px minmax(0,1fr) auto auto;
  gap:18px;
  align-items:center;
}
.course-card-live.is-active{
  border-color:var(--accent);
  background:linear-gradient(90deg,var(--accent-soft),var(--paper));
}
.course-card-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--success-soft),var(--paper));
}
.course-card-icon .icon{
  width:28px;
  height:28px;
  color:var(--muted);
}
.course-tone-success .course-card-icon .icon,
.course-tone-success .course-card-percent,
.course-tone-success .course-card-meta span:first-child{color:var(--success)}
.course-tone-accent .course-card-icon .icon,
.course-tone-accent .course-card-percent,
.course-tone-accent .course-card-meta span:first-child{color:var(--accent)}
.course-tone-muted .course-card-icon .icon,
.course-tone-muted .course-card-percent,
.course-tone-muted .course-card-meta span:first-child{color:var(--muted)}
.course-card-title{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:1.14rem;
}
.course-card-summary{
  font-size:.86rem;
  color:var(--muted);
  margin-top:3px;
}
.course-card-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}
.course-card-meta span{
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:800;
}
.course-card-meta .icon{
  width:11px;
  height:11px;
}
.course-progress{
  margin-top:6px;
  height:6px;
}
.course-card-percent{
  font-family:var(--font-mono);
  font-weight:800;
}
.course-mascot{
  width:72px;
  height:72px;
  background-image:url('/static/mascot/guxiaoer_action_03_salute.png');
}
.lesson-list{gap:10px}
.lesson-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.lesson-row-title{font-weight:800}
.lesson-body{gap:14px}
.lesson-heading{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:1.2rem;
}
.lesson-paragraph{
  line-height:1.7;
  color:var(--ink);
}
.lesson-question-list{
  margin:0;
  padding-left:22px;
  color:var(--ink);
  line-height:1.7;
}
.lesson-question-list li{
  margin:4px 0;
}
.lesson-image{padding:8px}
.lesson-image img{
  width:100%;
}
.lesson-image figcaption{
  font-size:.8rem;
  color:var(--muted);
  margin-top:6px;
}
.specimen-name{font-weight:800}
.specimen-latin{
  font-style:italic;
  color:var(--muted);
}
.specimen-meta{
  font-size:.82rem;
  color:var(--muted);
}
.specimen-safety{
  font-size:.8rem;
  margin-top:4px;
  color:var(--warning);
}
.specimen-desc{
  font-size:.84rem;
  line-height:1.6;
  margin-top:6px;
}
.lesson-quiz-prompt{
  font-weight:800;
  margin-bottom:8px;
}
.lesson-quiz ul{
  list-style:none;
  padding:0;
  margin:0;
}
.lesson-quiz-option{
  padding:6px 10px;
  background:var(--paper-soft);
  margin-bottom:4px;
}
.lesson-quiz-explain{
  font-size:.82rem;
  color:var(--muted);
  margin-top:8px;
}

/* Course page unified surface */
.course-list{
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:14px;
}
.course-catalog-head{
  align-items:flex-start;
  margin-bottom:18px;
}
.course-count-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--muted);
  font-size:.8rem;
  font-weight:900;
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.course-path-strip{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--primary-soft) 62%,var(--paper));
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
}
.course-path-strip strong{
  color:var(--primary);
  font-weight:950;
}
.course-path-strip span{overflow-wrap:anywhere}
.course-guide{margin-bottom:18px}
.course-detail-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.course-detail-head > div{
  min-width:0;
  flex:1;
}
.course-detail-head .section-title{
  line-height:1.18;
  overflow-wrap:anywhere;
  max-width:980px;
}
.course-detail-head .course-nav-back{
  flex-shrink:0;
  align-self:flex-end;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--paper);
  color:var(--ink-soft);
  font-size:.8rem;
  font-weight:800;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.course-detail-head .course-nav-back:hover{
  border-color:var(--accent);
  color:var(--accent-2);
  background:var(--accent-soft);
}
.lesson-detail-head{
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.lesson-crumb{
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  line-height:1.4;
}
.lesson-section-meta{
  margin-top:10px;
  display:inline-block;
  padding:2px 10px;
  border-radius:var(--r-pill);
  background:var(--primary-soft);
  color:var(--primary);
  font-size:.76rem;
  font-weight:900;
  line-height:1.4;
}
.lesson-detail-title{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 .12em;
  font-size:clamp(1.4rem,2vw,1.7rem);
  letter-spacing:-.01em;
  margin:8px 0 0;
}
.lesson-detail-index{
  display:inline-flex;
  align-items:center;
  min-height:1.9em;
  padding:0 .72em;
  border:1px solid rgba(26,58,46,.18);
  border-radius:var(--r-pill);
  background:var(--primary-soft);
  color:var(--primary);
  font-family:var(--font-sans);
  font-size:.42em;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1;
  transform:translateY(-.22em);
}
.lesson-detail-separator{
  color:var(--accent);
  font-size:.88em;
  margin:0 .08em 0 .12em;
}
.lesson-detail-main{
  min-width:0;
}
.course-detail-topbar{display:none}
.course-empty{color:var(--muted)}
.course-card-live{
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:16px;
  min-height:124px;
  align-items:center;
}
.course-card-live.is-complete{border-color:var(--success)}
.course-card-icon{
  border-radius:var(--r-md);
  border:1px solid var(--line-soft);
}
.course-card-title{
  line-height:1.35;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.course-card-summary{
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.course-card-meta{gap:10px 12px;margin-top:8px}
.course-progress-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin-top:8px;
}
.course-progress{
  width:100%;
  height:6px;
  display:block;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:999px;
  overflow:hidden;
  background:var(--line-soft);
}
.course-progress::-webkit-progress-bar{
  background:var(--line-soft);
  border-radius:999px;
}
.course-progress::-webkit-progress-value{
  background:linear-gradient(90deg,var(--success),#7fa66a);
  border-radius:999px;
}
.course-progress::-moz-progress-bar{
  background:linear-gradient(90deg,var(--success),#7fa66a);
  border-radius:999px;
}
.course-card-percent{white-space:nowrap}
.lesson-list{
  display:grid;
  gap:12px;
}
.lesson-row{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:56px;
  padding:12px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.lesson-row:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:var(--shadow);
}
.lesson-row-index{
  flex-shrink:0;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--primary-soft);
  color:var(--primary);
  font-family:var(--font-mono);
  font-weight:900;
  font-size:.8rem;
}
.lesson-row-main{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
}
.lesson-row-title{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:.98rem;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.lesson-row-meta{
  color:var(--muted);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lesson-row-arrow{justify-self:end}
.lesson-body{
  max-width:760px;
  display:grid;
  gap:6px;
}
.lesson-block{margin:0}
.lesson-plan{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(220px,.9fr);
  gap:12px;
  align-items:stretch;
  padding:14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:4px solid var(--success);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.lesson-plan-main strong{
  display:block;
  font-size:1.02rem;
  line-height:1.45;
}
.lesson-plan-main p{
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.55;
}
.lesson-task-steps{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
  counter-reset:lesson-step;
}
.lesson-task-steps li{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-height:28px;
  font-weight:800;
  font-size:.86rem;
}
.lesson-task-steps li::before{
  counter-increment:lesson-step;
  content:counter(lesson-step);
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--success-soft);
  color:var(--success);
  font-family:var(--font-mono);
  font-size:.72rem;
}
.lesson-focus-tags{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.lesson-focus-tags span{
  padding:4px 9px;
  border-radius:var(--r-pill);
  background:var(--paper-soft);
  color:var(--ink-soft);
  font-size:.78rem;
  font-weight:800;
}
.lesson-heading{
  font-family:var(--font-serif);
  font-size:1.2rem;
  font-weight:900;
  line-height:1.4;
  margin-top:28px;
  margin-bottom:2px;
  padding-bottom:6px;
  border-bottom:1.5px solid var(--line);
  color:var(--primary);
}
.lesson-heading:first-child{margin-top:0}
.lesson-paragraph{
  max-width:760px;
  line-height:1.85;
  font-size:.95rem;
  color:var(--ink-soft);
  margin-bottom:4px;
  overflow-wrap:anywhere;
}
.lesson-question-list{
  max-width:760px;
  padding:12px 0 12px 22px;
  border-left:3px solid var(--accent);
  background:var(--accent-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  line-height:1.8;
  font-size:.94rem;
  overflow-wrap:anywhere;
}
.lesson-question-list li{
  margin:6px 0;
  padding-left:4px;
}
.lesson-image{
  padding:8px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.lesson-image img{
  width:100%;
  max-height:520px;
  object-fit:contain;
  background:#fffdf7;
}
.lesson-image figcaption{
  margin-top:8px;
  padding:0 4px 2px;
}
.lesson-specimen{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.lesson-specimen-media{
  aspect-ratio:1;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--paper-soft);
  border:1px solid var(--line-soft);
}
.lesson-specimen-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.lesson-specimen-body{min-width:0}
.specimen-safety{
  display:inline-flex;
  margin-top:6px;
  padding:2px 9px;
  border-radius:var(--r-pill);
  background:var(--warning-soft);
  font-size:.76rem;
  font-weight:800;
}
.specimen-desc{
  line-height:1.65;
  margin:8px 0 0;
  overflow-wrap:anywhere;
}
.lesson-quiz{
  padding:16px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  margin-top:8px;
}
.lesson-quiz-prompt{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:1.02rem;
  line-height:1.5;
  margin-bottom:12px;
  color:var(--ink);
}
.lesson-quiz-prompt .lesson-mini-title{
  display:inline;
  margin:0;
  font:inherit;
  color:inherit;
}
.lesson-quiz-options{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:6px;
}
.lesson-quiz-option{
  width:100%;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:center;
  text-align:left;
  padding:10px 12px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--paper-soft);
  overflow-wrap:anywhere;
  cursor:pointer;
  font:inherit;
  font-size:.92rem;
  color:var(--ink-soft);
  transition:border-color .15s ease,background .15s ease;
}
.lesson-quiz-option:hover:not(:disabled){
  border-color:var(--accent);
  background:var(--accent-soft);
}
.lesson-quiz-option span{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--paper);
  color:var(--muted);
  font-family:var(--font-mono);
  font-weight:900;
  font-size:.76rem;
}
.lesson-quiz-option.is-correct{
  border-color:var(--success);
  background:var(--success-soft);
}
.lesson-quiz-option.is-wrong{
  border-color:var(--danger);
  background:var(--danger-soft);
}
.lesson-quiz-option:disabled{
  cursor:default;
}
.lesson-quiz-explain{
  margin:12px 0 0;
  padding:10px 14px;
  background:var(--success-soft);
  border-radius:var(--r-sm);
  line-height:1.75;
  font-size:.9rem;
  color:var(--ink-soft);
}
.lesson-mini-title{
  margin:4px 0 8px;
  color:var(--accent);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.06em;
}
.lesson-practice-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:10px;
}
.lesson-practice-head strong{
  display:block;
  line-height:1.35;
}
.lesson-practice-head > span{
  flex:0 0 auto;
  color:var(--muted);
  font-size:.76rem;
  font-weight:800;
}
.lesson-practice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:10px;
}
.lesson-practice-card{
  min-width:0;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--paper);
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.lesson-practice-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:var(--shadow-sm);
}
.lesson-practice-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:calc(var(--r-md) - 2px);
  background:var(--paper-soft);
}
.lesson-practice-card b,
.lesson-practice-card span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lesson-practice-card b{
  margin-top:7px;
  font-size:.84rem;
}
.lesson-practice-card span{
  color:var(--muted);
  font-size:.74rem;
}
.lesson-practice-card em{
  display:none;
  margin-top:6px;
  padding:4px 8px;
  border-radius:var(--r-sm);
  background:var(--success-soft);
  color:var(--success);
  font-size:.72rem;
  font-style:normal;
  font-weight:900;
  overflow-wrap:anywhere;
}
.lesson-practice-card.is-revealed em{
  display:block;
}
.empty-card{
  background:var(--paper-soft);
  border-style:dashed;
  text-align:center;
  padding:28px;
  color:var(--muted);
}

/* SVG 图标系统 */
.icon{
  display:inline-block;width:1em;height:1em;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-0.15em;flex-shrink:0;
}
.nav-ico{width:18px;height:18px;color:currentColor}
.nav-item .nav-ico{font-size:0}  /* 移除原 emoji 字号 */
.module-emoji{font-size:0}  /* 移除原 emoji,改用 .module-icon */
.module-icon{
  width:60px;height:60px;color:#fff;z-index:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
  transition:transform .25s ease;
}
.module-card:hover .module-icon{transform:scale(1.1) rotate(-3deg)}
.badge-ico{font-size:0}
.badge .badge-icon-svg{width:32px;height:32px;color:var(--accent)}
.badge.locked .badge-icon-svg{color:var(--muted)}
.badge.unlocked .badge-icon-svg{color:var(--gold)}
.tile-ico{font-size:0}
.tile-ico-svg{width:20px;height:20px;color:var(--primary)}

/* 菇小二吉祥物 —— 光晕底座 + 柔和投影,与背景自然融合 */
.guxiaoer{
  position:relative;
  isolation:isolate;
  display:inline-block;
  background-size:contain;background-repeat:no-repeat;background-position:center bottom;
  filter:drop-shadow(0 4px 6px rgba(28,38,32,.10));
  transition:transform .3s ease;
}
/* 暖色光晕底座:角色"站"在光晕上,而非硬贴 */
.guxiaoer::before{
  content:"";
  position:absolute;
  left:50%;bottom:-2px;
  transform:translateX(-50%);
  width:118%;height:26px;
  background:radial-gradient(ellipse at center,
    rgba(247,238,218,.95) 0%,
    rgba(245,228,200,.55) 32%,
    rgba(245,228,200,0) 72%);
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
/* 地面投影:增加站立感 */
.guxiaoer::after{
  content:"";
  position:absolute;
  left:50%;bottom:0px;
  transform:translateX(-50%);
  width:70%;height:6px;
  background:radial-gradient(ellipse at center, rgba(28,38,32,.18), transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
.guxiaoer-bubble{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:12px 14px;
  font-size:.86rem;line-height:1.6;
  box-shadow:var(--shadow);
  max-width:280px;
}
.guxiaoer-bubble::before{
  content:"";position:absolute;left:-8px;bottom:24px;
  width:14px;height:14px;background:var(--paper);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
.guxiaoer-bubble .bubble-kicker{
  font-size:.7rem;font-weight:800;color:var(--accent);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;
}
.guxiaoer-row{display:flex;align-items:flex-end;gap:10px}

/* 答题选项 */
.quiz-opt{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  padding:14px 16px;
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-md);
  transition:all .18s ease;
  font-weight:600;
}
.quiz-opt:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateX(3px)}
.quiz-opt .opt-letter{
  width:32px;height:32px;border-radius:50%;
  background:var(--paper-soft);color:var(--ink-soft);
  display:grid;place-items:center;font-weight:900;font-family:var(--font-serif);
  flex-shrink:0;
}
.quiz-opt:hover .opt-letter{background:var(--accent);color:#fff}
.quiz-opt.is-correct{border-color:var(--success);background:var(--success-soft)}
.quiz-opt.is-correct .opt-letter{background:var(--success);color:#fff}
.quiz-opt.is-wrong{border-color:var(--danger);background:var(--danger-soft)}
.quiz-opt.is-wrong .opt-letter{background:var(--danger);color:#fff}
.classification-layout{
  align-items:start;
}
.classification-question-card,
.classification-side-card,
.classification-options,
.class-feedback{
  min-width:0;
}
.classification-image-frame{
  aspect-ratio:4/3;
  width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--paper-soft);
}
.classification-image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.classification-options{
  display:grid;
  gap:10px;
}
.classification-status-title{
  margin:0 0 8px;
  font-size:.8rem;
  font-weight:900;
  color:var(--ink-soft);
  letter-spacing:.06em;
}
.classification-status-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px !important;
  align-items:center;
}
.class-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  font-size:.76rem;
  font-weight:800;
  line-height:1.35;
  overflow-wrap:anywhere;
  white-space:nowrap;
}
.class-status-pill.is-round{background:var(--gold-soft);color:var(--gold)}
.class-status-pill.is-success{background:var(--success-soft);color:var(--success)}
.class-status-pill.is-danger{background:var(--danger-soft);color:var(--danger)}
.class-feedback{
  margin-top:14px;
}
.class-round-complete,
.class-answer-result{
  padding:0;
  border-radius:0;
  border-left:0;
  background:transparent;
  overflow-wrap:anywhere;
}
.class-answer-result.is-wrong{
  border-left-color:transparent;
  background:transparent;
}
.class-feedback-title{
  font-family:inherit;
  font-size:.9rem;
  line-height:1.65;
  font-weight:900;
}
.class-feedback-body{
  margin-top:4px;
  font-size:.9rem;
  line-height:1.65;
}
.class-reveal-summary{
  margin:6px 0 0;
  color:var(--ink-soft);
  font-size:.86rem;
  line-height:1.55;
}
.class-specimen-name{
  margin-top:8px;
  overflow-wrap:anywhere;
}
.class-latin{
  color:var(--muted);
  font-style:italic;
}
.class-meta{
  color:var(--ink-soft);
  font-size:.84rem;
  overflow-wrap:anywhere;
}
.class-knowledge{
  margin-top:12px;
  padding:10px 12px;
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  background:var(--paper-soft);
}
.class-knowledge-title{
  font-family:var(--font-serif);
  font-weight:900;
  cursor:pointer;
  color:var(--accent);
}
.class-knowledge[open] .class-knowledge-title{
  margin-bottom:8px;
}
.class-knowledge-list{
  margin:8px 0;
  padding-left:18px;
  line-height:1.7;
}
.class-knowledge-note,
.class-safety-note{
  margin:8px 0 0;
  color:var(--ink-soft);
  font-size:.84rem;
}
.class-family{
  margin-top:8px;
  color:var(--ink-soft);
  font-size:.82rem;
}
.class-family b{
  color:var(--accent);
}
.class-next-btn{
  width:100%;
  justify-content:center;
}
.class-review-empty{
  line-height:1.7;
}
.opt-flag{
  margin-left:auto;
  font-size:.74rem;font-weight:800;letter-spacing:.04em;
  padding:2px 9px;border-radius:999px;
}
.opt-flag.edible{background:var(--success-soft);color:var(--success)}
.opt-flag.toxic{background:var(--danger-soft);color:var(--danger)}
.opt-flag.unknown{background:var(--line-soft);color:var(--muted)}

/* 进度条 */
.progress{height:8px;background:var(--line-soft);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--success),#7fa66a);border-radius:999px;transition:width .4s ease}

/* 表格 */
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{
  text-align:left;padding:9px 12px;
  background:var(--primary);color:#fff;
  font-weight:700;font-size:.78rem;letter-spacing:.04em;
}
.table th:first-child{border-radius:8px 0 0 0}
.table th:last-child{border-radius:0 8px 0 0}
.table td{padding:10px 12px;border-bottom:1px solid var(--line)}
.table tr:hover td{background:var(--paper-soft)}

/* 毒性翻牌 */
.toxicity-board{
  width:100%;
  display:grid;
  gap:18px;
}
.tox-roundbar{
  min-height:64px;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:0 0 16px;
  border-bottom:1px solid var(--line);
}
.tox-round-title{
  font-family:var(--font-serif);
  color:var(--ink);
  font-size:1.18rem;
  font-weight:900;
  white-space:nowrap;
}
.tox-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  gap:22px;
}
.tox-card{
  position:relative;perspective:1200px;
  cursor:pointer;
  aspect-ratio:4/3;
  min-height:260px;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
}
.tox-inner{
  position:relative;width:100%;height:100%;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  transform-style:preserve-3d;
}
.tox-card.is-flipped .tox-inner{transform:rotateY(180deg)}
.tox-face{
  position:absolute;inset:0;
  border-radius:16px;
  border:1px solid var(--line);
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 18px 42px rgba(37,42,30,.10);
}
.tox-front{background:var(--paper)}
.tox-front img{width:100%;height:100%;object-fit:cover}
.tox-letter{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  border:1px solid rgba(57,74,58,.22);
  box-shadow:0 8px 22px rgba(32,42,28,.18);
  font-family:var(--font-serif);
  font-size:1.12rem;
  font-weight:900;
}
.tox-back{
  transform:rotateY(180deg);
  background:linear-gradient(135deg,var(--paper-warm),var(--paper));
  padding:14px;display:flex;flex-direction:column;justify-content:center;
}
.tox-back .verdict{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.04em;
  align-self:flex-start;margin-bottom:8px;
}
.verdict.edible{background:var(--success-soft);color:var(--success)}
.verdict.toxic{background:var(--danger-soft);color:var(--danger)}
.verdict.unknown{background:var(--line-soft);color:var(--muted)}
.tox-card.is-locked{pointer-events:none}
.tox-card.is-locked:not(.is-flipped){
  opacity:.58;
}
.tox-card.is-picked .tox-face{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200,96,44,.18),0 18px 42px rgba(37,42,30,.10);
}
.tox-card.is-answer .tox-face{
  border-color:var(--success);
}
.tox-name{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:1rem;
  line-height:1.25;
}
.tox-latin{
  font-size:.76rem;
  color:var(--muted);
  font-style:italic;
  margin-top:2px;
}
.tox-note{
  font-size:.8rem;
  color:var(--ink-soft);
  margin-top:8px;
  line-height:1.5;
}
.tox-feedback{
  min-height:40px;
  display:flex;
  align-items:center;
}
.toxicity-quiz{
  display:grid;
  gap:18px;
}
.tox-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
}
.tox-message{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  padding:0 14px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font-weight:800;
}
.tox-brief{
  margin:0;
  color:var(--ink-soft);
  font-size:.88rem;
  line-height:1.5;
}

.result-card{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background:var(--paper-soft);
  border:1px solid var(--line);
  border-radius:999px;
}
.result-card.is-success{
  background:var(--success-soft);
  border-color:rgba(94,139,78,.28);
}
.result-card.is-danger{
  background:var(--danger-soft);
  border-color:rgba(183,71,53,.28);
}
.result-title{
  font-family:var(--font-serif);
  font-weight:800;
  white-space:nowrap;
}
.result-copy{
  margin-top:0;
  font-size:.86rem;
  line-height:1.35;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tox-more{
  margin-top:10px;
}
.tox-more summary{
  cursor:pointer;
  color:var(--accent);
  font-size:.84rem;
  font-weight:800;
}
.knowledge-card{
  margin-top:12px;
  padding:14px;
  background:var(--paper-soft);
  border-left:3px solid var(--accent);
}
.knowledge-card-title{
  font-family:var(--font-serif);
  font-weight:800;
  margin-bottom:4px;
}
.knowledge-points{
  margin:8px 0;
  padding-left:18px;
  line-height:1.7;
}
.knowledge-ecology{
  color:var(--muted);
  font-size:.85rem;
  margin:6px 0;
}
.knowledge-family{
  margin-top:8px;
  font-size:.82rem;
}
.knowledge-family b{color:var(--accent)}
.knowledge-note{
  margin-top:10px;
  font-size:.82rem;
  color:var(--ink-soft);
}

/* 老师端面板 */
.console-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.console-tile{
  padding:13px 14px;border-radius:var(--r-md);
  background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;gap:11px;
  transition:all .18s;cursor:pointer;
}
.console-tile:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.console-tile .tile-ico{
  width:36px;height:36px;border-radius:10px;
  background:var(--primary-soft);color:var(--primary);
  display:grid;place-items:center;font-size:1.05rem;flex-shrink:0;
}
.console-tile .tile-text{font-size:.85rem;font-weight:800;line-height:1.3}
.console-tile .tile-meta{font-size:.72rem;color:var(--muted);margin-top:1px}
.console-list{
  display:grid;
  gap:8px;
}
.console-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  background:var(--paper-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
}
.console-row b{
  font-size:.88rem;
  line-height:1.35;
}
.console-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
}
.console-chip-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:6px 0;
}

.review-row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;
  align-items:center;
  padding:11px 12px;border-bottom:1px dashed var(--line);
}
.review-row:last-child{border-bottom:0}
.review-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--accent));
  color:#fff;display:grid;place-items:center;font-weight:800;
  font-family:var(--font-serif);
}
.review-name{font-weight:700;font-size:.88rem}
.review-item{font-size:.78rem;color:var(--muted);margin-top:1px}
.review-state{
  font-size:.7rem;font-weight:800;padding:2px 9px;border-radius:999px;
}
.state-pending{background:var(--warning-soft);color:var(--warning)}
.state-pass{background:var(--success-soft);color:var(--success)}
.state-reject{background:var(--danger-soft);color:var(--danger)}

/* 安全边界提示 */
.safety-banner{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 16px;border-radius:var(--r-md);
  background:var(--warning-soft);
  border-left:3px solid var(--warning);
  font-size:.86rem;line-height:1.65;
}
.safety-banner .safety-ico{
  font-size:1.3rem;flex-shrink:0;
}
.safety-banner-icon{
  width:1.3rem;
  height:1.3rem;
  color:var(--warning);
  flex-shrink:0;
}

/* 菌物观察：图片墙 -> 单图直觉判断 -> 资料揭晓 */
.observation-journal{
  max-width:1120px;
  margin:0 auto 36px;
}
.observation-intro{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:end;
  max-width:760px;
  margin:4px auto 22px;
}
.observation-mascot{
  width:80px;
  height:80px;
  background-image:url('/static/mascot/guxiaoer_action_09_peeking.png');
}
.observation-title{
  font-family:var(--font-serif);
  font-size:2rem;
  font-weight:900;
  letter-spacing:0;
  margin:8px 0 6px;
}
.observation-copy{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:.94rem;
}
.observation-stage{
  position:fixed;
  inset:0;
  z-index:120;
  max-width:none;
  margin:0;
  padding:28px;
  display:grid;
  place-items:center;
  overflow:auto;
  text-align:left;
  background:rgba(31,38,31,.58);
  backdrop-filter:blur(10px);
}
.observe-modal-shell{
  width:min(1180px,calc(100vw - 56px));
  max-height:calc(100vh - 56px);
  display:grid;
  grid-template-columns:minmax(360px, min(56vw, 720px)) minmax(320px, 420px);
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:
    "photo head"
    "photo question"
    "photo reveal";
  gap:16px 18px;
  padding:18px;
  overflow:auto;
  background:#fffdf7;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 28px 80px rgba(0,0,0,.28);
}
.observation-stage.is-result .observe-modal-shell{
  grid-template-columns:minmax(360px, min(52vw, 720px)) minmax(360px, 560px);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:
    "photo head"
    "photo reveal";
}
.observation-stage.is-result .observe-question{
  display:none;
}
.observation-stage.is-result .observe-reveal{
  max-height:calc(100vh - 128px);
  overflow:auto;
  overscroll-behavior:contain;
}
.observation-stage[hidden]{
  display:none !important;
}
body.observe-modal-open{
  overflow:hidden;
}
.observe-panel-head{
  grid-area:head;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.observe-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:6px 14px;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--paper-soft);
  color:var(--ink);
  font-weight:800;
  font-size:.82rem;
  box-shadow:none;
}
.observe-back:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
}
.observe-photo-frame{
  grid-area:photo;
  width:100%;
  height:min(76vh,780px);
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}
.observe-photo-frame img{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
  background:#fffdf7;
}
.observe-question{
  grid-area:question;
  width:100%;
  margin:0;
  align-self:start;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.observe-question-text{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:1.16rem;
  letter-spacing:0;
  color:var(--ink);
  margin:0;
}
.observe-choice-row{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  border:0;
  background:transparent;
}
.observe-choice{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--line);
  background:var(--paper-soft);
  box-shadow:0 5px 14px rgba(28,38,32,.08);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:0;
}
.observe-choice[data-choice="edible"]{color:var(--ink)}
.observe-choice[data-choice="unknown"]{color:var(--ink)}
.observe-choice[data-choice="toxic"]{color:var(--ink)}
.observe-choice:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(28,38,32,.12);
  background:var(--paper-soft);
}
.observe-choice:disabled{
  cursor:default;
  opacity:.74;
}
.observe-choice.is-selected,
.observe-choice.is-real{
  opacity:1;
}
.observe-choice.is-correct{
  border-color:var(--success);
  background:var(--success-soft);
}
.observe-choice.is-wrong{
  border-color:var(--danger);
  background:var(--danger-soft);
}
.choice-mark{
  width:14px;
  height:14px;
  border-radius:50%;
  flex-shrink:0;
  border:2px solid currentColor;
}
.choice-mark.safe{color:var(--success)}
.choice-mark.unsure{color:var(--muted)}
.choice-mark.danger{color:var(--danger)}
.observe-footnote{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.78rem;
}
.observe-reveal{
  grid-area:reveal;
  width:100%;
  margin:0;
  text-align:left;
  align-self:start;
}
.observe-result,
.observe-info{
  padding:18px;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow-sm);
}
.observe-result{
  border-left:5px solid var(--success);
  margin-bottom:12px;
}
.observe-result.is-miss{
  border-left-color:var(--danger);
}
.observe-result-kicker{
  color:var(--accent);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.12em;
}
.observe-result h3,
.observe-info h3{
  font-family:var(--font-serif);
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:0;
  margin:6px 0 8px;
}
.observe-result p{
  color:var(--ink-soft);
  margin:0 0 14px;
}
.observe-info{
  margin-top:12px;
}
.observe-info-combined{
  margin-top:0;
  border:0;
  background:transparent;
  padding:0;
  box-shadow:none;
  max-height:min(78vh,820px);
  overflow:auto;
}
.observe-result-line{
  display:grid;
  gap:4px;
  margin-bottom:14px;
  color:var(--ink-soft);
  font-size:.9rem;
}
.observe-result-line b{
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:1.35rem;
  line-height:1.2;
}
.observe-latin{
  margin:0 0 6px;
  color:var(--muted);
  font-style:italic;
}
.observe-meta{
  margin:0 0 12px;
  color:var(--muted);
  font-size:.84rem;
}
.observe-source-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:10px 0 12px;
}
.observe-source-item{
  padding:9px 10px;
  border:1px solid var(--line);
  background:var(--paper-soft);
  font-size:.8rem;
  color:var(--ink-soft);
}
.observe-source-item b{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  margin-bottom:2px;
}
.observe-compact-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
  color:var(--muted);
  font-size:.82rem;
}
.observe-compact-meta span{
  padding:0;
  background:transparent;
  border:0;
}
.observe-knowledge{
  margin-top:16px;
  padding:0;
  background:transparent;
  border:0;
}
.observe-knowledge-title{
  font-family:var(--font-serif);
  font-weight:900;
  margin-bottom:6px;
}
.observe-knowledge-list{
  margin:8px 0;
  padding-left:18px;
  line-height:1.75;
}
.observe-knowledge-note,
.observe-safety-note{
  margin:8px 0 0;
  color:var(--ink-soft);
  font-size:.84rem;
}
.observe-family{
  margin-top:8px;
  font-size:.82rem;
  color:var(--ink-soft);
}
.observe-wall{
  columns:5 150px;
  column-gap:12px;
}
.observe-tile{
  width:100%;
  display:inline-block;
  break-inside:avoid;
  margin:0 0 12px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:0 5px 14px rgba(28,38,32,.08);
}
.observe-tile img{
  width:100%;
  display:block;
}
.observe-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(28,38,32,.16);
  border-color:var(--accent);
}
.observe-load-sentinel{
  width:100%;
  min-height:120px;
  margin:0;
  padding:0;
  border:0;
  color:var(--muted);
  text-align:center;
  font-size:.78rem;
  background:transparent;
  pointer-events:none;
}
.observe-submit-card{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(280px,1fr);
  gap:18px;
  align-items:start;
  margin:24px 0 0;
  padding:18px;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow-sm);
}
.observe-upload-form{
  display:grid;
  gap:10px;
}
.observe-upload-drop{
  min-height:104px;
  display:grid;
  place-items:center;
  gap:8px;
  padding:18px;
  border:2px dashed var(--line);
  background:var(--paper-soft);
  color:var(--muted);
  text-align:center;
  font-weight:800;
  cursor:pointer;
}
.observe-upload-drop input{
  display:none;
}
.observe-upload-drop .icon{
  width:34px;
  height:34px;
  color:var(--accent);
}
.upload-drop{
  display:grid;
  place-items:center;
  gap:8px;
  padding:28px 18px;
  text-align:center;
  border:2px dashed var(--line);
  border-radius:var(--r-md);
  background:var(--paper-soft);
}
.upload-drop .icon{
  width:42px;
  height:42px;
  color:var(--muted);
}
.upload-drop > div:first-of-type{
  font-family:var(--font-serif);
  font-weight:900;
}
.observe-upload-form textarea{
  width:100%;
  resize:vertical;
  min-height:78px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:#fffdf7;
  color:var(--ink);
  font:inherit;
  line-height:1.55;
}
.observe-upload-form textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.observe-upload-status{
  grid-column:1/-1;
  min-height:20px;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.6;
}
.observe-upload-status.is-success{
  color:var(--success);
  font-weight:800;
}
.observe-upload-status.is-error{
  color:var(--danger);
  font-weight:800;
}

/* 步骤流 */
.step-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.step{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  font-size:.8rem;font-weight:700;
}
.step-num{
  width:22px;height:22px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:.7rem;
}
.step.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.step.is-active .step-num{background:#fff;color:var(--accent)}
.step.is-done{background:var(--success-soft);border-color:var(--success);color:var(--success)}
.step.is-done .step-num{background:var(--success);color:#fff}
.step-arrow{color:var(--muted);font-size:.8rem}

/* 虚拟种植 */
.plant-stage{
  aspect-ratio:1;
  background:linear-gradient(180deg,#f5ecd2 0%,#e8dbb8 100%);
  border-radius:var(--r-lg);
  display:grid;place-items:center;
  position:relative;overflow:hidden;
}
.plant-stage::before{
  content:"";position:absolute;bottom:0;left:0;right:0;
  height:30%;background:linear-gradient(180deg,transparent,#a08050);
}
.plant-visual-token{font-size:6rem;z-index:1;animation:bob 3s ease-in-out infinite}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-8px) rotate(2deg)}
}
.planting-homework-strip{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid rgba(26,58,46,.18);
  background:linear-gradient(135deg,var(--primary-soft),rgba(251,247,237,.88));
}
.planting-homework-strip strong{
  color:var(--primary);
  font-family:var(--font-serif);
  font-size:1.02rem;
}
.planting-homework-strip span{
  color:var(--ink-soft);
  font-size:.84rem;
  line-height:1.45;
}
.planting-homework-strip em{
  justify-self:end;
  padding:4px 10px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--primary);
  font-style:normal;
  font-size:.74rem;
  font-weight:900;
}
.planting-species-card{
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  display:grid;
  gap:10px;
}
.planting-species-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:var(--shadow);
}
.planting-species-media{
  display:block;
  width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper-soft);
}
.planting-species-media img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}
.planting-species-media.is-pending{
  width:100%;
  min-height:190px;
  display:grid;
  place-items:center;
  border:1px dashed var(--line);
  background:var(--paper-soft);
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
}
.planting-species-emoji{
  font-size:2.5rem;
  text-align:center;
  margin-bottom:0;
}
.planting-species-name{text-align:center}
.planting-species-latin{
  text-align:center;
  font-style:italic;
  color:var(--muted);
  font-size:.85rem;
  margin:2px 0;
}
.planting-species-tags,
.plant-task-tags,
.plant-status-tags{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.planting-species-tags{margin-top:8px}
.planting-species-desc{
  margin-top:8px;
  font-size:.85rem;
}
.planting-science-mini{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:var(--paper-soft);
}
.planting-science-mini b{
  display:block;
  font-size:.82rem;
  color:var(--ink);
  line-height:1.35;
}
.planting-science-mini span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.76rem;
}
.planting-species-action{
  text-align:center;
  margin-top:10px;
}
.planting-empty-note{
  min-height:260px;
  display:grid;
  place-items:center;
  padding:30px;
}
.planting-empty-note strong{
  color:var(--ink);
  font-size:.9rem;
}
.planting-empty-note span{
  color:var(--muted);
  font-size:.8rem;
  line-height:1.45;
}
.planting-lab-overview{
  display:grid;
  grid-template-columns:minmax(260px,1.1fr) minmax(260px,1.2fr) minmax(240px,.9fr);
  gap:16px;
  margin-bottom:18px;
  padding:16px;
  border:1px solid rgba(26,58,46,.18);
  background:linear-gradient(180deg,rgba(246,250,241,.92),rgba(236,243,231,.92)),var(--paper);
  box-shadow:0 18px 45px rgba(26,58,46,.08);
}
.planting-lab-scene{
  position:relative;
  min-height:188px;
  overflow:hidden;
  border:1px solid rgba(26,58,46,.18);
  background:linear-gradient(180deg,#d9efe3 0%,#f4eedb 65%,#c9b289 100%);
}
.planting-lab-scene::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(26,58,46,.12) 0 2px,transparent 2px 52px),
    linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.34) 34% 36%,transparent 36% 70%,rgba(255,255,255,.26) 70% 72%,transparent 72%);
}
.lab-roof{
  position:absolute;
  left:-8%;
  right:-8%;
  top:0;
  height:58px;
  border-bottom:4px solid rgba(26,58,46,.32);
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.03));
}
.lab-window{
  position:absolute;
  left:18px;
  top:48px;
  width:82px;
  height:64px;
  border:4px solid rgba(26,58,46,.44);
  background:rgba(199,230,226,.7);
}
.lab-window::before,.lab-window::after{
  content:"";
  position:absolute;
  background:rgba(26,58,46,.38);
}
.lab-window::before{left:50%;top:0;bottom:0;width:3px}
.lab-window::after{left:0;right:0;top:50%;height:3px}
.lab-lamp{
  position:absolute;
  left:50%;
  top:28px;
  width:86px;
  height:138px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(255,221,126,.34),transparent 64%);
}
.lab-lamp::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:54px;
  height:24px;
  transform:translateX(-50%);
  border-radius:22px 22px 8px 8px;
  background:#244638;
}
.lab-racks{
  position:absolute;
  right:20px;
  bottom:36px;
  width:142px;
  height:88px;
  border-left:5px solid rgba(76,62,39,.65);
  border-right:5px solid rgba(76,62,39,.65);
  background:linear-gradient(180deg,transparent 0 28px,rgba(76,62,39,.55) 28px 34px,transparent 34px 58px,rgba(76,62,39,.5) 58px 64px,transparent 64px);
}
.lab-racks::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:8px;
  height:36px;
  background:repeating-linear-gradient(90deg,rgba(73,61,45,.72) 0 18px,transparent 18px 29px);
}
.lab-bed{
  position:absolute;
  left:24px;
  right:24px;
  bottom:18px;
  height:28px;
  border-radius:55% 55% 0 0;
  background:linear-gradient(180deg,#8d7048,#5f4328);
}
.lab-mist{
  position:absolute;
  left:52px;
  bottom:54px;
  width:150px;
  height:54px;
  background:radial-gradient(circle,rgba(255,255,255,.52) 0 2px,transparent 3px);
  background-size:26px 18px;
  opacity:.7;
}
.planting-lab-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.planting-lab-copy strong{
  font-size:1.05rem;
  line-height:1.45;
  color:var(--ink);
}
.planting-lab-copy span{
  color:var(--ink-soft);
  line-height:1.7;
  font-size:.9rem;
}
.planting-lab-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  align-content:center;
}
.planting-lab-stats div{
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.54);
}
.planting-lab-stats b{
  font-family:var(--font-mono);
  font-size:1.45rem;
  color:var(--accent);
}
.planting-lab-stats span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
}
.plant-science-loading{
  min-height:240px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    linear-gradient(135deg,rgba(227,235,228,.7),rgba(251,247,237,.95)),
    var(--paper);
}
.planting-real-rules{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.planting-real-rules span{
  min-height:76px;
  display:flex;
  align-items:center;
  padding:13px 14px;
  border:1px solid var(--line);
  background:rgba(251,247,237,.76);
  color:var(--ink-soft);
  font-weight:800;
  line-height:1.45;
}
.plant-task-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.plant-task-card{
  cursor:pointer;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  min-height:174px;
  padding:18px;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:0 14px 30px rgba(33,38,28,.08);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.plant-task-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 20px 42px rgba(33,38,28,.12);
}
.plant-task-card.is-finished-task{
  opacity:.92;
  background:linear-gradient(135deg,var(--paper),var(--paper-soft));
}
.plant-task-card.is-finished-task .plant-task-arrow{
  color:var(--accent);
}
.plant-task-photo{
  width:150px;
  height:126px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper-soft);
}
.plant-task-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.plant-task-photo.is-pending{
  display:grid;
  place-items:center;
  color:var(--primary);
  font-weight:900;
  background:linear-gradient(180deg,#f4f0de,#dfcfaa);
}
.plant-task-main{
  min-width:0;
  display:grid;
  gap:16px;
}
.plant-task-name{
  min-width:0;
}
.plant-task-name strong{
  display:inline;
  color:var(--ink);
  font-size:1.14rem;
  font-weight:900;
}
.plant-task-name span{
  margin-left:8px;
  color:var(--muted);
  font-style:italic;
  font-size:1rem;
}
.plant-task-statusmark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(26,58,46,.22);
  background:linear-gradient(180deg,#f4f0de,#dfcfaa);
  color:#244638;
  font-weight:900;
  font-size:.82rem;
}
.plant-task-statusmark.dead{background:#f3e5e1;color:var(--danger)}
.plant-task-statusmark.harvested{background:#e2f0df;color:var(--success)}
.plant-task-latin{
  font-style:italic;
  color:var(--muted);
}
.plant-task-tags{
  justify-content:flex-start;
  margin-top:4px;
}
.plant-task-tags span{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:4px 11px;
  border-radius:999px;
  background:var(--line-soft);
  color:var(--ink-soft);
  font-size:.82rem;
  font-weight:800;
}
.plant-task-arrow{
  font-size:1.4rem;
  color:var(--accent);
}
.plant-stage-mini{
  min-height:180px;
  margin:10px 0 14px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0)),
    var(--paper-soft);
  overflow:hidden;
  position:relative;
}
.plant-stage-mini::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:22px;
  height:10px;
  border-radius:50%;
  background:rgba(28,38,32,.12);
}
.plant-visual-token-mini{
  position:relative;
  z-index:1;
  font-size:4.6rem;
  animation:bob 3s ease-in-out infinite;
}
.plant-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.plant-action-btn{
  min-height:74px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  background:var(--paper);
  text-align:left;
  transition:all .18s ease;
}
.plant-action-btn:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
  transform:translateY(-1px);
}
.plant-action-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  background:var(--paper-soft);
  border:1px solid var(--line);
  font-size:1.05rem;
}
.plant-action-btn b{
  display:block;
  font-size:.9rem;
}
.plant-action-btn small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  line-height:1.35;
}
.plant-env-snapshot{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--line);
}
.plant-env-snapshot div{
  padding:10px;
  background:var(--paper-soft);
  text-align:center;
}
.plant-env-snapshot b{
  font-family:var(--font-mono);
  font-size:1.05rem;
}
.plant-env-snapshot span{
  margin-left:2px;
  color:var(--muted);
  font-size:.74rem;
}
.plant-env-snapshot small{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  margin-top:2px;
}
.plant-stage-bar{
  display:flex;
  gap:4px;
  margin-top:8px;
}
.plant-stage-step{
  flex:1;
  height:6px;
  border-radius:999px;
  background:var(--line);
}
.plant-stage-step.is-active{background:var(--accent)}
.plant-stage-labels{
  display:flex;
  justify-content:space-between;
  font-size:.7rem;
  color:var(--muted);
  margin-top:4px;
}
.plant-stage-labels .is-active{
  color:var(--accent);
  font-weight:800;
}
.plant-status-tags{
  margin-bottom:12px;
}
.plant-metrics{margin-top:14px}
.plant-metric + .plant-metric{margin-top:8px}
.plant-metric-head{
  display:flex;
  justify-content:space-between;
  font-size:.78rem;
  margin-bottom:4px;
}
.plant-metric-head b{
  color:var(--accent);
  font-weight:800;
}
.plant-metric-health .progress-fill{background:var(--success)}
.plant-metric-health.is-warning .progress-fill{background:var(--gold)}
.plant-metric-health.is-danger .progress-fill{background:var(--danger)}
.plant-metric-growth .progress-fill{background:linear-gradient(90deg,var(--accent),var(--gold))}
.plant-metric .progress-fill{width:var(--plant-progress,0%)}
.plant-log-list{gap:12px}
.plant-log-card{
  padding:12px;
  border-left:3px solid var(--accent);
  background:var(--paper-soft);
}
.plant-log-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.plant-log-day{
  color:var(--muted);
  font-size:.74rem;
  font-family:var(--font-mono);
}
.plant-log-draft{
  margin:0 0 8px;
  line-height:1.65;
}
.plant-essay{
  background:var(--accent-soft);
  padding:10px 14px;
  margin-top:8px;
}
.plant-essay strong{
  font-size:.8rem;
  color:var(--accent);
}
.plant-essay p{
  margin:4px 0 0;
  line-height:1.7;
}
.plant-essay-editor{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.plant-essay-editor textarea{
  width:100%;
  resize:vertical;
  min-height:82px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:10px 12px;
  line-height:1.65;
  outline:none;
}
.plant-essay-editor textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200,96,44,.12);
}
.plant-log-locked{
  display:inline-flex;
  margin-top:8px;
  padding:3px 9px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
}
.harvest-card{
  text-align:center;
  max-width:520px;
  margin:0 auto;
}
.harvest-quality-mark{
  width:86px;
  height:86px;
  margin:10px auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(26,58,46,.2);
  border-radius:50%;
  background:linear-gradient(180deg,#fff8db,#dfc979);
  color:#244638;
  font-size:1.35rem;
  font-weight:900;
}
.harvest-tags,
.harvest-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.harvest-tags{margin:12px 0}
.harvest-actions{margin-top:16px}
.harvest-copy{
  line-height:1.7;
  text-align:left;
}
.env-slider{
  -webkit-appearance:none;width:100%;height:6px;
  background:var(--line-soft);border-radius:999px;outline:none;
}
.env-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--accent);cursor:pointer;
  box-shadow:0 2px 6px rgba(200,96,44,.4);
}

.plant-panel-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);
  gap:18px;
  align-items:start;
}
.plant-greenhouse-card{
  overflow:hidden;
}
.plant-greenhouse-head{
  position:relative;
  z-index:2;
}
.plant-greenhouse{
  position:relative;
  min-height:430px;
  margin:12px -4px 16px;
  overflow:hidden;
  border:1px solid rgba(26,58,46,.18);
  background:
    linear-gradient(180deg,rgba(217,238,220,.88) 0%,rgba(246,239,220,.95) 62%,#d5c39b 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.plant-greenhouse.scene-factory-bottle-cold{
  background:linear-gradient(180deg,#d9edf2 0%,#eef7f6 54%,#c7d5d5 100%);
}
.plant-greenhouse.scene-straw-bed-hot{
  background:linear-gradient(180deg,#efdba8 0%,#efe5bd 54%,#b89555 100%);
}
.plant-greenhouse.scene-log-ganoderma,
.plant-greenhouse.scene-soil-bamboo-bed,
.plant-greenhouse.scene-soil-bed-taxonomy-review{
  background:linear-gradient(180deg,#dfe8cf 0%,#efe6c9 56%,#8a6a42 100%);
}
.plant-greenhouse.scene-hanging-ear-bag,
.plant-greenhouse.scene-tremella-bag,
.plant-greenhouse.scene-bag-rack-spine,
.plant-greenhouse.scene-bag-rack-frond{
  background:linear-gradient(180deg,#e0eadc 0%,#f4f1dd 58%,#c5a878 100%);
}
.plant-greenhouse.scene-bag-rack-yellow-oyster{
  background:linear-gradient(180deg,#f1e6b7 0%,#f5f0d6 58%,#c9ae69 100%);
}
.plant-greenhouse::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 0 23%,rgba(255,255,255,.28) 23.4% 24.2%,transparent 24.6% 54%,rgba(255,255,255,.22) 54.3% 55%,transparent 55.4%),
    repeating-linear-gradient(90deg,rgba(26,58,46,.10) 0 2px,transparent 2px 86px);
  pointer-events:none;
}
.plant-greenhouse::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 74%,rgba(255,255,255,.45),transparent 31%);
  pointer-events:none;
}
.greenhouse-backdrop{
  position:absolute;
  inset:0;
  z-index:1;
}
.greenhouse-window{
  position:absolute;
  left:34px;
  top:42px;
  width:142px;
  height:116px;
  border:5px solid rgba(26,58,46,.52);
  background:linear-gradient(160deg,#cfe9e4 0%,#eaf3de 100%);
  box-shadow:0 10px 22px rgba(28,38,32,.08), inset 0 0 0 2px rgba(255,255,255,.55);
}
.greenhouse-window span{
  position:absolute;
  background:rgba(26,58,46,.46);
}
.greenhouse-window span:nth-child(1){left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%)}
.greenhouse-window span:nth-child(2){top:50%;left:0;right:0;height:4px;transform:translateY(-50%)}
.greenhouse-window span:nth-child(3),
.greenhouse-window span:nth-child(4){
  inset:10px auto auto 11px;
  width:48px;
  height:84px;
  border:2px solid rgba(255,255,255,.52);
  background:rgba(255,255,255,.12);
  transition:transform .35s ease;
}
.greenhouse-window span:nth-child(4){left:auto;right:11px}
.plant-greenhouse.is-ventilate .greenhouse-window span:nth-child(3){transform:perspective(220px) rotateY(-38deg)}
.plant-greenhouse.is-ventilate .greenhouse-window span:nth-child(4){transform:perspective(220px) rotateY(38deg)}
.plant-greenhouse.is-ventilate .greenhouse-window::after{
  content:"";
  position:absolute;
  left:120px;
  top:26px;
  width:130px;
  height:56px;
  border-top:3px solid rgba(61,106,122,.28);
  border-bottom:3px solid rgba(61,106,122,.18);
  transform:skewX(-18deg);
  animation:greenhouseWind 1.1s ease-out both;
}
.greenhouse-lamp{
  position:absolute;
  left:50%;
  top:-2px;
  width:122px;
  height:158px;
  transform:translateX(-50%);
}
.lamp-cord{
  position:absolute;
  left:50%;
  top:0;
  width:4px;
  height:52px;
  background:rgba(26,58,46,.46);
  transform:translateX(-50%);
}
.lamp-head{
  position:absolute;
  left:50%;
  top:48px;
  width:86px;
  height:42px;
  transform:translateX(-50%);
  border-radius:48px 48px 14px 14px;
  background:linear-gradient(180deg,#2d4a3e,#132c20);
  box-shadow:0 12px 22px rgba(28,38,32,.18);
}
.lamp-beam{
  position:absolute;
  left:50%;
  top:80px;
  width:218px;
  height:260px;
  transform:translateX(-50%);
  clip-path:polygon(36% 0,64% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(247,210,116,.42),rgba(247,210,116,.04));
  opacity:.38;
  transition:opacity .25s ease;
  pointer-events:none;
}
.plant-greenhouse.is-light .lamp-beam{
  opacity:.82;
  animation:lampPulse 1.4s ease-out both;
}
.greenhouse-shade{
  position:absolute;
  right:30px;
  top:44px;
  width:132px;
  height:94px;
  background:
    repeating-linear-gradient(90deg,rgba(26,58,46,.44) 0 11px,rgba(26,58,46,.34) 11px 22px),
    linear-gradient(180deg,rgba(245,228,216,.88),rgba(200,96,44,.2));
  border:3px solid rgba(26,58,46,.28);
  box-shadow:0 10px 24px rgba(28,38,32,.08);
  transform-origin:top;
  transition:height .28s ease, opacity .28s ease;
}
.plant-greenhouse.is-shade .greenhouse-shade{
  height:160px;
  opacity:.94;
}
.greenhouse-sprayer{
  position:absolute;
  left:74px;
  bottom:132px;
  width:110px;
  height:118px;
}
.greenhouse-sprayer::before{
  content:"";
  position:absolute;
  left:26px;
  bottom:0;
  width:58px;
  height:76px;
  border-radius:22px 22px 14px 14px;
  background:linear-gradient(135deg,#7fb29c,#2d6b4f);
  box-shadow:0 12px 22px rgba(28,38,32,.16);
}
.greenhouse-sprayer::after{
  content:"";
  position:absolute;
  left:34px;
  top:22px;
  width:38px;
  height:24px;
  border:7px solid #2d6b4f;
  border-bottom:0;
  border-radius:24px 24px 0 0;
}
.sprayer-nozzle{
  position:absolute;
  left:70px;
  top:44px;
  width:42px;
  height:12px;
  background:#1a3a2e;
  transform:rotate(-10deg);
}
.sprayer-mist{
  position:absolute;
  left:104px;
  top:34px;
  width:210px;
  height:118px;
  opacity:.18;
  background:
    radial-gradient(circle at 15% 22%,rgba(214,227,234,.9) 0 3px,transparent 4px),
    radial-gradient(circle at 34% 42%,rgba(214,227,234,.9) 0 3px,transparent 4px),
    radial-gradient(circle at 54% 18%,rgba(214,227,234,.9) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 52%,rgba(214,227,234,.86) 0 3px,transparent 4px),
    radial-gradient(circle at 63% 72%,rgba(214,227,234,.8) 0 2px,transparent 3px);
  transform:rotate(-8deg);
}
.plant-greenhouse.is-water .sprayer-mist{
  opacity:.96;
  animation:mistDrift 1.2s ease-out both;
}
.greenhouse-observe{
  position:absolute;
  right:66px;
  bottom:128px;
  width:74px;
  height:74px;
  border:8px solid rgba(26,58,46,.72);
  border-radius:50%;
  background:rgba(255,255,255,.26);
}
.greenhouse-observe::after{
  content:"";
  position:absolute;
  right:-32px;
  bottom:-19px;
  width:46px;
  height:9px;
  border-radius:999px;
  background:rgba(26,58,46,.72);
  transform:rotate(43deg);
}
.plant-greenhouse.is-observe .greenhouse-observe{
  animation:observePop .8s ease-out both;
}
.greenhouse-rack{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:68px;
  width:min(72%,520px);
  height:220px;
  transform:translateX(-50%);
  display:grid;
  place-items:end center;
}
.greenhouse-rack::before,
.greenhouse-rack::after{
  content:"";
  position:absolute;
  bottom:0;
  width:18px;
  height:198px;
  background:linear-gradient(180deg,#7c6340,#4e3b25);
}
.greenhouse-rack::before{left:34px}
.greenhouse-rack::after{right:34px}
.greenhouse-tray{
  position:relative;
  width:min(88%,390px);
  height:106px;
  border-radius:0 0 24px 24px;
  background:linear-gradient(180deg,#8b6c45,#5e4329);
  box-shadow:0 22px 38px rgba(28,38,32,.22);
}
.greenhouse-tray::before{
  content:"";
  position:absolute;
  left:-16px;
  right:-16px;
  top:-14px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(180deg,#b8935a,#705031);
  border:1px solid rgba(28,38,32,.18);
}
.substrate{
  position:absolute;
  left:8%;
  right:8%;
  top:-20px;
  height:36px;
  border-radius:50%;
  background:
    radial-gradient(circle at 18% 42%,rgba(255,255,255,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 52% 35%,rgba(255,255,255,.12) 0 2px,transparent 3px),
    linear-gradient(180deg,#715334,#4f3722);
}
.real-stage-photo{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:42px;
  width:min(86%,340px);
  min-height:178px;
  margin:0;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
}
.real-stage-photo img{
  max-width:100%;
  max-height:210px;
  object-fit:contain;
  filter:drop-shadow(0 20px 24px rgba(28,38,32,.24));
}
.real-stage-photo.is-species-photo img{
  border:1px solid rgba(26,58,46,.14);
  background:#f6efdc;
}
.real-stage-photo figcaption{
  position:absolute;
  left:50%;
  bottom:-22px;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(251,247,237,.9);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
}
.real-stage-photo.is-missing{
  width:min(80%,330px);
  min-height:132px;
  padding:16px;
  text-align:center;
  border:1px dashed rgba(26,58,46,.36);
  background:rgba(251,247,237,.84);
  color:var(--ink-soft);
  box-shadow:0 16px 34px rgba(28,38,32,.12);
}
.real-stage-photo.is-missing strong{
  display:block;
  font-family:var(--font-serif);
  font-size:1.1rem;
  margin-bottom:6px;
}
.real-stage-photo.is-missing span{
  display:block;
  max-width:280px;
  font-size:.82rem;
  color:var(--muted);
}
.plant-greenhouse.is-dead .real-stage-photo{
  filter:grayscale(.7) sepia(.18) brightness(.78);
}
.plant-greenhouse.is-harvested .real-stage-photo{
  opacity:.45;
}
.greenhouse-floor{
  position:absolute;
  z-index:0;
  left:-8%;
  right:-8%;
  bottom:-78px;
  height:190px;
  border-radius:50% 50% 0 0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 18px,transparent 18px 40px),
    linear-gradient(180deg,#c0aa7d,#8a6c42);
}
.greenhouse-status-strip{
  position:absolute;
  z-index:4;
  left:18px;
  right:18px;
  bottom:16px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.greenhouse-status-strip span{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(251,247,237,.86);
  border:1px solid rgba(217,208,188,.8);
  color:var(--ink-soft);
  font-size:.74rem;
  font-family:var(--font-mono);
  font-weight:800;
  box-shadow:0 6px 16px rgba(28,38,32,.08);
}
.plant-grow-ranges{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.plant-grow-range{
  padding:10px;
  background:var(--paper-soft);
  border:1px solid var(--line);
}
.plant-grow-range.is-out{
  border-color:var(--warning);
  background:var(--warning-soft);
}
.plant-grow-range span{
  display:block;
  color:var(--muted);
  font-size:.72rem;
}
.plant-grow-range b{
  display:block;
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:1rem;
  color:var(--ink);
}
.plant-grow-range small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:.68rem;
}
.plant-grow-range.is-out small{color:var(--warning);font-weight:800}
.plant-science-note{
  margin-top:12px;
  padding:13px 14px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,var(--paper-soft),rgba(251,247,237,.82));
}
.plant-science-note b{
  display:block;
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:1.35;
}
.plant-science-note span{
  display:block;
  margin-top:3px;
  color:var(--ink-soft);
  font-size:.82rem;
  font-weight:800;
}
.plant-science-note p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.55;
}
.plant-science-note .plant-warning{
  border-left:3px solid var(--danger);
  padding-left:10px;
  color:var(--danger);
  font-weight:800;
}
.plant-science-note small{
  display:inline-flex;
  margin-top:8px;
  padding:3px 9px;
  border-radius:999px;
  background:var(--warning-soft);
  color:var(--warning);
  font-size:.68rem;
  font-weight:800;
}
.plant-stage-science{
  display:grid;
  gap:5px;
  margin-top:10px;
  padding:10px 12px;
  border:1px dashed rgba(26,58,46,.2);
  background:rgba(255,255,255,.48);
}
.plant-stage-science strong{
  color:var(--ink);
  font-size:.82rem;
}
.plant-stage-science span{
  display:block;
  color:var(--ink-soft);
  font-size:.76rem;
  line-height:1.5;
}
.plant-source-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-top:10px;
}
.plant-source-list > span,
.plant-source-list a,
.plant-source-list.is-empty{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:5px 8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.56);
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  text-decoration:none;
}
.plant-source-list a{
  color:var(--accent);
}
.plant-source-list a:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.plant-action-water .plant-action-icon{background:var(--info-soft)}
.plant-action-ventilate .plant-action-icon{background:#e4f0e9}
.plant-action-light .plant-action-icon{background:var(--gold-soft)}
.plant-action-shade .plant-action-icon{background:var(--accent-soft)}
.plant-action-observe .plant-action-icon{background:var(--paper-soft)}

@keyframes greenhouseWind{
  0%{opacity:0;transform:translateX(-12px) skewX(-18deg)}
  30%{opacity:1}
  100%{opacity:0;transform:translateX(70px) skewX(-18deg)}
}
@keyframes lampPulse{
  0%{filter:brightness(1)}
  45%{filter:brightness(1.22)}
  100%{filter:brightness(1)}
}
@keyframes mistDrift{
  0%{opacity:0;transform:translateX(-10px) rotate(-8deg) scale(.92)}
  35%{opacity:1}
  100%{opacity:.12;transform:translateX(42px) rotate(-8deg) scale(1.08)}
}
@keyframes observePop{
  0%,100%{transform:scale(1)}
  45%{transform:scale(1.12)}
}

/* 切换标签 */
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:18px}
.tab{
  padding:9px 14px;font-size:.88rem;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-2px;
  cursor:pointer;transition:all .18s;
}
.tab.is-active{color:var(--accent);border-color:var(--accent)}

/* 模式切换 */
.mode-switch{
  display:inline-flex;gap:3px;padding:3px;
  background:var(--paper-soft);border-radius:999px;
  border:1px solid var(--line);
}
.mode-switch button{
  padding:6px 16px;border-radius:999px;
  font-weight:700;font-size:.84rem;color:var(--muted);
  transition:all .18s;
}
.mode-switch button.is-active{
  background:var(--primary);color:#fff;
  box-shadow:0 2px 6px rgba(26,58,46,.25);
}

/* 提示条 */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:var(--r-pill);
  font-size:.86rem;font-weight:700;
  box-shadow:var(--shadow-lg);z-index:100;
  display:flex;align-items:center;gap:8px;
  animation:toastIn .3s ease;
}
@keyframes toastIn{
  from{transform:translate(-50%,20px);opacity:0}
  to{transform:translate(-50%,0);opacity:1}
}

/* 浮动菇小二(全局陪伴) */
.floating-mascot{
  display:none;
  position:fixed;right:24px;bottom:24px;z-index:50;
  width:90px;height:90px;
  cursor:pointer;
  transition:transform .25s ease;
}
.floating-mascot:hover{transform:scale(1.08) rotate(-5deg)}
.floating-mascot .mascot-img{
  position:relative;
  isolation:isolate;
  width:100%;height:100%;
  background-size:contain;background-repeat:no-repeat;background-position:center bottom;
  filter:drop-shadow(0 5px 8px rgba(28,38,32,.15));
  animation:floatBob 4s ease-in-out infinite;
}
.floating-mascot .mascot-img::before{
  content:"";
  position:absolute;
  left:50%;bottom:-4px;
  transform:translateX(-50%);
  width:110%;height:22px;
  background:radial-gradient(ellipse at center,
    rgba(247,238,218,.9) 0%,
    rgba(245,228,200,.5) 34%,
    transparent 72%);
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
@keyframes floatBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.floating-mascot .mascot-tip{
  position:absolute;bottom:100%;right:0;
  background:var(--paper);border:1px solid var(--line);
  padding:6px 11px;border-radius:var(--r-sm);
  font-size:.78rem;font-weight:700;white-space:nowrap;
  box-shadow:var(--shadow);margin-bottom:6px;
  opacity:0;transform:translateY(6px);transition:all .2s;
  pointer-events:none;
}
.floating-mascot:hover .mascot-tip{opacity:1;transform:translateY(0)}

/* ===========================================================
   响应式
   - >1180: 左 sidebar 268px + 右 workspace
   - 781~1180: sidebar 变顶部 sticky 水平滚动 bar
   - ≤780: 网格全 1 列,topbar 堆叠,nav 更紧凑
=========================================================== */
@media (max-width:1180px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:sticky;top:0;z-index:40;
    height:auto;
    flex-direction:row;align-items:center;gap:10px;
    padding:10px 14px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar::-webkit-scrollbar{height:4px}
  .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border:0}
  .brand{
    padding:0 12px 0 0;border-bottom:0;
    border-right:1px solid rgba(255,255,255,.10);
    flex-shrink:0;
  }
  .learner-card{
    background:transparent;border:0;padding:0;flex-shrink:0;
  }
  .xp-mini,.streak-pill{display:none}
  .nav-section{
    flex:1;flex-direction:row;flex-wrap:nowrap;gap:2px;
    flex-shrink:0;
  }
  .nav-section-label{display:none}
  .nav-item{
    padding:7px 10px;font-size:.82rem;white-space:nowrap;
    flex-shrink:0;
  }
  .nav-item .nav-ico{font-size:.9rem}
  .nav-badge{display:none}
  .sidebar-footer{display:none}
  .workspace-body{padding:20px 22px}
  .home-welcome-grid{
    grid-template-columns:auto minmax(0,1fr);
  }
  .home-welcome-grid .btn{
    grid-column:1 / -1;
    justify-content:center;
  }
  .home-activity-layout{
    grid-template-columns:1fr;
  }
  .activity-notes{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:960px){
  .classification-layout{
    grid-template-columns:1fr;
  }
  .classification-side-card{
    order:2;
  }
  .classification-question-card{
    order:1;
  }
  .classification-image-frame{
    max-height:58vh;
  }
  .observation-intro{
    grid-template-columns:1fr;
    align-items:start;
  }
}

@media (max-width:780px){
  .workspace-body{padding:16px}
  .topbar{
    padding:12px 16px;flex-wrap:wrap;gap:10px;
  }
  .topbar-left{flex:1 1 100%;order:1}
  .topbar-actions{order:2;width:100%;justify-content:flex-end}
  .topbar-title{font-size:1.05rem}
  .sidebar{padding:8px 12px;gap:8px}
  .brand{padding-right:8px}
  .brand-sub{display:none}
  .learner-card{display:none}
  .nav-item{padding:6px 8px;font-size:.78rem}
  .nav-item span:not(.nav-ico){display:none}
  .nav-item .nav-ico{font-size:1rem}
  .grid-2,.grid-3,.grid-4,
  .col-1-1,.col-2-1,.col-1-2,.col-3-2{grid-template-columns:1fr}
  .home-course-entry{
    grid-template-columns:34px minmax(0,1fr) 30px;
  }
  .home-course-entry-top{
    grid-column:2 / -1;
    justify-self:start;
  }
  .activity-form-grid{
    grid-template-columns:1fr;
  }
  .activity-notes{
    grid-template-columns:1fr;
  }
  .quiz-opt{
    min-height:48px;
    padding:12px 13px;
    gap:10px;
    overflow-wrap:anywhere;
  }
  .quiz-opt:hover{
    transform:none;
  }
  .quiz-opt .opt-letter{
    width:28px;
    height:28px;
  }
  .class-status-pill{
    flex:1 1 132px;
    justify-content:center;
    text-align:center;
  }
  .floating-mascot{display:none}
  .guxiaoer-row{flex-direction:column;align-items:flex-start}
  .guxiaoer-bubble{max-width:100%}
  .module-card .module-emoji{font-size:2.6rem}
  .plant-visual-token{font-size:4.5rem}
  .card{padding:14px}
  .card-head{align-items:flex-start;flex-direction:column}
  .observe-wall{columns:2 132px;column-gap:10px}
  .observe-submit-card{
    grid-template-columns:1fr;
    padding:14px;
  }
  .observe-source-list{
    grid-template-columns:1fr;
  }
  .observation-stage{
    padding:14px;
    place-items:start center;
  }
  .observe-modal-shell,
  .observation-stage.is-result .observe-modal-shell{
    width:100%;
    max-height:none;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "close"
      "photo"
      "question"
      "reveal";
    padding:12px;
    gap:12px;
  }
  .observe-photo-frame{
    height:min(52vh,520px);
  }
  .observation-copy,
  .observe-result,
  .observe-info,
  .observe-knowledge,
  .class-answer-result,
  .class-round-complete,
  .class-knowledge{
    overflow-wrap:anywhere;
  }
  .observe-choice-row{grid-template-columns:1fr;gap:12px}
  .observe-choice{
    min-height:50px;
    justify-content:flex-start;
  }
  .observe-choice:hover{
    transform:none;
  }
  .observe-photo-frame{padding:6px}
  .observe-result,
  .observe-info{
    padding:14px;
  }
  .observe-result h3,
  .observe-info h3{
    font-size:1.22rem;
  }
  .tox-card{min-height:220px}
  .tox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plant-panel-layout{grid-template-columns:1fr}
  .planting-lab-overview{grid-template-columns:1fr}
  .planting-lab-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .planting-homework-strip{
    grid-template-columns:1fr;
    align-items:start;
  }
  .planting-homework-strip em{
    justify-self:start;
  }
  .plant-greenhouse{min-height:390px}
  .greenhouse-window{left:20px;top:34px;width:112px;height:92px}
  .greenhouse-shade{right:18px;top:38px;width:108px;height:80px}
  .greenhouse-sprayer{left:28px;bottom:124px;transform:scale(.86);transform-origin:left bottom}
  .greenhouse-observe{right:40px;bottom:122px;transform:scale(.86)}
  .greenhouse-rack{width:86%;bottom:62px}
  .plant-grow-ranges{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plant-actions{grid-template-columns:1fr}
  .plant-env-snapshot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plant-task-card{grid-template-columns:120px minmax(0,1fr) auto;gap:12px}
  .plant-task-photo{width:120px;height:96px}
  .plant-task-statusmark{width:42px;height:42px;font-size:.76rem}
  .plant-task-tags,.planting-species-tags,.plant-status-tags{gap:6px}
  .course-card-live{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .course-card-icon{width:44px;height:44px}
.course-card-icon .icon{width:22px;height:22px}
  .course-progress-line{grid-template-columns:minmax(0,1fr) auto}
  .course-card-live .btn{grid-column:1 / -1;width:100%;justify-content:center}
  .course-catalog-head{align-items:flex-start}
  .course-count-pill{align-self:flex-start}
  .course-path-strip{align-items:flex-start;flex-direction:column;gap:4px}
  .course-guide{
    align-items:flex-start;
  }
  .course-guide .guxiaoer-bubble{
    max-width:none;
  }
  .course-detail-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .course-detail-head .section-title{
    margin-bottom:0;
  }
  .course-detail-head .course-nav-back{
    align-self:flex-start;
  }
  .lesson-row{
    grid-template-columns:36px minmax(0,1fr) auto;
    min-height:62px;
    padding:12px;
  }
  .lesson-row-index{
    width:30px;
    height:30px;
  }
  .lesson-body{
    max-width:none;
  }
  .lesson-plan{
    grid-template-columns:1fr;
  }
  .lesson-practice-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .lesson-practice-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lesson-specimen{
    grid-template-columns:88px minmax(0,1fr);
    gap:12px;
  }
}

/* 首页真实数据加载骨架 */
.home-loading-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:center;
  background:linear-gradient(135deg,var(--paper-warm) 0%,var(--paper) 100%);
  border-color:var(--accent);
}
.home-loading-mascot{
  width:90px;
  height:90px;
  background-image:url("/static/mascot/guxiaoer_action_01_welcome_wave.png");
}
.home-loading-title{
  font-family:var(--font-serif);
  font-size:1.55rem;
  font-weight:800;
  margin:6px 0 4px;
}

@media (max-width:480px){
  .workspace-body{padding:12px}
  .topbar{padding:10px 12px}
  .topbar-title{font-size:1rem}
  .icon-btn{width:32px;height:32px}
  .stat-num{font-size:1.5rem}
  .stat-main{flex-direction:column;gap:8px}
  .stat-week{max-width:none;text-align:left}
  .student-profile-avatar{width:72px;height:72px;border-radius:18px;font-size:1.8rem}
  .home-welcome-title{font-size:1.25rem}
  .home-welcome-copy{font-size:.84rem}
  .floating-mascot{width:42px;height:42px;right:8px;bottom:8px}
  .section-title{font-size:1.22rem}
  .observation-title{font-size:1.5rem}
  .observe-wall{columns:2 120px}
  .lesson-practice-grid{
    grid-template-columns:1fr;
  }
  .lesson-quiz-option{
    grid-template-columns:26px minmax(0,1fr);
  }
  .plant-greenhouse{min-height:330px}
  .plant-greenhouse::before{background:linear-gradient(115deg,transparent 0 35%,rgba(255,255,255,.25) 35.4% 36.6%,transparent 37%)}
  .greenhouse-window{width:86px;height:74px;border-width:4px}
  .greenhouse-lamp{transform:translateX(-50%) scale(.82);transform-origin:top center}
  .greenhouse-shade{width:82px;height:64px}
  .plant-greenhouse.is-shade .greenhouse-shade{height:112px}
  .greenhouse-sprayer{transform:scale(.68);bottom:100px}
  .greenhouse-observe{display:none}
  .greenhouse-rack{height:176px;bottom:54px}
  .greenhouse-tray{width:82%;height:86px}
  .greenhouse-status-strip{left:10px;right:10px;bottom:10px}
  .plant-grow-ranges{grid-template-columns:1fr}
  .plant-env-snapshot{grid-template-columns:1fr}
  .plant-stage-labels{font-size:.64rem}
  .course-guide{
    display:grid;
    grid-template-columns:1fr;
  }
  .course-guide .guxiaoer{
    display:none;
  }
  .course-guide .guxiaoer-bubble::before{
    display:none;
  }
  .lesson-row{
    grid-template-columns:32px minmax(0,1fr);
  }
  .lesson-row-arrow{
    grid-column:1 / -1;
    justify-self:start;
  }
  .lesson-specimen{
    grid-template-columns:1fr;
  }
  .lesson-specimen-media{
    width:100%;
    aspect-ratio:4/3;
  }
  .home-loading-card{
    grid-template-columns:1fr;
  }
  .home-loading-mascot{
    width:72px;
    height:72px;
  }
  .harvest-actions .btn{width:100%;justify-content:center}
}

/* 工具类 */
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-accent{color:var(--accent)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.text-gold{color:var(--gold)}
.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}
.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-1{gap:6px}.gap-2{gap:12px}.gap-3{gap:18px}
.hide{display:none!important}
.serif{font-family:var(--font-serif)}
.mono{font-family:var(--font-mono)}