/* 聊天详情：记忆 / 设置 / 工具页（原 index.html 第 2815-3393 行） */

/* ============ 居中弹窗（语音 / 红包 / 转账 / 记忆工具） ============ */
.center-backdrop{
  position:absolute; inset:0;
  background:rgba(11,11,15,.44);
  display:flex; align-items:center; justify-content:center;
  padding:0 26px;
  opacity:0; pointer-events:none;
  transition:opacity .24s;
  z-index:82;
}
.center-backdrop.show{ opacity:1; pointer-events:auto; }
.center-card{
  width:100%; max-width:320px;
  max-height:76%;
  overflow-y:auto;
  background:var(--bg);
  border-radius:28px;
  padding:22px 0 18px;
  box-shadow:0 24px 60px rgba(11,11,15,.24);
  transform:scale(.9) translateY(10px);
  opacity:0;
  transition:transform .34s var(--spring), opacity .24s;
}
.center-backdrop.show .center-card{ transform:none; opacity:1; }
.center-card::-webkit-scrollbar{ width:0; }
.cc-title{
  font-size:16px; font-weight:600;
  color:var(--ink);
  text-align:center;
  padding:0 24px 4px;
}
.cc-sub{
  font-size:12px; color:var(--gray-2);
  text-align:center;
  padding:6px 24px 2px;
  line-height:1.6;
}
.center-card .pad-body{ padding:14px 22px 4px; }

