/* ICat 云养猫咪 AI 互动平台 — 主站「蜜桃橘奶油」+ 公益专区「珊瑚红白」 */

:root {
  --bg: #FFF8F3;
  --bg-card: #FFEFE4;
  --surface: #FFFFFF;
  --surface-2: #FFF6F0;
  --text: #4E3B33;
  --text-2: #99786A;
  --text-3: #BE9F8E;
  --primary: #F6A97F;
  --primary-d: #EFA45C;
  --primary-l: #FDE3D2;
  --secondary: #F3D0B4;
  --border: #F1DFD2;
  --border-s: #E9D2C1;
  --shadow: 0 6px 20px rgba(78, 59, 51, .08);
  --shadow-s: 0 2px 8px rgba(78, 59, 51, .06);
  --r: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  --w-bg: #FFF1ED;
  --w-card: #FFE4DE;
  --w-surface: #FFFFFF;
  --w: #E96A5B;
  --w-d: #C94F40;
  --w-deep: #8F3327;
  --w-border: #F6CFC6;

  --ok: #7FA86B;
  --warn: #DFA13C;
  --bad: #D9736B;
  --nav-h: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body.welfare { background: var(--w-bg); }

img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.35; }
p { margin: 0 0 10px; }
ul { margin: 0; padding-left: 20px; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  background: rgba(255, 248, 243, .92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}
body.welfare .nav { background: rgba(255, 241, 237, .94); border-bottom-color: var(--w-border); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; cursor: pointer; }
.brand-emoji { font-size: 22px; line-height: 1; }
.brand small { display: block; font-size: 11px; font-weight: 400; color: var(--text-2); letter-spacing: .5px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex: 1; }
.nav-links a {
  padding: 8px 14px; border-radius: var(--r-pill); font-size: 14px; color: var(--text-2);
  transition: background .15s, color .15s; white-space: nowrap;
}
.nav-links a:hover { background: var(--bg-card); color: var(--text); }
.nav-links a.active { background: var(--primary); color: #fff; }
body.welfare .nav-links a.active { background: var(--w); }
.nav-right { display: flex; align-items: center; gap: 10px; }
/* #nav-right 里现在同时有铃铛与用户名，用 flex 让两者并排而不是折行 */
.nav-right > #nav-right { display: flex; align-items: center; gap: 10px; }
.hamburger {
  display: none; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.hamburger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }

.drawer-mask {
  position: fixed; inset: 0; background: rgba(78, 59, 51, .35); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-mask.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 78%; max-width: 320px; z-index: 91;
  background: var(--surface); transform: translateX(105%); transition: transform .25s ease;
  padding: 18px; overflow-y: auto; box-shadow: -8px 0 24px rgba(78, 59, 51, .12);
}
.drawer.open { transform: translateX(0); }
.drawer a, .drawer .drawer-item {
  display: block; padding: 13px 14px; border-radius: var(--r-sm); color: var(--text);
  font-size: 15px; margin-bottom: 4px; min-height: 44px;
}
.drawer a.active { background: var(--primary-l); color: var(--w-deep); font-weight: 600; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; min-height: 42px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: transform .12s, box-shadow .12s, background .15s;
  background: var(--surface); color: var(--text);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(246, 169, 127, .35); }
.btn-primary:hover { background: var(--primary-d); }
.btn-ghost { background: transparent; border-color: var(--border-s); color: var(--text); }
.btn-ghost:hover { background: var(--bg-card); }
.btn-secondary { background: var(--secondary); color: var(--w-deep); }
.btn-soft { background: var(--primary-l); color: var(--w-deep); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 14px; min-height: 34px; font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
body.welfare .btn-primary { background: var(--w); box-shadow: 0 4px 12px rgba(233, 106, 91, .32); }
body.welfare .btn-primary:hover { background: var(--w-d); }
body.welfare .btn-soft { background: var(--w-card); color: var(--w-deep); }

/* ---------- 通用块 ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 20px; box-shadow: var(--shadow-s);
}
body.welfare .card { border-color: var(--w-border); }
.section { padding: 34px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h2 { font-size: 20px; }
.section-head .sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--text-2); font-size: 13px; }
.tiny { font-size: 12px; color: var(--text-3); }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }

.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--bg-card); color: var(--text-2); font-size: 12px; white-space: nowrap;
}
.tag-solid { background: var(--primary-l); color: var(--w-deep); }
.tag-w { background: var(--w-card); color: var(--w-deep); }
.tag-ok { background: #EAF3E6; color: #4F7A3C; }
.tag-warn { background: #FBF0DC; color: #96631A; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 24px; margin-top: 24px;
  background: linear-gradient(160deg, #FFEFE4 0%, #FFF8F3 62%);
  border: 1px solid var(--border); padding: 40px;
}
body.welfare .hero { background: linear-gradient(160deg, #FFE4DE 0%, #FFF1ED 62%); border-color: var(--w-border); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; }
.hero h1 { font-size: 34px; letter-spacing: -.5px; margin-bottom: 12px; }
.hero .lead { font-size: 15px; color: var(--text-2); max-width: 520px; margin-bottom: 22px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cat { display: flex; justify-content: center; align-items: center; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- 统计看板 ---------- */
.stat-card { background: var(--bg-card); border-radius: var(--r); padding: 18px; text-align: center; }
body.welfare .stat-card { background: var(--w-card); }
.stat-num { font-size: 28px; font-weight: 700; color: var(--w-deep); line-height: 1.2; }
.stat-label { font-size: 13px; color: var(--text-2); margin-top: 2px; }

/* ---------- 猫咪卡片 ---------- */
.cat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  cursor: pointer; transition: transform .16s, box-shadow .16s; display: flex; flex-direction: column;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
body.welfare .cat-card { border-color: var(--w-border); }
.cat-thumb {
  position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, var(--primary-l) 0%, #FFF3E9 70%);
}
body.welfare .cat-thumb { background: radial-gradient(circle at 50% 42%, var(--w-card) 0%, #FFF3F0 70%); }
.cat-thumb .play-badge {
  position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .92); border-radius: var(--r-pill);
  padding: 4px 10px; font-size: 12px; color: var(--w-deep); display: flex; align-items: center; gap: 4px;
}
.cat-thumb .status-badge { position: absolute; right: 10px; top: 10px; }
.cat-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cat-name { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cat-meta { font-size: 12.5px; color: var(--text-2); }
.cat-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- 筛选 ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-label { font-size: 12.5px; color: var(--text-3); }
.chip {
  padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-s); background: var(--surface);
  font-size: 13px; cursor: pointer; color: var(--text-2); transition: .15s; min-height: 36px;
}
.chip:hover { background: var(--bg-card); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
body.welfare .chip.on { background: var(--w); border-color: var(--w); }

/* ---------- 属性条 ---------- */
.attr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.attr-name { width: 62px; font-size: 13px; color: var(--text-2); flex: none; }
.attr-bar { flex: 1; height: 10px; border-radius: var(--r-pill); background: var(--bg-card); overflow: hidden; }
.attr-fill { height: 100%; border-radius: var(--r-pill); transition: width .5s ease; }
.attr-val { width: 38px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); flex: none; }

/* ---------- 操作按钮组 ---------- */
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.action-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: .15s;
  font-size: 13px; color: var(--text); min-height: 74px;
}
.action-btn:hover { background: var(--bg-card); border-color: var(--primary); }
.action-btn .ico { font-size: 22px; line-height: 1; }
.action-btn .cost { font-size: 11px; color: var(--text-3); }
.action-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- 折叠面板 ---------- */
.collapse { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
body.welfare .collapse { border-color: var(--w-border); }
.collapse + .collapse { margin-top: 10px; }
.collapse-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: #FDF6EF; border: 0; cursor: pointer; font-size: 14px; font-weight: 500;
  color: var(--text); text-align: left; min-height: 48px;
}
body.welfare .collapse-head { background: var(--w-bg); color: var(--w-deep); }
.collapse-head .caret { transition: transform .2s; font-size: 12px; color: var(--text-3); }
.collapse.open .collapse-head .caret { transform: rotate(180deg); }
.collapse-body { padding: 16px; border-top: 1px solid var(--border); }
body.welfare .collapse-body { border-top-color: var(--w-border); }
.collapse-body[hidden] { display: none; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--border-s);
  background: var(--surface); font-size: 15px; color: var(--text); min-height: 44px; font-family: inherit;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(246, 169, 127, .18); }
.field-error { color: var(--bad); font-size: 12.5px; margin-top: 5px; }
.form-hint { font-size: 12.5px; color: var(--text-3); }
.code-row { display: flex; gap: 8px; }
.code-row .input { flex: 1; }

.tabs { display: flex; gap: 6px; background: var(--bg-card); padding: 4px; border-radius: var(--r-pill); margin-bottom: 18px; }
.tabs button {
  flex: 1; padding: 9px; border: 0; background: transparent; border-radius: var(--r-pill); cursor: pointer;
  font-size: 14px; color: var(--text-2); min-height: 40px;
}
.tabs button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-s); }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(78, 59, 51, .38); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: var(--r); width: 100%; max-width: 460px; max-height: 88vh;
  overflow-y: auto; box-shadow: 0 20px 50px rgba(78, 59, 51, .22); animation: pop .18s ease;
}
.modal.wide { max-width: 620px; }
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.modal-head h3 { font-size: 17px; }
.modal-body { padding: 16px 20px 20px; }
.modal-close { border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--text-3); width: 36px; height: 36px; border-radius: 50%; }
.modal-close:hover { background: var(--bg-card); }

