:root {
  color-scheme: light;
  --bg: #f8f3ef;
  --paper: #fffdf9;
  --ink: #2d2926;
  --muted: #746b64;
  --line: #e5d9cf;
  --field: #fffaf4;
  --green: #4e735b;
  --green-dark: #31513d;
  --rose: #b8666e;
  --gold: #c28c44;
  --blue: #55758f;
  --shadow: 0 18px 50px rgba(67, 48, 32, 0.12);
  --topbar: rgba(255, 253, 249, 0.82);
  --hero-wash: rgba(248, 243, 239, 0.95);
  --hero-fade: rgba(248, 243, 239, 0.6);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171a18;
  --paper: #222621;
  --ink: #f3eee7;
  --muted: #b9aca1;
  --line: #3a4039;
  --field: #191d1a;
  --green: #8eb996;
  --green-dark: #b9dcc0;
  --rose: #d8848d;
  --gold: #dfb46e;
  --blue: #8fb0c9;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  --topbar: rgba(28, 31, 28, 0.84);
  --hero-wash: rgba(23, 26, 24, 0.95);
  --hero-fade: rgba(23, 26, 24, 0.62);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    /* 右上角日光光晕 */
    radial-gradient(ellipse at 82% 6%, rgba(245, 220, 150, 0.35) 0%, transparent 50%),
    /* 温馨地面暖色 */
    radial-gradient(ellipse at 50% 100%, rgba(232, 222, 202, 0.6) 0%, transparent 55%),
    /* 左侧叶片光斑 */
    radial-gradient(circle at 8% 40%, rgba(142, 185, 150, 0.08) 0%, transparent 30%),
    linear-gradient(180deg, #fbf6f0 0%, var(--bg) 48%, #f0ebe3 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 日间模式：标题区暖色光晕 */
.hero-copy {
  text-shadow: 0 2px 12px rgba(160, 130, 80, 0.12);
}

/* 页面底部温馨渐隐 */
main::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(248, 243, 239, 0.5) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}



/* 日间模式：标题区右侧阳光光斑 */
.hero-copy::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -50px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(245, 215, 140, 0.22) 0%, rgba(220, 185, 100, 0.07) 50%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

[data-theme="dark"] body {
  background:
    /* 月光：从右上角洒下的圆形光晕 */
    radial-gradient(ellipse at 82% 8%, rgba(223, 198, 130, 0.12) 0%, transparent 55%),
    /* 森林夜色：底部深色渐隐 */
    radial-gradient(ellipse at 50% 100%, rgba(10, 18, 10, 0.95) 0%, transparent 70%),
    /* 树洞入口：中央偏下的暖色弧光 */
    radial-gradient(ellipse at 50% 85%, rgba(142, 185, 150, 0.06) 0%, transparent 50%),
    /* 顶部微光 */
    linear-gradient(180deg, #0a120d 0%, #111a14 35%, var(--bg) 100%);
}

[data-theme="dark"] .hero {
  background:
    linear-gradient(180deg, rgba(14, 22, 16, 0.0) 0%, rgba(10, 16, 12, 0.7) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='560' viewBox='0 0 900 560'%3E%3Crect width='900' height='560' fill='%23141611'/%3E%3Cdefs%3E%3CradialGradient id='moon' cx='72%25' cy='12%25' r='22%25'%3E%3Cstop offset='0%25' stop-color='%23f0e8c8' stop-opacity='0.95'/%3E%3Cstop offset='60%25' stop-color='%23d4c890' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='%23c0a860' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='moonGlow' cx='72%25' cy='12%25' r='40%25'%3E%3Cstop offset='0%25' stop-color='%23e8d8a0' stop-opacity='0.08'/%3E%3Cstop offset='100%25' stop-color='%23e8d8a0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='648' cy='67' rx='200' ry='200' fill='url(%23moonGlow)'/%3E%3Cellipse cx='648' cy='67' rx='80' ry='80' fill='url(%23moon)'/%3E%3Cpath d='M0 560 L0 420 Q120 360 200 380 Q160 340 140 300 Q180 330 240 340 Q200 290 190 260 Q230 290 280 290 Q240 240 230 210 Q270 240 330 240 Q290 190 280 150 Q310 170 360 170 Q330 130 320 100 Q370 140 430 150 Q400 110 390 80 Q430 110 490 120 Q460 70 450 50 Q500 90 560 100 Q540 60 540 40 Q600 100 660 110 Q640 70 640 50 Q700 110 760 130 Q750 90 760 70 Q820 140 880 160 L900 160 L900 560Z' fill='%23162018' opacity='0.9'/%3E%3Cpath d='M0 560 L0 450 Q60 410 100 420 Q80 380 75 350 Q110 380 150 380 Q120 340 115 310 Q150 340 200 340 Q160 300 155 270 Q185 300 240 300 Q200 260 195 230 Q220 255 270 255 Q230 220 225 190 Q260 220 310 220 Q270 185 265 155 Q290 175 340 175 Q300 145 295 120 Q340 160 400 170 Q370 140 365 115 Q400 145 450 150 Q420 120 415 95 Q460 130 520 140 Q490 110 485 85 Q530 120 590 130 Q560 100 555 75 Q600 110 660 120 Q630 90 625 65 Q680 110 740 125 Q720 95 725 70 Q790 130 850 150 Q840 115 850 90 L900 95 L900 560Z' fill='%231a2820' opacity='0.85'/%3E%3Cpath d='M300 560 Q380 480 460 490 Q400 450 370 410 Q420 450 500 455 Q440 410 420 370 Q470 410 560 420 Q490 370 470 330 Q520 370 620 380 Q550 330 530 290 Q580 330 680 345 Q600 290 580 250 Q620 285 720 300 Q660 255 650 225 Q680 255 780 275 Q740 235 750 205 Q790 245 870 265 Q850 230 870 205 L900 210 L900 560Z' fill='%231e3024' opacity='0.75'/%3E%3Cpath d='M0 560 Q50 530 90 535 Q60 500 50 470 Q80 500 140 505 Q100 470 90 440 Q120 470 180 475 Q140 440 130 410 Q155 440 210 445 Q170 410 160 380 Q185 410 245 415 Q205 380 195 350 Q220 380 280 385 Q240 350 230 320 Q255 350 315 355 Q275 320 265 290 Q285 315 340 320 Q300 285 290 255 Q315 285 375 290 Q335 255 325 225 Q350 255 410 260 Q370 225 360 195 Q385 225 445 230 Q405 195 395 165 Q420 195 480 200 Q440 165 430 135 Q455 165 515 170 Q475 135 465 105 Q490 135 550 140 Q510 105 500 75 Q525 105 585 110 Q545 75 535 45 Q555 70 610 75 Q575 45 565 20 Q620 70 700 80 Q680 50 685 25 Q760 90 840 105 Q840 75 860 55 L900 60 L900 560Z' fill='%2322362a' opacity='0.6'/%3E%3Cellipse cx='450' cy='500' rx='120' ry='80' fill='%23141611' opacity='0.5'/%3E%3Cpath d='M200 480 Q320 410 450 420 Q340 380 280 320 Q380 380 500 390 Q400 340 360 280 Q450 350 560 360 Q470 310 440 260 Q520 330 660 340 Q540 280 500 230 Q570 300 720 310 Q620 250 580 200 Q640 270 800 280 Q720 220 690 170 Q730 240 870 260 L900 265 L900 560 L0 560Z' fill='%2326362e' opacity='0.4'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}



/* 夜间模式：标题区月光光晕 */
[data-theme="dark"] .hero-copy::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(223, 198, 130, 0.18) 0%, rgba(200, 168, 90, 0.06) 50%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
[data-theme="dark"] .topbar {
  border-bottom-color: rgba(255, 255, 255, 0.07);
  background: rgba(14, 20, 16, 0.88);
}

[data-theme="dark"] .panel,
[data-theme="dark"] .post-card,
[data-theme="dark"] .detail-article,
[data-theme="dark"] .admin-panel,
[data-theme="dark"] .admin-login {
  border-color: rgba(255, 255, 255, 0.07);
  background: color-mix(in srgb, #1a2419 88%, transparent);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .post-card:hover {
  border-color: rgba(142, 185, 150, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .filter,
[data-theme="dark"] .ghost-button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

[data-theme="dark"] .filter:hover,
[data-theme="dark"] .filter.active,
[data-theme="dark"] .ghost-button:hover {
  border-color: var(--green);
  background: rgba(142, 185, 150, 0.15);
  color: var(--green);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(142, 185, 150, 0.18);
}

button,
input,
textarea {
  font: inherit;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid rgba(229, 217, 207, 0.8);
  background: var(--topbar);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.brand-logo {
  height: 36px;
  width: auto;
  border-radius: 6px;
}
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 15px;
}

.nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav a {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  padding: 8px 10px;
}

.nav a:hover,
.theme-toggle:hover {
  color: var(--green-dark);
}

.theme-toggle {
  width: 42px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-size: 18px;
}

main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px clamp(18px, 4vw, 56px);
  background:
    linear-gradient(180deg, var(--hero-wash) 0%, rgba(248, 243, 239, 0.65) 35%, rgba(243, 237, 228, 0.85) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='560' viewBox='0 0 900 560'%3E%3Cdefs%3E%3CradialGradient id='sunGlow' cx='80%25' cy='15%25' r='30%25'%3E%3Cstop offset='0%25' stop-color='%23f5e6c0' stop-opacity='0.7'/%3E%3Cstop offset='50%25' stop-color='%23e8d090' stop-opacity='0.25'/%3E%3Cstop offset='100%25' stop-color='%23d4b860' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='900' height='560' fill='%23f7f2ec'/%3E%3Cellipse cx='720' cy='84' rx='270' ry='270' fill='url(%23sunGlow)'/%3E%3Cpath d='M0 560 L0 480 Q50 440 100 455 Q70 420 60 390 Q95 425 160 430 Q115 385 108 355 Q140 390 200 395 Q155 350 148 318 Q180 355 240 360 Q195 315 188 282 Q215 315 275 320 Q230 275 222 242 Q250 275 310 280 Q265 235 257 200 Q285 235 345 240 Q300 195 292 160 Q320 195 380 200 Q335 155 327 120 Q355 155 415 160 Q370 115 362 80 Q395 120 455 128 Q410 82 402 48 Q435 90 495 100 Q450 55 442 22 Q480 65 545 75 Q500 32 492 0 Q560 60 640 72 Q620 35 625 10 Q700 70 780 88 Q770 50 785 25 Q850 85 900 100 L900 560Z' fill='%23e8efe4' opacity='0.85'/%3E%3Cpath d='M0 560 L0 500 Q80 460 140 472 Q100 435 90 405 Q130 445 200 452 Q150 408 140 378 Q175 418 240 425 Q185 380 175 348 Q210 388 275 395 Q220 352 210 320 Q242 358 305 365 Q255 322 245 290 Q275 328 335 335 Q285 292 275 258 Q305 296 365 303 Q315 260 305 228 Q335 266 395 273 Q345 230 335 198 Q365 236 425 243 Q375 200 365 168 Q395 206 455 213 Q405 170 395 138 Q425 176 485 183 Q435 140 425 108 Q455 146 515 153 Q465 110 455 78 Q485 116 545 123 Q495 80 485 48 Q515 86 575 93 Q525 50 515 18 Q545 55 605 62 Q555 22 545 -10 Q600 40 680 52 Q660 20 665 -5 Q740 50 820 65 Q810 30 830 5 Q880 55 900 70 L900 560Z' fill='%23dde8d8' opacity='0.7'/%3E%3Cpath d='M0 560 L0 530 Q60 500 110 508 Q75 478 68 452 Q105 490 170 497 Q125 458 118 430 Q152 468 215 475 Q165 438 158 410 Q188 448 252 455 Q205 418 198 390 Q228 428 290 435 Q245 398 238 370 Q268 408 328 415 Q282 378 275 350 Q302 388 358 395 Q312 358 305 330 Q332 368 388 375 Q342 338 335 310 Q362 348 418 355 Q372 318 365 290 Q390 328 446 335 Q400 298 393 270 Q418 308 474 315 Q428 278 421 250 Q445 288 500 295 Q454 258 447 230 Q472 268 526 275 Q480 238 473 210 Q498 248 551 255 Q505 218 498 190 Q523 228 576 235 Q530 198 523 170 Q548 208 600 215 Q554 178 547 150 Q568 183 615 190 Q575 158 570 135 Q600 175 660 185 Q640 158 648 138 Q700 185 770 200 Q762 175 778 155 Q830 200 890 218 L900 220 L900 560Z' fill='%23cee0cb' opacity='0.5'/%3E%3Cellipse cx='450' cy='545' rx='180' ry='50' fill='%23f0ebe2' opacity='0.8'/%3E%3Cellipse cx='450' cy='520' rx='100' ry='30' fill='%23ebe4d8' opacity='0.4'/%3E%3Cellipse cx='180' cy='530' rx='60' ry='20' fill='%23e8e2d5' opacity='0.35'/%3E%3Cellipse cx='720' cy='535' rx='70' ry='22' fill='%23e5dfd2' opacity='0.3'/%3E%3Cellipse cx='450' cy='510' rx='40' ry='15' fill='%23e0d8c8' opacity='0.25'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f8f3ef 0%, #f5efe7 100%);
  background-size: cover, cover, cover;
  background-position: center, center bottom, center;
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(620px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.hero-copy .eyebrow {
  margin-bottom: 0;
  color: rgba(180, 200, 170, 0.8);
  text-shadow: 0 0 20px rgba(142, 185, 150, 0.3);
}

.hero-copy h1 {
  margin-bottom: 0;
  font-size: clamp(36px, 6vw, 60px);
  /* 文字带微光，契合月光感 */
  text-shadow: 0 0 40px rgba(200, 180, 120, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-copy .hero-text {
  max-width: 520px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 18px;
  font-size: clamp(42px, 7vw, 76px);
  line-height: 1.02;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: 28px;
  letter-spacing: 0;
}

.hero-text {
  max-width: 560px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
}

.primary-link,
button {
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: white;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

.primary-link {
  display: inline-flex;
  padding: 13px 18px;
  margin-top: 6px;
}

button {
  min-height: 42px;
  padding: 0 16px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

button:hover,
.primary-link:hover {
  background: var(--green-dark);
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 28px;
  padding: 42px 0 56px;
  align-items: start;
}

.panel,
.admin-login,
.admin-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: var(--shadow);
}

.compose-panel {
  position: sticky;
  top: 86px;
  padding: 24px;
}

.section-heading {
  margin-bottom: 20px;
}

.inline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.list-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.post-form {
  display: grid;
  gap: 18px;
}

label,
fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
}

label span,
legend {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  outline: none;
}

input {
  height: 44px;
  padding: 0 13px;
}

textarea {
  resize: vertical;
  min-height: 180px;
  padding: 13px;
  line-height: 1.7;
}

input:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(78, 115, 91, 0.14);
}

.agreement-check {
  display: flex;
  grid-template-columns: none;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.agreement-check input {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--green);
}

.agreement-check span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.text-button {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--green-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-button:hover {
  background: transparent;
  color: var(--green);
}

.mood-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mood-option input {
  position: absolute;
  opacity: 0;
}

.mood-option span {
  --mood-main: var(--green);
  --mood-soft: #e8f0e7;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--mood-main) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--mood-soft) 72%, var(--paper));
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.mood-option b {
  font-size: 18px;
  line-height: 1;
}

.mood-option:hover span {
  transform: translateY(-1px);
}

.mood-option input:checked + span {
  border-color: var(--mood-main);
  background: linear-gradient(135deg, color-mix(in srgb, var(--mood-main) 25%, var(--paper)), var(--mood-soft));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--mood-main) 22%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--mood-main) 42%, transparent);
  color: var(--ink);
}

.happy span,
.mood-badge.happy {
  --mood-main: #e2a13b;
  --mood-soft: #fff0c9;
}

.sad span,
.mood-badge.sad {
  --mood-main: #668fbd;
  --mood-soft: #ddeaf8;
}

.lost span,
.mood-badge.lost {
  --mood-main: #8a83b7;
  --mood-soft: #e8e4f7;
}

.heal span,
.mood-badge.heal {
  --mood-main: #5f9a72;
  --mood-soft: #dff1e4;
}

.angry span,
.mood-badge.angry {
  --mood-main: #d76f5f;
  --mood-soft: #ffe2dc;
}

.soft span,
.mood-badge.soft {
  --mood-main: #d487a8;
  --mood-soft: #fae1ec;
}

.calm span,
.mood-badge.calm {
  --mood-main: #6d96a0;
  --mood-soft: #dceff1;
}

.anxious span,
.mood-badge.anxious {
  --mood-main: #c47f30;
  --mood-soft: #fff3dc;
}

.vague span,
.mood-badge.vague {
  --mood-main: #8a8a8a;
  --mood-soft: #efefef;
}

/* ── Random Reveal Toast ── */
.random-toast {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 16, 0.52);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.3s ease-out;
}

.random-toast.show {
  display: flex;
}

.random-toast-inner {
  width: min(480px, calc(100vw - 40px));
  background: var(--paper);
  border-radius: 12px;
  padding: 28px 26px 22px;
  box-shadow: 0 24px 64px rgba(67, 48, 32, 0.28);
  text-align: center;
  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.privacy-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
  margin: 0 0 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.random-toast-inner h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
}

.random-toast-inner p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.random-toast-inner .read-more {
  display: inline-flex;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--green);
  color: white;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.random-toast-inner .read-more:hover {
  background: var(--green-dark);
}

.random-toast-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.random-toast-close:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ── Site Footer ── */
.site-footer {
  text-align: center;
  padding: 24px;
  border-top: 1px solid var(--line);
}

.site-footer a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--green-dark);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.form-footer span,
.message {
  color: var(--muted);
  font-size: 14px;
}

.message {
  min-height: 21px;
  margin: 0;
}

.message.success {
  color: var(--green-dark);
}

.message.error {
  color: #a74343;
}

.ghost-button,
.filter,
.export-button {
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  text-decoration: none;
}

.export-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 800;
}

.ghost-button:hover,
.filter:hover,
.filter.active,
.export-button:hover {
  border-color: var(--green);
  background: #e8f0e7;
  color: var(--green-dark);
}

.post-list {
  display: grid;
  gap: 16px;
}

.weather-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  margin: -4px 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 88%, var(--field));
  padding: 16px;
  box-shadow: 0 12px 28px rgba(67, 48, 32, 0.08);
}

.weather-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 18%, var(--field));
  font-size: 25px;
}

.weather-card strong {
  display: block;
  margin-bottom: 4px;
}

.weather-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.mood-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}

.post-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 20px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.post-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  box-shadow: var(--shadow);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.mood-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mood-soft, #edf2ea) 82%, var(--paper));
  color: color-mix(in srgb, var(--mood-main, var(--green-dark)) 78%, var(--ink));
  font-size: 13px;
  font-weight: 800;
}

