:root {
  --primary:#c8c8d0;
  --secondary:#6e6e78;
  --accent:#d4af7a;
  --dark:#0f0f12;
  --darker:#0a0a0d;
  --glass-bg:rgba(180,180,188,0.04);
  --glass-border:rgba(200,200,210,0.12);
  --text-primary:rgba(235,235,240,0.95);
  --text-secondary:rgba(200,200,210,0.7);
  --text-muted:rgba(160,160,170,0.5);
  --accent-soft:rgba(212,175,122,0.18);
  --pink:#a89f91;
  --pink-soft:rgba(168,159,145,0.18);
  --online-green:#9ca89a;
  --online-glow:rgba(156,168,154,0.4);
  --gray-1:#1a1a1e;
  --gray-2:#22222a;
  --gray-3:#2c2c36;
  --gray-4:#3a3a44;
  --gray-5:#4a4a55;
  --gray-6:#6a6a75;
  --gray-7:#8a8a95;
  --gray-8:#b8b8c0;
  --gold:#c9a876;
  --gold-soft:rgba(201,168,118,0.15)
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
html {
  font-size:16px;
  -webkit-text-size-adjust:100%
}
body {
  min-height:100vh;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  background:var(--darker);
  color:var(--text-primary);
  overflow-x:hidden;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  font-weight:300;
  letter-spacing:0.3px
}
::selection {
  background:rgba(201,168,118,0.3);
  color:#fff
}
::-webkit-scrollbar {
  width:6px;
  height:6px
}
::-webkit-scrollbar-track {
  background:var(--darker)
}
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,var(--gray-5),var(--gray-4));
  border-radius:3px
}
::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,var(--gray-6),var(--gray-5))
}

.bg-layer {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
  filter:grayscale(0.6) brightness(0.45) contrast(1.05);
  opacity:0;
  transform:scale(1.05);
  transition:opacity 1.2s cubic-bezier(0.4,0,0.2,1),transform 1.5s cubic-bezier(0.4,0,0.2,1);
  will-change:opacity,transform
}
.bg-layer.active {
  opacity:1;
  transform:scale(1)
}
.bg-overlay {
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse at 30% 20%,rgba(201,168,118,0.05) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(150,150,160,0.04) 0%,transparent 50%),radial-gradient(ellipse at center,transparent 30%,rgba(10,10,14,0.85) 100%);
  z-index:-2;
  pointer-events:none
}
.particles {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden
}
.particle {
  position:absolute;
  width:2px;
  height:2px;
  background:rgba(200,200,210,0.3);
  border-radius:50%;
  animation:floatUp linear infinite
}
.particle::before {
  content:'';
  position:absolute;
  inset:-5px;
  background:radial-gradient(circle,rgba(201,168,118,0.2) 0%,transparent 70%);
  border-radius:50%;
  animation:pulse 2s ease-in-out infinite
}
.particle:nth-child(1){left:10%;animation-duration:12s;animation-delay:0s}
.particle:nth-child(2){left:20%;animation-duration:15s;animation-delay:2s;width:3px;height:3px;background:rgba(201,168,118,0.4)}
.particle:nth-child(3){left:35%;animation-duration:10s;animation-delay:4s}
.particle:nth-child(4){left:50%;animation-duration:14s;animation-delay:1s;width:4px;height:4px;background:rgba(220,220,230,0.5)}
.particle:nth-child(5){left:65%;animation-duration:11s;animation-delay:3s}
.particle:nth-child(6){left:80%;animation-duration:13s;animation-delay:5s;width:2px;height:2px;background:rgba(201,168,118,0.3)}
.particle:nth-child(7){left:90%;animation-duration:16s;animation-delay:2s}
.particle:nth-child(8){left:15%;animation-duration:9s;animation-delay:6s;background:rgba(200,200,210,0.25)}
@keyframes floatUp {
  0%{transform:translateY(100vh);opacity:0}
  10%{opacity:0.5}
  90%{opacity:0.5}
  100%{transform:translateY(-100px);opacity:0}
}
.cursor-glow {
  position:fixed;
  width:500px;
  height:500px;
  background:radial-gradient(circle,rgba(220,220,230,0.06) 0%,rgba(201,168,118,0.03) 25%,rgba(150,150,160,0.02) 45%,transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  will-change:left,top;
  filter:blur(60px);
  opacity:0.6;
  mix-blend-mode:screen;
  transition:opacity 0.3s
}

.main-layout {
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:80px 20px 40px;
  position:relative;
  z-index:1
}
.content-wrapper {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
  position:relative;
  width:100%;
  max-width:1280px
}

/* ==== ZONE 通用 ==== */
.zone {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px
}
.zone-hero { max-width:560px }
.zone-label {
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:600px;
  font-size:10px;
  letter-spacing:5px;
  color:var(--text-muted);
  font-weight:300;
  text-transform:uppercase;
  font-family:'SF Mono',monospace
}
.zone-label-line {
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,200,210,0.18),transparent)
}
.zone-label-text {
  white-space:nowrap;
  padding:0 4px
}
.zone-grid {
  display:grid;
  gap:20px;
  width:100%
}
.grid-creative {
  grid-template-columns:1.5fr 1fr;
  align-items:stretch
}
.grid-3 {
  grid-template-columns:repeat(3,1fr);
  align-items:stretch
}
.grid-live {
  grid-template-columns:0.9fr 1.1fr;
  align-items:stretch
}
.grid-community {
  grid-template-columns:1fr;
  max-width:680px
}

