/* ==================================================================
   芽野花园 · 视觉系统
   风格：Riso 版画 × 手账贴纸 × 苗圃木牌。奶油纸底 + 苔绿砖红，
   硬阴影、歪斜胶带、颗粒噪点，拒绝千篇一律的卡片流。
   ================================================================== */
:root {
  --paper: #FBF3E4;
  --card: #FFFDF7;
  --ink: #33261B;
  --ink-soft: #6B5A48;
  --moss: #4C7A3F;
  --leaf: #8CB369;
  --tomato: #E4572E;
  --sun: #F6A83C;
  --sky: #4E8FA8;
  --pink: #E8709B;
  --laven: #8E7CC3;
  --shadow: 4px 4px 0 rgba(51, 38, 27, .16);
  --shadow-sm: 3px 3px 0 rgba(51, 38, 27, .14);
  --r: 18px;
  --font-title: "ZCOOL KuaiLe", "Yuanti SC", "Microsoft YaHei", sans-serif;
  --font-body: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}
/* 纸张颗粒 */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--moss); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- 布局骨架 ---------- */
#stage { max-width: 1240px; margin: 0 auto; padding: 84px 18px 110px; }
@media (max-width: 860px) { #stage { padding: 64px 12px 120px; } }

/* ---------- 顶栏（桌面浮岛 / 移动端简化） ---------- */
.topbar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(1200px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 999px;
  padding: 8px 10px 8px 18px; box-shadow: var(--shadow); z-index: 100;
}
.brand { font-family: var(--font-title); font-size: 22px; color: var(--moss); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand .bud { display: inline-block; animation: sway 2.6s ease-in-out infinite; transform-origin: bottom; font-size: 24px; }
@keyframes sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.topnav { display: flex; gap: 2px; flex: 1; justify-content: center; }
.topnav a {
  padding: 6px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-soft);
  border: 2px solid transparent; white-space: nowrap;
}
.topnav a:hover { color: var(--ink); background: #f3e9d6; }
.topnav a.on { background: var(--moss); color: #fff; border-color: var(--ink); box-shadow: 2px 2px 0 rgba(51, 38, 27, .25); transform: rotate(-1.5deg); }
.topme { display: flex; align-items: center; gap: 8px; }
@media (max-width: 980px) { .topnav { display: none; } .topbar { padding-left: 14px; } }
@media (max-width: 860px) { .topbar { top: 0; left: 0; right: 0; width: auto; transform: none; border-radius: 0 0 22px 22px; border-width: 0 0 2px; box-shadow: 0 3px 0 rgba(51, 38, 27, .12); } }

/* ---------- 底部「花田小径」导航（移动端） ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: none; justify-content: space-around; align-items: flex-end;
  background: linear-gradient(#5c4630, #3b2c1d);
  border-top: 3px solid var(--ink); padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
}
.tabbar a { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 2px; color: #d8c8ae; font-size: 11px; position: relative; }
.tabbar a .ico { font-size: 22px; transition: transform .25s; }
.tabbar a.on { color: #fff; }
.tabbar a.on .ico { transform: translateY(-6px) scale(1.25); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.tabbar a.on::after { content: ""; position: absolute; bottom: -8px; width: 18px; height: 4px; border-radius: 4px; background: var(--leaf); }
.tabbar .plant-btn { margin-top: -34px; }
.tabbar .plant-btn .ico {
  width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--sun), var(--tomato));
  border: 3px solid var(--ink); display: grid; place-items: center; font-size: 26px; color: #fff;
  box-shadow: 0 6px 0 #241a10;
}
.tabbar .plant-btn:active .ico { transform: translateY(3px); box-shadow: 0 3px 0 #241a10; }
@media (max-width: 860px) { .tabbar { display: flex; } }
.badge-dot { position: absolute; top: -4px; right: 4px; min-width: 16px; height: 16px; border-radius: 10px; background: var(--tomato); color: #fff; font-size: 10px; display: grid; place-items: center; border: 2px solid var(--ink); padding: 0 3px; }

/* ---------- 通用组件 ---------- */
.avatar { border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); flex: none; object-fit: cover; }
.card {
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 16px; position: relative;
}
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  border: 2px solid var(--ink); border-radius: 999px; padding: 8px 18px;
  background: var(--leaf); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s; font-size: 15px;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(51, 38, 27, .16); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(51, 38, 27, .14); }
.btn.red { background: var(--tomato); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.btn.sun { background: var(--sun); }
.btn.sm { padding: 4px 12px; font-size: 13px; border-radius: 999px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 10px; border: 1.5px dashed var(--ink-soft); border-radius: 999px; color: var(--ink-soft); background: #fff8; }
.chip.solid { border-style: solid; border-color: var(--ink); color: var(--ink); font-weight: 700; box-shadow: 2px 2px 0 rgba(51, 38, 27, .12); }
.tag-hash { color: var(--sky); font-weight: 600; font-size: 13px; cursor: pointer; }
.tag-hash:hover { text-decoration: underline wavy; }
.divider-soil { height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--leaf) 0 14px, transparent 14px 22px); margin: 22px 0; opacity: .55; }

/* 表单 */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.field label .req { color: var(--tomato); }
.field input[type=text], .field input[type=password], .field input[type=number], .field select, .field textarea {
  width: 100%; border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px;
  background: #fff; outline: none; transition: box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 3px 3px 0 var(--leaf); }
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* 星级 */
.stars { display: inline-flex; gap: 2px; font-size: 20px; cursor: pointer; user-select: none; }
.stars .st { color: #d9cdb8; transition: transform .1s, color .1s; }
.stars .st.on { color: var(--sun); transform: scale(1.1); }
.stars.static { cursor: default; font-size: 16px; }
.stars.static .st.on { color: var(--tomato); }

/* ---------- 首页 Banner「发芽中」 ---------- */
.hero { position: relative; border: 2px solid var(--ink); border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, #cfe3b8 0%, #f4e3c2 55%, #f7d9c4 100%);
  padding: 42px 30px 30px; margin-bottom: 30px; box-shadow: 6px 6px 0 rgba(51, 38, 27, .18);
}
.hero h1 { font-family: var(--font-title); font-size: clamp(30px, 5vw, 52px); line-height: 1.15; letter-spacing: 2px; max-width: 620px; }
.hero h1 em { font-style: normal; color: var(--tomato); position: relative; }
.hero h1 em::after { content: "🌸"; position: absolute; top: -14px; right: -20px; font-size: 20px; }
.hero p.sub { margin-top: 12px; max-width: 560px; color: #4b3a28; font-size: 15px; }
.hero-stats { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.hero-stats .hs { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 16px; box-shadow: var(--shadow-sm); transform: rotate(-1.2deg); }
.hero-stats .hs:nth-child(2) { transform: rotate(1.4deg); }
.hero-stats .hs:nth-child(3) { transform: rotate(-.6deg); }
.hero-stats .hs b { font-size: 22px; color: var(--moss); font-family: var(--font-title); }
.hero-stats .hs span { font-size: 12px; color: var(--ink-soft); display: block; }
.hero .field-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 34px; background: linear-gradient(#8c6a48, #5c4630); border-top: 2px solid var(--ink); display: flex; justify-content: space-around; align-items: flex-end; font-size: 22px; padding-bottom: 2px; overflow: hidden; }
.hero .field-strip i { font-style: normal; animation: popgrow 3.4s ease-in-out infinite; transform-origin: bottom; display: inline-block; }
.hero .field-strip i:nth-child(even) { animation-delay: 1.7s; }
@keyframes popgrow { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.18) rotate(4deg); } }
.sun-deco { position: absolute; right: 26px; top: 20px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd876, var(--sun)); border: 3px solid var(--ink); animation: spin-slow 24s linear infinite; }
.sun-deco::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 3px dashed var(--sun); }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .sun-deco { width: 54px; height: 54px; } .hero { padding: 30px 18px 26px; } }

/* 分类「苗畦」横滚 */
.catbed { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px; scrollbar-width: none; }
.catbed::-webkit-scrollbar { display: none; }
.catbed .cb {
  flex: none; width: 96px; text-align: center; background: var(--card); border: 2px solid var(--ink);
  border-radius: 16px; padding: 12px 6px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s;
}
.catbed .cb:hover { transform: translateY(-4px) rotate(-1deg); }
.catbed .cb.on { background: var(--moss); color: #fff; }
.catbed .cb .e { font-size: 30px; display: block; }
.catbed .cb .n { font-size: 13px; font-weight: 700; margin-top: 4px; display: block; }

/* ---------- 帖子「木牌卡」瀑布流 ---------- */
.moss-bed { column-count: 3; column-gap: 18px; }
@media (max-width: 1020px) { .moss-bed { column-count: 2; } }
@media (max-width: 560px) { .moss-bed { column-count: 1; } }
.post-card {
  break-inside: avoid; margin-bottom: 18px; background: var(--card); border: 2px solid var(--ink);
  border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; cursor: pointer;
  transition: transform .18s, box-shadow .18s; position: relative;
}
.post-card:nth-child(3n+1) { transform: rotate(-.6deg); }
.post-card:nth-child(3n) { transform: rotate(.5deg); }
.post-card:hover { transform: translateY(-5px) rotate(0); box-shadow: 7px 8px 0 rgba(51, 38, 27, .18); }
.post-card .tape {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 86px; height: 22px; background: rgba(246, 168, 60, .55); border: 1px dashed rgba(51, 38, 27, .35); z-index: 3;
}
.post-card .cover { position: relative; }
.post-card .cover img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.post-card .cat-flag { position: absolute; top: 10px; left: 10px; background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; box-shadow: 2px 2px 0 rgba(51, 38, 27, .2); z-index: 2; }
.post-card .kind-flag { position: absolute; top: 10px; right: 10px; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 2px solid var(--ink); font-weight: 800; z-index: 2; }
.kind-seed .kind-flag, .post-card .kind-flag.seed { background: var(--leaf); color: var(--ink); }
.post-card .kind-flag.bloom { background: var(--pink); color: #fff; }
.grow-badge { position: absolute; right: 10px; bottom: 10px; width: 46px; height: 46px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; font-size: 20px; background: var(--card); border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(51, 38, 27, .25); }
.grow-badge::before { content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(var(--moss) calc(var(--pct) * 1%), rgba(51, 38, 27, .12) 0); z-index: -1; }
.grow-badge.bloom { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.post-card .pc-body { padding: 12px 14px 14px; }
.post-card h3 { font-size: 16.5px; line-height: 1.4; margin-bottom: 6px; font-family: var(--font-title); font-weight: 400; letter-spacing: .5px; }
.post-card .excerpt { font-size: 13px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .pc-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.post-card .pc-meta .avatar { width: 26px; height: 26px; }
.post-card .pc-meta .who { font-weight: 700; color: var(--ink); }
.mood-stamp { display: inline-block; border: 2px solid var(--tomato); color: var(--tomato); border-radius: 8px; padding: 0 8px; font-size: 12px; font-weight: 800; transform: rotate(-6deg); }
.loc-pin { color: var(--sky); font-size: 12px; }
.acts { display: flex; gap: 4px; margin-top: 12px; border-top: 2px dashed #e5d9c2; padding-top: 10px; }
.acts button { flex: 1; background: none; border: 2px solid transparent; border-radius: 12px; font-size: 13px; color: var(--ink-soft); padding: 5px 0; display: flex; align-items: center; justify-content: center; gap: 4px; transition: all .15s; }
.acts button:hover { background: #f6ecd9; border-color: #e5d9c2; }
.acts button.did { color: var(--tomato); font-weight: 800; }
.acts button.did.fav { color: var(--sun); }

/* ---------- 详情页 ---------- */
.post-detail { max-width: 780px; margin: 0 auto; }
.pd-head h1 { font-family: var(--font-title); font-size: 30px; line-height: 1.3; letter-spacing: 1px; margin: 14px 0 10px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.gallery img { border: 2px solid var(--ink); border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; width: 100%; cursor: zoom-in; box-shadow: var(--shadow-sm); transition: transform .15s; }
.gallery img:hover { transform: rotate(-1deg) scale(1.02); }
.gallery .g-single { grid-column: 1 / -1; }
.pd-body { font-size: 16px; white-space: pre-wrap; }
.link-seedbox { border: 2px dashed var(--moss); background: #eef3e2; border-radius: 14px; padding: 10px 14px; margin: 14px 0; font-size: 14px; cursor: pointer; }
.link-seedbox:hover { background: #e2ecd2; }
.comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 2px dashed #eee2cb; }
.comment .avatar { width: 38px; height: 38px; }
.comment .c-body { flex: 1; }
.comment .c-name { font-weight: 800; font-size: 14px; }
.comment .c-time { color: var(--ink-soft); font-size: 12px; margin-left: 6px; }
.comment .c-text { margin-top: 2px; }
.comment .c-reply { margin-top: 6px; background: #f7efdd; border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.comment-actions { font-size: 12px; margin-top: 4px; }
.comment-actions button { background: none; border: none; color: var(--sky); font-size: 12px; }

/* ---------- 发布页「播种台」 ---------- */
.sow { max-width: 720px; margin: 0 auto; }
.cat-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 560px) { .cat-pick { grid-template-columns: repeat(3, 1fr); } }
.cat-pick .cp { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; text-align: center; padding: 10px 4px; cursor: pointer; font-size: 12px; transition: all .12s; }
.cat-pick .cp .e { font-size: 24px; display: block; }
.cat-pick .cp.on { background: var(--moss); color: #fff; transform: rotate(-2deg) scale(1.04); box-shadow: var(--shadow-sm); }
.img-slots { display: flex; gap: 10px; flex-wrap: wrap; }
.img-slots .slot { width: 110px; height: 84px; border: 2px dashed var(--ink-soft); border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; background: #fff8; cursor: pointer; font-size: 22px; color: var(--ink-soft); }
.img-slots .slot img { width: 100%; height: 100%; object-fit: cover; }
.img-slots .slot .del { position: absolute; top: 2px; right: 2px; background: var(--tomato); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 1; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.seg button { background: var(--card); border: none; padding: 7px 18px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.seg button.on { background: var(--tomato); color: #fff; }
.picker-map { height: 240px; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; margin-top: 8px; }

/* ---------- 榜单「花市」 ---------- */
.rank-wrap { max-width: 820px; margin: 0 auto; }
.rank-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.rank-item { display: flex; gap: 14px; align-items: center; background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s; }
.rank-item:hover { transform: translateX(4px); }
.rank-item .rk { font-family: var(--font-title); font-size: 34px; width: 46px; text-align: center; color: var(--ink-soft); flex: none; }
.rank-item.top1 .rk { color: var(--tomato); }
.rank-item.top2 .rk { color: var(--sun); }
.rank-item.top3 .rk { color: var(--sky); }
.rank-item .thumb { width: 72px; height: 72px; border-radius: 12px; border: 2px solid var(--ink); object-fit: cover; flex: none; }
.rank-item .r-info { flex: 1; min-width: 0; }
.rank-item .r-title { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heatbar { height: 8px; background: #eee2c8; border-radius: 4px; overflow: hidden; border: 1px solid var(--ink-soft); margin-top: 6px; }
.heatbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--leaf), var(--sun), var(--tomato)); border-radius: 4px; }

/* ---------- 地图 ---------- */
.map-shell { border: 2px solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); position: relative; background: #cfe0ea; }
.ymap { position: relative; height: 560px; touch-action: none; cursor: grab; overflow: hidden; background: #a5c8b8; }
.ymap.sketch { background:
  radial-gradient(circle at 30% 40%, #cde3c0 0 18%, transparent 19%),
  radial-gradient(circle at 65% 30%, #bcd7e6 0 14%, transparent 15%),
  radial-gradient(circle at 80% 65%, #e8d9b5 0 20%, transparent 21%),
  repeating-linear-gradient(0deg, transparent 0 39px, rgba(76, 122, 63, .18) 39px 40px),
  repeating-linear-gradient(90deg, transparent 0 39px, rgba(76, 122, 63, .18) 39px 40px), #dcead0; }
.ymap .tiles { position: absolute; inset: 0; }
.ymap .tiles img { position: absolute; width: 256px; height: 256px; max-width: none; image-rendering: auto; -webkit-user-drag: none; user-select: none; }
.ymap .overlay { position: absolute; inset: 0; }
.ymarker { position: absolute; transform: translate(-50%, -100%); cursor: pointer; z-index: 5; }
.ymarker .pin { width: 40px; height: 40px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--tomato); border: 2px solid var(--ink); display: grid; place-items: center; box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); transition: transform .15s; }
.ymarker .pin span { transform: rotate(45deg); font-size: 18px; }
.ymarker:hover .pin { transform: rotate(-45deg) scale(1.15); }
.ymarker.mine .pin { background: var(--moss); }
.ymarker .cnt { position: absolute; top: -8px; right: -8px; background: var(--sun); color: var(--ink); font-size: 10px; font-weight: 800; border: 2px solid var(--ink); border-radius: 999px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 3px; }
.ypopup { position: absolute; z-index: 20; width: 250px; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); padding: 10px; transform: translate(-50%, calc(-100% - 46px)); font-size: 13px; }
.ypopup img { border-radius: 8px; height: 110px; width: 100%; object-fit: cover; border: 2px solid var(--ink); }
.ypopup .close { position: absolute; top: 4px; right: 6px; border: none; background: none; font-size: 16px; cursor: pointer; }
.map-tools { position: absolute; right: 12px; top: 12px; z-index: 30; display: flex; flex-direction: column; gap: 6px; }
.map-tools button { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--ink); background: var(--card); font-size: 17px; font-weight: 800; box-shadow: var(--shadow-sm); }
.map-tools button.on { background: var(--moss); color: #fff; }
.map-legend { position: absolute; left: 12px; bottom: 12px; z-index: 30; background: #fffbe; border: 2px solid var(--ink); border-radius: 12px; padding: 6px 12px; font-size: 12px; box-shadow: var(--shadow-sm); }
.map-credit { position: absolute; right: 8px; bottom: 6px; z-index: 30; font-size: 11px; color: #555; background: #ffffffb0; padding: 2px 8px; border-radius: 8px; }
.map-note { left: 10px; top: 10px; right: auto; bottom: auto; max-width: 62%; font-size: 12px; color: var(--ink); background: #fffdf2ea; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 10px; box-shadow: var(--shadow-sm); }

/* ---------- 个人中心 ---------- */
.profile-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile-head .avatar { width: 86px; height: 86px; }
.profile-head h2 { font-family: var(--font-title); font-size: 26px; }
.stat-bed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
@media (max-width: 640px) { .stat-bed { grid-template-columns: repeat(2, 1fr); } }
.stat-bed .sb { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 12px; text-align: center; box-shadow: var(--shadow-sm); }
.stat-bed .sb b { display: block; font-size: 24px; font-family: var(--font-title); color: var(--moss); }
.stat-bed .sb span { font-size: 12px; color: var(--ink-soft); }
.medals { display: flex; gap: 10px; flex-wrap: wrap; }
.medal { border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-size: 13px; background: #fff3d6; transform: rotate(-1deg); box-shadow: 2px 2px 0 rgba(51, 38, 27, .15); }
.medal.gray { filter: grayscale(1); opacity: .55; }

/* ---------- 管理后台 ---------- */
.admin-shell { display: grid; grid-template-columns: 190px 1fr; gap: 18px; }
@media (max-width: 760px) { .admin-shell { grid-template-columns: 1fr; } }
.admin-side { display: flex; flex-direction: column; gap: 6px; align-self: start; position: sticky; top: 92px; }
.admin-side button { text-align: left; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 9px 14px; font-size: 14px; font-weight: 700; box-shadow: var(--shadow-sm); }
.admin-side button.on { background: var(--tomato); color: #fff; }
table.grid { width: 100%; border-collapse: collapse; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; font-size: 14px; }
table.grid th, table.grid td { padding: 9px 10px; border-bottom: 1.5px dashed #e0d3ba; text-align: left; vertical-align: middle; }
table.grid th { background: #f3e9d6; font-size: 13px; }
table.grid tr:hover td { background: #fff8ea; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1.5px solid; }
.pill.ok { color: var(--moss); border-color: var(--moss); background: #eef3e2; }
.pill.wait { color: #b7791f; border-color: #d9a441; background: #fdf3d7; }
.pill.no { color: var(--tomato); border-color: var(--tomato); background: #fde6dd; }
.bar-chart { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding: 10px 6px 0; }
.bar-chart .bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bar-chart .bcol .bar { width: 70%; max-width: 46px; background: linear-gradient(var(--leaf), var(--moss)); border: 2px solid var(--ink); border-radius: 8px 8px 0 0; transition: height .5s cubic-bezier(.2, .8, .3, 1.1); }
.bar-chart .bcol .v { font-size: 12px; font-weight: 800; }
.bar-chart .bcol .l { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; max-width: 100%; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpis .kp { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow-sm); }
.kpis .kp b { font-size: 26px; font-family: var(--font-title); }
.kpis .kp .t { font-size: 12px; color: var(--ink-soft); }

/* ---------- 登录 ---------- */
.gate { max-width: 900px; margin: 4vh auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
@media (max-width: 760px) { .gate { grid-template-columns: 1fr; } }
.gate .pitch { background: linear-gradient(160deg, #d9e8c2, #f6e7c1); border: 2px solid var(--ink); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.gate .pitch h2 { font-family: var(--font-title); font-size: 32px; line-height: 1.3; }
.gate .pitch .deco { position: absolute; right: 4px; bottom: -6px; font-size: 110px; opacity: .25; transform: rotate(-8deg); }
.demo-accounts { display: flex; flex-direction: column; gap: 6px; }
.demo-accounts button { background: #fffde; border: 2px dashed var(--moss); border-radius: 10px; padding: 6px 10px; font-size: 13px; text-align: left; }
.demo-accounts button:hover { background: var(--moss); color: #fff; }

/* ---------- 消息 / 其他 ---------- */
.note-item { display: flex; gap: 10px; padding: 12px 4px; border-bottom: 2px dashed #eee2cb; cursor: pointer; align-items: flex-start; }
.note-item.unread { background: #fff5da; }
.note-item .avatar { width: 34px; height: 34px; }
.empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty .big { font-size: 54px; display: block; margin-bottom: 10px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(30px); background: var(--ink); color: #fff; padding: 10px 22px; border-radius: 999px; opacity: 0; transition: all .3s; z-index: 1000; pointer-events: none; font-size: 14px; max-width: 86vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lightbox { position: fixed; inset: 0; background: rgba(20, 12, 6, .88); z-index: 1001; display: grid; place-items: center; cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 88vh; border: 3px solid #fff; border-radius: 10px; }
.section-title { font-family: var(--font-title); font-size: 24px; display: flex; align-items: center; gap: 10px; margin: 22px 0 14px; letter-spacing: 1px; }
.section-title::after { content: ""; flex: 1; height: 3px; background: repeating-linear-gradient(90deg, var(--leaf) 0 10px, transparent 10px 18px); border-radius: 2px; opacity: .5; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .5s; }
.reveal.shown { opacity: 1; transform: none; }