/* 它的星球 · 星空治愈主题。温柔、明亮、安宁，不冰冷。 */
:root {
  --bg: #0f0c29;
  --bg2: #1a1642;
  --panel: rgba(30, 26, 66, 0.7);
  --panel-solid: #1e1a42;
  --ink: #ece8ff;
  --ink-dim: #a99fd6;
  --accent: #b79cff;
  --accent2: #ffd6a5;
  --warm: #ffb26b;
  --line: rgba(183, 156, 255, 0.18);
  --radius: 16px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(ellipse at top, #241d5a 0%, var(--bg) 55%, #08061a 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 移动端轻量优化（对桌面无视觉影响，故放在媒体查询外）：
   - 柔和的点触高亮，替换默认的蓝色闪烁；
   - 可滚动区域启用 iOS 惯性滚动。 */
a, button, .see-btn, .prop, label { -webkit-tap-highlight-color: rgba(183, 156, 255, .2); }
.journal-list, .chat-log, .modal-card, .starlight-card { -webkit-overflow-scrolling: touch; }
/* 弹框内部滚动不把滚动链传给背景页（配合移动端的 body 锁页，双保险防穿透）。 */
.modal-card, .starlight-card { overscroll-behavior: contain; }
/* 公告/反馈等弹框里的列表（复用了 .journal-list）：在弹框内不要自己再做一层 overflow，
   否则与 .modal-card 的 max-height+overflow 嵌套冲突。让它回归普通文档流，滚动交给外层。
   注意：只影响弹框里的 .journal-list；首页日志流(.feed .journal-list)不在 .modal-card 内，不受影响。 */
.modal-card .journal-list { display: block; flex: none; overflow: visible; min-height: 0; }

/* 方案 B：公告/反馈弹框——标题/标签/关闭按钮固定，内容在限定高度内滚动。
   卡片做成 flex 列并自身不整体滚（overflow 收口到 .scroll-area）；标题等是固定项，
   中间的 .scroll-area 吃满剩余空间、内部滚动、不穿透背景页。卡片高度上限沿用 .modal-card 的
   max-height（桌面 88vh / 手机 calc(100vh-24px)），所以「列表在一个有上限的高度内滚」。 */
/* 卡片同时有 .modal-card 和 .modal-card-list 两个类——用 .modal-card.modal-card-list（0,2,0）
   提升特异性，压过后面移动端那条 `.modal-card{overflow-y:auto;max-height:…}`（0,1,0）——
   否则卡片自身又变成滚动容器、内层 .scroll-area 的 flex 约束失效，整卡被顶出视口（标题跑到屏幕外）。
   这里把卡片钉成「定高、不自身滚」的 flex 列，滚动收口到 .scroll-area。 */
.modal-card.modal-card-list {
  display: flex; flex-direction: column;
  overflow: hidden;                 /* 卡片自身不滚 */
  max-height: 88vh;                 /* 桌面：定高上限（移动端下方媒体查询再收紧） */
}
/* 除可滚区外，卡片的直接子元素（标题/标签/关闭按钮）一律固定、不压缩 */
.modal-card-list > :not(.scroll-area) { flex: 0 0 auto; }
.modal-card-list .scroll-area {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 星空背景 */
.stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: 0.6; animation: twinkle 4s infinite ease-in-out;
}
@keyframes twinkle { 0%,100%{opacity:.2} 50%{opacity:.9} }

.topbar {
  position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
}
.brand { font-size: 18px; font-weight: 600; letter-spacing: 1px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.mode { font-size: 12px; color: var(--ink-dim); }

/* 登录弹层 */
.auth-card { max-width: 420px; }
.auth-card .sub { margin-bottom: 18px; font-size: 13px; }
/* 退出登录：低调、与"关闭"分开摆（左下），色调偏暖灰提示性 */
.auth-card .logout { display: block; margin-top: 14px; color: var(--ink-dim); }
.auth-card .logout:hover { color: var(--warm); }
.code-row { display: flex; gap: 8px; align-items: flex-end; }
.code-row .full { flex: 1; }
.code-row .ghost { white-space: nowrap; margin-bottom: 0; }
.mock-code { font-size: 13px; color: var(--accent2); background: rgba(255,210,165,.1); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 4px 0 12px; }
/* 隐私同意勾选：登录/注册前必须勾选《隐私与数据说明》 */
.consent { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 14px; cursor: pointer; }
.consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.consent span { font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.consent a { color: var(--accent2); text-decoration: none; }
.consent a:hover { text-decoration: underline; }
.consent.needed { animation: consent-shake .4s ease; }
.consent.needed span { color: #ff9a9a; }
@keyframes consent-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.auth-msg { font-size: 13px; margin-top: 10px; min-height: 18px; }
.auth-msg.ok { color: #8fe3b0; }
.auth-msg.err { color: #ff9a9a; }

.screen { position: relative; z-index: 1; display: none; padding: 32px 20px; }
.screen.active { display: block; animation: fade .5s ease; }
@keyframes fade { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

h1 { font-weight: 600; margin: 0 0 8px; }
.sub { color: var(--ink-dim); margin: 0 0 24px; line-height: 1.6; }

/* 卡片 */
.card-wide {
  max-width: 720px; margin: 0 auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  backdrop-filter: blur(8px);
}

/* 上传 */
.upload { display: flex; justify-content: center; margin-bottom: 20px; }
.uploader {
  width: 220px; height: 180px; border: 2px dashed var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--ink-dim); text-align: center; overflow: hidden; transition: border-color .2s;
}
.uploader:hover { border-color: var(--accent); }
.uploader img { width: 100%; height: 100%; object-fit: cover; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.grid2 .full { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-dim); }
input, select {
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; color: var(--ink); font-size: 14px; outline: none;
}
input:focus, select:focus { border-color: var(--accent); }
select option { background: var(--panel-solid); }

/* 日期选择器：深色主题下原生日历图标默认是黑的、在紫背景上看不清。
   color-scheme:dark 让原生控件整体按深色渲染；并把指示器图标【完全替换】成一个暖色 SVG
   日历图案（不用 filter 猜，颜色由我们控制，一定是亮的）。 */
input[type=date] { color-scheme: dark; }
input[type=date]::-webkit-calendar-picker-indicator {
  /* 暖色(#ffd6a5)描边的日历图标，内联 SVG 作为背景；清掉原生黑图标 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffd6a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18px; height: 18px;
  cursor: pointer; opacity: 0.9;
}
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.sliders-title, .props-title { font-size: 13px; color: var(--ink-dim); margin: 8px 0; }
.sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 24px; }
.slider { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-dim); }

/* 性格滑块：自定义成配星球暗紫主题的精致样式（原生样式偏丑、圆钮不贴边）。
   track 做成圆角细线，thumb 做成带柔光的圆钮；两端留出半个 thumb 的内边距，视觉上贴边不被切。 */
.slider input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; padding: 0;
  border: none; border-radius: 0; box-shadow: none; /* 覆盖全局 input 的边框/圆角(就是那圈椭圆框) */
}
/* 轨道（webkit） */
.slider input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(183,156,255,.5), rgba(255,214,165,.5));
}
.slider input[type=range]:focus { outline: none; }
/* 圆钮（webkit）：margin-top 让圆钮纵向居中于 6px 轨道 */
.slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; margin-top: -7px;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 0 8px rgba(183,156,255,.7); transition: transform .12s ease, box-shadow .12s ease;
}
.slider input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 12px rgba(183,156,255,.9); }
.slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }
/* 轨道 + 圆钮（firefox） */
.slider input[type=range]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(183,156,255,.5), rgba(255,214,165,.5));
}
.slider input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent);
  background: #fff; box-shadow: 0 0 8px rgba(183,156,255,.7);
}