/* ---------- Toast ---------- */
.toast-root { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 40px); max-width: 420px; }
.toast {
  background: rgba(78, 59, 51, .94); color: #fff; padding: 11px 18px; border-radius: var(--r-pill);
  font-size: 13.5px; animation: toastIn .22s ease; max-width: 100%; text-align: center;
}
.toast.ok { background: rgba(90, 130, 76, .95); }
.toast.bad { background: rgba(190, 96, 88, .95); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 挂件（PC 与手机统一形态：可拖拽浮窗 + 互动菜单） ---------- */
.widget {
  position: fixed; right: 24px; bottom: 24px; z-index: 80; width: 132px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 12px 30px rgba(78, 59, 51, .18); padding: 8px 8px 10px; cursor: grab; user-select: none;
  transition: box-shadow .2s; touch-action: none;
}
/* 手机端同款挂件，仅缩小尺寸 */
.widget.sm { width: 100px; padding: 6px 6px 8px; border-radius: 16px; right: 14px; bottom: 14px; }
.widget.sm img.cat-avatar-img { width: 84px !important; height: 84px !important; }
.widget.sm .widget-caption { font-size: 10px; }
.widget.sm .widget-tools { top: -10px; right: -10px; }
.widget.sm .widget-btn { width: 28px; height: 28px; font-size: 15px; }
.widget.dragging { cursor: grabbing; box-shadow: 0 18px 40px rgba(78, 59, 51, .28); }
.widget-tools { position: absolute; top: -9px; right: -9px; display: none; gap: 5px; z-index: 4; }
.widget:hover .widget-tools, .widget.sm .widget-tools { display: flex; }
.widget-btn {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-3); font-size: 14px; cursor: pointer;
  line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.widget-btn:active { transform: scale(.92); }
.widget-bubble {
  position: absolute; bottom: calc(100% + 10px); right: 0; background: var(--w-deep); color: #fff;
  font-size: 12px; padding: 7px 12px; border-radius: 12px; white-space: nowrap; max-width: 220px;
  animation: bubbleIn .2s ease; overflow: hidden; text-overflow: ellipsis;
}
.widget-bubble::after {
  content: ""; position: absolute; right: 22px; top: 100%; border: 6px solid transparent; border-top-color: var(--w-deep);
}
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.widget-caption { text-align: center; font-size: 11.5px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-mask { position: fixed; inset: 0; background: rgba(78, 59, 51, .38); z-index: 100; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 101; background: var(--surface);
  border-radius: 22px 22px 0 0; padding: 18px 18px 28px; animation: sheetUp .22s ease; max-height: 76vh; overflow-y: auto;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grip { width: 42px; height: 4px; border-radius: 4px; background: var(--border-s); margin: 0 auto 14px; }

/* ---------- 其他 ---------- */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--bg-card); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); border-radius: var(--r-pill); transition: width .5s; }
body.welfare .progress > i { background: var(--w); }