/* ============ 红包 / 转账 详情（居中弹窗内） ============ */
.pay-detail{ padding:8px 16px 2px; }
.pay-hero{
  position:relative; overflow:hidden;
  border-radius:22px; padding:24px 18px 20px;
  text-align:center; color:#fff;
  background:linear-gradient(160deg, #FF8A65 0%, #F0553D 55%, #D8402E 100%);
  box-shadow:0 10px 26px rgba(226,96,74,.3);
}
.pay-hero.tr{ background:linear-gradient(160deg, #FFB870 0%, #F58F3E 60%, #E87A2E 100%); box-shadow:0 10px 26px rgba(232,135,60,.28); }
.pay-hero.done{ background:linear-gradient(160deg, #EBB9AD 0%, #DFA093 60%, #D39485 100%); box-shadow:none; }
.pay-hero.tr.done{ background:linear-gradient(160deg, #EFCDA8 0%, #E1B389 60%, #D6A67C 100%); box-shadow:none; }
.pay-hero.back{ background:linear-gradient(160deg, #D2D4DB 0%, #BCC0C9 60%, #AFB3BD 100%); box-shadow:none; }
.pay-hero::before{
  content:''; position:absolute; left:-20%; right:-20%; top:-120px;
  height:170px; border-radius:50%;
  background:rgba(255,255,255,.13);
  pointer-events:none;
}
.pay-hero > *{ position:relative; z-index:1; }
.pay-hero-avatar{
  width:48px; height:48px; border-radius:50%;
  object-fit:cover; margin:0 auto 10px; display:block;
  box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 4px 10px rgba(0,0,0,.18);
}
.pay-hero-who{ font-size:13px; opacity:.92; }
.pay-hero-note{
  font-size:15.5px; font-weight:600; margin-top:6px;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
  word-break:break-word;
}
.pay-hero-amt{
  margin-top:14px;
  font-family:var(--font-num), inherit;
  font-size:38px; font-weight:700; line-height:1;
  letter-spacing:-.02em;
  text-shadow:0 2px 2px rgba(0,0,0,.14);
}
.pay-hero-amt small{ font-size:20px; font-weight:600; margin-right:2px; }
.pay-hero-seal{
  width:64px; height:64px; margin:12px auto 0;
  border-radius:50%;
  background:linear-gradient(150deg, #FFE9A8, #F2C24B);
  box-shadow:0 6px 14px rgba(0,0,0,.2), inset 0 -3px 0 rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  font-family:"Noto Serif SC", "Songti SC", "STSong", serif;
  font-size:26px; font-weight:700; color:#B23A22;
}
.pay-hero-state{
  display:inline-block; margin-top:12px;
  padding:4px 12px; border-radius:999px;
  background:rgba(255,255,255,.2);
  font-size:11.5px; letter-spacing:.04em;
}
.pay-meta{
  margin:12px 0 0;
  border-radius:16px; background:var(--fill);
  overflow:hidden;
}
.pay-meta div{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 14px; font-size:12.5px;
}
.pay-meta div + div{ box-shadow:inset 0 1px 0 var(--hairline); }
.pay-meta span{ color:var(--gray-2); flex:0 0 auto; }
.pay-meta b{ font-weight:500; color:var(--ink); font-family:var(--font-num), inherit; text-align:right; word-break:break-all; }
.pay-btns{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.pay-btn{
  min-height:46px; padding:8px 14px;
  border:none; border-radius:15px;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1.25;
  cursor:pointer; color:#fff;
  background:var(--ink);
  transition:transform .16s, opacity .16s;
}
.pay-btn:active{ transform:scale(.98); }
.pay-btn.red{ background:linear-gradient(150deg, #F0553D, #D8402E); box-shadow:0 6px 16px rgba(226,96,74,.3); }
.pay-btn.tr{ background:linear-gradient(150deg, #F58F3E, #E87A2E); box-shadow:0 6px 16px rgba(232,135,60,.28); }
.pay-btn.ghost{ background:var(--fill); color:var(--ink); }
.pay-btn.ghost.danger{ color:var(--danger); }
.pay-btn small{ display:block; font-size:11px; font-weight:400; opacity:.7; margin-top:2px; }
.center-card .save-btn{ margin-top:20px; height:46px; font-size:15px; }
.center-card .sheet-item{ padding:13px 22px; }
.center-card .sheet-item-preview{ max-width:220px; }

/* ============ 聊天详情页（右上角三点进入） ============ */
.tinfo-card{
  display:flex; align-items:center; gap:14px;
  padding:20px;
  margin:14px 20px 0;
  background:var(--fill);
  border-radius:24px;
}
.tinfo-avatar{
  width:60px; height:60px;
  border-radius:50%;
  object-fit:cover;
  background:var(--bg);
  flex:0 0 auto;
}
.tinfo-avatar-initial{
  width:60px; height:60px;
  border-radius:50%;
  background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:600;
  flex:0 0 auto;
}
.tinfo-word{ flex:1; min-width:0; }
.tinfo-word b{ display:block; font-size:18px; font-weight:600; }
.tinfo-word span{
  display:block;
  font-size:12.5px; color:var(--gray-2);
  margin-top:5px; line-height:1.6;
}
.tm-pane .tinfo-card{ margin:2px 18px 14px; }
.tinfo-persona{
  margin:22px 20px 0;
  padding:16px 18px;
  background:var(--fill);
  border-radius:20px;
  font-size:13px; color:var(--gray-1);
  line-height:1.75;
  max-height:168px;
  overflow-y:auto;
  white-space:pre-wrap;
}
.tinfo-persona::-webkit-scrollbar{ width:0; }
.tinfo-label{
  font-size:11px; font-weight:600;
  letter-spacing:.1em;
  color:var(--gray-2);
  margin:26px 20px 8px;
}
/* 详情页入口行（记忆 / 设置」同页 */
.tinfo-entry{
  display:flex; align-items:center; gap:14px;
  width:100%;
  padding:17px 20px;
  border:none; background:var(--fill);
  border-radius:20px;
  margin:0 20px 10px;
  box-sizing:border-box;
  width:calc(100% - 40px);
  cursor:pointer;
  text-align:left;
  transition:transform .2s var(--spring), background .18s;
}
.tinfo-entry:hover{ background:rgba(11,11,15,.06); }
.tinfo-entry:active{ transform:scale(.98); }
.tinfo-entry .te-ico{
  width:38px; height:38px;
  flex:0 0 auto;
  border-radius:13px;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.tinfo-entry .te-ico svg{
  width:20px; height:20px;
  fill:none; stroke:var(--ink);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.tinfo-entry .te-word{ flex:1; min-width:0; }
.tinfo-entry .te-word b{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.tinfo-entry .te-word span{
  display:block;
  font-size:12px; color:var(--gray-2);
  margin-top:3px;
}
.tinfo-entry .te-arrow{
  width:18px; height:18px;
  flex:0 0 auto;
  fill:none; stroke:var(--gray-3);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ============ 记忆 / 设置：同页左右切换 ============ */
.tm-switch{
  display:flex; gap:3px;
  margin:2px 18px 14px;
  background:var(--fill);
  border-radius:17px;
  padding:4px;
  flex:0 0 auto;
}
.tm-sw{
  flex:1; height:38px;
  border:none; border-radius:13px;
  background:transparent;
  font-family:inherit;
  font-size:14px; font-weight:500;
  color:var(--gray-1);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .22s, color .22s, box-shadow .22s, transform .18s var(--spring);
}
.tm-sw svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.tm-sw.on{
  background:var(--bg); color:var(--ink); font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.09);
}
.tm-sw:active{ transform:scale(.97); }
.tm-panes{ flex:1; min-height:0; display:flex; }
.tm-pane{
  display:none;
  flex:1; min-height:0;
  overflow-y:auto;
  padding:0 0 30px;
}
.tm-pane.on{ display:block; animation:viewIn .26s var(--ease-out) both; }
.tm-pane::-webkit-scrollbar{ width:0; }

/* 内容大块 */
.tm-block{
  margin:0 18px 14px;
  background:var(--fill);
  border-radius:22px;
  overflow:hidden;
}
.tm-block-head{
  display:flex; align-items:center; gap:9px;
  padding:15px 16px 0;
}
.tm-block-head svg{
  width:17px; height:17px; flex:0 0 auto;
  fill:none; stroke:var(--ink);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.tm-block-head b{ font-size:14px; font-weight:600; }
.tm-note{
  padding:6px 16px 0;
  font-size:11.5px; color:var(--gray-2); line-height:1.65;
}
.tm-block-head + .tm-row{ margin-top:6px; }
.tm-row{
  display:flex; align-items:center; gap:12px;
  padding:13px 16px;
}
.tm-row + .tm-row{ box-shadow:inset 0 1px 0 rgba(11,11,15,.05); }
.tm-key{ flex:1; min-width:0; }
.tm-key b{ display:block; font-size:14px; font-weight:500; color:var(--ink); }
.tm-key span{ display:block; font-size:11.5px; color:var(--gray-2); margin-top:3px; line-height:1.5; }
.tm-val{
  flex:0 0 auto;
  font-size:13.5px; color:var(--gray-1);
  max-width:52%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.tm-row input[type="text"],
.tm-row input[type="number"]{
  flex:0 0 auto;
  width:130px;
  border:none; outline:none;
  background:var(--bg);
  border-radius:12px;
  padding:9px 12px;
  font-family:inherit; font-size:14px;
  color:var(--ink); text-align:right;
}
.tm-row input[type="number"]{ width:86px; }
/* 行内下拉（聊天美化：选 CSS 预设） */
.tm-row .tm-select{
  flex:0 0 auto;
  max-width:52%;
  border:none; outline:none;
  background:var(--bg);
  border-radius:12px;
  padding:9px 30px 9px 12px;
  font-family:inherit; font-size:13.5px;
  color:var(--ink);
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.tm-row input::placeholder{ color:var(--gray-3); }
.tm-area{
  display:block;
  width:calc(100% - 32px);
  margin:4px 16px 14px;
  min-height:78px;
  border:none; outline:none; resize:vertical;
  background:var(--bg);
  border-radius:15px;
  padding:12px 14px;
  font-family:inherit; font-size:13.5px; line-height:1.7;
  color:var(--ink);
}
.tm-area::placeholder{ color:var(--gray-3); }
/* iOS 式开关 */
.tm-toggle{
  position:relative;
  flex:0 0 auto;
  width:46px; height:28px;
  border:none; border-radius:999px;
  background:var(--gray-3);
  cursor:pointer;
  transition:background .24s;
}
.tm-toggle::after{
  content:'';
  position:absolute; top:3px; left:3px;
  width:22px; height:22px; border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  transition:transform .28s var(--spring);
}
.tm-toggle.on{ background:var(--ink); }
.tm-toggle.on::after{ transform:translateX(18px); }
/* 块内分段选择 */
.tm-seg{
  display:flex; gap:3px;
  margin:0 16px 12px;
  background:var(--bg);
  border-radius:14px;
  padding:3px;
}
.tm-seg-btn{
  flex:1; height:34px;
  border:none; border-radius:11px;
  background:transparent;
  font-family:inherit; font-size:12.5px; font-weight:500;
  color:var(--gray-1);
  cursor:pointer;
  transition:background .2s, color .2s;
}
.tm-seg-btn.on{ background:var(--primary); color:var(--ink); font-weight:600; }
/* 折叠子区 */
.tm-fold{ display:none; }
.tm-fold.show{ display:block; }
/* 概率滑块 */
.tm-slider{ flex:1; display:flex; align-items:center; gap:12px; }
.tm-slider input[type="range"]{
  flex:1; min-width:0;
  -webkit-appearance:none; appearance:none;
  height:4px; border-radius:999px;
  background:var(--gray-3);
  outline:none;
}
.tm-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  cursor:pointer;
}
.tm-slider input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  cursor:pointer;
}
.tm-slider-val{
  flex:0 0 auto; min-width:46px; text-align:right;
  font-size:13px; color:var(--gray-1);
  font-variant-numeric:tabular-nums;
}
/* 页脚按钮区 */
.tm-foot{ padding:2px 18px 0; }
.tm-foot .save-btn{ margin-top:10px; height:48px; border-radius:22px; }
.tm-foot .del-persona-btn{ margin-top:10px; }
.tm-foot-note{
  margin:14px 2px 0;
  font-size:12px; color:var(--gray-2); line-height:1.7;
}
/* 底部操作键：两列排版，避免一长串按钮 */
.tm-btn-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.tm-mini-btn{
  height:46px;
  border:1px solid var(--hairline);
  border-radius:16px;
  background:var(--bg);
  color:var(--gray-1);
  font-family:inherit; font-size:14px; font-weight:500;
  cursor:pointer;
  transition:background .18s, color .18s, transform .18s var(--spring);
}
.tm-mini-btn:hover{ background:rgba(11,11,15,.04); color:var(--ink); }
.tm-mini-btn:active{ transform:scale(.97); }
.tm-mini-btn.danger{
  color:var(--danger);
  border-color:rgba(255,59,48,.34);
  background:rgba(255,59,48,.06);
}
.tm-mini-btn.danger:hover{ background:rgba(255,59,48,.12); color:var(--danger); }

/* ============ 记忆系统 ============ */
.mem-hero{
  display:flex; gap:9px;
  margin:0 18px 12px;
}
.mem-stat{
  flex:1;
  background:var(--fill);
  border-radius:18px;
  padding:12px 6px;
  text-align:center;
}
.mem-stat b{
  display:block;
  font-family:var(--font-num);
  font-size:20px; font-weight:600;
  line-height:1.2;
}
.mem-stat span{ font-size:11px; color:var(--gray-2); }
.mem-tabs{
  display:flex; gap:3px;
  margin:0 18px 10px;
  background:var(--fill);
  border-radius:15px;
  padding:3px;
}
.mem-tab{
  flex:1;
  padding:9px 0;
  border:none;
  border-radius:12px;
  background:transparent;
  color:var(--gray-1);
  font-family:inherit;
  font-size:12.5px; font-weight:500;
  cursor:pointer;
  transition:background .18s, color .18s, transform .2s var(--spring);
}
.mem-tab.on{
  background:var(--bg); color:var(--ink); font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,.07);
}
.mem-tab:active{ transform:scale(.96); }
.mem-bar{
  display:flex; align-items:center; gap:8px;
  padding:0 18px 2px;
}
.mem-bar .mem-count{
  flex:1;
  font-size:12px; color:var(--gray-2);
}
.mem-btn{
  padding:8px 14px;
  border:none; border-radius:999px;
  background:var(--fill);
  color:var(--ink);
  font-family:inherit;
  font-size:12.5px; font-weight:500;
  cursor:pointer;
  transition:background .18s, transform .2s var(--spring);
}
.mem-btn:hover{ background:rgba(11,11,15,.06); }
.mem-btn:active{ transform:scale(.95); }
.mem-btn.primary{ background:var(--primary); font-weight:600; }
.mem-list{ padding:8px 18px 24px; display:flex; flex-direction:column; gap:12px; }
/* 记忆卡片：左侧色带 + 序号 + 标题 + 正文 + 关键词，底部元信息与操作 */
.mem-card{
  position:relative;
  --mc-a:#0B0B0F; --mc-b:#F2F2F7; --mc-c:#E5E5EA;
  background:linear-gradient(150deg, var(--mc-b) 0%, #fff 62%);
  border-radius:24px;
  padding:16px 18px 14px 20px;
  box-shadow:0 1px 0 var(--hairline), 0 0 0 1px var(--hairline), 0 10px 26px -18px rgba(11,11,15,.28);
  overflow:hidden;
  animation:memIn .42s var(--ease-out) both;
}
@keyframes memIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.mem-card::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px;
  width:4px; border-radius:0 4px 4px 0;
  background:var(--mc-a);
}
.mem-card.big{ --mc-a:#FF9F0A; --mc-b:#FFF2D6; --mc-c:#FFE0B2; }
.mem-card.view{ --mc-a:#5E5CE6; --mc-b:#E9E6FF; --mc-c:#D8D3FF; }
.mem-card.normal{ --mc-a:#30B0C7; --mc-b:#E3F6FA; --mc-c:#C9EEF4; }
.mem-head{
  display:flex; align-items:flex-start; gap:10px;
}
.mem-no{
  flex:0 0 auto;
  min-width:26px; height:26px; padding:0 7px;
  border-radius:9px;
  background:var(--mc-a); color:#fff;
  font-family:var(--font-num);
  font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:.02em;
}
.mem-head b{
  flex:1;
  font-size:14.5px; font-weight:600;
  line-height:1.5;
  color:var(--ink);
  padding-top:2px;
}
.mem-tools{ display:flex; gap:2px; flex:0 0 auto; }
.mem-del, .mem-edit{
  width:28px; height:28px;
  border:none; border-radius:9px;
  background:transparent;
  color:var(--gray-3);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, transform .18s var(--spring);
}
.mem-del svg, .mem-edit svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.mem-del:hover{ background:rgba(255,59,48,.1); color:var(--danger); }
.mem-edit:hover{ background:rgba(11,11,15,.06); color:var(--ink); }
.mem-del:active, .mem-edit:active{ transform:scale(.9); }
.mem-text{
  font-size:13.2px; color:var(--gray-1);
  line-height:1.78;
  margin-top:9px;
  white-space:pre-wrap;
}
.mem-keys{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:11px;
}
.mem-key{
  padding:4px 11px;
  border-radius:999px;
  background:var(--mc-c);
  font-size:11.5px; color:var(--ink);
}
.mem-key.main{ background:var(--mc-a); color:#fff; font-weight:600; }
.mem-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px;
  font-size:11px; color:var(--gray-2);
  margin-top:12px; padding-top:10px;
  border-top:1px dashed rgba(11,11,15,.09);
}
.mem-meta span{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.mem-meta .mem-src{
  margin-left:auto;
  padding:2px 8px; border-radius:999px;
  background:rgba(11,11,15,.05); color:var(--gray-1); font-weight:500;
}
/* 生成中的角标 */
.busy-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:var(--fill); font-size:11.5px; color:var(--gray-1);
}
.busy-pill i{
  width:6px; height:6px; border-radius:50%; background:var(--ink);
  animation:busyDot 1s infinite alternate;
}
@keyframes busyDot{ from{ opacity:.2; } to{ opacity:1; } }
.mem-empty{
  padding:46px 24px;
  text-align:center;
  font-size:13px; color:var(--gray-2);
  line-height:1.8;
}
/* ============ 功能页：不规则拼贴（4 列网格，卡片按 lg / wide / tall / sm 占格） ============ */
.tools-head{ padding:calc(var(--head-top) + 6px) 22px 4px; }
.tools-eyebrow{
  margin:0 0 2px !important;
  font-size:10.5px !important; font-weight:700; letter-spacing:.22em;
  color:var(--gray-2);
}
.tools-head h1{ margin:0; font-size:26px; font-weight:800; letter-spacing:-.02em; }
.tools-head p{ margin:5px 0 0; font-size:12.5px; color:var(--gray-2); }
.tools-grid{
  flex:1; min-height:0; overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:78px;                 /* 统一的小行高：卡片按跨几行决定高矮 */
  grid-auto-flow:dense;                /* 让小块自动补空位，形成不规则拼贴 */
  gap:12px;
  padding:12px 18px 28px;
  align-content:start;
}
.tools-grid::-webkit-scrollbar{ width:0; }
/* 四种规格 */
.tool-card.lg{   grid-column:span 2; grid-row:span 3; }   /* 大方块 */
.tool-card.wide{ grid-column:span 2; grid-row:span 2; }   /* 横条 */
.tool-card.tall{ grid-column:span 2; grid-row:span 3; }   /* 竖条 */
.tool-card.sm{   grid-column:span 2; grid-row:span 1; padding:12px 14px; flex-direction:row; align-items:center; gap:10px; border-radius:20px; }
.tool-card.sm .tool-icon{ width:38px; height:38px; border-radius:13px; flex:0 0 auto; }
.tool-card.sm .tool-icon svg{ width:19px; height:19px; }
.tool-card.sm .tool-name{ margin-top:0; font-size:14px; }
.tool-card.sm .tool-desc{ display:none; }
.tool-card.sm::after{ width:70px; height:70px; right:-22px; bottom:-30px; }
.tool-card.lg .tool-name{ font-size:20px; }
.tool-card.lg .tool-icon{ width:54px; height:54px; border-radius:18px; }
.tool-card.lg .tool-icon svg{ width:26px; height:26px; }
/* 让拼贴稍微"歪"一点：几张卡带一点旋转，hover 时摆正 */
.tool-card.music{ transform:rotate(-1.2deg); }
.tool-card.charcard{ transform:rotate(.8deg); }
.tool-card.phone{ transform:rotate(1deg); }
.tool-card.novel{ transform:rotate(-.6deg); }
.tool-card.music:hover, .tool-card.charcard:hover, .tool-card.phone:hover, .tool-card.novel:hover{ transform:rotate(0) translateY(-3px); }
/* 装饰：音乐卡里的唱片、查手机卡里的手机轮廓 */
.tool-deco{ position:absolute; pointer-events:none; }
.tool-deco-disc{
  right:-30px; top:34px; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,255,255,.9) 0 12px, transparent 13px 18px, rgba(11,11,15,.08) 19px 22px, transparent 23px 30px, rgba(11,11,15,.08) 31px 34px, transparent 35px 44px, rgba(11,11,15,.08) 45px 48px, transparent 49px);
  border:10px solid rgba(255,255,255,.45);
}
.tool-deco-phone{
  right:16px; bottom:-40px; width:70px; height:130px; border-radius:20px;
  border:5px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
}
.tool-card{
  position:relative;
  min-height:0;
  border:none; border-radius:26px;
  padding:18px 16px 16px;
  text-align:left;
  color:var(--ink);
  background:linear-gradient(150deg, var(--tc-a), var(--tc-b));
  box-shadow:0 12px 28px -18px rgba(11,11,15,.35), inset 0 1px 0 rgba(255,255,255,.7);
  display:flex; flex-direction:column; justify-content:space-between;
  cursor:pointer; overflow:hidden;
  transition:transform .26s var(--spring), box-shadow .26s;
}
.tool-card:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -18px rgba(11,11,15,.4), inset 0 1px 0 rgba(255,255,255,.7); }
.tool-card:active{ transform:scale(.96); }
.tool-card::after{
  content:''; position:absolute; right:-24px; bottom:-30px;
  width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.35);
  pointer-events:none;
}
.tool-icon{
  width:46px; height:46px; border-radius:16px;
  background:rgba(255,255,255,.72);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px -8px rgba(11,11,15,.35);
}
.tool-icon svg{
  width:23px; height:23px;
  fill:none; stroke:var(--ink);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.tool-name{ display:block; font-size:16px; font-weight:700; margin-top:10px; }
.tool-desc{ display:block; font-size:11.5px; color:rgba(11,11,15,.6); margin-top:3px; line-height:1.5; }
.tool-arrow{
  position:absolute; right:14px; top:16px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
}
.tool-arrow svg{ width:13px; height:13px; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.tool-card.music{  --tc-a:#FFE1EC; --tc-b:#FFF4F8; }
.tool-card.mcp{    --tc-a:#DDEBFF; --tc-b:#F1F6FF; }
.tool-card.couple{ --tc-a:#FFE3D6; --tc-b:#FFF5EF; }
.tool-card.phone{  --tc-a:#E4F7EA; --tc-b:#F3FBF5; }
.tool-card.novel{  --tc-a:#EEE5FF; --tc-b:#F7F3FF; }
.tool-card.shop{   --tc-a:#FFF1CC; --tc-b:#FFF9E8; }
.tool-card.idol{   --tc-a:#FFE8F7; --tc-b:#FBF3FF; }
.tool-card.takeout{ --tc-a:#E0F4FF; --tc-b:#F0FAFF; }
.tool-card.store{  --tc-a:#E9F0E2; --tc-b:#F6FAF2; }
.tool-card.charcard{ --tc-a:#DCEFEA; --tc-b:#EFFAF6; }
/* 角色卡生成：整页内嵌网页 */
.charcard-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.charcard-frame{
  flex:1; min-height:0; width:100%;
  border:none; background:#fff;
}
.charcard-note{
  margin:0; padding:6px 16px calc(6px + env(safe-area-inset-bottom));
  font-size:11px; color:var(--gray-2); text-align:center;
}
.tool-sub-body{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  padding:0 40px 60px; text-align:center;
}
.tool-sub-body .ph-icon{ width:84px; height:84px; border-radius:30px; }
.tool-sub-body .ph-icon svg{ width:36px; height:36px; }
.tool-sub-body h2{ margin:0; font-size:19px; font-weight:700; }
.tool-sub-body p{ margin:0; font-size:13.5px; color:var(--gray-1); line-height:1.75; }