/* 按钮 */
.primary {
  background: linear-gradient(135deg, var(--accent), #8f7bff); color: #fff; border: none;
  border-radius: 12px; padding: 12px 20px; font-size: 15px; cursor: pointer; font-weight: 500;
  transition: transform .1s, opacity .2s;
}
.primary:hover { transform: translateY(-1px); }
.primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.primary.big { width: 100%; margin-top: 8px; padding: 14px; }
.primary.small { padding: 8px 14px; font-size: 13px; }
.ghost {
  background: transparent; color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 13px;
}
.ghost:hover { color: var(--ink); }
.ghost.small { padding: 6px 10px; font-size: 12px; }
/* 公告未读红点：按钮加 .has-dot 时右上角画一个小红圆点，提示有未读公告 */
.ghost.small.has-dot { position: relative; }
.ghost.small.has-dot::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff6b6b; box-shadow: 0 0 4px rgba(255,107,107,.7);
}
/* 语言切换器（中文 / EN）：两种 label 宽度不同，给最小宽度防切换时顶栏抖动；不改 .ghost.small 本身 */
.lang-toggle { min-width: 44px; white-space: nowrap; text-align: center; }

.progress { margin-top: 14px; font-size: 13px; color: var(--accent2); min-height: 20px; }

/* 建档中全屏遮罩：盖住表单、把等待变成"正在喵星寻找它"的仪式。复用 .modal 的居中+暗底。 */
.building-overlay { backdrop-filter: blur(6px); background: rgba(8,6,26,.82); }
.building-inner { text-align: center; max-width: 420px; padding: 24px; }
.building-inner .planet { font-size: 72px; }
.building-inner h2 { margin: 10px 0 6px; font-size: 20px; }
.building-progress { font-size: 13px; color: var(--accent2); min-height: 20px; margin-top: 6px; }
.building-progress .pg-ico.spin { animation: pgSpin 1.2s linear infinite; color: var(--warm); display: inline-block; }

/* 弹层内嵌遮罩（搭场景生成中盖住弹层内容，不叠全屏弹窗）。父级 .modal-card 已 position:relative。 */
.card-overlay { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius);
  background: rgba(16,12,42,.92); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.card-overlay .planet { font-size: 60px; }
.card-overlay .co-text { font-size: 16px; color: var(--ink); }
/* 进度行动效：运行中整行文字柔和呼吸（信号在脉动），圆点脉动旋转——表示"正在传、没卡住"。 */
.progress.working { animation: badgeBreath 1.8s ease-in-out infinite; }
.progress .pg-ico { display: inline-block; }
.progress .pg-ico.spin { animation: pgSpin 1.2s linear infinite; color: var(--warm); }
@keyframes pgSpin { to { transform: rotate(360deg); } }