.empty { text-align: center; padding: 48px 20px; color: var(--text-2); }
.empty .ico { font-size: 42px; margin-bottom: 10px; }
.skeleton { background: linear-gradient(90deg, #FFF3EA 25%, #FFE9DA 37%, #FFF3EA 63%); background-size: 400% 100%; animation: sk 1.2s infinite; border-radius: var(--r-sm); }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.list-item:last-child { border-bottom: 0; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-l); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
body.welfare .avatar { background: var(--w-card); }

.footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 26px 0 34px; color: var(--text-3); font-size: 12.5px; }
body.welfare .footer { border-top-color: var(--w-border); }

.banner {
  border-radius: var(--r); padding: 14px 18px; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border);
}
.banner.warn { background: #FDF3E3; border-color: #F1DCB8; color: #8A5D18; }
.banner.w { background: var(--w-card); border-color: var(--w-border); color: var(--w-deep); }

/* 猫咪动画 */
.cat-svg { display: block; }
.cat-svg .tail { transform-origin: 168px 176px; animation: tailSway 3.4s ease-in-out infinite; }
.cat-svg .ear-l { transform-origin: 84px 60px; animation: earTwitch 5s ease-in-out infinite; }
.cat-svg .ear-r { transform-origin: 156px 60px; animation: earTwitch 5.6s ease-in-out .6s infinite; }
.cat-svg .body-grp { animation: idleBob 3s ease-in-out infinite; }
.cat-svg .eyes { animation: blink 5.2s infinite; transform-origin: 120px 102px; }
@keyframes tailSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
@keyframes earTwitch { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-7deg); } 96% { transform: rotate(4deg); } }
@keyframes idleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.cat-svg.happy .body-grp { animation: hop .5s ease; }
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-16px); } 100% { transform: translateY(0); } }
.cat-svg.sleepy .eyes { animation: none; transform: scaleY(.12); }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
  :root { --r: 12px; --nav-h: 58px; }
  body { font-size: 15px; }
  .container { padding: 0 14px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  /* 手机端：折叠按钮与用户名统一靠到最右侧 */
  .nav-inner { gap: 10px; }
  .nav-right { margin-left: auto; gap: 8px; }
  .nav-bell { width: 36px; height: 36px; font-size: 16px; }
  .hamburger { width: 40px; height: 40px; }
  .brand { flex: none; }
  .hero { padding: 24px 18px; border-radius: 18px; margin-top: 14px; }
  .hero h1 { font-size: 24px; }
  .hero .lead { font-size: 14px; }
  .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hero-bg { order: -1; }
  .hero-actions .btn { flex: 1; }
  .section { padding: 22px 0; }
  .section-head { margin-bottom: 14px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-head h2 { font-size: 18px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card { padding: 16px; }
  .btn { min-height: 46px; padding: 11px 18px; }
  .btn-sm { min-height: 40px; }
  .chip { min-height: 40px; padding: 9px 15px; }
  .action-grid { grid-template-columns: repeat(3, 1fr); }
  .modal { max-width: 100%; }
  /* 表格转卡片 */
  .rtable { display: block; }
  .rtable thead { display: none; }
  .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable tr { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
  .rtable td { border: 0; padding: 4px 0; display: flex; gap: 10px; }
  .rtable td::before { content: attr(data-label); color: var(--text-3); font-size: 12.5px; min-width: 72px; flex: none; }
}

@media (min-width: 1024px) {
  .drawer, .drawer-mask { display: none !important; }
}

table.rtable { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rtable th, table.rtable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.rtable th { font-size: 12.5px; color: var(--text-2); font-weight: 500; background: var(--surface-2); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==================================================================
   社区 / 商城 / 健康档案 / 小游戏 / AI 对话 / 后台管理
   ================================================================== */

/* ---------- 导航未读角标 ---------- */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: var(--r-pill); background: var(--w); color: #fff;
  font-size: 11.5px; font-weight: 600; cursor: pointer; vertical-align: middle;
}
/* 铃铛按钮：消息红点挂在右上角，点一下直接跳到消息区块 */
.nav-bell {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .15s;
}
.nav-bell:hover { border-color: var(--primary); transform: translateY(-1px); }
.nav-bell .nav-badge {
  position: absolute; top: -5px; right: -5px; margin: 0; height: 18px; min-width: 18px;
  padding: 0 5px; font-size: 11px; box-shadow: 0 0 0 2px var(--surface);
}
#nav-user-btn .nick { display: inline-block; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* 跳到消息区块时的醒目提示 */
@keyframes collapseFlash {
  0% { box-shadow: 0 0 0 0 rgba(233, 106, 91, 0); }
  25% { box-shadow: 0 0 0 4px rgba(233, 106, 91, .35); }
  100% { box-shadow: 0 0 0 0 rgba(233, 106, 91, 0); }
}
.collapse.flash { animation: collapseFlash 1s ease-out 2; border-radius: var(--r); }

/* 从铃铛跳过来时，落点就是最新一条消息：给它一个呼吸底色，比整块卡片发光更直观 */
#msg-items { border-radius: var(--r-sm); }
#msg-items.msg-flash { animation: msgFlash 1.1s ease-out 2; }
@keyframes msgFlash {
  0% { background: rgba(246, 169, 127, .30); box-shadow: 0 0 0 10px rgba(246, 169, 127, .30); }
  100% { background: transparent; box-shadow: 0 0 0 10px rgba(246, 169, 127, 0); }
}
body.welfare #msg-items.msg-flash { animation-name: msgFlashW; }
@keyframes msgFlashW {
  0% { background: rgba(233, 106, 91, .22); box-shadow: 0 0 0 10px rgba(233, 106, 91, .22); }
  100% { background: transparent; box-shadow: 0 0 0 10px rgba(233, 106, 91, 0); }
}

/* ---------- 社区 ---------- */
.post-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px; box-shadow: 0 2px 10px var(--shadow);
}
.post-head { display: flex; align-items: center; gap: 10px; }
.post-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-card); display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.post-avatar.sm { width: 30px; height: 30px; font-size: 15px; }
.post-title { font-size: 16.5px; margin: 12px 0 6px; cursor: pointer; line-height: 1.45; }
.post-title:hover { color: var(--primary-d); }
.post-body { font-size: 13.5px; color: var(--text-2); line-height: 1.7; margin: 0; cursor: pointer; }
.post-full { font-size: 14.5px; line-height: 1.85; color: var(--text); margin: 0; white-space: pre-wrap; }
.post-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.btn.liked { color: var(--w-deep); }
.cm-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.cm-item:last-of-type { border-bottom: 0; }
.cm-text { font-size: 13.5px; line-height: 1.7; margin-top: 4px; white-space: pre-wrap; }

/* ---------- 商城 ---------- */
.shop-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 10px var(--shadow);
}
.shop-thumb {
  height: 108px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--bg-card), var(--primary-l)); font-size: 46px;
}
.shop-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.shop-price { font-size: 16px; color: var(--primary-d); }

/* ---------- 键值行 / 时间轴 ---------- */
.kv { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.kv:last-child { border-bottom: 0; }
.kv-k { flex: none; width: 88px; color: var(--text-3); }
.kv-v { flex: 1; color: var(--text); line-height: 1.6; }
.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--border-s); }
.tl-item { position: relative; padding: 0 0 16px 6px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -18px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--surface);
}
.tl-body { font-size: 13.5px; }

/* ---------- 小游戏 ---------- */
.game-card { cursor: pointer; }
.game-thumb {
  position: relative; height: 132px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--bg-card), var(--primary-l));
}
.game-thumb svg { display: block; width: 100%; height: 100%; }
.game-emoji { font-size: 52px; line-height: 1; }
/* 游戏卡缩略图上的「开始玩」徽标：固定为右下角胶囊，
 * 不再作为 flex 子项被挤到图片右边竖排折行 */
.game-thumb .play-badge {
  position: absolute; right: 10px; bottom: 10px; white-space: nowrap;
  background: rgba(255, 255, 255, .92); border-radius: var(--r-pill);
  padding: 4px 12px; font-size: 12px; color: var(--w-deep); font-weight: 600;
  box-shadow: 0 2px 8px rgba(78, 59, 51, .12);
}
/* 游戏内页右侧信息栏：得分 / 奖励并排铺满，避免大片留白 */
.game-side-stats { display: flex; gap: 18px; }
.game-side-stats > div { flex: 1; min-width: 0; }
.game-side-stats > div + div { border-left: 1px dashed var(--border); padding-left: 18px; }
.game-wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.game-stage {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 10px; box-shadow: 0 2px 10px var(--shadow);
}
.game-canvas { display: block; border-radius: 12px; touch-action: none; cursor: pointer; }
.game-score { font-size: 34px; font-weight: 700; color: var(--primary-d); line-height: 1.2; }
.game-reward { font-size: 15px; color: var(--text-2); }
/* 游戏卡上的个人最高分 */
.game-best {
  flex: none; font-size: 11.5px; color: var(--w-deep); font-weight: 600;
  background: var(--w-bg); border: 1px solid var(--w-border); border-radius: var(--r-pill); padding: 2px 9px;
}
.game-card[hidden] { display: none; }
#game-filter .chip { cursor: pointer; }

/* 养猫知识问答（DOM 版游戏） */
.qz-top { margin-bottom: 12px; }
.qz-bar { height: 8px; border-radius: var(--r-pill); background: var(--bg-card); overflow: hidden; }
.qz-bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s ease; }
.qz-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.qz-q {
  font-size: 16px; font-weight: 600; line-height: 1.5; margin: 6px 0 14px;
  display: flex; gap: 8px; align-items: flex-start;
}
.qz-q .qz-no {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-l);
  color: var(--primary-d); font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.qz-opts { display: grid; gap: 9px; }