.floating-orb {
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(70px);
  animation:floatX 10s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
  will-change:transform
}
.floating-orb.orb1{top:-60px;left:-40px;background:radial-gradient(circle,rgba(220,220,230,0.1) 0%,rgba(220,220,230,0.03) 40%,transparent 70%);animation-delay:0s}
.floating-orb.orb2{bottom:-40px;right:-30px;width:180px;height:180px;background:radial-gradient(circle,rgba(201,168,118,0.08) 0%,rgba(201,168,118,0.02) 40%,transparent 70%);animation-delay:2.5s}
.floating-orb.orb3{top:35%;right:-70px;width:130px;height:130px;background:radial-gradient(circle,rgba(180,180,190,0.08) 0%,transparent 70%);animation-delay:5s}
.floating-orb.orb4{bottom:25%;left:-50px;width:150px;height:150px;background:radial-gradient(circle,rgba(201,168,118,0.06) 0%,rgba(200,200,210,0.02) 50%,transparent 70%);animation-delay:3.5s}

.card {
  width:100%;
  padding:48px 32px;
  background:linear-gradient(145deg,rgba(45,45,55,0.55) 0%,rgba(28,28,35,0.7) 35%,rgba(20,20,26,0.85) 65%,rgba(35,35,42,0.6) 100%);
  border-radius:24px;
  border:1px solid rgba(200,200,210,0.1);
  text-align:center;
  position:relative;
  backdrop-filter:blur(28px) saturate(1.3);
  -webkit-backdrop-filter:blur(28px) saturate(1.3);
  transition:transform 0.25s cubic-bezier(0.23,1,0.32,1),box-shadow 0.35s ease-out,border-color 0.3s ease-out,background 0.3s ease-out;
  box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.02),0 0 30px rgba(201,168,118,0.04),inset 0 1px 0 rgba(255,255,255,0.06),inset 0 -1px 0 rgba(200,200,210,0.03);
  overflow:hidden
}
.card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,118,0.5) 50%,transparent);
  opacity:0.7
}
.card::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,transparent 50%);
  pointer-events:none
}
.card:hover {
  transform:translateY(-6px);
  box-shadow:0 40px 100px rgba(0,0,0,0.7),0 0 0 1px rgba(201,168,118,0.1),0 0 60px rgba(201,168,118,0.08);
  border-color:rgba(201,168,118,0.25)
}
.card {
  animation:cardEnter 0.8s cubic-bezier(0.34,1.56,0.64,1)
}
@keyframes cardEnter {
  0%{opacity:0;transform:translateY(40px) scale(0.92);filter:blur(4px)}
  60%{transform:translateY(-5px) scale(1.015);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.tilt-card {
  transform-style:preserve-3d
}

.title {
  font-family:"Liu Jian Mao Cao",cursive;
  font-size:clamp(40px,8vw,52px);
  background:linear-gradient(135deg,#e8e8ec 0%,#c8c8d0 25%,#d4af7a 50%,#c8c8d0 75%,#e8e8ec 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:8px;
  letter-spacing:4px;
  cursor:pointer;
  user-select:none;
  filter:drop-shadow(0 0 20px rgba(201,168,118,0.3)) drop-shadow(0 0 40px rgba(220,220,230,0.15));
  transition:all 0.3s ease;
  display:inline-flex;
  align-items:center;
  position:relative;
  animation:titleGlow 3s ease-in-out infinite,gradientShift 8s linear infinite
}
@keyframes titleGlow {
  0%,100%{filter:drop-shadow(0 0 20px rgba(201,168,118,0.3)) drop-shadow(0 0 40px rgba(220,220,230,0.15))}
  50%{filter:drop-shadow(0 0 30px rgba(201,168,118,0.5)) drop-shadow(0 0 60px rgba(220,220,230,0.25))}
}
@keyframes gradientShift {
  0%{background-position:0% center}
  100%{background-position:200% center}
}
.title::before {
  content:'';
  position:absolute;
  inset:-10px;
  background:radial-gradient(ellipse at center,rgba(201,168,118,0.15) 0%,transparent 70%);
  filter:blur(20px);
  z-index:-1;
  opacity:0.5;
  animation:titlePulse 2s ease-in-out infinite
}
@keyframes titlePulse {
  0%,100%{transform:scale(1);opacity:0.5}
  50%{transform:scale(1.2);opacity:0.8}
}
.subtitle {
  font-size:13px;
  color:var(--text-secondary);
  margin-bottom:32px;
  letter-spacing:3px;
  animation:subtitleFade 1s ease-out 0.3s both;
  font-weight:300;
  position:relative;
  display:inline-block;
  min-height:20px
}
.subtitle::before,.subtitle::after {
  content:'';
  position:absolute;
  top:50%;
  width:30px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,118,0.3),transparent)
}
.subtitle::before{right:calc(100% + 15px)}
.subtitle::after{left:calc(100% + 15px)}

.online-status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin-left:8px;
  margin-bottom:-2px;
  vertical-align:middle;
  cursor:pointer;
  transition:all 0.3s ease;
  position:relative
}
.online-dot {
  width:8px;
  height:8px;
  background:var(--online-green);
  border-radius:50%;
  box-shadow:0 0 8px var(--online-glow),0 0 16px var(--online-glow),inset 0 0 3px rgba(255,255,255,0.5);
  animation:onlinePulse 2s ease-in-out infinite;
  transition:all 0.3s ease
}
.online-status.offline .online-dot {
  background:rgba(200,200,210,0.3);
  box-shadow:none;
  animation:none
}
@keyframes onlinePulse {
  0%,100%{box-shadow:0 0 6px var(--online-glow),0 0 12px var(--online-glow)}
  50%{box-shadow:0 0 8px var(--online-green),0 0 16px var(--online-glow)}
}