/* 抵达仪式 */
.arrival { max-width: 560px; margin: 8vh auto 0; text-align: center; }
.planet { font-size: 90px; animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.arrival-meta { color: var(--accent2); font-size: 15px; margin: 6px 0 24px; }
.first-journal {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; line-height: 1.8; font-size: 16px; margin-bottom: 24px; text-align: left;
}
.first-journal::before { content: "🐾 它给你的第一声问候"; display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 8px; }

/* ===== 欢迎页（建档后逐屏推进：重逢→星籍卡→引导→行动召唤）===== */
.welcome { max-width: 520px; }
.wc-step { animation: wcFade .6s ease; }
@keyframes wcFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.planet.spin { animation: float 4s ease-in-out infinite, wcSpin 10s linear infinite; }
@keyframes wcSpin { to { transform: rotate(360deg); } }
.wc-warm { color: var(--ink-dim); font-size: 15px; line-height: 1.9; margin: 10px 0 0; }
.wc-lead { color: var(--accent2); font-size: 14px; margin: 0 0 16px; letter-spacing: .02em; }

/* 星籍卡：它在喵星的「居民证」，仪式感 + 温暖 */
.star-card {
  text-align: left; background: linear-gradient(160deg, rgba(45,38,98,.9), rgba(24,20,52,.9));
  border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 18px;
  box-shadow: 0 10px 40px rgba(10,6,30,.5), inset 0 0 40px rgba(183,156,255,.06);
  position: relative; overflow: hidden;
}
.star-card::after { /* 右上角一抹柔光，像星球表面的高光 */
  content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,214,165,.22), transparent 70%); pointer-events: none;
}
.sc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sc-badge { font-size: 11px; color: #0f0c29; background: var(--accent2); border-radius: 20px; padding: 3px 10px; font-weight: 600; }
.sc-no { font-family: ui-monospace, monospace; font-size: 13px; color: var(--accent2); letter-spacing: .06em; }
.sc-name { font-size: 26px; font-weight: 700; margin-bottom: 16px; }
.sc-rows { display: flex; flex-direction: column; gap: 10px; }
.sc-row { display: flex; justify-content: space-between; font-size: 14px; align-items: center; }
.sc-k { color: var(--ink-dim); }
.sc-v { color: var(--ink); font-weight: 500; text-align: right; max-width: 60%; }

.wc-first-journal {
  margin-top: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; line-height: 1.8; font-size: 14px; text-align: left; color: var(--ink);
}
.wc-first-journal::before { content: "🐾 它给你的第一声问候"; display: block; font-size: 11px; color: var(--ink-dim); margin-bottom: 6px; }

/* 轻量产品引导：图标 + 一行标题 + 一句话 */
.wc-guide { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.wc-guide li { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.wc-guide .wc-ico { font-size: 22px; line-height: 1.4; flex-shrink: 0; }
.wc-guide b { font-size: 15px; }
.wc-guide div { font-size: 13px; color: var(--ink-dim); line-height: 1.7; }
.wc-guide b { color: var(--ink); }

/* 赠送星光提示（欢迎页第③屏）：暖色高亮卡，突出"送了什么 + 怎么用" */
.wc-gift { margin-top: 16px; text-align: left; background: linear-gradient(135deg, rgba(255,214,165,.14), rgba(255,178,107,.08));
  border: 1px solid rgba(255,214,165,.4); border-radius: 14px; padding: 14px 16px; }
.wc-gift-top { font-size: 15px; color: var(--accent2); margin-bottom: 6px; }
.wc-gift-top b { font-size: 18px; }
.wc-gift-sub { font-size: 12px; color: var(--ink-dim); line-height: 1.7; }

/* 底部：进度点 + 推进按钮 */
.wc-footer { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wc-dots { display: flex; gap: 8px; }
.wc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .3s ease; }
.wc-dots i.on { background: var(--accent2); transform: scale(1.25); box-shadow: 0 0 8px var(--accent2); }

/* 主界面布局：
   - 左栏：自然高度（内容多就多高、不滚动）；
   - 中间日志栏：拉到和左栏一样高（stretch）、内部滚动；
   - 右侧对话栏：保持自己固定高度（70vh），不被拉伸（align-self:start）。 */
.home { display: grid; grid-template-columns: 280px 1fr 300px; gap: 20px; max-width: 1200px; margin: 0 auto; align-items: stretch;
  /* 固定在视口内（减顶栏 ~57px + .screen 上下 padding 64px），三栏不再被日志撑长，
     让日志列表在中栏内部滚动而不是把整页拉长。min-height 兜底短屏。 */
  height: calc(100vh - 121px); min-height: 480px; }
.feed { min-height: 0; } /* 置 0 才能让日志列表滚动而不撑破 */
.side { overflow-y: auto; } /* 左栏内容多时也在栏内滚动，不随日志变长 */
.side, .chat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; backdrop-filter: blur(8px); }
.cat-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.cat-avatar { width: 60px; height: 60px; flex: 0 0 60px; }
/* 头像：portraitUrl / 用户原照 / 默认卡通，统一固定 60×60 + cover 填充，绝不变形（不再用四宫格硬裁） */
.cat-avatar img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: rgba(255,255,255,.05); display: block; }

.home-caption { font-size: 13px; color: var(--ink-dim); display: block; }

/* 「它的形象」：侧栏里一块会动的画面（无控件静音循环，观感=动图）。
   固定 4:3 比例容器——无论占位图/星际占位/真实视频，内容都 cover 填充，
   高度恒定、绝不跳变、绝不撑破或溢出控件区域。 */
.portrait-banner { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; margin-bottom: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 0; }
.portrait-banner img, .portrait-banner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-banner .motion-badge { bottom: 8px; }

/* 动作视频生成中：纯 CSS 星际占位（不依赖图片，充满容器、绝不变形） */
.motion-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at center, rgba(45,38,98,.9), rgba(15,12,41,.95)); }
.mp-orbit { position: relative; width: 54px; height: 54px; }
.mp-orbit span { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2); }
.mp-orbit span:nth-child(1) { animation: mpOrbit 1.6s linear infinite; }
.mp-orbit span:nth-child(2) { animation: mpOrbit 1.6s linear infinite .53s; opacity: .7; }
.mp-orbit span:nth-child(3) { animation: mpOrbit 1.6s linear infinite 1.06s; opacity: .45; }
@keyframes mpOrbit { from { transform: rotate(0) translateX(20px) rotate(0); } to { transform: rotate(360deg) translateX(20px) rotate(-360deg); } }
.mp-text { font-size: 12px; color: var(--accent2); margin: 0; letter-spacing: .03em; animation: badgeBreath 2.2s ease-in-out infinite; }
.motion-badge { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--accent2); background: rgba(8,6,26,.85); border: 1px solid var(--line); border-radius: 12px; padding: 3px 12px; white-space: nowrap; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; animation: badgeBreath 2.2s ease-in-out infinite; }
/* 前置小圆点 + 柔和呼吸（不是闪烁），表示"信号传输中"，且不可点击 */
.motion-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 6px var(--accent2); animation: badgeBreath 1.4s ease-in-out infinite; }
@keyframes badgeBreath { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.cat-name { font-size: 16px; font-weight: 600; }
.cat-planet { font-size: 12px; color: var(--accent2); margin-top: 2px; }
.profile-entry { margin-top: 6px; background: none; border: none; color: var(--accent); font-size: 12px; padding: 0; cursor: pointer; }
.profile-entry:hover { text-decoration: underline; }

/* 档案弹层：只读区 + 提示 */
.profile-readonly { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; color: var(--ink-dim); line-height: 1.9; }
.profile-readonly b { color: var(--ink); font-weight: 500; }
.profile-readonly .ro-note { display: block; margin-top: 6px; font-size: 11px; opacity: .7; }
.profile-msg { font-size: 13px; margin: 10px 0; min-height: 18px; }
.profile-msg.ok { color: #8fe3b0; }
.profile-msg.err { color: #ff9a9a; }

.home-scene { margin-bottom: 16px; }
.scene-empty { text-align: center; padding: 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-dim); }
.scene-empty p { margin: 0 0 12px; font-size: 13px; }
.scene-locked img { width: 100%; border-radius: 12px; display: block; margin-bottom: 8px; }
.scene-locked span { font-size: 13px; color: var(--ink-dim); }
.scene-locked .ghost { margin-top: 8px; width: 100%; }

.credits { font-size: 12px; color: var(--ink-dim); border-top: 1px solid var(--line); padding-top: 12px; line-height: 1.8; }

/* 日志流：高度跟随左栏（填满 grid 行）、日志列表内部滚动，页面整体不随日志变长而拉伸 */
.feed { display: flex; flex-direction: column; height: 100%; }
.feed-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex: 0 0 auto; }
.feed-head h2 { margin: 0; font-size: 18px; }
.feed-hint { font-size: 12px; color: var(--ink-dim); }
.journal-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 6px; }
.journal {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  backdrop-filter: blur(8px); animation: fade .4s ease;
}
.journal.arrival-journal { border-color: rgba(255,210,165,.4); }
.journal .j-time { font-size: 11px; color: var(--ink-dim); margin-bottom: 6px; }
/* 欢迎日志的小标签：和时间同行的暖色小药丸，标明这是第一声问候（整条样式与普通日志一致） */
.journal .j-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 10px; color: var(--accent2); background: rgba(255,214,165,.14); border: 1px solid rgba(255,214,165,.35); }
/* pre-wrap：保留用户在后台敲的换行/空格（公告正文），同时仍自动折行、不破坏布局。
   日志是 AI 生成的单段文字，加上它无副作用，反而能正确显示偶发换行。 */