.qz-opt {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--border-s); background: var(--surface); border-radius: var(--r-sm);
  padding: 12px 14px; font-size: 14.5px; color: var(--text); transition: .16s; min-height: 46px;
}
.qz-opt:hover { border-color: var(--primary); background: var(--surface-2); }
.qz-opt b {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-card); color: var(--text-2);
  font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center;
}
.qz-opt.right { border-color: var(--ok); background: #F3F8EE; }
.qz-opt.right b { background: var(--ok); color: #fff; }
.qz-opt.wrong { border-color: var(--bad); background: #FDF0EE; }
.qz-opt.wrong b { background: var(--bad); color: #fff; }
.qz-tip { margin-top: 12px; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.qz-tip.ok { color: var(--ok); }
.qz-tip.bad { color: var(--bad); }

/* 记忆翻牌 */
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mm-card {
  aspect-ratio: 3 / 4; border: 1px solid var(--border-s); border-radius: 12px;
  background: linear-gradient(150deg, var(--bg-card), var(--primary-l));
  font-size: 26px; cursor: pointer; transition: .18s; padding: 0;
}
.mm-card:hover { transform: translateY(-2px); }
.mm-card .mm-face { opacity: 0; transition: opacity .15s; }
.mm-card.open .mm-face, .mm-card.done .mm-face { opacity: 1; }
.mm-card.open { background: var(--surface); border-color: var(--primary); }
.mm-card.done { background: var(--primary-l); border-color: var(--primary); cursor: default; }
.mm-bar { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--text-2); }

/* ---------- AI 对话 ---------- */
.chat-wrap { max-width: 780px; }
.chat-log {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px; min-height: 300px; max-height: 460px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.chat-msg { display: flex; }
.chat-msg.me { justify-content: flex-end; }
.chat-bubble {
  max-width: 82%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.75;
  background: var(--bg-card); color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.chat-msg.me .chat-bubble { background: var(--primary); color: #fff; }
.chat-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chat-input { display: flex; gap: 10px; }
.chat-input .input { flex: 1; }
.typing { color: var(--text-3); font-size: 13px; }

/* ---------- 后台管理 ---------- */
.input.sm { min-height: 34px; padding: 6px 10px; font-size: 13px; width: auto; }
.list-item.unread { background: var(--primary-l); }

/* ---------- 可点击卡片 / 页脚导航 / 加入我们 ---------- */
.card-link { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-m, 0 6px 18px rgba(78, 59, 51, .10)); border-color: var(--primary); }
.flink { color: var(--text-3); text-decoration: none; }
.flink:hover { color: var(--primary); }
.card ul { padding-left: 0; }

@media (max-width: 1023px) {
  .game-wrap { grid-template-columns: minmax(0, 1fr); }
  .chat-log { max-height: 58vh; }
  .post-full { font-size: 14px; }
  .chat-bubble { max-width: 90%; }
}

@media (max-width: 1279px) {
  .nav-links a { padding: 6px 9px; font-size: 13px; }
}

@media (max-width: 639px) {
  .nav-links a { padding: 5px 7px; font-size: 12.5px; }
  .card { padding: 16px; }
  /* 极窄屏优先保住「折叠按钮 + 用户名」在右侧的位置 */
  .brand small { display: none; }
  .brand { font-size: 16px; }
  #nav-user-btn { padding: 8px 11px; font-size: 13px; }
  #nav-user-btn .nick { max-width: 5.5em; }
  .drawer { width: 86%; }
}

/* ---------- 身世视频自动生成器 ---------- */
.sv-wrap { display: block; }
.sv-stage { border-radius: 16px; overflow: hidden; background: #3B2B24; box-shadow: 0 10px 30px rgba(78, 59, 51, .18); }
.sv-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.sv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sv-bar .sv-time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-3); }
.sv-bar .sv-scene { font-size: 13px; color: var(--text-3); }
.sv-grow { flex: 1 1 auto; }
.sv-progress { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 10px; cursor: pointer; }
.sv-progress > i { display: block; height: 100%; background: var(--primary); transition: width .12s linear; }
.sv-note { margin-top: 8px; }
.sv-scenes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sv-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--text-2);
  font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.sv-chip b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-l); color: var(--primary-d); font-size: 11px; }
.sv-chip.on { border-color: var(--primary); background: var(--primary-l); color: var(--primary-d); }

/* ---------- 任务中心：完成条件 ---------- */
.task-req { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.task-req b { color: var(--primary-d); }

/* ---------- 科普阅读 ---------- */
.know-card { cursor: pointer; }
.know-card[hidden] { display: none; }
#know-filter .chip { cursor: pointer; }
.know-body { font-size: 15px; line-height: 1.9; color: var(--text-2); }
.know-body h4 { margin: 18px 0 6px; }
.know-progress { position: sticky; top: 0; z-index: 3; background: var(--card); padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ---------- 领养锁定 ---------- */
.cat-card.locked { opacity: .78; }
.cat-card.locked .cat-thumb { filter: grayscale(.45); }
.lock-strip {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px;
  background: var(--primary-l); color: var(--primary-d); font-size: 13.5px; font-weight: 600;
}
.helper-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.helper-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok, #7FA86B); }

/* ---------- 真实照片与详情页媒体区 ---------- */
.cat-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; z-index: 1;
}
.cat-card .cat-thumb { overflow: hidden; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.cat-card:hover .cat-photo { transform: scale(1.05); }
.cat-photo { transition: transform .45s ease; }
.media-switch { display: inline-flex; gap: 6px; margin-bottom: 12px; }
.cat-media { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; }
.media-pane {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .25s ease;
  background: radial-gradient(circle at 50% 42%, var(--primary-l) 0%, #FFF3E9 70%);
}
.media-pane.on { opacity: 1; pointer-events: auto; }
.media-pane .cat-photo.big { position: static; width: 100%; height: 100%; object-fit: cover; border-radius: 0; z-index: 0; }
.media-pane .media-note {
  position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .92);
  border-radius: var(--r-pill); padding: 4px 12px; font-size: 12px; color: var(--w-deep); z-index: 2;
}

/* ---------- 危险操作按钮 ---------- */
.btn-danger { background: #FBE7E4; color: var(--bad); border: 1px solid #F4CFC9; }
.btn-danger:hover { background: #F7D9D4; }

/* ---------- 积分包选择 ---------- */
.ip-card { border: 1.5px solid var(--border); transition: all .18s ease; }
.ip-card.on { border-color: var(--primary); background: var(--surface-2); box-shadow: 0 4px 14px rgba(246, 169, 127, .22); }
.ip-tag { position: absolute; right: 8px; top: 8px; font-size: 11px; }

/* ---------- 猫咪档案时间线 ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 16px 12px; }
.tl-item:last-child { padding-bottom: 2px; }
.tl-dot {
  position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--primary);
}
.tl-dot.tag-ok { border-color: var(--ok); }
.tl-dot.tag-warn { border-color: var(--warn); }
.tl-dot.tag-solid { border-color: var(--primary-d); background: var(--primary-l); }
.tl-body { font-size: 14px; line-height: 1.6; }
.tl-body .tiny { margin-top: 4px; }

/* ---------- 虚拟猫屋场景 ----------
 * container-type 让 1cqw = 房间宽度的 1%，所有家具都用它定尺寸，
 * 这样窗口缩放时家具和猫咪始终按同一比例缩放，不会出现「房子变大猫没变」。 */
.room {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 260px;
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-s); isolation: isolate;
  container-type: inline-size;
}
.room-wall {
  position: absolute; inset: 0 0 26% 0; z-index: 0;
  background: linear-gradient(180deg, #FFF1E6 0%, #FFE6D6 100%);
}
.room-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #F0C79E 0%, #E3B489 100%);
}
.room-window {
  position: absolute; left: 55%; top: 9%; width: 26%; height: 40%; z-index: 0;
  border-radius: 8px; background: linear-gradient(180deg, #CDE8F5 0%, #E8F6FC 100%);
  border: 5px solid #FFF; box-shadow: 0 2px 8px rgba(78, 59, 51, .12); overflow: hidden;
}
.room-window::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: #FFF; transform: translateX(-50%);
}
.room-hill { position: absolute; left: -20%; bottom: -30%; width: 90%; height: 55%; border-radius: 50%; background: #BFDCB4; opacity: .85; }
.room-cloud {
  position: absolute; left: 14%; top: 16%; width: 34px; height: 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .95); animation: roomCloud 14s linear infinite;
}
@keyframes roomCloud {
  0% { left: -18%; } 100% { left: 105%; }
}
.room-sun {
  position: absolute; right: 8%; top: 8%; width: 54px; height: 54px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, #FFE7A8 0%, #FFD68A 60%, rgba(255, 214, 138, 0) 72%);
  animation: roomSun 4.5s ease-in-out infinite;
}
@keyframes roomSun {
  0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.08); opacity: 1; }
}
.room-cat {
  position: absolute; left: 50%; bottom: 19%; transform: translateX(-50%); z-index: 3;
  filter: drop-shadow(0 6px 8px rgba(78, 59, 51, .18));
  animation: roomIdle 5s ease-in-out infinite;
}
.room-cat svg { width: auto; height: 15cqw; display: block; }
@keyframes roomIdle {
  0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); }
}
.room-slot {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; transition: all .2s ease;
}
.room-slot.has { background: rgba(255, 255, 255, .45); box-shadow: 0 3px 10px rgba(78, 59, 51, .1); animation: slotPop .45s ease; align-items: flex-end; justify-content: center; }
.room-slot.has:hover { background: rgba(255, 255, 255, .8); transform: translateY(-3px); }
.room-emoji { font-size: calc(var(--es, 6) * 1cqw); line-height: 1; }
.room-slot:not(.has) {
  border: 1.5px dashed var(--border-s); background: rgba(255, 255, 255, .35);
  flex-direction: column; gap: 2px; cursor: help;
}
.room-lock { font-size: 13px; opacity: .55; }
.room-price { font-size: 1.6cqw; color: var(--text-3); white-space: nowrap; }
.room-lock { font-size: 2cqw; }
@keyframes slotPop {
  0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; }
}
.room-label {
  position: absolute; left: 12px; bottom: 10px; z-index: 4; font-size: 12px; color: var(--w-deep);
  background: rgba(255, 255, 255, .9); border-radius: var(--r-pill); padding: 4px 12px;
}