.quote-card {
  background:linear-gradient(135deg,rgba(60,60,70,0.5) 0%,rgba(30,30,38,0.6) 40%,rgba(50,50,60,0.4) 100%);
  border-radius:18px;
  padding:28px 24px;
  margin-bottom:20px;
  border:1px solid rgba(200,200,210,0.08);
  cursor:pointer;
  min-height:90px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:all 0.5s cubic-bezier(0.23,1,0.32,1);
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03)
}
.quote-card:hover {
  background:linear-gradient(135deg,rgba(70,70,80,0.6) 0%,rgba(35,35,42,0.7) 40%,rgba(60,60,70,0.5) 100%);
  transform:translateY(-3px);
  border-color:rgba(201,168,118,0.2);
  box-shadow:0 15px 50px rgba(0,0,0,0.4),0 0 30px rgba(201,168,118,0.08)
}
.quote-text {
  font-size:14px;
  color:rgba(235,235,240,0.9);
  line-height:1.9;
  font-style:italic;
  position:relative;
  z-index:1
}
.quote-text::before {
  content:'"';
  position:absolute;
  top:-10px;
  left:-5px;
  font-size:40px;
  color:rgba(201,168,118,0.2);
  font-family:serif;
  line-height:1
}
.quote-text::after {
  content:'"';
  position:absolute;
  bottom:-20px;
  right:-5px;
  font-size:40px;
  color:rgba(201,168,118,0.15);
  font-family:serif;
  line-height:1
}
.quote-from {
  font-size:11px;
  color:var(--text-secondary);
  margin-top:10px;
  text-align:right
}
.like-btn,.copy-btn {
  position:absolute;
  bottom:10px;
  width:30px;
  height:30px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(200,200,210,0.08);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  z-index:2;
  backdrop-filter:blur(8px)
}
.like-btn{left:12px}
.copy-btn{left:48px}
.like-btn:hover {
  background:var(--pink-soft);
  border-color:rgba(201,168,118,0.4);
  transform:scale(1.15);
  box-shadow:0 0 15px rgba(201,168,118,0.3)
}
.copy-btn:hover {
  background:var(--accent-soft);
  border-color:rgba(201,168,118,0.4);
  transform:scale(1.1)
}
.like-btn svg,.copy-btn svg{width:14px;height:14px;fill:rgba(220,220,230,0.5);transition:fill 0.3s ease}
.like-btn:hover svg{fill:var(--gold)}
.copy-btn:hover svg{fill:var(--gold)}
.like-btn.liked{background:var(--accent-soft);border-color:rgba(201,168,118,0.5);animation:heartBeat 0.5s ease}
.like-btn.liked svg{fill:var(--gold)}
.copy-btn.copied{background:var(--accent-soft);border-color:rgba(201,168,118,0.5)}
.copy-btn.copied svg{fill:var(--gold)}
@keyframes heartBeat {
  0%,100%{transform:scale(1)}
  25%{transform:scale(1.3)}
  50%{transform:scale(1)}
  75%{transform:scale(1.2)}
}

