/* Miya Chat · 高级白色 INS 风 · 编辑感装饰 */

:root {
  --mc-font: var(--ins-ui, "Jost", "Noto Sans SC", sans-serif);
  --mc-display: var(--ins-display, "Cormorant Garamond", "Noto Serif SC", serif);
  --mc-bg: #f7f7f5;
  --mc-bg-warm: #f2f0ec;
  --mc-surface: #ffffff;
  --mc-surface-glass: rgba(255, 255, 255, 0.88);
  --mc-ink: rgba(17, 17, 17, 0.94);
  --mc-ink-dim: rgba(68, 68, 68, 0.82);
  --mc-ink-faint: rgba(120, 120, 120, 0.72);
  --mc-line: rgba(0, 0, 0, 0.06);
  --mc-line-strong: rgba(0, 0, 0, 0.11);
  --mc-accent: #111111;
  --mc-accent-soft: rgba(17, 17, 17, 0.08);
  --mc-gold-soft: rgba(0, 0, 0, 0.09);
  --mc-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
  --mc-shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.04);
  --mc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mc-r: 3px;
  --mc-r-lg: 18px;
  --mc-safe-t: env(safe-area-inset-top, 0px);
  --mc-safe-b: env(safe-area-inset-bottom, 0px);
  --mc-dock-h: 78px;
  /* legacy aliases for JS/CSS hooks */
  --qq-font: var(--mc-font);
  --qq-bg: var(--mc-bg);
  --qq-surface: var(--mc-surface);
  --qq-blue: var(--mc-accent);
  --qq-blue-soft: var(--mc-accent-soft);
  --qq-text: var(--mc-ink);
  --qq-text-2: var(--mc-ink-dim);
  --qq-text-3: var(--mc-ink-faint);
  --qq-divider: var(--mc-line);
  --qq-red: #c45c5c;
  --qq-badge: var(--mc-accent);
  --qq-search-bg: rgba(0, 0, 0, 0.04);
  --qq-tabbar-h: var(--mc-dock-h);
  --qq-safe-t: var(--mc-safe-t);
  --qq-safe-b: var(--mc-safe-b);
}

/* ── 壳层 ── */
.miya-chat-app {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  font-family: var(--mc-font);
  color: var(--mc-ink);
  background:
    radial-gradient(ellipse 90% 50% at 100% 0%, rgba(255, 255, 255, 0.95) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 0% 100%, rgba(242, 240, 236, 0.9) 0%, transparent 50%),
    linear-gradient(168deg, #ffffff 0%, #f7f7f5 42%, #efefec 100%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.miya-chat-app[hidden] {
  display: none !important;
}

/* ── 装饰层 ── */
.mc-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.mc-veil__grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.mc-veil__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}

.mc-veil__orb--a {
  width: 260px;
  height: 260px;
  top: -80px;
  right: -40px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, transparent 68%);
}

.mc-veil__orb--b {
  width: 200px;
  height: 200px;
  bottom: 18%;
  left: -60px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.04) 0%, transparent 70%);
}

.mc-veil__line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mc-gold-soft), transparent);
  transform: rotate(-11deg);
}

.mc-veil__line--1 { width: 150%; top: 28%; left: -25%; opacity: 0.7; }
.mc-veil__line--2 { width: 130%; bottom: 34%; right: -20%; opacity: 0.45; transform: rotate(8deg); }

.mc-veil__stamp {
  position: absolute;
  top: calc(var(--mc-safe-t) + 18px);
  right: 22px;
  font-family: var(--mc-display);
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--mc-ink-faint);
  writing-mode: vertical-rl;
  text-transform: uppercase;
}

.mc-veil__corner {
  position: absolute;
  width: 48px;
  height: 48px;
  border-color: var(--mc-line-strong);
  border-style: solid;
  opacity: 0.55;
}

.mc-veil__corner--tl {
  top: calc(var(--mc-safe-t) + 12px);
  left: 16px;
  border-width: 1px 0 0 1px;
}

.mc-veil__corner--br {
  bottom: calc(var(--mc-dock-h) + var(--mc-safe-b) + 16px);
  right: 16px;
  border-width: 0 1px 1px 0;
}

/* ── 页面容器 ── */
.qq-pages {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  z-index: 1;
}

.qq-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s var(--mc-ease), visibility 0.32s var(--mc-ease);
  overflow: hidden;
}

.qq-page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.qq-page__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.qq-statusbar { display: none !important; }

/* ── 消息页 · 编辑感顶栏 ── */
.qq-page--msg {
  background: transparent;
}

.mc-inbox-head {
  flex-shrink: 0;
  position: relative;
  padding: calc(14px + var(--mc-safe-t)) 20px 10px;
}

.mc-inbox-head__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
}

.mc-inbox-head__copy {
  min-width: 0;
}

.mc-inbox-head__kicker {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
  margin-bottom: 6px;
}

.mc-inbox-head__title {
  margin: 0;
  font-family: var(--mc-display);
  font-size: clamp(34px, 9vw, 42px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.mc-inbox-head__meta {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--mc-ink-faint);
  letter-spacing: 0.04em;
}

.mc-inbox-head__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.mc-inbox-head__profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface-glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--mc-shadow-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mc-inbox-head__profile::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface);
}

.mc-inbox-head__profile .qq-topbar__ava {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background: linear-gradient(145deg, #ece8e2, #d8d2c8) center/cover no-repeat;
  flex-shrink: 0;
  overflow: hidden;
}

.mc-inbox-head__profile-info {
  min-width: 0;
}

.mc-inbox-head__profile-info .qq-msg-head__name {
  font-family: var(--mc-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
}

.mc-inbox-head__profile-info .qq-msg-head__status {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}

.mc-inbox-head__profile-info .qq-msg-head__dot {
  width: 5px;
  height: 5px;
  background: #6b8f71;
}

.mc-inbox-head__new {
  width: 40px;
  height: 40px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface);
  color: var(--mc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--mc-shadow-soft);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--mc-ease), box-shadow 0.18s;
}

.mc-inbox-head__new:active { transform: scale(0.94); }
.mc-inbox-head__new svg { width: 18px; height: 18px; stroke-width: 1.2; }

.mc-inbox-head__rule {
  height: 1px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--mc-accent) 0%, var(--mc-accent) 28%, transparent 28%, transparent 72%, var(--mc-line-strong) 72%, var(--mc-line-strong) 100%);
  opacity: 0.35;
}

/* legacy msg head hidden when mc-inbox-head present */
.qq-msg-head { display: none; }

/* ── 搜索 ── */
.qq-search {
  flex-shrink: 0;
  padding: 4px 20px 14px;
  position: relative;
  z-index: 1;
}

.qq-search__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface-glass);
  backdrop-filter: blur(14px);
  color: var(--mc-ink-faint);
  font-size: 13px;
  letter-spacing: 0.06em;
  position: relative;
}

.qq-search__bar::before,
.qq-search__bar::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid var(--mc-line-strong);
  opacity: 0.6;
}

.qq-search__bar::before { top: -3px; left: 12px; border-width: 1px 0 0 1px; }
.qq-search__bar::after { bottom: -3px; right: 12px; border-width: 0 1px 1px 0; }

.qq-search__bar svg {
  width: 15px;
  height: 15px;
  opacity: 0.4;
  flex-shrink: 0;
}

.qq-search__bar--input {
  justify-content: flex-start;
  padding: 0 16px;
  gap: 10px;
}

.qq-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--mc-ink);
  outline: none;
  -webkit-appearance: none;
}

.qq-search__input::placeholder {
  color: var(--mc-ink-faint);
  letter-spacing: 0.04em;
}

.qq-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.qq-search-results {
  background: transparent;
  padding: 0 12px;
}

.qq-search-results[hidden] { display: none !important; }

.qq-search-empty {
  padding: 48px 24px;
  text-align: center;
  font-family: var(--mc-display);
  font-size: 18px;
  font-weight: 300;
  color: var(--mc-ink-faint);
  line-height: 1.6;
}

.qq-contact-row__sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--mc-ink-faint);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qq-contact-row__main { flex: 1; min-width: 0; }

/* ── 通用顶栏（动态/联系人） ── */
.qq-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + var(--mc-safe-t)) 20px 12px;
  min-height: 52px;
  position: relative;
  z-index: 2;
}

.qq-topbar--center { position: relative; }

.qq-topbar--center .qq-topbar__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mc-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.qq-topbar--gradient,
.qq-topbar--contacts {
  background: transparent;
  border-bottom: 1px solid var(--mc-line);
}