/* ---------- UI 细节打磨 ---------- */
.btn { transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btn:active { transform: scale(.97); }
.card { transition: box-shadow .25s ease, transform .25s ease; }
.chip { transition: all .18s ease; }
.list-item { transition: background .18s ease; }
.list-item:hover { background: var(--surface-2); }
.list-item.unread { border-left: 3px solid var(--primary); }
.collapse-head:hover { color: var(--primary-d); }
.collapse-head { transition: color .18s ease, background .18s ease; }
.shop-card, .know-card { transition: transform .22s ease, box-shadow .25s ease; }
.shop-card:hover, .know-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.empty { text-align: center; color: var(--text-2); }

/* ---------- 首页头部视频背景（整幅铺满 + 径向遮罩，四角与边缘融进底色） ---------- */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.8s ease;
  /* 椭圆径向遮罩：中心完整显示，向四周（含四角）逐渐透明，贴到 hero 底色上没有接缝 */
  -webkit-mask-image: radial-gradient(ellipse 76% 92% at 58% 50%, #000 34%, rgba(0, 0, 0, .72) 60%, rgba(0, 0, 0, 0) 96%);
  mask-image: radial-gradient(ellipse 76% 92% at 58% 50%, #000 34%, rgba(0, 0, 0, .72) 60%, rgba(0, 0, 0, 0) 96%);
}
.hero-video.ready { opacity: 1; }
.hero-fallback {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease;
}
.hero-bg.has-video .hero-fallback { opacity: 0; }
.hero-bg.video-failed .hero-fallback { opacity: 1; }
.hero-bg.video-failed .hero-video { display: none; }
/* 文案保护层：左侧几乎不透明，向右渐隐，保证标题可读同时不挡住视频主体 */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 248, 243, .95) 0%, rgba(255, 248, 243, .82) 38%, rgba(255, 248, 243, .28) 68%, rgba(255, 248, 243, .62) 100%);
}
body.welfare .hero-scrim { background: linear-gradient(90deg, rgba(255, 241, 237, .95) 0%, rgba(255, 241, 237, .82) 38%, rgba(255, 241, 237, .28) 68%, rgba(255, 241, 237, .62) 100%); }
.hero-grid { position: relative; z-index: 2; }

