.character-creator { --cc-ink:#24382f; --cc-muted:#65726b; --cc-accent:#297052; --cc-line:#dce6df; --cc-tint:#edf5ef; color:var(--cc-ink); background:#fff; border:1px solid var(--cc-line); border-radius:8px; padding:0; width:min(1040px,calc(100% - 48px)); max-width:1040px; height:min(820px,calc(100dvh - 48px)); max-height:calc(100dvh - 48px); margin:auto; font:15px/1.55 "Microsoft YaHei","PingFang SC",system-ui,sans-serif; letter-spacing:0; box-shadow:0 16px 64px #16342426; }
.character-creator[open] { display:flex; flex-direction:column; }
.character-creator::backdrop { background:#15251db3; }
.character-creator * { box-sizing:border-box; letter-spacing:0; }
.character-creator [hidden] { display:none!important; }
.character-creator h1,.character-creator h2,.character-creator h3,.character-creator p,.character-creator figure { margin:0; }
.cc-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 28px 12px; flex-shrink:0; }
.cc-header h1 { font:600 22px/1.4 "Microsoft YaHei","PingFang SC",sans-serif; overflow-wrap:anywhere; }
.cc-header>div { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cc-close { display:grid; place-items:center; padding:0; width:40px; height:40px; border:0; background:transparent; cursor:pointer; }
.cc-close span { position:relative; width:20px; height:20px; }
.cc-close span::before,.cc-close span::after { content:""; position:absolute; width:20px; height:2px; background:var(--cc-ink); left:0; top:9px; transform:rotate(45deg); }
.cc-close span::after { transform:rotate(-45deg); }
.cc-steps { display:flex; list-style:none; gap:28px; margin:0; padding:8px 28px 18px; border-bottom:1px solid var(--cc-line); flex-shrink:0; }
.cc-steps li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--cc-muted); }
.cc-steps li>span { display:grid; place-items:center; width:24px; height:24px; flex-shrink:0; border-radius:50%; background:#f0f2f1; font:600 12px/1 system-ui; }
.cc-steps .is-reached>span { background:var(--cc-tint); color:var(--cc-accent); }
.cc-steps [aria-current] { color:var(--cc-accent); font-weight:600; }
.cc-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.cc-body { padding:24px 28px; }
.cc-inputs { display:grid; grid-template-columns:240px minmax(0,1fr); gap:32px; max-width:760px; margin:8px auto 0; }
.cc-upload { min-width:0; }
.cc-upload .cc-source,.cc-upload-empty { width:100%; aspect-ratio:1; background:#f2f5f3; border-radius:6px; overflow:hidden; }
.cc-source { position:relative; }
.cc-source img { display:block; object-fit:contain; width:100%; height:100%; }
.cc-source figcaption { position:absolute; bottom:8px; left:8px; background:#fffffff0; padding:2px 6px; border-radius:3px; font-size:11px; }
.cc-upload-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:1px dashed #b4c7ba; color:var(--cc-muted); }
.cc-upload-empty svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.5; }
.cc-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; background:#fff; color:var(--cc-ink); border:1px solid var(--cc-line); border-radius:6px; font-family:inherit; font-size:14px; font-weight:600; line-height:1.45; cursor:pointer; text-align:center; white-space:normal; }
.cc-button:hover { background:var(--cc-tint); }
.cc-button--primary { background:var(--cc-accent); color:#fff; border-color:var(--cc-accent); }
.cc-button--primary:hover { background:#205b43; }
.cc-button:disabled { opacity:.5; cursor:default; }
.cc-file { position:relative; width:100%; margin-top:12px; overflow:hidden; }
.cc-file input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.cc-inputs form { display:flex; flex-direction:column; gap:18px; }
.cc-inputs form label { display:block; font-size:14px; font-weight:600; }
.cc-inputs label small { color:var(--cc-muted); font-weight:400; }
.cc-inputs input:not([type=file]),.cc-inputs select,.cc-inputs textarea { display:block; width:100%; min-height:44px; margin-top:7px; padding:10px 12px; color:var(--cc-ink); background:#fff; border:1px solid #c6d4cb; border-radius:6px; font-family:inherit; font-size:16px; font-weight:400; line-height:1.5; }
.cc-inputs textarea { resize:vertical; min-height:110px; }
.character-creator :focus-visible { outline:2px solid #388861; outline-offset:3px; }
.cc-identity { display:flex; gap:16px; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--cc-line); }
.cc-identity .cc-source { width:92px; height:92px; flex-shrink:0; background:#f2f5f3; border-radius:4px; overflow:hidden; }
.cc-identity h3 { font-size:20px; }
.cc-identity p,.cc-identity small { color:var(--cc-muted); }
.cc-section-title { font-size:20px; line-height:1.4; padding:22px 0 16px; }
.cc-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
.cc-plan { min-width:0; border:1px solid var(--cc-line); border-radius:8px; padding:18px; transition:border-color .15s,box-shadow .15s; overflow-wrap:anywhere; }
.cc-plan.is-selected { border-color:var(--cc-accent); box-shadow:inset 0 0 0 1px var(--cc-accent); background:#f5faf6; }
.cc-plan-choice { display:flex; gap:10px; cursor:pointer; }
.cc-plan-choice input { width:18px; height:18px; flex-shrink:0; margin:4px 0 0; accent-color:var(--cc-accent); }
.cc-plan-choice strong { display:block; font-size:17px; line-height:1.45; margin-bottom:10px; }
.cc-plan-choice span>span { display:block; color:var(--cc-muted); font-size:13px; min-height:62px; }
.cc-traits { display:flex; flex-wrap:wrap; gap:6px 14px; list-style:none; margin:16px 0; padding:0; font-size:12px; color:var(--cc-accent); }
.cc-scenes { list-style:none; margin:0; padding:0; }
.cc-scenes li { padding:10px 0; border-top:1px solid var(--cc-line); }
.cc-scenes small,.cc-scenes span { display:block; }
.cc-scenes small { color:var(--cc-muted); font-size:11px; }
.cc-scenes span { font-size:13px; margin-top:4px; }
.cc-plan summary { cursor:pointer; padding-top:12px; font-size:12px; color:var(--cc-accent); }
.cc-plan details p { font-size:13px; margin:12px 0; }
.cc-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 28px max(16px,env(safe-area-inset-bottom)); border-top:1px solid var(--cc-line); background:#fff; flex-shrink:0; }
.cc-submit { display:flex; gap:16px; align-items:center; min-width:0; }
.cc-submit small { font-size:12px; color:var(--cc-muted); overflow-wrap:anywhere; }
.cc-notice { margin:0 28px 20px!important; padding:12px; background:#eef5f0; color:var(--cc-accent); border-radius:4px; overflow-wrap:anywhere; }
.cc-notice[data-error=true] { background:#fff0ed; color:#a23e34; }
.cc-progress { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:16px 0; }
.cc-progress .cc-source { width:176px; height:176px; background:#f2f5f3; border-radius:8px; }
.cc-progress h2 { font-size:22px; }
.cc-progress>small { color:var(--cc-muted); }
.cc-progress-meter { display:flex; flex-direction:column; align-items:center; gap:14px; width:min(340px,100%); color:var(--cc-muted); }
.cc-progress progress { width:min(340px,100%); height:10px; accent-color:var(--cc-accent); }
.cc-selected-summary { margin-top:16px; border-top:1px solid var(--cc-line); width:min(460px,100%); padding-top:20px; }
.cc-selected-summary small,.cc-selected-summary strong { display:block; margin-bottom:6px; }
.cc-selected-summary small { color:var(--cc-muted); }
.cc-indeterminate { height:4px; width:180px; overflow:hidden; background:var(--cc-tint); }
.cc-indeterminate::after { content:""; display:block; background:var(--cc-accent); width:40%; height:100%; animation:cc-progress 1.5s ease-in-out infinite alternate; }
@keyframes cc-progress { to { transform:translateX(150%); } }
.cc-drafts { max-width:760px; margin:28px auto 0; border-top:1px solid var(--cc-line); padding-top:16px; }
.cc-drafts h3 { font-size:15px; margin-bottom:10px; }
.cc-drafts button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; border:0; border-bottom:1px solid var(--cc-line); padding:12px 0; color:var(--cc-ink); background:transparent; cursor:pointer; font:inherit; text-align:left; }
.cc-drafts strong,.cc-drafts small { display:block; overflow-wrap:anywhere; }
.cc-drafts small { color:var(--cc-muted); font-size:12px; }
@media(max-width:680px) {
  .character-creator { width:100%; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .cc-header { padding:14px 16px 10px; }
  .cc-header h1 { font-size:19px; }
  .cc-steps { padding:6px 16px 14px; justify-content:space-between; gap:10px; }
  .cc-steps li { gap:5px; font-size:11px; }
  .cc-body { padding:18px 16px; }
  .cc-inputs { grid-template-columns:minmax(0,1fr); gap:20px; margin:0; }
  .cc-upload { width:152px; margin:0 auto; }
  .cc-plans { grid-template-columns:minmax(0,1fr); gap:14px; }
  .cc-plan-choice span>span { min-height:0; }
  .cc-plan { padding:16px; }
  .cc-section-title { font-size:19px; }
  .cc-footer { padding:12px 16px max(12px,env(safe-area-inset-bottom)); align-items:stretch; gap:10px; }
  .cc-footer>.cc-button { padding:10px 12px; }
  .cc-submit { flex:1; flex-direction:column; gap:5px; align-items:stretch; }
  .cc-submit small { text-align:center; }
  .cc-notice { margin:0 16px 16px!important; }
  .cc-identity small { font-size:11px; }
}
@supports not (height:100dvh) { .character-creator { height:90vh; max-height:90vh; } }
@media(prefers-reduced-motion:reduce) { .cc-indeterminate::after { animation:none; } .cc-plan { transition:none; } }