.info-text {
  font-size:12px;
  color:var(--text-secondary);
  letter-spacing:1px;
  font-weight:300
}

.btn-group {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:20px
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  background:linear-gradient(135deg,rgba(200,200,210,0.06),rgba(150,150,160,0.04));
  border:1px solid rgba(200,200,210,0.15);
  border-radius:50px;
  color:var(--text-primary);
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.35s cubic-bezier(0.23,1,0.32,1);
  -webkit-tap-highlight-color:transparent;
  position:relative;
  overflow:hidden;
  letter-spacing:0.3px
}
.btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(201,168,118,0.15),rgba(201,168,118,0.08));
  opacity:0;
  transition:opacity 0.3s
}
.btn:hover::before{opacity:1}
.btn:hover {
  background:linear-gradient(135deg,rgba(201,168,118,0.15),rgba(201,168,118,0.08));
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,0.3),0 0 20px rgba(201,168,118,0.15);
  border-color:rgba(201,168,118,0.35)
}
.btn:active{transform:translateY(0) scale(0.97)}
.btn svg{width:16px;height:16px;transition:all 0.3s}
.btn:hover svg{transform:scale(1.2);filter:drop-shadow(0 0 4px rgba(201,168,118,0.5))}

.guestbook {
  width:100%;
  background:linear-gradient(145deg,rgba(45,45,55,0.55) 0%,rgba(28,28,35,0.7) 50%,rgba(35,35,42,0.6) 100%);
  border:1px solid rgba(200,200,210,0.1);
  border-radius:24px;
  overflow:hidden;
  backdrop-filter:blur(28px);
  display:flex;
  flex-direction:column;
  max-height:760px;
  box-shadow:0 30px 80px rgba(0,0,0,0.55);
  animation:fadeInRight 0.9s cubic-bezier(0.23,1,0.32,1) 0.25s both
}
.guestbook-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 14px;
  background:linear-gradient(135deg,rgba(200,200,210,0.05),rgba(201,168,118,0.03));
  border-bottom:1px solid rgba(200,200,210,0.08)
}
.guestbook-title {
  font-size:16px;
  letter-spacing:1px;
  color:var(--text-primary);
  font-weight:500
}
.cloud-status {
  font-size:10px;
  color:var(--text-muted);
  padding:3px 10px;
  border:1px solid rgba(200,200,210,0.15);
  border-radius:20px
}
.guestbook-form{padding:14px 16px;border-bottom:1px solid rgba(200,200,210,0.06)}
.form-row{margin-bottom:10px}
.form-input {
  width:100%;
  background:rgba(20,20,26,0.5);
  border:1px solid rgba(200,200,210,0.1);
  border-radius:10px;
  color:var(--text-primary);
  font-size:13px;
  padding:10px 12px;
  outline:none;
  resize:none;
  font-family:inherit;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  -webkit-user-select:text;
  user-select:text
}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus {
  border-color:rgba(201,168,118,0.4);
  background:rgba(30,30,38,0.6);
  box-shadow:0 0 15px rgba(201,168,118,0.1)
}
.form-textarea{min-height:60px;line-height:1.5}
.form-submit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:10px 16px;
  background:linear-gradient(135deg,rgba(201,168,118,0.2),rgba(201,168,118,0.1));
  border:1px solid rgba(201,168,118,0.3);
  border-radius:10px;
  color:#f0e8d8;
  font-size:13px;
  cursor:pointer;
  transition:all 0.3s
}
.form-submit:hover {
  background:linear-gradient(135deg,rgba(201,168,118,0.3),rgba(201,168,118,0.15));
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(201,168,118,0.2)
}
.guestbook-list {
  flex:1;
  overflow-y:auto;
  padding:8px 12px;
  display:flex;
  flex-direction:column;
  gap:8px
}
.empty-state {
  text-align:center;
  color:var(--text-muted);
  padding:30px 10px;
  font-size:13px
}
.message-item {
  background:linear-gradient(135deg,rgba(60,60,70,0.3),rgba(40,40,48,0.4));
  border:1px solid rgba(200,200,210,0.06);
  border-radius:12px;
  padding:10px 12px;
  animation:fadeInUp 0.4s ease-out both
}
.message-name {
  font-size:12px;
  color:rgba(201,168,118,0.9);
  margin-bottom:4px;
  font-weight:500
}
.message-content {
  font-size:13px;
  color:rgba(235,235,240,0.85);
  line-height:1.6;
  word-break:break-word;
  -webkit-user-select:text;
  user-select:text
}
.message-time {
  font-size:10px;
  color:var(--text-muted);
  margin-top:4px;
  text-align:right
}
.guestbook-footer {
  padding:12px 20px;
  border-top:1px solid rgba(200,200,210,0.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(15,15,20,0.4)
}
.message-count{font-size:11px;color:var(--text-muted)}
.guestbook-note{font-size:11px;color:var(--text-muted)}

/* ===== 艺术画布 ===== */
.art-stage {
  position:relative;
  padding:0;
  background:linear-gradient(145deg,rgba(45,45,55,0.55) 0%,rgba(20,20,26,0.75) 50%,rgba(35,35,42,0.6) 100%);
  border:1px solid rgba(200,200,210,0.1);
  border-radius:24px;
  overflow:hidden;
  backdrop-filter:blur(28px);
  box-shadow:0 30px 80px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.04);
  animation:fadeInUp 0.9s cubic-bezier(0.23,1,0.32,1) 0.4s both;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:560px
}
.art-stage::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,118,0.5) 50%,transparent);
  opacity:0.6;
  z-index:3
}
.art-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 22px;
  border-bottom:1px solid rgba(200,200,210,0.06);
  position:relative;
  z-index:2
}
.art-title {
  font-size:15px;
  letter-spacing:2px;
  color:var(--text-primary);
  font-weight:400;
  display:flex;
  align-items:center;
  gap:10px
}
.art-title-dot {
  width:6px;
  height:6px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 8px var(--gold);
  animation:titlePulse 2s ease-in-out infinite
}
.art-subtitle {
  font-size:10px;
  color:var(--text-muted);
  letter-spacing:1.5px;
  text-transform:uppercase
}
.art-canvas-wrap {
  position:relative;
  width:100%;
  flex:1;
  min-height:380px;
  overflow:hidden;
  background:radial-gradient(ellipse at center,rgba(30,30,40,0.6) 0%,rgba(10,10,14,0.95) 100%)
}
#artCanvas {
  display:block;
  width:100%;
  height:100%;
  cursor:crosshair
}
.art-overlay {
  position:absolute;
  bottom:14px;
  left:14px;
  font-size:10px;
  color:rgba(220,220,230,0.5);
  letter-spacing:1px;
  font-style:italic;
  pointer-events:none
}
.art-corner {
  position:absolute;
  width:18px;
  height:18px;
  border:1px solid rgba(201,168,118,0.3);
  pointer-events:none
}
.art-corner.tl{top:8px;left:8px;border-right:none;border-bottom:none}
.art-corner.tr{top:8px;right:8px;border-left:none;border-bottom:none}
.art-corner.bl{bottom:8px;left:8px;border-right:none;border-top:none}
.art-corner.br{bottom:8px;right:8px;border-left:none;border-top:none}
.art-controls {
  display:flex;
  gap:8px;
  padding:12px 18px;
  border-top:1px solid rgba(200,200,210,0.06);
  background:rgba(15,15,20,0.4)
}
.art-mode-btn {
  flex:1;
  padding:8px 10px;
  background:transparent;
  border:1px solid rgba(200,200,210,0.1);
  border-radius:8px;
  color:var(--text-secondary);
  font-size:11px;
  letter-spacing:0.5px;
  cursor:pointer;
  transition:all 0.3s;
  font-family:inherit
}
.art-mode-btn:hover {
  border-color:rgba(201,168,118,0.4);
  color:var(--text-primary);
  background:rgba(201,168,118,0.05)
}
.art-mode-btn.active {
  border-color:rgba(201,168,118,0.5);
  color:var(--gold);
  background:rgba(201,168,118,0.1)
}
.art-hint {
  flex:0 0 100%;
  font-size:10px;
  color:var(--text-muted);
  letter-spacing:0.5px;
  margin-top:6px;
  font-family:'SF Mono',monospace;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap
}
.art-hint kbd {
  display:inline-block;
  padding:1px 5px;
  background:rgba(200,200,210,0.06);
  border:1px solid rgba(200,200,210,0.12);
  border-radius:3px;
  font-family:inherit;
  font-size:9px;
  color:var(--text-secondary);
  margin:0 1px
}