/* ---------- 真实照片与详情页媒体区 ---------- */
.cat-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; z-index: 1;
}
.cat-card .cat-thumb { overflow: hidden; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.cat-card:hover .cat-photo { transform: scale(1.05); }
.cat-photo { transition: transform .45s ease; }
.media-switch { display: inline-flex; gap: 6px; margin-bottom: 12px; }
.cat-media { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; }
.media-pane {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .25s ease;
  background: radial-gradient(circle at 50% 42%, var(--primary-l) 0%, #FFF3E9 70%);
}
.media-pane.on { opacity: 1; pointer-events: auto; }
.media-pane .cat-photo.big { position: static; width: 100%; height: 100%; object-fit: cover; border-radius: 0; z-index: 0; }
.media-pane .media-note {
  position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .92);
  border-radius: var(--r-pill); padding: 4px 12px; font-size: 12px; color: var(--w-deep); z-index: 2;
}

/* ---------- 危险操作按钮 ---------- */
.btn-danger { background: #FBE7E4; color: var(--bad); border: 1px solid #F4CFC9; }
.btn-danger:hover { background: #F7D9D4; }

/* ---------- 积分包选择 ---------- */
.ip-card { border: 1.5px solid var(--border); transition: all .18s ease; }
.ip-card.on { border-color: var(--primary); background: var(--surface-2); box-shadow: 0 4px 14px rgba(246, 169, 127, .22); }
.ip-tag { position: absolute; right: 8px; top: 8px; font-size: 11px; }

/* ---------- 猫咪档案时间线 ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 16px 12px; }
.tl-item:last-child { padding-bottom: 2px; }
.tl-dot {
  position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--primary);
}
.tl-dot.tag-ok { border-color: var(--ok); }
.tl-dot.tag-warn { border-color: var(--warn); }
.tl-dot.tag-solid { border-color: var(--primary-d); background: var(--primary-l); }
.tl-body { font-size: 14px; line-height: 1.6; }
.tl-body .tiny { margin-top: 4px; }

/* ---------- 虚拟猫屋场景 ----------
 * container-type 让 1cqw = 房间宽度的 1%，所有家具都用它定尺寸，
 * 这样窗口缩放时家具和猫咪始终按同一比例缩放，不会出现「房子变大猫没变」。 */
.room {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 260px;
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-s); isolation: isolate;
  container-type: inline-size;
}
.room-wall {
  position: absolute; inset: 0 0 26% 0; z-index: 0;
  background: linear-gradient(180deg, #FFF1E6 0%, #FFE6D6 100%);
}
.room-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #F0C79E 0%, #E3B489 100%);
}
.room-window {
  position: absolute; left: 55%; top: 9%; width: 26%; height: 40%; z-index: 0;
  border-radius: 8px; background: linear-gradient(180deg, #CDE8F5 0%, #E8F6FC 100%);
  border: 5px solid #FFF; box-shadow: 0 2px 8px rgba(78, 59, 51, .12); overflow: hidden;
}
.room-window::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: #FFF; transform: translateX(-50%);
}
.room-hill { position: absolute; left: -20%; bottom: -30%; width: 90%; height: 55%; border-radius: 50%; background: #BFDCB4; opacity: .85; }
.room-cloud {
  position: absolute; left: 14%; top: 16%; width: 34px; height: 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .95); animation: roomCloud 14s linear infinite;
}
@keyframes roomCloud {
  0% { left: -18%; } 100% { left: 105%; }
}
.room-sun {
  position: absolute; right: 8%; top: 8%; width: 54px; height: 54px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, #FFE7A8 0%, #FFD68A 60%, rgba(255, 214, 138, 0) 72%);
  animation: roomSun 4.5s ease-in-out infinite;
}
@keyframes roomSun {
  0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.08); opacity: 1; }
}
.room-cat {
  position: absolute; left: 50%; bottom: 19%; transform: translateX(-50%); z-index: 3;
  filter: drop-shadow(0 6px 8px rgba(78, 59, 51, .18));
  animation: roomIdle 5s ease-in-out infinite;
}
.room-cat svg { width: auto; height: 15cqw; display: block; }
@keyframes roomIdle {
  0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); }
}
.room-slot {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; transition: all .2s ease;
}
.room-slot.has { background: rgba(255, 255, 255, .45); box-shadow: 0 3px 10px rgba(78, 59, 51, .1); animation: slotPop .45s ease; align-items: flex-end; justify-content: center; }
.room-slot.has:hover { background: rgba(255, 255, 255, .8); transform: translateY(-3px); }
.room-emoji { font-size: calc(var(--es, 6) * 1cqw); line-height: 1; }
.room-slot:not(.has) {
  border: 1.5px dashed var(--border-s); background: rgba(255, 255, 255, .35);
  flex-direction: column; gap: 2px; cursor: help;
}
.room-lock { font-size: 13px; opacity: .55; }
.room-price { font-size: 1.6cqw; color: var(--text-3); white-space: nowrap; }
.room-lock { font-size: 2cqw; }
@keyframes slotPop {
  0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; }
}
.room-label {
  position: absolute; left: 12px; bottom: 10px; z-index: 4; font-size: 12px; color: var(--w-deep);
  background: rgba(255, 255, 255, .9); border-radius: var(--r-pill); padding: 4px 12px;
}

/* ---------- UI 细节打磨 ---------- */
.btn { transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btn:active { transform: scale(.97); }
.card { transition: box-shadow .25s ease, transform .25s ease; }
.chip { transition: all .18s ease; }
.list-item { transition: background .18s ease; }
.list-item:hover { background: var(--surface-2); }
.list-item.unread { border-left: 3px solid var(--primary); }
.collapse-head:hover { color: var(--primary-d); }
.collapse-head { transition: color .18s ease, background .18s ease; }
.shop-card, .know-card { transition: transform .22s ease, box-shadow .25s ease; }
.shop-card:hover, .know-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.empty { text-align: center; color: var(--text-2); }

@media (max-width: 860px) {
  .hero-bg .hero-fallback { right: 50%; transform: translate(50%, -50%); }
  .hero-scrim { background: linear-gradient(180deg, rgba(255, 248, 243, .55) 0%, rgba(255, 248, 243, .9) 55%, rgba(255, 248, 243, .97) 100%); }
}

/* ---------- 商城实物图（加载失败退回 emoji 占位） ---------- */
.shop-thumb { position: relative; overflow: hidden; }
.shop-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; transition: transform .4s ease;
}
.shop-card:hover .shop-photo { transform: scale(1.06); }
.shop-fallback { position: relative; z-index: 0; }

/* ---------- 公益领养页头部视频背景（与首页同款遮罩融合） ---------- */
.welfare-hero {
  position: relative; overflow: hidden; border-radius: 24px; margin-top: 24px;
  background: linear-gradient(160deg, #FFE4DE 0%, #FFF1ED 62%);
  border: 1px solid var(--w-border); padding: 38px 32px;
}
.welfare-hero-inner { position: relative; z-index: 2; display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.welfare-bg .hero-fallback { right: 4%; left: auto; top: 50%; transform: translateY(-50%); }
@media (max-width: 860px) {
  .welfare-hero { padding: 24px 18px; border-radius: 18px; margin-top: 14px; }
  .welfare-bg .hero-fallback { right: 50%; transform: translate(50%, -50%); }
}

/* ---------- 自主摆放：位置标签 / 编辑器位置卡 / 仓库 ---------- */
.room-tag {
  font-size: 1.7cqw; color: var(--text-2); background: rgba(255, 255, 255, .85);
  border-radius: 999px; padding: .3cqw 1.2cqw; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(78, 59, 51, .12); pointer-events: none;
}
.ds-slot { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.ds-slot:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(78, 59, 51, .14); }
.ds-slot.on { border: 1.5px solid var(--primary-d); background: var(--surface-2); }
.ds-slot[disabled] { opacity: .55; cursor: default; }
#care-wh-box .list-item { align-items: center; }
#care-wh-box .grid { align-items: stretch; }

/* ---------- 云养页：家园（左）+ 互动（右）双栏 ---------- */
.care-home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.care-home-left { min-width: 0; }
.care-home-left .room { max-width: 500px; margin: 0 auto; }
.care-home-right { min-width: 0; }
@media (max-width: 900px) { .care-home-grid { grid-template-columns: 1fr; } }

/* ---------- 小猫的 AI 分身（抠像）动态效果 ---------- */
.cat-avatar-img {
  display: block;
  object-fit: contain;
  animation: avatar-breathe 3.4s ease-in-out infinite;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 12px 10px rgba(78, 59, 51, .16));
}
@keyframes avatar-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.03) translateY(-3px); }
}
/* ---------- 每个互动动作一套独立动效 ----------
 * 注意：家园房间规则 .room-cat img.cat-avatar-img 优先级更高，
 * 会盖掉单类名的 .cat-avatar-img.act-*，所以这里必须带上同权重的房间选择器，
 * 否则云养页的喂养/抚摸/逗猫/清洁/哄睡动效全部不生效。 */
