/* ============================================================================
 * 伙伴阁（P0-A · 2026-10-19）· SPA 壳页样式（app.html #/partner）
 * ----------------------------------------------------------------------------
 * 定位：角色「会说话、可切换、音色联动」的挑选主场。中屏单列（无左栏 / 右看板），
 *   内容列在**壳内**居中（.myquest-shell 禁 max-width+margin:auto —— desktop.css
 *   min-width:781 段对三栏壳族有 !important 通栏共识，实测壳自身 max-width 被压成
 *   none；故居中一律走壳内 .pt-wrap，与 ai-literacy-shell.css 同范式）。
 * 壳纪律（点火包 T4）：自家 class 已进 quest-shell.css:151 的 :not() 名单 ⇒ 中屏
 *   padding 由本文件接管（无需 !important）；壳铺 --mq-main-bg（只染壳，不动宿主
 *   body / main.main）；所有 <button> 由 app.js 显式 type="button"。
 * 色值全部走 .partner-shell 作用域令牌，深浅双色自动跟随、对宿主页零污染。
 * 立绘位：P0-A 用现有 mascot 资产占位（P0-B 换原创立绘），按角色给底纹色调做
 *   区分 —— 不留空框（空态谎报红线）。
 * ============================================================================ */
.myquest-shell.partner-shell{
  --pt-surface:#FFFFFF;      /* 卡片面 */
  --pt-surface-2:#F5F0FF;    /* 次浅紫（备注 / 音色签 / 提示笺） */
  --pt-line:#EAE4F6;         /* 卡片描边 */
  --pt-line-strong:#D9C9F7;  /* 描边强调（hover / 虚线笺） */
  --pt-brand:#7F4AE0;        /* 品牌紫（按钮 / 强调字） */
  --pt-brand-deep:#6D5EFC;   /* 图标底渐变深端 */
  background:var(--mq-main-bg,#FCFAFF);
}
[data-theme="dark"] .myquest-shell.partner-shell{
  --pt-surface:#221C3D;
  --pt-surface-2:#332C52;
  --pt-line:#3A3164;
  --pt-line-strong:#5B4EA6;
  --pt-brand:#C9B6FF;
  --pt-brand-deep:#8F5AF0;
}
/* 中屏 padding 接管（quest-shell.css:151 的 xb-app 44px 规则已排除 partner-shell） */
.partner-shell > .mq-main{ padding:0; }
/* 内容列：壳内居中 + 上下留白 */
.pt-wrap{ max-width:1020px; margin:0 auto; padding:28px 28px 64px; }

/* ---------- 顶部区：标题 + 描述 + 小字备注 ---------- */
.pt-head{ display:flex; align-items:flex-start; gap:14px; }
.pt-head-ico{ flex:none; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#8F6BFF,var(--pt-brand-deep,#6D5EFC)); box-shadow:0 8px 20px rgba(109,94,252,.28); }
.pt-head-ico svg{ width:24px; height:24px; stroke:#fff; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.pt-head-t{ flex:1 1 auto; min-width:0; }
.pt-h1{ margin:0; font-size:22px; line-height:1.25; font-weight:800; letter-spacing:.2px; color:var(--ink,#221838); }
[data-theme="dark"] .pt-h1{ color:#FFFFFF; }
.pt-desc{ margin:7px 0 0; font-size:13.5px; line-height:1.7; color:var(--muted,#665E85); }
[data-theme="dark"] .pt-desc{ color:#B8AEE0; }
/* 小字备注（管理预期）：伙伴只改说话风格，教学口径不变 —— 弱化处理但必须可见 */
.pt-note{ margin:11px 0 0; display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  background:var(--pt-surface-2,#F5F0FF); border:1px solid var(--pt-line,#EAE4F6);
  font-size:12px; line-height:1.5; color:var(--muted,#665E85); }
[data-theme="dark"] .pt-note{ color:#B8AEE0; }

/* ---------- 模块一「已拥有伙伴」 ---------- */
.pt-sec{ margin-top:26px; }
.pt-sec-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.pt-sec-t{ font-size:15px; font-weight:800; color:var(--ink,#221838); }
[data-theme="dark"] .pt-sec-t{ color:#FFFFFF; }
.pt-sec-n{ font-size:12px; color:var(--muted,#665E85); }
.pt-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:880px){ .pt-grid{ grid-template-columns:1fr; } }

/* 横向卡片：立绘位 + 人设标签 + 音色签 + 【选用】 */
.pt-card{ position:relative; display:flex; align-items:flex-start; gap:14px; padding:16px; border-radius:18px;
  background:var(--pt-surface,#FFFFFF); border:1px solid var(--pt-line,#EAE4F6);
  box-shadow:0 6px 18px rgba(80,70,160,.06);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.pt-card:hover{ border-color:var(--pt-line-strong,#D9C9F7); box-shadow:0 10px 26px rgba(80,70,160,.12); transform:translateY(-1px); }
/* 当前选用：品牌描边 + 极淡紫底（卡片自身即状态，不靠角标抢位） */
.pt-card.is-on{ border-color:var(--pt-brand,#7F4AE0);
  background:linear-gradient(180deg,rgba(127,74,224,.055),rgba(127,74,224,.018)), var(--pt-surface,#FFFFFF); }
[data-theme="dark"] .pt-card.is-on{
  background:linear-gradient(180deg,rgba(143,90,240,.14),rgba(143,90,240,.05)), var(--pt-surface,#221C3D); }

/* 立绘位：P0-A mascot 占位（P0-B 原创立绘），按角色给底纹色调 —— 不留空框 */
.pt-art{ flex:none; width:76px; height:76px; border-radius:22px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pt-art img{ width:58px; height:58px; object-fit:contain; }
.pt-art[data-char="xiaoban"]{ background:radial-gradient(circle at 30% 25%,#EFE8FF,#D9C9F7); }
.pt-art[data-char="yanxue"]{ background:radial-gradient(circle at 30% 25%,#FDF3E3,#F0D9B0); }
.pt-art[data-char="xingtu"]{ background:radial-gradient(circle at 30% 25%,#E3EEFF,#B9CCF5); }
.pt-art[data-char="linjian"]{ background:radial-gradient(circle at 30% 25%,#E6F6EC,#BFE5CC); }
[data-theme="dark"] .pt-art[data-char="xiaoban"]{ background:radial-gradient(circle at 30% 25%,#3B2F63,#2A2350); }
[data-theme="dark"] .pt-art[data-char="yanxue"]{ background:radial-gradient(circle at 30% 25%,#4A3A2A,#332619); }
[data-theme="dark"] .pt-art[data-char="xingtu"]{ background:radial-gradient(circle at 30% 25%,#26355C,#1A2440); }
[data-theme="dark"] .pt-art[data-char="linjian"]{ background:radial-gradient(circle at 30% 25%,#24403A,#172B26); }

.pt-body{ flex:1 1 auto; min-width:0; }
.pt-name-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pt-name{ font-size:15px; font-weight:800; color:var(--ink,#221838); }
[data-theme="dark"] .pt-name{ color:#FFFFFF; }
/* 小伴卡专属标注：默认伙伴 · 不可删除（P0 无删除入口，删除属 P1） */
.pt-tag{ flex:none; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px;
  background:var(--pt-surface-2,#F5F0FF); border:1px solid var(--pt-line,#EAE4F6); color:var(--muted,#665E85); }
[data-theme="dark"] .pt-tag{ color:#B8AEE0; }
.pt-desc{ margin:7px 0 0; font-size:12.5px; line-height:1.65; color:var(--muted,#665E85); }
[data-theme="dark"] .pt-desc{ color:#B8AEE0; }
/* 音色签：角色 → VoxCPM2 音色映射（#756 真源），xiaoban ＝ 默认童声 */
.pt-voice{ margin:9px 0 0; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted,#665E85); }
[data-theme="dark"] .pt-voice{ color:#B8AEE0; }
.pt-voice b{ color:var(--pt-brand,#7F4AE0); font-weight:700; }

/* 【选用】/【使用中】：全部可点（不放死按钮 —— 当前卡再点一次＝重放音色 + 如实提示） */
.pt-use{ flex:none; align-self:center; min-width:78px; height:34px; padding:0 15px; border-radius:999px; cursor:pointer;
  border:1px solid var(--pt-brand,#7F4AE0); background:var(--pt-brand,#7F4AE0); color:#fff;
  font-family:inherit; font-size:13px; font-weight:700; white-space:nowrap;
  transition:filter .14s ease, background .14s ease, color .14s ease; }
.pt-use:hover{ filter:brightness(1.08); }
.pt-use:active{ transform:scale(.96); }
.pt-use.is-on{ background:var(--pt-surface-2,#F5F0FF); color:var(--pt-brand,#7F4AE0); border-color:var(--pt-line-strong,#D9C9F7); }

/* ---------- 底部提示笺：三个入口 + 音色解耦口径 ---------- */
.pt-tip{ margin:22px 0 0; padding:13px 16px; border-radius:14px;
  background:var(--pt-surface-2,#F5F0FF); border:1px dashed var(--pt-line-strong,#D9C9F7);
  font-size:12.5px; line-height:1.85; color:var(--muted,#665E85); }
[data-theme="dark"] .pt-tip{ color:#B8AEE0; }
.pt-tip b{ color:var(--pt-brand,#7F4AE0); }

/* ---------- 模块二「本机切换记录」：埋点数据本机可见（不上云的透明面） ---------- */
.pt-rec{ margin:26px 0 0; }
.pt-rec-list{ display:flex; flex-direction:column; gap:8px; }
.pt-rec-item{ display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:12px;
  background:var(--pt-surface,#FFFFFF); border:1px solid var(--pt-line,#EAE4F6);
  font-size:12.5px; color:var(--muted,#665E85); }
.pt-rec-item b{ color:var(--ink,#221838); font-weight:700; }
[data-theme="dark"] .pt-rec-item b{ color:#FFFFFF; }
.pt-rec-item .arw{ flex:none; color:var(--pt-brand,#7F4AE0); font-weight:800; }
.pt-rec-item .tm{ margin-left:auto; flex:none; font-size:12px; }
.pt-rec-empty{ padding:14px 16px; border-radius:12px; border:1px dashed var(--pt-line-strong,#D9C9F7);
  background:var(--pt-surface-2,#F5F0FF); font-size:12.5px; line-height:1.7; color:var(--muted,#665E85); }
[data-theme="dark"] .pt-rec-empty{ color:#B8AEE0; }
/* 导出按钮（只读本机 JSON；section head 右侧） */
.pt-export{ align-self:center; flex:none; height:28px; padding:0 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--pt-line-strong,#D9C9F7); background:var(--pt-surface,#FFFFFF); color:var(--pt-brand,#7F4AE0);
  font-family:inherit; font-size:12px; font-weight:700; }
.pt-export:hover{ background:var(--pt-surface-2,#F5F0FF); }
.pt-export:active{ transform:scale(.96); }

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .pt-wrap{ padding:20px 16px 48px; }
  .pt-head{ gap:11px; }
  .pt-head-ico{ width:40px; height:40px; border-radius:12px; }
  .pt-head-ico svg{ width:21px; height:21px; }
  .pt-h1{ font-size:19px; }
  .pt-card{ padding:14px; gap:12px; }
  .pt-art{ width:64px; height:64px; border-radius:19px; }
  .pt-art img{ width:50px; height:50px; }
  .pt-use{ min-width:68px; padding:0 12px; }
}