/* ============================================================================
 * 第 1 批 F5 · 人物模板面板（web/js/characters.js）
 * 单独成文件的理由：index.html 已 2300+ 行，不再往里堆样式。
 * 【P0】颜色一律 var(--token)；圆角上限 18px；动效 150ms 收敛。
 * ========================================================================== */

.char-panel{
  margin-top:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px 16px;
}

/* ===== 头部：标题 + 人数 + 操作 ===== */
.char-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.char-t{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--fg);}
.char-cnt{
  font-size:11.5px;font-weight:700;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:2px 9px;
  font-variant-numeric:tabular-nums;
}
.char-cnt.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);}
.char-hd-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.char-sel{
  background:var(--surface-2);border:1px solid var(--border);color:var(--fg-2);
  border-radius:var(--radius-md);padding:6px 10px;font-size:12.5px;font-family:inherit;
  min-height:32px;cursor:pointer;
}
.char-sel:hover{border-color:var(--accent);}
.char-note{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:10px;font-size:12px;line-height:1.7;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:8px 11px;
}
.char-note.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent);}

/* ===== 列表：卡片 ===== */
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:12px;}
.char-card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:12px 14px;
  transition:border-color var(--motion-fast) var(--ease-standard);
}
.char-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);}
.char-card-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.char-name{font-size:14px;font-weight:700;color:var(--fg);}
.char-role{
  font-size:11px;font-weight:700;border-radius:var(--radius-sm);
  padding:2px 8px;border:1px solid var(--border);color:var(--muted);
  background:var(--surface);
}
.char-role.r-protagonist{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-dim);}
.char-role.r-antagonist{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);}
.char-role.r-supporting{color:var(--muted);}
.char-acts{margin-left:auto;display:flex;gap:4px;flex:none;}
.char-act{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:transparent;color:var(--muted);cursor:pointer;
  transition:color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);
}
.char-act:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);}
.char-act.del:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);}
.char-meta{font-size:11.5px;color:var(--meta);margin-top:6px;}
.char-app,.char-row{display:flex;gap:8px;margin-top:7px;font-size:12.5px;line-height:1.65;}
.char-app .k,.char-row .k{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  font-size:11px;color:var(--muted);padding-top:1px;
}
.char-app .v,.char-row .v{color:var(--fg-2);min-width:0;overflow-wrap:anywhere;}
.char-app .v{color:var(--fg);}

/* ===== 表单 ===== */
.char-form{
  margin-top:12px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--border) 90%,transparent);
}
.char-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;}
.char-form .fld{margin-bottom:12px;}
.char-hint{
  margin-top:7px;font-size:11.5px;line-height:1.75;color:var(--muted);
  background:var(--accent-dim);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:var(--radius-sm);padding:8px 11px;
  display:flex;gap:6px;align-items:flex-start;
}
.char-hint [data-icon],.char-hint .ti{flex:none;margin-top:2px;}
.char-form-btns{display:flex;gap:8px;flex-wrap:wrap;}
.char-none{text-align:center;color:var(--meta);font-size:13px;padding:22px 0;line-height:1.8;}

@media(max-width:560px){
  .char-panel{padding:12px;}
  .char-form-row{grid-template-columns:1fr!important;}
  .char-grid{grid-template-columns:1fr!important;}
  .char-hd-r{width:100%;margin-left:0;}
  .char-act{width:34px;height:34px;}
}