.cat-avatar-img.mood-happy, .room-cat img.cat-avatar-img.mood-happy { animation: avatar-bounce .55s ease-in-out 3; }
@keyframes avatar-bounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  30% { transform: translateY(-10px) scale(1.05) rotate(-2deg); }
  60% { transform: translateY(0) scale(.97) rotate(2deg); }
}
/* 家园房间里的猫：放大并按容器比例缩放，叠加呼吸与轻微张望 */
.room-cat img.cat-avatar-img { width: auto !important; height: 19cqw !important; animation: avatar-room 6.5s ease-in-out infinite; }
@keyframes avatar-room {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-3px) rotate(1.6deg) scale(1.02); }
  75% { transform: translateY(-1px) rotate(-1.6deg) scale(1.02); }
}
/* 卡片与分身面板：按容器比例放大，避免小图显得空 */
.cat-thumb .cat-avatar-img { width: auto !important; height: 86% !important; }
.media-pane img.cat-avatar-img { width: auto !important; height: 90% !important; }

/* ---------- 每个互动动作一套独立动效 ---------- */
.cat-avatar-img.act-feed, .room-cat img.cat-avatar-img.act-feed { animation: act-feed 1.6s ease-in-out; }
@keyframes act-feed {
  0%, 100% { transform: translateY(0) scale(1); }
  15% { transform: translateY(7px) scale(1.01, .965); }
  30% { transform: translateY(0) scale(1); }
  45% { transform: translateY(7px) scale(1.01, .965); }
  60% { transform: translateY(0) scale(1); }
  78% { transform: translateY(6px) scale(1.01, .97); }
}
.cat-avatar-img.act-pet, .room-cat img.cat-avatar-img.act-pet { animation: act-pet 1.5s ease-in-out; }
@keyframes act-pet {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-2px) rotate(-4deg) scale(1.03); }
  60% { transform: translateY(-2px) rotate(4deg) scale(1.03); }
}
.cat-avatar-img.act-play, .room-cat img.cat-avatar-img.act-play { animation: act-play 1.15s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes act-play {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-24px) rotate(-8deg); }
  45% { transform: translateY(0) rotate(0deg); }
  65% { transform: translateY(-15px) rotate(7deg); }
  85% { transform: translateY(0) rotate(0deg); }
}
.cat-avatar-img.act-clean, .room-cat img.cat-avatar-img.act-clean { animation: act-clean .95s ease-in-out; }
@keyframes act-clean {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  12% { transform: rotate(-6deg) translateX(-5px); }
  30% { transform: rotate(6deg) translateX(5px); }
  48% { transform: rotate(-5deg) translateX(-4px); }
  66% { transform: rotate(5deg) translateX(4px); }
  82% { transform: rotate(-2deg) translateX(-1px); }
}
.cat-avatar-img.act-sleep, .room-cat img.cat-avatar-img.act-sleep { animation: act-sleep 2.6s ease-in-out; }
@keyframes act-sleep {
  0%, 100% { transform: scale(1, 1) translateY(0); }
  30% { transform: scale(1.03, .93) translateY(6px); }
  70% { transform: scale(1.02, .95) translateY(5px); }
}
/* 互动反馈：动作对应的漂浮表情（🍚 💗 🪶 ✨ 💤） */
.act-fx {
  position: absolute; left: 50%; top: 4%; transform: translateX(-50%);
  font-size: 24px; line-height: 1; pointer-events: none; z-index: 6;
  animation: actFxUp 1.8s ease-out forwards;
}
@keyframes actFxUp {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-avatar-img, .room-cat { animation: none; }
}

/* ---------- 小猫的 AI 分身：一键开启分身对话 ---------- */
.media-pane[data-pane="art"] { gap: 6px; padding: 14px 12px; }
.media-pane[data-pane="art"] img.cat-avatar-img { height: 72% !important; }
.avatar-chat-btn { position: static; z-index: 3; max-width: 88%; box-shadow: 0 6px 16px rgba(232, 137, 90, .32); }

/* ---------- 顶部用户名下拉菜单 ---------- */
.nav-user { position: relative; }
.nav-user .caret { font-size: 10px; opacity: .65; margin-left: 2px; }
.nav-user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 14px 34px rgba(60, 40, 30, .16); padding: 6px; display: none;
}
.nav-user-menu.on { display: block; }
.nav-user-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--text); padding: 9px 10px; border-radius: 10px;
}
.nav-user-menu button:hover { background: var(--primary-l); }
.nav-user-menu button.danger { color: var(--bad); }
.nav-user-menu .menu-sep { height: 1px; background: var(--border); margin: 5px 8px; }

