/* ============================================================
   Remember 铭记 · SPA 全局样式（Vue3 + Tailwind 补充）
   ============================================================ */

/* 卡片悬浮 */
.rm-card { background:#fff; border:1px solid #E9E5DD; border-radius:14px; }
.rm-hover { transition: all .2s ease; }
.rm-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(38,34,46,.08); border-color:#C9C2EA; }

/* 金色渐变头像 */
.rm-avatar { display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-family:Georgia,serif; font-weight:700; flex-shrink:0; }
.g-maria{background:linear-gradient(150deg,#8E4E8C,#3B6FB5)}
.g-qian{background:linear-gradient(150deg,#B3442E,#2E5B8A)}
.g-da{background:linear-gradient(150deg,#7A6B4D,#4A3F28)}
.g-beethoven{background:linear-gradient(150deg,#3E3B46,#8A6B2F)}
.g-shake{background:linear-gradient(150deg,#5E3B68,#B05C3E)}
.g-ina{background:linear-gradient(150deg,#B0395A,#2E7D6B)}
.g-yuan{background:linear-gradient(150deg,#3F7A44,#8A6B2F)}
.g-tu{background:linear-gradient(150deg,#B05C3E,#3B6FB5)}
.g-mo{background:linear-gradient(150deg,#4A4A4A,#7A6B4D)}
.g-eileen{background:linear-gradient(150deg,#2E7D6B,#B0395A)}
.g-rose{background:linear-gradient(150deg,#C25B7E,#8A4A6E)}
.g-teal{background:linear-gradient(150deg,#0F6E56,#2E7D6B)}
.g-brand{background:linear-gradient(150deg,#4C4499,#6B63B5)}

/* 领域渐变卡 */
.grad-card { background:linear-gradient(150deg,#4C4499,#6B63B5); }

/* 标签 */
.rm-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; font-size:11px; line-height:1.6; }
.rm-tag-pri { background:#EFEDFA; color:#3A3480; }
.rm-tag-gold { background:#F6EEDD; color:#8A6520; }
.rm-tag-teal { background:#E4F2EC; color:#0F6E56; }
.rm-tag-rose { background:#FCEBEE; color:#B0395A; }
.rm-tag-gray { background:#F1EFE8; color:#8D8796; }
.rm-tag-red { background:#FAECEC; color:#A62C2C; }

/* 按钮 */
.rm-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:999px; font-size:13px; font-weight:500; cursor:pointer; transition:all .15s ease; border:none; white-space:nowrap; }
.rm-btn:active { transform: scale(.96); }
.rm-btn-brand { background:#4C4499; color:#fff; }
.rm-btn-brand:hover { background:#3A3480; }
.rm-btn-gold { background:#A67C2E; color:#fff; }
.rm-btn-gold:hover { background:#8A6520; }
.rm-btn-rose { background:#B0395A; color:#fff; }
.rm-btn-rose:hover { filter:brightness(1.08); }
.rm-btn-ghost { background:#EFEDFA; color:#3A3480; }
.rm-btn-line { background:#fff; border:1px solid #D9D4C8; color:#5C5668; }
.rm-btn-sm { padding:5px 12px; font-size:12px; }
.rm-btn-md { padding:8px 18px; }
.rm-btn-lg { padding:11px 26px; font-size:14px; }
.rm-btn-block { width:100%; }
.rm-btn:disabled { opacity:.5; cursor:not-allowed; }

/* 输入 */
.rm-input { width:100%; padding:10px 14px; border:1px solid #D9D4C8; border-radius:10px; font-size:14px; background:#fff; outline:none; transition:border .15s; }
.rm-input:focus { border-color:#4C4499; box-shadow:0 0 0 3px rgba(76,68,153,.12); }
.rm-input::placeholder { color:#A9A4B2; }

/* 空态 */
.rm-empty { text-align:center; padding:48px 16px; color:#8D8796; }
.rm-empty h4 { font-size:15px; color:#5C5668; margin:10px 0 4px; }
.rm-empty p { font-size:12px; }

/* 弹窗 */
.rm-modal-mask { position:fixed; inset:0; background:rgba(30,26,38,.5); z-index:60; display:flex; align-items:flex-end; justify-content:center; }
@media (min-width:640px){ .rm-modal-mask { align-items:center; } }
.rm-modal { background:#fff; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; border-radius:20px 20px 0 0; padding:20px; animation:slideUp .25s ease; }
@media (min-width:640px){ .rm-modal { border-radius:20px; } }
@keyframes slideUp { from{ transform:translateY(30px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* 分区标题 */
.rm-sec-head { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.rm-sec-head .ico { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.rm-sec-head h2 { font-family:Georgia,"Noto Serif SC",serif; font-size:17px; font-weight:600; }
.rm-sec-head .more { margin-left:auto; font-size:12px; color:#8D8796; }

/* 深色永念横幅 */
.mourn-banner { background:linear-gradient(120deg,#2E2A38,#46384A 60%,#5A4668); color:#fff; border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.mourn-banner b { font-family:Georgia,"Noto Serif SC",serif; font-size:16px; }
.mourn-banner span { font-size:11px; opacity:.8; margin-left:auto; }

/* 切换开关 */
.rm-switch { position:relative; width:40px; height:23px; border-radius:999px; background:#D9D4C8; cursor:pointer; transition:background .2s; flex-shrink:0; }
.rm-switch::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.rm-switch.on { background:#4C4499; }
.rm-switch.on::after { transform:translateX(17px); }

/* 水平滚动 */
.rm-scroll-x { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.rm-scroll-x > * { scroll-snap-align:start; flex-shrink:0; }

/* toast */
.rm-toast { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:80; background:#26222E; color:#fff; padding:10px 20px; border-radius:999px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.2); animation:slideDown .25s ease; }
@keyframes slideDown { from{ transform:translate(-50%,-16px); opacity:0 } to{ transform:translate(-50%,0); opacity:1 } }

/* 花瓣 */
.rm-petal { position:fixed; pointer-events:none; z-index:90; font-size:14px; animation:fall 1.6s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); opacity:0; } }