.post-card h3 {
  margin: 14px 0 10px;
  font-size: 20px;
}

.post-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.8;
  white-space: pre-wrap;
}

.read-more {
  display: inline-flex;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.post-actions,
.detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.light-button {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--gold) 44%, var(--line));
  background: color-mix(in srgb, var(--gold) 16%, var(--field));
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.light-button:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 28%, var(--field));
  color: var(--ink);
}

.detail-light {
  min-height: 44px;
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

/* ── Random Reveal Card ── */
.random-reveal-card {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1.5px solid color-mix(in srgb, var(--green) 55%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--green) 10%, var(--paper));
  padding: 18px 20px;
  margin-bottom: 16px;
  animation: slideDownFade 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}


@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


.random-reveal-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}


.random-reveal-body {
  flex: 1;
  min-width: 0;
}


.random-reveal-title {
  margin: 6px 0 4px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.random-reveal-excerpt {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.random-reveal-link {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--green-dark);
  text-decoration: none;
  white-space: nowrap;
}

.random-reveal-link:hover {
  color: var(--ink);
}

.random-reveal-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

.random-reveal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.random-reclaim-btn {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.random-reclaim-btn:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

.toast-layer {
  position: fixed;
  right: clamp(16px, 4vw, 34px);
  bottom: clamp(16px, 4vw, 34px);
  z-index: 30;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.agreement-modal {
  width: min(760px, calc(100% - 32px));
  max-height: min(760px, calc(100vh - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 0;
}

.agreement-modal::backdrop {
  background: rgba(20, 18, 16, 0.48);
  backdrop-filter: blur(4px);
}

.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}

.modal-head {
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  font-size: 24px;
}

.icon-button {
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-size: 24px;
}

.agreement-content {
  max-height: min(520px, calc(100vh - 220px));
  overflow: auto;
  padding: 22px;
  color: var(--muted);
  line-height: 1.8;
}

.agreement-content h3 {
  margin: 22px 0 8px;
  color: var(--ink);
  font-size: 17px;
}

.agreement-content p {
  margin-bottom: 12px;
}

.agreement-content blockquote {
  margin: 20px 0 0;
  border-left: 4px solid var(--green);
  background: color-mix(in srgb, var(--field) 74%, var(--paper));
  padding: 14px 16px;
  color: var(--ink);
}

.modal-actions {
  border-top: 1px solid var(--line);
}

.toast {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: var(--shadow);
  padding: 16px;
  animation: toastIn 0.22s ease-out;
  backdrop-filter: blur(18px);
}

.toast-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #e8f0e7;
  font-size: 21px;
}

.toast strong {
  display: block;
  margin-bottom: 4px;
}

.toast p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.toast.success .toast-icon {
  background: #e4f2df;
}

.toast.warning .toast-icon {
  background: #fff0c9;
}

.toast.error .toast-icon {
  background: #ffe2dc;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-main {
  width: min(860px, calc(100% - 32px));
  padding: 38px 0 72px;
}

.back-link {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--green-dark);
  font-weight: 800;
  text-decoration: none;
}

.detail-article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 48px);
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  color: var(--muted);
}