.qq-topbar__left,
.qq-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.qq-topbar__ava {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: linear-gradient(145deg, #ece8e2, #d8d2c8) center/cover no-repeat;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--mc-line-strong);
}

.qq-topbar__ava--sm { width: 32px; height: 32px; }

.qq-topbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface-glass);
  color: var(--mc-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.qq-topbar__btn:active { background: var(--mc-accent-soft); }
.qq-topbar__btn svg { width: 20px; height: 20px; stroke-width: 1.3; }
.qq-topbar__btn--plus svg { width: 18px; height: 18px; }

/* ── 聊天列表 · 卡片式 ── */
.qq-page--msg .qq-page__scroll {
  background: transparent;
  padding: 0 16px calc(12px + var(--mc-dock-h) + var(--mc-safe-b));
}

.qq-chat-list {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qq-chat-swipe {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mc-line);
  background: var(--mc-bg-warm);
  box-shadow: var(--mc-shadow-soft);
}

.qq-chat-swipe__actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  width: 84px;
  z-index: 0;
}

.qq-chat-swipe__act {
  flex: 1;
  border: none;
  padding: 0 8px;
  font-family: var(--mc-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--mc-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.qq-chat-swipe__act.is-active {
  background: #6b6560;
}

.qq-chat-swipe__act:active {
  filter: brightness(0.92);
}

.qq-chat-swipe__main {
  position: relative;
  z-index: 1;
  transition: transform 0.22s var(--mc-ease);
  will-change: transform;
  background: var(--mc-surface);
}

.qq-chat-swipe.is-open .qq-chat-swipe__main {
  transform: translateX(-84px);
}

.qq-chat-swipe .qq-chat-item {
  border: none;
  box-shadow: none;
}

.qq-chat-swipe.is-pinned .qq-chat-item::after {
  opacity: 0.55;
}

.qq-chat-item__pin {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-accent);
  border: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: middle;
  line-height: 1.3;
}

.qq-chat-item--pinned .qq-chat-item__name {
  padding-right: 2px;
}

.qq-chat-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  width: 100%;
  padding: 16px 16px 16px 14px;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
  color: var(--mc-ink);
  text-align: left;
  cursor: pointer;
  position: relative;
  box-shadow: var(--mc-shadow-soft);
  transition: transform 0.2s var(--mc-ease), box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  counter-increment: mc-chat;
}

.qq-chat-list { counter-reset: mc-chat; }

.qq-chat-item::before {
  content: counter(mc-chat, decimal-leading-zero);
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--mc-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mc-ink-faint);
  opacity: 0.55;
}

.qq-chat-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--mc-accent), transparent);
  opacity: 0.18;
}

.qq-chat-item:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.qq-chat-item__ava-wrap {
  position: relative;
  flex-shrink: 0;
}

.qq-chat-item__ava {
  width: 52px;
  height: 52px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-bg-warm);
}

.qq-chat-item__badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--mc-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.qq-chat-item__body { flex: 1; min-width: 0; padding-right: 28px; }

.qq-chat-item__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.qq-chat-item__name {
  font-family: var(--mc-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qq-chat-item__time {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}

.qq-chat-item__preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.qq-chat-item__msg {
  font-size: 12px;
  color: var(--mc-ink-dim);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qq-chat-item__tag { color: var(--qq-red); font-weight: 400; }
.qq-chat-item__mute { flex-shrink: 0; width: 14px; height: 14px; color: #ccc; }
.qq-chat-item__mute svg { width: 14px; height: 14px; }

.qq-chat-empty,
.qq-suggest-empty {
  text-align: center;
  padding: 56px 28px;
  font-family: var(--mc-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--mc-ink-faint);
  line-height: 1.65;
}

.qq-chat-empty span,
.qq-suggest-empty span {
  display: block;
  margin-top: 8px;
  font-family: var(--mc-font);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── 动态页 ── */
.qq-page--feed .qq-page__scroll {
  padding: 0 16px calc(12px + var(--mc-dock-h) + var(--mc-safe-b));
}

.qq-feed-list { background: transparent; }

.qq-feed-section { margin-bottom: 16px; }

.qq-feed-placeholder {
  border: 1px dashed var(--mc-line-strong);
  padding: 48px 24px;
  text-align: center;
  background: var(--mc-surface);
}

.qq-feed-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.qq-feed-item__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mc-line);
}

.qq-feed-item__icon svg { width: 18px; height: 18px; }

.qq-feed-item__label {
  flex: 1;
  font-family: var(--mc-display);
  font-size: 18px;
  min-width: 0;
}

.qq-feed-item__hint,
.qq-feed-item__right {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}

.qq-feed-item__mini-ava {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  border: 1px solid #fff;
  margin-left: -8px;
  background: var(--mc-bg-warm);
}

.qq-feed-item__mini-ava:first-child { margin-left: 0; }
.qq-feed-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--qq-red); }
.qq-feed-item__chevron { color: var(--mc-ink-faint); font-size: 14px; }

/* ── 联系人页 ── */
.qq-page--contacts .qq-page__scroll {
  padding: 0 16px calc(12px + var(--mc-dock-h) + var(--mc-safe-b));
}

.qq-suggest { background: var(--mc-surface); margin-bottom: 12px; border: 1px solid var(--mc-line); }
.qq-suggest__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}

.qq-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--mc-line);
}

.qq-suggest-item__ava {
  width: 44px;
  height: 44px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--mc-bg-warm);
  border: 1px solid var(--mc-line);
}

.qq-suggest-item__name { font-family: var(--mc-display); font-size: 17px; }

.qq-suggest-item__tag {
  padding: 2px 8px;
  border: 1px solid var(--mc-line);
  font-size: 10px;
  color: var(--mc-ink-faint);
  letter-spacing: 0.04em;
}

.qq-suggest-item__add {
  padding: 6px 14px;
  border: 1px solid var(--mc-accent);
  background: transparent;
  color: var(--mc-accent);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.qq-menu-list {
  background: var(--mc-surface);
  margin-bottom: 12px;
  border: 1px solid var(--mc-line);
}

.qq-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--mc-line);
  font-family: var(--mc-display);
  font-size: 17px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.qq-menu-row:last-child { border-bottom: none; }
.qq-menu-row:active { background: var(--mc-accent-soft); }
.qq-menu-row__chevron { color: var(--mc-ink-faint); font-size: 16px; }

.qq-subtabs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.qq-subtabs::-webkit-scrollbar { display: none; }

.qq-subtab {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
  cursor: pointer;
  transition: all 0.2s var(--mc-ease);
  -webkit-tap-highlight-color: transparent;
}

.qq-subtab.is-active {
  background: var(--mc-accent);
  color: #fff;
  border-color: var(--mc-accent);
}

.qq-subtab.is-active::after { display: none; }

.qq-group-list { background: transparent; }

.qq-group-block {
  margin-bottom: 14px;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
  overflow: hidden;
}

.qq-group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mc-line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.qq-group-item--head {
  background: linear-gradient(90deg, var(--mc-accent-soft) 0%, transparent 100%);
  font-family: var(--mc-display);
}

.qq-group-item__arrow { width: 10px; height: 10px; color: var(--mc-ink-faint); flex-shrink: 0; }
.qq-group-item__name { flex: 1; font-size: 17px; }
.qq-group-item__count {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mc-ink-faint);
}

.qq-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px 14px 20px;
  border: none;
  border-bottom: 1px solid var(--mc-line);
  background: var(--mc-surface);
  color: var(--mc-ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.qq-contact-row:last-child { border-bottom: none; }
.qq-contact-row:active { background: var(--mc-accent-soft); }

.qq-contact-row__ava {
  width: 42px;
  height: 42px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid var(--mc-line);
}

.qq-contact-row__name {
  font-family: var(--mc-display);
  font-size: 16px;
  display: block;
}

.qq-contact-row__chevron { color: var(--mc-ink-faint); flex-shrink: 0; }

.qq-suggest-hint {
  padding: 16px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mc-ink-faint);
  text-align: center;
}

/* ── 我的页 · 杂志式 ── */
.qq-page--mine .qq-page__scroll {
  padding: 0 0 calc(12px + var(--mc-dock-h) + var(--mc-safe-b));
}

.qq-mine-header {
  position: relative;
  padding: calc(20px + var(--mc-safe-t)) 20px 24px;
  overflow: hidden;
}

.qq-mine-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 90% 10%, rgba(255, 255, 255, 0.9), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 100%);
  pointer-events: none;
}

.qq-mine-header::after {
  content: "PROFILE";
  position: absolute;
  top: calc(var(--mc-safe-t) + 24px);
  right: 20px;
  font-size: 9px;
  letter-spacing: 0.45em;
  color: var(--mc-ink-faint);
  opacity: 0.5;
}

