/* ============================================================
   我们的爱的小窝 · 全站样式
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --pink: #ff5f9e;
  --purple: #9b5de5;
  --orange: #ff9f1c;
  --yellow: #ffe156;
  --teal: #00d4c6;
  --blue: #4cc9f0;
  --green: #7be495;
  --red: #ff5d73;
  --ink: #4a3b52;
  --ink-soft: #8a7896;
  --card: rgba(255, 255, 255, .88);
  --radius: 22px;
  --shadow: 0 12px 32px rgba(155, 93, 229, .16);
  --font: 'Yuanti SC', 'YouYuan', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  min-height: 100vh;
  background: linear-gradient(120deg, #ffe3f1, #fff4d8, #e3f9ff, #f1e7ff, #ffe3f1);
  background-size: 400% 400%;
  animation: bgFlow 22s ease infinite;
  overflow-x: hidden;
}

@keyframes bgFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 15px; color: var(--ink); }
img { display: block; max-width: 100%; }
::selection { background: var(--pink); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--pink), var(--purple)); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 按钮 ---------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  box-shadow: 0 8px 20px rgba(255, 95, 158, .35);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, filter .18s;
  overflow: hidden; white-space: nowrap;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s;
}
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 26px rgba(155, 93, 229, .4); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px) scale(.97); }
.btn:disabled { opacity: .7; cursor: not-allowed; }

.btn-orange { background: linear-gradient(135deg, #ffb347, var(--orange)); box-shadow: 0 8px 20px rgba(255, 159, 28, .35); }
.btn-teal { background: linear-gradient(135deg, #4be3d8, #12b3a8); box-shadow: 0 8px 20px rgba(0, 212, 198, .3); }
.btn-blue { background: linear-gradient(135deg, #6fd8ff, var(--blue)); box-shadow: 0 8px 20px rgba(76, 201, 240, .3); }
.btn-ghost { background: rgba(255,255,255,.7); color: var(--purple); border: 2px solid rgba(155,93,229,.25); box-shadow: none; }
.btn-ghost:hover { background: #fff; }
.btn-danger { background: linear-gradient(135deg, #ff7d8e, var(--red)); box-shadow: 0 8px 20px rgba(255,93,115,.3); }
.btn-lg { padding: 15px 30px; font-size: 17px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; }

.btn-loading { pointer-events: none; }
.btn-loading .btn-label { opacity: 0; }
.btn-loading::before {
  content: ''; position: absolute; width: 20px; height: 20px;
  border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.28); color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
  transition: transform .18s, background .18s;
}
.icon-btn:hover { background: rgba(255,255,255,.45); transform: scale(1.1) rotate(-6deg); }

/* ============================================================
   登录页
   ============================================================ */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; overflow: hidden; }
.login-bg { position: fixed; inset: -3%; background-size: cover; background-position: center; animation: bgBreath 16s ease-in-out infinite; }
@keyframes bgBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.login-body::after { content: ''; position: fixed; inset: 0; background: linear-gradient(160deg, rgba(255,190,220,.15), rgba(150,100,220,.25)); }

.login-card {
  position: relative; z-index: 5;
  width: min(430px, 92vw);
  padding: 38px 34px 28px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 30px;
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: 0 24px 60px rgba(155, 93, 229, .3);
  animation: cardIn .7s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) scale(.92); } }

.login-logo { display: flex; justify-content: center; animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
.login-title { text-align: center; font-size: 27px; margin-top: 12px; background: linear-gradient(90deg,var(--pink),var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-sub { text-align: center; color: var(--ink-soft); margin: 8px 0 24px; font-size: 14px; }

.field { position: relative; display: flex; align-items: center; margin-bottom: 16px; }
.field-icon { position: absolute; left: 16px; display: flex; color: var(--pink); z-index: 1; }
.field input {
  width: 100%; padding: 15px 16px 15px 48px;
  border-radius: 16px; border: 2.5px solid #f3e4f8;
  background: rgba(255,255,255,.9); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255,95,158,.15); }

.login-error { color: var(--red); font-size: 13.5px; min-height: 20px; margin: 2px 2px 10px; text-align: center; font-weight: 600; }
.login-foot { text-align: center; margin-top: 18px; font-size: 12px; color: var(--ink-soft); }

.float-heart { position: fixed; bottom: -50px; opacity: .85; animation-timing-function: linear; animation-name: heartUp; animation-iteration-count: 1; pointer-events: none; z-index: 2; }
@keyframes heartUp {
  0% { transform: translateY(0) rotate(0deg); opacity: .9; }
  100% { transform: translateY(-115vh) rotate(340deg); opacity: .5; }
}

/* ============================================================
   顶部导航
   ============================================================ */
.app-header { position: relative; overflow: hidden; border-radius: 0 0 30px 30px; box-shadow: 0 10px 30px rgba(120, 60, 180, .25); }
.header-bg { position: absolute; inset: 0; background: url('../assets/nav-default.jpg') center/cover; transition: background-image .5s; }
.header-bg-mask { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(120,50,170,.28) 85%); }
.header-inner { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 30px; min-height: 132px; }

.header-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-icon { width: 46px; height: 46px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); animation: heartbeat 2.2s ease-in-out infinite; }
.brand-text h1 { color: #fff; font-size: 22px; text-shadow: 0 2px 10px rgba(120,40,150,.5); letter-spacing: 1px; }
.brand-text p { color: rgba(255,255,255,.92); font-size: 13px; margin-top: 3px; text-shadow: 0 1px 6px rgba(120,40,150,.5); }

.header-nav { display: flex; gap: 8px; flex: 1; justify-content: center; flex-wrap: wrap; }
.nav-link {
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.45);
  backdrop-filter: blur(6px); transition: all .2s; white-space: nowrap;
}
.nav-link:hover { background: rgba(255,255,255,.4); transform: translateY(-2px); }
.nav-link.active { background: #fff; color: var(--pink); border-color: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.15); }

.header-user { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.user-chip { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--purple); font-size: 13.5px; font-weight: 700; }

/* ---------------- 手机底部导航 ---------------- */
.bottom-nav { display: none; }

/* ============================================================
   视图与通用卡片
   ============================================================ */
.view { max-width: 1180px; margin: 26px auto 60px; padding: 0 20px; min-height: 62vh; }
.view-enter { animation: viewIn .45s cubic-bezier(.34,1.3,.64,1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(22px); } }
/* 页面缓存：常驻 DOM 切换瞬时显示 */
.app-page { display: none; }
.app-page.active { display: block; }
.page-enter { animation: viewIn .26s ease-out; }
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none; } }

.card {
  background: var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; border: 1.5px solid rgba(255,255,255,.8);
}
.card + .card { margin-top: 16px; }

