/* ============================================================
   电影感森林主题：参考用户视频的深绿、玻璃、衬线、场景字幕
   ============================================================ */
:root {
  --cine-bg: #04130f;
  --cine-bg-2: #071f19;
  --cine-panel: rgba(7, 31, 25, .68);
  --cine-panel-strong: rgba(5, 24, 19, .88);
  --cine-line: rgba(224, 237, 226, .14);
  --cine-line-strong: rgba(224, 237, 226, .24);
  --cine-cream: #f2ecdf;
  --cine-muted: #a7b8ad;
  --cine-soft: #c5d2c8;
  --cine-gold: #d7b878;
  --cine-gold-2: #eed7a2;
  --cine-teal: #7fc7aa;
  --cine-shadow: 0 24px 70px rgba(0, 0, 0, .36);
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
}

html { background: #04130f !important; }
body {
  background:
    radial-gradient(ellipse at 16% -4%, rgba(50, 130, 101, .32), transparent 42rem),
    radial-gradient(ellipse at 94% 18%, rgba(39, 104, 86, .24), transparent 36rem),
    radial-gradient(ellipse at 52% 106%, rgba(14, 66, 51, .28), transparent 42rem),
    linear-gradient(155deg, #04130f 0%, #07221b 48%, #041611 100%) !important;
  color: var(--cine-cream) !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(0, 10, 7, .34) 100%);
}
::selection { color: #071f19; background: var(--cine-gold-2); }

.scene-label {
  display: block;
  margin: 0 0 10px;
  color: rgba(238, 215, 162, .66);
  font-family: var(--font, sans-serif);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ---------- 主页：页头 / 横幅 / 卡片 ---------- */
.site-header {
  background: rgba(4, 19, 15, .74) !important;
  border-bottom: 1px solid var(--cine-line) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}
.brand-copy strong { color: var(--cine-cream) !important; }
.brand-copy small { color: var(--cine-gold) !important; letter-spacing: .18em !important; }
.since-badge {
  color: var(--cine-gold) !important;
  background: rgba(215, 184, 120, .08) !important;
  border-color: rgba(215, 184, 120, .26) !important;
}
.user-chip {
  color: var(--cine-cream) !important;
  background: rgba(255, 255, 255, .06) !important;
  border-color: var(--cine-line-strong) !important;
}
.user-chip-name { color: var(--cine-cream) !important; }
.user-chip .icon { color: var(--cine-muted) !important; }
.personal-site-bar {
  color: #d8c08a !important;
  background: rgba(7, 30, 24, .8) !important;
  border-bottom: 1px solid rgba(215, 184, 120, .2) !important;
}
.personal-site-bar strong { color: var(--cine-gold-2) !important; }

.hero {
  background:
    linear-gradient(90deg, rgba(2, 15, 12, .96) 0%, rgba(3, 21, 17, .78) 46%, rgba(3, 21, 17, .34) 100%),
    url("./campus-main.jpg") center / cover no-repeat !important;
  border-radius: 0 0 34px 34px !important;
}
.hero:not(#home) {
  padding: 18px 14px !important;
  background:
    radial-gradient(circle at 80% 0%, rgba(66, 142, 111, .18), transparent 18rem),
    linear-gradient(135deg, rgba(6, 35, 27, .78), rgba(3, 20, 15, .5)) !important;
  border: 1px solid var(--cine-line);
  border-radius: 22px;
  box-shadow: var(--cine-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
}
.hero:not(#home) h1 { text-shadow: none; }
.btn-primary {
  color: #071f19 !important;
  background: linear-gradient(135deg, #f2ecdf, #d7b878) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #fff8e8, #e5c98f) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .3) !important;
}
.btn-quiet {
  color: var(--cine-soft) !important;
  background: rgba(255, 255, 255, .05) !important;
  border-color: var(--cine-line) !important;
}
.hero::before { opacity: .3 !important; }
.hero-art, .hero-watermark { opacity: .12 !important; }
.hero h1 {
  color: var(--cine-cream) !important;
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-shadow: 0 10px 36px rgba(0, 0, 0, .28);
}
.hero h1 strong, .hero h1 em { color: var(--cine-gold-2) !important; }
.hero-kicker { color: var(--cine-gold) !important; letter-spacing: .22em !important; }
.hero-subtitle, .hero p, .hero-desc { color: var(--cine-soft) !important; }
.hero .btn-light {
  color: #071f19 !important;
  background: linear-gradient(135deg, #f2ecdf, #d7b878) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26) !important;
}
.hero .btn-ghost {
  color: var(--cine-cream) !important;
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(242, 236, 223, .34) !important;
}
.hero-visitor {
  color: var(--cine-muted) !important;
  background: rgba(4, 22, 17, .5) !important;
  border-color: var(--cine-line) !important;
}
.hero-visitor strong { color: var(--cine-gold-2) !important; }
.visitor-beacon { background: var(--cine-gold) !important; box-shadow: 0 0 0 4px rgba(215, 184, 120, .12) !important; }
.hero-fact strong { color: var(--cine-cream) !important; }
.hero-fact span { color: var(--cine-muted) !important; }

.site-shell { background: transparent !important; color: var(--cine-cream) !important; }
main, .section { background: transparent !important; }
.site-shell h2, .site-shell h3, .site-shell h4 { color: var(--cine-cream) !important; }
.site-shell p, .site-shell li, .site-shell small, .site-shell label { color: var(--cine-muted); }
.section-title {
  color: var(--cine-cream) !important;
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
.section-kicker, .game-entry-kicker, .about-intro-kicker, .creator-kicker {
  color: var(--cine-gold) !important;
  letter-spacing: .18em !important;
}
.section-title::after { background: var(--cine-gold) !important; }

.game-entry, .about-intro-card, .location-card, .creator-card, .wall-card {
  background: var(--cine-panel) !important;
  border: 1px solid var(--cine-line) !important;
  box-shadow: var(--cine-shadow) !important;
  color: var(--cine-cream) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
}
.game-entry:hover, .about-intro-card:hover, .location-card:hover, .creator-card:hover {
  border-color: var(--cine-line-strong) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42) !important;
}
.game-entry-copy strong, .game-entry-copy h3, .game-entry-copy h2 { color: var(--cine-cream) !important; }
.game-entry-copy span, .game-entry-copy small { color: var(--cine-muted) !important; }
.game-entry-visual { background: rgba(3, 20, 15, .55) !important; border-color: var(--cine-line) !important; }
.game-entry-action {
  color: var(--cine-gold) !important;
  background: rgba(215, 184, 120, .08) !important;
  border-color: rgba(215, 184, 120, .24) !important;
}
.about-intro-card { overflow: hidden; }
.about-intro-copy, .about-intro-lede, .about-intro-stats, .about-intro-note, .about-intro-kicker { color: var(--cine-muted) !important; }
.about-intro-lede { color: var(--cine-soft) !important; }
.about-intro-stats strong { color: var(--cine-cream) !important; }
.about-intro-stats span { color: var(--cine-muted) !important; }
.about-intro-photo img, .location-photo-img { filter: saturate(.78) brightness(.8); }
.about-longform-link, .location-nav {
  color: var(--cine-gold) !important;
  background: rgba(215, 184, 120, .08) !important;
  border-color: rgba(215, 184, 120, .22) !important;
}
.location-detail, .location-meta, .location-address, .location-coord, .location-detail p { color: var(--cine-muted) !important; }
.location-detail h3, .location-detail strong { color: var(--cine-cream) !important; }
.location-photo figcaption, .location-photo-credit { color: var(--cine-muted) !important; background: rgba(3, 20, 15, .72) !important; }
.map-frame { background: #061b15 !important; border-color: var(--cine-line) !important; }
.map-note { color: var(--cine-muted) !important; background: rgba(3, 20, 15, .75) !important; border-color: var(--cine-line) !important; }
.leaflet-container { background: #061b15 !important; }
.leaflet-control-zoom a { color: var(--cine-cream) !important; background: rgba(4, 24, 18, .9) !important; border-color: var(--cine-line) !important; }
.leaflet-control-scale-line { color: var(--cine-soft) !important; border-color: var(--cine-line-strong) !important; background: rgba(3, 20, 15, .5) !important; }
.map-nav-btn {
  color: var(--cine-gold) !important;
  background: rgba(255, 255, 255, .055) !important;
  border-color: var(--cine-line) !important;
  box-shadow: none !important;
}
.map-nav-btn.baidu {
  color: var(--cine-cream) !important;
  background: rgba(255, 255, 255, .04) !important;
}
.map-tip, .location-detail .map-tip { color: var(--cine-muted) !important; }
.developer-entry {
  background: var(--cine-panel) !important;
  border-color: var(--cine-line) !important;
  box-shadow: var(--cine-shadow) !important;
  color: var(--cine-cream) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.developer-entry-kicker { color: var(--cine-gold) !important; }
.developer-entry-copy strong { color: var(--cine-cream) !important; }
.developer-entry-copy > span:last-child { color: var(--cine-muted) !important; }
.developer-entry-cta {
  color: var(--cine-gold) !important;
  background: rgba(215, 184, 120, .08) !important;
  border-color: rgba(215, 184, 120, .24) !important;
}
.developer-entry-avatar { border-color: var(--cine-line-strong) !important; }

.creator-card { background: linear-gradient(145deg, rgba(8, 35, 27, .82), rgba(4, 22, 17, .74)) !important; }
.creator-info, .creator-kicker, .creator-qq, .creator-hint { color: var(--cine-muted) !important; }
.creator-name-row strong { color: var(--cine-cream) !important; }
.creator-badge { color: var(--cine-gold) !important; background: rgba(215, 184, 120, .09) !important; border-color: rgba(215, 184, 120, .24) !important; }
.creator-add, .creator-copy {
  color: var(--cine-gold) !important;
  background: rgba(215, 184, 120, .08) !important;
  border-color: rgba(215, 184, 120, .24) !important;
}
.wall-card { background: var(--cine-panel) !important; }
.wall-card h3, .wall-card strong { color: var(--cine-cream) !important; }
.wall-card p, .wall-card small { color: var(--cine-muted) !important; }

.site-footer { background: transparent !important; color: var(--cine-muted) !important; border-top-color: var(--cine-line) !important; }
.site-footer h2, .site-footer h3, .site-footer strong { color: var(--cine-cream) !important; }
.site-footer a { color: var(--cine-soft) !important; }
.footer-brand, .footer-note, .footer-copy { color: var(--cine-muted) !important; }

.campus-float-layer .music-orb, .campus-float-layer .feedback-fab, .music-orb, .feedback-fab {
  color: var(--cine-cream) !important;
  background: rgba(5, 28, 22, .86) !important;
  border-color: var(--cine-line-strong) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32) !important;
}
.music-card, .feedback-card, .feedback-panel {
  color: var(--cine-soft) !important;
  background: rgba(5, 26, 20, .94) !important;
  border-color: var(--cine-line) !important;
}
.music-card h2, .music-card h3, .feedback-card h2, .feedback-card h3 { color: var(--cine-cream) !important; }
.music-card p, .feedback-card p, .music-card small, .feedback-card small { color: var(--cine-muted) !important; }
.music-card input, .feedback-card input, .feedback-card textarea, .music-card select {
  color: var(--cine-cream) !important;
  background: rgba(255, 255, 255, .06) !important;
  border-color: var(--cine-line) !important;
}

/* ---------- 登录：森林玻璃卡 ---------- */
.login-gate {
  background:
    linear-gradient(120deg, rgba(2, 14, 11, .92), rgba(3, 22, 17, .78) 48%, rgba(2, 14, 11, .9)),
    url("./campus-main.jpg") center / cover no-repeat !important;
}
.login-card {
  background: rgba(5, 25, 20, .86) !important;
  border: 1px solid var(--cine-line-strong) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .5) !important;
  -webkit-backdrop-filter: blur(26px) saturate(125%);
  backdrop-filter: blur(26px) saturate(125%);
}
.login-hero {
  background: linear-gradient(145deg, rgba(3, 24, 19, .9), rgba(6, 42, 32, .72)) !important;
  border-bottom: 1px solid var(--cine-line);
}
.login-personal-ribbon {
  color: #d8c08a !important;
  background: rgba(215, 184, 120, .1) !important;
  border-bottom: 1px solid rgba(215, 184, 120, .2) !important;
}
.login-personal-ribbon strong { color: var(--cine-gold-2) !important; }
.login-eyebrow { color: rgba(215, 184, 120, .7) !important; }
.login-hero h2, .login-hero h2 strong { color: var(--cine-cream) !important; font-family: var(--serif) !important; font-weight: 600 !important; }
.login-hero-desc { color: var(--cine-muted) !important; }
.login-body { background: transparent !important; }
.login-profile {
  background: rgba(255, 255, 255, .05) !important;
  border-color: var(--cine-line) !important;
}
.login-profile-copy strong { color: var(--cine-cream) !important; }
.login-profile-copy small, .login-avatar-change { color: var(--cine-muted) !important; }
.login-avatar { background: rgba(255, 255, 255, .1) !important; border-color: rgba(242, 236, 223, .7) !important; }
.login-lead { color: var(--cine-soft) !important; }
.login-form .field label { color: var(--cine-soft) !important; }
.login-form .field input, .field input {
  color: var(--cine-cream) !important;
  background: rgba(255, 255, 255, .055) !important;
  border-color: var(--cine-line) !important;
}
.login-form .field input::placeholder, .field input::placeholder { color: rgba(196, 211, 201, .45) !important; }
.login-form .field input:focus, .field input:focus { border-color: rgba(215, 184, 120, .55) !important; box-shadow: 0 0 0 3px rgba(215, 184, 120, .1) !important; }
.login-submit {
  color: #071f19 !important;
  background: linear-gradient(135deg, #f2ecdf, #d7b878) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .3) !important;
}
.login-note { color: var(--cine-muted) !important; border-top-color: var(--cine-line) !important; }
.login-footer, .login-visitor, .login-noscript { color: var(--cine-muted) !important; }
.login-visitor strong { color: var(--cine-gold-2) !important; }
.login-error { color: #f0b3a2 !important; background: rgba(130, 48, 38, .22) !important; border-color: rgba(237, 157, 139, .26) !important; }

/* ---------- 底部导航：深色玻璃 ---------- */
.bottom-dock.app-dock, .app-dock {
  background: rgba(4, 21, 16, .86) !important;
  border-color: var(--cine-line-strong) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .38) !important;
}
.app-dock-link { color: rgba(220, 228, 219, .55) !important; }
.app-dock-link.is-active, .bottom-dock.app-dock .app-dock-link.is-active {
  color: var(--cine-gold-2) !important;
  background: rgba(215, 184, 120, .1) !important;
}
.app-dock-link.is-active .app-dock-icon { color: var(--cine-gold) !important; }

/* ---------- 论坛：暗色社交评论区 ---------- */
.topbar {
  background: rgba(4, 20, 15, .78) !important;
  border-bottom-color: var(--cine-line) !important;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.brand span { color: var(--cine-cream) !important; }
.brand small { color: var(--cine-gold) !important; }
.page-tag { color: var(--cine-gold) !important; background: rgba(215, 184, 120, .08) !important; border-color: rgba(215, 184, 120, .22) !important; }
.personal-bar {
  color: #d8c08a !important;
  background: rgba(7, 30, 24, .82) !important;
  border-bottom-color: rgba(215, 184, 120, .2) !important;
}
.personal-bar strong { color: var(--cine-gold-2) !important; }
.hero .kicker, .hero .scene-label { color: var(--cine-gold) !important; }
.hero h1 { color: var(--cine-cream) !important; font-family: var(--serif) !important; font-weight: 600 !important; }
.hero p { color: var(--cine-muted) !important; }
.wall-card {
  background: rgba(6, 28, 22, .72) !important;
  border-color: var(--cine-line) !important;
  box-shadow: var(--cine-shadow) !important;
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
}
.wall-card::before { background: linear-gradient(90deg, transparent, var(--cine-gold), transparent) !important; }
.wall-head h2 { color: var(--cine-cream) !important; }
.wall-head span { color: var(--cine-gold) !important; background: rgba(215, 184, 120, .09) !important; border: 1px solid rgba(215, 184, 120, .2); }
.wall-me { background: linear-gradient(135deg, rgba(7, 38, 29, .92), rgba(11, 65, 49, .72)) !important; border-color: var(--cine-line) !important; }
.wall-me-copy small { color: rgba(199, 214, 202, .58) !important; }
.wall-me-fixed { color: var(--cine-gold) !important; }
.wall-login { background: rgba(255, 255, 255, .04) !important; border-color: var(--cine-line) !important; color: var(--cine-muted) !important; }
.wall-login strong { color: var(--cine-cream) !important; }
.wall-login a { color: #071f19 !important; background: linear-gradient(135deg, #f2ecdf, #d7b878) !important; }
.audit-note { color: #cbb68d !important; background: rgba(215, 184, 120, .06) !important; border-color: rgba(215, 184, 120, .18) !important; }
.audit-note strong { color: var(--cine-gold-2) !important; }
.rules { background: rgba(255, 255, 255, .035) !important; border-color: var(--cine-line) !important; }
.rules h3 { color: var(--cine-cream) !important; }
.rules p { color: var(--cine-muted) !important; }
.footer-note { color: rgba(167, 184, 173, .7) !important; }
.admin-link { color: rgba(215, 184, 120, .55) !important; }

.waline-wrap {
  --waline-bg-color: rgba(255, 255, 255, .045);
  --waline-bg-color-light: rgba(255, 255, 255, .03);
  --waline-color: #e9e3d6;
  --waline-border-color: rgba(224, 237, 226, .15);
  --waline-disable-bg-color: rgba(255, 255, 255, .04);
  --waline-info-color: #a7b8ad;
  --waline-theme-color: #d7b878;
  --waline-active-color: #eed7a2;
}
.waline-wrap .wl-panel { background: rgba(255, 255, 255, .035) !important; border-color: var(--cine-line) !important; }
.waline-wrap .wl-textarea, .waline-wrap .wl-editor { color: var(--cine-cream) !important; background: rgba(255, 255, 255, .055) !important; border-color: var(--cine-line) !important; }
.waline-wrap .wl-textarea::placeholder, .waline-wrap .wl-editor::placeholder { color: rgba(196, 211, 201, .43) !important; }
.waline-wrap .wl-btn.primary { color: #071f19 !important; background: linear-gradient(135deg, #f2ecdf, #d7b878) !important; }
.waline-wrap .wl-meta-head, .waline-wrap .wl-sort button, .waline-wrap .wl-count { color: var(--cine-cream) !important; }
.waline-wrap .wl-sort button { color: var(--cine-muted) !important; }
.waline-wrap .wl-card-item { background: rgba(255, 255, 255, .04) !important; border-color: var(--cine-line) !important; box-shadow: 0 8px 26px rgba(0, 0, 0, .16) !important; }
.waline-wrap .wl-nick { color: var(--cine-cream) !important; }
.waline-wrap .wl-time, .waline-wrap .wl-label { color: rgba(167, 184, 173, .65) !important; }
.waline-wrap .wl-card .wl-content, .waline-wrap .wl-content { color: var(--cine-soft) !important; }
.waline-wrap .wl-empty { color: var(--cine-muted) !important; }
.waline-wrap .wl-power, .waline-wrap .wl-power a { color: rgba(167, 184, 173, .45) !important; }
.waline-wrap .wl-comment-actions button, .waline-wrap .wl-like { color: var(--cine-muted) !important; }
.waline-wrap .wl-user { background: rgba(255, 255, 255, .05) !important; border-color: rgba(242, 236, 223, .4) !important; }

/* ---------- 设置：暗色账户中心 ---------- */
.account-hero {
  background:
    radial-gradient(circle at 88% 6%, rgba(84, 160, 128, .22), transparent 14rem),
    linear-gradient(135deg, #041a14, #0a3529 58%, #0e4a38) !important;
  border-color: var(--cine-line) !important;
  box-shadow: var(--cine-shadow) !important;
}
.account-kicker { color: var(--cine-gold) !important; }
.account-name { color: var(--cine-cream) !important; font-family: var(--serif) !important; font-weight: 600 !important; }
.account-handle { color: rgba(199, 214, 202, .62) !important; }
.account-badge { color: var(--cine-gold) !important; border-color: rgba(215, 184, 120, .28) !important; }
.account-stats { border-top-color: var(--cine-line) !important; }
.account-stat { background: rgba(255, 255, 255, .05) !important; border-color: var(--cine-line) !important; }
.account-stat strong { color: var(--cine-cream) !important; }
.account-stat span { color: rgba(199, 214, 202, .55) !important; }
.avatar-change { color: var(--cine-gold) !important; border-color: rgba(215, 184, 120, .26) !important; background: rgba(215, 184, 120, .07) !important; }
.exit-btn { color: rgba(242, 236, 223, .6) !important; border-color: var(--cine-line) !important; }
.card { background: rgba(6, 28, 22, .7) !important; border-color: var(--cine-line) !important; box-shadow: var(--cine-shadow) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.card h2 { color: var(--cine-cream) !important; }
.field label { color: var(--cine-soft) !important; }
.field input { color: var(--cine-cream) !important; background: rgba(255, 255, 255, .055) !important; border-color: var(--cine-line) !important; }
.field input::placeholder { color: rgba(196, 211, 201, .42) !important; }
.field input:focus { border-color: rgba(215, 184, 120, .5) !important; box-shadow: 0 0 0 3px rgba(215, 184, 120, .09) !important; }
.form-hint { color: var(--cine-muted) !important; }
.form-hint.is-ok { color: var(--cine-teal) !important; }
.form-hint.is-error { color: #e5a58f !important; }
.save-btn { color: #071f19 !important; background: linear-gradient(135deg, #f2ecdf, #d7b878) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .26) !important; }
.site-row { background: rgba(255, 255, 255, .035) !important; border-color: var(--cine-line) !important; }
.site-mark { background: rgba(255, 255, 255, .06) !important; border-color: var(--cine-line) !important; }
.site-copy strong { color: var(--cine-cream) !important; }
.site-copy small { color: var(--cine-muted) !important; }
.site-badge { color: var(--cine-gold) !important; background: rgba(215, 184, 120, .07) !important; border-color: rgba(215, 184, 120, .2) !important; }
.link { color: var(--cine-soft) !important; border-bottom-color: var(--cine-line) !important; }
.link small { color: var(--cine-muted) !important; }
.link .icon { color: rgba(215, 184, 120, .55) !important; }
.footer-note { color: rgba(167, 184, 173, .65) !important; }

/* ---------- 移动端 ---------- */
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(30px, 10vw, 42px) !important; }
  .hero { border-radius: 0 0 26px 26px !important; }
  .section-title { font-size: clamp(22px, 7vw, 30px) !important; }
  .login-hero h2 { font-size: 22px !important; }
  .hero .scene-label, .scene-label { font-size: 6px; letter-spacing: .2em; }
}
/* ---------- 三页切换：快速渐变转场 ---------- */
@keyframes scene-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dock-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dock-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(.9); }
  100% { transform: scale(1); }
}
.site-shell, main.shell {
  animation: scene-page-in .26s ease both;
}
.app-dock {
  animation: dock-fade-in .18s ease both;
}
.app-dock-link {
  position: relative;
  transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.app-dock-link::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cine-gold);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}
.app-dock-link.is-active::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.app-dock-link:active,
.app-dock-link.is-pressed {
  transform: scale(.94);
}
.app-dock-link.is-pressed .app-dock-icon {
  animation: dock-pulse .3s cubic-bezier(.2, .8, .2, 1) both;
}
.scene-veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 24%, rgba(76, 156, 121, .2), transparent 22rem),
    linear-gradient(135deg, #03130f 0%, #082d23 42%, #123e31 56%, #041612 100%);
  transition: opacity .16s ease, visibility 0s linear .16s;
}
.scene-veil.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .16s ease, visibility 0s;
}
/* No title, no slow curtain: a quick forest-gradient fade between pages. */
.scene-veil-inner, .scene-veil::before { display: none !important; }
/* Keep music + feedback beside the content, not glued to the bottom dock. */
.campus-float-layer {
  top: 50% !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.campus-float-layer .feedback-fab {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
}
.campus-float-layer .campus-music {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
}
.campus-float-layer .music-card {
  right: 0;
  bottom: 62px;
}
@media (max-width: 380px) {
  .campus-float-layer {
    top: 48% !important;
    right: max(9px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    width: auto !important;
    gap: 8px;
  }
  .campus-float-layer .feedback-fab {
    min-height: 36px;
    max-width: 98px;
    padding-inline: 8px;
    font-size: 8px;
  }
  .campus-float-layer .music-card {
    width: min(272px, calc(100vw - 18px));
  }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .site-shell, main.shell, .app-dock, .app-dock-link, .scene-veil { animation: none !important; transition: none !important; }
  .scene-veil { display: none !important; }
}