.qq-mine-profile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface-glass);
  backdrop-filter: blur(20px);
  box-shadow: var(--mc-shadow);
  cursor: pointer;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.qq-mine-profile__ava {
  width: 72px;
  height: 72px;
  border-radius: 2px;
  background: linear-gradient(145deg, #ece8e2, #d8d2c8) center/cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--mc-line-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.qq-mine-profile__info { min-width: 0; }

.qq-mine-profile__name {
  font-family: var(--mc-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.qq-mine-profile__id {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}

.qq-mine-profile__chevron {
  color: var(--mc-ink-faint);
  font-size: 20px;
  font-family: var(--mc-display);
}

.qq-mine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 20px 0;
  position: relative;
  z-index: 1;
}

.qq-mine-grid__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--mc-ease);
}

.qq-mine-grid__item::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--mc-line);
  opacity: 0.4;
}

.qq-mine-grid__item:active { transform: scale(0.98); }

.qq-mine-grid__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qq-mine-grid__icon svg { width: 22px; height: 22px; stroke: var(--mc-ink) !important; }

.qq-mine-grid__label {
  font-family: var(--mc-display);
  font-size: 16px;
  color: var(--mc-ink);
}

.qq-mine-list {
  margin: 16px 20px 0;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
  overflow: hidden;
}

.qq-mine-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--mc-line);
  cursor: pointer;
}

.qq-mine-row:last-child { border-bottom: none; }
.qq-mine-row__label { flex: 1; font-family: var(--mc-display); font-size: 17px; }
.qq-mine-row__chevron { color: var(--mc-ink-faint); }

/* ── 浮动导航 Dock ── */
.qq-tabbar {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  height: calc(var(--mc-dock-h) + var(--mc-safe-b));
  padding: 10px 20px calc(10px + var(--mc-safe-b));
  background: transparent;
  border: none;
}

.qq-tabbar::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(8px + var(--mc-safe-b));
  top: 0;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--mc-shadow);
  z-index: -1;
}

.qq-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--mc-ink-faint);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s var(--mc-ease);
}

.qq-tabbar__item.is-active {
  color: var(--mc-accent);
}

.qq-tabbar__item.is-active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--mc-accent);
  border-radius: 50%;
}

.qq-tabbar__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qq-tabbar__icon svg { width: 20px; height: 20px; stroke-width: 1.4; }

.qq-tabbar__item.is-active .qq-tabbar__icon--mine {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  background: var(--mc-accent);
  color: #fff;
}

.qq-tabbar__item:not(.is-active) .qq-tabbar__icon--mine {
  background: none;
  color: var(--mc-ink-faint);
}

.qq-tabbar__dot { display: none !important; }

[data-qq-avatar-home] { cursor: pointer; }

/* ── 单聊室 · 全屏编辑感 ── */
.qq-room {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--mc-bg);
  font-family: var(--mc-font);
  overflow: hidden;
}

.qq-room[hidden] { display: none !important; }

.miya-chat-app.qq-room-open .qq-pages,
.miya-chat-app.qq-room-open .qq-tabbar,
.miya-chat-app.qq-room-open .mc-veil {
  visibility: hidden;
  pointer-events: none;
}

.mc-room-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.mc-room-deco__grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mc-room-deco__frame {
  position: absolute;
  top: calc(52px + var(--mc-safe-t));
  left: 10px;
  right: 10px;
  bottom: calc(120px + var(--mc-safe-b));
  border: 1px solid var(--mc-line);
  opacity: 0.45;
}

.mc-room-deco__frame::before,
.mc-room-deco__frame::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--mc-line-strong);
}

.mc-room-deco__frame::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.mc-room-deco__frame::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.mc-room-deco__stamp {
  position: absolute;
  bottom: calc(130px + var(--mc-safe-b));
  left: 18px;
  font-family: var(--mc-display);
  font-size: 48px;
  font-weight: 300;
  color: var(--mc-ink);
  opacity: 0.03;
  letter-spacing: -0.04em;
  line-height: 1;
}

.qq-room__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--mc-safe-t)) 16px 12px;
  background: var(--mc-surface-glass);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--mc-line);
  position: relative;
  z-index: 2;
}

.qq-room__head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.qq-room__back {
  width: 38px;
  height: 38px;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--mc-ink);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}

.qq-room__back svg { width: 18px; height: 18px; }

.qq-room__back:active { background: var(--mc-accent-soft); }

.qq-room__bubble-ava {
  width: 38px;
  height: 38px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--mc-bg-warm);
  border: 1px solid var(--mc-line);
}

.qq-room__title {
  font-family: var(--mc-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.qq-room__menu {
  width: 38px;
  height: 38px;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 0;
}

.qq-room__menu span {
  display: block;
  width: 14px;
  height: 1px;
  background: var(--mc-ink);
}

.qq-room__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 18px;
  background: transparent;
  position: relative;
  z-index: 1;
}

.qq-room__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.qq-room__row[data-msg-id],
.qq-room__bubble,
.qq-room__bubble-stack,
.qq-room__sys {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.qq-room__row[data-msg-id] img {
  -webkit-user-drag: none;
  user-drag: none;
}

.qq-room__row--them { justify-content: flex-start; }
.qq-room__row--me { justify-content: flex-end; }

.qq-room__bubble-wrap { max-width: 74%; min-width: 0; }

.qq-room__bubble {
  padding: 12px 14px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  letter-spacing: 0.01em;
}

.qq-room__row--them .qq-room__bubble {
  background: var(--mc-surface);
  color: var(--mc-ink);
  border: 1px solid var(--mc-line);
  box-shadow: var(--mc-shadow-soft);
}

.qq-room__row--me .qq-room__bubble {
  background: var(--mc-accent);
  color: #fff;
  border: 1px solid var(--mc-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.qq-room__row--them.qq-room__row--first .qq-room__bubble,
.qq-room__row--them.qq-room__row--solo .qq-room__bubble {
  border-top-left-radius: 2px;
}

.qq-room__row--me.qq-room__row--first .qq-room__bubble,
.qq-room__row--me.qq-room__row--solo .qq-room__bubble {
  border-top-right-radius: 2px;
}

.qq-room__sys {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
  margin: 12px 0;
  padding: 6px 12px;
}

.qq-room__sys--narration {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.55;
}

.qq-room__mount-hint {
  text-align: center;
  font-size: 11px;
  color: var(--mc-ink-faint);
  padding: 8px 16px 4px;
  user-select: none;
}

.qq-room__empty {
  text-align: center;
  font-family: var(--mc-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--mc-ink-faint);
  padding: 60px 24px;
}

.qq-room__typing-row { align-items: flex-end; margin-bottom: 14px; }

.qq-room__typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 12px 16px;
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: 2px;
  box-shadow: var(--mc-shadow-soft);
}

.qq-room__typing-bubble span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mc-ink-faint);
  animation: mc-typing 1.2s infinite ease-in-out;
}

.qq-room__typing-bubble span:nth-child(2) { animation-delay: .18s; }
.qq-room__typing-bubble span:nth-child(3) { animation-delay: .36s; }

@keyframes mc-typing {
  0%, 70%, 100% { opacity: .3; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-3px); }
}

.qq-room__row--enter {
  animation: mc-bubble-in .36s var(--mc-ease);
}

@keyframes mc-bubble-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.qq-room__foot {
  flex-shrink: 0;
  background: var(--mc-surface-glass);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--mc-line);
  padding: 12px 16px calc(12px + var(--mc-safe-b));
  position: relative;
  z-index: 2;
}

.qq-room__input-row { margin-bottom: 10px; }

.qq-room__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  max-height: 120px;
  border: 1px solid var(--mc-line-strong);
  border-radius: 2px;
  padding: 12px 14px;
  font-size: 14px;
  resize: none;
  background: var(--mc-surface);
  font-family: inherit;
  color: var(--mc-ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.qq-room__input:focus {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.qq-room__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 0;
  border-top: 1px solid var(--mc-line);
  padding-top: 10px;
}

.qq-room__tool-icon {
  width: 38px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--mc-ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, transform 0.15s;
}

.qq-room__tool-icon:active { transform: scale(0.92); color: var(--mc-accent); }
.qq-room__tool-icon svg { width: 20px; height: 20px; stroke-width: 1.4; }
.qq-room__tool-icon--reply:disabled { opacity: 0.35; }

.qq-room__toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(17, 17, 17, 0.88);
  color: #fff;
  padding: 12px 20px;
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 50;
  backdrop-filter: blur(8px);
}

.qq-room__toast.is-show { opacity: 1; }

.qq-toast {
  position: fixed;
  bottom: calc(90px + var(--mc-safe-b));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 17, 17, 0.9);
  color: #fff;
  padding: 11px 20px;
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.04em;
  z-index: 600;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

/* ── 特殊消息卡片 · INS 编辑风 ── */
.qq-room__bubble-wrap--card { max-width: 292px; }
.qq-room__bubble-wrap--card .qq-room__bubble { display: none; }

.qq-card {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface);
  box-shadow: var(--mc-shadow-soft);
}

