/* ===== 基础 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root{
  --green-50:#f0fdf4; --green-100:#dcfce7; --green-200:#bbf7d0; --green-300:#86efac;
  --green-400:#4ade80; --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d;
  --green-800:#166534; --green-900:#14532d;
  --white:#ffffff; --bg:#f8faf9; --card:#ffffff; --border:#e6efe9;
  --text:#1f2937; --text-muted:#6b7280; --text-soft:#9ca3af;
  --danger:#ef4444; --warn:#f59e0b; --info:#3b82f6; --shadow:0 2px 8px rgba(22,163,74,0.08);
  --shadow-lg:0 8px 24px rgba(22,163,74,0.12);
  --radius:18px; --radius-sm:12px; --radius-lg:24px;
}
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; overflow:hidden;
  -webkit-user-select:none; user-select:none;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:14px; }
ul{ list-style:none; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#cde9d8; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ===== 主布局 ===== */
.app{ display:flex; height:100vh; width:100vw; }
.sidebar{
  width:27%; min-width:260px; max-width:340px; height:100vh;
  background:linear-gradient(180deg,#ffffff 0%,#f0fdf4 100%);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  padding:18px 12px; gap:4px; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:10px; padding:8px 10px 18px; }
.brand-logo{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--green-400),var(--green-600));
  display:flex; align-items:center; justify-content:center; font-size:22px;
  box-shadow:0 4px 10px rgba(34,197,94,0.3);
}
.brand-name{ font-weight:700; font-size:16px; color:var(--green-800); }
.brand-sub{ font-size:11px; color:var(--text-soft); }
.nav-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-sm);
  color:var(--text-muted); font-size:14px; font-weight:500; transition:all .18s; margin-bottom:2px;
  text-align:left; width:100%;
}
.nav-item:hover{ background:var(--green-50); color:var(--green-700); }
.nav-item.active{
  background:linear-gradient(135deg,var(--green-500),var(--green-600)); color:#fff;
  box-shadow:0 4px 12px rgba(34,197,94,0.28);
}
.nav-item .ico{ font-size:18px; width:22px; text-align:center; }
.sidebar-footer{ margin-top:auto; padding:10px; font-size:11px; color:var(--text-soft); text-align:center; }

