:root {
  --paper: #f6f4ef;
  --paper-deep: #ebe8e0;
  --ink: #252622;
  --muted: #7d7e77;
  --line: rgba(37, 38, 34, 0.12);
  --white: #fffefa;
  --coral: #f1775e;
  --coral-deep: #c65345;
  --yellow: #f0c95b;
  --blue: #a4c8ed;
  --green: #a9c9a5;
  --shadow: 0 24px 60px rgba(57, 48, 36, 0.08);
  --shadow-tight: 0 10px 28px rgba(57, 48, 36, 0.1);
  --display: "Iowan Old Style", "Baskerville", "Songti SC", serif;
  --sans: Inter, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
}

button, textarea, input { font: inherit; letter-spacing: 0; }
button { color: inherit; cursor: pointer; }
button:focus-visible, textarea:focus-visible { outline: 3px solid rgba(241, 119, 94, 0.34); outline-offset: 3px; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px minmax(520px, 1fr) 292px;
  overflow: hidden;
}

.sidebar {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px 19px 24px;
  background: #efede7;
  border-right: 1px solid var(--line);
}

.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--white); background: var(--ink); font-family: var(--display); font-size: 20px; border-radius: 50%; transform: rotate(-7deg); }
.brand-name { font-size: 13px; font-weight: 800; letter-spacing: 0.15em; }
.brand-subtitle { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; }