/* ── 转账 ── */
.qq-card-xfer {
  color: var(--mc-ink);
  min-width: 210px;
  background: linear-gradient(165deg, #ffffff 0%, #f5f4f0 55%, #eceae4 100%);
}

.qq-card-xfer--in {
  background: linear-gradient(165deg, #ffffff 0%, #f7f7f5 50%, #efefec 100%);
}

.qq-card-xfer--out {
  background: linear-gradient(165deg, #fafafa 0%, #f0f0f0 45%, #e8e8e8 100%);
}

.qq-card-xfer__grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.qq-card-xfer__line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
  pointer-events: none;
}

.qq-card-xfer__line--a { width: 120%; top: 38%; left: -10%; transform: rotate(-8deg); opacity: 0.5; }
.qq-card-xfer__line--b { width: 100%; bottom: 28%; right: -5%; transform: rotate(6deg); opacity: 0.35; }

.qq-card-xfer__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--mc-line);
}

.qq-card-xfer__kicker {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}

.qq-card-xfer__dir {
  font-size: 8px;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border: 1px solid var(--mc-line-strong);
  color: var(--mc-ink-dim);
}

.qq-card-xfer__body {
  position: relative;
  z-index: 1;
  padding: 18px 16px 14px;
  text-align: center;
}

.qq-card-xfer__seal {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
}

.qq-card-xfer__seal-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--mc-line-strong);
  border-radius: 50%;
}

.qq-card-xfer__seal-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

.qq-card-xfer__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-display);
  font-size: 22px;
  font-weight: 400;
}

.qq-card-xfer__amt {
  font-family: var(--mc-display);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.qq-card-xfer__amt small {
  display: block;
  font-family: var(--mc-font);
  font-size: 8px;
  letter-spacing: 0.28em;
  color: var(--mc-ink-faint);
  margin-bottom: 4px;
}

.qq-card-xfer__note {
  margin-top: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--mc-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--mc-ink-dim);
  letter-spacing: 0.02em;
}

.qq-card-xfer__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--mc-line);
  background: rgba(255, 255, 255, 0.55);
}

.qq-card-xfer__status {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-dim);
}

.qq-card-xfer__mark {
  font-family: var(--mc-display);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--mc-ink);
  opacity: 0.12;
}

.qq-card-xfer__acts {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}

.qq-card-xfer__btn {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid var(--mc-line-strong);
  background: rgba(255, 255, 255, 0.8);
  color: var(--mc-ink);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s;
}

.qq-card-xfer__btn:active { background: var(--mc-accent-soft); }

.qq-card-xfer__btn--ok {
  background: var(--mc-accent);
  color: #fff;
  border-color: var(--mc-accent);
  font-weight: 500;
}

/* ── 位置 ── */
.qq-card-loc {
  min-width: 210px;
  background: var(--mc-surface);
}

.qq-card-loc__map {
  position: relative;
  height: 88px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(0, 0, 0, 0.04) 11px, rgba(0, 0, 0, 0.04) 12px),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(0, 0, 0, 0.04) 11px, rgba(0, 0, 0, 0.04) 12px);
  border-bottom: 1px solid var(--mc-line);
  overflow: hidden;
}

.qq-card-loc__grid {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(0, 0, 0, 0.04) 0%, transparent 55%);
}

.qq-card-loc__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  animation: mc-loc-pulse 2.8s ease-in-out infinite;
}

@keyframes mc-loc-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0.25; }
}

.qq-card-loc__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--mc-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.qq-card-loc__cross {
  position: absolute;
  background: rgba(0, 0, 0, 0.08);
}

.qq-card-loc__cross--h {
  top: 50%;
  left: 12%;
  right: 12%;
  height: 1px;
  margin-top: -0.5px;
}

.qq-card-loc__cross--v {
  left: 50%;
  top: 18%;
  bottom: 18%;
  width: 1px;
  margin-left: -0.5px;
}

.qq-card-loc__body {
  padding: 14px 14px 10px;
}

.qq-card-loc__kicker {
  display: block;
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
  margin-bottom: 8px;
}

.qq-card-loc__name {
  font-family: var(--mc-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--mc-ink);
}

.qq-card-loc__addr {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--mc-ink-faint);
  padding-left: 10px;
  border-left: 2px solid var(--mc-line-strong);
}

.qq-card-loc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-top: 1px solid var(--mc-line);
  background: rgba(0, 0, 0, 0.02);
}

.qq-card-loc__coord {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--mc-ink-faint);
}

.qq-card-loc__chev {
  font-family: var(--mc-display);
  font-size: 18px;
  color: var(--mc-ink-faint);
  line-height: 1;
}

/* ── 文字图片 ── */
.qq-card-txtimg {
  min-width: 200px;
  background: linear-gradient(168deg, #ffffff 0%, #f9f8f6 100%);
}

.qq-card-txtimg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.qq-card-txtimg__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--mc-line-strong);
  border-style: solid;
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

.qq-card-txtimg__corner--tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.qq-card-txtimg__corner--br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

.qq-card-txtimg__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--mc-line);
}

.qq-card-txtimg__kicker {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}

.qq-card-txtimg__stamp {
  font-family: var(--mc-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 2px 7px;
  border: 1px solid var(--mc-line-strong);
  color: var(--mc-ink-dim);
}

.qq-card-txtimg__canvas {
  position: relative;
  z-index: 1;
  margin: 12px 14px;
  padding: 16px 14px;
  min-height: 64px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 17px, rgba(0, 0, 0, 0.03) 17px, rgba(0, 0, 0, 0.03) 18px);
  border: 1px dashed var(--mc-line-strong);
}

.qq-card-txtimg__text {
  margin: 0;
  font-family: var(--mc-display);
  font-size: 16px;
  line-height: 1.65;
  color: var(--mc-ink);
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-break: break-word;
}

.qq-card-txtimg__foot {
  position: relative;
  z-index: 1;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--mc-line);
}

.qq-card-txtimg__tag {
  display: block;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}

.qq-card-txtimg__rule {
  display: block;
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--mc-accent) 0%, var(--mc-accent) 30%, transparent 30%);
  opacity: 0.15;
}

/* ── 图片 ── */
.qq-card-photo {
  background: var(--mc-surface);
  padding: 10px 10px 0;
}

.qq-card-photo__kicker {
  display: block;
  padding: 0 4px 8px;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}

.qq-card-photo__frame {
  position: relative;
  overflow: hidden;
}

.qq-card-photo__corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(255, 255, 255, 0.85);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
}

.qq-card-photo__corner--tl { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.qq-card-photo__corner--br { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }

.qq-card-img {
  display: block;
  width: 100%;
  max-width: 240px;
  max-height: 300px;
  object-fit: cover;
  border: 1px solid var(--mc-line);
}

.qq-card-photo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 10px;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--mc-ink-faint);
}

.qq-card-photo__idx {
  font-family: var(--mc-display);
  font-size: 12px;
  opacity: 0.5;
}

/* ── 语音 · 简洁条 ── */
.qq-card-voice {
  min-width: 108px;
  max-width: 196px;
  cursor: pointer;
  padding: 9px 12px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface);
  box-shadow: var(--mc-shadow-soft);
}

.qq-card-voice__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qq-card-voice__play {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--mc-line-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mc-accent);
  background: var(--mc-surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.qq-card-voice__play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
}

.qq-card-voice__play:hover {
  color: var(--mc-ink);
  border-color: var(--mc-accent);
}

.qq-card-voice__play:active {
  transform: scale(0.96);
}

@keyframes mc-voice-tts-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.qq-card-voice__play.is-playing {
  color: var(--mc-ink);
  border-color: var(--mc-accent);
}

.qq-card-voice__play.is-playing::after {
  animation: mc-voice-tts-pulse 0.7s ease-in-out infinite;
}

.qq-card-voice--role {
  min-width: 128px;
}

.qq-card-voice__wave {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  min-width: 56px;
}

.qq-card-voice__bar {
  flex: 0 0 2px;
  width: 2px;
  background: var(--mc-accent);
  opacity: 0.32;
  border-radius: 1px;
  animation: mc-voice-bar 1.2s ease-in-out infinite;
}

.qq-card-voice__bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.qq-card-voice__bar:nth-child(2) { height: 12px; animation-delay: 0.12s; }
.qq-card-voice__bar:nth-child(3) { height: 8px; animation-delay: 0.22s; }
.qq-card-voice__bar:nth-child(4) { height: 14px; animation-delay: 0.08s; }
.qq-card-voice__bar:nth-child(5) { height: 7px; animation-delay: 0.18s; }

@keyframes mc-voice-bar {
  0%, 100% { transform: scaleY(1); opacity: 0.32; }
  50% { transform: scaleY(1.15); opacity: 0.58; }
}