.detail-article h1 {
  margin: 24px 0;
  font-size: clamp(34px, 6vw, 56px);
}

.detail-content {
  color: var(--ink);
  font-size: 18px;
  line-height: 2;
  white-space: pre-wrap;
}

.admin-section {
  padding: 16px 0 72px;
}

.admin-main {
  padding-bottom: 72px;
}

.admin-hero {
  padding: 54px 0 24px;
  border-bottom: 1px solid var(--line);
}

.admin-hero h1 {
  margin-bottom: 14px;
  font-size: clamp(36px, 5vw, 58px);
}

.admin-layout {
  display: grid;
  gap: 18px;
}

.admin-login {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: end;
  padding: 18px;
}

.admin-login .message {
  grid-column: 1 / -1;
}

.admin-panel {
  padding: 18px;
}

.admin-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-group,
.bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-table-wrap {
  overflow-x: auto;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
}

.stat-card.loading .stat-value {
  opacity: 0.3;
}

.stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 13px;
  color: var(--muted);
}

.stats-actions {
  display: flex;
  gap: 8px;
}

.stats-iframe-wrap {
  border-top: 1px solid var(--line);
}

.stats-iframe-wrap iframe {
  width: 100%;
  height: 600px;
  border: none;
  display: block;
}

/* 管理后台：统计面板 */
.stats-panel {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}