.journal .j-content { line-height: 1.7; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.journal .j-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
/* 日志里的视频缩小：限制最大宽度与高度，不再占满整条日志 */
.journal video { display: block; width: 100%; max-width: 320px; max-height: 220px; object-fit: cover; border-radius: 12px; margin-top: 12px; }
.see-btn {
  background: rgba(183,156,255,.12); color: var(--accent); border: 1px solid var(--line);
  border-radius: 20px; padding: 7px 16px; font-size: 13px; cursor: pointer;
}
.see-btn:hover { background: rgba(183,156,255,.22); }
.see-btn:disabled { opacity: .5; cursor: not-allowed; }
/* 「看图」次要按钮：更淡，暗示更省 */
.see-btn.ghost-see { background: transparent; color: var(--ink-dim); }
.see-btn.ghost-see:hover { background: rgba(183,156,255,.1); color: var(--accent); }
/* 日志图片：和视频一样限制尺寸 */
.journal .j-image { display: block; width: 100%; max-width: 320px; max-height: 220px; object-fit: cover; border-radius: 12px; margin-top: 12px; }
/* 视频附赠的定格快照：小图 + 温柔标签 */
.j-snapshot { margin-top: 10px; }
.j-snapshot .snap-tag { display: block; font-size: 12px; color: var(--accent2); margin-bottom: 6px; }
.j-snapshot .snap-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; transition: transform .15s; }
.j-snapshot .snap-thumb:hover { transform: scale(1.04); }