.qq-card-voice__dur {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mc-ink-dim);
  font-variant-numeric: tabular-nums;
}

.qq-card-voice__text {
  display: none;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--mc-line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mc-ink-dim);
}

.qq-card-voice.is-open .qq-card-voice__text { display: block; }
.qq-card-voice.is-open .qq-card-voice__bar { animation-play-state: paused; opacity: 0.5; }

.qq-room__bubble-wrap--card:has(.qq-card-voice) { max-width: 204px; }

.qq-card-sticker { max-width: 108px; max-height: 108px; object-fit: contain; }
.qq-card-sticker-fallback {
  display: inline-block;
  padding: 10px 14px;
  border: 1px dashed var(--mc-line-strong);
  font-size: 12px;
  color: var(--mc-ink-faint);
  letter-spacing: 0.04em;
}

/* ── 弹层 / 菜单 ── */
.qq-room__overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.qq-room__overlay[hidden] { display: none !important; }

.qq-sheet { width: 100%; max-width: 480px; }

.qq-sheet__panel {
  background: var(--mc-surface);
  border: 1px solid var(--mc-line-strong);
  border-bottom: none;
  padding: 20px 18px calc(18px + var(--mc-safe-b));
  margin-top: auto;
}

.qq-sheet__title {
  margin: 0 0 16px;
  font-family: var(--mc-display);
  font-size: 22px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.04em;
}

.qq-sheet__hint {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mc-ink-faint);
  text-align: center;
  margin-bottom: 12px;
}

.qq-sheet__item,
.qq-sheet__cancel {
  display: block;
  width: 100%;
  padding: 15px;
  margin-top: 8px;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.qq-sheet__item:active,
.qq-sheet__cancel:active { background: var(--mc-accent-soft); }

.qq-sheet__item--primary {
  background: var(--mc-accent);
  color: #fff;
  border-color: var(--mc-accent);
}

.qq-sheet__cancel {
  color: var(--mc-ink-faint);
  margin-top: 14px;
  border-style: dashed;
}

.qq-sheet__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  margin-top: 8px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-bg);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.qq-sheet__input:focus {
  border-color: rgba(0, 0, 0, 0.2);
}

/* ── 聊天室 · 内嵌表情面板（非弹窗展柜） ── */
.qq-room--emo-open .qq-room__scroll {
  padding-bottom: calc(200px + var(--mc-safe-b)) !important;
}

.qq-emo-panel {
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--mc-line-strong);
  background: var(--mc-surface);
  max-height: 42vh;
  flex-direction: column;
  display: none;
}

.qq-emo-panel[hidden] {
  display: none !important;
}

.qq-emo-panel:not([hidden]) {
  display: flex;
}

.qq-emo-panel__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--mc-line);
}

.qq-emo-panel__rail {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.qq-emo-panel__rail::-webkit-scrollbar { display: none; }

.qq-emo-panel__tab {
  flex-shrink: 0;
  padding: 6px 12px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mc-ink-faint);
  cursor: pointer;
  position: relative;
}
.qq-emo-panel__tab.is-active {
  color: var(--mc-ink);
  font-weight: 600;
}
.qq-emo-panel__tab.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -8px;
  height: 2px;
  background: var(--mc-ink);
}

.qq-emo-panel__fold {
  flex-shrink: 0;
  padding: 6px 10px;
  border: 1px solid var(--mc-line);
  background: var(--mc-bg);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mc-ink-dim);
  cursor: pointer;
}

.qq-emo-panel__mosaic {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 6px 4px 10px;
  -webkit-overflow-scrolling: touch;
}

.qq-emo-cell {
  aspect-ratio: 1;
  padding: 0;
  border: none;
  background: var(--mc-bg-warm) center/contain no-repeat;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s;
}
.qq-emo-cell:active {
  transform: scale(0.92);
  opacity: 0.85;
}

.qq-emo-panel__empty {
  grid-column: 1 / -1;
  padding: 28px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--mc-ink-faint);
  line-height: 1.6;
}

.qq-msg-menu {
  position: absolute;
  z-index: 50;
  display: flex;
  gap: 2px;
  padding: 6px;
  background: var(--mc-surface);
  border: 1px solid var(--mc-line-strong);
  box-shadow: var(--mc-shadow);
}

.qq-msg-menu__btn {
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: var(--mc-ink);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.qq-msg-menu__btn:active { background: var(--mc-accent-soft); }
.qq-msg-menu__btn.is-danger { color: var(--qq-red); }

/* ── 引用 · 输入区条（#qq-room-quote-bar） ── */
.qq-room__quote-bar[hidden] {
  display: none !important;
}

.qq-room__quote-bar {
  margin-bottom: 8px;
}

.qq-refbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--mc-line-strong);
  border-left: 3px solid var(--mc-ink);
  background: var(--mc-surface);
}

.qq-refbar__main {
  flex: 1;
  min-width: 0;
}

.qq-refbar__tag {
  display: block;
  font-family: var(--mc-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
  margin-bottom: 4px;
}

.qq-refbar__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mc-ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qq-refbar__close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mc-ink-faint);
  cursor: pointer;
  padding: 2px 0 0;
}

.qq-refbar__close:active {
  color: var(--mc-ink);
}

/* ── 引用 · 气泡内摘要（.qq-refchip） ── */
.qq-room__bubble-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 74%;
  min-width: 0;
}

.qq-room__row--me .qq-room__bubble-stack {
  align-items: flex-end;
}

.qq-refchip {
  width: 100%;
  max-width: min(240px, 68vw);
  margin-bottom: 5px;
  padding: 5px 0 5px 10px;
  border-left: 2px solid var(--mc-line-strong);
  background: linear-gradient(90deg, var(--mc-bg-warm) 0%, transparent 100%);
}

.qq-room__row--me .qq-refchip {
  padding-left: 0;
  padding-right: 10px;
  border-left: none;
  border-right: 2px solid var(--mc-line-strong);
  background: linear-gradient(270deg, var(--mc-bg-warm) 0%, transparent 100%);
  text-align: right;
}

.qq-refchip__tag {
  display: block;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
  margin-bottom: 2px;
}

.qq-refchip__text {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--mc-ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qq-refchip--media .qq-refchip__body {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qq-refchip--media .qq-refchip__tag {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.qq-refchip__thumb {
  flex-shrink: 0;
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--mc-line);
  background: var(--mc-surface);
}

.qq-refchip__thumb--sticker {
  object-fit: contain;
  background: transparent;
  border: none;
}

.qq-room__bubble-edited {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--mc-ink-faint);
}

/* ── 自动翻译 · 微信式气泡内译文 ── */
.qq-room__bubble-trans {
  margin-top: 6px;
  padding-top: 6px;
}

.qq-room__bubble-trans-line {
  height: 1px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.08);
}

.qq-room__row--me .qq-room__bubble-trans-line {
  background: rgba(255, 255, 255, 0.22);
}

.qq-room__bubble-trans-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--mc-ink);
  word-break: break-word;
}

.qq-room__row--them .qq-room__bubble-trans-text {
  color: var(--mc-ink);
}

.qq-room__row--me .qq-room__bubble-trans-text {
  color: inherit;
}

.qq-room__bubble-trans--loading .qq-room__bubble-trans-text,
.qq-room__bubble-trans--fail .qq-room__bubble-trans-text {
  font-size: 12px;
  color: var(--mc-ink-faint);
  letter-spacing: 0.04em;
}

.qq-room__bubble-trans--fail .qq-room__bubble-trans-text {
  color: #b45309;
}

.qq-room__bubble-stack > .qq-room__bubble-trans {
  width: 100%;
  max-width: min(292px, 74vw);
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.qq-room__bubble-stack > .qq-room__bubble-trans .qq-room__bubble-trans-line {
  margin-bottom: 5px;
}

.qq-room__row--them .qq-room__bubble-stack > .qq-room__bubble-trans {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.06);
}

.qq-room__row--me .qq-room__bubble-stack > .qq-room__bubble-trans {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
}

.qq-room__row--me .qq-room__bubble-wrap,
.qq-room__row--them .qq-room__bubble-wrap {
  max-width: 100%;
}

/* ── 多选删除栏 ── */
.qq-multi-bar[hidden] {
  display: none !important;
}

.qq-multi-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(10px + var(--mc-safe-b));
  border-top: 1px solid var(--mc-line-strong);
  background: var(--mc-surface);
  z-index: 4;
}

.qq-multi-bar__main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.qq-multi-bar__tag {
  font-family: var(--mc-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mc-ink-faint);
}

.qq-multi-bar__count {
  font-family: var(--mc-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--mc-ink);
  line-height: 1;
}