/* ===== 时钟板块 ===== */
.clock-panel {
  position:relative;
  padding:24px 22px;
  background:linear-gradient(145deg,rgba(45,45,55,0.55) 0%,rgba(25,25,32,0.75) 100%);
  border:1px solid rgba(200,200,210,0.1);
  border-radius:20px;
  backdrop-filter:blur(28px);
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  overflow:hidden;
  animation:fadeInUp 0.9s cubic-bezier(0.23,1,0.32,1) 0.3s both
}
.clock-panel::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,118,0.5) 50%,transparent);
  opacity:0.6
}
.clock-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px
}
.clock-title {
  font-size:12px;
  color:var(--text-secondary);
  letter-spacing:2px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px
}
.clock-title-dot {
  width:5px;
  height:5px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 6px var(--gold);
  animation:titlePulse 2s ease-in-out infinite
}
.clock-zone {
  font-size:10px;
  color:var(--text-muted);
  padding:2px 8px;
  border:1px solid rgba(200,200,210,0.12);
  border-radius:10px
}
.clock-display {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  font-family:'SF Mono',Monaco,Consolas,monospace;
  margin-bottom:8px
}
.clock-h,.clock-m,.clock-s {
  font-size:46px;
  font-weight:200;
  color:var(--text-primary);
  letter-spacing:2px;
  text-shadow:0 0 30px rgba(220,220,230,0.15);
  line-height:1
}
.clock-s {
  font-size:22px;
  color:var(--gold);
  margin-left:4px
}
.clock-sep {
  font-size:36px;
  color:rgba(201,168,118,0.4);
  animation:sepBlink 1s infinite
}
@keyframes sepBlink {
  0%,50%{opacity:1}
  51%,100%{opacity:0.2}
}
.clock-date {
  text-align:center;
  font-size:12px;
  color:var(--text-secondary);
  letter-spacing:2px;
  margin-bottom:18px
}
.clock-lunar {
  text-align:center;
  font-size:11px;
  color:var(--text-muted);
  letter-spacing:1.5px;
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(200,200,210,0.06)
}
.clock-cities {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px
}
.clock-city {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  background:rgba(20,20,26,0.4);
  border:1px solid rgba(200,200,210,0.05);
  border-radius:10px;
  font-size:11px;
  transition:all 0.3s
}
.clock-city:hover {
  border-color:rgba(201,168,118,0.2);
  background:rgba(30,30,38,0.5)
}
.clock-city-name{color:var(--text-secondary);letter-spacing:1px}
.clock-city-time {
  font-family:'SF Mono',Monaco,Consolas,monospace;
  color:var(--text-primary);
  font-weight:300
}