/* 对话：保持自己固定高度，不被左栏拉伸 */
.chat { display: flex; flex-direction: column; height: 70vh; align-self: start; min-height: 0; }
.chat-head { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding-right: 4px; }
.bubble { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; animation: fade .3s ease; }
/* 间距：它的回应紧贴你的话（一问一答成对），新一轮「你说的话」之间留更大间距 */
.bubble.cat { margin-top: 2px; }        /* 回应紧贴上面的提问 */
.bubble.me + .bubble.cat { margin-top: 2px; }
.bubble.cat + .bubble.me { margin-top: 14px; } /* 换新一轮，拉开 */
.bubble.me { align-self: flex-end; background: linear-gradient(135deg, var(--accent), #8f7bff); color: #fff; border-bottom-right-radius: 4px; }
.bubble.cat { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.cat .meow { font-size: 15px; }
.bubble.cat .meaning { font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.chat-input { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.chat-input textarea {
  flex: 1; resize: none; font-family: inherit; font-size: 14px; line-height: 20px;
  /* 单行默认：内容高 20px + 上下 padding 各 9px = 38px；输入多了 JS 自动长高，最多两行(58px) */
  height: 38px; max-height: 58px; overflow-y: auto;
  padding: 9px 12px; box-sizing: border-box;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); outline: none;
}
.chat-input textarea:focus { border-color: var(--accent); }
.chat-input #btnSend { flex: 0 0 auto; height: 38px; padding: 0 16px; } /* 与单行输入框等高 */

/* ============ 手机端 B+D 布局的「桌面侧基线」 ============
   这些是始终生效（媒体查询外）的规则，但都写成「桌面上不可见 / 无效果」：
   手机端的把手、背板、放大浮层在桌面一律 display:none；对话标题桌面版正常显示。
   真正的 B+D 布局全部写在下方 @media(max-width:600px) 内，桌面零影响。 */

.chat-backdrop { display: none; }          /* 手机端对话面板背板——桌面永不显示 */
.feed-entry { display: none; }             /* 手机端「{猫名}的日志」入口——桌面永不显示（桌面日志是中栏常驻） */
.sheet-bar { display: none; }              /* 手机端日志面板的标题/收起行——桌面永不显示 */
/* 面板升起时锁住主页滚动（防滚动穿透/错位重叠）。由 JS 加/去 body.sheet-open，
   仅在手机端升起面板时加；position:fixed 连 iOS Safari 也能真正冻结背景页。
   JS 会保存/恢复 scrollTop（body.style.top），这里只负责「钉住」。 */
body.sheet-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* 形象放大浮层：用 .modal.portrait-modal(0,2,0) 压过 .modal 的 display:flex(0,1,0)，
   保证桌面即便去掉 [hidden] 也不显示；仅 ≤600px 才在下方媒体查询里 flex。 */
.modal.portrait-modal { display: none; }
/* .chat-head-desktop 桌面正常显示（就是原来的「和它说说话」标题）；手机端隐藏、改用把手里的标题 */

/* 弹层 */
/* hidden 属性必须能压过 .modal 的 display:flex，否则设了 hidden 也不消失 */
[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 10; background: rgba(8,6,26,.75); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
.modal-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; position: relative; }
.modal-card h2 { margin: 0 0 16px; }
.modal-card label { margin-bottom: 14px; }
.props { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.prop { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; }
.prop input { width: auto; }
.scene-preview img { width: 100%; border-radius: 12px; margin-top: 12px; }
#lockBar { margin-top: 12px; }
.lockbar-hint { font-size: 12px; color: var(--ink-dim); display: block; margin-bottom: 10px; line-height: 1.6; }
.lockbar-hint.sub-hint { color: var(--accent2); font-size: 13px; line-height: 1.6; }
.lockbar-btns { display: flex; gap: 8px; justify-content: flex-end; }
.close { position: absolute; top: 16px; right: 16px; }

/* 星际传输 */
.transit-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; width: 100%; max-width: 440px; text-align: center; }
.signal-line { height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); border-radius: 3px; position: relative; margin: 10px 0 20px; overflow: hidden; }
.signal-line .dot { position: absolute; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 12px var(--accent2); animation: fly 2s linear infinite; }
@keyframes fly { from{left:-5%} to{left:105%} }
.transit-target { font-size: 13px; color: var(--accent2); margin-bottom: 6px; }
.transit-stage { font-size: 15px; margin-bottom: 16px; min-height: 22px; }
.transit-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.transit-bar #transitFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .5s ease; }
#transitVideo { width: 100%; border-radius: 12px; margin-bottom: 12px; }
.transit-caption { font-size: 14px; color: var(--ink-dim); line-height: 1.6; margin-bottom: 12px; }

@media (max-width: 900px) {
  .home { grid-template-columns: 1fr; height: auto; }
  .side, .feed { height: auto; overflow: visible; }
  .grid2, .sliders, .props { grid-template-columns: 1fr; }
  .chat { height: auto; }
}

/* ============ 手机端适配（≤600px）============
   仅在窄屏生效，桌面（≥1200px）布局与视觉完全不变。 */
@media (max-width: 600px) {
  /* —— 顶栏：优雅换行，保证星光/公告/反馈/登录全部可达，含安全区内边距 —— */
  .topbar {
    flex-wrap: wrap; row-gap: 8px;
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .topbar-right { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

  /* —— iOS 输入聚焦自动缩放修复：输入类字体 ≥16px —— */
  input, select, textarea { font-size: 16px; }
  .chat-input textarea { font-size: 16px; }

  /* —— 触控目标 ~44px —— */
  .ghost.small { padding: 9px 12px; min-height: 40px; }
  .see-btn { min-height: 40px; }
  /* min-height 覆盖 app.js 设的内联 height:38px（min-height 恒胜出，无需改 JS） */
  .chat-input textarea { min-height: 44px; }
  .chat-input #btnSend { min-height: 44px; height: auto; }
  .close { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .slider input[type=range] { height: 28px; }
  .prop input { width: 20px; height: 20px; }

  .card-wide { padding: 20px; }

  /* ===== 手机端主界面：档案/形象当主角，日志与对话都「唤起式」 =====
     主屏（竖排、常驻）= .side：猫头/形象 → 「它的日志」入口 → 场景 → 星光。
     .feed（日志）和 .chat（对话）都抽成「从底部升起的面板」，默认不占主屏。
     全部规则在 600px 查询内 → 桌面三栏零影响。 */
  .home { display: flex; flex-direction: column; gap: 14px; align-items: stretch;
    /* 底部给常驻对话条留出空间（输入条高度 + 安全区） */
    padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .side { display: block; }            /* 主屏唯一在流内的块，自然竖排其子项 */
  .side > * + * { margin-top: 14px; }

  /* —— 形象：主角的一部分，给个舒服的中等高度、可点放大 —— */
  .portrait-banner { aspect-ratio: auto; height: 200px; cursor: zoom-in; }
  .portrait-banner img, .portrait-banner video { object-position: center 30%; }

  /* —— 「{猫名}的日志」入口：放在形象下方，紫色渐变强调、上下布局，明显可点 —— */
  .feed-entry {
    display: flex; align-items: center; gap: 14px; width: 100%;
    background: linear-gradient(135deg, rgba(183,156,255,.28), rgba(143,123,255,.12));
    border: 1px solid var(--accent); border-radius: 16px;
    padding: 16px 18px; cursor: pointer; color: var(--ink); text-align: left; position: relative;
    box-shadow: 0 4px 18px rgba(150,120,255,.22);
  }
  .feed-entry:active { transform: scale(.99); }
  .feed-entry-ico {
    flex: 0 0 auto; font-size: 22px; width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  }
  /* 上下布局：标题在上、小字说明在下 */
  .feed-entry-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .feed-entry-label { font-size: 16px; font-weight: 600; color: var(--ink); }
  .feed-entry-sub { font-size: 12px; color: var(--ink-dim); }
  /* 右侧箭头：做成圆形按钮感，暗示可点 */
  .feed-entry-arrow {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 18px; line-height: 1;
  }
  /* 新日志：红点 + 整卡高亮（更醒目），引导点击 */
  .feed-entry.has-dot {
    border-color: var(--accent2);
    box-shadow: 0 0 0 1px var(--accent2), 0 6px 22px rgba(255,214,165,.3);
  }
  .feed-entry.has-dot::after {
    content: ""; position: absolute; top: 10px; right: 12px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #ff6b6b; box-shadow: 0 0 6px rgba(255,107,107,.8);
  }

  /* ===== 底部升起面板的通用形态（.feed 日志 / .chat 对话）=====
     都固定贴底、暖色、顶部圆角。不用「横线把手」——改用明确的标题行/箭头，避免"可拖动"错觉。 */
  .feed, .chat {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: auto; align-self: auto;
    display: flex; flex-direction: column;
    background: var(--panel-solid); border: none; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(8,6,26,.4);
    transition: transform .28s ease;
  }
  /* —— 日志面板（方案 A：几乎全屏、实色盖满）——
     从顶栏下方一直盖到底，实色背景完全遮住主页（看不到也点不到主页）；默认滑出视口，.open 升起。
     z-index 高于背板(8)与对话(9)，是最上层。 */
  .feed {
    z-index: 12; top: 0; bottom: 0; max-height: none; padding: 0 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-top: none; border-radius: 0;
    background: var(--panel-solid);      /* 实色，不透明 */
    transform: translateY(110%);
  }
  .feed.open { transform: translateY(0); }
  /* 日志面板头：标题 + 明确「收起」按钮（无横线），固定在面板顶部不随列表滚 */
  .sheet-bar {
    display: flex; align-items: center; gap: 8px; width: 100%; flex: 0 0 auto;
    padding: 10px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
  }
  .sheet-bar-title { flex: 1; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink); }
  .sheet-bar-close {
    background: rgba(183,156,255,.14); color: var(--accent); border: 1px solid var(--line);
    border-radius: 999px; padding: 8px 18px; font-size: 14px; cursor: pointer; min-height: 40px;
  }
  .feed .feed-head { margin-bottom: 10px; flex: 0 0 auto; }
  /* 日志列表吃掉面板剩余高度、内部滚动；overscroll 不穿透 */
  .feed .journal-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }

  /* —— 对话面板（仅首页展示）：半屏从底部升起；收起态只露标题行+输入条贴底，.open 升起看历史 ——
     z-index 9 高于背板(8)——所以对话不会被背板模糊/挡住（修「聊天糊成一片」的 bug）。 */
  .chat-head-desktop { display: none; }
  .chat {
    z-index: 9; max-height: 82vh; padding: 0 14px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel-solid);      /* 实色，不透明，内容清晰 */
    transform: translateY(0);
  }
  /* 对话面板头(.chat-sheet-bar)：收起态隐藏（去掉冗余的「和它说说话」行，只留输入条）；
     仅展开态 .chat.open 才显示标题 +「收起」。日志面板的 .sheet-bar 不受影响（常显）。 */
  .chat .chat-sheet-bar { display: none; }
  .chat.open .chat-sheet-bar { display: flex; }
  .chat .chat-log {
    max-height: 0; overflow: hidden; padding: 0; margin: 0;
    transition: max-height .28s ease, padding .28s ease, margin .28s ease;
  }
  .chat.open .chat-log { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; margin: 8px 0; }
  .chat-input { margin: 8px 0 10px; }

  /* 背板：面板升起时点一下收起；z-index 8 低于两个面板 → 永远不会盖/糊住面板本身。
     不透明度高一点、去掉 blur（blur 在低端机也更吃性能）；对话半屏时上半部被它罩住、点一下即收起。 */
  .chat-backdrop {
    display: block; position: fixed; inset: 0; z-index: 8;
    background: rgba(8,6,26,.72);
  }

  /* 关键修复：顶栏 .topbar(z-index:2) 是 #screen-home 的兄弟，而 .screen{z-index:1} 建立了
     独立层叠上下文——面板即便 z-index:12 也只在 .screen(z1) 内部，整体仍低于顶栏(z2)，
     于是全屏日志盖不住顶栏（截图里顶栏那条一直露在最上）。
     面板升起时(body.sheet-open)把整个 #screen-home 的上下文抬到顶栏之上，
     其内的面板(z12)就能真正盖住顶栏；同时直接压低顶栏，双保险。 */
  /* 仅「全屏面板（日志/对话）」升起时才抬 #screen-home 上下文 + 隐藏顶栏——
     因为这两个面板在 #screen-home 内部、需越过顶栏。普通 .modal 是 body 顶层兄弟、
     自带 z-10 全屏遮罩，无需也不该触发这组规则（否则会把 home 抬到 modal 之上遮住弹框）。
     所以用独立的 body.sheet-fullscreen（只在面板升起时加），不用通用的 body.sheet-open。 */
  body.sheet-fullscreen #screen-home { position: relative; z-index: 20; }
  body.sheet-fullscreen .topbar { display: none; }

  /* —— D：形象放大浮层（点小横幅弹出看大图/视频）——
     同样用 .modal.portrait-modal 提特异性；[hidden] 的 !important 仍能压住它、保证默认不显示。 */
  .modal.portrait-modal { display: flex; }
  .portrait-modal-inner { position: relative; width: 100%; max-width: 100%; }
  .portrait-modal-stage img, .portrait-modal-stage video {
    width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; display: block;
  }
  .portrait-modal .close.corner { top: -6px; right: 0; }

  /* —— 弹层：贴合窄屏、内部滚动、底部安全区留白 —— */
  /* 注：.starlight-card 用 `.modal .starlight-card` 提升特异性（0,2,0），
     压过后面无条件的 `.starlight-card`（0,1,0 · width:92vw/max-height:88vh），
     否则同特异性下靠后的那条会在手机上胜出、丢掉这里的窄屏贴合与安全区留白。 */
  .modal { padding: 12px; }
  .modal-card,
  .modal .starlight-card,
  .transit-card,
  .spend-card,
  .buy-card {
    width: 100%; max-width: 100%;
    max-height: calc(100vh - 24px); overflow-y: auto;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  /* 方案 B 列表弹框（公告/反馈）：手机端同样钉成「定高、不自身滚」，滚动收口到 .scroll-area。
     用 .modal-card.modal-card-list（0,2,0）压过上面那条 .modal-card（0,1,0）的 overflow-y:auto。
     用 100dvh 适配移动端浏览器地址栏收起/展开导致的视口高度变化（比 100vh 更准）。 */
  .modal-card.modal-card-list {
    overflow: hidden;
    max-height: calc(100dvh - 24px);
    padding-bottom: 0;              /* 安全区留白交给内部 .scroll-area，避免卡片底部多一截空白 */
  }
  .modal-card-list .scroll-area { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

  /* —— 防止长内容/宽内容造成横向溢出 —— */
  .sc-no { word-break: break-word; }
  .sc-v { word-break: break-word; }
  .sl-cost-hint { display: block; margin-left: 0; margin-top: 6px; }
}

/* ============ 星光计价体系 ============ */

/* 顶栏星光余额胶囊 */
.starlight-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, rgba(183,156,255,.22), rgba(255,210,165,.18));
  border: 1px solid var(--line); color: var(--ink);
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: 13px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.starlight-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(183,156,255,.28); }
.starlight-pill .sl-ico { color: var(--accent2); font-size: 14px; }
.starlight-pill b { font-size: 14px; }
.starlight-pill .sl-unit { color: var(--ink-dim); font-size: 12px; }

/* 侧栏 credits 里的星光行 */
.credit-star { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.credit-star b { color: var(--accent2); font-size: 16px; }
.credit-sub { font-size: 12px; color: var(--ink-dim); margin-top: 4px; }
.link-btn {
  margin-left: auto; background: none; border: none; color: var(--accent);
  cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0;
}

/* 定价弹层 */
.starlight-card { max-width: 760px; width: 92vw; max-height: 88vh; overflow-y: auto; }
.close.corner { position: absolute; top: 12px; right: 12px; }
.sl-head { text-align: center; margin-bottom: 18px; }
.sl-head h2 { margin: 0 0 6px; }
.sl-head .sub { font-size: 13px; margin-bottom: 12px; }
.sl-balance-line { font-size: 13px; color: var(--ink-dim); }
.sl-balance-line b { color: var(--accent2); font-size: 16px; }
.sl-cost-hint { display: inline-block; margin-left: 8px; opacity: .8; }

.sl-section { margin-bottom: 22px; }
.sl-section-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.sl-tag {
  font-size: 11px; font-weight: 400; color: #1a1642;
  background: linear-gradient(135deg, var(--accent2), var(--warm));
  padding: 2px 8px; border-radius: 999px;
}
.sl-tag.ghost-tag { color: var(--ink-dim); background: rgba(183,156,255,.12); }

.sl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sl-grid:has(.sl-plan:only-child) { grid-template-columns: 1fr; max-width: 260px; }

.sl-plan {
  position: relative; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 14px 14px; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sl-plan:hover { transform: translateY(-2px); }
.sl-plan.disabled { opacity: .45; }
/* 订阅状态栏：当前月卡 / 待切换 / 停续提示 + 取消/恢复按钮 */
.sl-sub-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.sl-sub-status { font-size: 13px; color: var(--accent2); }
/* 当前在订的月卡：高亮描边 + 角标；待切换的月卡：次级高亮 */
.sl-plan.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sl-plan.pending { border-color: var(--warm); }

/* —— 月卡：紫色系（品牌主色，最突出）—— */
.sl-plan.monthly {
  background: linear-gradient(160deg, rgba(183,156,255,.16), rgba(183,156,255,.05));
  border-color: rgba(183,156,255,.35);
}
.sl-plan.monthly:hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(183,156,255,.28); }
.sl-plan.monthly.recommended {
  background: linear-gradient(160deg, rgba(183,156,255,.34), rgba(150,120,255,.14));
  border-color: var(--accent); border-width: 2px;
  box-shadow: 0 8px 28px rgba(150,120,255,.35);
}
.sl-ribbon { background: linear-gradient(135deg, var(--accent), #9b7bff); color: #fff; }

/* —— 补充卡：青蓝色系（冷静、区别月卡）—— */
.sl-plan.topup {
  background: linear-gradient(160deg, rgba(120,210,230,.14), rgba(120,210,230,.04));
  border-color: rgba(120,210,230,.34);
}
.sl-plan.topup:hover { border-color: #7ad2e6; box-shadow: 0 6px 22px rgba(120,210,230,.26); }
.sl-plan.topup .sl-plan-star { color: #8fe0ef; }

/* —— 体验卡：暖橙色系（轻盈、初次的温度）+ 虚线 —— */
.sl-plan.trial {
  background: linear-gradient(160deg, rgba(255,210,165,.18), rgba(255,178,107,.05));
  border: 1px dashed rgba(255,178,107,.6);
}
.sl-plan.trial:hover { border-color: var(--warm); box-shadow: 0 6px 22px rgba(255,178,107,.26); }
.sl-plan.trial .sl-plan-star { color: var(--accent2); }
.sl-ribbon.trial-ribbon { background: linear-gradient(135deg, var(--accent2), var(--warm)); color: #4a2e10; }
.sl-ribbon {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent2), var(--warm)); color: #1a1642;
  font-size: 11px; font-weight: 600; padding: 2px 12px; border-radius: 999px; white-space: nowrap;
}
.sl-plan-name { font-size: 13px; color: var(--ink-dim); margin-bottom: 8px; }
.sl-plan-price { font-size: 26px; font-weight: 700; }
.sl-plan-price .sl-permonth { font-size: 13px; font-weight: 400; color: var(--ink-dim); }
.sl-plan-star { font-size: 15px; color: var(--accent2); margin: 6px 0 2px; }
.sl-plan-anchor { font-size: 12px; color: var(--ink-dim); margin-bottom: 14px; min-height: 16px; }
.sl-buy-btn { width: 100%; padding: 9px 0; border-radius: 10px; cursor: pointer; font-size: 14px; }
.sl-buy-btn:disabled { cursor: not-allowed; }

.sl-foot { font-size: 12px; color: var(--ink-dim); text-align: center; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 14px; }

/* 购买确认弹层 */
.buy-card { max-width: 380px; }
.buy-body { margin: 14px 0; }
.buy-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.buy-line b { color: var(--accent2); }
.buy-anchor { font-size: 12px; color: var(--ink-dim); margin-top: 10px; }
.buy-note { font-size: 11px; color: var(--ink-dim); opacity: .7; margin-top: 8px; }
.buy-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.buy-msg { font-size: 13px; margin-top: 10px; min-height: 18px; text-align: center; }
.buy-msg.ok { color: #8fe3b0; }
.buy-msg.err { color: #ff9a9a; }

/* 窄屏：定价卡片堆叠 */
@media (max-width: 640px) {
  .sl-grid { grid-template-columns: 1fr; }
  .sl-grid:has(.sl-plan:only-child) { max-width: none; }
}

/* 生成确认弹层（消耗星光前的温柔告知） */
.spend-card { max-width: 380px; text-align: center; }
.spend-ico { font-size: 34px; color: var(--accent2); margin-bottom: 4px; }
/* 星光到账仪式图标：放大 + 柔光脉动，强化"收到了"的仪式感 */
.gift-ico { font-size: 48px; text-shadow: 0 0 18px var(--accent2); animation: giftGlow 1.6s ease-in-out infinite; }
@keyframes giftGlow { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.spend-card h2 { margin: 0 0 12px; }
.spend-body { font-size: 14px; color: var(--ink); line-height: 1.7; margin: 0 0 14px; }
.spend-balance { font-size: 12px; color: var(--ink-dim); margin-bottom: 18px; }
.spend-card .buy-actions { justify-content: center; }

/* 购买弹层内的支付方式选择 */
.pay-channels { margin: 4px 0 16px; }
.pc-title { font-size: 12px; color: var(--ink-dim); margin-bottom: 8px; }
.pc-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.pc-opt.sel { border-color: var(--accent); background: rgba(183,156,255,.1); }
.pc-opt input { accent-color: var(--accent); }
.pc-label { font-size: 14px; }
.pc-hint { margin-left: auto; font-size: 12px; color: var(--ink-dim); }

/* ———— 反馈弹层：标签切换 + 工单往来 ———— */
.fb-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.fb-tab { flex: 1; padding: 8px 10px; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 10px; transition: color .15s, border-color .15s, background .15s; }
.fb-tab:hover { color: var(--ink); }
.fb-tab.active { color: var(--ink); border-color: var(--accent); background: rgba(183,156,255,.1); }
/* 「我的反馈记录」标签有未读新回复时，标签文字右侧挂一个小红点，引导用户切到该标签查看 */
.fb-tab.has-dot { position: relative; }
.fb-tab.has-dot::after {
  content: ""; position: absolute; top: 6px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff6b6b; box-shadow: 0 0 4px rgba(255,107,107,.7);
}

/* 单张工单卡片：标题/状态/时间 + 下方消息往来 */
.fb-ticket { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.fb-ticket-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-ticket-head h3 { margin: 0; font-size: 14px; }
.fb-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(183,156,255,.14); color: var(--accent); }
.fb-ticket-time { margin-left: auto; font-size: 11px; color: var(--ink-dim); }
.fb-ticket-body { margin: 8px 0 4px; font-size: 13px; color: var(--ink); white-space: pre-wrap; }
/* 消息气泡：用户靠右、管理员回复靠左，区分颜色 */
.fb-msgs { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.fb-msg { max-width: 86%; padding: 8px 10px; border-radius: 10px; font-size: 13px; white-space: pre-wrap; line-height: 1.5; }
.fb-msg.user { align-self: flex-end; background: rgba(183,156,255,.14); }
.fb-msg.admin { align-self: flex-start; background: rgba(255,214,165,.14); }
.fb-msg-who { font-size: 11px; color: var(--ink-dim); margin-bottom: 2px; }

/* 页脚：法律文本 + 联系我们（联系我们打开站内反馈弹层） */
.site-footer { text-align: center; padding: 28px 16px 40px; color: var(--ink-dim); font-size: 13px; }
.site-footer a { color: var(--ink-dim); text-decoration: none; }
.site-footer a:hover { color: var(--warm); }
.site-footer .dot { margin: 0 8px; opacity: .5; }