.qq-multi-bar__hint {
  font-size: 11px;
  color: var(--mc-ink-faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qq-multi-bar__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.qq-multi-bar__btn {
  padding: 8px 14px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.qq-multi-bar__btn:active {
  background: var(--mc-accent-soft);
}

.qq-multi-bar__btn--del {
  border-color: var(--mc-ink);
  background: var(--mc-ink);
  color: #fff;
}

.qq-room--pick .qq-room__foot {
  opacity: 0.22;
  pointer-events: none;
}

.qq-room--pick .qq-room__row[data-msg-id] {
  cursor: pointer;
}

.qq-room--pick .qq-room__row.is-picked .qq-room__bubble-stack {
  outline: 1px solid var(--mc-ink);
  outline-offset: 3px;
}

/* ── 联系人聊天设置面板（嵌入） ── */
.miya-ct-chat-panel { padding: 4px 0 24px; }

.miya-ct-intro {
  font-size: 12px;
  color: var(--mc-ink-faint);
  line-height: 1.6;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

.miya-ct-section__title {
  font-family: var(--mc-display);
  font-size: 18px;
  font-weight: 400;
  margin: 16px 0 10px;
}

.miya-ct-card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--mc-shadow-soft);
}

.miya-ct-card--accent {
  border-color: var(--mc-line-strong);
  background: linear-gradient(160deg, #ffffff 0%, #f7f7f5 100%);
}

.miya-ct-card__kicker {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
  margin: 0 0 10px;
}

.miya-ct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mc-line);
}

.miya-ct-row:last-child { border-bottom: none; }
.miya-ct-row__text strong { display: block; font-size: 14px; font-weight: 500; }
.miya-ct-row__hint { display: block; font-size: 10px; color: var(--mc-ink-faint); margin-top: 2px; letter-spacing: 0.02em; }

.miya-ct-field { margin-bottom: 10px; }
.miya-ct-field__label { display: block; font-size: 11px; letter-spacing: 0.06em; color: var(--mc-ink-dim); margin-bottom: 6px; }
.miya-ct-field__hint { display: block; font-size: 10px; color: var(--mc-ink-faint); margin-top: 4px; }

.miya-ct-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-bg);
  font-size: 14px;
  color: inherit;
  box-sizing: border-box;
  font-family: inherit;
}

.miya-ct-input--area { resize: vertical; min-height: 72px; }
.miya-ct-inline { display: flex; align-items: center; gap: 8px; }
.miya-ct-inline .miya-ct-input { flex: 1; }

.miya-ct-btn {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-surface);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.miya-ct-btn--primary { background: var(--mc-accent); color: #fff; border-color: var(--mc-accent); }
.miya-ct-divider { height: 1px; background: var(--mc-line); margin: 18px 0; }

/* ── 心声面板 · Heart Voice ── */
.mc-hv {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.38s var(--mc-ease), visibility 0.38s;
}

.mc-hv.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.mc-hv[hidden] { display: none !important; }

.mc-hv__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.72) 0%, transparent 70%),
    rgba(247, 247, 245, 0.58);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.mc-hv__sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: min(92vh, 780px);
  margin: 0 0 calc(var(--mc-safe-b) + 8px);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 249, 246, 0.96) 48%, rgba(242, 240, 236, 0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 -8px 48px rgba(0, 0, 0, 0.08),
    0 24px 80px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-radius: 28px 28px 18px 18px;
  overflow: hidden;
  transform: translateY(28px) scale(0.985);
  transition: transform 0.42s var(--mc-ease);
  display: flex;
  flex-direction: column;
}

.mc-hv.is-open .mc-hv__sheet { transform: translateY(0) scale(1); }

.mc-hv__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.mc-hv__deco-grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.mc-hv__deco-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

.mc-hv__deco-line--a { width: 140%; top: 18%; left: -20%; transform: rotate(-7deg); }
.mc-hv__deco-line--b { width: 120%; bottom: 32%; right: -15%; transform: rotate(5deg); opacity: 0.6; }

.mc-hv__deco-stamp {
  position: absolute;
  top: 18px;
  right: 72px;
  font-family: var(--mc-display);
  font-size: 9px;
  letter-spacing: 0.38em;
  color: rgba(0, 0, 0, 0.14);
  text-transform: uppercase;
  transform: rotate(-12deg);
}

.mc-hv__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mc-hv__head-tag {
  display: block;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: rgba(0, 0, 0, 0.28);
  margin-bottom: 4px;
}

.mc-hv__head-title {
  margin: 0;
  font-family: var(--mc-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.mc-hv__close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.mc-hv__close svg { width: 18px; height: 18px; }

.mc-hv__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.mc-hv__main {
  padding: 8px 22px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mc-hv__aside {
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(245, 243, 238, 0.82) 100%);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mc-hv__aside-head {
  padding: 12px 12px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.mc-hv__aside-title {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(0, 0, 0, 0.42);
}

.mc-hv__aside-count {
  display: block;
  margin-top: 4px;
  font-family: var(--mc-display);
  font-size: 20px;
  color: rgba(0, 0, 0, 0.78);
}

.mc-hv__hist {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 14px;
  -webkit-overflow-scrolling: touch;
}

.mc-hv__hist-item {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  padding: 10px 8px;
  cursor: pointer;
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
  transition: background 0.2s, border-color 0.2s;
}

.mc-hv__hist-item.is-active,
.mc-hv__hist-item:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.06);
}

.mc-hv__hist-idx {
  font-family: var(--mc-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(0, 0, 0, 0.32);
}

.mc-hv__hist-time {
  display: block;
  font-size: 9px;
  color: rgba(0, 0, 0, 0.38);
}

.mc-hv__hist-scores {
  display: block;
  font-size: 9px;
  color: rgba(0, 0, 0, 0.48);
  margin-top: 2px;
}

.mc-hv__hist-preview {
  display: block;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-hv__hist-empty,
.mc-hv__empty {
  padding: 32px 16px;
  text-align: center;
  color: rgba(0, 0, 0, 0.42);
  font-size: 13px;
}

.mc-hv__empty-ring {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 0, 0, 0.12);
}

.mc-hv__empty span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.32);
}

.mc-hv__hero {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.mc-hv__hero-portrait {
  position: relative;
  width: 88px;
  height: 88px;
}

.mc-hv__hero-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.mc-hv__hero-ring--b {
  inset: -12px;
  border-style: dashed;
  opacity: 0.45;
  animation: mc-hv-spin 18s linear infinite;
}

@keyframes mc-hv-spin { to { transform: rotate(360deg); } }

.mc-hv__hero-ava {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.mc-hv__hero-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 0.28em;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}

.mc-hv__hero-kicker {
  display: block;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: rgba(0, 0, 0, 0.34);
  margin-bottom: 4px;
}

.mc-hv__hero-name {
  margin: 0;
  font-family: var(--mc-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}

.mc-hv__hero-sub {
  margin: 6px 0 0;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.42);
}

.mc-hv__metrics {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 246, 242, 0.78) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mc-hv__metric-div {
  width: 1px;
  height: 72px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

.mc-hv__metric-label span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.mc-hv__metric-label em {
  display: block;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.32);
  margin-top: 2px;
}

.mc-hv__metric--aff .mc-hv__gauge-fill { stroke: rgba(180, 120, 120, 0.72); }
.mc-hv__metric--des .mc-hv__gauge-fill { stroke: rgba(120, 120, 160, 0.72); }

.mc-hv__gauge-svg {
  width: 88px;
  height: 88px;
  display: block;
  margin: 6px auto 0;
}

.mc-hv__gauge-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 4;
}

.mc-hv__gauge-fill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray 0.6s var(--mc-ease);
}

.mc-hv__gauge-num {
  font-family: var(--mc-display);
  font-size: 18px;
  fill: rgba(0, 0, 0, 0.78);
  text-anchor: middle;
}

.mc-hv__section { margin-bottom: 16px; }

.mc-hv__section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.mc-hv__section-no {
  font-family: var(--mc-display);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.28);
}

.mc-hv__section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.mc-hv__section-tag {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(0, 0, 0, 0.28);
  text-transform: uppercase;
}

.mc-hv__action-frame {
  position: relative;
  padding: 16px 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.mc-hv__action-frame p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.72);
}

.mc-hv__action-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.mc-hv__action-corner--tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.mc-hv__action-corner--br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

.mc-hv__quote {
  margin: 0;
  padding: 18px 20px 18px 28px;
  border-left: 2px solid rgba(0, 0, 0, 0.08);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 246, 242, 0.55) 100%);
  border-radius: 0 16px 16px 0;
  font-family: var(--mc-display);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(0, 0, 0, 0.82);
  position: relative;
}

.mc-hv__quote-mark {
  position: absolute;
  left: 8px;
  top: 6px;
  font-size: 28px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.12);
}

.mc-hv__quote-mark--end {
  position: static;
  margin-left: 2px;
}