/* ===== 新闻趋势 ===== */
.news-panel {
  position:relative;
  padding:22px 22px 16px;
  background:linear-gradient(145deg,rgba(45,45,55,0.55) 0%,rgba(25,25,32,0.75) 100%);
  border:1px solid rgba(200,200,210,0.1);
  border-radius:20px;
  backdrop-filter:blur(28px);
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  overflow:hidden;
  animation:fadeInUp 0.9s cubic-bezier(0.23,1,0.32,1) 0.45s both
}
.news-panel::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,118,0.5) 50%,transparent);
  opacity:0.6
}
.news-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}
.news-title {
  font-size:12px;
  color:var(--text-secondary);
  letter-spacing:2px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px
}
.news-title-dot {
  width:5px;
  height:5px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 6px var(--gold);
  animation:titlePulse 2s ease-in-out infinite
}
.news-tabs {
  display:flex;
  gap:6px
}
.news-tab {
  font-size:10px;
  padding:3px 9px;
  border:1px solid rgba(200,200,210,0.12);
  border-radius:10px;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  transition:all 0.3s;
  font-family:inherit
}
.news-tab.active {
  border-color:rgba(201,168,118,0.4);
  color:var(--gold);
  background:rgba(201,168,118,0.08)
}
.news-tab:hover{color:var(--text-secondary)}
.news-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:260px;
  overflow-y:auto
}
.news-item {
  display:flex;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(200,200,210,0.05);
  cursor:pointer;
  transition:all 0.3s;
  text-decoration:none;
  color:inherit
}
.news-item:last-child{border-bottom:none}
.news-item:hover {
  padding-left:6px;
  background:linear-gradient(90deg,rgba(201,168,118,0.05),transparent)
}
.news-rank {
  font-family:'SF Mono',Monaco,Consolas,monospace;
  font-size:18px;
  font-weight:200;
  color:var(--gray-7);
  width:28px;
  flex-shrink:0;
  text-align:center
}
.news-rank.hot{color:var(--gold);text-shadow:0 0 10px rgba(201,168,118,0.4)}
.news-body{flex:1;min-width:0}
.news-headline {
  font-size:13px;
  color:var(--text-primary);
  line-height:1.5;
  margin-bottom:4px;
  font-weight:400;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.news-meta {
  font-size:10px;
  color:var(--text-muted);
  letter-spacing:0.5px;
  display:flex;
  gap:10px
}
.news-meta-tag {
  color:var(--gold);
  padding:1px 5px;
  border:1px solid rgba(201,168,118,0.25);
  border-radius:4px;
  font-size:9px
}
.news-loading,.news-empty {
  text-align:center;
  padding:30px 10px;
  color:var(--text-muted);
  font-size:12px;
  font-style:italic
}

/* ===== 在线聊天室 ===== */
.chat-panel {
  position:relative;
  background:linear-gradient(145deg,rgba(45,45,55,0.6) 0%,rgba(25,25,32,0.8) 100%);
  border:1px solid rgba(200,200,210,0.1);
  border-radius:20px;
  backdrop-filter:blur(28px);
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:420px;
  animation:fadeInUp 0.9s cubic-bezier(0.23,1,0.32,1) 0.55s both
}
.chat-panel::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,118,0.5) 50%,transparent);
  opacity:0.6
}
.chat-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid rgba(200,200,210,0.08);
  background:linear-gradient(135deg,rgba(200,200,210,0.04),rgba(201,168,118,0.02))
}
.chat-head-right {
  display:flex;
  align-items:center;
  gap:10px
}
.chat-title {
  font-size:13px;
  color:var(--text-primary);
  letter-spacing:2px;
  display:flex;
  align-items:center;
  gap:10px
}
.chat-title-dot {
  width:7px;
  height:7px;
  background:var(--online-green);
  border-radius:50%;
  box-shadow:0 0 8px var(--online-glow);
  animation:onlinePulse 2s ease-in-out infinite
}
.chat-online {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  font-family: 'SF Mono', monospace;
}
.chat-cloud {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
  cursor: help;
  transition: all 0.3s;
  display: inline-block;
  filter: grayscale(1);
  opacity: 0.5;
}
.chat-cloud.cloud-on {
  color: #6ec78a;
  filter: none;
  opacity: 1;
  animation: cloudPulse 2s ease-in-out infinite;
}
.chat-cloud.cloud-off {
  color: var(--text-muted);
  filter: grayscale(1);
  opacity: 0.6;
}
@keyframes cloudPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
.chat-online b{color:var(--gold);font-weight:500}
.chat-msgs {
  flex:1;
  overflow-y:auto;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:280px
}
.chat-msg {
  display:flex;
  gap:10px;
  animation:chatIn 0.35s cubic-bezier(0.34,1.56,0.64,1)
}
@keyframes chatIn {
  from{opacity:0;transform:translateY(8px) scale(0.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.chat-avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:500;
  color:#fff;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.3)
}
.chat-bubble {
  flex:1;
  min-width:0
}
.chat-name {
  font-size:11px;
  color:var(--text-secondary);
  margin-bottom:3px;
  letter-spacing:0.5px;
  display:flex;
  align-items:center;
  gap:6px
}
.chat-time {
  font-size:9px;
  color:var(--text-muted)
}
.chat-text {
  font-size:13px;
  color:rgba(235,235,240,0.9);
  line-height:1.6;
  word-break:break-word;
  background:rgba(20,20,26,0.4);
  border:1px solid rgba(200,200,210,0.06);
  border-radius:4px 12px 12px 12px;
  padding:8px 12px;
  display:inline-block;
  max-width:100%;
  -webkit-user-select:text;
  user-select:text
}
.chat-msg.self {
  flex-direction:row-reverse
}
.chat-msg.self .chat-bubble{text-align:right}
.chat-msg.self .chat-name{justify-content:flex-end}
.chat-msg.self .chat-text {
  background:linear-gradient(135deg,rgba(201,168,118,0.18),rgba(201,168,118,0.1));
  border-color:rgba(201,168,118,0.25);
  border-radius:12px 4px 12px 12px
}
.chat-msg.system .chat-text {
  background:rgba(201,168,118,0.06);
  border-color:rgba(201,168,118,0.15);
  font-style:italic;
  color:var(--text-secondary);
  font-size:12px;
  text-align:center;
  width:100%;
  border-radius:8px
}
.chat-input-area {
  padding:12px 16px;
  border-top:1px solid rgba(200,200,210,0.08);
  background:rgba(15,15,20,0.5);
  display:flex;
  gap:8px;
  align-items:center
}
.chat-input {
  flex:1;
  background:rgba(20,20,26,0.5);
  border:1px solid rgba(200,200,210,0.1);
  border-radius:18px;
  color:var(--text-primary);
  font-size:13px;
  padding:9px 14px;
  outline:none;
  font-family:inherit;
  transition:all 0.3s;
  -webkit-user-select:text;
  user-select:text
}
.chat-input:focus {
  border-color:rgba(201,168,118,0.35);
  background:rgba(30,30,38,0.6)
}
.chat-input::placeholder{color:var(--text-muted)}
.chat-send {
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,rgba(201,168,118,0.7),rgba(201,168,118,0.5));
  color:#1a1a1e;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s;
  flex-shrink:0
}
.chat-send:hover{transform:scale(1.1);box-shadow:0 4px 15px rgba(201,168,118,0.4)}
.chat-send:active{transform:scale(0.95)}
.chat-send:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.chat-send svg{width:14px;height:14px;fill:currentColor}

@keyframes fadeInUp {
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInLeft {
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes fadeInRight {
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes pulse {
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
@keyframes floatX {
  0%,100%{transform:translateX(0) translateY(0) scale(1)}
  25%{transform:translateX(15px) translateY(-15px) scale(1.05)}
  75%{transform:translateX(-15px) translateY(15px) scale(0.95)}
}

.art-btn,.bg-switch {
  position:fixed;
  width:46px;
  height:46px;
  border:1px solid rgba(200,200,210,0.25);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  cursor:pointer;
  z-index:501;
  backdrop-filter:blur(14px);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
  transition:all 0.3s ease;
  text-decoration:none;
  color:inherit
}
.art-btn {
  bottom:180px;left:20px;
  background:linear-gradient(135deg,rgba(201,168,118,0.18),rgba(200,200,210,0.1))
}
.art-btn:hover{transform:scale(1.15);border-color:rgba(201,168,118,0.6);box-shadow:0 6px 24px rgba(201,168,118,0.3)}
.bg-switch {
  bottom:120px;left:20px;
  background:linear-gradient(135deg,rgba(200,200,210,0.15),rgba(150,150,160,0.1))
}
.bg-switch:hover{transform:scale(1.15);border-color:rgba(200,200,210,0.6)}

#aiChatBtn {
  position:fixed;bottom:80px;right:20px;
  width:52px;height:52px;
  background:linear-gradient(135deg,rgba(201,168,118,0.6),rgba(160,140,110,0.5));
  border:1px solid rgba(201,168,118,0.4);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;z-index:5000;
  box-shadow:0 4px 20px rgba(201,168,118,0.3);
  transition:all 0.3s ease;
  color:#1a1a1e
}
#aiChatBtn:hover{transform:scale(1.15);box-shadow:0 6px 30px rgba(201,168,118,0.5)}

.footer {
  margin-top:32px;
  text-align:center;
  padding:20px 0 12px;
  font-size:11px;
  color:var(--text-muted);
  letter-spacing:2px;
  position:relative;
  z-index:1
}
.footer::before {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,118,0.2),transparent)
}

@media (max-width:1280px) {
  .content-wrapper{gap:36px}
}
@media (max-width:1024px) {
  .grid-creative{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-live{grid-template-columns:1fr 1fr}
}
@media (max-width:900px) {
  .main-layout{padding:60px 12px 20px}
  .content-wrapper{gap:28px}
  .grid-creative{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-live{grid-template-columns:1fr}
  .grid-community{max-width:100%}
  .art-stage{min-height:auto;min-height:420px}
  .art-canvas-wrap{min-height:300px;aspect-ratio:4/3}
  .calc-panel{min-height:auto}
}
@media (max-width:480px) {
  .clock-h,.clock-m{font-size:36px}
  .clock-s{font-size:18px}
  .clock-sep{font-size:28px}
  .clock-cities{grid-template-columns:1fr}
  #aiChatBtn{bottom:60px;right:10px}
  .art-btn{bottom:130px;left:10px;width:38px;height:38px;font-size:16px}
  .bg-switch{bottom:80px;left:10px;width:38px;height:38px;font-size:16px}
  .zone-label{font-size:9px;letter-spacing:3px;gap:10px}
  .content-wrapper{gap:20px}
}

@media print {
  .card{animation:none!important;transform:none!important;box-shadow:none!important;background:#fff!important;border:1px solid #ccc!important}
  .title{animation:none!important;filter:none!important;background:none!important;-webkit-text-fill-color:#000!important;background-clip:unset!important}
  .title::before{display:none}
  .subtitle::before,.subtitle::after{display:none}
  .quote-card{animation:none!important}
  .btn{animation:none!important}
  .art-stage,.clock-panel,.news-panel,.chat-panel,.chat-msgs{display:none!important}
}

.grain-canvas {
  position:fixed;
  inset:0;
  z-index:9997;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0.03;
  mix-blend-mode:overlay;
  image-rendering:pixelated
}

#grain {
  position:fixed;
  inset:0;
  z-index:9997;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0.025;
  mix-blend-mode:overlay;
  image-rendering:pixelated
}