.stats-panel iframe {
  width: 100%;
  height: 600px;
  border: none;
  display: block;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--hero-wash);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.stats-header button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
}


.admin-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--muted);
  font-size: 13px;
}

.admin-title {
  font-weight: 800;
}

.admin-content {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.6;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.danger {
  background: var(--rose);
}

.danger:hover {
  background: #994f56;
}

@media (max-width: 880px) {
  .section-grid {
    display: block;
  }

  .compose-panel {
    position: static;
    width: 100%;
    box-sizing: border-box;
  }

  .content-column {
    width: 100%;
    box-sizing: border-box;
  }

  .admin-login {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero {
    min-height: 460px;
    padding-top: 44px;
    align-items: flex-start;
  }

  h1 {
    font-size: 36px;
  }

  .hero-copy {
    align-items: flex-start;
    text-align: left;
  }

  .mood-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .mood-option span {
    font-size: 13px;
    min-height: 36px;
    padding: 0 8px;
  }

  .post-card {
    padding: 16px;
  }

  .post-card h3 {
    font-size: 18px;
  }

  .form-footer,
  .inline-heading,
  .post-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .light-button {
    width: 100%;
    justify-content: center;
  }

  .list-actions {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .list-actions button {
    flex-shrink: 0;
  }

  .random-reveal-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .random-reveal-actions {
    flex-direction: row;
    width: 100%;
  }

  .random-reveal-link {
    flex: 1;
    text-align: center;
  }
}


/* ── Random Modal ── */
.random-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
}

.random-modal.show {
  display: flex;
}

.random-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, 0.58);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.25s ease-out;
}

.random-modal-card {
  position: relative;
  width: min(460px, calc(100vw - 40px));
  background: var(--paper);
  border-radius: 14px;
  padding: 32px 28px 28px;
  box-shadow: 0 24px 72px rgba(67, 48, 32, 0.32);
  text-align: center;
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.random-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.random-modal-close:hover {
  background: var(--ink);
  color: var(--paper);
}

.random-modal-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.random-modal-label {
  margin: 0 0 18px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.random-modal-body .mood-badge {
  display: inline-flex;
  margin-bottom: 12px;
}

.random-modal-body h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
}

.random-modal-body p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.random-modal-body .mood-badge + h3 {
  margin-top: 4px;
}

.random-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.random-modal-link {
  display: inline-flex;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--green);
  color: white;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.random-modal-link:hover {
  background: var(--green-dark);
}

.random-reclaim-btn {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.random-reclaim-btn:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

/* ── Captcha ── */
.captcha-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.captcha-img {
  width: 120px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: pointer;
  flex-shrink: 0;
  background: var(--field);
}

.captcha-label {
  flex: 1;
}

.captcha-label input {
  height: 44px;
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
}