/* ---------- 个人中心：每日打卡 ---------- */
.ck-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ck-day {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--primary-l); color: #B4967F;
  font-size: 12px; border: 1px solid var(--border, #EEE2D8);
}
.ck-day.on {
  background: linear-gradient(160deg, #F6A97F, #EFA45C); color: #fff;
  border-color: transparent; font-weight: 600;
  box-shadow: 0 3px 8px rgba(239, 164, 92, .28);
}
.ck-day.now { outline: 2px solid var(--w-deep); outline-offset: 1px; }

/* ---------- 手机端适配：双栏网格折叠为单列，按钮不再被挤成竖排 ---------- */
@media (max-width: 720px) {
  #detail-grid, #care-grid, #trial-grid, #me-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .media-switch { flex-wrap: wrap; }
  .chip, .btn { white-space: nowrap; }
  .cat-thumb { aspect-ratio: 1 / 1; }
  .media-pane[data-pane="art"] img.cat-avatar-img { height: 68% !important; }
  .nav-user-menu { right: -6px; }
  .ck-grid { gap: 5px; }
  .ck-day { font-size: 11px; border-radius: 8px; }
}

/* ---------- 家园家具：场景化 SVG 插画 + 自由拖拽 ---------- */
.room-item {
  position: absolute; z-index: 2; cursor: grab; touch-action: none; user-select: none;
  filter: drop-shadow(0 4px 6px rgba(78, 59, 51, .16));
  animation: slotPop .45s ease;
}
.room-item svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.room-item.flat { z-index: 1; }              /* 地毯垫在所有家具与猫咪下面 */
.room-item.dragging {
  cursor: grabbing; z-index: 6; animation: none;
  filter: drop-shadow(0 16px 18px rgba(78, 59, 51, .32));
}
.room-item:not(.flat):hover { filter: drop-shadow(0 8px 10px rgba(78, 59, 51, .24)); }
.item-name {
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font-size: 10.5px; line-height: 1.4; color: var(--w-deep); background: rgba(255, 255, 255, .92);
  border-radius: var(--r-pill); padding: 1px 9px; white-space: nowrap;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.room-item:hover .item-name, .room-item.dragging .item-name { opacity: 1; }
/* 空白处可摆放的视觉提示点（pointer-events:none，点击会落到房间本体） */
.room-hint {
  position: absolute; z-index: 1; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px dashed rgba(192, 138, 85, .55); background: rgba(255, 255, 255, .38);
  display: flex; align-items: center; justify-content: center;
  color: rgba(192, 138, 85, .75); font-size: 8px; pointer-events: none;
  animation: hintBreath 2.8s ease-in-out infinite;
}
@keyframes hintBreath {
  0%, 100% { opacity: .45; } 50% { opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .room-item { animation: none; }
  .room-hint { animation: none; opacity: .6; }
}

/* ============================================================
   房间风格 & 家具配色（第 12 批：可爱风家具 + 换色 + 换风格 + AI 推荐）
   墙纸/地板颜色由 room 元素上的 --w1/--w2/--f1/--f2 决定，
   图案层用 ::before 叠上去，--wl/--fl 是图案线条色。
   ============================================================ */
.room-wall {
  background: linear-gradient(180deg, var(--w1, #FFF1E6) 0%, var(--w2, #FFE6D6) 100%);
}
.room-floor {
  background: linear-gradient(180deg, var(--f1, #F0C79E) 0%, var(--f2, #E3B489) 100%);
}
.room-wall::before, .room-floor::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: repeat; background-position: var(--wpos, 0 0);
}
.room-wall::before { background-image: var(--wpat, none); background-size: var(--wsize, 100% 100%); }
.room-floor::before { background-image: var(--fpat, none); background-size: var(--fsize, 100% 100%); }

/* ---- 7 种墙纸图案 ---- */
.room[data-wpat="dot"] .room-wall {
  --wpat: radial-gradient(circle, var(--wl) 0 1.3px, transparent 1.4px);
  --wsize: 4.6% 10%;
}
.room[data-wpat="wave"] .room-wall {
  --wpat: repeating-linear-gradient(45deg, transparent 0 12px, var(--wl) 12px 14px);
  --wsize: 100% 100%;
}
.room[data-wpat="cloud"] .room-wall {
  --wpat: radial-gradient(circle at 30% 36%, var(--wl) 0 13%, transparent 14%),
          radial-gradient(circle at 68% 62%, var(--wl) 0 9%, transparent 10%);
  --wsize: 15% 34%;
}
.room[data-wpat="star"] .room-wall {
  --wpat: radial-gradient(circle, var(--wl) 0 1.6px, transparent 1.7px),
          radial-gradient(circle, var(--wl) 0 1px, transparent 1.1px);
  --wsize: 9% 20%, 13% 28%;
  --wpos: 0 0, 5% 62%;
}
.room[data-wpat="leaf"] .room-wall {
  --wpat: radial-gradient(ellipse 46% 20% at 50% 50%, var(--wl) 0 99%, transparent 100%);
  --wsize: 9% 17%;
  --wpos: 0 0;
}
.room[data-wpat="sun"] .room-wall {
  --wpat: repeating-radial-gradient(circle at 88% 4%, transparent 0 9%, var(--wl) 9% 9.5%);
  --wsize: 100% 100%;
}
/* ---- 地板纹理 ---- */
.room[data-fpat="plank"] .room-floor {
  --fpat: repeating-linear-gradient(90deg, var(--fl) 0 1.4px, transparent 1.4px 44px),
          repeating-linear-gradient(0deg, rgba(255, 255, 255, .18) 0 1.4px, transparent 1.4px 22px);
  --fsize: 100% 100%;
}
.room[data-fpat="check"] .room-floor {
  --fpat: repeating-linear-gradient(90deg, var(--fl) 0 1.4px, transparent 1.4px 32px),
          repeating-linear-gradient(0deg, var(--fl) 0 1.4px, transparent 1.4px 22px);
  --fsize: 100% 100%;
}
.room[data-fpat="soft"] .room-floor { --fpat: none; }

/* ---- 深色房间（星空小窝）里文字与提示要提亮 ---- */
.room-dark .room-label { background: rgba(28, 26, 46, .8); color: #F5F0FF; }
.room-dark .room-hint {
  border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .82);
}
.room-dark .item-name { background: rgba(28, 26, 46, .86); color: #F5F0FF; }
.room-dark .room-window { border-color: rgba(255, 255, 255, .72); }
.room-dark .room-cat { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .38)); }
.room-dark .room-item { filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .34)); }

/* ---- 房间上方的操作条 ---- */
.room-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.room-ai-btn {
  background: linear-gradient(118deg, #FFB27A 0%, #F58BB0 100%);
  border: none; color: #fff; box-shadow: 0 4px 12px rgba(245, 139, 176, .32);
}
.room-ai-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(245, 139, 176, .4); }

/* ---- 房间下方的风格色卡条 ---- */
.style-strip {
  display: flex; gap: 8px; align-items: center; margin-top: 10px;
  overflow-x: auto; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch;
}
.style-strip::-webkit-scrollbar { height: 5px; }
.style-strip::-webkit-scrollbar-thumb { background: var(--border-s); border-radius: 3px; }
.style-strip-label { flex: 0 0 auto; font-size: 12px; color: var(--text-3); }
.style-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 60px; padding: 5px 4px 5px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--border); box-shadow: var(--shadow-s);
  background: linear-gradient(180deg, var(--w1) 0 52%, var(--f1) 52% 100%);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.style-chip:hover { transform: translateY(-2px); }
.style-chip.on { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(246, 169, 127, .3); }
.style-chip-ico { font-size: 14px; line-height: 1.1; }
.style-chip-name {
  font-size: 10px; color: #5B4A40; white-space: nowrap; background: rgba(255, 255, 255, .86);
  border-radius: 6px; padding: 0 4px;
}
.style-chip-ai { background: linear-gradient(180deg, #FFF3E6 0 52%, #FFE6F0 52% 100%); }

/* ---- 风格选择弹窗里的预览卡 ---- */
.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.style-prev {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; cursor: pointer;
  border-radius: 14px; border: 2px solid var(--border); background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.style-prev:hover { transform: translateY(-2px); box-shadow: var(--shadow-s); }
.style-prev.on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(246, 169, 127, .22); }
.sp-room { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; }
.sp-wall { position: absolute; inset: 0 0 30% 0; background: linear-gradient(180deg, var(--w1) 0%, var(--w2) 100%); }
.sp-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, var(--f1) 0%, var(--f2) 100%); }
.sp-name { font-size: 12px; font-weight: 600; color: var(--text); text-align: center; }

/* ---- 家具配色：四分色圆点 ---- */
.ed-sec { margin-top: 16px; }
.ed-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 9px; }
.pal-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pal-dot {
  position: relative; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .92);
  background: conic-gradient(var(--pa) 0 25%, var(--pb) 0 50%, var(--pc) 0 75%, var(--pd) 0 100%);
  box-shadow: 0 2px 6px rgba(78, 59, 51, .18), inset 0 0 0 1px rgba(78, 59, 51, .07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pal-dot:hover { transform: translateY(-2px) scale(1.06); }
.pal-dot.on { box-shadow: 0 0 0 2.5px var(--primary), 0 2px 8px rgba(78, 59, 51, .2); }
.pal-tick {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.pal-line { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.pal-line:last-of-type { border-bottom: none; }
.pal-line-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pal-line-ico { font-size: 17px; line-height: 1; }
.pal-line-cur { margin-left: auto; color: var(--text-3); }

/* ---- AI 推荐理由 ---- */
.ai-why {
  background: var(--surface-2); border: 1px dashed rgba(246, 169, 127, .5);
  border-radius: 14px; padding: 12px 14px;
}
.ai-why-h { font-size: 12.5px; font-weight: 700; color: var(--primary-d); margin-bottom: 8px; }
.ai-why-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.65; color: var(--text-2); }
.ai-why-row + .ai-why-row { margin-top: 4px; }

@media (max-width: 720px) {
  .room-tools { gap: 6px; }
  .room-tools .btn { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
  .style-chip { width: 54px; }
  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pal-dot { width: 30px; height: 30px; }
}