.qq-room__bubble-ava--hv {
  cursor: pointer;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(0, 0, 0, 0.08),
    0 0 0 5px rgba(255, 255, 255, 0.45);
  transition: transform 0.22s var(--mc-ease), box-shadow 0.22s;
}

.qq-room__bubble-ava--hv:active { transform: scale(0.96); }

html.is-ios .miya-chat-app button,
html.is-ios .miya-chat-app [role="button"] {
  color: inherit;
}

html.is-ios .qq-room__input {
  -webkit-text-fill-color: var(--mc-ink);
}

@media (max-width: 520px) {
  .mc-hv__sheet { max-height: min(94vh, 820px); border-radius: 22px 22px 14px 14px; }
  .mc-hv__body { grid-template-columns: minmax(0, 1fr) 108px; }
  .mc-hv__main { padding: 6px 14px 16px; }
  .mc-hv__head { padding: 16px 16px 12px; }
  .mc-hv__head-title { font-size: 20px; }
  .mc-hv__hero { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .mc-hv__hero-portrait,
  .mc-hv__hero-ava { width: 72px; height: 72px; }
  .mc-hv__hero-name { font-size: 20px; }
  .mc-hv__metrics { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 8px; padding: 12px 10px; }
  .mc-hv__gauge-svg { width: 72px; height: 72px; }
  .mc-hv__metric-div { height: 56px; }
  .mc-hv__aside-head { padding: 10px 8px 6px; }
  .mc-hv__hist { padding: 6px 6px 10px; }
  .mc-hv__hist-item { padding: 8px 6px; }
  .mc-hv__quote { font-size: 14px; padding: 14px 14px 14px 22px; }
}

/* ── 手帐表单 · 外卖 / 送礼 ── */
.qq-room__overlay:has(.qq-journal) {
  align-items: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.35) 0%, transparent 65%),
    rgba(247, 245, 240, 0.62);
  backdrop-filter: blur(16px) saturate(1.1);
  padding: calc(var(--mc-safe-t) + 12px) 14px calc(var(--mc-safe-b) + 12px);
}

.qq-journal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(88vh, 680px);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.qq-journal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.qq-journal__veil,
.qq-journal__book {
  position: relative;
  z-index: 1;
}

.qq-journal__book {
  width: 100%;
  background:
    linear-gradient(168deg, #ffffff 0%, #faf8f4 38%, #f3f0ea 100%);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 22px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.qq-journal__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.qq-journal__clip {
  position: absolute;
  top: -8px;
  right: 28px;
  width: 18px;
  height: 42px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e8e4dc 0%, #d8d2c8 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transform: rotate(6deg);
  pointer-events: none;
}

.qq-journal__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 22px;
}

.qq-journal__grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.qq-journal__line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.07), transparent);
}

.qq-journal__line--a { width: 130%; top: 22%; left: -15%; transform: rotate(-8deg); }
.qq-journal__line--b { width: 110%; bottom: 30%; right: -10%; transform: rotate(5deg); opacity: 0.55; }

.qq-journal__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}

.qq-journal__orb--a {
  width: 120px;
  height: 120px;
  top: -20px;
  right: -10px;
  background: rgba(255, 255, 255, 0.85);
}

.qq-journal__orb--b {
  width: 90px;
  height: 90px;
  bottom: 10%;
  left: -20px;
  background: rgba(0, 0, 0, 0.03);
}

.qq-journal__head {
  padding: 22px 22px 12px 26px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.qq-journal__tag {
  display: block;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: rgba(0, 0, 0, 0.3);
  margin-bottom: 6px;
}

.qq-journal__title {
  margin: 0;
  font-family: var(--mc-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.qq-journal__sub {
  margin: 6px 0 0;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.42);
}

.qq-journal__body {
  padding: 14px 20px 8px 26px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.qq-journal__field {
  display: block;
  margin-bottom: 14px;
}

.qq-journal__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.qq-journal__label em {
  font-family: var(--mc-display);
  font-style: normal;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.28);
  min-width: 22px;
}

.qq-journal__label i {
  margin-left: auto;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.24);
  text-transform: uppercase;
}

.qq-journal__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  padding: 11px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--mc-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.qq-journal__input:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.16);
  background: #fff;
}

.qq-journal__input--area {
  resize: vertical;
  min-height: 56px;
  line-height: 1.55;
}

.qq-journal__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 18px calc(16px + var(--mc-safe-b)) 26px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.45);
}

.qq-journal__send {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--mc-accent);
  color: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.qq-journal__cancel {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 12px;
  cursor: pointer;
}

/* ── 外卖卡片 · 美食速递票据风（紧凑） ── */
.qq-room__bubble-wrap--card:has(.qq-card-to) {
  max-width: 248px;
}

.qq-card-to {
  --to-accent: #b07d52;
  --to-accent-soft: rgba(176, 125, 82, 0.14);
  --to-bg-a: #fffaf5;
  --to-bg-b: #f7ece0;
  position: relative;
  width: 100%;
  max-width: 236px;
  min-width: 0;
  padding: 0;
  border-radius: 3px 3px 12px 12px;
  border: 1px solid rgba(176, 125, 82, 0.2);
  background: linear-gradient(175deg, var(--to-bg-a) 0%, #fff6ec 42%, var(--to-bg-b) 100%);
  box-shadow:
    0 8px 22px rgba(176, 125, 82, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

.qq-card-to--out {
  --to-accent: #9a7358;
  --to-bg-a: #fff8f2;
  --to-bg-b: #f0e4d8;
}

.qq-card-to__wm {
  position: absolute;
  top: 18px;
  right: -4px;
  font-family: var(--mc-display);
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  color: rgba(176, 125, 82, 0.07);
  pointer-events: none;
  user-select: none;
}

.qq-card-to__grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
}

.qq-card-to__warm {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -40px;
  left: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 140, 0.22) 0%, transparent 68%);
  pointer-events: none;
}

.qq-card-to__perforation {
  position: relative;
  z-index: 2;
  height: 7px;
  margin: 0 8px;
  background:
    radial-gradient(circle, rgba(176, 125, 82, 0.32) 1.5px, transparent 2px) 0 50% / 8px 8px repeat-x;
  opacity: 0.5;
}

.qq-card-to__steam {
  position: absolute;
  top: 40px;
  left: 12px;
  display: flex;
  gap: 3px;
  pointer-events: none;
}

.qq-card-to__steam span {
  width: 2px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(176, 125, 82, 0.28), transparent);
  animation: qq-to-steam 2.8s ease-in-out infinite;
}

.qq-card-to__steam span:nth-child(2) { height: 16px; animation-delay: 0.4s; }
.qq-card-to__steam span:nth-child(3) { height: 11px; animation-delay: 0.8s; }

@keyframes qq-to-steam {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.35; }
  50% { transform: translateY(-4px) scaleY(1.15); opacity: 0.7; }
}

.qq-card-to__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px 6px;
}

.qq-card-to__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.qq-card-to__brand-text { min-width: 0; }

.qq-card-to__glyph {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--to-accent);
  background: var(--to-accent-soft);
  border: 1px solid rgba(176, 125, 82, 0.16);
}

.qq-card-to__glyph svg { width: 14px; height: 14px; }

.qq-card-to__title-cn {
  display: block;
  font-family: var(--mc-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(62, 42, 28, 0.92);
}

.qq-card-to__title-en {
  display: block;
  margin-top: 1px;
  font-size: 7px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(176, 125, 82, 0.68);
}

.qq-card-to__badge {
  flex: 0 0 auto;
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--to-accent);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(176, 125, 82, 0.2);
}

.qq-card-to__shop-band {
  position: relative;
  z-index: 1;
  margin: 0 10px 6px;
  padding: 9px 10px 8px;
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 248, 240, 0.72) 100%);
  border: 1px solid rgba(176, 125, 82, 0.12);
}

.qq-card-to__shop-tag {
  display: block;
  font-size: 7px;
  letter-spacing: 0.24em;
  color: rgba(176, 125, 82, 0.62);
  margin-bottom: 4px;
}

.qq-card-to__shop-name {
  margin: 0;
  font-family: var(--mc-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: rgba(42, 28, 18, 0.92);
}

.qq-card-to__rule {
  height: 1px;
  margin: 0 11px 6px;
  background: linear-gradient(90deg, transparent, rgba(176, 125, 82, 0.24), transparent);
}

.qq-card-to__block {
  position: relative;
  z-index: 1;
  padding: 0 10px 6px;
}

.qq-card-to__sec-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.qq-card-to__sec-no {
  font-family: var(--mc-display);
  font-size: 10px;
  color: rgba(176, 125, 82, 0.52);
}

.qq-card-to__sec-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(62, 42, 28, 0.82);
}