.section-title { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; margin-bottom: 16px; }
.section-title .st-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(var(--pink),var(--purple)); box-shadow: 0 0 0 4px rgba(255,95,158,.18); }
.section-title .st-action { margin-left: auto; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #f6ecff; color: var(--purple); }
.chip-pink { background: #ffe3ef; color: #e64486; }
.chip-teal { background: #d9faf7; color: #0a9c92; }
.chip-orange { background: #fff0d8; color: #e07b00; }
.chip-blue { background: #e2f6ff; color: #1890c4; }

.empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty svg { width: 90px; height: 90px; margin: 0 auto 16px; opacity: .75; }
.empty p { font-size: 15px; margin-bottom: 18px; }

/* ============================================================
   首页
   ============================================================ */
.home-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(255,95,158,.92), rgba(155,93,229,.92)); color: #fff; }
.home-hero::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.14); top: -90px; right: -60px; }
.home-hero::after { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.12); bottom: -70px; left: -40px; }
.home-hero h2 { position: relative; font-size: 27px; line-height: 1.4; text-shadow: 0 2px 10px rgba(120,40,150,.35); }
.home-hero .hero-sub { position: relative; margin-top: 10px; font-size: 15px; opacity: .95; }
.hero-advice { position: relative; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.hero-advice .chip { background: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(4px); }

.stat-big { text-align: center; }
.stat-big .num { font-size: 46px; font-weight: 900; line-height: 1.1; background: linear-gradient(135deg,var(--pink),var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-big .num.purple { background: linear-gradient(135deg,var(--purple),var(--blue)); -webkit-background-clip: text; background-clip: text; }
.stat-big .num.teal { background: linear-gradient(135deg,#12b3a8,var(--blue)); -webkit-background-clip: text; background-clip: text; }
.stat-big .label { color: var(--ink-soft); font-size: 14px; margin-top: 6px; font-weight: 600; }

.weather-main { display: flex; align-items: center; gap: 14px; }
.weather-main svg { width: 72px; height: 72px; flex-shrink: 0; }
.weather-main .temp { font-size: 40px; font-weight: 900; color: var(--purple); line-height: 1; }
.weather-main .desc { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
.weather-advice { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.weather-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }

.quote-box { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.8; font-weight: 600; }
.quote-box::before { content: '\201C'; position: absolute; left: -4px; top: -18px; font-size: 60px; color: var(--pink); opacity: .35; font-family: Georgia, serif; }
.quote-refresh { margin-top: 12px; }

.mood-options { display: flex; flex-wrap: wrap; gap: 10px; }
.mood-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 12px; border-radius: 16px; background: #f7f2fb; border: 2px solid transparent; transition: all .18s; min-width: 72px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.mood-btn svg { width: 30px; height: 30px; }
.mood-btn:hover { transform: translateY(-3px); background: #f0e6fb; }
.mood-btn.sel { border-color: var(--pink); background: #ffe9f3; color: var(--pink); box-shadow: 0 6px 14px rgba(255,95,158,.2); }
.mood-note { width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 14px; border: 2px solid #f0e4f8; background: #fff; outline: none; resize: none; }
.mood-note:focus { border-color: var(--pink); }

.countdown-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #eadcf5; }
.countdown-row:last-child { border-bottom: none; }
.countdown-row .cd-name { font-weight: 700; font-size: 15px; }
.countdown-row .cd-date { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.countdown-row .cd-badge { margin-left: auto; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 800; background: #f1e7ff; color: var(--purple); white-space: nowrap; }
.countdown-row .cd-badge.today { background: linear-gradient(135deg,var(--pink),var(--orange)); color: #fff; animation: badgePulse 1.6s ease-in-out infinite; }
@keyframes badgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.quick-row { display: flex; gap: 12px; flex-wrap: wrap; }
.quick-row .btn { flex: 1; min-width: 130px; }

/* ============================================================
   相册
   ============================================================ */
.gallery-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-pills { display: flex; gap: 8px; background: rgba(255,255,255,.7); padding: 5px; border-radius: 999px; box-shadow: var(--shadow); }
.filter-pills button { padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-soft); transition: all .2s; }
.filter-pills button.active { background: linear-gradient(135deg,var(--pink),var(--purple)); color: #fff; box-shadow: 0 4px 12px rgba(255,95,158,.4); }
.gallery-toolbar .toolbar-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.waterfall { column-count: 4; column-gap: 14px; }
.wf-item {
  break-inside: avoid; margin-bottom: 14px; position: relative;
  border-radius: 18px; overflow: hidden; cursor: zoom-in;
  box-shadow: 0 8px 22px rgba(120,80,160,.18);
  background: #f3eaf8;
}
.wf-item img, .wf-item video { width: 100%; display: block; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.wf-item:hover img, .wf-item:hover video { transform: scale(1.06); }
.wf-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; opacity: 0; transition: opacity .25s; background: linear-gradient(180deg,rgba(80,30,110,.35),transparent 30%,transparent 60%,rgba(80,30,110,.45)); }
.wf-item:hover .wf-overlay, .wf-item.selected .wf-overlay { opacity: 1; }
.wf-actions { display: flex; gap: 6px; justify-content: flex-end; }
.wf-mini { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--purple); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.wf-mini:hover { transform: scale(1.15); }
.wf-check { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #fff; background: rgba(0,0,0,.2); display: none; align-items: center; justify-content: center; color: #fff; z-index: 3; }
.select-mode .wf-check { display: flex; }
.wf-item.selected .wf-check { background: var(--pink); border-color: var(--pink); }
.wf-item.selected { outline: 4px solid var(--pink); outline-offset: -4px; }
.wf-video-tag { position: absolute; bottom: 10px; left: 10px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; color: #fff; }
.wf-likes { position: absolute; bottom: 10px; right: 10px; color: #fff; font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.5); display: flex; align-items: center; gap: 4px; }

.batch-bar { display: none; align-items: center; gap: 10px; padding: 12px 18px; margin-bottom: 16px; background: linear-gradient(135deg,rgba(255,95,158,.95),rgba(155,93,229,.95)); border-radius: 18px; color: #fff; box-shadow: var(--shadow); }
.batch-bar.show { display: flex; animation: viewIn .3s; }
.batch-bar .count { font-weight: 800; }
.batch-bar .sp { margin-left: auto; display: flex; gap: 8px; }
.batch-bar .btn-sm { background: rgba(255,255,255,.25); color: #fff; box-shadow: none; }

/* ---------------- 灯箱 ---------------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(28, 12, 40, .94); display: flex; flex-direction: column; animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } }
.lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 20px; }
.lb-media { max-width: 92vw; max-height: 74vh; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: lbPop .35s cubic-bezier(.34,1.4,.64,1); }
@keyframes lbPop { from { transform: scale(.85); opacity: 0; } }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; transition: all .2s; border: 1.5px solid rgba(255,255,255,.3); }
.lb-arrow:hover { background: rgba(255,255,255,.35); transform: translateY(-50%) scale(1.1); }
.lb-prev { left: 22px; } .lb-next { right: 22px; }
.lb-close { position: absolute; top: 20px; right: 22px; z-index: 5; }
.lb-bottom { padding: 12px 24px 20px; color: #fff; max-height: 34vh; overflow-y: auto; }
.lb-title { font-size: 16px; font-weight: 700; }
.lb-meta { font-size: 12.5px; color: rgba(255,255,255,.7); margin: 4px 0 10px; }
.lb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lb-actions .btn { box-shadow: none; }
.lb-comments { margin-top: 8px; }
.lb-comment { display: flex; gap: 10px; padding: 8px 0; font-size: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.lb-comment .c-user { color: var(--yellow); font-weight: 700; flex-shrink: 0; }
.lb-comment .c-del { margin-left: auto; color: rgba(255,255,255,.5); font-size: 12px; cursor: pointer; }
.lb-comment-form { display: flex; gap: 8px; margin-top: 10px; }
.lb-comment-form input { flex: 1; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; outline: none; }
.lb-comment-form input::placeholder { color: rgba(255,255,255,.55); }

/* ---------------- 幻灯片 ---------------- */
.slideshow { position: fixed; inset: 0; z-index: 110; background: #0c0616; overflow: hidden; }
.ss-viewport { position: absolute; inset: 0; perspective: 1200px; }
.ss-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(1.05); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity; backface-visibility: hidden; }
.ss-slide.in { opacity: 1; transform: scale(1); z-index: 2; }
.ss-slide.drag { transition: none; opacity: 1; transform: none; }
.ss-slide.drag-anim { transition: transform .38s cubic-bezier(.22,1,.36,1); opacity: 1; }
.ss-slide img, .ss-slide video { max-width: 94vw; max-height: 80vh; border-radius: 16px; box-shadow: 0 20px 70px rgba(0,0,0,.6); }
.ss-kb { animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  animation-direction: alternate; transform-origin: 50% 50%; will-change: transform; }
.kb1 { animation-name: ssKB1; } .kb2 { animation-name: ssKB2; } .kb3 { animation-name: ssKB3; }
@keyframes ssKB1 { from { transform: scale(1.02) translate(-1%, -1%); } to { transform: scale(1.15) translate(1.5%, 1%); } }
@keyframes ssKB2 { from { transform: scale(1.03) translate(1%, -1%); } to { transform: scale(1.14) translate(-1.5%, 1.5%); } }
@keyframes ssKB3 { from { transform: scale(1.02) translate(0, 1%); } to { transform: scale(1.16) translate(-1%, -1.5%); } }
.ss-caption { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 17px; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.8); text-align: center; z-index: 5; background: rgba(0,0,0,.3); padding: 8px 22px; border-radius: 999px; backdrop-filter: blur(6px); max-width: 88vw; opacity: 1; transition: opacity .35s; }
.ss-caption:not(.show) { display: none; }
.ss-controls { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; z-index: 6; background: rgba(30,15,50,.6); padding: 10px 22px; border-radius: 999px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.15); transition: opacity .35s; }
.ss-controls button { color: #fff; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; transition: background .2s, transform .2s; }
.ss-controls button:hover { background: rgba(255,255,255,.2); transform: scale(1.12); }
.ss-divider { width: 1px; height: 22px; background: rgba(255,255,255,.25); }
.ss-progress { position: absolute; top: 0; left: 0; height: 4px; background: linear-gradient(90deg,#8b5cf6,#22d3ee); z-index: 6; }
.ss-exit { position: absolute; top: 22px; right: 24px; z-index: 7; transition: opacity .35s; }
.ss-count { position: absolute; top: 24px; left: 24px; color: rgba(255,255,255,.8); font-size: 14px; z-index: 7; background: rgba(0,0,0,.3); padding: 6px 14px; border-radius: 999px; transition: opacity .35s; }
.slideshow.ui-hidden .ss-controls, .slideshow.ui-hidden .ss-exit,
.slideshow.ui-hidden .ss-count, .slideshow.ui-hidden .ss-caption { opacity: 0; pointer-events: none; }

/* ============================================================
   上传
   ============================================================ */
.dropzone {
  border: 3.5px dashed #d9b3ee; border-radius: 26px;
  padding: 56px 24px; text-align: center; background: rgba(255,255,255,.65);
  transition: all .25s; cursor: pointer;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--pink); background: #fff0f7; transform: scale(1.01); }
.dropzone svg { width: 84px; height: 84px; margin: 0 auto 14px; color: var(--purple); }
.dropzone h3 { font-size: 20px; margin-bottom: 8px; }
.dropzone p { color: var(--ink-soft); font-size: 14px; }
.upload-actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.upload-hint { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; }

.file-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.75); margin-top: 10px; box-shadow: 0 4px 12px rgba(120,80,160,.1); }
.file-row img, .file-row video { width: 54px; height: 54px; object-fit: cover; border-radius: 12px; background: #f0e8f8; flex-shrink: 0; }
.file-row .fr-info { flex: 1; min-width: 0; }
.file-row .fr-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-row .fr-size { font-size: 12px; color: var(--ink-soft); }
.fr-progress { height: 7px; border-radius: 99px; background: #eee0f6; margin-top: 6px; overflow: hidden; }
.fr-progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg,var(--pink),var(--orange)); transition: width .2s; }
.fr-status { font-size: 12.5px; font-weight: 700; flex-shrink: 0; }
.fr-status.ok { color: #18a558; } .fr-status.fail { color: var(--red); }

/* ============================================================
   回忆时间轴
   ============================================================ */
.timeline { position: relative; padding-left: 54px; }
.timeline::before { content: ''; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 4px; border-radius: 99px; background: linear-gradient(var(--pink),var(--purple),var(--blue)); }
.tl-item { position: relative; margin-bottom: 20px; }
.tl-dot { position: absolute; left: -44px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); display: flex; align-items: center; justify-content: center; color: var(--pink); z-index: 2; box-shadow: 0 4px 10px rgba(255,95,158,.3); }
.tl-dot svg { width: 15px; height: 15px; }
.tl-card { overflow: hidden; padding: 0; }
.tl-date { display: inline-block; padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg,var(--pink),var(--purple)); color: #fff; font-size: 12.5px; font-weight: 700; margin: 16px 0 0 18px; }
.tl-body { padding: 14px 18px 18px; }
.tl-title { font-size: 17px; font-weight: 800; }
.tl-desc { color: var(--ink-soft); font-size: 14px; line-height: 1.7; margin-top: 6px; white-space: pre-wrap; }
.tl-photo { margin-top: 12px; max-height: 360px; width: 100%; object-fit: cover; border-radius: 14px; cursor: zoom-in; }
.tl-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ============================================================
   小纸条 / 心愿
   ============================================================ */
.msg-compose { margin-bottom: 20px; }
.msg-compose .row { display: flex; gap: 10px; flex-wrap: wrap; }
.msg-compose select { padding: 11px 14px; border-radius: 14px; border: 2px solid #f0e4f8; background: #fff; outline: none; }
.msg-compose textarea { width: 100%; margin-top: 10px; padding: 13px 16px; border-radius: 16px; border: 2px solid #f0e4f8; background: #fff; outline: none; resize: vertical; min-height: 80px; }
.msg-compose textarea:focus, .msg-compose select:focus { border-color: var(--pink); }
.msg-board { columns: 3; column-gap: 14px; }
.msg-note { break-inside: avoid; margin-bottom: 14px; padding: 18px; border-radius: 10px 22px 14px 22px; box-shadow: 0 8px 20px rgba(120,80,160,.15); transform: rotate(-1.2deg); transition: transform .2s; position: relative; }
.msg-note:nth-child(even) { transform: rotate(1.4deg); }
.msg-note:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.msg-note .m-content { font-size: 15px; line-height: 1.7; font-weight: 600; white-space: pre-wrap; word-break: break-word; }
.msg-note .m-meta { font-size: 12px; color: rgba(74,59,82,.65); margin-top: 12px; display: flex; align-items: center; gap: 6px; }
.msg-note .m-del { margin-left: auto; cursor: pointer; }

.wish-add { display: flex; gap: 10px; margin-bottom: 18px; }
.wish-add input { flex: 1; padding: 13px 18px; border-radius: 999px; border: 2.5px solid #f0e4f8; background: #fff; outline: none; }
.wish-add input:focus { border-color: var(--pink); }
.wish-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 16px; background: rgba(255,255,255,.78); margin-bottom: 10px; box-shadow: 0 4px 12px rgba(120,80,160,.09); transition: all .2s; }
.wish-check { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--pink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; transition: all .2s; }
.wish-row.done .wish-check { background: var(--pink); }
.wish-row.done .wish-check svg { display: block; }
.wish-check svg { display: none; width: 16px; }
.wish-content { font-size: 15px; font-weight: 600; }
.wish-row.done .wish-content { text-decoration: line-through; color: var(--ink-soft); }
.wish-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.wish-del { margin-left: auto; color: var(--ink-soft); display: flex; padding: 6px; border-radius: 50%; transition: all .2s; }
.wish-del:hover { color: var(--red); background: #ffe9ec; }
.wish-progress { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 14px; font-weight: 700; }
.wish-progress b { color: var(--pink); }

/* ============================================================
   表单 / 表格 / 设置
   ============================================================ */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 15px; border-radius: 14px;
  border: 2.5px solid #f0e4f8; background: #fff; outline: none; transition: border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--pink); }
.form-group textarea { resize: vertical; min-height: 76px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.form-check input { width: 18px; height: 18px; accent-color: var(--pink); }
.help-text { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }

.table-wrap { overflow-x: auto; border-radius: 18px; box-shadow: var(--shadow); background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.data th { background: linear-gradient(135deg,var(--pink),var(--purple)); color: #fff; padding: 12px 14px; text-align: left; font-weight: 700; white-space: nowrap; }
table.data td { padding: 11px 14px; border-bottom: 1px solid #f0e6f8; vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: rgba(255,240,247,.6); }
.log-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.log-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; }
.log-status.ok { color: #18a558; } .log-status.ok::before { background: #28c76f; }
.log-status.fail { color: var(--red); } .log-status.fail::before { background: var(--red); }
.mono { font-family: 'SF Mono', Consolas, monospace; font-size: 12.5px; }

.setting-bgm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setting-bgm audio { height: 38px; max-width: 100%; }

/* ============================================================
   弹窗 / Toast / 动作面板
   ============================================================ */
.modal-root { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-root.show { display: flex; }
.modal-overlay { position: absolute; inset: 0; background: rgba(40,18,60,.55); backdrop-filter: blur(4px); animation: fadeIn .25s; }
.modal { position: relative; width: min(500px, 96vw); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 26px; padding: 24px; box-shadow: 0 30px 80px rgba(60,20,90,.4); animation: modalPop .38s cubic-bezier(.34,1.4,.64,1); }
@keyframes modalPop { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.modal-header { display: flex; align-items: center; margin-bottom: 18px; }
.modal-title { font-size: 20px; font-weight: 800; }
.modal-close { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: all .2s; }
.modal-close:hover { background: #f5edfa; color: var(--pink); transform: rotate(90deg); }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

.action-sheet-root { position: fixed; inset: 0; z-index: 130; display: none; align-items: flex-end; justify-content: center; }
.action-sheet-root.show { display: flex; }
.as-backdrop { position: absolute; inset: 0; background: rgba(30,12,45,.5); animation: fadeIn .25s; }
.action-sheet { position: relative; width: 100%; max-width: 520px; background: #fff; border-radius: 28px 28px 0 0; padding: 14px 18px calc(22px + env(safe-area-inset-bottom)); animation: sheetUp .32s cubic-bezier(.22,1,.36,1); }
@keyframes sheetUp { from { transform: translateY(100%); } }
.as-title { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 8px 0 12px; font-weight: 700; }
.as-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border-radius: 16px; font-size: 16px; font-weight: 700; transition: background .15s; text-align: left; }
.as-item:hover { background: #f7effc; }
.as-item svg { width: 23px; height: 23px; color: var(--purple); }
.as-cancel { margin-top: 10px; width: 100%; padding: 15px; border-radius: 16px; background: #f5edfa; color: var(--purple); font-size: 16px; font-weight: 800; }

.toast-root { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; width: 92vw; }
.toast { background: rgba(45,22,65,.92); color: #fff; padding: 12px 24px; border-radius: 999px; font-size: 14.5px; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.3); animation: toastIn .35s cubic-bezier(.34,1.4,.64,1); max-width: 100%; text-align: center; backdrop-filter: blur(8px); }
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } }
.toast.leave { animation: toastOut .3s forwards; }
@keyframes toastOut { to { transform: translateY(14px); opacity: 0; } }

/* ---------------- 漂浮爱心层 ---------------- */
.floating-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.sp-heart { position: absolute; bottom: -40px; animation: heartUp linear forwards; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 960px) {
  .waterfall { column-count: 3; }
  .msg-board { columns: 2; }
}

@media (max-width: 820px) {
  .header-nav { display: none; }
  .header-inner { flex-wrap: wrap; min-height: 0; padding: 16px 18px; gap: 12px; }
  .brand-text h1 { font-size: 19px; }
  .user-chip { display: none; }

  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,.94); backdrop-filter: blur(16px);
    border-top: 1.5px solid #f0e4f8; box-shadow: 0 -8px 24px rgba(120,80,160,.12);
  }
  .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #b0a0bc; font-size: 11px; font-weight: 700; }
  .bn-item svg { width: 23px; height: 23px; }
  .bn-item.active { color: var(--pink); }
  .bn-add-btn { width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; background: linear-gradient(135deg,var(--pink),var(--purple)); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 10px 22px rgba(255,95,158,.5); border: 5px solid #fff; transition: transform .2s; }
  .bn-add-btn svg { width: 26px; height: 26px; }
  .bn-item:active .bn-add-btn { transform: scale(.9) rotate(90deg); }

  .view { margin: 18px auto 92px; padding: 0 14px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .waterfall { column-count: 2; column-gap: 10px; }
  .wf-item { margin-bottom: 10px; }
  .home-hero h2 { font-size: 22px; }
  .lb-arrow { width: 42px; height: 42px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .ss-controls { gap: 8px; padding: 8px 14px; flex-wrap: wrap; justify-content: center; max-width: 94vw; }
  .ss-caption { font-size: 14px; bottom: 120px; max-width: 90vw; }
  .form-row-2 { grid-template-columns: 1fr; }
  .toast-root { bottom: 84px; }
}

@media (max-width: 380px) {
  .waterfall { column-count: 1; }
  .msg-board { columns: 1; }
}



/* ============================================================
   MV 视频风登录页（暗紫月夜 · 花瓣 · 粉白大字）
   ============================================================ */
.mv-login { background: #0d0618; }
.login-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mv-overlay {
  position: fixed; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 26%, rgba(190, 90, 220, .28), transparent 55%),
    linear-gradient(180deg, rgba(18, 7, 32, .55) 0%, rgba(22, 8, 40, .42) 45%, rgba(10, 4, 22, .82) 100%);
}
.mv-overlay::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,.72);
}
.mv-moon {
  position: fixed; top: 7%; left: 50%; z-index: 1;
  width: 210px; height: 210px; transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(120,60,130,.28) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 58%, rgba(120,60,130,.22) 0 12%, transparent 13%),
    radial-gradient(circle at 66% 66%, rgba(120,60,130,.2) 0 7%, transparent 8%),
    radial-gradient(circle at 36% 34%, #ffeef9 0%, #ecbfe9 42%, #c086d4 78%, #9a5cba 100%);
  box-shadow: 0 0 70px 22px rgba(216, 120, 226, .42), 0 0 170px 70px rgba(140, 55, 175, .32);
  animation: moonPulse 6s ease-in-out infinite;
}
@keyframes moonPulse { 0%,100% { box-shadow: 0 0 70px 22px rgba(216,120,226,.42), 0 0 170px 70px rgba(140,55,175,.32); }
  50% { box-shadow: 0 0 92px 30px rgba(232,140,240,.55), 0 0 200px 90px rgba(150,65,190,.4); } }

.mv-petals { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.mv-petal { position: absolute; bottom: -40px; animation: petalUp linear forwards; }
@keyframes petalUp {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .95; }
  35% { transform: translate3d(36px, -38vh, 0) rotate(150deg); }
  65% { transform: translate3d(-28px, -72vh, 0) rotate(280deg); }
  100% { transform: translate3d(20px, -112vh, 0) rotate(420deg); opacity: .7; }
}

.mv-card {
  background: rgba(26, 12, 44, .58);
  border: 1.5px solid rgba(255, 138, 205, .35);
  box-shadow: 0 24px 70px rgba(120, 30, 160, .5), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
.mv-kicker { text-align: center; font-size: 11px; letter-spacing: 4px; color: #f18ad0; font-weight: 700; }
.mv-title {
  text-align: center; margin: 10px 0 4px;
  font-size: 40px; font-weight: 900; line-height: 1.05; letter-spacing: 1px;
  color: #fdf4ff; text-shadow: 0 4px 26px rgba(230, 120, 220, .5);
}
.mv-title em { font-style: italic; color: #ff3fa4; padding: 0 4px; text-shadow: 0 0 30px rgba(255, 63, 164, .75); }
.mv-sub { text-align: center; color: #d9c2ef; margin: 6px 0 24px; font-size: 14px; letter-spacing: 2px; }

.mv-field input {
  background: rgba(14, 6, 26, .6);
  border: 2px solid rgba(200, 130, 230, .3);
  color: #f6e9ff;
}
.mv-field input::placeholder { color: #a98fc9; }
.mv-field input:focus { border-color: #ff5fb0; box-shadow: 0 0 0 4px rgba(255, 95, 176, .18); }
.mv-field .field-icon { color: #ff7fbd; }

.mv-btn {
  background: linear-gradient(100deg, #ff2e97, #c026d3 55%, #8b35e8);
  border: none; font-weight: 800; letter-spacing: 3px;
  box-shadow: 0 10px 30px rgba(220, 50, 160, .45);
}
.mv-btn:hover { box-shadow: 0 12px 38px rgba(235, 70, 180, .6); }
.mv-foot { color: #b79fd6; }

@media (max-width: 480px) {
  .mv-moon { width: 150px; height: 150px; top: 5%; }
  .mv-card { padding: 30px 24px 22px; }
  .mv-title { font-size: 33px; }
}

/* ============================================================
   首页 MV 舞台
   ============================================================ */
.mv-stage {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: 24px; overflow: hidden; background: #140826;
  border: 1.5px solid rgba(255, 120, 200, .32);
  box-shadow: 0 20px 60px rgba(120, 30, 160, .42);
}
.mv-stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mv-stage-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(180, 80, 210, .2), transparent 60%),
    linear-gradient(180deg, rgba(10,4,20,.5), rgba(10,4,20,.15) 40%, rgba(10,4,20,.72));
}
.mv-stage::before, .mv-stage::after {
  content: ''; position: absolute; left: 0; right: 0; height: 7%; z-index: 2;
  background: #06020d;
}
.mv-stage::before { top: 0; }
.mv-stage::after { bottom: 0; }

.mv-stage-tag {
  position: absolute; top: 9%; left: 22px; z-index: 4;
  font-size: 10.5px; letter-spacing: 2.5px; font-weight: 700; color: #f18ad0;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.mv-stage-lyrics {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.mv-stage-lyrics .mv-l1, .mv-stage-lyrics .mv-l2 {
  font-weight: 900; color: #fdf4ff; line-height: 1.08; letter-spacing: 2px;
  text-shadow: 0 4px 22px rgba(220, 110, 220, .55);
}
.mv-stage-lyrics .mv-l1 { font-size: clamp(20px, 4.2vw, 44px); }
.mv-stage-lyrics .mv-l2 { font-size: clamp(24px, 5.4vw, 58px); margin-top: 6px; }
.mv-stage-lyrics em { font-style: italic; color: #ff3fa4; text-shadow: 0 0 28px rgba(255,63,164,.8); }
.mv-stage-lyrics.punch { animation: lyricPunch .55s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes lyricPunch {
  0% { opacity: 0; transform: scale(1.22); filter: blur(6px); }
  55% { opacity: 1; transform: scale(.97); }
  100% { transform: scale(1); filter: blur(0); }
}

.mv-stage-petals { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.mv-stage-controls { position: absolute; right: 18px; bottom: 10%; z-index: 5; display: flex; gap: 10px; }
.mv-ctrl {
  padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: #ffe3f4; background: rgba(30, 10, 48, .55);
  border: 1px solid rgba(255, 140, 205, .45);
  backdrop-filter: blur(8px); cursor: pointer;
  transition: background .2s, transform .15s;
}
.mv-ctrl:hover { background: rgba(200, 50, 150, .5); transform: translateY(-1px); }

@media (max-width: 480px) {
  .mv-stage { border-radius: 18px; }
  .mv-stage-tag { font-size: 8.5px; left: 12px; }
  .mv-ctrl { padding: 6px 11px; font-size: 11px; }
}

/* ============================================================
   全站 MV 夜色主题（暗紫 · 靛蓝 · 月光青，去粉色）
   ============================================================ */
:root {
  --pink: #8b5cf6;
  --purple: #6366f1;
  --violet: #a78bfa;
  --moon-cyan: #7dd3fc;
  --ink: #e8e2fb;
  --ink-soft: #a499cc;
  --card: rgba(25, 17, 46, .66);
  --shadow: 0 14px 38px rgba(18, 9, 44, .55);
}

body {
  color: var(--ink);
  background: linear-gradient(125deg, #0b0718 0%, #170f33 28%, #12143a 52%, #1a0f35 76%, #0b0a1e 100%);
  background-size: 400% 400%;
}
::selection { background: #6366f1; color: #fff; }
::-webkit-scrollbar-thumb { background: linear-gradient(#8b5cf6, #6366f1); }

/* 背景星云微光 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(420px 320px at 12% 18%, rgba(124, 58, 237, .22), transparent 70%),
    radial-gradient(520px 380px at 86% 30%, rgba(67, 56, 202, .2), transparent 70%),
    radial-gradient(460px 360px at 50% 96%, rgba(34, 211, 238, .1), transparent 70%);
}

/* 按钮 */
.btn { background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 8px 22px rgba(99, 102, 241, .4); }
.btn:hover { box-shadow: 0 14px 30px rgba(129, 100, 240, .55); }
.btn-orange { background: linear-gradient(135deg, #818cf8, #6366f1); box-shadow: 0 8px 20px rgba(99,102,241,.35); }
.btn-teal { background: linear-gradient(135deg, #22d3ee, #0891b2); box-shadow: 0 8px 20px rgba(34,211,238,.3); }
.btn-blue { background: linear-gradient(135deg, #7dd3fc, #38bdf8); box-shadow: 0 8px 20px rgba(125,211,252,.3); }
.btn-ghost { background: rgba(99, 102, 241, .16); color: #c7bff5; border: 2px solid rgba(167,139,250,.3); }
.btn-ghost:hover { background: rgba(99,102,241,.3); }
.btn-danger { background: linear-gradient(135deg, #f43f5e, #e11d48); }

/* 卡片 */
.card { border: 1.5px solid rgba(167, 139, 250, .2); }

/* 顶部导航 */
.header-bg-mask { background: linear-gradient(180deg, rgba(15,8,32,.25), rgba(30,16,60,.45) 85%); }
.nav-link { background: rgba(30, 20, 60, .35); border-color: rgba(196,181,253,.4); }
.nav-link:hover { background: rgba(99,102,241,.45); }
.nav-link.active { color: #6d28d9; }
.user-chip { background: rgba(30,20,60,.7); color: #c4b5fd; border: 1px solid rgba(167,139,250,.4); }

/* 标题与标签 */
.section-title .st-dot { background: linear-gradient(#8b5cf6, #6366f1); box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.chip { background: rgba(99,102,241,.18); color: #c7bff5; border: 1px solid rgba(167,139,250,.22); }
.chip-pink { background: rgba(139,92,246,.2); color: #c4b5fd; }
.chip-teal { background: rgba(34,211,238,.16); color: #a5f3fc; }
.chip-orange { background: rgba(251,191,36,.14); color: #fde68a; }
.chip-blue { background: rgba(56,189,248,.16); color: #bae6fd; }

/* 首页 hero */
.home-hero { background: linear-gradient(120deg, #4c1d95 0%, #4338ca 60%, #1e3a8a 100%); }
.home-hero::before { background: rgba(196,181,253,.16); }
.home-hero::after { background: rgba(125,211,252,.12); }
.home-hero h2 { text-shadow: 0 2px 12px rgba(30,16,70,.5); }
.hero-advice .chip { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }

/* 统计大数字 */
.stat-big .num { background: linear-gradient(135deg, #a78bfa, #7dd3fc); -webkit-background-clip: text; background-clip: text; }
.stat-big .num.purple { background: linear-gradient(135deg, #818cf8, #22d3ee); -webkit-background-clip: text; background-clip: text; }
.stat-big .num.teal { background: linear-gradient(135deg, #2dd4bf, #7dd3fc); -webkit-background-clip: text; background-clip: text; }

/* 天气 / 情话 */
.weather-main .temp { color: #c4b5fd; }
.quote-box::before { color: #8b5cf6; }

/* 心情 */
.mood-btn { background: rgba(40, 28, 72, .55); color: var(--ink-soft); border: 2px solid transparent; }
.mood-btn:hover { background: rgba(79, 60, 130, .6); }
.mood-btn.sel { border-color: #8b5cf6; background: rgba(109, 76, 200, .4); color: #c4b5fd; box-shadow: 0 6px 16px rgba(99,102,241,.3); }
.mood-note { background: rgba(16, 10, 32, .65); border: 2px solid rgba(124,108,180,.3); color: var(--ink); }
.mood-note:focus { border-color: #8b5cf6; }

/* 倒计时 */
.countdown-row { border-bottom: 1px dashed rgba(167,139,250,.22); }
.countdown-row .cd-badge { background: rgba(99,102,241,.2); color: #c4b5fd; }
.countdown-row .cd-badge.today { background: linear-gradient(135deg,#8b5cf6,#6366f1); }

/* 相册 */
.filter-pills { background: rgba(24, 16, 44, .7); border: 1px solid rgba(167,139,250,.2); }
.filter-pills button { color: var(--ink-soft); }
.filter-pills button.active { background: linear-gradient(135deg,#8b5cf6,#6366f1); box-shadow: 0 4px 12px rgba(99,102,241,.4); }
.wf-item { background: #1e1540; box-shadow: 0 8px 22px rgba(12,8,32,.5); }
.wf-item.selected .wf-check { background: #8b5cf6; border-color: #8b5cf6; }
.wf-item.selected { outline-color: #8b5cf6; }
.wf-mini { background: rgba(30,20,60,.85); color: #c4b5fd; }
.batch-bar { background: linear-gradient(135deg,#5b21b6,#4338ca); }

/* 上传 */
.dropzone { border-color: rgba(139,92,246,.5); background: rgba(24,16,44,.55); }
.dropzone:hover, .dropzone.dragover { border-color: #8b5cf6; background: rgba(60,40,110,.55); }
.dropzone svg { color: #a78bfa; }
.file-row { background: rgba(26,17,48,.75); box-shadow: 0 4px 14px rgba(10,6,26,.5); }
.file-row img, .file-row video { background: #241a48; }
.fr-progress { background: rgba(99,102,241,.22); }
.fr-progress i { background: linear-gradient(90deg,#8b5cf6,#22d3ee); }

/* 时间轴 */
.timeline::before { background: linear-gradient(#8b5cf6,#6366f1,#22d3ee); }
.tl-dot { background: #1e1440; border-color: #8b5cf6; color: #a78bfa; box-shadow: 0 4px 12px rgba(99,102,241,.35); }
.tl-date { background: linear-gradient(135deg,#8b5cf6,#6366f1); }

/* 小纸条 / 心愿 */
.msg-compose select, .msg-compose textarea { background: rgba(16,10,32,.65); border-color: rgba(124,108,180,.3); color: var(--ink); }
.msg-compose select option { background: #1a1233; }
.msg-compose textarea:focus, .msg-compose select:focus { border-color: #8b5cf6; }
.msg-note { border: 1px solid rgba(167,139,250,.22); box-shadow: 0 8px 22px rgba(10,6,26,.5); }
.msg-note .m-meta { color: rgba(210, 200, 235, .6); }
.wish-add input { background: rgba(16,10,32,.65); border-color: rgba(124,108,180,.3); color: var(--ink); }
.wish-add input:focus { border-color: #8b5cf6; }
.wish-row { background: rgba(26,17,48,.72); }
.wish-check { border-color: #8b5cf6; }
.wish-row.done .wish-check { background: #8b5cf6; }
.wish-del:hover { background: rgba(244,63,94,.18); }
.wish-progress b { color: #a78bfa; }

/* 表单 / 表格 */
.form-group input, .form-group select, .form-group textarea { background: rgba(16,10,32,.65); border-color: rgba(124,108,180,.3); color: var(--ink); }
.form-group select option { background: #1a1233; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #8b5cf6; }
.form-check input { accent-color: #8b5cf6; }
.table-wrap { background: var(--card); }
table.data th { background: linear-gradient(135deg,#8b5cf6,#6366f1); }
table.data td { border-bottom: 1px solid rgba(167,139,250,.16); }
table.data tr:hover td { background: rgba(99,102,241,.12); }

/* 弹窗 / 动作面板 */
.modal-overlay { background: rgba(18,10,34,.65); }
.modal { background: linear-gradient(165deg,#211640,#19102f); border: 1px solid rgba(167,139,250,.25); box-shadow: 0 30px 90px rgba(8,4,20,.7); }
.modal-close:hover { background: rgba(99,102,241,.25); color: #c4b5fd; }
.action-sheet { background: linear-gradient(165deg,#211640,#17102c); border-top: 1px solid rgba(167,139,250,.25); }
.as-item:hover { background: rgba(99,102,241,.18); }
.as-item svg { color: #a78bfa; }
.as-cancel { background: rgba(99,102,241,.2); color: #c4b5fd; }

/* 手机底部导航 */
.bottom-nav { background: rgba(18, 11, 36, .92); border-top: 1.5px solid rgba(167,139,250,.2); box-shadow: 0 -8px 26px rgba(6,3,18,.6); }
.bn-item { color: #8e84ad; }
.bn-item.active { color: #a78bfa; }
.bn-add-btn { background: linear-gradient(135deg,#8b5cf6,#6366f1); box-shadow: 0 10px 24px rgba(99,102,241,.55); border-color: #120c28; }

/* 幻灯片 */
.ss-progress { background: linear-gradient(90deg,#8b5cf6,#22d3ee); }
.lb-comment .c-user { color: #fbbf24; }

/* 登录页去粉：标题强调字改月光青，按钮改紫靛，花瓣偏紫青 */
.mv-kicker { color: #a78bfa; }
.mv-title em { color: #7dd3fc; text-shadow: 0 0 30px rgba(125,211,252,.7); }
.mv-field input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,.2); }
.mv-field .field-icon { color: #a78bfa; }
.mv-btn { background: linear-gradient(100deg,#7c3aed,#6366f1 60%,#4f46e5); box-shadow: 0 10px 30px rgba(99,102,241,.5); }
.mv-btn:hover { box-shadow: 0 12px 38px rgba(110,100,235,.65); }

/* MV 舞台：强调字改青色，花瓣偏紫 */
.mv-stage-lyrics em { color: #7dd3fc; text-shadow: 0 0 28px rgba(125,211,252,.75); }
.mv-ctrl:hover { background: rgba(99,102,241,.55); }

/* ===== 固定背景音乐悬浮按钮 ===== */
.bgm-fab {
  position: fixed; right: 18px; bottom: 22px; z-index: 90;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #c4b5fd; background: rgba(30, 20, 60, .82);
  border: 1.5px solid rgba(167, 139, 250, .4);
  box-shadow: 0 10px 26px rgba(8, 4, 22, .6); cursor: pointer;
  transition: transform .25s, box-shadow .25s, color .25s;
}
.bgm-fab:hover { transform: translateY(-3px) scale(1.05); }
.bgm-fab.playing {
  color: #7dd3fc; border-color: rgba(125, 211, 252, .6);
  box-shadow: 0 0 0 4px rgba(125, 211, 252, .12), 0 10px 26px rgba(8, 4, 22, .6);
  animation: bgmPulse 2.4s ease-in-out infinite;
}
@keyframes bgmPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(125,211,252,.1), 0 10px 26px rgba(8,4,22,.6); }
  50% { box-shadow: 0 0 0 9px rgba(125,211,252,.05), 0 10px 26px rgba(8,4,22,.6); }
}
.file-row .fr-status + .btn { margin-left: 8px; align-self: center; }
@media (max-width: 820px) {
  .bgm-fab { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
}

/* ============================================================
   幻灯片模式选择器
   ============================================================ */
.mode-picker-root { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; }
.mp-backdrop { position: absolute; inset: 0; background: rgba(8,4,18,.62); opacity: 0; transition: opacity .26s; }
.mode-picker { position: relative; width: 100%; max-width: 540px; background: linear-gradient(160deg,#1d1344,#130c2e); border-radius: 26px 26px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border: 1px solid rgba(167,139,250,.28); transform: translateY(100%); transition: transform .32s cubic-bezier(.22,1,.36,1); }
.mode-picker-root.show .mp-backdrop { opacity: 1; }
.mode-picker-root.show .mode-picker { transform: translateY(0); }
.mp-title { color: #fff; font-size: 19px; font-weight: 800; text-align: center; }
.mp-sub { color: var(--ink-soft); font-size: 13px; text-align: center; margin: 6px 0 15px; }
.mp-item { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 14px 18px; border-radius: 16px; background: rgba(99,102,241,.15); border: 1px solid rgba(139,92,246,.28); margin-bottom: 10px; transition: transform .18s, background .18s; }
.mp-item:active { transform: scale(.97); background: rgba(99,102,241,.32); }
.mp-label { color: #fff; font-size: 16px; font-weight: 800; }
.mp-desc { color: var(--ink-soft); font-size: 12.5px; }
.mp-cancel { width: 100%; padding: 13px; border-radius: 14px; color: #fff; background: rgba(255,255,255,.09); font-weight: 700; margin-top: 4px; }

/* ============================================================
   竖滑灯箱（抖音式）
   ============================================================ */
.lightbox.lbf { display: block; background: #06030f; }
.lbf .lbf-close { position: absolute; z-index: 20;
  top: calc(12px + env(safe-area-inset-top)); right: 14px; left: auto;
  width: 46px; height: 46px; cursor: pointer; background: rgba(0,0,0,.55);
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; }
.lbf .lbf-close:active { transform: scale(.9); }
.lbf-viewport { position: absolute; inset: 0; overflow: hidden; }
.lbf-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 70px 10px 38vh; transition: transform .42s cubic-bezier(.22,1,.36,1); will-change: transform; }
.lbf-slide.no-anim { transition: none; }
.lbf-media { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 12px;
  box-shadow: 0 14px 50px rgba(0,0,0,.55); object-fit: contain; background: #000; }
video.lbf-media { width: 100%; }
.lbf-count { position: absolute; top: 20px; left: 18px; z-index: 8; color: rgba(255,255,255,.85);
  font-size: 13px; background: rgba(0,0,0,.42); padding: 6px 14px; border-radius: 999px; }
.lbf-hint { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 8;
  color: rgba(255,255,255,.7); font-size: 12px; background: rgba(0,0,0,.38); padding: 5px 14px;
  border-radius: 999px; animation: lbfHint 4.2s ease forwards; }
@keyframes lbfHint { 0%,55% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } }
.lbf-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; max-height: 46vh; overflow-y: auto;
  padding: 28px 18px calc(16px + env(safe-area-inset-bottom)); color: #fff;
  background: linear-gradient(to top, rgba(6,3,15,.97) 55%, rgba(6,3,15,.78) 80%, transparent); }
.lbf-title-row { display: flex; align-items: center; gap: 10px; }
.lbf-title-row .lb-title { flex: 1; font-size: 17px; }
.lbf-panel .lb-meta { margin: 4px 0 10px; }
.lbf-panel .lb-comment-form input { background: rgba(255,255,255,.12); }

/* ============================================================
   幻灯片模式变体
   ============================================================ */
.ss-mode-lively .ss-slide { transition: opacity .45s ease, transform .5s cubic-bezier(.34,1.5,.64,1); }
.ss-mode-lively .ss-slide:not(.in):not(.drag):not(.drag-anim) { opacity: 0; transform: scale(.8) rotate(-4deg); }
.ss-mode-fade .ss-slide { transition: opacity 1.05s ease; transform: none; }

/* ============================================================
   上传：改名 / 移除 / 确认
   ============================================================ */
.fr-name-input { width: 100%; font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid rgba(139,92,246,.45); background: rgba(99,102,241,.14); color: var(--ink); outline: none; }
.fr-name-input:focus { border-color: #8b5cf6; background: rgba(99,102,241,.22); }
.fr-remove { flex-shrink: 0; align-self: center; color: var(--ink-soft); padding: 8px; border-radius: 50%;
  transition: color .15s, background .15s; }
.fr-remove:hover { color: #fb7185; background: rgba(251,113,133,.1); }
.ready-btns { display: flex; gap: 12px; margin-top: 16px; }
.ready-btns .btn { flex: 1; }

@media (max-width: 600px) {
  .lbf-slide { padding: 66px 8px 42vh; }
  .lbf-panel { max-height: 50vh; }
}

/* ============================================================
   情侣小游戏
   ============================================================ */
.games-tabs { display: flex; gap: 8px; background: var(--card); border-radius: 999px; padding: 6px;
  margin-bottom: 16px; border: 1px solid rgba(167,139,250,.2); }
.games-tabs button { flex: 1; padding: 11px; border-radius: 999px; color: var(--ink-soft);
  font-weight: 700; font-size: 14px; transition: all .2s; }
.games-tabs button.active { background: linear-gradient(90deg,#8b5cf6,#6366f1); color: #fff;
  box-shadow: 0 6px 16px rgba(139,92,246,.4); }

.quiz-tip { background: rgba(99,102,241,.14); border: 1px solid rgba(139,92,246,.3); border-radius: 14px;
  padding: 14px 16px; color: var(--ink); font-size: 13.5px; line-height: 1.7; margin-bottom: 14px; }
.quiz-summary { display: flex; align-items: center; gap: 16px;
  background: linear-gradient(120deg,rgba(139,92,246,.25),rgba(34,211,238,.18));
  border: 1px solid rgba(167,139,250,.35); border-radius: 18px; padding: 16px 20px; margin-bottom: 16px; }
.quiz-summary.perfect { box-shadow: 0 0 30px rgba(139,92,246,.35); }
.qs-num { font-size: 30px; font-weight: 900; color: #a78bfa; flex-shrink: 0; }
.qs-text { font-size: 14px; line-height: 1.6; color: var(--ink); }
.quiz-card { background: var(--card); border: 1px solid rgba(167,139,250,.2); border-radius: 18px;
  padding: 16px 18px; margin-bottom: 14px; }
.quiz-q { font-size: 15px; font-weight: 800; margin-bottom: 12px; color: #fff; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.quiz-opt { position: relative; text-align: left; padding: 11px 40px 11px 14px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12); color: var(--ink);
  font-size: 13.5px; transition: all .18s; }
.quiz-opt:active { transform: scale(.96); }
.quiz-opt.mine { border-color: #8b5cf6; background: rgba(139,92,246,.22); }
.quiz-opt.partner { border-color: #22d3ee; }
.quiz-opt.match { border-color: #34d399; background: rgba(52,211,153,.2); }
.opt-tag { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 11px;
  font-weight: 800; background: #8b5cf6; color: #fff; border-radius: 999px; padding: 2px 8px; }
.opt-tag.pt { background: #22d3ee; color: #06283d; }
.quiz-opt.match .opt-tag { background: #34d399; color: #052e22; }
.quiz-result { margin-top: 11px; font-size: 13px; padding: 9px 13px; border-radius: 10px; }
.quiz-result.ok { background: rgba(52,211,153,.16); color: #6ee7b7; }
.quiz-result.diff { background: rgba(251,191,36,.14); color: #fcd34d; }
.quiz-wait { margin-top: 11px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 420px) { .quiz-options { grid-template-columns: 1fr; } }

.catch-card { background: var(--card); border: 1px solid rgba(167,139,250,.2); border-radius: 20px; padding: 14px; }
.catch-hud { display: flex; justify-content: space-between; padding: 4px 8px 12px; color: var(--ink); font-size: 14px; }
.catch-hud b { color: #a78bfa; font-size: 18px; margin-left: 4px; }
.catch-field { position: relative; height: 58vh; min-height: 380px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg,rgba(34,211,238,.08),rgba(139,92,246,.12));
  border: 1px solid rgba(167,139,250,.2); touch-action: none; }
.catch-start, .catch-over { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px;
  background: rgba(10,6,24,.55); z-index: 6; }
.catch-start h3, .catch-over h3 { color: #fff; font-size: 19px; }
.catch-start p { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.catch-basket { position: absolute; bottom: 14px; width: 64px; height: 52px; border-radius: 14px 14px 20px 20px;
  background: linear-gradient(180deg,#8b5cf6,#6366f1); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(99,102,241,.5); z-index: 5; }
.fall-item { position: absolute; will-change: transform; }
.fall-item.popped { transition: transform .25s, opacity .25s; opacity: 0; }
.catch-field.shake { animation: cfShake .35s; }
@keyframes cfShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.co-score { font-size: 42px; font-weight: 900; color: #a78bfa; }

.fortune-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 0 30px; }
.fortune-card { width: min(86vw,340px); height: 440px; perspective: 1200px; cursor: pointer; }
.fc-back, .fc-front { position: absolute; inset: 0; border-radius: 22px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center;
  background: linear-gradient(160deg,#2a1a5c,#1a1040); border: 1px solid rgba(167,139,250,.35);
  box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.fcb-text { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: 4px; }
.fcb-sub { color: var(--ink-soft); font-size: 13px; }
.fcf-title { color: #f0abfc; font-size: 20px; font-weight: 900; }
.fcf-text { color: var(--ink); font-size: 15px; line-height: 1.9; }
.fortune-card.drawn .fc-back { display: none; }

/* ============================================================
   相册：单击瓦片可靠打开（媒体元素不拦截手势）
   ============================================================ */
.wf-item img, .wf-item video { pointer-events: none; }

/* ============================================================
   主页：紧凑统计条
   ============================================================ */
.stat-strip { display: flex; align-items: stretch; padding: 18px 10px; }
.stat-strip .ss-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat-strip .ss-item + .ss-item { border-left: 1px solid rgba(167,139,250,.25); }
.stat-strip .num { font-size: 26px; font-weight: 900; line-height: 1.1; }
.stat-strip .num.purple { color: var(--violet); }
.stat-strip .num.teal { color: var(--moon-cyan); }
.stat-strip .lab { font-size: 12px; color: var(--ink-soft); }
@media (min-width: 700px) { .stat-strip .num { font-size: 32px; } .stat-strip .lab { font-size: 13px; } }

/* ============================================================
   主页：回忆长廊（照片由远到近发散）
   ============================================================ */
.tunnel-card { padding-bottom: 14px; }
.photo-tunnel { position: relative; height: 58vh; min-height: 360px; margin-top: 10px;
  border-radius: 16px; overflow: hidden; perspective: 720px; perspective-origin: 50% 50%;
  background: radial-gradient(ellipse at center, rgba(99,102,241,.22) 0%, rgba(11,7,24,.85) 62%, #06030f 100%);
  border: 1px solid rgba(167,139,250,.22); }
.pt-layer { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.pt-layer img { width: min(60vw, 320px); aspect-ratio: 4/3; object-fit: cover; border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 26px rgba(139,92,246,.35);
  border: 1px solid rgba(167,139,250,.45); display: block; }
.pt-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 13.5px; padding: 30px; text-align: center; line-height: 1.8; }

/* ============================================================
   长廊去框体（覆盖旧样式） + 天气动态背景
   ============================================================ */
.photo-tunnel { height: 60vh; min-height: 380px; margin-top: 14px;
  perspective: 720px; perspective-origin: 50% 50%;
  overflow: hidden; background: transparent; border: 0; border-radius: 0; }
.pt-layer img { border-radius: 14px; border: 0;
  box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 0 22px rgba(139,92,246,.22); }

.weather-card { position: relative; overflow: hidden; transition: background .6s ease; }
.weather-card > * { position: relative; z-index: 1; }
.weather-card::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .6; }
.wc-sun { background: linear-gradient(150deg,#3a2f1a,#1c2750); }
.wc-sun::before { background: radial-gradient(circle at 82% 16%, rgba(255,183,3,.55), transparent 55%); opacity: .9; }
.wc-sun-cloud, .wc-cloud-sun { background: linear-gradient(150deg,#2b3350,#1b2240); }
.wc-cloud { background: linear-gradient(150deg,#2c3346,#181d30); }
.wc-fog { background: linear-gradient(150deg,#3a4052,#20262f); }
.wc-fog::before { background: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 14px, transparent 14px 34px);
  animation: fogDrift 6s ease-in-out infinite alternate; }
@keyframes fogDrift { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.wc-drizzle, .wc-rain, .wc-showers { background: linear-gradient(150deg,#1d3a63,#101c3a); }
.wc-drizzle::before, .wc-rain::before, .wc-showers::before {
  background: repeating-linear-gradient(115deg, rgba(125,211,252,.38) 0 2px, transparent 2px 16px);
  animation: rainFall .7s linear infinite; }
@keyframes rainFall { from { background-position: 0 0; } to { background-position: -20px 40px; } }
.wc-snow { background: linear-gradient(150deg,#33507a,#1b2c4d); }
.wc-snow::before { background: radial-gradient(circle, rgba(255,255,255,.8) 1.5px, transparent 2px);
  background-size: 26px 26px; animation: snowFall 2.4s linear infinite; }
@keyframes snowFall { from { background-position: 0 0; } to { background-position: 12px 40px; } }
.wc-storm { background: linear-gradient(150deg,#2a2150,#120e2e); animation: stormFlash 5s infinite; }
.wc-storm::before { background: repeating-linear-gradient(115deg, rgba(125,211,252,.32) 0 2px, transparent 2px 18px);
  animation: rainFall .6s linear infinite; }
@keyframes stormFlash { 0%,92%,100% { box-shadow: none; } 94% { box-shadow: inset 0 0 80px rgba(255,255,255,.35); } }
.wc-wind { background: linear-gradient(150deg,#1f4a52,#122c3a); }
.wc-wind::before { background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(125,211,252,.3) 22px 60px);
  animation: windBlow 1.1s linear infinite; }
@keyframes windBlow { from { background-position: 0 0; } to { background-position: 80px 0; } }

/* ============================================================
   问候框：照片背景 / 天气渐变 / 右上角天气
   ============================================================ */
.home-hero { border-radius: 20px; padding: 16px 18px; min-height: 168px; cursor: pointer; }
.home-hero h2, .home-hero .hero-sub, .home-hero .hero-advice, .home-hero .hero-chips
  { position: relative; z-index: 2; }
.home-hero h2 { margin-right: 96px; }
.hero-bg-layer { position: absolute; inset: 0; z-index: 0; opacity: 0;
  background-size: cover; background-position: center; transition: opacity .5s ease; border-radius: 22px; }
.hero-bg-layer.show { opacity: 1; }
.hero-bg-layer.show::after { content: ''; position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(120deg, rgba(8,4,20,.66), rgba(8,4,20,.3)); }

.hero-weather { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex;
  flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.hw-icon svg { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.hw-temp { font-size: 26px; font-weight: 900; line-height: 1.05; }
.hw-desc { font-size: 11.5px; opacity: .92; }
.hw-loc { font-size: 11px; opacity: .85; display: flex; align-items: center; gap: 3px; margin-top: 2px; }

.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* 天气渐变（覆盖装饰圆，::before 作为天气动效层） */
.home-hero[class*=" hb-"]::before { width: 100%; height: 100%; border-radius: 22px;
  top: 0; right: 0; background: none; }
.hb-sun { background: linear-gradient(135deg,#4a3a17,#2a3a6b 70%,#1c2c55); }
.hb-sun::before { background: radial-gradient(circle at 88% 14%, rgba(255,183,3,.6), transparent 46%); }
.hb-sun-cloud, .hb-cloud-sun { background: linear-gradient(135deg,#3a4266,#232c52 70%,#1b2444); }
.hb-sun-cloud::before, .hb-cloud-sun::before {
  background: radial-gradient(circle at 86% 16%, rgba(255,210,63,.38), transparent 44%); }
.hb-cloud { background: linear-gradient(135deg,#353c4e,#232a3c 70%,#181d30); }
.hb-cloud::before { background: radial-gradient(circle at 82% 20%, rgba(200,210,230,.22), transparent 50%); }
.hb-fog { background: linear-gradient(135deg,#424858,#2a303c 70%,#20262f); }
.hb-fog::before { background: repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 16px, transparent 16px 38px);
  animation: fogDrift 6s ease-in-out infinite alternate; }
.hb-drizzle, .hb-rain, .hb-showers { background: linear-gradient(135deg,#24507e,#16335f 70%,#101c3a); }
.hb-drizzle::before, .hb-rain::before, .hb-showers::before {
  background: repeating-linear-gradient(115deg, rgba(125,211,252,.38) 0 2px, transparent 2px 18px);
  animation: rainFall .7s linear infinite; }
.hb-snow { background: linear-gradient(135deg,#3e5f8c,#27446b 70%,#1b2c4d); }
.hb-snow::before { background: radial-gradient(circle, rgba(255,255,255,.82) 1.5px, transparent 2px);
  background-size: 26px 26px; animation: snowFall 2.4s linear infinite; }
.hb-storm { background: linear-gradient(135deg,#352b60,#201a48 70%,#120e2e); animation: stormFlash 5s infinite; }
.hb-storm::before { background: repeating-linear-gradient(115deg, rgba(125,211,252,.34) 0 2px, transparent 2px 18px);
  animation: rainFall .6s linear infinite; }
.hb-wind { background: linear-gradient(135deg,#275b64,#18404c 70%,#122c3a); }
.hb-wind::before { background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(125,211,252,.32) 22px 62px);
  animation: windBlow 1.1s linear infinite; }
.home-hero.has-photo-bg { background: #0a0618; }

/* 问候框背景选择网格 */
.hero-pick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.hpg-item { border-radius: 10px; overflow: hidden; aspect-ratio: 1; border: 2px solid transparent; padding: 0; }
.hpg-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hpg-item:active { border-color: #7dd3fc; }

/* ============================================================
   照片滚动墙（两行横向无缝滚动，替代回忆长廊）
   ============================================================ */
.photo-wall { overflow: hidden; border-radius: 18px; display: flex; flex-direction: column;
  gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.pw-row { display: flex; width: max-content; animation-name: pwScroll;
  animation-timing-function: linear; animation-iteration-count: infinite; }
.pw-b { animation-direction: reverse; }
.pw-track { display: flex; gap: 10px; padding-right: 10px; }
.pw-item { flex: none; width: 128px; height: 88px; border-radius: 12px; overflow: hidden; padding: 0;
  border: 1px solid rgba(255,255,255,.12); }
.pw-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-wall:active .pw-row { animation-play-state: paused; }
@keyframes pwScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 760px) { .pw-item { width: 168px; height: 112px; } }

/* BGM 切歌按钮 + 曲名标签 */
.bgm-next-fab { position: fixed; right: 23px; bottom: 84px; z-index: 90; width: 40px; height: 40px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #a499cc; background: rgba(30,20,60,.72); border: 1.5px solid rgba(167,139,250,.3);
  cursor: pointer; transition: transform .2s; }
.bgm-next-fab:active { transform: scale(.9); }
.bgm-name-tag { position: fixed; right: 76px; bottom: 31px; z-index: 90; max-width: 44vw;
  padding: 9px 14px; border-radius: 20px; background: rgba(30,20,60,.84);
  border: 1px solid rgba(167,139,250,.3); color: #d8d0f5; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px); transition: .3s; pointer-events: none; }
.bgm-name-tag.show { opacity: 1; transform: none; }
@media (max-width: 820px) {
  .bgm-next-fab { right: 17px; bottom: calc(130px + env(safe-area-inset-bottom)); }
  .bgm-name-tag { right: 66px; bottom: calc(82px + env(safe-area-inset-bottom)); max-width: 50vw; }
}

/* ========== 紧凑动态字幕条 ========== */
.lyric-strip { position: relative; margin-top: 14px; min-height: 76px; border-radius: 18px;
  display: flex; align-items: center; gap: 13px; padding: 12px 16px; overflow: hidden;
  background: linear-gradient(120deg, rgba(40,22,74,.78), rgba(22,30,66,.78));
  border: 1px solid rgba(167,139,250,.28); }
.ls-heart { display: flex; color: #fb7185; animation: heartbeat 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(251,113,133,.55)); flex: none; }
.ls-text { display: flex; flex-direction: column; gap: 2px; }
.ls-l1 { font-size: 12.5px; color: #a499cc; letter-spacing: 1.5px; }
.ls-l2 { font-size: 21px; font-weight: 900; color: #ede9fb; letter-spacing: 1px; }
.ls-l2 em { font-style: normal; color: #7dd3fc; text-shadow: 0 0 14px rgba(125,211,252,.7); }
.ls-punch .ls-l2 { animation: lyricPunch .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes lyricPunch { 0% { transform: scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes heartbeat { 0% { transform: scale(1); } 12% { transform: scale(1.3); } 24% { transform: scale(1); }
  38% { transform: scale(1.15); } 56% { transform: scale(1); } 100% { transform: scale(1); } }
#brandIcon { animation: heartbeat 1.6s ease-in-out infinite; }
.home-hero { animation: heroThump 1.4s ease-in-out infinite; }
@keyframes heroThump { 0%,100% { transform: scale(1); } 12% { transform: scale(1.012); }
  24% { transform: scale(1); } 38% { transform: scale(1.007); } 56% { transform: scale(1); } }

/* ========== 音乐节奏跳动条 ========== */
.music-eq { display: none; }
@media (max-width: 820px) {
  .music-eq { display: flex; align-items: flex-end; gap: 3px; position: fixed;
    left: 50%; transform: translateX(-50%); pointer-events: none;
    bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 61; height: 17px; padding: 0 8px; }
  .music-eq span { width: 3px; height: 17px; border-radius: 2px; flex: none;
    background: linear-gradient(#7dd3fc, #8b5cf6); transform-origin: bottom; transform: scaleY(.22); }
  .music-eq.dance span { animation: eqBounce .72s ease-in-out infinite; }
  .music-eq span:nth-child(2n) { animation-duration: .58s; }
  .music-eq span:nth-child(3n) { animation-duration: .86s; }
  .music-eq span:nth-child(1){animation-delay:-.6s}.music-eq span:nth-child(2){animation-delay:-.2s}
  .music-eq span:nth-child(3){animation-delay:-.4s}.music-eq span:nth-child(4){animation-delay:-.1s}
  .music-eq span:nth-child(5){animation-delay:-.5s}.music-eq span:nth-child(6){animation-delay:-.3s}
  .music-eq span:nth-child(7){animation-delay:-.7s}.music-eq span:nth-child(8){animation-delay:-.15s}
  .music-eq span:nth-child(9){animation-delay:-.45s}.music-eq span:nth-child(10){animation-delay:-.25s}
  .music-eq span:nth-child(11){animation-delay:-.55s}.music-eq span:nth-child(12){animation-delay:-.35s}
  .music-eq span:nth-child(13){animation-delay:-.65s}.music-eq span:nth-child(14){animation-delay:-.05s}
  .music-eq span:nth-child(15){animation-delay:-.5s}
}
@keyframes eqBounce { 0%,100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

/* ========== 全局上传进度胶囊 + 角标 ========== */
.up-global-pill { position: fixed; left: 50%; transform: translateX(-50%) translateY(18px);
  bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center;
  gap: 9px; padding: 9px 15px; border-radius: 24px; background: rgba(26,16,50,.93);
  border: 1px solid rgba(167,139,250,.4); color: #d8d0f5; font-size: 12px; font-weight: 700;
  opacity: 0; transition: .3s; box-shadow: 0 10px 26px rgba(6,3,18,.6); }
.up-global-pill.show { opacity: 1; transform: translateX(-50%); }
.ugp-ico { color: #7dd3fc; display: flex; }
.ugp-bar { width: 92px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.ugp-bar i { display: block; height: 100%; background: linear-gradient(90deg,#7dd3fc,#8b5cf6); transition: width .2s; }
@media (min-width: 821px) { .up-global-pill { bottom: 26px; } }
.bn-item { position: relative; }
.bn-badge { position: absolute; top: 1px; right: calc(50% - 24px); min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; }
.pulse-btn { animation: pulseBtn 1.6s ease-in-out infinite; }
@keyframes pulseBtn { 0%,100% { box-shadow: 0 0 0 0 rgba(125,211,252,.5); }
  50% { box-shadow: 0 0 0 10px rgba(125,211,252,0); } }

@media (prefers-reduced-motion: reduce) {
  #brandIcon, .ls-heart, .home-hero, .pulse-btn, .music-eq.dance span { animation: none !important; }
}

/* ========== 上传后完善信息 ========== */
.ud-item { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(167,139,250,.15); }
.ud-item:last-child { border-bottom: none; }
.ud-media { flex: none; width: 106px; }
.ud-media img, .ud-media video { width: 106px; height: 80px; object-fit: cover;
  border-radius: 12px; background: #1a1236; border: 1px solid rgba(167,139,250,.2); }
.ud-fields { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ud-title { padding: 9px 12px; border-radius: 11px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(167,139,250,.25); color: #ede9fb; font-size: 13.5px; font-weight: 700; }
.ud-story { padding: 9px 12px; border-radius: 11px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(167,139,250,.2); color: #d8d0f5; font-size: 12.5px; resize: none; font-family: inherit; }
.ud-state { font-size: 11px; color: #a499cc; }
.ud-state.ok { color: #7dd3fc; }
.ud-state.fail { color: #fb7185; }

/* ========== 呼吸加强 + 两侧光晕 ========== */
.home-hero { animation: heroThumpStrong 1.4s ease-in-out infinite; }
@keyframes heroThumpStrong {
  0%,100% { transform: scale(1); }
  12% { transform: scale(1.028); }
  24% { transform: scale(.997); }
  38% { transform: scale(1.017); }
  56% { transform: scale(1); }
}
.hero-halo { position: absolute; top: 50%; width: 140px; height: 200px; z-index: 0;
  border-radius: 50%; filter: blur(28px); pointer-events: none;
  transform: translateY(-50%); animation: haloBreath 1.4s ease-in-out infinite; }
.hero-halo-l { left: -56px; background: radial-gradient(circle, rgba(125,211,252,.6), transparent 70%); }
.hero-halo-r { right: -56px; background: radial-gradient(circle, rgba(167,139,250,.65), transparent 70%);
  animation-delay: .7s; }
@keyframes haloBreath {
  0%,100% { opacity: .32; transform: translateY(-50%) scale(.82); }
  50% { opacity: .9; transform: translateY(-50%) scale(1.15); }
}

/* ========== 节奏条铺满底部 ========== */
@media (max-width: 820px) {
  .music-eq { left: 0; right: 0; transform: none; gap: 2.5px; height: 16px; padding: 0 6px;
    justify-content: stretch; }
  .music-eq span { flex: 1; width: auto; height: 16px; border-radius: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero, .hero-halo { animation: none !important; }
}

/* ========== 展开的上传进度卡 ========== */
.ugp-expand { display: flex; color: #a499cc; flex: none; }
.up-global-card { position: fixed; z-index: 71; display: flex; flex-direction: column;
  background: rgba(22,14,44,.97); border: 1px solid rgba(167,139,250,.4); border-radius: 18px;
  box-shadow: 0 14px 34px rgba(6,3,18,.7); overflow: hidden; max-height: 0;
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: .28s; }
.up-global-card.show { opacity: 1; transform: none; pointer-events: auto; max-height: 62vh; }
.uc-head { display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid rgba(167,139,250,.18);
  color: #d8d0f5; font-size: 13px; font-weight: 800; }
.uc-collapse { color: #a499cc; background: none; border: none; display: flex; }
.uc-body { overflow-y: auto; max-height: 40vh; padding: 4px 10px; }
.uc-row { display: flex; align-items: center; gap: 9px; padding: 8px 4px;
  border-bottom: 1px solid rgba(167,139,250,.1); }
.uc-row:last-child { border-bottom: none; }
.uc-thumb { flex: none; width: 46px; }
.uc-thumb img, .uc-thumb video { width: 46px; height: 34px; object-fit: cover;
  border-radius: 8px; background: #1a1236; }
.uc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.uc-name { font-size: 12px; color: #e2dcf5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-prog { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.uc-prog i { display: block; height: 100%; background: linear-gradient(90deg,#7dd3fc,#8b5cf6); transition: width .15s; }
.uc-right { flex: none; display: flex; align-items: center; gap: 5px; }
.uc-pct { font-size: 11px; color: #a499cc; min-width: 36px; text-align: right; }
.uc-pct.ok { color: #7dd3fc; } .uc-pct.fail { color: #fb7185; }
.uc-x { color: #a499cc; background: none; border: none; display: flex; padding: 2px; }
.uc-x:active { color: #fb7185; }
.uc-foot { padding: 9px 12px; border-top: 1px solid rgba(167,139,250,.18); display: flex; justify-content: flex-end; }
@media (max-width: 820px) {
  .up-global-card { left: 10px; right: 10px; bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (min-width: 821px) {
  .up-global-card { right: 22px; bottom: 80px; width: 332px; }
}

/* ========== 隐藏滚动条（保留滚动） ========== */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .uc-body::-webkit-scrollbar,
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ========== 平铺留言板 ========== */
.msg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 11px; }
.mt-card { border-radius: 15px; padding: 12px 12px 10px; display: flex; flex-direction: column;
  gap: 8px; min-height: 118px; cursor: pointer; position: relative; overflow: hidden;
  border: 1px solid rgba(167,139,250,.25);
  box-shadow: 0 8px 20px rgba(6,3,18,.45);
  transition: transform .22s, box-shadow .22s; }
.mt-card:active { transform: scale(.965); }
.mt-preview { font-size: 13px; line-height: 1.55; color: #e7e1f8; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mt-foot { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.mt-who { font-size: 11px; color: #c7bdee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-time { font-size: 10px; color: #9d92c4; flex: none; }
.mt-badges { display: flex; justify-content: space-between; align-items: center; }
.mt-rep { font-size: 10.5px; color: #7dd3fc; background: rgba(125,211,252,.13);
  padding: 3px 8px; border-radius: 999px; }
.mt-rep.none { color: #9d92c4; background: rgba(255,255,255,.07); }
.mt-badges .m-del { color: #b6a9dd; display: flex; }
.mt-badges .m-del:active { color: #fb7185; }

/* ========== 楼中楼弹窗 ========== */
.thread-mask { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(6,3,18,.62); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .25s; }
.thread-mask.show { opacity: 1; pointer-events: auto; }
.thread-modal { width: 100%; max-width: 540px; height: 82vh; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #1a1138, #140e30); border-radius: 22px 22px 0 0;
  border: 1px solid rgba(167,139,250,.3); border-bottom: none; overflow: hidden;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.22,.9,.3,1); }
.thread-mask.show .thread-modal { transform: none; }
.tm-head { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid rgba(167,139,250,.16); }
.tm-title { font-weight: 800; color: #ddd5f6; font-size: 15px; }
.tm-close { color: #a499cc; display: flex; }
.tm-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.tb-row { display: flex; }
.tb-row.mine { justify-content: flex-end; }
.tb-bubble { max-width: 82%; border-radius: 15px; padding: 9px 12px;
  background: rgba(50,38,92,.85); border: 1px solid rgba(167,139,250,.18); }
.tb-row.mine .tb-bubble { background: rgba(39,64,96,.85); border-color: rgba(125,211,252,.25); }
.tb-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.tb-name { font-size: 11px; color: #b6a9dd; }
.tb-time { font-size: 10px; color: #8f84b5; }
.tb-del { color: #8f84b5; display: flex; margin-left: auto; }
.tb-del:active { color: #fb7185; }
.tb-text { font-size: 13.5px; line-height: 1.6; color: #e9e4f8; white-space: pre-wrap; word-break: break-word; }
.tm-foot { display: flex; gap: 9px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(167,139,250,.16); background: rgba(14,9,32,.9); }
.tm-foot textarea { flex: 1; resize: none; max-height: 96px; border-radius: 14px;
  padding: 10px 13px; background: rgba(255,255,255,.07); color: var(--ink);
  border: 1px solid rgba(167,139,250,.25); font-family: inherit; font-size: 13.5px; }
.tm-foot .btn { flex: none; }
@media (min-width: 821px) {
  .thread-mask { align-items: center; }
  .thread-modal { height: 76vh; border-radius: 22px; border-bottom: 1px solid rgba(167,139,250,.3);
    transform: translateY(24px) scale(.98); }
  .thread-mask.show .thread-modal { transform: none; }
}

/* ========== 改名对话框（手机端） ========== */
.rename-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 120;
  background: rgba(6,3,18,.62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  opacity: 0; transition: opacity .2s; }
.rename-mask.show { opacity: 1; }
.rename-dialog { width: 100%; max-width: 380px;
  background: linear-gradient(160deg, #1d1440, #150f32);
  border: 1px solid rgba(167,139,250,.3); border-radius: 18px; padding: 18px;
  box-shadow: 0 18px 40px rgba(6,3,18,.7);
  transform: scale(.94); transition: transform .22s; }
.rename-mask.show .rename-dialog { transform: none; }
.rd-title { font-weight: 800; color: #ddd5f6; margin-bottom: 13px; font-size: 15px; }
#rdInput { width: 100%; height: 46px; font-size: 16px; padding: 0 14px;
  box-sizing: border-box; border-radius: 12px; color: #fff;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(167,139,250,.35); }
.rd-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 15px; }

/* ========== 选中确认面板 ========== */
.pick-modal { height: 78vh; }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  align-content: start; overflow-y: auto; }
.pg-item { position: relative; border-radius: 11px; overflow: hidden;
  background: #1a1236; aspect-ratio: 1; }
.pg-item img, .pg-item video { width: 100%; height: 100%; object-fit: cover; }
.pg-name { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; color: #fff;
  padding: 12px 5px 4px; background: linear-gradient(transparent, rgba(0,0,0,.78));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-foot { justify-content: space-between; gap: 9px; }
.pick-foot .btn { flex: 1; }

/* ========== 完善页删除按钮 ========== */
.ud-item { position: relative; }
.ud-del-x { position: absolute; top: 8px; right: 8px; z-index: 5; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(10,6,24,.68); border: 1px solid rgba(251,113,133,.55);
  color: #fb7185; display: flex; align-items: center; justify-content: center; padding: 0; }
.ud-del-x:active { transform: scale(.9); }

/* ========== 手机端巡检修复 ========== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table th, .data-table td { white-space: nowrap; padding: 8px 10px; }
.data-table td:last-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* ========== 朋友圈式小纸条 ========== */
.mq-composer { margin-bottom: 18px; }
.mq-c-head { display: flex; gap: 12px; }
.mq-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  box-shadow: 0 4px 12px rgba(99,102,241,.35); user-select: none; }
.mq-avatar.av-baobei { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.mq-avatar.av-baba { background: linear-gradient(135deg, #38bdf8, #6366f1); }
.mq-avatar.sm { width: 32px; height: 32px; font-size: 14px; box-shadow: none; }
.mq-c-right { flex: 1; min-width: 0; position: relative; }
.mq-c-right > textarea { width: 100%; padding: 12px 14px; border-radius: 16px;
  background: rgba(16,10,32,.65); border: 1px solid rgba(167,139,250,.28);
  color: var(--ink); outline: none; resize: none; font-size: 14px; font-family: inherit; line-height: 1.6; }
.mq-c-right > textarea:focus { border-color: #8b5cf6; }
.mq-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mq-tool { background: transparent; border: none; color: #b6a9dd; display: flex; padding: 4px; cursor: pointer; }
.mq-tool:active { color: #8b5cf6; }
.mq-hint { font-size: 11.5px; color: var(--ink-soft); }
.mq-spacer { flex: 1; }
.mq-send { padding: 8px 24px; }
.mq-img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mq-img-grid:empty { display: none; }
.mq-pick-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.mq-pick-item img { width: 100%; height: 100%; object-fit: cover; }
.mq-pick-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mq-emoji-panel { display: none; position: absolute; z-index: 40; left: 0; right: 0; bottom: calc(100% + 8px);
  max-height: 200px; overflow-y: auto; padding: 10px; border-radius: 16px;
  background: #1b1340; border: 1px solid rgba(167,139,250,.3);
  grid-template-columns: repeat(8, 1fr); gap: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.mq-emoji-panel.show { display: grid; }
.mq-emoji { font-size: 22px; text-align: center; padding: 4px; border-radius: 10px; cursor: pointer; line-height: 1.2; }
.mq-emoji:active { background: rgba(139,92,246,.25); }

.mq-feed { display: flex; flex-direction: column; gap: 14px; }
.mq-card { display: flex; gap: 12px; padding: 14px; border-radius: 18px;
  background: var(--card); border: 1px solid rgba(167,139,250,.2);
  box-shadow: 0 10px 26px rgba(6,3,18,.4); }
.mq-body { flex: 1; min-width: 0; }
.mq-name { font-size: 14px; font-weight: 800; color: #c4b5fd; }
.mq-to { font-size: 12px; font-weight: 500; color: #8f84b5; margin-left: 4px; }
.mq-text { margin-top: 5px; font-size: 14px; line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; }
.mq-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.mq-time { font-size: 11px; color: #8f84b5; white-space: nowrap; }
.mq-acts { display: flex; gap: 8px; }
.mq-act { display: inline-flex; align-items: center; gap: 4px; background: rgba(125,211,252,.1);
  color: #9dccf2; border: none; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; cursor: pointer; }
.mq-act.mq-del { background: rgba(251,113,133,.12); color: #fda4af; }
.mq-act:active { filter: brightness(1.2); }

.mq-photos { margin-top: 10px; display: grid; gap: 5px; }
.mq-photos.g1 { grid-template-columns: minmax(0, 220px); }
.mq-photos.g1 .mq-ph { aspect-ratio: auto; }
.mq-photos.g1 img { max-height: 280px; width: 100%; height: auto; }
.mq-photos.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 340px; }
.mq-photos.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 380px; }
.mq-ph { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.05); cursor: pointer; }
.mq-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mq-viewer { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; }
.mq-v-stage { position: relative; }
.mq-v-stage img { max-width: 96vw; max-height: 88vh; border-radius: 10px; object-fit: contain; }
.mq-v-close { position: fixed; top: 18px; right: 20px; z-index: 2; color: #fff; cursor: pointer; }
.mq-v-count { position: fixed; top: 22px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 13px; pointer-events: none; }

.tb-row { gap: 8px; align-items: flex-end; }
.tb-row.mine .mq-avatar { order: 2; }
.tb-row.mine .tb-bubble { order: 1; }
.tb-root { background: rgba(59,45,110,.92) !important; }
.tb-photos { margin-top: 6px; }
.tm-foot-msg { position: relative; flex-wrap: wrap; }
.tm-foot-msg .mq-emoji-panel { bottom: calc(100% + 4px); max-height: 170px; }
.tm-emoji-btn { flex: none; color: #b6a9dd; background: none; border: none; cursor: pointer; }
@media (max-width: 520px) {
  .mq-emoji-panel { grid-template-columns: repeat(7, 1fr); }
}