.pairing-card { margin-top: 39px; padding: 17px 16px 16px; border: 1px solid rgba(37, 38, 34, 0.11); background: rgba(255, 254, 250, 0.6); }
.pairing-card__topline { display: flex; align-items: center; gap: 7px; color: #5d7160; font-size: 10px; font-weight: 700; }
.pulse-dot, .online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #78a172; box-shadow: 0 0 0 4px rgba(120, 161, 114, 0.13); }.online-dot.is-away { background: #d2a44c; box-shadow: 0 0 0 4px rgba(210, 164, 76, 0.14); }.online-dot.is-offline { background: #a4a59e; box-shadow: 0 0 0 4px rgba(164, 165, 158, 0.13); }
.pairing-card__code { margin-top: 18px; font-family: var(--display); font-size: 27px; letter-spacing: 0.08em; }
.pairing-card__hint { margin-top: 5px; color: var(--muted); font-size: 10px; }

.nav-list { display: grid; gap: 5px; margin-top: 34px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 0 12px; color: #7d7d76; background: transparent; border: 0; text-align: left; font-size: 12px; font-weight: 700; }
.nav-item:hover { color: var(--ink); }
.nav-item.is-active { color: var(--ink); background: var(--white); box-shadow: var(--shadow-tight); }
.nav-icon { width: 16px; color: var(--coral); font-size: 19px; line-height: 1; text-align: center; }
.nav-count { margin-left: auto; color: var(--coral-deep); font-size: 10px; }

.sidebar-note { display: flex; gap: 10px; margin-top: auto; padding: 15px 13px; border-top: 1px solid var(--line); }
.sidebar-note__icon { color: var(--coral); font-size: 19px; }
.sidebar-note strong { display: block; font-size: 11px; }
.sidebar-note p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.user-profile { display: flex; align-items: center; gap: 9px; padding: 16px 7px 0; border-top: 1px solid var(--line); }
.user-profile__copy { min-width: 0; flex: 1; }
.user-profile__copy strong, .user-profile__copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-profile__copy strong { font-size: 11px; }
.user-profile__copy span { margin-top: 4px; color: var(--muted); font-size: 9px; }

.avatar { display: grid; place-items: center; border-radius: 50%; color: var(--ink); font-family: var(--display); font-weight: 700; flex: 0 0 auto; }
.avatar--partner { background: #d6a69a; }
.avatar--mine { background: #a4c8ed; }
.avatar--small { width: 31px; height: 31px; font-size: 13px; }
.avatar--large { width: 46px; height: 46px; font-size: 20px; }
.avatar--tiny { width: 29px; height: 29px; font-size: 13px; }

.icon-button { width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; color: #74756f; background: transparent; border: 0; font-size: 20px; line-height: 1; }
.icon-button:hover { color: var(--ink); background: rgba(37, 38, 34, 0.06); }
.text-button { padding: 2px 0; color: var(--coral-deep); background: none; border: 0; font-size: 10px; font-weight: 700; }
.text-button:hover { color: var(--ink); }

.chat-area { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.chat-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 20px 38px; border-bottom: 1px solid var(--line); }
.chat-person { display: flex; align-items: center; gap: 12px; }
.chat-person__name { font-family: var(--display); font-size: 21px; font-weight: 700; }
.verified-mark { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 2px; color: var(--white); background: var(--coral); border-radius: 50%; font-family: var(--sans); font-size: 10px; vertical-align: 2px; }
.chat-person__status { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--muted); font-size: 10px; }
.chat-actions { display: flex; gap: 4px; }

.chat-content { min-height: 0; flex: 1; overflow: auto; padding: 30px 7.2% 22px; scroll-behavior: smooth; }
.day-divider { display: flex; align-items: center; gap: 10px; margin: 0 auto 24px; color: #a3a39c; font-size: 10px; text-align: center; }
.day-divider::before, .day-divider::after { content: ""; width: 24px; height: 1px; background: var(--line); }
.day-divider span { white-space: nowrap; }
.connection-banner { display: flex; align-items: center; gap: 11px; max-width: 610px; margin: 0 auto 28px; padding: 12px 15px; background: rgba(255, 254, 250, 0.72); border: 1px solid var(--line); }
.connection-banner__icon { display: grid; place-items: center; width: 26px; height: 26px; color: var(--coral-deep); background: #fde6df; font-size: 18px; }
.connection-banner strong, .connection-banner span { display: block; }
.connection-banner strong { font-size: 10px; }
.connection-banner span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.connection-banner .text-button { margin-left: auto; white-space: nowrap; }

.message-stack { max-width: 610px; margin: 0 auto; display: grid; gap: 17px; }
.message-row { display: flex; align-items: flex-end; gap: 9px; animation: messageIn 260ms ease both; }
.message-row--mine { justify-content: flex-end; }
.message-block { max-width: min(78%, 390px); }
.message-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 3px; color: #a0a099; font-size: 9px; }
.message-meta strong { color: #6f716a; font-size: 10px; }
.message-meta--mine { justify-content: flex-end; margin: 0 3px 6px 0; }
.message-bubble { position: relative; padding: 12px 15px; font-size: 13px; line-height: 1.55; }
.message-bubble--partner { background: var(--white); border: 1px solid rgba(37, 38, 34, 0.08); }
.message-bubble--mine { color: #fffdfa; background: var(--ink); }
.message-bubble--large-emoji { padding: 0 2px; background: transparent; border: 0; font-size: 53px; line-height: 1; }
.message-bubble--large-emoji .message-tail { display: none; }
.message-tail { position: absolute; bottom: 0; width: 12px; height: 13px; }
.message-bubble--partner .message-tail { left: -5px; background: var(--white); clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.message-bubble--mine .message-tail { right: -5px; background: var(--ink); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.message-bubble--image { padding: 0; overflow: hidden; background: var(--white); border: 1px solid rgba(37, 38, 34, 0.08); }
.message-bubble--image img { display: block; width: 225px; height: 170px; object-fit: cover; }
.image-caption { display: block; padding: 9px 12px 11px; font-size: 11px; }
.message-bubble--audio { min-width: 215px; padding: 11px 13px; }.audio-heading { display: flex; align-items: center; gap: 9px; }.audio-heading__icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--coral-deep); background: #fde2db; font-size: 17px; }.audio-heading strong, .audio-heading small { display: block; }.audio-heading strong { font-size: 11px; }.audio-heading small { margin-top: 2px; color: var(--muted); font-size: 9px; }.message-bubble--audio audio { display: block; width: 100%; height: 31px; margin-top: 9px; }.audio-caption { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }.message-bubble--mine .audio-caption { color: rgba(255, 253, 250, 0.64); }

.moment-divider { display: flex; align-items: center; gap: 9px; margin: 6px 0 1px 38px; color: #a0a099; font-size: 9px; }
.moment-divider i { width: 28px; height: 1px; background: var(--line); }
.game-message { display: flex; max-width: 420px; gap: 13px; margin-left: 38px; padding: 15px 16px; background: #fcf0c9; border: 1px solid rgba(151, 120, 45, 0.18); }
.game-message__icon { display: grid; place-items: center; width: 31px; height: 31px; color: #725a19; background: #f1cc5e; font-size: 18px; }
.game-message__body { min-width: 0; flex: 1; }
.game-message__body .message-meta { margin: 0 0 8px; }
.game-message__title, .game-message__subtitle { display: block; }
.game-message__title { font-family: var(--display); font-size: 15px; line-height: 1.35; }
.game-message__subtitle { margin-top: 5px; color: #81734d; font-size: 10px; }
.game-message__cta { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 14px; padding: 0; color: #6e5518; background: transparent; border: 0; font-size: 10px; font-weight: 700; }
.game-message__cta span { font-size: 17px; }

.typing-row { display: flex; align-items: center; gap: 9px; max-width: 610px; margin: 18px auto 0; color: var(--muted); font-size: 9px; }
.typing-bubble { display: flex; align-items: center; gap: 4px; padding: 11px 13px; background: var(--white); border: 1px solid var(--line); }
.typing-bubble i { width: 4px; height: 4px; background: #94958e; border-radius: 50%; animation: typing 1s infinite ease-in-out; }
.typing-bubble i:nth-child(2) { animation-delay: 140ms; }.typing-bubble i:nth-child(3) { animation-delay: 280ms; }
.is-hidden { display: none !important; }

.composer-wrap { position: relative; padding: 0 7.2% 20px; }
.quick-reactions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; max-width: 610px; margin: 0 auto 7px; }
.miss-you-button { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; margin-right: auto; padding: 0 9px; color: var(--coral-deep); background: #fff0eb; border: 1px solid rgba(198, 83, 69, 0.15); font-size: 10px; font-weight: 700; transition: transform 150ms ease, background 150ms ease; }.miss-you-button span { font-family: var(--display); font-size: 18px; line-height: 1; }.miss-you-button:hover { background: #ffe2da; transform: translateY(-2px); }
.reaction-chip { width: 29px; height: 26px; padding: 0; background: transparent; border: 1px solid transparent; font-size: 16px; transition: transform 150ms ease, background 150ms ease; }
.reaction-chip:hover { transform: translateY(-3px) scale(1.1); background: rgba(255, 254, 250, 0.8); border-color: var(--line); }
.composer { max-width: 610px; min-height: 62px; display: flex; align-items: center; gap: 7px; margin: 0 auto; padding: 8px 9px 8px 11px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(57, 48, 36, 0.05); }
.composer-tool { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; color: #777871; background: transparent; border: 0; font-size: 22px; line-height: 1; }
.composer-tool:hover { color: var(--coral-deep); background: #fff0eb; }
.voice-button { width: 38px; font-size: 9px; font-weight: 800; }.voice-button.is-recording { color: var(--white); background: var(--coral); animation: recordingPulse 1.15s ease-in-out infinite; }
.composer-tool--emoji { font-family: var(--display); font-size: 25px; }
.composer-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.composer textarea { width: 100%; min-height: 32px; max-height: 100px; resize: none; padding: 8px 0; color: var(--ink); background: transparent; border: 0; outline: 0; line-height: 1.4; }
.composer textarea::placeholder { color: #a2a39c; }
.composer textarea:disabled { color: var(--muted); }.voice-status { width: 100%; display: flex; align-items: center; gap: 6px; color: var(--coral-deep); font-size: 9px; }.voice-status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); animation: recordingPulse 1s ease-in-out infinite; }.voice-status button { margin-left: auto; padding: 0 3px; color: var(--muted); background: transparent; border: 0; font-size: 15px; line-height: 1; }
.send-button { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: #fffefa; background: var(--coral); border: 0; font-size: 20px; transition: transform 150ms ease, background 150ms ease; }
.send-button:hover { background: var(--coral-deep); transform: translateY(-2px); }
.image-preview { position: relative; width: 42px; height: 42px; flex: 0 0 auto; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.image-preview__remove { position: absolute; top: -7px; right: -7px; width: 17px; height: 17px; display: grid; place-items: center; padding: 0; color: var(--white); background: var(--ink); border: 0; border-radius: 50%; font-size: 13px; line-height: 1; }
.composer-footnote { max-width: 610px; margin: 8px auto 0; color: #a6a59e; font-size: 9px; text-align: right; }
.composer-footnote > span:first-child { color: var(--coral); }.footnote-lock { margin-left: 4px; color: #8ea48a; font-size: 14px; vertical-align: -1px; }
.emoji-panel { position: absolute; z-index: 6; right: max(7.2%, calc((100% - 610px) / 2)); bottom: 112px; width: 252px; padding: 14px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.emoji-panel__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }.emoji-panel__header strong { font-size: 11px; }.emoji-panel__header span { color: var(--muted); font-size: 9px; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }.emoji-grid button { width: 32px; height: 32px; padding: 0; background: transparent; border: 0; font-size: 20px; }.emoji-grid button:hover { background: #fff1ec; transform: scale(1.12); }

.context-panel { min-height: 100vh; padding: 30px 21px 24px; background: #f2f0e9; border-left: 1px solid var(--line); overflow: auto; }
.context-panel__top { display: flex; align-items: center; justify-content: space-between; }.eyebrow { color: #989991; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; }
.couple-portrait { position: relative; height: 185px; margin-top: 24px; overflow: hidden; background: #d8c4ae; }
.couple-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; filter: saturate(0.83); }
.couple-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(23, 27, 21, 0.68) 100%); }
.couple-portrait__overlay { position: absolute; z-index: 1; right: 16px; bottom: 14px; left: 16px; color: var(--white); }.couple-portrait__overlay span, .couple-portrait__overlay strong { display: block; }.couple-portrait__overlay span { font-size: 9px; letter-spacing: 0.1em; }.couple-portrait__overlay strong { margin: 2px 0 0; font-family: var(--display); font-size: 36px; font-weight: 400; line-height: 0.95; }
.together-copy { padding: 24px 2px 20px; border-bottom: 1px solid var(--line); }.together-copy h2 { margin: 9px 0 9px; font-family: var(--display); font-size: 26px; font-weight: 400; line-height: 1.08; }.together-copy h2 em { color: var(--coral-deep); font-style: normal; }.together-copy p { margin: 0; color: var(--muted); font-size: 10px; }.together-copy p strong { color: var(--ink); }
.context-section { padding-top: 22px; }.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.section-heading strong { font-size: 11px; }
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.game-tile { min-height: 111px; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 11px; text-align: left; border: 0; transition: transform 150ms ease, box-shadow 150ms ease; }.game-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-tight); }.game-tile span { display: block; margin-bottom: auto; font-size: 18px; }.game-tile strong { display: block; font-family: var(--display); font-size: 14px; font-weight: 700; }.game-tile small { display: block; margin-top: 3px; color: rgba(37, 38, 34, 0.58); font-size: 8px; line-height: 1.3; }.game-tile--coral { background: #f6c0b2; }.game-tile--blue { background: #bcd5ef; }.game-tile--yellow { background: #f5dd8c; }.game-tile--green { background: #c6dbbd; }
.memory-strip { display: flex; align-items: center; gap: 10px; margin-top: 23px; padding-top: 17px; border-top: 1px solid var(--line); }.memory-strip__image { width: 47px; height: 47px; flex: 0 0 auto; background: url("https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=180&q=78") center/cover; }.memory-strip > div:nth-child(2) { min-width: 0; flex: 1; }.memory-strip strong, .memory-strip small { display: block; }.memory-strip strong { margin-top: 4px; font-family: var(--display); font-size: 13px; }.memory-strip small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.toast { position: fixed; z-index: 20; right: 28px; bottom: 25px; max-width: 290px; padding: 11px 14px; color: var(--white); background: var(--ink); box-shadow: var(--shadow-tight); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; }.toast.is-visible { opacity: 1; transform: translateY(0); }
.full-screen-effect { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; overflow: hidden; background: rgba(25, 26, 22, 0.88); animation: effectIn 220ms ease both; cursor: pointer; }.effect-glow { position: absolute; width: 48vw; height: 48vw; max-width: 560px; max-height: 560px; background: radial-gradient(circle, rgba(241, 119, 94, 0.52), rgba(241, 119, 94, 0) 70%); filter: blur(7px); }.effect-emoji { position: relative; z-index: 2; font-size: clamp(90px, 20vw, 230px); filter: drop-shadow(0 20px 35px rgba(0,0,0,0.18)); animation: emojiPop 650ms cubic-bezier(.2,.8,.2,1) both; }.effect-copy { position: absolute; z-index: 2; bottom: 16%; color: rgba(255, 254, 250, 0.82); font-family: var(--display); font-size: 20px; letter-spacing: 0.04em; animation: copyIn 900ms ease both; }.effect-particles { position: absolute; inset: 0; }.effect-particle { position: absolute; font-size: 24px; animation: floatAway 1.8s ease-out both; }

.modal { width: min(540px, calc(100% - 28px)); max-height: min(780px, calc(100% - 28px)); padding: 25px; color: var(--ink); background: var(--paper); border: 0; box-shadow: 0 35px 100px rgba(26, 28, 24, 0.28); }.modal::backdrop { background: rgba(35, 36, 31, 0.5); backdrop-filter: blur(4px); }.modal__topline { display: flex; align-items: center; justify-content: space-between; }.modal-title-row { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 28px; }.modal h2 { margin: 8px 0 0; font-family: var(--display); font-size: 37px; font-weight: 400; line-height: 1; }.modal-spark { color: var(--coral); font-size: 40px; }.modal-intro { max-width: 360px; margin: 16px 0 25px; color: var(--muted); font-size: 12px; line-height: 1.6; }.modal-game-list { display: grid; gap: 8px; }.modal-game-card { display: grid; grid-template-columns: 43px 1fr 20px; align-items: center; gap: 12px; width: 100%; min-height: 74px; padding: 11px 14px; text-align: left; border: 0; transition: transform 150ms ease; }.modal-game-card:hover { transform: translateX(4px); }.modal-game-card strong, .modal-game-card small { display: block; }.modal-game-card strong { font-family: var(--display); font-size: 16px; }.modal-game-card small { margin-top: 4px; color: rgba(37, 38, 34, 0.6); font-size: 10px; }.modal-game-card > span:last-child { font-size: 20px; }.modal-game-card--coral { background: #f6c0b2; }.modal-game-card--yellow { background: #f5dd8c; }.modal-game-card--blue { background: #bcd5ef; }.modal-game-card--green { background: #c6dbbd; }.modal-game-card__icon { display: grid; place-items: center; width: 34px; height: 34px; background: rgba(255, 254, 250, 0.42); font-size: 19px; }
.active-game { padding-top: 22px; }.active-game__heading { display: flex; align-items: center; justify-content: space-between; }.active-game__heading h2 { margin: 0; font-size: 29px; }.active-game__progress { color: var(--muted); font-size: 10px; }.game-card-stage { margin-top: 22px; padding: 26px 22px; background: var(--white); border: 1px solid var(--line); }.game-card-stage__label { color: var(--coral-deep); font-size: 9px; font-weight: 800; letter-spacing: 0.15em; }.game-card-stage__question { margin: 14px 0 22px; font-family: var(--display); font-size: 26px; line-height: 1.2; }.game-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.game-option { min-height: 50px; padding: 10px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); text-align: left; font-size: 11px; }.game-option:hover, .game-option.is-selected { background: #fde2db; border-color: var(--coral); }.game-stage-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }.score-pill { padding: 7px 9px; color: #725a19; background: #fcf0c9; font-size: 10px; font-weight: 700; }.primary-button { padding: 10px 15px; color: var(--white); background: var(--coral); border: 0; font-size: 10px; font-weight: 700; }.primary-button:hover { background: var(--coral-deep); }.secondary-button { padding: 9px 14px; color: var(--ink); background: transparent; border: 1px solid var(--line); font-size: 10px; }.active-game__back { margin-top: 17px; padding: 0; color: var(--muted); background: none; border: 0; font-size: 10px; }.challenge-art { display: grid; place-items: center; min-height: 150px; background: #edf4ec; font-size: 70px; }.challenge-timer { color: var(--coral-deep); font-family: var(--display); font-size: 34px; text-align: center; }.challenge-hint { margin: 9px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.modal--security { width: min(460px, calc(100% - 28px)); }.security-hero { display: flex; gap: 13px; align-items: center; margin-top: 31px; }.security-hero__icon { display: grid; place-items: center; width: 47px; height: 47px; color: #4d6c52; background: #dbeada; font-size: 25px; }.security-hero h2 { margin-top: 7px; font-size: 28px; }.security-list { display: grid; gap: 14px; margin-top: 26px; padding: 17px; background: var(--white); border: 1px solid var(--line); }.security-list > div { display: flex; gap: 10px; }.security-check { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; color: #4d6c52; background: #dbeada; border-radius: 50%; font-size: 11px; font-weight: 800; }.security-list strong, .security-list small { display: block; }.security-list strong { font-size: 11px; }.security-list small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }.security-disclaimer { margin: 17px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

@keyframes messageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes effectIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes emojiPop { 0% { opacity: 0; transform: scale(0.3) rotate(-12deg); } 65% { transform: scale(1.08) rotate(5deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes copyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatAway { 0% { opacity: 0; transform: translate(0, 20px) scale(0.4) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2) rotate(var(--r)); } }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 205px minmax(500px, 1fr); }
  .context-panel { display: none; }
}

@media (max-width: 730px) {
  .app-shell { display: block; }
  .sidebar { min-height: auto; height: 65px; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-lockup { padding: 0; }.brand-mark { width: 31px; height: 31px; font-size: 18px; }.brand-subtitle, .pairing-card, .sidebar-note, .user-profile { display: none; }.brand-name { font-size: 12px; }
  .nav-list { display: flex; gap: 2px; margin: 0 0 0 auto; }.nav-item { width: auto; min-height: 36px; padding: 0 9px; }.nav-item span:not(.nav-icon):not(.nav-count) { display: none; }.nav-count { margin: 0; }.nav-icon { font-size: 18px; }
  .chat-area { min-height: calc(100vh - 65px); }.chat-header { min-height: 75px; padding: 14px 16px; }.chat-person__name { font-size: 18px; }.avatar--large { width: 39px; height: 39px; font-size: 17px; }
  .chat-content { padding: 22px 16px 16px; }.connection-banner { align-items: flex-start; }.connection-banner .text-button { display: none; }.message-stack, .typing-row, .composer, .composer-footnote { max-width: none; }.message-block { max-width: 84%; }.message-bubble--image img { width: min(225px, 58vw); height: 155px; }.game-message { margin-left: 0; }.moment-divider { margin-left: 0; }
  .composer-wrap { padding: 0 16px 15px; }.quick-reactions { justify-content: flex-start; }.composer { min-height: 56px; }.emoji-panel { right: 16px; bottom: 103px; }
  .toast { right: 16px; bottom: 16px; left: 16px; max-width: none; }.modal { padding: 19px; }.modal h2 { font-size: 31px; }.game-options { grid-template-columns: 1fr; }
}

.admin-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 13px; }.admin-feature-card { position: relative; display: grid; gap: 4px; padding: 13px; background: #fffaf7; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }.admin-feature-card input { position: absolute; opacity: 0; }.admin-feature-card > span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--coral-deep); background: #fff0ef; border-radius: 10px; }.admin-feature-card strong { font-size: 11px; }.admin-feature-card small { color: var(--muted); font-size: 9px; }.admin-feature-card:has(input:checked) { border-color: rgba(186, 76, 72, 0.32); box-shadow: inset 0 0 0 1px rgba(186, 76, 72, 0.08); }.admin-feature-card:not(:has(input:checked)) { opacity: 0.54; }
@media (max-width: 730px) { .admin-feature-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 430px) {
  .nav-item { padding: 0 7px; }.chat-actions .icon-button:nth-child(1) { display: none; }.connection-banner { padding: 10px; }.connection-banner span { line-height: 1.35; }.message-bubble { padding: 10px 12px; font-size: 12px; }.message-bubble--large-emoji { font-size: 45px; }.composer-tool { width: 27px; font-size: 19px; }.send-button { width: 34px; height: 34px; }.composer-footnote { font-size: 8px; }.modal-game-card { grid-template-columns: 36px 1fr 15px; gap: 9px; }.modal-game-card strong { font-size: 14px; }
}

/* 迭代：情侣关系数据、爱意雨、登录与移动端交互 */
:root { --violet: #c3b4e7; --mint: #b2d9cf; --pink: #efb4c5; --orange: #f2b47f; }

.anniversary-card { display: flex; align-items: center; gap: 10px; margin-top: 17px; padding: 13px 11px; background: #f8e4e3; border: 1px solid rgba(198, 83, 69, 0.14); }
.anniversary-card__icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--coral-deep); background: #fff7f2; font-size: 22px; }
.anniversary-card__copy { min-width: 0; flex: 1; }.anniversary-card__copy strong, .anniversary-card__copy small { display: block; }.anniversary-card__copy strong { margin-top: 4px; font-family: var(--display); font-size: 15px; }.anniversary-card__copy small { margin-top: 3px; color: var(--coral-deep); font-size: 9px; font-weight: 700; }.anniversary-card__date { align-self: flex-end; color: #a5736b; font-size: 8px; white-space: nowrap; }
.daily-note { position: relative; margin-top: 17px; padding: 15px 14px 14px; color: var(--ink); background: #fff5d7; border: 1px solid rgba(151, 120, 45, 0.16); overflow: hidden; }.daily-note::after { content: "♡"; position: absolute; right: 10px; bottom: -15px; color: rgba(241, 119, 94, 0.13); font-family: var(--display); font-size: 74px; }.daily-note__top { position: relative; z-index: 1; display: flex; justify-content: space-between; }.daily-note__sun { color: var(--coral); font-size: 17px; }.daily-note p { position: relative; z-index: 1; margin: 10px 0 12px; font-family: var(--display); font-size: 16px; line-height: 1.38; }.daily-note .text-button { position: relative; z-index: 1; }

.full-screen-effect { isolation: isolate; }.rain-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }.rain-item { position: absolute; top: -12vh; left: var(--left); font-size: var(--size); line-height: 1; opacity: 0; filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.14)); animation: emojiRain var(--duration) linear var(--delay) both; }
.modal-game-list { max-height: 57vh; overflow: auto; padding-right: 2px; }.modal-game-card { min-height: 68px; }.modal-game-card--violet { background: var(--violet); }.modal-game-card--mint { background: var(--mint); }.modal-game-card--pink { background: var(--pink); }.modal-game-card--orange { background: var(--orange); }

.auth-dialog { width: min(820px, calc(100% - 28px)); max-height: min(680px, calc(100% - 28px)); display: grid; grid-template-columns: 0.92fr 1.08fr; padding: 0; color: var(--ink); background: var(--paper); border: 0; box-shadow: 0 35px 100px rgba(26, 28, 24, 0.28); overflow: hidden; }.auth-dialog::backdrop { background: rgba(35, 36, 31, 0.68); backdrop-filter: blur(10px); }.auth-dialog__art { position: relative; min-height: 520px; display: flex; align-items: flex-end; padding: 28px; color: var(--white); background: linear-gradient(180deg, rgba(35, 40, 28, 0.03), rgba(35, 40, 28, 0.76)), url("https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=1000&q=86") center/cover; }.auth-dialog__art::before { content: ""; position: absolute; inset: 17px; border: 1px solid rgba(255, 254, 250, 0.46); pointer-events: none; }.auth-heart { position: absolute; top: 27%; left: 38%; color: #ffefeb; font-size: 82px; transform: rotate(-12deg); filter: drop-shadow(0 12px 19px rgba(0,0,0,0.18)); animation: heartFloat 3.2s ease-in-out infinite; }.auth-sun { position: absolute; top: 24px; right: 30px; color: #f6d77b; font-size: 28px; }.auth-art-copy { position: relative; z-index: 1; }.auth-art-copy span, .auth-art-copy strong { display: block; }.auth-art-copy span { font-size: 9px; font-weight: 800; letter-spacing: 0.18em; }.auth-art-copy strong { max-width: 220px; margin-top: 8px; font-family: var(--display); font-size: 28px; font-weight: 400; line-height: 1.12; }
.auth-dialog__body { display: flex; flex-direction: column; justify-content: center; padding: 42px 48px; }.brand-lockup--auth { padding: 0; }.season-login-label { margin-top: 47px; color: var(--coral-deep); font-family: var(--display); font-size: 13px; }.auth-dialog h1 { margin: 13px 0 11px; font-family: var(--display); font-size: 38px; font-weight: 400; line-height: 1.02; }.auth-dialog h1 em { color: var(--coral-deep); font-style: normal; }.auth-dialog__intro { margin: 0 0 22px; color: var(--muted); font-size: 11px; line-height: 1.55; }.auth-form { display: grid; gap: 12px; }.auth-form label, .profile-form label { display: grid; gap: 6px; }.auth-form label > span, .profile-form label > span { color: #73746d; font-size: 10px; font-weight: 700; }.auth-form input, .profile-form input { width: 100%; min-height: 42px; padding: 0 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); outline: 0; }.auth-form input:focus, .profile-form input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(241, 119, 94, 0.13); }.auth-safe-note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; color: #668168; background: #eef5eb; font-size: 9px; line-height: 1.4; }.auth-safe-note > span:first-child { font-size: 17px; line-height: 1; }.auth-submit { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 0 14px; color: var(--white); background: var(--coral); border: 0; font-size: 11px; font-weight: 700; }.auth-submit:hover { background: var(--coral-deep); }.auth-submit span:last-child { font-size: 18px; }
.profile-modal { width: min(460px, calc(100% - 28px)); }.profile-heading { display: flex; align-items: center; gap: 13px; margin-top: 26px; }.profile-heading h2 { margin: 5px 0 3px; font-size: 28px; }.profile-heading small { color: var(--muted); font-size: 10px; }.profile-form { display: grid; gap: 14px; margin-top: 25px; }.profile-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }.profile-setting > span:first-child { min-width: 0; }.profile-setting strong, .profile-setting small { display: block; }.profile-setting strong { font-size: 11px; }.profile-setting small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }.profile-setting--action .secondary-button { min-height: 31px; padding: 0 10px; white-space: nowrap; }.switch { position: relative; width: 39px; height: 23px; display: block !important; }.switch input { position: absolute; opacity: 0; }.switch span { position: absolute; inset: 0; background: #d3d3cb; border-radius: 20px; transition: background 150ms ease; }.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: var(--white); border-radius: 50%; transition: transform 150ms ease; }.switch input:checked + span { background: #7fa07a; }.switch input:checked + span::after { transform: translateX(16px); }.profile-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 21px; }.profile-actions .secondary-button, .profile-actions .primary-button { min-height: 38px; }
.mobile-bottom-nav { display: none; }

@keyframes emojiRain { 0% { opacity: 0; transform: translate3d(0, -10vh, 0) rotate(0deg); } 8% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--drift), 115vh, 0) rotate(var(--spin)); } }
@keyframes heartFloat { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes recordingPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(237, 109, 101, 0.22); } 50% { box-shadow: 0 0 0 6px rgba(237, 109, 101, 0.08); } }
body.theme-rose { --coral: #ed6d65; --coral-deep: #ba4c48; } body.theme-ocean { --coral: #4f93b3; --coral-deep: #30657e; --paper: #f1f5f4; --paper-deep: #e4ecea; } body.theme-leaf { --coral: #7a9c6e; --coral-deep: #567649; --paper: #f2f5ed; --paper-deep: #e5ebe0; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }

/* 情侣空间升级：把日常、记忆和成长收进同一套柔和的互动面板。 */
.space-teaser { margin-top: 18px; padding: 15px; color: var(--ink); background: linear-gradient(140deg, #fff5ee, #f8eff9); border: 1px solid rgba(186, 76, 72, 0.14); border-radius: 18px; box-shadow: 0 12px 28px rgba(99, 75, 65, 0.06); }
.space-teaser__top { display: flex; align-items: center; justify-content: space-between; }.space-teaser__spark { color: var(--coral); font-size: 20px; }.space-teaser > strong { display: block; margin-top: 8px; font-family: var(--display); font-size: 16px; font-weight: 500; }.space-teaser__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 13px 0; color: var(--muted); font-size: 9px; }.space-teaser__metrics b { display: block; color: var(--coral-deep); font-family: var(--display); font-size: 14px; font-weight: 500; }.space-teaser .primary-button { width: 100%; min-height: 35px; border-radius: 12px; }
.chat-header__actions { position: relative; z-index: 2; }.music-toggle-button { border-radius: 50%; }.privacy-mode .message-bubble:not(.message-bubble--large-emoji) { filter: blur(5px); transition: filter 160ms ease; }.privacy-mode .message-bubble:hover { filter: none; }
.message-block { position: relative; }.message-actions { display: flex; justify-content: flex-end; gap: 4px; min-height: 20px; margin-top: 3px; opacity: 0; transform: translateY(-2px); transition: opacity 140ms ease, transform 140ms ease; }.message-row:hover .message-actions, .message-row:focus-within .message-actions { opacity: 1; transform: translateY(0); }.message-action { display: inline-grid; place-items: center; width: 23px; height: 21px; padding: 0; color: var(--muted); background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(55, 52, 46, 0.08); border-radius: 9px; font-size: 11px; }.message-action:hover, .message-action.is-active { color: var(--coral-deep); background: #fff1ed; border-color: rgba(186, 76, 72, 0.25); }.message-bubble--recalled { color: var(--muted) !important; background: rgba(235, 232, 225, 0.72) !important; font-style: italic; }.message-bubble--file { display: flex; align-items: center; gap: 9px; min-width: 220px; max-width: min(320px, 70vw); padding: 12px 13px; color: var(--ink); background: #fffaf6; border: 1px solid rgba(186, 76, 72, 0.13); border-radius: 16px; }.message-row--mine .message-bubble--file { color: #fff; background: var(--coral); border-color: transparent; }.file-message__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; color: var(--coral-deep); background: #ffe4db; border-radius: 10px; font-size: 18px; }.message-row--mine .file-message__icon { color: var(--coral-deep); }.file-message__copy { min-width: 0; flex: 1; }.file-message__copy strong, .file-message__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-message__copy strong { font-size: 11px; }.file-message__copy small { margin-top: 3px; opacity: 0.68; font-size: 9px; }.message-bubble--file a { display: grid; place-items: center; width: 25px; height: 25px; color: inherit; border: 1px solid currentColor; border-radius: 50%; font-size: 13px; text-decoration: none; }
.space-dialog { width: min(720px, calc(100% - 28px)); }.space-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 26px; }.space-hero h2 { margin: 8px 0 5px; font-size: 32px; }.space-hero p { margin: 0; color: var(--muted); font-size: 11px; }.space-hero__heart { color: var(--coral); font-family: var(--display); font-size: 68px; line-height: 0.8; transform: rotate(-9deg); }.space-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 25px; }.space-stats > div { padding: 12px; background: #fffaf6; border: 1px solid var(--line); border-radius: 14px; }.space-stats strong, .space-stats span { display: block; }.space-stats strong { color: var(--coral-deep); font-family: var(--display); font-size: 22px; font-weight: 500; }.space-stats span { margin-top: 3px; color: var(--muted); font-size: 9px; }.space-tabs { display: flex; gap: 5px; margin-top: 22px; padding: 4px; background: #f1eee8; border-radius: 14px; }.space-tab { flex: 1; min-height: 34px; color: var(--muted); background: transparent; border: 0; border-radius: 10px; font-size: 10px; font-weight: 700; }.space-tab.is-active { color: var(--coral-deep); background: #fff; box-shadow: 0 4px 12px rgba(70, 57, 46, 0.08); }.space-panel { margin-top: 18px; padding: 17px; background: rgba(255, 254, 250, 0.78); border: 1px solid var(--line); border-radius: 16px; }.space-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.space-panel-heading h3 { margin: 6px 0 0; font-family: var(--display); font-size: 22px; font-weight: 500; }.space-panel-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--coral-deep); background: #fff0ea; border-radius: 11px; font-size: 16px; }.space-form { display: grid; gap: 9px; margin-top: 17px; }.space-form input, .space-form select, .space-form textarea { width: 100%; padding: 11px 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; outline: 0; font: inherit; font-size: 11px; }.space-form textarea { resize: vertical; line-height: 1.5; }.space-form input:focus, .space-form select:focus, .space-form textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(241, 119, 94, 0.12); }.space-task-form { grid-template-columns: minmax(0, 1fr) 92px auto; align-items: center; }.space-form__row { display: flex; align-items: center; gap: 8px; }.space-form__row > span { min-width: 0; flex: 1; color: var(--muted); font-size: 9px; }.space-form .primary-button, .space-form .secondary-button { min-height: 38px; padding: 0 13px; border-radius: 11px; }.space-task-list, .space-diary-list { display: grid; gap: 8px; margin-top: 15px; }.space-task { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }.space-task__check { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; color: #fff; background: #efe9df; border: 0; border-radius: 50%; font-size: 14px; }.space-task.is-complete .space-task__check { background: var(--coral); }.space-task > div { min-width: 0; flex: 1; }.space-task strong, .space-task small { display: block; }.space-task strong { font-size: 11px; }.space-task small { margin-top: 3px; color: var(--muted); font-size: 9px; }.space-task.is-complete strong { color: var(--muted); text-decoration: line-through; }.space-task__delete { width: 25px; height: 25px; font-size: 13px; }.space-empty { display: grid; justify-items: center; gap: 5px; padding: 30px 12px; color: var(--muted); text-align: center; }.space-empty span { color: var(--coral); font-family: var(--display); font-size: 29px; }.space-empty strong { color: var(--ink); font-size: 12px; }.space-empty small { font-size: 10px; }.space-diary-card { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }.space-diary-card > img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; }.space-diary-card h4 { margin: 7px 0 4px; font-family: var(--display); font-size: 16px; font-weight: 500; }.space-diary-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.space-album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }.space-album-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 13px; }.space-album-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }.space-album-card div { padding: 8px; }.space-album-card strong, .space-album-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.space-album-card strong { font-size: 10px; }.space-album-card small { margin-top: 4px; color: var(--muted); font-size: 8px; }.pet-card { display: flex; align-items: center; gap: 17px; margin-top: 18px; padding: 17px; background: linear-gradient(140deg, #fff3e1, #f7ebf8); border-radius: 15px; }.pet-card__avatar { display: grid; place-items: center; width: 84px; height: 84px; flex: 0 0 auto; background: #fff8ef; border-radius: 28px; font-size: 48px; box-shadow: 0 10px 22px rgba(112, 80, 59, 0.12); }.pet-card__copy { min-width: 0; flex: 1; }.pet-card__copy h3 { margin: 4px 0; font-family: var(--display); font-size: 24px; font-weight: 500; }.pet-card__copy p { margin: 0; color: var(--muted); font-size: 10px; }.pet-bars { display: grid; gap: 5px; margin-top: 13px; }.pet-bars span { display: block; height: 6px; overflow: hidden; background: rgba(255,255,255,0.65); border-radius: 6px; }.pet-bars i { display: block; height: 100%; background: var(--coral); border-radius: inherit; }.pet-bars span:last-child i { background: #bb9bdb; }.pet-card__copy > small { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; }.pet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }.pet-actions button { border-radius: 11px; }.temperature-card { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 17px; background: #fff7e7; border: 1px solid rgba(201, 157, 76, 0.18); border-radius: 15px; }.temperature-ring { display: grid; place-items: center; width: 96px; height: 96px; flex: 0 0 auto; background: radial-gradient(circle at 50% 48%, #fff7ec 0 57%, transparent 58%), conic-gradient(var(--coral) 0 82%, #f0dfc5 82% 100%); border-radius: 50%; }.temperature-ring strong, .temperature-ring span { display: block; text-align: center; }.temperature-ring strong { font-family: var(--display); font-size: 25px; font-weight: 500; }.temperature-ring span { color: var(--coral-deep); font-size: 9px; }.temperature-card > div:last-child { min-width: 0; }.temperature-card > div:last-child strong { font-family: var(--display); font-size: 17px; font-weight: 500; }.temperature-card p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.class-list { display: grid; gap: 8px; margin-top: 14px; }.class-list article { display: flex; align-items: center; gap: 10px; padding: 11px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }.class-list article > span { font-size: 22px; }.class-list article > div { min-width: 0; flex: 1; }.class-list strong, .class-list small { display: block; }.class-list strong { font-size: 11px; }.class-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }.space-security-note { display: flex; gap: 9px; margin-top: 15px; padding: 11px; color: #5c7860; background: #eef6ed; border-radius: 12px; }.space-security-note > span { font-size: 20px; }.space-security-note strong, .space-security-note small { display: block; }.space-security-note strong { font-size: 10px; }.space-security-note small { margin-top: 4px; color: #708375; font-size: 9px; line-height: 1.45; }

@media (max-width: 730px) {
  .space-dialog { width: calc(100% - 18px); max-height: calc(100% - 18px); padding: 15px; }.space-hero h2 { font-size: 27px; }.space-hero__heart { font-size: 53px; }.space-task-form { grid-template-columns: 1fr 84px; }.space-task-form .primary-button { grid-column: 1 / -1; }.space-form__row { flex-wrap: wrap; }.space-form__row > span { flex: 1 0 45%; }.space-form__row .primary-button { margin-left: auto; }.space-album-grid { grid-template-columns: repeat(2, 1fr); }.pet-card { align-items: flex-start; }.pet-card__avatar { width: 66px; height: 66px; font-size: 37px; border-radius: 22px; }.temperature-card { align-items: flex-start; }.temperature-ring { width: 76px; height: 76px; }.temperature-ring strong { font-size: 20px; }
}

/* 关系头部只保留对方资料，照片与装饰由“我的”页面控制。 */
.avatar--partner { position: relative; overflow: hidden; }
.avatar--partner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-header { position: relative; overflow: hidden; }
.chat-header .chat-person { position: relative; z-index: 1; }

.auth-mode-switch, .auth-method-switch { display: flex; gap: 4px; margin-bottom: 10px; padding: 3px; background: #eeeae2; }
.auth-method-switch { margin-top: 3px; margin-bottom: 14px; background: transparent; border-bottom: 1px solid var(--line); padding: 0; }
.auth-mode-button, .auth-method-button { flex: 1; min-height: 30px; padding: 0 8px; color: var(--muted); background: transparent; border: 0; font-size: 10px; font-weight: 700; }
.auth-mode-button.is-active, .auth-method-button.is-active { color: var(--coral-deep); background: var(--white); box-shadow: 0 4px 12px rgba(57, 48, 36, 0.06); }
.auth-method-button.is-active { background: transparent; box-shadow: inset 0 -2px 0 var(--coral); }
.auth-phone-fields { display: grid; gap: 10px; }
.auth-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.auth-code-row .secondary-button { min-height: 42px; white-space: nowrap; }
.auth-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.auth-provider-grid .secondary-button:disabled { cursor: not-allowed; opacity: 0.45; }
.auth-dialog__body .auth-form input, .auth-dialog__body .auth-form select { min-height: 40px; }
.profile-form select { width: 100%; min-height: 42px; padding: 0 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); outline: 0; }

/* 关闭操作浮在弹窗外侧，避免与标题和内容抢空间。 */
dialog.modal:not(.auth-dialog) { overflow: visible; }
.modal-close { position: absolute; top: -38px; right: 0; width: 32px; height: 32px; color: var(--white); background: rgba(37, 38, 34, 0.76); border: 1px solid rgba(255, 254, 250, 0.45); border-radius: 50%; }
.modal-close:hover { color: var(--ink); background: var(--white); }
.profile-modal .profile-form { max-height: min(520px, calc(100dvh - 330px)); overflow-y: auto; padding-right: 8px; }

.media-upload-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -7px; }
.media-upload-row .secondary-button { min-height: 30px; padding: 0 10px; }
.media-upload-row small { color: var(--muted); font-size: 9px; }
.image-upload-preview { width: 100%; height: 82px; margin-top: -5px; overflow: hidden; background: var(--paper-deep); border: 1px solid var(--line); }
.image-upload-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.image-upload-preview--wide { height: 108px; }
.couple-portrait .image-edit-button { position: absolute; z-index: 2; right: 10px; bottom: 10px; }
.image-edit-button { min-height: 26px; padding: 0 9px; color: var(--white); background: rgba(37, 38, 34, 0.72); border: 1px solid rgba(255, 254, 250, 0.5); font-size: 9px; font-weight: 700; }
.image-edit-button:hover { background: var(--coral-deep); }
.memory-strip__image { position: relative; }
.image-edit-button--memory { position: absolute; right: 2px; bottom: 2px; min-height: 19px; padding: 0 5px; font-size: 8px; }
.content-preview__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.content-preview__actions .secondary-button { min-height: 30px; padding: 0 10px; }
.upload-status { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }

@media (max-width: 730px) {
  .sidebar { display: none; }
  .chat-area { min-height: 100dvh; }
  .chat-header { min-height: 78px; padding: 16px; }
  .chat-content { padding-top: 20px; padding-bottom: 12px; }
  .composer-wrap { padding-bottom: 10px; }
  .composer-footnote { margin-top: 5px; padding-bottom: 0; }
  .mobile-bottom-nav { min-height: 58px; }
  .modal-close { top: -36px; right: 0; }
  .profile-modal .profile-form { max-height: calc(100dvh - 300px); }
}

@media (max-width: 430px) {
  .auth-provider-grid { grid-template-columns: 1fr; }
  .auth-dialog__body { padding: 24px 20px 22px; }
  .auth-code-row { grid-template-columns: 1fr; }
  .auth-code-row .secondary-button { width: 100%; }
}

@media (max-width: 730px) {
  .chat-content { padding-bottom: 102px; }.composer-wrap { padding-bottom: 76px; }.emoji-panel { bottom: 157px; }
  .mobile-bottom-nav { position: fixed; z-index: 12; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 61px; padding: 6px 11px max(6px, env(safe-area-inset-bottom)); background: rgba(255, 254, 250, 0.94); border-top: 1px solid var(--line); box-shadow: 0 -8px 25px rgba(57, 48, 36, 0.08); backdrop-filter: blur(16px); }.mobile-nav-item { display: grid; place-items: center; gap: 2px; padding: 4px 0; color: var(--muted); background: transparent; border: 0; }.mobile-nav-item span { font-size: 19px; line-height: 1; }.mobile-nav-item small { font-size: 9px; }.mobile-nav-item.is-active { color: var(--coral-deep); }
  .anniversary-card, .daily-note { display: none; }.auth-dialog { grid-template-columns: 1fr; width: min(420px, calc(100% - 22px)); max-height: calc(100% - 22px); overflow: auto; }.auth-dialog__art { min-height: 185px; padding: 22px; }.auth-dialog__art::before { inset: 12px; }.auth-heart { top: 19%; left: 42%; font-size: 60px; }.auth-sun { top: 16px; right: 22px; }.auth-art-copy strong { max-width: 180px; font-size: 22px; }.auth-dialog__body { padding: 28px 24px 24px; }.season-login-label { margin-top: 27px; }.auth-dialog h1 { font-size: 32px; }.modal-game-list { max-height: 52vh; }
}

/* 迭代：五项关系导航、约定和安全管理控制台 */
.nav-list { gap: 4px; }
.nav-item--miss-you { min-height: 58px; color: var(--coral-deep); background: #fff0eb; border: 1px solid rgba(198, 83, 69, 0.12); }.nav-item--miss-you .nav-icon { width: 28px; color: var(--coral); font-size: 29px; text-shadow: 0 6px 15px rgba(237, 109, 101, 0.22); }.nav-item--miss-you:hover, .nav-item--miss-you.is-active { color: var(--coral-deep); background: #ffe3dc; box-shadow: var(--shadow-tight); }
.plans-dialog { width: min(600px, calc(100% - 28px)); }.plan-form { display: grid; gap: 12px; margin-top: 8px; }.plan-form label, .admin-form-grid label { display: grid; gap: 6px; }.plan-form label > span, .admin-form-grid label > span { color: #73746d; font-size: 10px; font-weight: 700; }.plan-form input, .admin-form-grid input, .admin-form-grid select { width: 100%; min-height: 42px; padding: 0 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); outline: 0; }.plan-form input:focus, .admin-form-grid input:focus, .admin-form-grid select:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(241, 119, 94, 0.13); }.plans-list { display: grid; gap: 8px; margin-top: 22px; }.plan-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--white); border: 1px solid var(--line); }.plan-card__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; color: var(--coral-deep); background: #fde2db; font-size: 20px; }.plan-card__body { min-width: 0; flex: 1; }.plan-card__body strong, .plan-card__body small { display: block; }.plan-card__body strong { margin-top: 4px; font-family: var(--display); font-size: 16px; }.plan-card__body small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }.plans-empty { display: grid; justify-items: center; gap: 6px; padding: 24px; color: var(--muted); background: rgba(255, 254, 250, 0.6); border: 1px dashed var(--line); text-align: center; }.plans-empty span { color: var(--coral); font-size: 28px; }.plans-empty strong { color: var(--ink); font-family: var(--display); font-size: 16px; }.plans-empty small { font-size: 10px; }
.admin-dialog { width: min(960px, calc(100% - 28px)); max-height: min(840px, calc(100% - 28px)); overflow: auto; }.admin-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 24px; }.admin-heading h2 { margin: 7px 0 0; font-family: var(--display); font-size: 34px; font-weight: 400; }.admin-mode { padding: 6px 8px; color: #6e5518; background: #fcf0c9; font-size: 9px; font-weight: 700; white-space: nowrap; }.admin-warning { display: flex; gap: 9px; align-items: flex-start; margin-top: 18px; padding: 10px 12px; color: #745f2c; background: #fff6d9; border: 1px solid rgba(151, 120, 45, 0.18); font-size: 10px; line-height: 1.45; }.admin-warning > span:first-child { color: #a47a1a; font-size: 17px; line-height: 1; }.admin-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }.admin-metrics > div { display: grid; gap: 4px; padding: 12px; background: var(--white); border: 1px solid var(--line); }.admin-metrics span, .admin-metrics small { color: var(--muted); font-size: 9px; }.admin-metrics strong { font-size: 18px; }.admin-metrics small { line-height: 1.3; }.status-good { color: #56805a; }.admin-tabs { display: flex; gap: 4px; overflow-x: auto; margin-top: 22px; padding-bottom: 1px; border-bottom: 1px solid var(--line); }.admin-tab { min-height: 38px; padding: 0 12px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 10px; font-weight: 700; white-space: nowrap; }.admin-tab.is-active { color: var(--coral-deep); border-bottom-color: var(--coral); }.admin-panel { padding-top: 22px; }.admin-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }.admin-panel-heading h3 { margin: 6px 0 0; font-family: var(--display); font-size: 24px; font-weight: 400; }.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }.admin-form-grid__wide { grid-column: 1 / -1; }.admin-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; margin-top: 4px; border-top: 1px solid var(--line); }.admin-setting-row strong, .admin-setting-row small { display: block; }.admin-setting-row strong { font-size: 11px; }.admin-setting-row small { margin-top: 4px; color: var(--muted); font-size: 9px; }.admin-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }.security-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }.security-service { display: grid; gap: 7px; padding: 14px; background: var(--white); border: 1px solid var(--line); }.security-service > div { display: flex; align-items: center; gap: 7px; }.security-service strong { font-size: 13px; }.security-service small, .security-service > span:last-child { color: var(--muted); font-size: 9px; }.security-service--active { border-left: 3px solid #7fa07a; }.service-dot { width: 7px; height: 7px; border-radius: 50%; background: #78a172; box-shadow: 0 0 0 4px rgba(120, 161, 114, 0.13); }.firewall-form { margin-top: 14px; }.threat-log-heading { display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; }.threat-log-heading strong { font-size: 11px; }.threat-log-heading span { color: var(--muted); font-size: 9px; }.threat-log { display: grid; gap: 1px; margin-top: 9px; background: var(--line); border: 1px solid var(--line); }.threat-log__item { display: grid; grid-template-columns: 90px 47px 1fr; align-items: center; gap: 9px; min-height: 52px; padding: 8px 10px; background: var(--white); }.threat-log__time { color: var(--muted); font-size: 9px; }.threat-log__level { display: inline-grid; place-items: center; min-height: 20px; font-size: 9px; font-weight: 700; }.threat-log__level--blocked { color: #a34d43; background: #f8d8d1; }.threat-log__level--watch { color: #806a23; background: #fcf0c9; }.threat-log__level--allow { color: #4f7956; background: #dfeede; }.threat-log__copy strong, .threat-log__copy small { display: block; }.threat-log__copy strong { font-size: 10px; }.threat-log__copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }.content-preview { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px; background: var(--white); border: 1px solid var(--line); }.content-preview__image { width: 115px; height: 78px; flex: 0 0 auto; background: center/cover no-repeat; }.content-preview strong, .content-preview small { display: block; }.content-preview strong { font-size: 12px; }.content-preview small { max-width: 430px; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }.content-preview .text-button { margin-top: 8px; }.admin-check-list { display: grid; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 10px; }.admin-check-list label { display: flex; align-items: center; gap: 7px; }.data-operation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }.data-operation { min-height: 105px; display: flex; flex-direction: column; align-items: flex-start; padding: 13px; text-align: left; background: var(--white); border: 1px solid var(--line); }.data-operation:hover { border-color: var(--coral); transform: translateY(-2px); }.data-operation strong { font-size: 12px; }.data-operation small { margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.35; }.data-operation span { margin-top: auto; color: var(--coral-deep); font-size: 18px; }.system-log { display: grid; gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); }.system-log__item { display: grid; grid-template-columns: 90px 42px 1fr; gap: 8px; align-items: center; min-height: 46px; padding: 8px 10px; background: var(--white); }.system-log__item > span { color: var(--muted); font-size: 9px; }.system-log__item > strong { color: var(--coral-deep); font-size: 9px; }.system-log__item p { margin: 0; font-size: 10px; }
.mobile-nav-item--miss-you { color: var(--coral-deep); }.mobile-nav-item--miss-you span { color: var(--coral); font-size: 26px !important; text-shadow: 0 5px 12px rgba(237, 109, 101, 0.24); }.mobile-nav-item--miss-you.is-active { color: var(--coral-deep); }

@media (max-width: 730px) {
  .mobile-bottom-nav { grid-template-columns: repeat(5, 1fr); padding-right: 6px; padding-left: 6px; }.mobile-nav-item { min-width: 0; }.mobile-nav-item small { font-size: 8px; }.nav-item--miss-you { min-height: 36px; padding: 0 9px; }.nav-item--miss-you .nav-icon { width: auto; font-size: 22px; }.admin-dialog { width: min(560px, calc(100% - 18px)); max-height: calc(100% - 18px); padding: 16px; }.admin-heading h2 { font-size: 29px; }.admin-metrics { grid-template-columns: repeat(2, 1fr); }.admin-form-grid, .security-service-grid, .data-operation-grid { grid-template-columns: 1fr; }.admin-form-grid__wide { grid-column: auto; }.threat-log__item { grid-template-columns: 75px 43px 1fr; gap: 6px; }.content-preview { align-items: flex-start; }.content-preview__image { width: 92px; height: 66px; }.plans-dialog { width: min(560px, calc(100% - 18px)); }.plan-card__body strong { font-size: 14px; }
}

/* 关系约定确认、聊天背景与固定三栏滚动 */
.app-shell, .sidebar, .chat-area, .context-panel { height: 100dvh; }
.sidebar { overflow: hidden; }
.chat-area { min-height: 0; overflow: hidden; }
.context-panel { min-height: 0; }
.chat-content { background-color: var(--paper); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: local; }
.plan-response-dialog { width: min(560px, calc(100% - 28px)); }
.plan-response-summary { display: grid; gap: 5px; margin-top: 4px; padding: 15px; background: var(--white); border: 1px solid var(--line); }
.plan-response-summary strong { font-family: var(--display); font-size: 20px; }
.plan-response-summary span, .plan-response-summary small { color: var(--muted); font-size: 10px; }
.plan-response-note { display: grid; gap: 6px; margin-top: 14px; }
.plan-response-note > span { color: #73746d; font-size: 10px; font-weight: 700; }
.plan-response-note textarea { width: 100%; resize: vertical; padding: 10px 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); outline: 0; font-size: 11px; line-height: 1.45; }
.plan-response-note textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(241, 119, 94, 0.13); }
.plan-response-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.plan-card { align-items: flex-start; }
.plan-card__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.plan-status { display: inline-block; margin-top: 7px; padding: 4px 6px; font-size: 9px; font-weight: 700; }
.plan-status--pending { color: #806a23; background: #fcf0c9; }
.plan-status--countered { color: #8a5e32; background: #f9e3c9; }
.plan-status--confirmed { color: #4f7956; background: #dfeede; }
.plan-status--declined { color: #8d6e6b; background: #eee5e0; }
.plan-card__request { color: var(--coral-deep) !important; }
.admin-form-grid textarea { width: 100%; padding: 10px 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); outline: 0; resize: vertical; font-size: 11px; line-height: 1.45; }

/* 独立管理端口 */
.admin-page { min-height: 100dvh; background: #ebe8e0; }
.admin-console-shell { width: min(1120px, calc(100% - 32px)); min-height: 100dvh; margin: 0 auto; padding: 36px 0 52px; }
.admin-gate { width: min(520px, 100%); margin: 8vh auto 0; padding: 42px; background: var(--paper); box-shadow: var(--shadow); }
.admin-gate h1, .admin-console-heading h1 { margin: 42px 0 14px; font-family: var(--display); font-size: 46px; font-weight: 400; line-height: 1.02; }
.admin-gate h1 em { color: var(--coral-deep); font-style: normal; }
.admin-gate p, .admin-console-heading p { color: var(--muted); font-size: 11px; line-height: 1.6; }
.admin-login-form { display: grid; gap: 12px; margin-top: 26px; }
.admin-login-form label { display: grid; gap: 6px; }
.admin-login-form label > span { color: #73746d; font-size: 10px; font-weight: 700; }
.admin-login-form input { min-height: 44px; padding: 0 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); outline: 0; }
.admin-login-form input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(241, 119, 94, 0.13); }
.admin-gate-note { display: block; margin-top: 20px; color: var(--muted); font-size: 9px; }
.admin-login-error { margin-top: 14px; padding: 10px; color: #9a4b43; background: #f8d8d1; font-size: 10px; }
.admin-console { padding: 0 0 42px; }
.admin-console-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.admin-console-header__actions { display: flex; align-items: center; gap: 13px; }
.admin-session-status { color: #4f7956; font-size: 10px; font-weight: 700; }
.admin-session-status i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #78a172; border-radius: 50%; }
.admin-console-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 54px 0 22px; }
.admin-console-heading h1 { margin: 9px 0 0; }
.admin-console-heading p { max-width: 630px; margin: 13px 0 0; }
.admin-console-heading .admin-mode { margin-bottom: 10px; }
.admin-console .admin-panel { padding: 28px; background: var(--paper); }
.admin-console .admin-panel h2 { margin: 6px 0 0; font-family: var(--display); font-size: 28px; font-weight: 400; }
.admin-console .admin-tabs { margin-top: 28px; padding: 0 18px; background: var(--paper); }
.admin-console .admin-form-grid { margin-top: 24px; }

@media (max-width: 730px) {
  .app-shell, .chat-area { height: calc(100dvh - 65px); }
  .sidebar { height: 65px; }
  .context-panel { height: auto; }
  .plan-response-actions { flex-wrap: wrap; }
  .plan-response-actions .primary-button { flex: 1 1 100%; }
  .admin-console-shell { width: min(100% - 20px, 640px); padding-top: 16px; }
  .admin-gate { margin-top: 4vh; padding: 26px 20px; }
  .admin-gate h1, .admin-console-heading h1 { font-size: 35px; }
  .admin-console-header { align-items: flex-start; gap: 14px; }
  .admin-console-header__actions { align-items: flex-end; flex-direction: column; gap: 7px; }
  .admin-console-heading { display: block; padding-top: 33px; }
  .admin-console-heading .admin-mode { display: inline-block; margin-top: 15px; }
  .admin-console .admin-panel { padding: 18px 14px; }
}

/* 本轮恋爱关系界面升级：柔和玫瑰色、亲密层级与更轻的触控反馈 */
.app-shell {
  --love-rose: #e86f73;
  --love-wine: #9d4b59;
  --love-blush: #fff0ef;
  --love-paper: #fffaf8;
  background: var(--love-paper);
}
.app-shell .sidebar { background: #fff4f2; border-right-color: rgba(157, 75, 89, 0.12); }
.app-shell .context-panel { background: #fff7f3; border-left-color: rgba(157, 75, 89, 0.12); }
.app-shell .brand-mark { background: var(--love-wine); box-shadow: 0 7px 18px rgba(157, 75, 89, 0.2); }
.app-shell .pairing-card { border-color: rgba(157, 75, 89, 0.14); border-radius: 18px; background: rgba(255, 255, 255, 0.78); }
.app-shell .nav-item { border-radius: 14px; }
.app-shell .nav-item.is-active { color: var(--love-wine); box-shadow: 0 8px 22px rgba(157, 75, 89, 0.08); }
.app-shell .nav-icon { color: var(--love-rose); }
.app-shell .nav-item--miss-you { background: #ffe7e6; border-color: rgba(232, 111, 115, 0.18); border-radius: 18px; }
.app-shell .nav-item--miss-you:hover, .app-shell .nav-item--miss-you.is-active { color: var(--love-wine); background: #ffd8da; }
.app-shell .chat-area { background: var(--love-paper); }
.app-shell .chat-header { background: rgba(255, 250, 248, 0.86); border-bottom-color: rgba(157, 75, 89, 0.12); backdrop-filter: blur(12px); }
.app-shell .chat-content { background-color: var(--love-paper); }
.app-shell .connection-banner { border-color: rgba(157, 75, 89, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.8); }
.app-shell .message-bubble { border-radius: 18px; }
.app-shell .message-bubble--mine { background: #9d4b59; box-shadow: 0 7px 18px rgba(157, 75, 89, 0.14); }
.app-shell .message-bubble--partner { border-color: rgba(157, 75, 89, 0.1); box-shadow: 0 5px 18px rgba(157, 75, 89, 0.05); }
.app-shell .message-bubble--mine .message-tail { background: #9d4b59; }
.app-shell .composer-wrap { background: linear-gradient(180deg, rgba(255, 250, 248, 0), rgba(255, 250, 248, 0.97) 24%); }
.app-shell .composer { border-color: rgba(157, 75, 89, 0.14); border-radius: 22px; box-shadow: 0 12px 30px rgba(157, 75, 89, 0.09); }
.app-shell .send-button { background: var(--love-rose); border-radius: 50%; }
.app-shell .send-button:hover { background: var(--love-wine); }
.app-shell .reaction-chip { border-radius: 50%; }
.app-shell .miss-you-button { border-radius: 999px; background: #ffe7e6; }
.app-shell .couple-portrait, .app-shell .anniversary-card, .app-shell .daily-note, .app-shell .memory-strip { border-radius: 18px; }
.app-shell .anniversary-card { background: #ffe9e7; border-color: rgba(232, 111, 115, 0.2); }
.app-shell .daily-note { background: #fff3d6; border-radius: 18px; }
.app-shell .game-tile { border-radius: 16px; }
.app-shell .mobile-bottom-nav { border-top-color: rgba(157, 75, 89, 0.13); border-radius: 18px 18px 0 0; }
.app-shell .mobile-nav-item { border-radius: 12px; }
.app-shell .mobile-nav-item--miss-you { background: #ffe7e6; }
.app-shell .avatar--partner { box-shadow: 0 0 0 4px #ffe9e7; }
.app-shell .avatar--mine { box-shadow: 0 0 0 4px #e9f0fb; }
.app-shell .verified-mark { background: var(--love-rose); }

.voice-button { display: grid; place-items: center; width: 38px; min-width: 38px; font-size: 17px; line-height: 1; }
.microphone-glyph { display: block; font-size: 17px; line-height: 1; filter: saturate(0.85); }
.voice-stop-glyph { display: block; color: currentColor; font-size: 13px; line-height: 1; }
.voice-button.is-recording { font-size: 13px; }
.profile-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.profile-section-label span { color: var(--coral-deep); font-size: 12px; font-weight: 800; }
.profile-section-label small { color: var(--muted); font-size: 9px; line-height: 1.4; text-align: right; }
.admin-form-grid--compact { margin-top: 8px; }
.user-admin-summary { display: flex; align-items: baseline; gap: 9px; margin-top: 18px; padding: 14px; background: #fff4f2; border: 1px solid rgba(157, 75, 89, 0.12); border-radius: 14px; }
.user-admin-summary strong { color: var(--love-wine); font-family: var(--display); font-size: 32px; font-weight: 400; }
.user-admin-summary span { font-size: 11px; font-weight: 800; }
.user-admin-summary small { margin-left: auto; color: var(--muted); font-size: 9px; }
.admin-user-list { display: grid; gap: 8px; margin-top: 12px; }
.admin-user-card { display: flex; gap: 12px; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.admin-user-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; color: var(--love-wine); background: #ffe4e5; border-radius: 50%; font-family: var(--display); font-size: 20px; }
.admin-user-card__main { min-width: 0; flex: 1; }
.admin-user-card__heading { display: flex; align-items: center; gap: 8px; }
.admin-user-card__heading strong { font-size: 13px; }
.admin-user-status { padding: 3px 6px; color: #4f7956; background: #e6f1e4; border-radius: 999px; font-size: 8px; }
.admin-user-username { display: block; margin-top: 3px; color: var(--coral-deep); font-size: 9px; }
.admin-user-card__meta { display: grid; gap: 4px; margin-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.admin-empty-state { padding: 28px 16px; color: var(--muted); background: rgba(255, 255, 255, 0.62); border: 1px dashed var(--line); border-radius: 14px; font-size: 10px; line-height: 1.6; text-align: center; }

.calendar-reminder-dialog { width: min(460px, calc(100% - 28px)); }
.calendar-reminder-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-top: 25px; color: #4f7956; background: #e1f0df; border-radius: 15px; font-size: 25px; }
.calendar-reminder-dialog h2 { margin-top: 15px; }
.calendar-reminder-summary { display: grid; gap: 5px; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.calendar-reminder-summary strong { font-family: var(--display); font-size: 19px; }
.calendar-reminder-summary span, .calendar-reminder-summary small { color: var(--muted); font-size: 10px; }
.calendar-reminder-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

@media (max-width: 730px) {
  .app-shell .chat-header { padding-right: 16px; padding-left: 16px; }
  .calendar-reminder-actions { flex-direction: column-reverse; }
  .calendar-reminder-actions button { width: 100%; min-height: 42px; }
  .profile-section-label { display: grid; gap: 5px; }
  .profile-section-label small { text-align: left; }
  .user-admin-summary { display: grid; gap: 3px; }
  .user-admin-summary small { margin-left: 0; }
}

/* 管理端控制台：更清晰的运营层级与移动端密度 */
.admin-page { color: #252622; background: #e7e5df; }
.admin-console-shell { width: min(1240px, calc(100% - 48px)); padding-top: 32px; }
.admin-gate { border: 1px solid #d8d5ce; border-radius: 16px; background: #faf9f6; box-shadow: 0 18px 42px rgba(44, 42, 36, 0.08); }
.admin-gate .brand-mark { color: #fff; background: #813e4d; box-shadow: 0 8px 18px rgba(129, 62, 77, 0.18); }
.admin-gate h1 { color: #252622; }
.admin-console-header { padding-bottom: 18px; border-bottom-color: #d8d5ce; }
.admin-console-header .brand-mark { color: #fff; background: #813e4d; box-shadow: 0 8px 18px rgba(129, 62, 77, 0.18); }
.admin-console-heading { padding: 42px 4px 18px; }
.admin-console-heading h1 { color: #252622; font-size: clamp(34px, 4vw, 52px); letter-spacing: 0; }
.admin-console-heading p { max-width: 720px; font-size: 12px; }
.admin-console-heading .admin-mode { color: #813e4d; background: #f7dfe0; border-radius: 999px; }
.admin-metrics { gap: 10px; margin-top: 0; }
.admin-metrics > div { min-height: 104px; align-content: start; padding: 15px; background: #faf9f6; border-color: #d8d5ce; border-radius: 12px; box-shadow: 0 8px 18px rgba(44, 42, 36, 0.035); }
.admin-metrics strong { color: #813e4d; font-family: var(--display); font-size: 24px; font-weight: 400; }
.admin-metrics span { color: #78766f; font-size: 10px; font-weight: 700; }
.admin-metrics small { color: #929088; }
.admin-overview { margin-top: 16px; padding: 20px; background: #faf9f6; border: 1px solid #d8d5ce; border-radius: 14px; box-shadow: 0 8px 22px rgba(44, 42, 36, 0.04); }
.admin-overview__heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.admin-overview__heading h2 { margin: 6px 0 0; font-family: var(--display); font-size: 25px; font-weight: 400; }
.admin-overview__heading > span { color: #8b8981; font-size: 9px; }
.admin-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.admin-overview-card { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 13px; border: 1px solid transparent; border-radius: 12px; }
.admin-overview-card--rose { background: #fff0ef; border-color: #f4d7d8; }
.admin-overview-card--green { background: #edf5ec; border-color: #d7e6d4; }
.admin-overview-card--gold { background: #fff5dc; border-color: #f0e2b9; }
.admin-overview-card__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; color: #813e4d; background: rgba(255, 255, 255, 0.72); font-size: 16px; }
.admin-overview-card span, .admin-overview-card small { display: block; color: #78766f; font-size: 9px; }
.admin-overview-card strong { display: block; margin: 3px 0; color: #252622; font-family: var(--display); font-size: 23px; font-weight: 400; }
.admin-quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 16px; padding-top: 13px; border-top: 1px solid #ebe8e1; }
.admin-quick-actions > span { margin-right: 3px; color: #929088; font-size: 9px; font-weight: 700; }
.admin-quick-actions button { padding: 0; color: #813e4d; background: transparent; border: 0; font-size: 10px; font-weight: 700; }
.admin-quick-actions button span { padding-left: 3px; font-size: 14px; }
.admin-console .admin-tabs { gap: 3px; margin-top: 16px; padding: 0 8px; border: 1px solid #d8d5ce; border-radius: 12px 12px 0 0; background: #faf9f6; }
.admin-console .admin-tab { min-height: 44px; padding-inline: 16px; }
.admin-console .admin-tab.is-active { color: #813e4d; background: #fff0ef; border-bottom-color: #d86d73; }
.admin-console .admin-panel { padding: 26px 28px 30px; background: #faf9f6; border: 1px solid #d8d5ce; border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 8px 22px rgba(44, 42, 36, 0.035); }
.admin-console .admin-panel h2 { color: #252622; font-size: 30px; }
.admin-console .admin-panel-heading { padding-bottom: 3px; }
.admin-subsection-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 24px; padding-bottom: 9px; border-bottom: 1px solid #ebe8e1; }
.admin-subsection-heading--spaced { margin-top: 28px; }
.admin-subsection-heading strong { color: #813e4d; font-size: 11px; }
.admin-subsection-heading span { color: #929088; font-size: 9px; }
.admin-console .admin-form-grid { margin-top: 15px; }
.admin-console .admin-form-grid label > span, .admin-user-toolbar label > span { color: #6e6c65; font-size: 10px; font-weight: 700; }
.admin-console input, .admin-console select, .admin-console textarea { border-color: #d8d5ce; border-radius: 8px; background: #fff; }
.admin-console input:focus, .admin-console select:focus, .admin-console textarea:focus { border-color: #c96870; box-shadow: 0 0 0 3px rgba(201, 104, 112, 0.12); }
.admin-console .admin-setting-row { padding: 15px 0; border-top-color: #ebe8e1; }
.admin-console .admin-setting-row strong { color: #34332f; }
.admin-console .admin-actions { padding-top: 5px; }
.admin-console .primary-button, .admin-console .secondary-button { border-radius: 8px; }
.user-admin-summary { margin-top: 20px; background: #fff0ef; border-color: #f4d7d8; }
.admin-user-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 16px; }
.admin-user-toolbar label { display: grid; gap: 6px; width: min(420px, 100%); }
.admin-user-toolbar input { min-height: 38px; padding: 0 12px; color: #252622; outline: 0; }
.admin-user-toolbar > small { padding-bottom: 10px; color: #929088; font-size: 9px; }
.admin-user-list { margin-top: 12px; }
.admin-user-card { align-items: flex-start; border-color: #e0ddd6; border-radius: 12px; box-shadow: 0 5px 14px rgba(44, 42, 36, 0.025); }
.security-summary-grid, .data-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.security-summary-grid > div, .data-health-grid > div { display: grid; gap: 4px; padding: 13px; background: #fff; border: 1px solid #e0ddd6; border-radius: 10px; }
.security-summary-grid span, .security-summary-grid small, .data-health-grid span, .data-health-grid small { color: #85827a; font-size: 9px; }
.security-summary-grid strong, .data-health-grid strong { color: #34332f; font-family: var(--display); font-size: 20px; font-weight: 400; }
.content-management-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.content-management-grid article { display: grid; gap: 4px; padding: 14px; background: #fff; border: 1px solid #e0ddd6; border-radius: 10px; }
.content-management-grid strong { color: #813e4d; font-family: var(--display); font-size: 23px; font-weight: 400; }
.content-management-grid span { color: #34332f; font-size: 10px; font-weight: 700; }
.content-management-grid small { color: #85827a; font-size: 9px; line-height: 1.4; }
.content-preview { border-color: #e0ddd6; border-radius: 10px; }
.admin-console .system-log, .admin-console .threat-log { border-color: #e0ddd6; border-radius: 10px; overflow: hidden; }
.admin-console .system-log__item, .admin-console .threat-log__item { background: #fff; }

@media (max-width: 730px) {
  .admin-console-shell { width: min(100% - 20px, 640px); padding-top: 14px; }
  .admin-console-heading { padding: 32px 2px 16px; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-overview { padding: 15px 13px; }
  .admin-overview-grid, .security-summary-grid, .data-health-grid, .content-management-grid { grid-template-columns: 1fr; }
  .admin-console .admin-tabs { overflow-x: auto; margin-inline: 0; }
  .admin-console .admin-tab { padding-inline: 13px; }
  .admin-console .admin-panel { padding: 19px 14px 22px; }
  .admin-subsection-heading, .admin-user-toolbar { display: grid; align-items: start; gap: 6px; }
  .admin-user-toolbar label { width: 100%; }
  .admin-user-toolbar > small { padding-bottom: 0; }
  .admin-quick-actions { align-items: flex-start; }
}

/* 移动端底部导航固定后，聊天区只预留真实安全距离，避免输入框下方出现大块空白。 */
@media (max-width: 730px) {
  .app-shell, .chat-area { height: 100dvh; min-height: 100dvh; }
  .chat-area { padding-bottom: 60px; }
  .chat-content { padding-bottom: 12px; }
  .composer-wrap { padding-bottom: 10px; }
  .composer-footnote { margin-top: 5px; padding-bottom: 0; }
  .mobile-bottom-nav { min-height: 60px; }
}

/* 弹窗内容独立滚动，关闭按钮仍保持在弹窗外侧。 */
.modal-scroll { min-height: 0; max-height: min(660px, calc(100dvh - 116px)); overflow-y: auto; overscroll-behavior: contain; padding: 0 5px 3px 1px; scrollbar-gutter: stable; }
.modal-scroll .profile-form { max-height: none; overflow: visible; padding-right: 0; }

/* 登录注册只保留品牌、情话和认证动作，形成更聚焦的情侣主题入口。 */
.auth-dialog { width: min(860px, calc(100% - 24px)); max-height: min(720px, calc(100dvh - 24px)); border: 1px solid rgba(186, 76, 72, 0.16); border-radius: 28px; background: #fffaf7; box-shadow: 0 32px 90px rgba(104, 49, 49, 0.26); }
.auth-dialog__art { min-height: 470px; padding: 31px; background-position: center; }
.auth-dialog__art::before { inset: 16px; border-color: rgba(255, 254, 250, 0.58); }
.auth-dialog__body { min-width: 0; min-height: 0; overflow-y: auto; padding: 40px 46px 34px; background: #fffaf7; }
.brand-lockup--auth .brand-mark { background: var(--love-wine, #9d4b59); box-shadow: 0 8px 18px rgba(157, 75, 89, 0.2); }
.season-login-label { margin-top: 34px; color: var(--coral-deep); font-size: 14px; }
.auth-dialog h1 { margin-top: 10px; font-size: 42px; }
.auth-dialog__intro { margin-bottom: 18px; color: #8d7773; }
.auth-mode-switch { margin-bottom: 12px; border: 1px solid rgba(186, 76, 72, 0.1); border-radius: 14px; background: #f8e9e5; }
.auth-mode-button { min-height: 36px; border-radius: 10px; }
.auth-mode-button.is-active { color: #fffaf7; background: var(--coral-deep); box-shadow: none; }
.auth-method-switch { margin-bottom: 13px; }
.auth-provider-grid .secondary-button { min-height: 41px; border-color: rgba(186, 76, 72, 0.16); border-radius: 12px; background: #fff; }
.auth-safe-note { border: 1px solid rgba(127, 160, 122, 0.2); border-radius: 12px; }
.auth-submit { min-height: 48px; border-radius: 13px; background: var(--coral-deep); box-shadow: 0 10px 20px rgba(186, 76, 72, 0.18); }

.admin-api-grid { margin-top: 18px; }
.admin-api-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 12px; background: rgba(255, 254, 250, 0.64); border: 1px solid var(--line); }
.admin-api-actions .secondary-button { min-height: 34px; padding: 0 11px; }
.admin-api-status { margin-left: auto; color: var(--muted); font-size: 9px; }
.admin-api-status.is-good { color: #4f7956; }
.admin-api-status.is-error { color: #a34d43; }

@media (max-width: 730px) {
  .modal-scroll { max-height: min(700px, calc(100dvh - 150px)); padding-right: 3px; }
  .auth-dialog { grid-template-columns: 1fr; width: min(440px, calc(100% - 18px)); max-height: calc(100dvh - 18px); border-radius: 24px; }
  .auth-dialog__art { min-height: 150px; padding: 22px; }
  .auth-dialog__art::before { inset: 12px; }
  .auth-heart { top: 18%; left: 42%; font-size: 58px; }
  .auth-sun { top: 16px; right: 22px; }
  .auth-art-copy strong { max-width: 200px; font-size: 22px; }
  .auth-dialog__body { padding: 24px 20px 22px; }
  .season-login-label { margin-top: 20px; }
  .auth-dialog h1 { font-size: 32px; }
  .admin-api-status { width: 100%; margin-left: 0; }
}

/* 柔和的关系入口：减少硬边，让配对和弹窗更像一处可以安心停留的空间。 */
dialog.modal:not(.auth-dialog) {
  border: 1px solid rgba(157, 75, 89, 0.12);
  border-radius: 24px;
  background: #fffaf7;
  box-shadow: 0 28px 80px rgba(96, 48, 52, 0.2);
}
.modal-scroll { scrollbar-color: rgba(157, 75, 89, 0.28) transparent; }
.modal-scroll::-webkit-scrollbar { width: 7px; }
.modal-scroll::-webkit-scrollbar-thumb { background: rgba(157, 75, 89, 0.22); border-radius: 999px; }
.modal-game-card, .security-list, .plan-card, .plan-response-summary, .plans-empty { border-radius: 14px; }
.modal-game-card__icon, .security-hero__icon, .plan-card__icon { border-radius: 12px; }
.modal-game-card:hover { transform: translateY(-2px) translateX(0); box-shadow: 0 8px 18px rgba(92, 54, 52, 0.08); }
.pairing-empty-state { display: grid; justify-items: center; max-width: 520px; margin: 70px auto 20px; padding: 36px 24px; color: var(--ink); text-align: center; background: rgba(255, 250, 247, 0.86); border: 1px solid rgba(157, 75, 89, 0.13); border-radius: 24px; box-shadow: 0 15px 40px rgba(157, 75, 89, 0.07); }
.pairing-empty-state__mark { display: grid; place-items: center; width: 62px; height: 62px; color: #b85061; background: #fde9e7; border-radius: 50%; font-size: 34px; box-shadow: 0 12px 24px rgba(184, 80, 97, 0.13); }
.pairing-empty-state h2 { margin: 12px 0 8px; font-family: var(--display); font-size: 28px; font-weight: 400; }
.pairing-empty-state p { max-width: 380px; margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.pairing-empty-state .primary-button { min-height: 40px; border-radius: 12px; }
.pairing-dialog { width: min(560px, calc(100% - 28px)); }
.pairing-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 27px; }
.pairing-heading h2 { margin-top: 8px; }
.pairing-code-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding: 17px; background: #fff0ef; border: 1px solid #f3d9d5; border-radius: 16px; }
.pairing-code-card strong { display: block; margin-top: 5px; color: #9d4b59; font-family: var(--display); font-size: 32px; letter-spacing: 0.16em; }
.pairing-code-card .secondary-button { min-height: 34px; border-radius: 10px; }
.pairing-connect-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 9px; margin-top: 15px; }
.pairing-connect-form label { display: grid; gap: 6px; }
.pairing-connect-form label > span { color: #73746d; font-size: 10px; font-weight: 700; }
.pairing-connect-form input { width: 100%; min-height: 42px; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; outline: 0; letter-spacing: 0.12em; text-transform: uppercase; }
.pairing-connect-form input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(241, 119, 94, 0.13); }
.pairing-connect-form .primary-button { min-height: 42px; border-radius: 11px; white-space: nowrap; }
.pairing-status { display: block; min-height: 17px; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.pairing-status--good { color: #56805a; }
.pairing-status--error { color: #a34d43; }
.pairing-request { display: grid; gap: 12px; margin-top: 14px; padding: 14px; background: #fff8ee; border: 1px solid #f0d8b8; border-radius: 14px; }
.pairing-request > div:first-child { display: grid; gap: 5px; }
.pairing-request strong { color: var(--ink); font-size: 14px; font-weight: 700; }
.pairing-request small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.pairing-request__actions { display: flex; gap: 8px; }
.pairing-request__actions button { flex: 1; min-height: 36px; border-radius: 10px; }
.pairing-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: #a19b94; font-size: 9px; }
.pairing-divider::before, .pairing-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.pairing-invite-actions { display: flex; gap: 8px; }
.pairing-invite-actions button { flex: 1; min-height: 38px; border-radius: 11px; }
.invite-qr { display: grid; justify-items: center; gap: 8px; margin-top: 15px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; text-align: center; }
.invite-qr img { width: 178px; height: 178px; object-fit: contain; border-radius: 8px; }
.invite-code-preview { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 18px 12px; background: #fff0ef; border: 1px solid #f3d9d5; border-radius: 12px; }
.invite-code-preview span { color: #9d4b59; font-size: 9px; }
.invite-code-preview strong { color: #9d4b59; font-family: var(--display); font-size: 24px; letter-spacing: 0.12em; overflow-wrap: anywhere; }
.invite-qr span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.profile-pairing-card { display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: var(--muted); background: #fff0ef; border: 1px solid #f3d9d5; border-radius: 12px; font-size: 10px; }
.profile-pairing-card strong { margin-left: auto; color: #9d4b59; font-size: 16px; letter-spacing: 0.12em; }
.profile-pairing-card .text-button { margin-left: 4px; }
.profile-pairing-button { width: 100%; min-height: 38px; border-radius: 11px; }
.quick-reactions { gap: 6px; margin-bottom: 8px; }
.reaction-chip { width: 32px; height: 29px; border-radius: 14px; background: rgba(255, 255, 255, 0.78); border-color: rgba(157, 75, 89, 0.08); transition: transform 150ms ease, background 150ms ease; }
.reaction-chip:hover { background: #fff0ef; transform: translateY(-2px); }
.full-screen-effect { background: rgba(54, 31, 37, 0.9); }
.rain-item { text-shadow: 0 8px 16px rgba(255, 133, 142, 0.35); }

@media (max-width: 730px) {
  dialog.modal:not(.auth-dialog) { width: min(560px, calc(100% - 18px)); border-radius: 20px; }
  .pairing-empty-state { margin: 36px 0 16px; padding: 28px 18px; }
  .pairing-empty-state h2 { font-size: 24px; }
  .pairing-connect-form { grid-template-columns: 1fr; }
  .pairing-connect-form .primary-button { width: 100%; }
  .pairing-invite-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* 互动卡片与背景音乐控件：让每个选择先被看见，再被点击。 */
.chat-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.music-toggle-button { width: 38px; height: 38px; color: var(--love-wine, #9d4b59); background: #fff0ef; border: 1px solid rgba(157, 75, 89, 0.12); border-radius: 50%; font-size: 18px; }
.music-toggle-button:hover:not(:disabled), .music-toggle-button.is-playing { color: #fff; background: var(--love-wine, #9d4b59); transform: translateY(-1px); }
.music-toggle-button:disabled { opacity: 0.45; cursor: not-allowed; }
.game-option { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 76px; padding: 12px; border-radius: 15px; text-align: left; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.game-option:hover, .game-option.is-selected { transform: translateY(-2px); background: #fff0ef; border-color: var(--coral); box-shadow: 0 9px 18px rgba(190, 91, 86, 0.1); }
.game-option__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; background: #fffaf7; border: 1px solid rgba(157, 75, 89, 0.1); border-radius: 13px; font-size: 22px; }
.game-option__copy { display: grid; min-width: 0; gap: 4px; }
.game-option__copy strong { overflow-wrap: anywhere; color: var(--ink); font-size: 11px; line-height: 1.35; }
.game-option__copy small { overflow-wrap: anywhere; color: var(--muted); font-size: 9px; line-height: 1.35; }
.game-option__check { margin-left: auto; color: #d5a0a2; font-size: 18px; opacity: 0.55; }
.game-option.is-selected .game-option__check { color: var(--coral-deep); opacity: 1; }
.primary-button, .secondary-button, .auth-submit, .game-message__cta, .text-button { border-radius: 12px; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.primary-button:hover, .secondary-button:hover, .auth-submit:hover, .game-message__cta:hover { transform: translateY(-1px); }
.secondary-button { background: rgba(255, 255, 255, 0.72); border-color: rgba(157, 75, 89, 0.16); }
.secondary-button:hover { background: #fff0ef; border-color: rgba(157, 75, 89, 0.28); }
dialog.modal .modal-close { position: absolute; top: 12px; right: -47px; z-index: 2; width: 34px; height: 34px; color: #fff; background: rgba(70, 39, 44, 0.82); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 8px 18px rgba(50, 28, 31, 0.18); }
dialog.modal .modal-close:hover { background: var(--love-wine, #9d4b59); transform: scale(1.04); }
@media (max-width: 730px) {
  dialog.modal .modal-close { top: 10px; right: 10px; color: var(--love-wine, #9d4b59); background: #fff0ef; border-color: rgba(157, 75, 89, 0.12); }
  .chat-header__actions { margin-right: 0; }
  .game-option { min-height: 70px; }
}

/* 五大主页面的共享记录：保持轻量密度，让内容成为主角。 */
.relationship-binding-card { display: flex; align-items: center; gap: 14px; margin-top: 13px; padding: 14px; background: #fff0ef; border: 1px solid #f3d9d5; border-radius: 14px; }
.relationship-binding-card > div { min-width: 0; flex: 1; }
.relationship-binding-card strong, .relationship-binding-card small { display: block; }
.relationship-binding-card strong { margin-top: 4px; color: var(--love-wine, #9d4b59); font-family: var(--display); font-size: 18px; font-weight: 500; }
.relationship-binding-card small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.relationship-binding-card button:disabled { opacity: .55; cursor: default; }
.profile-data-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.profile-data-actions .secondary-button { min-height: 36px; }
.profile-danger-button { color: #a34d43; }
.device-sessions-list { display: grid; gap: 7px; margin-top: 10px; }
.device-session { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 12px; }
.device-session__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; color: var(--love-wine, #9d4b59); background: #fff0ef; border-radius: 10px; font-size: 15px; }
.device-session__copy { min-width: 0; flex: 1; }
.device-session__copy strong, .device-session__copy small { display: block; overflow-wrap: anywhere; }
.device-session__copy strong { font-size: 10px; }
.device-session__copy small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.device-session__current { color: #56805a; font-size: 9px; white-space: nowrap; }
.device-session__revoke { flex: 0 0 auto; color: #a34d43; font-size: 9px; }
.device-sessions-empty { padding: 12px; color: var(--muted); background: rgba(255, 255, 255, 0.5); border: 1px dashed var(--line); border-radius: 12px; font-size: 9px; line-height: 1.45; }
.section-heading__actions { display: flex; align-items: center; gap: 10px; }
.oath-dialog { width: min(560px, calc(100% - 28px)); }
.oath-hero { display: flex; align-items: center; gap: 12px; margin-top: 25px; }
.oath-hero__mark { display: grid; place-items: center; width: 48px; height: 48px; color: var(--love-wine, #9d4b59); background: #ffe8e5; border-radius: 16px; font-family: var(--display); font-size: 30px; }
.oath-hero h2 { margin-top: 6px; }
.oath-form { display: grid; gap: 12px; margin-top: 20px; }
.oath-form label { display: grid; gap: 7px; }
.oath-form label > span { color: #73746d; font-size: 10px; font-weight: 700; }
.oath-form textarea { width: 100%; min-height: 110px; box-sizing: border-box; padding: 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 13px; outline: 0; resize: vertical; line-height: 1.6; }
.oath-form textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(241, 119, 94, 0.13); }
.oath-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oath-form__foot small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.chat-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; min-height: 136px; padding-top: 16px; padding-bottom: 14px; }
.chat-header__actions { align-self: center; }
.chat-header-shortcut { width: 34px; height: 34px; color: var(--love-wine, #9d4b59); background: rgba(255, 240, 239, 0.76); border: 1px solid rgba(157, 75, 89, 0.1); border-radius: 50%; font-size: 16px; }
.chat-header-shortcut:hover { color: #fff; background: var(--love-wine, #9d4b59); }
.chat-oath { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; background: rgba(255, 248, 244, 0.86); border: 1px solid rgba(157, 75, 89, 0.1); border-radius: 14px; }
.chat-oath__icon { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; color: var(--love-wine, #9d4b59); background: #ffe3e2; border-radius: 10px; font-family: var(--display); font-size: 19px; }
.chat-oath__copy { min-width: 0; flex: 1; }
.chat-oath__copy > span, .chat-oath__copy > strong, .chat-oath__copy > small { display: block; overflow-wrap: anywhere; }
.chat-oath__copy > span { color: var(--love-wine, #9d4b59); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.chat-oath__copy > strong { margin-top: 3px; color: var(--ink); font-family: var(--display); font-size: 13px; font-weight: 500; line-height: 1.35; }
.chat-oath__copy > small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.chat-oath__edit { flex: 0 0 auto; padding: 4px 0; color: var(--love-wine, #9d4b59); font-size: 9px; white-space: nowrap; }
.miss-you-composer-button { color: var(--love-wine, #9d4b59); background: #ffe7e6; border-radius: 50%; font-family: var(--display); font-size: 20px; }
.miss-you-composer-button:hover { color: #fff; background: var(--love-wine, #9d4b59); }

/* 顶部照片改为横向沉浸式横幅，动作按钮集中叠放在右上角。 */
.chat-header { grid-template-columns: 1fr; min-height: 164px; padding: 16px 28px 14px; }
.chat-header .chat-person { grid-column: 1; display: flex; align-items: flex-end; min-height: 88px; padding: 14px 154px 13px 18px; overflow: hidden; background: #8f5e61; border: 1px solid rgba(157, 75, 89, 0.12); border-radius: 18px; isolation: isolate; }
.chat-header .chat-person::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(27, 24, 24, 0.62) 0%, rgba(37, 28, 30, 0.3) 52%, rgba(37, 28, 30, 0.16) 100%); pointer-events: none; }
.chat-header .avatar--partner { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: 0; background: #c98d84; }
.chat-header .avatar--partner > span { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 244, 238, 0.78); font-size: 76px; }
.chat-header .chat-person__copy { position: relative; z-index: 2; min-width: 0; }
.chat-header .chat-person__name { color: #fff; text-shadow: 0 2px 9px rgba(35, 22, 25, 0.35); }
.chat-header .chat-person__status { color: rgba(255, 249, 247, 0.86); }
.chat-header .verified-mark { color: var(--love-wine, #9d4b59); background: #fff4ef; }
.chat-header__actions { position: absolute; top: 38px; right: 38px; z-index: 4; display: grid; grid-template-columns: repeat(3, 34px); gap: 6px; margin: 0; padding: 4px; background: rgba(39, 25, 29, 0.35); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 14px; backdrop-filter: blur(12px); }
.chat-header .chat-header-shortcut, .chat-header .music-toggle-button { width: 34px; height: 34px; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 10px; }
.chat-header .chat-header-shortcut:hover, .chat-header .music-toggle-button:hover:not(:disabled), .chat-header .music-toggle-button.is-playing { color: var(--love-wine, #9d4b59); background: #fff7f2; }
.chat-header--heart .chat-person::after { background: linear-gradient(100deg, rgba(94, 45, 52, 0.68), rgba(193, 86, 95, 0.18) 70%, rgba(255, 188, 175, 0.14)); }
.chat-header--sparkle .chat-person::after { background: linear-gradient(100deg, rgba(32, 35, 34, 0.62), rgba(138, 111, 62, 0.22) 70%, rgba(255, 228, 153, 0.14)); }
.chat-header--minimal .chat-person::after { background: linear-gradient(100deg, rgba(25, 29, 29, 0.58), rgba(44, 50, 48, 0.12)); }
@media (max-width: 730px) {
  .chat-header { min-height: 153px; padding: 12px 14px 12px; }
  .chat-header .chat-person { min-height: 78px; padding: 12px 112px 11px 14px; border-radius: 16px; }
  .chat-header .chat-person__name { font-size: 18px; }
  .chat-header .chat-header__actions { top: 27px; right: 20px; grid-template-columns: repeat(3, 29px); gap: 4px; padding: 3px; border-radius: 12px; }
  .chat-header .chat-header-shortcut, .chat-header .music-toggle-button { width: 29px; height: 29px; border-radius: 8px; font-size: 14px; }
  .chat-oath { gap: 7px; padding: 8px 9px; }
  .chat-oath__copy > strong { font-size: 12px; }
  .chat-oath__copy > small { font-size: 7px; }
  .oath-form__foot { align-items: flex-start; flex-direction: column; }
  .oath-form__foot button { width: 100%; min-height: 42px; }
}

/* 让顶部照片贯穿联系人和誓言，誓言作为玻璃层叠在照片之上。 */
.app-shell .chat-header {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.24);
}
.chat-header .chat-person {
  position: static;
  z-index: auto;
  overflow: visible;
  background: transparent;
  border-color: transparent;
  isolation: auto;
}
.chat-header .avatar--partner {
  z-index: 0;
  box-shadow: none;
}
.chat-header .chat-person::after {
  z-index: 1;
}
.chat-header .chat-person__copy,
.chat-header .chat-oath {
  position: relative;
  z-index: 3;
}
.chat-header .chat-oath {
  color: #fff;
  background: rgba(45, 27, 32, 0.34);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 24px rgba(35, 22, 25, 0.14);
  backdrop-filter: blur(10px);
}
.chat-header .chat-oath__icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
.chat-header .chat-oath__copy > span,
.chat-header .chat-oath__copy > strong,
.chat-header .chat-oath__copy > small,
.chat-header .chat-oath__edit {
  color: #fff;
}
.pairing-rule-note { display: grid; gap: 4px; margin-top: 15px; padding: 12px; color: #6e766d; background: #eef6ed; border: 1px solid #dfeade; border-radius: 12px; font-size: 9px; line-height: 1.5; }
.pairing-rule-note strong { color: #4f7956; font-size: 10px; }
.ledger-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.ledger-summary > div { display: grid; gap: 4px; padding: 12px; background: #fff4f1; border: 1px solid #f3d9d5; border-radius: 12px; }
.ledger-summary strong { color: var(--love-wine, #9d4b59); font-family: var(--display); font-size: 19px; font-weight: 500; }
.ledger-summary span { color: var(--muted); font-size: 9px; }
.relationship-list-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.relationship-list-item > div { min-width: 0; flex: 1; }
.relationship-list-item strong, .relationship-list-item small { display: block; overflow-wrap: anywhere; }
.relationship-list-item strong { font-size: 11px; }
.relationship-list-item small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.relationship-list-item > b { color: var(--love-wine, #9d4b59); font-family: var(--display); font-size: 16px; font-weight: 500; }
.relationship-list-item > span { color: var(--coral-deep); font-size: 16px; }
.ledger-list, .wishlist-list { display: grid; gap: 8px; margin-top: 12px; }
.wishlist-item.is-claimed { opacity: .62; }
.relationship-empty { padding: 25px 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; font-size: 10px; line-height: 1.6; text-align: center; }
.timeline-dialog, .treehole-dialog { width: min(720px, calc(100% - 28px)); }
.timeline-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.timeline-metrics > div { display: grid; gap: 4px; padding: 13px; background: #fff4f1; border: 1px solid #f3d9d5; border-radius: 13px; }
.timeline-metrics strong { color: var(--love-wine, #9d4b59); font-family: var(--display); font-size: 23px; font-weight: 500; }
.timeline-metrics span { color: var(--muted); font-size: 9px; }
.timeline-list { display: grid; gap: 9px; margin-top: 18px; }
.timeline-item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.timeline-item > img { width: 86px; height: 86px; object-fit: cover; border-radius: 10px; }
.timeline-item h3 { margin: 6px 0 5px; font-family: var(--display); font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.timeline-item p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.timeline-export-button { width: 100%; margin-top: 14px; }
.treehole-tabs { display: flex; gap: 5px; margin-top: 22px; padding: 4px; background: #f1eee8; border-radius: 14px; }
.treehole-tab { flex: 1; min-height: 34px; color: var(--muted); background: transparent; border: 0; border-radius: 10px; font-size: 10px; font-weight: 700; }
.treehole-tab.is-active { color: var(--love-wine, #9d4b59); background: #fff; box-shadow: 0 4px 12px rgba(70, 57, 46, 0.08); }
.treehole-panel { margin-top: 16px; }
.treehole-mood-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.treehole-mood-picker button { display: grid; justify-items: center; gap: 6px; min-height: 76px; padding: 10px 5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 13px; font-size: 23px; }
.treehole-mood-picker button:hover { color: var(--love-wine, #9d4b59); background: #fff0ef; border-color: #f1c9c9; transform: translateY(-2px); }
.treehole-mood-picker span { font-size: 9px; }
.mood-history { display: grid; gap: 8px; margin-top: 14px; }
.mood-history-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.mood-history-item > span { font-size: 21px; }
.mood-history-item strong, .mood-history-item small { display: block; }
.mood-history-item strong { font-size: 10px; }
.mood-history-item small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.treehole-form { display: grid; gap: 9px; }
.treehole-form textarea, .treehole-form input, .treehole-form select { width: 100%; padding: 11px 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; outline: 0; font: inherit; font-size: 11px; }
.treehole-form textarea { resize: vertical; line-height: 1.5; }
.treehole-form label { display: grid; gap: 6px; }
.treehole-form label > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.treehole-form__row { display: flex; align-items: center; gap: 8px; }
.treehole-form__row select { flex: 1; }
.treehole-entry { display: grid; gap: 7px; margin-top: 12px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.treehole-entry p { margin: 0; color: var(--ink); font-size: 10px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.treehole-entry > strong { font-size: 11px; overflow-wrap: anywhere; }
.treehole-entry.is-unlocked { background: #fff7e7; border-color: #ead7ad; }

@media (max-width: 730px) {
  .relationship-binding-card { align-items: flex-start; flex-direction: column; }
  .relationship-binding-card button { width: 100%; }
  .ledger-summary { grid-template-columns: 1fr; }
  .timeline-metrics { grid-template-columns: repeat(3, 1fr); }
  .timeline-metrics > div { padding: 10px 8px; }
  .timeline-metrics strong { font-size: 18px; }
  .timeline-item { grid-template-columns: 66px minmax(0, 1fr); gap: 9px; }
  .timeline-item > img { width: 66px; height: 66px; }
  .treehole-mood-picker { gap: 5px; }
  .treehole-mood-picker button { min-height: 66px; font-size: 20px; }
  .treehole-mood-picker span { font-size: 8px; }
  .treehole-form__row { align-items: stretch; flex-direction: column; }
  .treehole-form__row button { width: 100%; }
  .profile-data-actions { align-items: stretch; flex-direction: column; }
}

/* 弹窗恋爱配色：每个关系功能都有自己的情绪颜色，但仍共享同一套控件语言。 */
dialog.modal:not(.auth-dialog) {
  --modal-bg: #fffaf8;
  --modal-surface: #fff1ef;
  --modal-accent: #b95268;
  --modal-accent-dark: #84384f;
  --modal-border: rgba(157, 75, 89, 0.17);
  --modal-shadow: rgba(98, 47, 60, 0.22);
  color: var(--ink);
  background: var(--modal-bg);
  border-color: var(--modal-border);
  box-shadow: 0 30px 90px var(--modal-shadow);
}

#gameDialog {
  --modal-bg: #fff8fb;
  --modal-surface: #ffeaf1;
  --modal-accent: #dc5874;
  --modal-accent-dark: #a63858;
  --modal-border: #f1c5d3;
  --modal-shadow: rgba(153, 55, 83, 0.25);
}
#plansDialog, #planResponseDialog {
  --modal-bg: #fffaf3;
  --modal-surface: #fff0dc;
  --modal-accent: #d2714e;
  --modal-accent-dark: #9f4e35;
  --modal-border: #f0d1b6;
  --modal-shadow: rgba(147, 77, 45, 0.22);
}
#spaceDialog, #pairingDialog {
  --modal-bg: #f7fcf7;
  --modal-surface: #e6f5e8;
  --modal-accent: #4d9677;
  --modal-accent-dark: #2f715a;
  --modal-border: #c7e5cf;
  --modal-shadow: rgba(54, 112, 79, 0.2);
}
#timelineDialog {
  --modal-bg: #fffaf0;
  --modal-surface: #f8e9cf;
  --modal-accent: #bd754f;
  --modal-accent-dark: #8f5137;
  --modal-border: #edd2aa;
  --modal-shadow: rgba(137, 81, 46, 0.22);
}
#treeholeDialog {
  --modal-bg: #faf9ff;
  --modal-surface: #eeeaff;
  --modal-accent: #7567ad;
  --modal-accent-dark: #55488e;
  --modal-border: #d9d1f1;
  --modal-shadow: rgba(79, 65, 139, 0.2);
}
#profileDialog, #oathDialog {
  --modal-bg: #fff8fb;
  --modal-surface: #ffe9f1;
  --modal-accent: #b65275;
  --modal-accent-dark: #863653;
  --modal-border: #f0c8d7;
  --modal-shadow: rgba(139, 52, 83, 0.22);
}
#securityDialog {
  --modal-bg: #f7fcf7;
  --modal-surface: #e7f3e5;
  --modal-accent: #5e8b65;
  --modal-accent-dark: #3e6848;
  --modal-border: #c9e2c8;
  --modal-shadow: rgba(58, 101, 66, 0.2);
}

dialog.modal:not(.auth-dialog)::backdrop {
  background: rgba(71, 34, 49, 0.54);
  backdrop-filter: blur(7px) saturate(1.08);
}
dialog.modal:not(.auth-dialog) .modal__topline {
  padding-bottom: 11px;
  color: var(--modal-accent-dark);
  border-bottom: 1px solid var(--modal-border);
}
dialog.modal:not(.auth-dialog) .eyebrow,
dialog.modal:not(.auth-dialog) .modal-spark {
  color: var(--modal-accent);
}
dialog.modal:not(.auth-dialog) h2,
dialog.modal:not(.auth-dialog) h3 {
  color: var(--modal-accent-dark);
}
dialog.modal:not(.auth-dialog) .modal-intro {
  color: #7f6b6f;
}
dialog.modal:not(.auth-dialog) .modal-close {
  color: #fff;
  background: var(--modal-accent-dark);
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow: 0 8px 18px var(--modal-shadow);
}
dialog.modal:not(.auth-dialog) .modal-close:hover {
  color: #fff;
  background: var(--modal-accent);
}
dialog.modal:not(.auth-dialog) .primary-button {
  color: #fff;
  background: var(--modal-accent);
  box-shadow: 0 9px 18px var(--modal-shadow);
}
dialog.modal:not(.auth-dialog) .primary-button:hover {
  background: var(--modal-accent-dark);
}
dialog.modal:not(.auth-dialog) .secondary-button {
  color: var(--modal-accent-dark);
  background: rgba(255, 255, 255, 0.74);
  border-color: var(--modal-border);
}
dialog.modal:not(.auth-dialog) .secondary-button:hover {
  color: var(--modal-accent-dark);
  background: var(--modal-surface);
  border-color: var(--modal-accent);
}
dialog.modal:not(.auth-dialog) input,
dialog.modal:not(.auth-dialog) select,
dialog.modal:not(.auth-dialog) textarea {
  border-color: var(--modal-border);
  background: rgba(255, 255, 255, 0.86);
}
dialog.modal:not(.auth-dialog) input:focus,
dialog.modal:not(.auth-dialog) select:focus,
dialog.modal:not(.auth-dialog) textarea:focus {
  border-color: var(--modal-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent) 16%, transparent);
}
dialog.modal:not(.auth-dialog) .modal-scroll {
  scrollbar-color: color-mix(in srgb, var(--modal-accent) 42%, transparent) transparent;
}

/* 一起玩：糖果粉、蜜桃和薄荷色让游戏卡片更像约会盲盒。 */
#gameDialog .modal-game-list {
  padding: 5px;
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  border-radius: 18px;
}
#gameDialog .modal-game-card {
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(130, 58, 78, 0.06);
}
#gameDialog .modal-game-card:hover {
  box-shadow: 0 10px 20px rgba(130, 58, 78, 0.13);
}
#gameDialog .modal-game-card--coral { color: #78324c; background: #ffcbd8; }
#gameDialog .modal-game-card--yellow { color: #725318; background: #ffe4a7; }
#gameDialog .modal-game-card--blue { color: #315b7a; background: #c8e1f6; }
#gameDialog .modal-game-card--green { color: #39674f; background: #ccebd1; }
#gameDialog .modal-game-card--violet { color: #5e4c89; background: #dfd3f6; }
#gameDialog .modal-game-card--mint { color: #27706a; background: #c4eee5; }
#gameDialog .modal-game-card--pink { color: #8d3d67; background: #f7c4dc; }
#gameDialog .modal-game-card--orange { color: #8d4b2c; background: #ffd0aa; }
#gameDialog .modal-game-card__icon {
  color: var(--modal-accent-dark);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.7);
}
#gameDialog .game-card-stage {
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--modal-border);
  box-shadow: 0 12px 26px rgba(130, 58, 78, 0.07);
}
#gameDialog .game-card-stage__label,
#gameDialog .score-pill { color: var(--modal-accent-dark); }
#gameDialog .game-option:hover,
#gameDialog .game-option.is-selected {
  color: var(--modal-accent-dark);
  background: var(--modal-surface);
  border-color: var(--modal-accent);
}

/* 约定：暖橙像日落约会，确认状态用奶油黄和嫩绿区分。 */
#plansDialog .plan-form {
  padding: 15px;
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  border-radius: 17px;
}
#plansDialog .plan-form label > span,
#planResponseDialog .plan-response-note > span {
  color: var(--modal-accent-dark);
}
#plansDialog .plans-list,
#planResponseDialog .plan-response-summary {
  padding-top: 13px;
}
#plansDialog .plan-card,
#planResponseDialog .plan-response-summary {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--modal-border);
  box-shadow: 0 7px 16px rgba(137, 81, 46, 0.06);
}
#plansDialog .plan-card__icon {
  color: var(--modal-accent-dark);
  background: var(--modal-surface);
}
#plansDialog .plan-card__body strong,
#planResponseDialog .plan-response-summary strong {
  color: var(--modal-accent-dark);
}
#plansDialog .plan-status--pending { color: #866018; background: #ffe8aa; }
#plansDialog .plan-status--countered { color: #8b5030; background: #ffd8b9; }
#plansDialog .plan-status--confirmed { color: #3e7151; background: #d9efdc; }
#plansDialog .plan-status--declined { color: #8a5b5b; background: #f3dfda; }
#planResponseDialog .plan-response-actions { padding-top: 13px; border-top: 1px solid var(--modal-border); }

/* 羁绊空间：薄荷绿承接“共同生活”，不同模块用少量暖色做记忆点。 */
#spaceDialog .space-hero {
  padding: 17px;
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  border-radius: 18px;
}
#spaceDialog .space-hero h2,
#spaceDialog .space-hero__heart,
#spaceDialog .space-stats strong {
  color: var(--modal-accent-dark);
}
#spaceDialog .space-stats > div {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--modal-border);
}
#spaceDialog .space-stats > div:nth-child(2) { background: #fff0e7; border-color: #f1d5c7; }
#spaceDialog .space-stats > div:nth-child(3) { background: #fff5cf; border-color: #eedfae; }
#spaceDialog .space-tabs {
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
}
#spaceDialog .space-tab { color: #6d8477; }
#spaceDialog .space-tab:hover { color: var(--modal-accent-dark); background: rgba(255, 255, 255, 0.62); }
#spaceDialog .space-tab.is-active {
  color: #fff;
  background: var(--modal-accent);
  box-shadow: 0 5px 12px rgba(47, 113, 90, 0.2);
}
#spaceDialog .space-panel {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--modal-border);
  border-top: 3px solid var(--modal-accent);
  box-shadow: 0 10px 22px rgba(54, 112, 79, 0.06);
}
#spaceDialog .space-panel-icon {
  color: var(--modal-accent-dark);
  background: var(--modal-surface);
}
#spaceDialog .space-task,
#spaceDialog .space-diary-card,
#spaceDialog .space-album-card,
#spaceDialog .class-list article,
#spaceDialog .relationship-list-item {
  border-color: var(--modal-border);
  box-shadow: 0 5px 12px rgba(54, 112, 79, 0.04);
}
#spaceDialog .space-task__check { background: #d9eadb; }
#spaceDialog .space-task.is-complete .space-task__check { background: var(--modal-accent); }
#spaceDialog .space-security-note { color: var(--modal-accent-dark); background: var(--modal-surface); }

/* 回忆录：奶油色、胶片棕和一点玫瑰色，像被保存下来的约会票根。 */
#timelineDialog .timeline-metrics > div {
  background: var(--modal-surface);
  border-color: var(--modal-border);
}
#timelineDialog .timeline-metrics > div:nth-child(2) { background: #ffe4d7; border-color: #f0c5b4; }
#timelineDialog .timeline-metrics > div:nth-child(3) { background: #f4e3f0; border-color: #e3cbe0; }
#timelineDialog .timeline-metrics strong,
#timelineDialog .timeline-item h3 { color: var(--modal-accent-dark); }
#timelineDialog .timeline-form {
  padding: 15px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--modal-border);
  border-radius: 17px;
}
#timelineDialog .timeline-item {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--modal-border);
  border-left: 4px solid var(--modal-accent);
  box-shadow: 0 8px 16px rgba(137, 81, 46, 0.06);
}
#timelineDialog .timeline-export-button { background: var(--modal-surface); }

/* 树洞：柔和紫蓝保留安静感，再用心情色块把情绪填满。 */
#treeholeDialog .treehole-tabs {
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
}
#treeholeDialog .treehole-tab { color: #777094; }
#treeholeDialog .treehole-tab:hover { color: var(--modal-accent-dark); background: rgba(255, 255, 255, 0.7); }
#treeholeDialog .treehole-tab.is-active {
  color: #fff;
  background: var(--modal-accent);
  box-shadow: 0 5px 13px rgba(85, 72, 142, 0.2);
}
#treeholeDialog .treehole-mood-picker button {
  color: var(--modal-accent-dark);
  border-color: var(--modal-border);
  box-shadow: 0 5px 12px rgba(79, 65, 139, 0.05);
}
#treeholeDialog .treehole-mood-picker button:nth-child(1) { background: #e9e4ff; }
#treeholeDialog .treehole-mood-picker button:nth-child(2) { background: #dfeefa; }
#treeholeDialog .treehole-mood-picker button:nth-child(3) { background: #e3f5f1; }
#treeholeDialog .treehole-mood-picker button:nth-child(4) { background: #ffe4e6; }
#treeholeDialog .treehole-mood-picker button:nth-child(5) { background: #fff0d7; }
#treeholeDialog .treehole-mood-picker button:hover {
  background: var(--modal-surface);
  border-color: var(--modal-accent);
}
#treeholeDialog .mood-history-item,
#treeholeDialog .treehole-entry {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--modal-border);
}
#treeholeDialog .treehole-entry { border-left: 4px solid var(--modal-accent); }
#treeholeDialog .treehole-entry.is-unlocked { background: #fff3d8; border-color: #eed9a7; border-left-color: #d59a4f; }

/* 设置：把长表单拆成清晰的玫瑰色分区，保留工具感但不再冷。 */
#profileDialog .profile-heading {
  padding: 14px;
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  border-radius: 18px;
}
#profileDialog .profile-heading .avatar--mine {
  color: var(--modal-accent-dark);
  background: #f7cbd9;
  box-shadow: none;
}
#profileDialog .profile-heading h2,
#profileDialog .profile-section-label span { color: var(--modal-accent-dark); }
#profileDialog .profile-section-label { border-top-color: var(--modal-border); }
#profileDialog .profile-form > label > span,
#profileDialog .profile-setting strong { color: #70445a; }
#profileDialog .profile-setting { border-top-color: var(--modal-border); }
#profileDialog .profile-setting:nth-of-type(3n) { background: rgba(255, 239, 245, 0.42); }
#profileDialog .switch input:checked + span { background: var(--modal-accent); }
#profileDialog .profile-pairing-card,
#profileDialog .relationship-binding-card,
#profileDialog .device-session {
  background: rgba(255, 233, 241, 0.74);
  border-color: var(--modal-border);
}
#profileDialog .profile-pairing-card strong,
#profileDialog .relationship-binding-card strong { color: var(--modal-accent-dark); }
#profileDialog .image-upload-preview { border-color: var(--modal-border); background: var(--modal-surface); }
#profileDialog .profile-actions { padding-top: 14px; border-top: 1px solid var(--modal-border); }

/* 羁绊邀请和安全状态是关系弹窗的延伸，也一起换成对应的颜色。 */
#pairingDialog .pairing-heading .modal-spark { color: var(--modal-accent); }
#pairingDialog .pairing-code-card,
#pairingDialog .pairing-request,
#pairingDialog .invite-qr {
  background: rgba(230, 245, 232, 0.72);
  border-color: var(--modal-border);
}
#pairingDialog .pairing-code-card strong,
#pairingDialog .invite-code-preview strong,
#pairingDialog .invite-code-preview span { color: var(--modal-accent-dark); }
#pairingDialog .pairing-rule-note { color: #4d7160; background: var(--modal-surface); border-color: var(--modal-border); }
#pairingDialog .pairing-rule-note strong { color: var(--modal-accent-dark); }
#pairingDialog .invite-code-preview { background: rgba(255, 255, 255, 0.76); border-color: var(--modal-border); }
#securityDialog .security-hero__icon,
#securityDialog .security-check { color: var(--modal-accent-dark); background: var(--modal-surface); }
#securityDialog .security-list { background: rgba(255, 255, 255, 0.82); border-color: var(--modal-border); }
#securityDialog .security-disclaimer { color: #6c7f70; }

@media (max-width: 730px) {
  dialog.modal:not(.auth-dialog) .modal__topline { padding-bottom: 9px; }
  #gameDialog .modal-game-list { padding: 4px; }
  #spaceDialog .space-hero { padding: 14px; }
  #profileDialog .profile-heading { padding: 12px; }
}