.qq-card-to__sec-en {
  margin-left: auto;
  font-size: 7px;
  letter-spacing: 0.16em;
  color: rgba(176, 125, 82, 0.48);
  text-transform: uppercase;
}

.qq-card-to__menu-sheet,
.qq-card-to__note-sheet {
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(176, 125, 82, 0.08);
}

.qq-card-to__block--note .qq-card-to__note-sheet {
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.95) 0%, rgba(255, 245, 235, 0.78) 100%);
}

.qq-card-to__items,
.qq-card-to__note-sheet p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(52, 36, 24, 0.82);
}

.qq-card-to__foot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 8px;
  align-items: end;
  padding: 8px 11px 10px;
  margin-top: 2px;
  border-top: 1px dashed rgba(176, 125, 82, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(247, 236, 224, 0.55) 100%);
}

.qq-card-to__total-wrap { grid-column: 1; }

.qq-card-to__total-label {
  display: block;
  font-size: 7px;
  letter-spacing: 0.22em;
  color: rgba(176, 125, 82, 0.58);
  margin-bottom: 1px;
}

.qq-card-to__total {
  font-family: var(--mc-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(42, 28, 18, 0.92);
}

.qq-card-to__total small {
  font-size: 12px;
  margin-right: 1px;
  color: var(--to-accent);
}

.qq-card-to__barcode {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 26px;
  opacity: 0.4;
}

.qq-card-to__barcode span {
  display: block;
  width: 2px;
  background: rgba(62, 42, 28, 0.55);
  border-radius: 1px;
}

.qq-card-to__barcode span:nth-child(1) { height: 60%; }
.qq-card-to__barcode span:nth-child(2) { height: 88%; }
.qq-card-to__barcode span:nth-child(3) { height: 45%; }
.qq-card-to__barcode span:nth-child(4) { height: 100%; }
.qq-card-to__barcode span:nth-child(5) { height: 72%; }
.qq-card-to__barcode span:nth-child(6) { height: 52%; }
.qq-card-to__barcode span:nth-child(7) { height: 92%; }
.qq-card-to__barcode span:nth-child(8) { height: 38%; }
.qq-card-to__barcode span:nth-child(9) { height: 78%; }
.qq-card-to__barcode span:nth-child(10) { height: 58%; }

.qq-card-to__stamp {
  grid-column: 1;
  font-size: 8px;
  letter-spacing: 0.34em;
  color: rgba(176, 125, 82, 0.48);
}

/* ── 礼品卡片 · 礼盒信笺风 ── */
.qq-card-gift {
  --gift-accent: #b8987a;
  --gift-accent-deep: #8f6f58;
  --gift-blush: #fff7f4;
  --gift-rose: #f3e4dc;
  position: relative;
  width: 100%;
  min-width: 240px;
  padding: 0 0 12px;
  border-radius: 6px 6px 18px 18px;
  border: 1px solid rgba(184, 152, 122, 0.24);
  background: linear-gradient(168deg, #ffffff 0%, var(--gift-blush) 38%, var(--gift-rose) 100%);
  box-shadow:
    0 16px 40px rgba(143, 111, 88, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

.qq-card-gift--out {
  --gift-accent: #a88872;
  --gift-blush: #fff9f6;
  --gift-rose: #efe0d8;
}

.qq-card-gift__wm {
  position: absolute;
  bottom: 24px;
  left: -8px;
  font-family: var(--mc-display);
  font-size: 96px;
  font-weight: 300;
  line-height: 1;
  color: rgba(184, 152, 122, 0.06);
  pointer-events: none;
}

.qq-card-gift__grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.qq-card-gift__sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%),
    linear-gradient(300deg, rgba(255, 220, 200, 0.18) 0%, transparent 50%);
  pointer-events: none;
}

.qq-card-gift__side-ribbon {
  position: absolute;
  top: 54px;
  right: -34px;
  width: 120px;
  text-align: center;
  font-size: 7px;
  letter-spacing: 0.34em;
  color: rgba(184, 152, 122, 0.42);
  transform: rotate(90deg);
  transform-origin: center;
  pointer-events: none;
}

.qq-card-gift__bow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 34px;
  pointer-events: none;
}

.qq-card-gift__bow-loop {
  position: absolute;
  top: 4px;
  width: 22px;
  height: 18px;
  border: 1.5px solid rgba(184, 152, 122, 0.45);
  border-radius: 50% 50% 0 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(243, 228, 220, 0.75));
}

.qq-card-gift__bow-loop--l { left: 8px; transform: rotate(-28deg); }
.qq-card-gift__bow-loop--r { right: 8px; transform: scaleX(-1) rotate(-28deg); }

.qq-card-gift__bow-knot {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #dcc4b0, #b8987a);
  box-shadow: 0 2px 6px rgba(143, 111, 88, 0.25);
}

.qq-card-gift__bow-tail {
  position: absolute;
  top: 22px;
  width: 3px;
  height: 28px;
  background: linear-gradient(180deg, rgba(184, 152, 122, 0.55), rgba(184, 152, 122, 0.08));
  border-radius: 999px;
}

.qq-card-gift__bow-tail--l { left: 26px; transform: rotate(8deg); }
.qq-card-gift__bow-tail--r { right: 26px; transform: rotate(-8deg); }

.qq-card-gift__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 34px 16px 10px;
}

.qq-card-gift__brand { min-width: 0; }

.qq-card-gift__title-cn {
  display: block;
  font-family: var(--mc-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(68, 44, 36, 0.9);
}

.qq-card-gift__title-en {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(184, 152, 122, 0.68);
}

.qq-card-gift__badge {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--gift-accent-deep);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(184, 152, 122, 0.22);
}

.qq-card-gift__stage {
  position: relative;
  z-index: 1;
  margin: 0 14px 12px;
  padding-top: 8px;
}

.qq-card-gift__lid {
  position: relative;
  height: 8px;
  margin: 0 12px -4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #faf0ea 0%, #ead9cf 100%);
  border: 1px solid rgba(184, 152, 122, 0.2);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.qq-card-gift__box {
  padding: 3px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.65), rgba(243, 228, 220, 0.45));
  border: 1px solid rgba(184, 152, 122, 0.18);
}

.qq-card-gift__box-inner {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px 14px 16px 12px;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 252, 250, 0.96) 0%, rgba(248, 236, 228, 0.88) 100%);
}

.qq-card-gift__emoji {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 28px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(243, 228, 220, 0.55) 100%);
  border: 1px solid rgba(184, 152, 122, 0.14);
  box-shadow: inset 0 -2px 8px rgba(184, 152, 122, 0.08);
}

.qq-card-gift__name {
  margin: 0;
  font-family: var(--mc-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: rgba(58, 36, 30, 0.92);
}

.qq-card-gift__qty {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(184, 152, 122, 0.72);
}

.qq-card-gift__wax {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #d4a896 0%, #a87862 100%);
  box-shadow:
    0 3px 10px rgba(143, 111, 88, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.qq-card-gift__wax span {
  font-family: var(--mc-display);
  font-size: 14px;
  color: rgba(255, 248, 244, 0.92);
  transform: rotate(-8deg);
}

.qq-card-gift__letter {
  position: relative;
  z-index: 1;
  margin: 0 14px;
  padding: 12px 14px 14px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 249, 246, 0.78) 100%);
  border: 1px solid rgba(184, 152, 122, 0.14);
  box-shadow: 0 4px 14px rgba(143, 111, 88, 0.06);
}

.qq-card-gift__letter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.qq-card-gift__letter-no {
  font-family: var(--mc-display);
  font-size: 11px;
  color: rgba(184, 152, 122, 0.55);
}

.qq-card-gift__letter-label {
  font-size: 8px;
  letter-spacing: 0.24em;
  color: rgba(184, 152, 122, 0.62);
}

.qq-card-gift__note {
  position: relative;
  margin: 0;
  padding: 0 4px 0 12px;
  border-left: 2px solid rgba(184, 152, 122, 0.22);
  font-family: var(--mc-display);
  font-size: 15px;
  line-height: 1.82;
  color: rgba(58, 36, 30, 0.86);
}

.qq-card-gift__quote-mark {
  color: rgba(184, 152, 122, 0.35);
  font-size: 18px;
  line-height: 0;
  vertical-align: -0.15em;
}

.qq-card-gift__quote-mark--end { margin-left: 2px; }

.qq-card-gift__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 2px;
}

.qq-card-gift__seal {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.qq-card-gift__seal-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184, 152, 122, 0.35);
  border-radius: 50%;
}

.qq-card-gift__seal-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(184, 152, 122, 0.22);
  border-radius: 50%;
}

.qq-card-gift__seal-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 8px;
  letter-spacing: 0.22em;
  color: rgba(184, 152, 122, 0.62);
}

.qq-card-gift__foot-tag {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(184, 152, 122, 0.48);
  text-transform: uppercase;
}