.main{ flex:1; height:100vh; overflow-y:auto; padding:20px 24px; }
.page{ display:none; animation:fade .25s; }
.page.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ===== 通用组件 ===== */
.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.page-title{ font-size:22px; font-weight:700; color:var(--green-800); display:flex; align-items:center; gap:10px; }
.page-title .ico{ font-size:26px; }
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; transition:all .15s; white-space:nowrap;
}
.btn-primary{ background:linear-gradient(135deg,var(--green-500),var(--green-600)); color:#fff; box-shadow:0 3px 10px rgba(34,197,94,0.25); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 5px 14px rgba(34,197,94,0.35); }
.btn-soft{ background:var(--green-100); color:var(--green-700); }
.btn-soft:hover{ background:var(--green-200); }
.btn-ghost{ background:#fff; color:var(--text-muted); border:1px solid var(--border); }
.btn-ghost:hover{ border-color:var(--green-300); color:var(--green-700); }
.btn-danger{ background:#fee2e2; color:var(--danger); }
.btn-danger:hover{ background:#fecaca; }
.btn-sm{ padding:6px 10px; font-size:12px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.card{ background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card.green{ background:linear-gradient(135deg,var(--green-500),var(--green-600)); color:#fff; box-shadow:var(--shadow-lg); }
.card.green .muted{ color:rgba(255,255,255,0.85); }
.muted{ color:var(--text-muted); }
.empty{ text-align:center; padding:40px 20px; color:var(--text-soft); }
.empty .em-ico{ font-size:48px; margin-bottom:10px; opacity:.5; }

.grid{ display:grid; gap:12px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1100px){ .grid-4{ grid-template-columns:repeat(3,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.between{ justify-content:space-between; }
.grow{ flex:1; }
.tag{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.tag-green{ background:var(--green-100); color:var(--green-700); }
.tag-yellow{ background:#fef3c7; color:#b45309; }
.tag-red{ background:#fee2e2; color:#b91c1c; }
.tag-blue{ background:#dbeafe; color:#1d4ed8; }
.tag-gray{ background:#f3f4f6; color:#6b7280; }

/* 表单 */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:5px; }
.input,select,textarea{
  width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:10px;
  background:#fff; color:var(--text); transition:border .15s; outline:none;
}
.input:focus,select:focus,textarea:focus{ border-color:var(--green-400); box-shadow:0 0 0 3px rgba(34,197,94,0.1); }
textarea{ resize:vertical; min-height:60px; }

/* 弹窗 */
.modal-mask{
  position:fixed; inset:0; background:rgba(20,40,30,0.45); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(2px);
}
.modal-mask.show{ display:flex; }
.modal{
  background:#fff; border-radius:var(--radius-lg); padding:22px; width:520px; max-width:100%;
  max-height:85vh; overflow-y:auto; box-shadow:0 20px 50px rgba(0,0,0,0.2); animation:pop .2s;
}
@keyframes pop{ from{transform:scale(.94); opacity:0;} to{transform:scale(1); opacity:1;} }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-title{ font-size:17px; font-weight:700; color:var(--green-800); }
.modal-close{ font-size:22px; color:var(--text-soft); width:32px; height:32px; border-radius:8px; }
.modal-close:hover{ background:#f3f4f6; }
.modal-foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

/* 列表项 */
.list-item{
  background:#fff; border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:10px;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; transition:transform .12s;
  border-left:4px solid transparent;
}
.list-item:hover{ transform:translateX(2px); }
.list-item.clickable{ cursor:pointer; }
.list-item.clickable:hover{ border-left-color:var(--green-400); }
.li-main{ flex:1; min-width:0; }
.li-title{ font-weight:600; font-size:14px; }
.li-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.li-actions{ display:flex; gap:6px; }

/* ===== 工作台总览 ===== */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.topbar .date{ font-size:13px; color:var(--text-muted); }
.coin-card{ display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.coin-big{ font-size:38px; font-weight:800; color:var(--green-600); }
.coin-icon{ font-size:34px; }
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:1100px){ .shop-grid{ grid-template-columns:repeat(3,1fr);} }
.shop-item{
  background:#fff; border:2px solid var(--border); border-radius:var(--radius-sm); padding:12px;
  text-align:center; cursor:pointer; transition:all .15s; position:relative;
}
.shop-item:hover{ border-color:var(--green-400); transform:translateY(-2px); box-shadow:var(--shadow); }
.shop-emoji{ font-size:34px; }
.shop-name{ font-size:12px; font-weight:600; margin-top:4px; }
.shop-cost{
  display:inline-flex; align-items:center; gap:3px; margin-top:6px;
  background:var(--green-50); color:var(--green-700); padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700;
}

/* 控制台统计块 */
.stat-block{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.15); padding:12px 16px; border-radius:14px; }
.stat-num{ font-size:24px; font-weight:800; }
.stat-label{ font-size:11px; opacity:.85; }
.warn-line{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(255,255,255,0.12); border-radius:12px; margin-top:8px; font-size:13px; }

/* ===== 学员选择器 ===== */
.student-switcher{
  display:flex; align-items:center; gap:10px; background:#fff; padding:8px 12px; border-radius:var(--radius-sm);
  box-shadow:var(--shadow); margin-bottom:14px;
}
.student-switcher select{ border:none; font-weight:600; color:var(--green-700); padding:4px; }

/* ===== 花园 ===== */
.garden-wrap{ display:grid; grid-template-columns:1fr 240px; gap:14px; }
@media(max-width:1100px){ .garden-wrap{ grid-template-columns:1fr; } }
.garden-field{
  background:linear-gradient(180deg,#8b6f47,#7a5e3c); border-radius:var(--radius); padding:14px;
  min-height:380px; position:relative; box-shadow:inset 0 4px 12px rgba(0,0,0,0.2);
}
.garden-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.soil-cell{
  aspect-ratio:1; background:radial-gradient(circle,#6b4f2f,#5a3f22); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:30px; cursor:pointer;
  position:relative; transition:all .2s; border:2px solid transparent;
}
.soil-cell:hover{ border-color:rgba(255,255,255,0.4); transform:scale(1.04); }
.soil-cell.planted{ background:radial-gradient(circle,#5a3f22,#4a3318); }
.soil-cell .plant{ animation:grow .4s; }
@keyframes grow{ from{transform:scale(0);} to{transform:scale(1);} }
.soil-cell .ripe-glow{ position:absolute; inset:0; border-radius:10px; box-shadow:0 0 12px rgba(250,204,21,0.6); animation:pulse 2s infinite; pointer-events:none; }
@keyframes pulse{ 0%,100%{opacity:.4;} 50%{opacity:.9;} }

.seed-bag{
  background:#fff; border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); max-height:420px; overflow-y:auto;
}
.seed-bag h4{ font-size:13px; color:var(--green-700); margin-bottom:10px; }
.seed-chip{
  display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:10px;
  background:var(--green-50); margin-bottom:6px; cursor:pointer; transition:all .15s; border:2px solid transparent;
}
.seed-chip:hover{ background:var(--green-100); }
.seed-chip.selected{ border-color:var(--green-500); background:var(--green-100); }
.seed-chip .em{ font-size:22px; }
.seed-chip .cnt{ font-size:12px; font-weight:700; color:var(--green-700); }

.monster-bar{
  background:linear-gradient(90deg,#7f1d1d,#991b1b); color:#fff; border-radius:var(--radius-sm);
  padding:12px 16px; margin-bottom:12px; display:flex; align-items:center; gap:12px;
  animation:shake 0.5s infinite alternate;
}
@keyframes shake{ from{transform:translateX(-2px);} to{transform:translateX(2px);} }
.monster-emoji{ font-size:36px; }
.countdown{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }

.plant-detail{
  position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  font-size:9px; color:#fbbf24; white-space:nowrap; font-weight:700;
}

/* 金币库显示 */
.coin-bag-display{
  display:inline-flex; align-items:center; gap:6px; background:var(--green-50); padding:6px 12px;
  border-radius:20px; font-weight:700; color:var(--green-700); font-size:13px;
}

/* ===== 详情页头 ===== */
.detail-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.avatar{
  width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,var(--green-300),var(--green-500));
  display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; font-weight:700;
}
.info-tabs{ display:flex; gap:6px; margin-bottom:14px; border-bottom:2px solid var(--border); }
.info-tab{ padding:8px 14px; font-size:13px; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; }
.info-tab.active{ color:var(--green-700); border-color:var(--green-500); }

.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; }
.kv dt{ color:var(--text-muted); }
.kv dd{ font-weight:500; }

/* toast */
.toast{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#1f2937; color:#fff;
  padding:10px 20px; border-radius:12px; font-size:13px; z-index:2000; box-shadow:0 6px 20px rgba(0,0,0,0.3);
  animation:toastIn .25s;
}
@keyframes toastIn{ from{opacity:0; transform:translate(-50%,-10px);} to{opacity:1; transform:translate(-50%,0);} }
.toast.success{ background:var(--green-600); }
.toast.error{ background:var(--danger); }

/* 花园提示横幅 */
.garden-tip{ background:#fffbeb; border:1px solid #fde68a; color:#92400e; padding:10px 14px; border-radius:12px; font-size:12px; margin-bottom:10px; }

/* ===== 植物大战僵尸式怪兽 ===== */
.garden-field{ position:relative; overflow:hidden; }
.monster-layer{ position:absolute; inset:14px; pointer-events:none; z-index:5; }
.lane-entry{
  position:absolute; right:-2px; width:14px; border-radius:6px 0 0 6px;
  background:linear-gradient(180deg,#7f1d1d,#450a0a); box-shadow:inset 2px 0 6px rgba(0,0,0,0.4);
}
.monster-pawn{
  position:absolute; font-size:34px; line-height:1; pointer-events:auto; cursor:pointer;
  transition:left .6s ease; z-index:6;
  animation:monsterWalk 0.6s infinite alternate ease-in-out;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.4)); user-select:none;
}
@keyframes monsterWalk{ from{ transform:translateY(0) rotate(-4deg);} to{ transform:translateY(-3px) rotate(4deg);} }
.monster-pawn.eating{ animation:monsterEat 0.4s infinite alternate ease-in-out; }
@keyframes monsterEat{ from{ transform:translateX(0) scale(1);} to{ transform:translateX(-4px) scale(1.08);} }
.monster-pawn .hp-bar{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:36px; height:5px; background:rgba(0,0,0,0.5); border-radius:3px; overflow:hidden;
}
.monster-pawn .hp-fill{ height:100%; background:linear-gradient(90deg,#ef4444,#f59e0b); transition:width .3s; }
.monster-pawn .dmg-pop{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-size:13px; font-weight:800; color:#fde047; text-shadow:0 1px 2px #000;
  animation:dmgFloat 0.8s ease-out forwards; pointer-events:none;
}
@keyframes dmgFloat{ from{opacity:1; transform:translate(-50%,0);} to{opacity:0; transform:translate(-50%,-24px);} }
.monster-speech{
  position:absolute; top:-26px; right:-4px; background:#7f1d1d; color:#fde047; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:10px; white-space:nowrap; box-shadow:0 3px 8px rgba(0,0,0,0.3);
  animation:speechPop .5s ease-out;
}
@keyframes speechPop{ from{opacity:0; transform:translateX(10px);} to{opacity:1; transform:none;} }
.monster-defeat-fx{ position:absolute; font-size:34px; pointer-events:none; z-index:7; animation:defeatBurst 0.6s ease-out forwards; }
@keyframes defeatBurst{ 0%{opacity:1; transform:scale(1) rotate(0);} 100%{opacity:0; transform:scale(2.4) rotate(45deg);} }
.soil-cell.under-attack{ animation:cellShake 0.3s infinite alternate; }
@keyframes cellShake{ from{transform:translateX(0);} to{transform:translateX(3px);} }

/* ===== 太阳金币实体 ===== */
.sun-coin{
  position:absolute; font-size:26px; cursor:pointer; z-index:8;
  animation:sunFloat 3s ease-in-out infinite, sunDrop 0.6s ease-out;
  filter:drop-shadow(0 0 8px rgba(253,224,71,0.8)); user-select:none; pointer-events:auto;
}
@keyframes sunDrop{ from{ transform:translateY(-30px) scale(0.5); opacity:0;} to{ transform:translateY(0) scale(1); opacity:1;} }
@keyframes sunFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.sun-coin.collecting{ animation:sunCollect 0.5s ease-in forwards; }
@keyframes sunCollect{ to{ transform:translate(120px,-40px) scale(0.3); opacity:0;} }
.sun-coin .coin-ring{
  position:absolute; inset:-4px; border:2px solid #fde047; border-radius:50%;
  animation:ringPulse 2s infinite; pointer-events:none;
}
@keyframes ringPulse{ 0%,100%{opacity:0.4; transform:scale(1);} 50%{opacity:0.8; transform:scale(1.15);} }
.sunflower-glow{ position:absolute; inset:0; border-radius:10px; pointer-events:none; animation:sunflowerPulse 1.8s infinite; }
@keyframes sunflowerPulse{ 0%,100%{ box-shadow:0 0 8px rgba(253,224,71,0.3);} 50%{ box-shadow:0 0 16px rgba(253,224,71,0.7);} }

/* ===== 总览倒计时醒目样式 ===== */
.overview-monster-card{
  background:linear-gradient(90deg,#7f1d1d,#991b1b); color:#fff; border-radius:var(--radius-sm);
  padding:14px 16px; margin-top:10px; position:relative; overflow:hidden;
}
.overview-monster-card::before{ content:'🧟'; position:absolute; right:10px; top:-6px; font-size:64px; opacity:0.12; }
.overview-countdown-big{ font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; color:#fde047; text-shadow:0 2px 6px rgba(0,0,0,0.4); }
.overview-monster-progress{ height:6px; background:rgba(255,255,255,0.2); border-radius:3px; margin-top:8px; overflow:hidden; }
.overview-monster-progress .bar{ height:100%; background:linear-gradient(90deg,#fde047,#f59e0b); transition:width .5s; }