/* Character App */
.character-app{background:var(--bg);color:var(--ink);
  --character-glass:color-mix(in srgb,var(--surface) 60%,transparent);
  --character-glass-line:color-mix(in srgb,var(--surface) 92%,transparent);
  --character-glass-shadow:0 12px 26px -16px color-mix(in srgb,var(--ink) 40%,transparent)}
.character-glass{border-radius:22px;background:var(--character-glass);border:1px solid var(--character-glass-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--character-glass-shadow)}
.character-screen{display:none;position:absolute;inset:0;flex-direction:column;background:var(--bg);min-height:0}
.character-screen.active{display:flex}
#character-home-body,#character-detail-body,#character-editor-body,#character-import-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
.character-top{height:auto;min-height:calc(48px + var(--sat));padding:var(--sat) max(12px,var(--sar)) 0 max(12px,var(--sal));display:flex;align-items:center;gap:8px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.character-top .app-title{font-size:16px;font-weight:800}
.character-icon-btn,.character-save-btn{height:34px;border:none;border-radius:12px;background:var(--surface-alt);color:var(--ink);font-family:inherit;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.character-icon-btn{width:34px}.character-icon-btn-wide{width:auto;padding:0 13px}.character-icon-btn.primary,.character-save-btn{background:var(--pri);color:var(--on-pri,#fff);padding:0 13px}.character-save-btn.character-save-ghost{background:transparent;color:var(--ink2);padding:0 6px;font-weight:700}.character-icon-btn svg,.character-save-btn svg{width:18px;height:18px}
.character-scroll,.character-form-scroll,.character-detail-scroll{flex:1;min-height:0;overflow-y:auto;padding:12px 14px calc(18px + var(--sab));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.character-form-scroll{padding-bottom:14px;overflow-x:hidden}
.character-search{height:40px;display:flex;align-items:center;gap:8px;background:var(--character-glass);border:1px solid var(--character-glass-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:22px;padding:0 12px;margin-bottom:10px}
.character-search svg{width:17px;height:17px;color:var(--mist)}.character-search input{flex:1;border:none;background:transparent;outline:none;color:var(--ink);font-family:inherit;font-size:14px;min-width:0}
.character-filter-row,.character-sort-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}
.character-filter-row::-webkit-scrollbar,.character-sort-row::-webkit-scrollbar{display:none}
.character-filter-row button,.character-sort-row button{border:none;border-radius:999px;background:var(--surface);color:var(--ink2);font-family:inherit;font-size:12px;font-weight:800;padding:8px 11px;white-space:nowrap;box-shadow:var(--shadow)}
.character-filter-row button.active,.character-sort-row button.active{background:var(--pri);color:var(--on-pri,#fff)}
.character-list{display:flex;flex-direction:column;gap:10px}
.character-card{position:relative;overflow:hidden}
.character-card-open{width:100%;min-width:0;border:none;background:transparent;color:inherit;font-family:inherit;text-align:left;padding:14px;display:flex;gap:14px;align-items:center;cursor:pointer}
.character-card.archived{opacity:.72}.character-card-avatar{width:58px;height:58px;border-radius:50%;background:linear-gradient(150deg,var(--pri),var(--pri-deep));color:var(--on-pri,#fff);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;overflow:hidden;flex-shrink:0;border:2px solid var(--character-glass-line)}
.character-card-avatar img,.character-avatar-lg img{width:100%;height:100%;object-fit:cover}
.character-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);color:#fff;font-weight:700}
.character-card-main{min-width:0;flex:1}.character-card-name{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;font-family:var(--font-display);line-height:1.2;min-width:0}.character-card-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.character-pin{width:15px;height:15px;display:inline-flex;color:var(--pri-deep);flex-shrink:0;margin-left:auto}.character-pin svg{width:100%;height:100%}.character-card-intro{margin-top:4px;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-card-meta{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11.5px;color:var(--ink2)}.character-pill{border-radius:10px;background:color-mix(in srgb,var(--pri) 9%,transparent);color:var(--accent-text);font-size:11px;font-weight:600;padding:2px 9px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.character-pill.primary{background:color-mix(in srgb,var(--pri) 9%,transparent);color:var(--accent-text)}
.character-pill.love{background:#f3e1e4;color:#b07882}
.character-pill.no{background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink2);font-weight:600}
.character-recent-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8fc59a;margin-right:5px;vertical-align:1px;flex-shrink:0}
.character-fab{position:absolute;right:20px;bottom:calc(26px + var(--sab));height:50px;border:1px solid var(--character-glass-line);border-radius:25px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--pri-deep);box-shadow:0 14px 28px -10px color-mix(in srgb,var(--ink) 50%,transparent);font-family:var(--font-display);font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:6px;padding:0 20px;cursor:pointer;z-index:4}
.character-fab svg{width:18px;height:18px}
.character-home-spacer{flex:1}
.character-empty-btns{display:flex;gap:10px;justify-content:center}
.character-empty-btns button.ghost{background:var(--surface-alt);color:var(--ink)}
.character-card-time{margin-top:7px;color:var(--ink2);font-size:11px}
.character-empty{margin-top:12px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:24px 18px;text-align:center;color:var(--ink2)}.character-empty svg{width:64px;height:54px;color:var(--pri-deep);opacity:.72;margin-bottom:8px}.character-empty h2{font-size:17px;color:var(--ink);margin-bottom:6px}.character-empty p{font-size:13px;line-height:1.5;margin-bottom:12px}.character-empty button{border:none;border-radius:14px;background:var(--pri);color:var(--on-pri,#fff);font-family:inherit;font-size:13px;font-weight:800;padding:9px 14px}
.character-ftop{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + var(--sat)) max(16px,var(--sar)) 14px max(16px,var(--sal));background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .2s ease}
.character-ftop.scrolled{background:color-mix(in srgb,var(--surface) 72%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 1px 0 var(--character-glass-line)}
.character-ftop-title{position:absolute;left:54px;right:54px;text-align:center;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);opacity:0;transition:opacity .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.character-ftop.scrolled .character-ftop-title{opacity:1}
.character-ftop-right{display:flex;gap:10px}
.character-rb{width:38px;height:38px;border-radius:50%;border:1px solid var(--character-glass-line);background:var(--character-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--ink) 35%,transparent);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.character-rb span{display:flex}
.character-rb svg{width:19px;height:19px;stroke-width:1.7}
.character-detail-scroll{padding:0 16px calc(22px + var(--sab))}
.character-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 2px 22px;position:relative;margin:0 -16px;padding-left:16px;padding-right:16px}
.character-hero.has-cover{padding-top:180px}
.character-hero.has-cover::before{content:'';position:absolute;left:0;right:0;top:0;height:250px;background:var(--character-cover) center 55%/cover no-repeat}
.character-hero.has-cover::after{content:'';position:absolute;left:0;right:0;top:0;height:250px;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,var(--bg) 100%)}
.character-hero:not(.has-cover){padding-top:calc(66px + var(--sat))}
.character-hero:not(.has-cover)::before{content:none}
.character-avatar-lg{position:relative;z-index:1;width:92px;height:92px;border-radius:50%;background:linear-gradient(150deg,var(--pri),var(--pri-deep));color:var(--on-pri,#fff);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;border:3px solid rgba(255,255,255,.95);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--ink) 55%,transparent);overflow:hidden;flex-shrink:0}
.character-hero-text{position:relative;z-index:1;min-width:0}
.character-hero h2{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.2;margin:10px 0 0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-hero p{margin:6px 36px 0;color:var(--ink2);font-size:13px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.character-quick-actions{display:flex;justify-content:space-around;margin:16px 0 14px;padding:0 16px}
.character-quick-btn{border:none;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit;color:var(--ink2);font-size:12px;cursor:pointer}
.character-quick-icon{width:52px;height:52px;border-radius:18px;border:1px solid var(--character-glass-line);background:var(--character-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--ink) 45%,transparent);display:flex;align-items:center;justify-content:center;color:var(--pri-deep)}
.character-quick-icon svg{width:22px;height:22px}
.character-quick-btn.disabled{opacity:.6}
.character-quick-btn.disabled .character-quick-icon{color:var(--ink2)}
.character-rh{display:flex;align-items:center;justify-content:space-between}
.character-rh>b{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ink)}
.character-rel-flat{margin:10px 0 0;font-size:14px;color:var(--ink2)}
.character-rel-big{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.character-rel-big>b{font-family:var(--num,var(--font-display));font-size:40px;font-weight:500;color:var(--ink)}
.character-rel-big>span{font-size:13px;color:var(--ink2)}
.character-steps{display:flex;align-items:center;margin-top:12px}
.character-steps i{width:9px;height:9px;border-radius:50%;background:var(--mist,var(--border));flex-shrink:0}
.character-steps i.on{background:var(--pri-deep)}
.character-steps i.now{width:12px;height:12px;background:var(--surface);border:3px solid var(--pri-deep)}
/* 每个角色有自己的颜色: detail page radial wash + accent-colored chrome */
.character-detail-scroll{position:relative}
.character-tint{position:absolute;left:0;right:0;top:0;height:320px;background:radial-gradient(70% 60% at 50% 0%,var(--c1,var(--pri-pale)),transparent 75%);opacity:.9;pointer-events:none;z-index:0}
.character-hero,.character-quick-actions,.character-section{position:relative;z-index:1}
.character-avatar-sq{border-radius:28%;width:104px;height:104px;font-size:32px}
.character-hero-tags{display:flex;gap:6px;justify-content:center;margin-top:8px}
.character-hero-tags span{background:var(--cl,var(--pri-pale));color:var(--ct,var(--pri-deep));font-size:12px;font-weight:600;border-radius:10px;padding:3px 10px}
.character-quick-main .character-quick-icon{background:var(--cd,var(--pri-deep));color:var(--on-pri-deep,#fff);border-color:transparent}
.character-rel-big>b{color:var(--cd,var(--ink))}
.character-steps i.on{background:var(--cd,var(--pri-deep))}
.character-steps i.now{border-color:var(--cd,var(--pri-deep))}
.character-steps em{flex:1;height:2px;background:var(--mist,var(--border))}
.character-steps em.on{background:var(--pri-deep)}
.character-sl{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--ink2)}
.character-sl .now{color:var(--accent-text);font-weight:600}
.character-rel-cells{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.character-rel-cell{padding:9px 12px;border-radius:14px;background:color-mix(in srgb,var(--pri) 9%,transparent);font-size:11.5px;color:var(--ink2)}
.character-rel-cell b{display:block;font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--ink);margin-top:2px}
.character-about-tags{display:flex;flex-wrap:wrap;gap:7px}
.character-persona-row{padding:10px 0}
.character-persona-bar{display:block;height:6px;width:140px;max-width:100%;border-radius:3px;background:color-mix(in srgb,var(--pri) 15%,transparent);margin-top:5px;overflow:hidden}
.character-persona-bar i{display:block;height:100%;border-radius:3px;background:var(--pri)}
.character-related-people{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.character-related-people::-webkit-scrollbar{display:none;width:0;height:0}
.character-related-people>div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2);flex-shrink:0;max-width:52px;text-align:center}
.character-related-avatar{width:44px;height:44px;font-size:16px}
.character-related-avatar svg{width:20px;height:20px}
#character-related-add{cursor:pointer}
.character-related-add-circle{width:44px;height:44px;border-radius:50%;border:1.5px dashed var(--mist,var(--border));display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.character-related-add-circle svg{width:18px;height:18px}
.character-section{margin:0 0 14px;background:var(--surface);border-radius:20px;box-shadow:var(--shadow);padding:16px 18px}
.character-ct{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.character-ct>b{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ink)}
.character-ct>small{font-size:12px;color:var(--ink2)}
.character-ct-more{border:none;background:transparent;color:var(--ink2);font-family:inherit;font-size:12px;padding:0;cursor:pointer}
.character-kv-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.character-kv-tags span{padding:6px 11px;border-radius:12px;background:color-mix(in srgb,var(--pri) 9%,transparent);font-size:12.5px;color:var(--ink)}
.character-kv-tags em{font-style:normal;color:var(--ink2);margin-right:5px}
.character-section-title{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.character-section-title h3{flex:1;margin:0;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink)}
.character-section-title span{font-size:13px;color:var(--ink2)}
.character-title-link,.character-section-link{border:none;background:transparent;color:var(--accent-text);font-family:inherit;font-size:14px;font-weight:600;display:flex;align-items:center;gap:4px;padding:4px 0;cursor:pointer}
.character-title-link svg,.character-section-link svg{width:16px;height:16px}
.character-section-link{width:100%;margin-top:6px;padding-top:12px;border-top:1px solid var(--border)}
.character-rel-type{display:inline-block;margin:2px 0 4px;font-size:13px;font-weight:600;padding:5px 14px}
.character-kv{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
.character-kv:last-child{border-bottom:none}
.character-kv b{font-weight:400;color:var(--ink2)}
.character-kv span{color:var(--ink);word-break:break-word}
.character-section-note{margin:2px 0 0;padding-top:12px;border-top:1px solid var(--border);font-size:12.5px;color:var(--ink2)}
.character-row{width:100%;display:flex;align-items:center;gap:14px;padding:12px 0;border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--ink);font-family:inherit;text-align:left}
.character-row-list>:last-child,.character-row-list>:last-child>.character-row{border-bottom:none}
.character-row-link{cursor:pointer}
.character-row-link>svg{width:18px;height:18px;color:var(--ink2);flex-shrink:0;transition:transform .16s ease}
.character-row-icon{width:36px;height:36px;border-radius:50%;background:var(--pri-pale);color:var(--pri-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.character-row-icon svg{width:20px;height:20px}
.character-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.character-row-main b{font-size:15px;font-weight:600;color:var(--ink)}
.character-row-main span{font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-row-empty{border-bottom:none}
.character-row-empty .character-row-main span{white-space:normal;line-height:1.45}
.character-row-value{font-size:14px;color:var(--ink2);white-space:nowrap}
.character-archive-group>summary{list-style:none}
.character-archive-group>summary::-webkit-details-marker{display:none}
.character-archive-group[open]>summary>svg{transform:rotate(90deg)}
.character-archive-group[open]>summary{border-bottom:none}
.character-archive-count{margin:2px 0 4px;font-size:15px;color:var(--ink)}
.character-archive-count em{font-style:normal;font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--accent-text);margin-right:6px}
.character-archive-list{display:flex;flex-direction:column;gap:8px;padding:0 0 12px 58px;border-bottom:1px solid var(--border)}
.character-archive-item{border:none;background:var(--surface-alt);color:var(--ink);border-radius:14px;padding:10px 12px;font-family:inherit;text-align:left;display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.character-archive-item div{flex:1;min-width:0}
.character-archive-item b{display:block;font-size:14px}
.character-archive-item span{display:block;margin-top:4px;color:var(--ink2);font-size:13px;line-height:1.5;white-space:pre-line;word-break:break-word}
.character-archive-item svg{width:16px;height:16px;color:var(--ink2);flex-shrink:0;margin-top:2px}
.character-profile-empty{font-size:14px;color:var(--ink2);padding:6px 0}
.character-row-list>:last-child .character-archive-list{border-bottom:none}
.character-stepper{padding:12px 14px 0;background:var(--bg);display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.character-stepper span{height:5px;border-radius:999px;background:var(--border)}.character-stepper span.active{background:var(--pri)}
.character-step-label{padding:8px 14px 0;font-size:12px;color:var(--ink2);font-weight:800}
.character-step-label b{display:block;font-size:15px;color:var(--ink);font-weight:800}
.character-step-sub{display:block;margin-top:2px;font-size:12px;color:var(--ink2);font-weight:500}
.character-field textarea.character-depth-textarea{min-height:auto;resize:none}
.character-depth-toggle{cursor:pointer;font-size:12.5px;color:var(--ink2);font-weight:700;list-style:none;padding:6px 0}
.character-depth-toggle::-webkit-details-marker{display:none}
.character-depth-toggle::marker{content:''}
.character-form-card{background:var(--surface);border-radius:17px;box-shadow:var(--shadow);padding:13px;margin-bottom:12px}.character-form-card h3{font-size:15px;margin-bottom:10px}.character-field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.character-field span{font-size:12px;color:var(--ink2);font-weight:800}.character-field input,.character-field textarea,.character-field select{border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);font-family:inherit;font-size:14px;padding:10px;outline:none}.character-field textarea{min-height:96px;resize:vertical}.character-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}.character-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.character-check{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;font-size:13px;font-weight:800;color:var(--ink2)}.character-check input{width:18px;height:18px}
.character-tags{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--border);border-radius:12px;background:var(--bg);padding:7px}.character-tags input{border:none;background:transparent;color:var(--ink);outline:none;min-width:110px;flex:1;font-family:inherit;padding:5px}
.character-step-heading{padding:10px 14px 4px}.character-step-heading b{display:block;font-size:12px;color:var(--ink2);font-weight:800;margin-bottom:3px}.character-step-heading strong{display:block;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);line-height:1.2}.character-step-heading span{display:block;margin-top:4px;color:var(--ink2);font-size:12.5px;line-height:1.45}
.character-profile-card,.character-tag-card,.character-appearance-card{margin-bottom:12px}.character-profile-card h3,.character-tag-card h3{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:10px}.character-image-pickers{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:stretch;margin-bottom:13px;max-width:100%}.character-avatar-picker,.character-cover-picker{min-width:0;cursor:pointer}.character-avatar-picker input,.character-cover-picker input{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;pointer-events:none}.character-avatar-preview,.character-cover-preview{height:88px;border:1px solid var(--border);background:var(--bg);box-shadow:var(--shadow-in);color:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;overflow:hidden;text-align:center}.character-avatar-preview{width:88px;border-radius:50%}.character-cover-preview{width:100%;border-radius:16px}.character-avatar-preview img,.character-cover-preview img{width:100%;height:100%;object-fit:cover;display:block}.character-avatar-preview svg,.character-cover-preview svg{width:22px;height:22px;color:var(--pri-deep)}.character-avatar-preview b,.character-cover-preview b{font-size:12px;font-weight:800}.character-mini-title{font-size:12px;color:var(--ink2);font-weight:900;margin:6px 0 9px}.character-basic-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.character-field input,.character-field select{min-height:40px}.character-field textarea{resize:none}.character-field-compact textarea{min-height:66px}.character-field-medium textarea{min-height:92px}.character-age-privacy{padding:0 2px 10px;margin-top:-2px}.character-age-privacy input{flex:0 0 auto}.character-card-hint{margin:-4px 0 10px;font-size:12px;line-height:1.45;color:var(--ink2)}.character-tag-add{min-height:32px;border-radius:999px;background:var(--surface-alt);color:var(--ink2);display:flex;align-items:center;padding:0 9px;gap:4px;flex:1 1 112px;min-width:0;max-width:100%}.character-tag-add span{font-size:12px;font-weight:800;white-space:nowrap}.character-tag-add input{min-width:0;padding:4px;font-size:13px}.character-tag-limit{margin-top:7px;font-size:12px;color:var(--coral-text)}.character-appearance-card{padding:0}.character-appearance-details>summary{list-style:none;min-height:58px;padding:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}.character-appearance-details>summary::-webkit-details-marker{display:none}.character-appearance-details summary span{display:flex;flex-direction:column;gap:4px;min-width:0}.character-appearance-details summary b{font-size:15px;color:var(--ink)}.character-appearance-details summary em{font-style:normal;font-size:12px;line-height:1.35;color:var(--ink2);font-weight:600}.character-appearance-details summary i{display:flex;color:var(--ink2);transition:transform .16s ease}.character-appearance-details[open] summary i{transform:rotate(90deg)}.character-appearance-details>.character-field,.character-appearance-details>.character-two{margin:0 13px 10px}.character-appearance-details>.character-field:last-child{margin-bottom:13px}
.character-repeat-list{display:flex;flex-direction:column;gap:8px}.character-repeat-item{border:1px solid var(--border);border-radius:13px;padding:10px;background:var(--bg)}.character-repeat-item .character-two{margin-top:8px}
.character-form-actions{flex-shrink:0;background:var(--bg);border-top:1px solid var(--border);padding:14px 14px calc(12px + var(--sab));display:flex;gap:8px;justify-content:space-between;z-index:5}.character-form-actions button{border:none;border-radius:14px;min-height:44px;padding:10px 13px;font-family:inherit;font-weight:800}.character-form-actions .primary{background:var(--pri);color:var(--on-pri,#fff);min-width:126px}.character-form-actions .primary:disabled{background:var(--surface-alt);color:var(--ink2);cursor:not-allowed}.character-form-actions .ghost{background:transparent;color:var(--ink2)}
.character-preview{padding:0 0 10px}.character-preview-card{border-radius:18px;background:var(--surface);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}.character-preview-card h3{font-size:18px;margin-bottom:6px}.character-preview-card p{font-size:13px;color:var(--ink2);line-height:1.5}
.character-step4-card{padding:14px}.character-section-head{margin-bottom:10px}.character-section-head h3{font-family:var(--font-display);font-size:16px;font-weight:700;margin:0 0 4px}.character-section-head p{margin:0;color:var(--ink2);font-size:12.5px;line-height:1.45}.character-choice-row{display:flex;flex-wrap:wrap;gap:7px}.character-choice-chip{border:none;border-radius:999px;background:var(--surface-alt);color:var(--ink2);box-shadow:var(--shadow);font-family:inherit;font-size:12px;font-weight:800;min-height:34px;padding:0 12px}.character-choice-chip.active{background:var(--pri);color:var(--on-pri,#fff);box-shadow:var(--shadow-in)}.character-choice-chip:disabled{box-shadow:none;color:var(--ink2);cursor:not-allowed}.character-soft-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.character-soft-meta span{border-radius:999px;background:var(--bg);color:var(--ink2);font-size:11.5px;font-weight:800;padding:4px 8px}.character-soft-action{background:var(--surface-alt);color:var(--ink);box-shadow:var(--shadow);margin-bottom:10px}.character-step4-list{margin-top:0}.character-permission-list{display:flex;flex-direction:column;gap:8px}.character-permission-group{border-radius:15px;background:var(--bg);box-shadow:var(--shadow-in);padding:8px}.character-permission-row{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 2px}.character-permission-row span{min-width:0;display:flex;flex-direction:column;gap:3px}.character-permission-row b{font-size:13px;color:var(--ink)}.character-permission-row em{font-style:normal;font-size:11.5px;line-height:1.35;color:var(--ink2)}.character-permission-row.disabled b,.character-permission-row.disabled em{color:var(--ink2)}.character-permission-nested{margin-left:12px;padding-left:10px;border-left:1px solid var(--border)}.character-switch{width:46px;height:28px;border:none;border-radius:999px;background:var(--surface-alt);box-shadow:var(--shadow-in);padding:3px;flex:0 0 auto}.character-switch i{display:block;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow);transition:transform .16s ease}.character-switch.active{background:var(--pri)}.character-switch.active i{transform:translateX(18px)}.character-switch:disabled{background:var(--border);box-shadow:none}.character-step4-details{margin-top:10px}.character-step4-details>summary{list-style:none;min-height:42px;display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-size:13px;font-weight:900;cursor:pointer}.character-step4-details>summary::-webkit-details-marker{display:none}.character-advanced-card{padding:4px 14px}.character-advanced-card .character-step4-details{margin-top:0}.character-advanced-card textarea{width:100%;min-height:92px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);font-family:inherit;font-size:13px;padding:10px;resize:none}.character-ready-card{overflow:hidden}.character-ready-preview{display:flex;flex-direction:column;gap:10px}.character-ready-cover{width:100%;height:92px;object-fit:cover;border-radius:14px;background:var(--surface-alt)}.character-ready-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}.character-ready-avatar{width:52px;height:52px;border-radius:17px;object-fit:cover;background:var(--surface-alt);box-shadow:var(--shadow)}.character-ready-main h3{margin:0 0 4px;font-family:var(--font-display);font-size:18px;font-weight:700}.character-ready-main p{margin:0;color:var(--ink2);font-size:13px;line-height:1.45}.character-ready-main>div{min-width:0}.character-ready-main>div>span{display:inline-block;margin:6px 6px 0 0;border-radius:999px;background:var(--surface-alt);color:var(--ink2);font-size:11.5px;font-weight:800;padding:4px 8px}
.character-import-box{padding:12px}.character-import-box textarea{width:100%;min-height:240px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);font-family:inherit;font-size:12px;padding:12px}
.character-export-box{width:100%;min-height:280px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);font-size:12px;line-height:1.45;padding:12px}
@media(max-width:390px){.character-two,.character-three{grid-template-columns:1fr}}

/* Character home — search, relation tabs, one archive card with a ··· menu per row */
.character-app{background:var(--bg)}
.character-home-top{height:auto;min-height:calc(56px + var(--sat));padding:var(--sat) max(10px,var(--sar)) 0 max(8px,var(--sal));background:var(--bg);border-bottom:none}
.character-home-top .app-title{flex:1;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink)}
.character-home-top .character-icon-btn{width:40px;height:40px;background:transparent;color:var(--ink)}
.character-home-top .character-icon-btn.primary{background:transparent;color:var(--ink);padding:0}
.character-home-top .character-icon-btn svg{width:22px;height:22px}
.character-home-scroll{padding:4px 16px calc(22px + var(--sab));background:var(--bg)}
.character-home-search{height:46px;border:none;background:var(--surface);box-shadow:var(--shadow);border-radius:16px;padding:0 14px;gap:10px;margin-bottom:6px}
.character-home-search svg{width:19px;height:19px}
.character-home-search input{font-size:14.5px}
.character-filter-tabs{gap:8px;padding:0;margin:0 0 4px;border-bottom:none}
.character-filter-tabs button{background:color-mix(in srgb,var(--surface) 45%,transparent);border:1px solid var(--character-glass-line);box-shadow:none;border-radius:17px;color:var(--ink2);font-size:13px;font-weight:500;padding:7px 14px}
.character-filter-tabs button.active{background:var(--surface);color:var(--accent-text);font-weight:600;box-shadow:0 6px 14px -8px color-mix(in srgb,var(--ink) 45%,transparent)}
.character-home-section-title{display:flex;align-items:center;gap:12px;margin:14px 2px 12px}
.character-home-section-title>span{flex:1;font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink)}
.character-sort-btn{border:none;background:transparent;color:var(--ink2);font-family:inherit;font-size:13px;display:flex;align-items:center;gap:4px;padding:6px 2px;cursor:pointer}
.character-sort-btn svg{width:15px;height:15px}
.character-sort-btn.active{color:var(--ink)}
.character-home-section-title{position:relative}
.character-sort-btn svg{transform:rotate(90deg);transition:transform .16s ease}
.character-sort-btn.active svg{transform:rotate(-90deg)}
.character-sort-menu{position:absolute;top:calc(100% + 4px);right:-6px;z-index:6;min-width:172px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 28px rgba(30,48,72,.16),0 1px 3px rgba(30,48,72,.08);padding:6px}
.character-sort-option{width:100%;min-height:42px;border:none;border-radius:10px;background:transparent;color:var(--ink);font-family:inherit;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;cursor:pointer;text-align:left}
.character-sort-option.active{background:var(--pri-pale);color:var(--accent-text);font-weight:600}
.character-sort-option svg{width:17px;height:17px}
.character-home-top #character-home-more svg{stroke-width:3}
/* 每个角色有自己的颜色: home chrome stays theme-colored, cards turn pure white with a per-character color blob */
.character-app{--character-home-bg:#fbfbfc}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-app{--character-home-bg:#15171d}}
:root[data-theme="dark"] .character-app{--character-home-bg:#15171d}
.character-app{background:var(--character-home-bg)}
.character-home-top,.character-home-scroll{background:var(--character-home-bg)}
.character-home-top .app-title{color:var(--accent-text)}
.character-home-top .character-icon-btn{color:var(--accent-text)}
.character-home-search{background:#fff}
.character-home-search svg,.character-home-search input::placeholder{color:var(--accent-text);opacity:1}
.character-home-section-title b{font-size:13px;font-weight:400;color:var(--accent-text)}
.character-sort-btn{color:var(--accent-text)}
/* R11 (2026-10-12 角色 App 审计): same shape as 日历's own account-split note (calendar.css) */
.character-account-note{margin:0 0 12px;padding:12px 14px 6px;border-radius:16px;background:var(--surface);border:.5px solid var(--border)}
.character-account-text{margin:0 0 6px;font-size:13px;line-height:1.55;color:var(--ink)}
.character-small-link{border:none;background:transparent;color:var(--accent-text);font-family:inherit;font-size:13px;font-weight:800;padding:8px 9px;border-radius:10px}
.character-small-link:active{transform:scale(.96)}
.character-sort-btn.active{color:var(--accent-text)}
.character-filter-tabs button{background:#fff;color:var(--accent-text)}
.character-filter-tabs button.active{background:var(--accent-text);color:var(--on-pri-deep,#fff);box-shadow:0 6px 14px -8px color-mix(in srgb,var(--accent-text) 50%,transparent)}
.character-card{background:#fff;box-shadow:none;border:1px solid color-mix(in srgb,var(--ink) 6%,transparent)}
.character-card-blob{position:absolute;top:-24px;left:-24px;width:92px;height:92px;border-radius:50%;filter:blur(20px);opacity:.28;pointer-events:none;z-index:0}
.character-card-open{position:relative;z-index:1}
.character-card-avatar-sq{border-radius:28%}
.character-sheet-action>span{flex:1}
.character-action-sheet h3{font-size:17px;margin:0 0 10px;color:var(--ink)}
.character-sheet-action{width:100%;min-height:44px;border:none;border-radius:14px;background:var(--bg);box-shadow:var(--shadow);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;padding:0 12px;margin-top:8px;text-align:left}
.character-sheet-action svg{width:18px;height:18px;color:var(--pri-deep);flex-shrink:0}
.character-sheet-action.danger{color:var(--coral-text)}
.character-sheet-action.danger svg{color:var(--coral)}
.character-action-sheet .sheet-btns svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px}
.persona-sheet{max-height:88dvh;display:flex;flex-direction:column;gap:0;overflow:hidden}
.persona-heading{display:flex;align-items:center;justify-content:space-between}.persona-heading h3{font-size:16px;margin:0}.persona-heading button{width:32px;height:32px;border:0;background:var(--surface-alt);color:var(--ink);border-radius:6px;display:grid;place-items:center}.persona-heading svg{width:17px;height:17px}
#persona-result{min-height:19px;margin:7px 0;color:var(--ink2);font-size:12px}#persona-result.error{font-weight:700}#persona-panel-content{overflow-y:auto;min-height:0;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}#persona-panel-content::-webkit-scrollbar{display:none;width:0;height:0}
.persona-section{padding:13px 0;border-top:1px solid var(--border)}.persona-section h4{font-size:14px;margin:0 0 9px;display:flex;justify-content:space-between}.persona-section h4 span,.persona-muted,.persona-item-meta{color:var(--ink2);font-size:12px}.persona-muted{line-height:1.45;margin:3px 0 9px}
.persona-item{padding:10px 0;border-bottom:1px solid var(--border)}.persona-item:last-child{border-bottom:0}.persona-item-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.persona-item-head strong{font-size:13px;line-height:1.45;font-weight:700;overflow-wrap:anywhere}.persona-item-head span{color:var(--ink2);font-size:11px;white-space:nowrap}.persona-item-meta{margin:5px 0}
.persona-evidence{font-size:12px;color:var(--ink2)}.persona-evidence summary{cursor:pointer}.persona-evidence p{padding:6px 0 0;margin:0;line-height:1.45;overflow-wrap:anywhere}.persona-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.persona-actions button,.persona-source button,.persona-primary{min-height:32px;border:1px solid var(--border);border-radius:6px;background:var(--surface-alt);color:var(--ink);font-family:inherit;font-size:11.5px;font-weight:600;padding:5px 9px;cursor:pointer}.persona-actions button[aria-pressed=true],.persona-source button[aria-pressed=true]{background:var(--pri-pale);color:var(--ink)}.persona-actions button:disabled,.persona-source button:disabled,.persona-primary:disabled{cursor:default}
.persona-field{display:block;font-size:12px;color:var(--ink2);margin:8px 0}.persona-field select,.persona-field textarea{display:block;width:100%;margin-top:5px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;padding:8px}.persona-field textarea{height:62px;resize:vertical}.persona-primary{background:var(--pri);border-color:var(--pri);color:var(--on-pri,#fff);font-size:12px}.persona-footer{padding:10px 0 0;border-top:1px solid var(--border)}.persona-footer button{width:100%}
.persona-source{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 0;border-bottom:1px solid var(--border)}.persona-source span{min-width:0;flex:1}.persona-source b{display:block;font-size:11.5px}.persona-source small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2);font-size:11px;margin-top:3px}.persona-source button{flex:0 0 auto}
.persona-dialog{max-width:360px;max-height:84dvh;display:flex;flex-direction:column}
.persona-dialog #persona-panel-content{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.persona-dialog #persona-panel-content::-webkit-scrollbar{display:none}
.persona-sub{margin:0 0 10px;color:var(--ink2);font-size:12.5px;line-height:1.5}
.persona-grown-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:4px}
.persona-grown-card{background:var(--surface-alt);border-radius:14px;padding:10px}.persona-grown-card>b{display:block;font-size:13px;margin-bottom:6px;color:var(--ink)}
.persona-pref-tags{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 2px}
.persona-pref-tag{border:none;border-radius:999px;background:var(--surface-alt);color:var(--ink2);font-family:inherit;font-size:12px;font-weight:700;padding:7px 12px;cursor:pointer}
.persona-pref-tag.active{background:var(--pri-pale);color:var(--accent-text)}
.persona-auto-note{margin:10px 0 0;color:var(--ink2);font-size:11.5px;text-align:center}
.persona-dialog-btns{grid-template-columns:1fr}
/* Editor: 人设 / 关系与设置 tabs, persona lead, collapsible sections with summaries, read-only lines. */
.character-editor-tabs{display:flex;gap:18px;padding:8px 16px 10px;background:var(--bg);border-bottom:1px solid var(--border)}
.character-editor-tabs button{border:none;background:none;color:var(--ink2);font-family:inherit;font-size:14px;font-weight:700;padding:4px 0;position:relative;cursor:pointer}
.character-editor-tabs button.active{color:var(--accent-text)}
.character-editor-tabs button.active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--pri-deep)}
.character-persona-lead{display:flex;gap:8px;align-items:flex-start;margin:2px 2px 12px;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.character-persona-lead>svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.character-persona-lead b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.character-basic-head{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:6px}
.character-basic-head .character-field{margin:0}
.character-extended-title{margin:20px 2px 10px;font-size:13px;color:var(--ink2)}
.character-extended-title b{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink)}
.character-extended-list{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px}
.character-extended-list>.character-appearance-card{margin:0;border-radius:0;box-shadow:none;background:transparent;border-bottom:1px solid var(--border)}
.character-extended-list>.character-appearance-card:last-child{border-bottom:none}
.character-appearance-details>summary>span:not(.character-row-icon){flex:1}
.character-appearance-details summary .character-row-icon{flex-direction:row;gap:0;width:40px;height:40px}
.character-appearance-details summary .character-row-icon svg{width:19px;height:19px}
.character-appearance-details summary i svg{width:18px;height:18px}
.character-editor-foot{margin:16px 0 4px;text-align:center;font-size:12.5px;color:var(--ink2)}
.character-details-body{padding:0 13px 13px}
.character-details-body .character-cover-picker{display:block;margin-bottom:10px}
.character-inline-details{border-top:1px solid var(--border);margin-top:8px;padding-top:2px}
.character-inline-details>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:var(--ink);font-weight:600;padding:12px 0}
.character-inline-details>summary>span{flex:1}
.character-inline-details>summary i{display:flex;color:var(--ink2);transform:rotate(90deg);transition:transform .16s ease}
.character-inline-details>summary i svg{width:18px;height:18px}
.character-inline-details[open]>summary i{transform:rotate(-90deg)}
.character-inline-details>summary em{font-style:normal;font-weight:600;color:var(--ink2);font-size:12px}
.character-readonly-line{display:flex;flex-direction:column;gap:3px;margin:8px 0 0;padding:9px 10px;border-radius:12px;background:var(--surface-alt);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.character-readonly-line b{font-size:12px;color:var(--ink2)}
.character-readonly-line span{color:var(--ink);white-space:pre-wrap}
.character-readonly-line em{font-style:normal;font-size:11.5px;color:var(--ink2)}
.character-form-actions .character-create-btn{flex:1}
/* Character card import: file pick, preview, original card text (always plain text), partial-save status. */
.character-card-pick{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:40px}
.character-card-error,.character-card-warning{margin:10px 0 0;padding:9px 10px;border-radius:12px;background:var(--surface-alt);color:var(--coral-text);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.character-save-btn[hidden]{display:none}
.character-card-pre{margin:6px 0 8px;padding:9px 10px;border-radius:12px;background:var(--surface-alt);color:var(--ink);font-family:inherit;font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.character-card-pre::-webkit-scrollbar{display:none}
.character-card-group{margin-top:10px}
.character-card-group>b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
.character-card-item{display:block;font-size:11.5px;color:var(--ink2);margin-top:6px}
.character-card-import-avatar{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.character-card-import-avatar img{width:64px;height:64px;border-radius:20px;object-fit:cover;flex:0 0 auto}
.character-card-import-avatar .character-check{flex:1;min-width:0}
.character-card-step{margin:4px 0 0;font-size:12.5px;color:var(--ink2)}
.character-card-step.done{color:var(--ink)}
/* The "more" icon is three zero-length strokes: without round caps it draws nothing (audit D13). */
#v-character svg{stroke-linecap:round;stroke-linejoin:round}
/* 人物设定: composed text keeps its line breaks, long text is cut to 4 lines (tap opens the editor there); the empty-fields row is quieter. */
.character-archive-item{cursor:pointer;width:100%}.character-archive-item span{white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.character-archive-item.character-archive-empty{background:transparent;border:1px dashed var(--border);color:var(--ink2)}
/* Character editor — 关系与设置 */
.character-step4-card{padding:18px}
.character-section-head h3{font-size:19px}
.character-section-head h3 small{font-family:inherit;font-size:14px;font-weight:400;color:var(--ink2);margin-left:2px}
.character-relation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.character-relation-grid .character-choice-chip{min-height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);box-shadow:none;color:var(--ink);font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px}
.character-relation-grid .character-choice-chip.active{background:var(--pri);color:var(--on-pri,#fff);border-color:transparent}
.character-relation-grid .character-choice-chip svg{width:16px;height:16px;flex-shrink:0}
.character-setting-rows{margin-top:14px;border-top:1px solid var(--border)}
.character-setting-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
.character-setting-row:last-child{border-bottom:none}
.character-setting-icon{width:22px;display:flex;color:var(--ink2);flex-shrink:0}
.character-setting-icon svg{width:19px;height:19px}
.character-setting-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.character-setting-main b{font-size:14px;font-weight:600;color:var(--ink)}
.character-setting-main em{font-style:normal;font-size:12.5px;color:var(--ink2)}
.character-setting-value{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.character-more-note{margin:-2px 0 12px}
.character-more-note>summary{list-style:none;display:inline-flex;align-items:center;gap:2px;color:var(--accent-text);font-size:13.5px;font-weight:600;cursor:pointer}
.character-more-note>summary::-webkit-details-marker{display:none}
.character-more-note>summary>svg{width:15px;height:15px;transition:transform .16s ease}
.character-more-note[open]>summary>svg:last-child{transform:rotate(90deg)}
.character-more-note>p{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink2)}
.character-known-list{border:1px solid var(--border);border-radius:16px;padding:0 14px}
.character-known-item{width:100%;display:flex;align-items:center;gap:14px;padding:14px 0;border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--ink);font-family:inherit;text-align:left;cursor:pointer}
.character-known-item>svg{width:22px;height:22px;color:var(--ink2);flex-shrink:0}
.character-known-item>svg:last-child{width:20px;height:20px;stroke-width:3}
.character-known-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.character-known-main b{font-size:15px;font-weight:600;color:var(--ink)}
.character-known-main span{font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-known-add{width:100%;display:flex;align-items:center;gap:12px;padding:14px 0;border:none;background:transparent;color:var(--accent-text);font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.character-known-add svg{width:22px;height:22px}
.character-world-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0 6px}
.character-world-empty span{width:72px;height:72px;border-radius:50%;background:var(--surface-alt);color:var(--ink2);display:flex;align-items:center;justify-content:center}
.character-world-empty svg{width:30px;height:30px}
.character-world-empty p{margin:0;font-size:14px;color:var(--ink2)}
.character-world-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border)}
.character-world-note>summary{display:flex;width:100%;gap:10px;color:var(--ink);font-size:14px}
.character-world-note>summary>span{flex:1}
.character-world-note>summary>svg{width:18px;height:18px;color:var(--ink2)}
.character-world-note>p{padding-left:28px}
.character-permission-list{gap:0}
.character-permission-group{background:transparent;box-shadow:none;padding:0;border-radius:0}
.character-permission-list>.character-permission-row,.character-permission-list>.character-permission-group{border-bottom:1px solid var(--border);padding:6px 0}
.character-permission-row{padding:8px 0}
.character-permission-row b{font-size:15px}
.character-permission-row em{font-size:12.5px}
.character-step4-details{margin-top:0;border-top:1px solid var(--border)}
.character-step4-details>summary{min-height:52px;font-size:15px}
.character-step4-details>summary svg{width:18px;height:18px;color:var(--ink2);transition:transform .16s ease}
.character-step4-details[open]>summary svg{transform:rotate(90deg)}
.character-permission-list>:last-child{border-bottom:none}
/* Character ··· actions as a centred dialog */
.sheet-ov.character-dialog-ov{align-items:center;padding:16px}
.sheet.character-dialog{max-width:340px;border-radius:22px;padding:8px 22px 6px;animation:fadeIn .18s ease-out;box-shadow:var(--shadow-md)}
.character-dialog-head{display:flex;align-items:center;gap:10px;padding:14px 0 12px;border-bottom:1px solid var(--border)}
.character-dialog-head h3{flex:1;min-width:0;margin:0;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-dialog-close{width:36px;height:36px;margin-right:-8px;border:none;border-radius:10px;background:transparent;color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}
/* The app-wide focus ring (index.html) is a square outline that doesn't bend around round buttons; a
   box-shadow does (it always follows border-radius), so these two rounded controls get their own ring. */
.character-rb:focus-visible,.character-dialog-close:focus-visible{outline:none!important;box-shadow:0 0 0 3px var(--focus-ring)!important}
.character-dialog-close svg{width:20px;height:20px}
.character-dialog .character-sheet-action{min-height:52px;margin:0;border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid var(--border);gap:16px;padding:0 6px;font-size:15px}
.character-dialog .character-sheet-action:last-child{border-bottom:none}
.character-dialog .character-sheet-action svg{width:16px;height:16px}
.character-sheet-action .character-mi-icon{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--pri-pale);color:var(--pri-deep);display:flex;align-items:center;justify-content:center}
.character-sheet-action.danger .character-mi-icon{background:rgba(184,112,106,.12);color:#b8706a}
.character-optional{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:7px;background:var(--surface-alt);color:var(--ink2);font-size:12px;font-weight:500;vertical-align:2px}
.character-inline-details>.character-card-intro{margin:0 0 10px}
.character-pair-add{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:12px}
.character-pair-add svg{width:18px;height:18px;color:var(--ink2)}
.character-form-dialog{padding-bottom:20px}
.character-form-dialog .character-dialog-head{border-bottom:none;padding-bottom:6px}
.character-form-dialog .character-field{margin:12px 0 0}
.character-form-dialog .character-field>span{font-size:14px;color:var(--ink);font-weight:600}
.character-select-wrap{position:relative;display:block}
.character-select-wrap select{width:100%;appearance:none;-webkit-appearance:none;padding-right:38px}
.character-select-wrap>svg{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;transform:rotate(90deg);color:var(--ink2);pointer-events:none}
.character-dialog-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.character-dialog-btns:has(.character-rel-ok:only-child){grid-template-columns:1fr}
.character-dialog-btns .s-btn.character-rel-ok{height:48px;border-radius:24px;background:#fff;color:var(--accent-text);font-weight:600;box-shadow:0 6px 14px -8px color-mix(in srgb,var(--ink) 35%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-dialog-btns .s-btn.character-rel-ok{background:rgba(255,255,255,.12)}}
:root[data-theme="dark"] .character-dialog-btns .s-btn.character-rel-ok{background:rgba(255,255,255,.12)}
.character-dialog-btns .s-btn{min-height:46px;border-radius:14px;font-size:15px}
/* TA 的颜色 picker (§5) */
.prevc{display:flex;align-items:center;gap:12px;padding:10px 0 14px}
.prevc .av{width:44px;height:44px;border-radius:28%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.prevc b{display:block;font-size:14px;color:var(--ink)}
.prevc small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink2);line-height:1.4}
.fam{margin:10px 2px 6px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.pal{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pal>div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--ink2);cursor:pointer;padding:4px 0;border-radius:10px}
.pal>div.on{background:var(--surface-alt)}
.pal i{width:34px;height:34px;border-radius:50%;display:block;box-shadow:0 2px 6px -2px color-mix(in srgb,var(--ink) 35%,transparent)}
.pal>div.on i{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.custom{display:flex;align-items:center;gap:10px;margin-top:12px;padding:4px 2px;cursor:pointer}
.custom .wheel{flex:0 0 28px;width:28px;height:28px;border-radius:50%;box-shadow:0 2px 6px -2px color-mix(in srgb,var(--ink) 35%,transparent)}
.custom span{flex:1;font-size:13.5px;color:var(--ink)}
.custom input[type=color]{-webkit-appearance:none;appearance:none;flex:0 0 28px;width:28px;height:28px;border-radius:50%;overflow:hidden}
.custom input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.custom input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}
.character-dialog .character-sheet-action>svg:last-child:not(:first-child){width:18px;height:18px;margin-left:auto}
.character-more-head{display:flex;align-items:center;gap:12px;padding:14px 0 12px;border-bottom:1px solid var(--border)}
.character-more-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--surface-alt);color:var(--pri-deep);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;flex-shrink:0}
.character-more-avatar img{width:100%;height:100%;object-fit:cover}
.character-more-head-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.character-more-head-text b{font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-more-head-text small{font-size:12.5px;color:var(--ink2)}
.character-rel-sub{margin:0 0 12px;color:var(--ink2);font-size:12.5px}
.character-rel-knot{margin:10px 0 0;color:var(--ink2);font-size:12.5px}
.character-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.character-rel-chip{min-height:38px;border:1.5px solid transparent;border-radius:14px;background:color-mix(in srgb,var(--surface) 75%,transparent);color:var(--ink2);font-family:inherit;font-size:12.5px;font-weight:600;padding:0 4px;cursor:pointer}
.character-rel-chip.active{background:var(--pri-pale);border-color:var(--pri-deep);color:var(--accent-text)}
.character-rel-danger-row{display:flex;gap:10px;justify-content:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.character-rel-danger-btn{border:1.5px solid rgba(184,112,106,.4);border-radius:999px;background:transparent;color:#b8706a;font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 16px;cursor:pointer}

/* Section 2 editor: docs/character-edit-preview.html's .seg/.namecard/.grp/.list/.it/.dots/.tok/.ph/.f/
   .tx/.chips/.nav/.fld/.sw/.slider/.cover/.cal/.rg/.pr ported with character-glass tokens; everything is
   scoped under #character-editor-body since a few short class names (.ic/.m/.pr/.two/.c/.u) are reused
   from the mockup almost verbatim and would otherwise be free to clash with other apps' CSS. */
#character-editor-body{background:var(--bg)}
#character-editor-body .character-top{background:transparent;border-bottom:none}
#character-editor-body .app-title{flex:1;font-family:var(--font-display);font-size:17px;font-weight:600;text-align:center;color:var(--ink)}
#character-editor-body .character-save-btn{height:36px;border-radius:18px;background:var(--surface);color:var(--pri-deep);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--ink) 35%,transparent);font-family:var(--font-display);padding:0 18px}
#character-editor-body .character-save-btn.character-save-ghost{background:transparent;box-shadow:none;color:var(--ink2)}
#character-editor-body .character-form-scroll{padding:0 16px calc(18px + var(--sab))}
.character-seg{display:flex;padding:4px;border-radius:20px;background:color-mix(in srgb,var(--surface) 50%,transparent);border:1px solid var(--character-glass-line);margin:6px 0 14px}
.character-seg button{flex:1;text-align:center;padding:7px;border:none;background:transparent;border-radius:16px;font-family:inherit;font-size:13.5px;color:var(--ink2);cursor:pointer}
.character-seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 4px 10px -6px color-mix(in srgb,var(--ink) 40%,transparent)}
.character-namecard{display:flex;align-items:center;gap:14px;padding:14px;margin:0 0 12px;width:100%;border:none;text-align:left;cursor:pointer;color:inherit;font-family:inherit}
.character-namecard-av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;font-size:20px}
.character-namecard-av img{width:100%;height:100%;object-fit:cover}
.character-namecard-m{flex:1;min-width:0}
.character-namecard-m b{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink)}
.character-namecard-m p{margin:3px 0 0;font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-namecard em{font-style:normal;font-size:12px;color:var(--accent-text);display:flex;align-items:center;flex-shrink:0}
.character-namecard em svg{width:15px;height:15px}
.character-grp{margin:12px 8px 7px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink2);display:flex;justify-content:space-between}
.character-grp small{font-weight:400}
.character-list{padding:2px 14px;margin-bottom:12px}
.character-it{display:flex;align-items:center;gap:12px;padding:10px 0;width:100%;border:none;border-top:1px solid var(--character-glass-line);background:transparent;text-align:left;font-family:inherit;color:inherit;cursor:pointer}
.character-list>.character-it:first-child{border-top:none}
.character-it-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pri-pale);color:var(--pri-deep);flex-shrink:0}
.character-it-ic svg{width:17px;height:17px}
.character-it-m{flex:1;min-width:0}
.character-it-m b{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ink)}
.character-it-m p{margin:2px 0 0;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-it-empty{color:var(--accent-text)!important;font-weight:600}
.character-dots{display:flex;gap:3px;align-items:center;flex-shrink:0}
.character-dots i{width:6px;height:6px;border-radius:50%;background:var(--mist,var(--border))}
.character-dots i.on{background:var(--pri-deep)}
.character-tok{margin:0 0 16px;padding:12px 14px}
.character-tok-t{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2)}
.character-tok-t b{font-family:var(--num,var(--font-display));font-weight:500;font-size:16px;color:var(--ink)}
.character-tbar{display:flex;height:7px;border-radius:4px;overflow:hidden;margin:8px 0 6px;background:color-mix(in srgb,var(--pri) 12%,transparent)}
.character-tbar i{display:block;height:100%}
.character-tok small{font-size:11.5px;color:var(--ink2);line-height:1.6;display:block}
.character-ph{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.character-ph .ic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pri-pale);color:var(--pri-deep);flex-shrink:0}
.character-ph .ic svg{width:19px;height:19px}
.character-ph b{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink);display:block}
.character-ph small{display:block;font-size:12px;color:var(--ink2);margin-top:2px}
.character-f{margin-top:14px}
.character-f label{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink2);margin:0 4px 7px}
.character-f label small{font-family:var(--font-body);font-weight:400;font-size:11.5px;color:var(--ink2)}
/* Inputs (§0/§5): rgba(255,255,255,.75) + 1px #fff, no inset/neumorphic shadow, serif 14.5px/1.75; focus
   turns the background solid white with a 3px theme-colour glow. Dark mode swaps to a faint white wash. */
:root{--character-field-bg:rgba(255,255,255,.75);--character-field-line:#fff;--character-field-focus-bg:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--character-field-bg:rgba(255,255,255,.06);--character-field-line:rgba(255,255,255,.1);--character-field-focus-bg:rgba(255,255,255,.1)}}
:root[data-theme="dark"]{--character-field-bg:rgba(255,255,255,.06);--character-field-line:rgba(255,255,255,.1);--character-field-focus-bg:rgba(255,255,255,.1)}
.character-tx{display:block;width:100%;box-sizing:border-box;border-radius:16px;background:var(--character-field-bg);border:1px solid var(--character-field-line);padding:11px 14px;font-family:var(--font-display);font-size:14.5px;line-height:1.75;color:var(--ink);resize:none;overflow:hidden;min-height:56px}
.character-tx:focus{outline:none;background:var(--character-field-focus-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 25%,transparent)}
.character-fld{height:46px;border-radius:16px;background:var(--character-field-bg);border:1px solid var(--character-field-line);display:flex;align-items:center;padding:0 14px;font-family:var(--font-display);font-size:15px;gap:8px;color:var(--ink);width:100%;box-sizing:border-box;text-align:left}
/* display:flex on a bare <input> (e.g. 发型/眼睛/声音 - a plain single-line field, not an icon+input
   wrapper) renders inconsistently across browsers; force the box model that actually matches .character-fld. */
input.character-fld{display:block;line-height:46px;padding:0 14px;outline:none}
input.character-fld:focus{outline:none;background:var(--character-field-focus-bg)}
.character-fld .u{margin-left:auto;font-size:13px;color:var(--ink2)}
.character-fld svg{color:var(--ink2);width:17px;height:17px;flex-shrink:0}
.character-fld input{border:none;background:transparent;outline:none;color:var(--ink);font:inherit;width:100%;min-width:0}
.character-hint{font-size:11.5px;color:var(--ink2);margin:6px 4px 0;line-height:1.6}
.character-inline-fld{height:36px;border-radius:12px;padding:0 10px;font-size:13.5px;margin-left:auto;flex:0 1 150px}
.character-inline-select{margin-left:auto;border:1px solid var(--character-field-line);background:var(--character-field-bg);border-radius:12px;height:32px;padding:0 10px;font:inherit;font-size:13px;color:var(--ink)}
/* .character-tags already exists (关键词/口头禅/小习惯/喜欢…); restyle to the §5 glass chip look.
   Each tag is <button>text<i>×</i></button> - the × gets its own small --ink2 treatment. */
.character-tags{border:none;background:transparent;padding:0}
.character-tags button{background:color-mix(in srgb,var(--pri) 14%,#fff);border:none;color:var(--ink);border-radius:15px;padding:6px 12px;font-size:13px;font-weight:400;font-family:inherit}
.character-tags button i{font-style:normal;color:var(--ink2);font-size:11px;margin-left:4px}
.character-tag-add{background:transparent;border:1.5px dashed color-mix(in srgb,var(--pri) 45%,transparent);border-radius:15px;color:var(--pri-deep);display:inline-flex;align-items:center;padding:0 4px 0 12px;font-size:13px}
.character-tag-add input{border:none;background:transparent;outline:none;color:var(--ink);font:inherit;font-size:13px;min-width:70px;padding:6px 8px 6px 4px}
.character-chips{display:flex;flex-wrap:wrap;gap:7px}
.character-chips span{padding:6px 12px;border-radius:15px;font-size:13px;background:var(--character-field-bg);border:1px solid var(--character-field-line);color:var(--ink);cursor:pointer}
.character-chips span.on{background:var(--pri-pale);color:var(--pri-deep);box-shadow:inset 0 0 0 1.5px var(--pri-deep);font-weight:600}
.character-chips span.add{color:var(--pri-deep);background:transparent;border:1.5px dashed color-mix(in srgb,var(--pri) 45%,transparent)}
#character-editor-body .character-form-scroll-nav{padding-bottom:88px}
.character-nav{position:absolute;left:16px;right:16px;bottom:0;padding-bottom:calc(14px + var(--sab));display:flex;gap:10px;z-index:3}
.character-nav button{flex:1;height:46px;border-radius:23px;display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--pri-deep);background:var(--character-glass);border:1px solid var(--character-glass-line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--ink) 35%,transparent);cursor:pointer}
.character-nav button svg{width:16px;height:16px}
.character-nav button.c{background:var(--pri-pale);box-shadow:none;color:var(--ink2)}
.character-editor-top-section{background:transparent}
.character-editor-top-section .character-save-pill{margin-left:auto}
/* 每个角色有自己的颜色: editor pages tint with the character's own accent */
#character-editor-body.character-editor-accent{position:relative;background:#fbfafc!important}
.character-editor-wash{display:none}
.character-editor-accent .character-editor-wash{display:block;position:absolute;left:0;right:0;top:0;height:260px;background:radial-gradient(90% 100% at 50% 0%,color-mix(in srgb,var(--c1) 75%,transparent),transparent 75%);pointer-events:none;z-index:0}
.character-editor-accent .character-top,.character-editor-accent .character-form-scroll,.character-editor-accent .character-nav{position:relative;z-index:1}
.character-editor-accent .character-rb{background:rgba(255,255,255,.85);border-color:#fff;color:var(--ct)}
.character-editor-accent .character-save-pill{color:var(--cd)!important}
.character-editor-accent .app-title{color:var(--ct)}
.character-editor-accent .character-seg{background:rgba(255,255,255,.6)}
.character-editor-accent .character-seg button.on{color:var(--cd)}
.character-editor-accent .character-namecard,.character-editor-accent .character-list,.character-editor-accent .character-tok{background:#fff;border:1px solid color-mix(in srgb,var(--cd) 10%,#fff);box-shadow:0 10px 26px -18px color-mix(in srgb,var(--cd) 55%,transparent)}
.character-editor-accent .character-namecard em{color:var(--cd)}
.character-editor-accent .character-grp{color:var(--ct2)}
.character-editor-accent .character-it-ic{background:var(--cl);color:var(--cd)}
.character-editor-accent .character-it-m b{color:var(--ct)}
.character-editor-accent .character-it-m p{color:var(--ct2)}
.character-editor-accent .character-dots i{background:color-mix(in srgb,var(--cd) 18%,#fff)}
.character-editor-accent .character-dots i.on{background:var(--cd)}
.character-editor-accent .character-it-empty{color:var(--cd)!important}
.character-editor-accent .character-tbar{background:var(--cl)}
.character-editor-accent .character-tok-t b{color:var(--ct)}
.character-editor-accent .character-ph b{color:var(--ct)}
.character-editor-accent .character-ph small{color:var(--ct2)}
.character-editor-accent .character-ph .ic,.character-editor-accent .character-fld .ic{background:var(--cl);color:var(--cd)}
.character-editor-accent .character-f label{color:var(--ct2)}
.character-editor-accent .character-tx,.character-editor-accent .character-fld{background:#fff;border-color:color-mix(in srgb,var(--cd) 13%,#fff);box-shadow:0 4px 12px -10px color-mix(in srgb,var(--cd) 60%,transparent);color:var(--ct)}
.character-editor-accent .character-tx:focus-within,.character-editor-accent .character-tx.focus{border-color:color-mix(in srgb,var(--cd) 45%,#fff);}
.character-editor-accent .character-tags button{background:var(--cl);color:var(--cd)}
.character-editor-accent .character-sw{background:var(--cl)}
.character-editor-accent .character-sw .on{color:var(--cd)}
.character-editor-accent .character-nav button{color:var(--cd);background:#fff;border-color:color-mix(in srgb,var(--cd) 12%,#fff)}
.character-editor-accent .character-nav button.c{background:var(--cl);color:var(--ct2)}
.character-editor-accent .character-namecard .character-avatar-lg,.character-editor-accent .character-avatar-sq{border-radius:28%}
.colrow{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:16px;background:#fff;border:1px solid var(--character-field-line)}
.character-editor-accent .colrow{border-color:color-mix(in srgb,var(--cd) 13%,#fff)}
.colrow i{width:26px;height:26px;border-radius:9px;background:var(--pri)}
.character-editor-accent .colrow i{background:var(--cd)}
.colrow span{flex:1;font-size:15px}
.colrow em{font-style:normal;font-size:12.5px;color:var(--accent-text)}
.character-editor-accent .colrow em{color:var(--cd)}
.character-save-pill{background:#fff!important;color:var(--pri-deep)!important;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--ink) 35%,transparent)!important}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-save-pill{background:rgba(255,255,255,.12)!important}}
:root[data-theme="dark"] .character-save-pill{background:rgba(255,255,255,.12)!important}
#character-editor-body .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.character-sw{display:flex;padding:3px;border-radius:16px;background:color-mix(in srgb,var(--surface) 55%,transparent);border:1px solid var(--character-glass-line);height:46px}
.character-sw span{flex:1;display:flex;align-items:center;justify-content:center;border-radius:13px;font-family:var(--font-display);font-size:14px;color:var(--ink2);cursor:pointer}
.character-sw span.on{background:var(--surface);color:var(--pri-deep);font-weight:600;box-shadow:0 4px 10px -6px color-mix(in srgb,var(--ink) 40%,transparent)}
.character-height-fld input{width:100%;border:none;background:transparent;outline:none;font:500 20px var(--num,var(--font-display));color:var(--ink)}
.character-height-fld input::-webkit-outer-spin-button,.character-height-fld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.character-height-fld input[type=number]{-moz-appearance:textfield}
.character-slider{margin:12px 4px 2px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--pri) 15%,transparent);position:relative;touch-action:none;cursor:pointer}
.character-slider i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--pri)}
.character-slider b{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--surface);box-shadow:0 2px 8px color-mix(in srgb,var(--ink) 40%,transparent)}
.character-ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink2);margin:8px 2px 0}
.character-cover{height:90px;border-radius:16px;background:var(--pri-pale);position:relative;overflow:hidden}
.character-cover span{position:absolute;right:8px;bottom:8px;padding:4px 10px;border-radius:12px;background:color-mix(in srgb,var(--surface) 85%,transparent);font-size:11.5px;color:var(--pri-deep)}
.character-avrow{display:flex;align-items:center;gap:14px;margin-top:10px}
.character-avrow .character-namecard-av{width:72px;height:72px;font-size:24px;position:relative;flex-shrink:0}
.character-avrow>.character-f{flex:1;min-width:0}
/* 生日 modal */
.character-mon{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink)}
.character-mon button{border:none;background:transparent;color:var(--ink2);display:flex;cursor:pointer}
.character-mon svg{width:19px;height:19px}
.character-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;margin-top:10px}
.character-cal b{font-size:11px;color:var(--ink2);font-weight:400;padding:4px 0}
.character-cal span{height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;font:14px var(--num,var(--font-display));color:var(--ink);cursor:pointer}
.character-cal span.o{color:var(--ink2)}
.character-cal span.on{background:var(--pri-deep);color:var(--on-pri,#fff)}
.character-yr{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:10px 14px;border-radius:16px;background:color-mix(in srgb,var(--pri) 9%,transparent);font-size:13px;color:var(--ink)}
.character-tg{width:44px;height:26px;border-radius:13px;background:var(--mist);position:relative;border:none;cursor:pointer;flex-shrink:0}
.character-tg::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--surface)}
.character-tg.on{background:var(--pri-deep)}
.character-tg.on::after{left:21px}
.character-btns{display:flex;gap:10px;margin-top:14px}
.character-btns button{flex:1;height:46px;border-radius:23px;border:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--pri-deep);background:var(--surface);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--ink) 35%,transparent);cursor:pointer}
.character-btns button.c{background:var(--pri-pale);box-shadow:none;color:var(--ink2)}
/* 关系与设置: glass-ify the existing step4 cards and the 4-col relation grid */
#character-editor-body .character-step4-card,#character-editor-body .character-form-card{border-radius:22px;background:var(--character-glass);border:1px solid var(--character-glass-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--character-glass-shadow)}
#character-editor-body .character-relation-grid{grid-template-columns:repeat(4,1fr)}
#character-editor-body .character-relation-grid .character-choice-chip{border-radius:14px;background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--character-glass-line);box-shadow:none;min-height:38px;font-size:12.5px}
#character-editor-body .character-relation-grid .character-choice-chip.active{background:var(--pri-pale);color:var(--pri-deep);box-shadow:inset 0 0 0 1.5px var(--pri-deep)}
#character-editor-body .pr{display:flex;align-items:center;gap:12px;padding:10px 0}
#character-editor-body .pr+.pr{border-top:1px solid var(--character-glass-line)}
#character-editor-body .pr .ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--pri-pale);color:var(--pri-deep);flex-shrink:0}
#character-editor-body .pr .ic svg{width:16px;height:16px}
#character-editor-body .pr .m{flex:1;min-width:0}
#character-editor-body .pr .m b{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--ink)}

/* ===================================================================================================
   Character polish (hand-written override, keep LAST in this file).
   1) dark mode: every hard-coded #fff surface -> --cx-* tokens   2) per-character accent vars remapped
   for dark   3) rounded-square avatars   4) section nav pinned again   5) detail page tinted even with a
   cover   6) stronger home blobs   7) no ring box on the dialog ✕
   =================================================================================================== */
:root{--cx-card:#fff;--cx-card-line:color-mix(in srgb,var(--ink) 6%,transparent);--cx-chip:#fff;--cx-page:#fbfafc;--cx-seg:rgba(255,255,255,.6);--cx-rb:rgba(255,255,255,.85);--cx-rb-line:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--cx-card:rgba(255,255,255,.06);--cx-card-line:rgba(255,255,255,.09);--cx-chip:rgba(255,255,255,.07);--cx-page:#15171d;--cx-seg:rgba(255,255,255,.05);--cx-rb:rgba(255,255,255,.1);--cx-rb-line:rgba(255,255,255,.14)}}
:root[data-theme="dark"]{--cx-card:rgba(255,255,255,.06);--cx-card-line:rgba(255,255,255,.09);--cx-chip:rgba(255,255,255,.07);--cx-page:#15171d;--cx-seg:rgba(255,255,255,.05);--cx-rb:rgba(255,255,255,.1);--cx-rb-line:rgba(255,255,255,.14)}

/* 2) accent vars are inline (light-tuned: --ct/--ct2 are near-black). In dark, remap them to readable tones. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.character-ftop,.character-detail-scroll,#character-editor-body.character-editor-accent){--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important;--cbg:color-mix(in srgb,var(--c1) 6%,#15171d)!important}}
:root[data-theme="dark"] :is(.character-ftop,.character-detail-scroll,#character-editor-body.character-editor-accent){--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important;--cbg:color-mix(in srgb,var(--c1) 6%,#15171d)!important}
/* 角色页里的全局灰蓝变量一律换成该角色的颜色：说明小字、占位文字、单位、身高滑杆等直接写了 --ink2 / --pri 的地方都跟着走。
   放在带角色变量的元素的下一层：本层的 --ct2 等在兜底与深色规则里引用的是全局 --ink2，同层改写会循环引用。 */
:is(.character-ftop,.character-detail-scroll,#character-editor-body.character-editor-accent)>*{--ink:var(--ct);--ink2:var(--ct2);--accent-text:var(--cd);--pri:var(--cd);--pri-deep:var(--cd);--pri-pale:var(--cl);--surface-alt:var(--cl);--mist:color-mix(in srgb,var(--cd) 30%,transparent);--border:color-mix(in srgb,var(--cd) 14%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-quick-main .character-quick-icon{color:#16181e}}
:root[data-theme="dark"] .character-quick-main .character-quick-icon{color:#16181e}

/* 1) home */
.character-home-search{background:var(--cx-card);border:1px solid var(--cx-card-line)}
.character-filter-tabs button{background:var(--cx-chip)}
.character-card{background:var(--cx-card);border-color:var(--cx-card-line);position:relative;overflow:hidden}
/* 6) blob: bigger + stronger so each card actually reads as "its" colour */
.character-card-blob{top:-44px;left:-44px;width:150px;height:150px;filter:blur(28px);opacity:.45}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-card-blob{opacity:.3}}
:root[data-theme="dark"] .character-card-blob{opacity:.3}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-tags button{background:color-mix(in srgb,var(--pri) 22%,transparent)}}
:root[data-theme="dark"] .character-tags button{background:color-mix(in srgb,var(--pri) 22%,transparent)}

/* 3) avatars are rounded squares everywhere in this app */
.character-namecard-av,.character-avrow .character-namecard-av{border-radius:28%}
.character-avwrap{position:relative;flex-shrink:0;display:block}

/* 4) the accent block above set .character-nav to position:relative, so left:16px pushed it off-screen */
#character-editor-body .character-nav{position:absolute;left:16px;right:16px;bottom:0;z-index:3}
#character-editor-body .character-nav button{min-width:0;white-space:nowrap}

/* 1b) editor surfaces */
#character-editor-body.character-editor-accent{background:var(--cx-page)!important}
.character-editor-accent .character-rb{background:var(--cx-rb);border-color:var(--cx-rb-line)}
.character-editor-accent .character-seg{background:var(--cx-seg)}
.character-editor-accent .character-namecard,.character-editor-accent .character-list,.character-editor-accent .character-tok,
.character-editor-accent .character-tx,.character-editor-accent .character-fld,.character-editor-accent .character-nav button:not(.c),
.colrow{background:var(--cx-card)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.character-editor-accent .character-namecard,.character-editor-accent .character-list,.character-editor-accent .character-tok,.character-editor-accent .character-tx,.character-editor-accent .character-fld,.character-editor-accent .character-nav button,.character-editor-accent .colrow){border-color:var(--cx-card-line);box-shadow:none}}
:root[data-theme="dark"] :is(.character-editor-accent .character-namecard,.character-editor-accent .character-list,.character-editor-accent .character-tok,.character-editor-accent .character-tx,.character-editor-accent .character-fld,.character-editor-accent .character-nav button,.character-editor-accent .colrow){border-color:var(--cx-card-line);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-editor-accent .character-dots i{background:rgba(255,255,255,.14)}}
:root[data-theme="dark"] .character-editor-accent .character-dots i{background:rgba(255,255,255,.14)}

/* 5) detail page: the page itself takes the character's pale tint, the cover fades into it, the radial
   wash sits just under the cover, and cards are white with a shadow in the character's colour */
.character-detail-scroll{background:var(--cbg,var(--bg))}
.character-hero.has-cover::after{background:linear-gradient(180deg,rgba(0,0,0,.04) 30%,var(--cbg,var(--bg)) 100%)}
/* the name sits on the lower part of the cover, where it fades into the page: a faint halo in the page colour keeps it legible on any photo */
.character-hero.has-cover h2{text-shadow:0 0 2px color-mix(in srgb,var(--cbg,var(--bg)) 85%,transparent),0 0 10px color-mix(in srgb,var(--cbg,var(--bg)) 70%,transparent)}
.character-detail-scroll:has(.character-hero.has-cover) .character-tint{top:200px;height:340px;opacity:.7}
.character-detail-scroll .character-section{background:var(--cx-card);border:1px solid color-mix(in srgb,var(--cd,var(--ink)) 10%,transparent);box-shadow:0 14px 30px -22px color-mix(in srgb,var(--cd,var(--ink)) 70%,transparent)}
.character-detail-scroll .character-ct b{color:var(--ct,var(--ink))}
.character-detail-scroll .character-hero h2{color:var(--ct,var(--ink))}

/* 7) dialog ✕ gets focus programmatically on open; a ring box there just looks like a bug.
   Keyboard users still get a visible state: a soft filled circle instead of a ring. */
.character-dialog-close:focus,.character-dialog-close:focus-visible{outline:none!important;box-shadow:none!important}
.character-dialog-close:focus-visible{background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:50%}
.colrow span{color:var(--ct,var(--ink))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-editor-accent .character-save-pill{color:var(--c1)!important}}
:root[data-theme="dark"] .character-editor-accent .character-save-pill{color:var(--c1)!important}
/* with a cover the wash must fade IN below the cover (a radial anchored at its own top edge left a hard line in dark) */
.character-detail-scroll:has(.character-hero.has-cover) .character-tint{top:170px;height:420px;background:radial-gradient(85% 45% at 50% 50%,var(--c1,var(--pri-pale)),transparent 75%);opacity:.6}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-tint{opacity:.35}}
:root[data-theme="dark"] .character-tint{opacity:.35}

/* ===== 「TA 认识的人」 edit sheet (hand-written) ===== */
.character-related-avatar{border-radius:28%;overflow:hidden}
.character-rel-sheet{max-height:88dvh;overflow-y:auto;padding:18px 18px calc(18px + var(--sab));border-radius:28px 28px 0 0}
.crs-head{display:flex;align-items:center;justify-content:space-between}
.crs-head h3{margin:0;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink)}
.crs-x{width:32px;height:32px;border:none;border-radius:50%;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.crs-x svg{width:16px;height:16px}
.crs-pair{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 4px}
.crs-pair>div{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px}
.crs-pair b{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--ink)}
.crs-pair em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--cd,var(--pri-deep));padding:4px 12px;border-radius:12px;background:var(--cl,var(--pri-pale));position:relative}
.crs-pair .crs-av{width:56px;height:56px;font-size:20px}
.crs-av{display:flex;width:44px;height:44px;border-radius:28%;overflow:hidden;flex-shrink:0;font-size:16px}
.crs-av img{width:100%;height:100%;object-fit:cover}
.crs-me{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--pri-pale);color:var(--pri-deep)}
.crs-me svg{width:20px;height:20px}
.crs-sec{margin:16px 4px 8px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink2)}
.crs-people{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 4px}
.crs-people button{border:none;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;font-family:inherit;font-size:11.5px;color:var(--ink2);cursor:pointer;flex-shrink:0;max-width:56px}
.crs-people button .crs-av{outline:2px solid transparent;outline-offset:2px}
.crs-people button.on .crs-av{outline-color:var(--cd,var(--pri-deep))}
.crs-people button.on{color:var(--ink);font-weight:600}
.crs-chips{display:flex;flex-wrap:wrap;gap:7px}
.crs-chips button{border:1px solid var(--character-field-line);background:var(--character-field-bg);color:var(--ink);border-radius:15px;padding:6px 12px;font-family:inherit;font-size:13px;cursor:pointer}
.crs-chips button.on{background:var(--cl,var(--pri-pale));color:var(--cd,var(--pri-deep));border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--cd,var(--pri-deep));font-weight:600}
.crs-label{margin-top:10px}
.character-rel-sheet .character-tx{min-height:0}
.crs-hint{margin:12px 4px 0;font-size:11.5px;line-height:1.6;color:var(--ink2)}
.crs-save{width:100%;height:46px;margin-top:16px;border:none;border-radius:23px;background:var(--cd,var(--pri-deep));color:#fff;font-family:var(--font-display);font-size:15px;font-weight:600;cursor:pointer}
.crs-del{display:block;margin:12px auto 0;border:none;background:none;color:var(--coral-text,#b8706a);font-family:inherit;font-size:13px;cursor:pointer}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .crs-save{color:#16181e}}
:root[data-theme="dark"] .crs-save{color:#16181e}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-rel-sheet{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}}
:root[data-theme="dark"] .character-rel-sheet{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}
.character-rel-sheet textarea.character-tx{height:78px;overflow:auto}

/* ===== 关系与设置 tab: same look as the 人设 tab (hand-written) =====
   solid white cards with the character-coloured shadow, chips/toggles/icons in the character's colour. */
#character-editor-body.character-editor-accent :is(.character-step4-card,.character-form-card,.character-glass.card){background:var(--cx-card);border:1px solid color-mix(in srgb,var(--cd) 10%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 26px -18px color-mix(in srgb,var(--cd) 55%,transparent);border-radius:22px}
#character-editor-body.character-editor-accent .character-glass.card{margin-bottom:14px}
#character-editor-body.character-editor-accent :is(.character-step4-card,.character-form-card){margin-bottom:14px}
#character-editor-body.character-editor-accent .character-section-head h3{color:var(--ct)}
#character-editor-body.character-editor-accent .character-section-head h3 small{color:var(--ct2);font-weight:400}
#character-editor-body.character-editor-accent .character-section-head p{color:var(--ct2)}
#character-editor-body.character-editor-accent .pr .ic{background:var(--cl);color:var(--cd)}
#character-editor-body.character-editor-accent .pr .m b{color:var(--ct)}
#character-editor-body.character-editor-accent .character-relation-grid .character-choice-chip{background:var(--cx-card);border:1px solid color-mix(in srgb,var(--cd) 14%,transparent);color:var(--ct);white-space:nowrap;padding:0 4px;box-shadow:0 4px 10px -8px color-mix(in srgb,var(--cd) 60%,transparent)}
#character-editor-body.character-editor-accent .character-relation-grid .character-choice-chip.active{background:var(--cl);color:var(--cd);border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--cd);font-weight:600}
#character-editor-body.character-editor-accent .character-relation-grid .character-choice-chip svg{display:none}
#character-editor-body.character-editor-accent .character-choice-chip.active{color:var(--cd)}
#character-editor-body.character-editor-accent .character-permission-row b{color:var(--ct)}
#character-editor-body.character-editor-accent .character-permission-row em{color:var(--ct2)}
#character-editor-body.character-editor-accent .character-permission-nested{border-left-color:color-mix(in srgb,var(--cd) 25%,transparent)}
#character-editor-body.character-editor-accent .character-switch{width:44px;height:26px;border-radius:13px;border:none;padding:0;position:relative;flex-shrink:0;background:color-mix(in srgb,var(--ink) 14%,transparent);box-shadow:none;cursor:pointer}
#character-editor-body.character-editor-accent .character-switch::before,#character-editor-body.character-editor-accent .character-switch::after{content:none}
#character-editor-body.character-editor-accent .character-switch i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:left .18s ease;transform:none}
#character-editor-body.character-editor-accent .character-switch.active{background:var(--cd)}
#character-editor-body.character-editor-accent .character-switch.active i{left:21px}
/* Q 弹 switch (styles/motion.css .toggle has the same feel): the knob stretches while held and springs over */
#character-editor-body.character-editor-accent .character-switch i{transition:left .38s cubic-bezier(.34,1.56,.64,1),scale .38s cubic-bezier(.34,1.56,.64,1);transform-origin:0 50%}
#character-editor-body.character-editor-accent .character-switch.active i{transform-origin:100% 50%}
#character-editor-body.character-editor-accent .character-switch:active i{scale:1.3 1;transition-duration:90ms}
#character-editor-body.character-editor-accent .character-switch:disabled{opacity:.45}
#character-editor-body.character-editor-accent .character-inline-select{background:var(--cx-card);border-color:color-mix(in srgb,var(--cd) 13%,transparent);color:var(--ct)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #character-editor-body.character-editor-accent :is(.character-step4-card,.character-form-card,.character-glass.card,.character-relation-grid .character-choice-chip){border-color:var(--cx-card-line);box-shadow:none}}
:root[data-theme="dark"] #character-editor-body.character-editor-accent :is(.character-step4-card,.character-form-card,.character-glass.card,.character-relation-grid .character-choice-chip){border-color:var(--cx-card-line);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #character-editor-body.character-editor-accent .character-switch:not(.active){background:rgba(255,255,255,.14)}}
:root[data-theme="dark"] #character-editor-body.character-editor-accent .character-switch:not(.active){background:rgba(255,255,255,.14)}

/* 「TA 认识的人」: full-screen page (replaces the bottom sheet). Same language as the editor pages:
   pale page + character-coloured wash on top, white cards, round back, 保存 pill. */
.crs-page{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:var(--cx-page);animation:fadeIn .18s}
.crs-wash{position:absolute;left:0;right:0;top:0;height:260px;background:radial-gradient(90% 100% at 50% 0%,color-mix(in srgb,var(--c1) 75%,transparent),transparent 75%);pointer-events:none}
.crs-top{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 14px 6px}
.crs-top .character-rb svg{width:20px;height:20px}
.crs-title{flex:1;text-align:center;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ct)}
.crs-top .character-save-pill{height:36px;padding:0 16px;border-radius:18px;font-family:var(--font-display);font-size:14px;font-weight:600}
.crs-scroll{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;padding:8px 16px calc(28px + var(--sab))}
.crs-card{background:var(--cx-card);border:1px solid color-mix(in srgb,var(--cd) 10%,transparent);border-radius:22px;padding:14px;box-shadow:0 10px 26px -18px color-mix(in srgb,var(--cd) 55%,transparent)}
.crs-page .crs-pair{margin:6px 0 0;padding:18px 14px}
.crs-page .crs-sec{display:flex;justify-content:space-between;align-items:baseline;margin:16px 8px 8px;color:var(--ct2)}
.crs-page .crs-sec small{font-family:var(--font-body);font-weight:400;font-size:11.5px}
.crs-page .crs-pair b{color:var(--ct)}
.crs-page .crs-chips button{background:var(--cx-card);border:1px solid color-mix(in srgb,var(--cd) 14%,transparent);color:var(--ct)}
.crs-page .crs-chips button.on{background:var(--cl);color:var(--cd);border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--cd)}
.crs-page .crs-people button{color:var(--ct2)}
.crs-page .crs-people button.on{color:var(--ct)}
.crs-page textarea.character-tx{height:84px;overflow:auto}
.crs-page .crs-hint{color:var(--ct2)}
.crs-page .crs-del{margin-top:18px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .crs-page{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}:root:not([data-theme="light"]) .crs-wash{opacity:.35}:root:not([data-theme="light"]) :is(.crs-card,.crs-page .crs-chips button){border-color:var(--cx-card-line);box-shadow:none}}
:root[data-theme="dark"] .crs-page{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}
:root[data-theme="dark"] .crs-wash{opacity:.35}
:root[data-theme="dark"] :is(.crs-card,.crs-page .crs-chips button){border-color:var(--cx-card-line);box-shadow:none}
.crs-page{left:50%;right:auto;width:100%;max-width:430px;transform:translateX(-50%)} /* stay inside the 430px app frame (body max-width) on desktop */
/* 关联世界书 chips (.character-choice-row, not .character-relation-grid) take the character's colour too */
#character-editor-body.character-editor-accent .character-choice-row .character-choice-chip{background:var(--cx-card);border:1px solid color-mix(in srgb,var(--cd) 14%,transparent);color:var(--ct)}
#character-editor-body.character-editor-accent .character-choice-row .character-choice-chip.active{background:var(--cl);color:var(--cd);border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--cd);font-weight:600}

/* ===== 详情页：文字 / 图标 / 横线 / 进度条 全部跟角色色 (hand-written, keep LAST) =====
   Everything is derived in CSS from the inline accent vars (--cd deep, --ct title, --ct2 secondary, --c1 wash),
   so auto-extracted and hand-picked colours go through the same path, and the dark remap above
   (--ct→--ink, --cd→--c2) still applies. --cx-body / --cx-sub are the tinted body/secondary text:
   the character hue mixed most of the way into the theme's neutral ink, so they read as grey "with a hint". */
.character-ftop,.character-detail-scroll{
  --cx-body:color-mix(in srgb,var(--ct,var(--ink)) 45%,var(--ink));
  --cx-sub:color-mix(in srgb,var(--ct2,var(--ink2)) 70%,var(--ink2));
  --cx-faint:color-mix(in srgb,var(--cd,var(--ink2)) 50%,var(--ink2));
  --cx-line:color-mix(in srgb,var(--cd,var(--ink)) 14%,transparent);
  --cx-icon:var(--cd,var(--pri-deep));
  --cx-icon-bg:color-mix(in srgb,var(--cd,var(--pri)) 11%,var(--cx-card));
  --cx-track:color-mix(in srgb,var(--cd,var(--pri)) 12%,transparent);
  --cx-tint:color-mix(in srgb,var(--cd,var(--pri)) 8%,transparent);
  color:var(--cx-body)}
/* hero */
.character-detail-scroll .character-hero p{color:var(--cx-body)}
/* quick actions: icons in the character's deep colour, labels secondary, the active one gets the title colour */
.character-detail-scroll .character-quick-btn{color:var(--cx-sub)}
.character-detail-scroll .character-quick-main{color:var(--ct,var(--ink))}
.character-detail-scroll .character-quick-icon{color:var(--cx-icon)}
.character-detail-scroll .character-quick-btn.disabled .character-quick-icon{color:color-mix(in srgb,var(--cx-icon) 45%,transparent)}
/* card chrome: section titles already use --ct; the rest of the text, links, notes and separators follow */
.character-detail-scroll .character-ct>small,.character-detail-scroll .character-section-title span,
.character-detail-scroll .character-ct-more,.character-detail-scroll .character-profile-empty,
.character-detail-scroll .character-section-note,.character-detail-scroll .character-rel-flat,.character-detail-scroll .character-rel-missing-why{color:var(--cx-sub)}
.character-detail-scroll .character-section-title h3,.character-detail-scroll .character-rh>b{color:var(--ct,var(--ink))}
.character-detail-scroll .character-title-link,.character-detail-scroll .character-section-link{color:var(--cx-icon)}
.character-detail-scroll .character-section-link,.character-detail-scroll .character-section-note{border-top-color:var(--cx-line)}
/* 我们的关系: timeline, labels and the two cells */
.character-detail-scroll .character-steps em{background:color-mix(in srgb,var(--cd,var(--pri)) 22%,transparent)}
.character-detail-scroll .character-steps em.on{background:var(--cx-icon)}
.character-detail-scroll .character-steps i{background:color-mix(in srgb,var(--cd,var(--pri)) 30%,var(--cx-card));border-color:transparent}
.character-detail-scroll .character-steps i.on{background:var(--cx-icon)}
.character-detail-scroll .character-steps i.now{background:var(--cx-card);border-color:var(--cx-icon)}
.character-detail-scroll .character-sl{color:var(--cx-sub)}
.character-detail-scroll .character-sl .now{color:var(--ct,var(--ink))}
.character-detail-scroll .character-rel-big>span{color:var(--cx-sub)}
.character-detail-scroll .character-rel-cell{background:var(--cx-tint);color:var(--cx-sub)}
.character-detail-scroll .character-rel-cell b{color:var(--ct,var(--ink))}
/* 关于 TA tags, 人物设定 rows, 和 TA 有关的 rows */
.character-detail-scroll .character-kv-tags span,.character-detail-scroll .character-about-tags span{background:var(--cx-tint);color:var(--cx-body)}
.character-detail-scroll .character-kv-tags em{color:var(--cx-sub)}
.character-detail-scroll .character-kv b{color:var(--cx-sub)}
.character-detail-scroll .character-kv span{color:var(--cx-body)}
.character-detail-scroll .character-row{color:var(--cx-body);border-bottom-color:var(--cx-line)}
.character-detail-scroll .character-row-icon{background:var(--cx-icon-bg);color:var(--cx-icon)}
.character-detail-scroll .character-row-main b{color:var(--ct,var(--ink))}
.character-detail-scroll .character-row-main span{color:var(--cx-sub)}
.character-detail-scroll .character-row-value,.character-detail-scroll .character-row-link>svg{color:var(--cx-sub)}
.character-detail-scroll .character-persona-bar{background:var(--cx-track)}
.character-detail-scroll .character-persona-bar i{background:var(--cx-icon)}
.character-detail-scroll .character-archive-count{color:var(--cx-body)}
.character-detail-scroll .character-archive-count em{color:var(--cx-icon)}
.character-detail-scroll .character-archive-list{border-bottom-color:var(--cx-line)}
.character-detail-scroll .character-archive-item{background:var(--cx-tint);color:var(--cx-body)}
.character-detail-scroll .character-archive-item span,.character-detail-scroll .character-archive-item svg{color:var(--cx-sub)}
/* TA 认识的人 */
.character-detail-scroll .character-related-people>div{color:var(--cx-sub)}
.character-detail-scroll .character-related-add-circle{border-color:color-mix(in srgb,var(--cd,var(--ink2)) 35%,transparent);color:var(--cx-faint)}
/* top bar glass buttons pick up the icon colour too */
.character-detail-scroll .character-rb,.character-ftop .character-rb{color:var(--ct,var(--ink))}
.character-ftop-title{color:var(--ct,var(--ink))}
.character-detail-scroll .character-quick-main .character-quick-icon{color:var(--on-pri-deep,#fff)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-detail-scroll .character-quick-main .character-quick-icon{color:#16181e}}
:root[data-theme="dark"] .character-detail-scroll .character-quick-main .character-quick-icon{color:#16181e}

/* ===== 角色 App 第 3 步：新建角色页 / 导入页 换成编辑页的语言 (hand-written, keep LAST) =====
   The new-character page now runs through .character-editor-accent too (graphite as the default
   accent until a colour is picked), so most of it is already styled above; this block handles the
   pieces that only exist on the new page (保存草稿 pill, 先在遇见认识 card, 创建 TA footer), the two
   import pages (.character-import-page, theme-coloured since there is no character yet) and the
   home empty state. */

/* ---- 新建角色：顶栏 + 底部 ---- */
.character-editor-new .character-top{height:56px;padding:4px 16px 0}
.character-editor-new .character-top .app-back{width:38px;height:38px;border-radius:50%;background:transparent;color:var(--ct,var(--ink));display:flex;align-items:center;justify-content:center;padding:0;margin:0}
.character-editor-new .character-top .app-back svg{width:20px;height:20px}
.character-editor-new .character-save-pill{height:36px;border-radius:18px;font-family:var(--font-display);font-size:13.5px;padding:0 16px}
.character-editor-new .character-form-scroll{padding-bottom:16px}
/* 先在遇见认识: same white card + accent shadow as the editor cards, switch in the character colour */
.character-editor-new .character-step4-card{margin:4px 0 0}
.character-editor-new .character-step4-card .character-permission-row{padding:2px 0}
.character-editor-new .character-step4-card .character-permission-row em{color:var(--ct2)}
.character-editor-new .character-switch{background:var(--cl);box-shadow:none;border:1px solid color-mix(in srgb,var(--cd) 12%,#fff)}
.character-editor-new .character-switch i{background:#fff;box-shadow:0 2px 6px color-mix(in srgb,var(--cd) 35%,transparent)}
.character-editor-new .character-switch.active{background:var(--cd)}
/* 创建 TA: glass footer that fades up from the page, one white 50px pill in the character colour */
.character-editor-new .character-form-actions{position:relative;z-index:2;border-top:none;background:linear-gradient(180deg,transparent,var(--cx-page,#fbfafc) 38%);padding:18px 16px calc(14px + var(--sab))}
.character-editor-new .character-form-actions .character-create-btn{height:50px;min-height:50px;border-radius:25px;background:#fff;color:var(--cd);font-family:var(--font-display);font-size:16px;font-weight:600;border:1px solid color-mix(in srgb,var(--cd) 12%,#fff);box-shadow:0 14px 28px -14px color-mix(in srgb,var(--cd) 70%,transparent)}
.character-editor-new .character-form-actions .character-create-btn:disabled{color:var(--ct2);background:#fff;opacity:.7;box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-editor-new :is(.character-form-actions .character-create-btn,.character-switch i){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}}
:root[data-theme="dark"] .character-editor-new :is(.character-form-actions .character-create-btn,.character-switch i){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}

/* ---- 导入页（JSON / 角色卡 / 预览）：和编辑页同一套版式，颜色跟主题 ---- */
.character-import-page{position:relative;background:var(--cx-page,#fbfafc);
  --cd:var(--pri-deep);--ct:var(--ink);--ct2:var(--ink2);--c1:var(--pri-pale);--cl:color-mix(in srgb,var(--pri) 9%,#fff)}
.character-import-page .character-editor-wash{display:block;position:absolute;left:0;right:0;top:0;height:240px;background:radial-gradient(90% 100% at 50% 0%,color-mix(in srgb,var(--pri-pale) 85%,transparent),transparent 75%);pointer-events:none;z-index:0}
.character-import-page .character-top,.character-import-page .character-form-scroll,.character-import-page .character-form-actions{position:relative;z-index:1}
.character-import-page .character-top{height:56px;padding:4px 16px 0;background:transparent;border-bottom:none}
.character-import-page .character-top .app-title{flex:1;font-family:var(--font-display);font-size:17px;font-weight:600;text-align:center;color:var(--ink)}
.character-import-page .character-rb{background:var(--cx-rb,rgba(255,255,255,.85));border-color:var(--cx-rb-line,#fff);color:var(--ink)}
.character-import-top-spacer{width:38px;flex-shrink:0}
.character-import-page .character-save-pill{height:36px;border-radius:18px;font-family:var(--font-display);font-size:13.5px;padding:0 16px}
.character-import-page .character-save-pill:disabled{color:var(--ink2)!important;opacity:.55;box-shadow:none!important}
.character-import-page .character-form-scroll{padding:4px 16px calc(18px + var(--sab))}
/* cards: white with a soft theme-coloured shadow, like the editor's */
.character-import-page .character-form-card{border-radius:22px;background:var(--cx-card,#fff);border:1px solid color-mix(in srgb,var(--pri-deep) 10%,#fff);box-shadow:0 10px 26px -18px color-mix(in srgb,var(--pri-deep) 55%,transparent);padding:16px;margin-bottom:14px}
.character-import-page .character-form-card h3{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:8px}
.character-import-page .character-card-hint{color:var(--ink2);font-size:12.5px;line-height:1.55;margin:10px 2px 0}
.character-import-page .character-field span{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink2);margin:0 4px 1px}
.character-import-page .character-field input,.character-import-page .character-field textarea,.character-import-page .character-import-box textarea,.character-import-page .character-advanced-card textarea{border:1px solid var(--character-field-line);border-radius:16px;background:var(--character-field-bg);font-family:var(--font-display);font-size:14.5px;line-height:1.75;color:var(--ink);padding:11px 14px;resize:none}
.character-import-page .character-field input:focus,.character-import-page .character-field textarea:focus,.character-import-page .character-import-box textarea:focus{outline:none;background:var(--character-field-focus-bg)}
/* JSON import */
.character-import-page .character-import-box{padding-top:8px}
.character-import-page .character-import-box .character-f{margin-top:4px}
.character-import-page .character-import-box textarea{width:100%;min-height:200px;display:block;box-sizing:border-box}
.character-import-page .character-preview-card{margin-top:14px;border-radius:22px;background:var(--cx-card,#fff);border:1px solid color-mix(in srgb,var(--pri-deep) 10%,#fff);box-shadow:0 10px 26px -18px color-mix(in srgb,var(--pri-deep) 55%,transparent);padding:16px}
.character-import-page .character-preview-card h3{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:4px}
.character-import-page .character-preview-card p{color:var(--ink2);font-size:13px;line-height:1.5}
/* card import: the dashed drop box from the mockup */
.character-import-page .character-import-card{padding:10px}
.character-import-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:190px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--pri-deep) 35%,transparent);background:color-mix(in srgb,var(--pri) 5%,transparent);padding:22px 20px;text-align:center;cursor:pointer;height:auto;box-shadow:none;color:var(--ink)}
.character-import-drop:active{background:color-mix(in srgb,var(--pri) 10%,transparent)}
.character-import-drop-ic{width:52px;height:52px;border-radius:50%;background:var(--cl);color:var(--pri-deep);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.character-import-drop-ic svg{width:22px;height:22px}
.character-import-drop b{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink)}
.character-import-drop small{display:block;font-size:12.5px;line-height:1.55;color:var(--ink2);max-width:260px}
.character-import-page .character-import-card .character-card-hint{margin:12px 8px 4px}
.character-import-page .character-card-error{margin:10px 8px 0;color:var(--coral-text,#b5605c);font-size:13px;line-height:1.5}
.character-import-page .character-soft-action{margin:12px 8px 4px;height:40px;border-radius:14px;background:var(--cl);color:var(--pri-deep);box-shadow:none;font-family:var(--font-display);font-weight:600}
/* preview: avatar block, checks, footer */
.character-import-page .character-card-import-avatar img{border-radius:28%}
.character-import-page .character-check{color:var(--ink2);font-weight:600}
.character-import-page .character-form-actions{border-top:none;background:linear-gradient(180deg,transparent,var(--cx-page,#fbfafc) 38%);padding:18px 16px calc(14px + var(--sab));gap:10px}
.character-import-page .character-form-actions button{height:50px;min-height:50px;border-radius:25px;font-family:var(--font-display);font-size:15.5px;font-weight:600}
.character-import-page .character-form-actions .primary{flex:1;background:#fff;color:var(--pri-deep);border:1px solid color-mix(in srgb,var(--pri-deep) 12%,#fff);box-shadow:0 14px 28px -14px color-mix(in srgb,var(--pri-deep) 70%,transparent)}
.character-import-page .character-form-actions .primary:disabled{color:var(--ink2);opacity:.6;box-shadow:none}
.character-import-page .character-form-actions .ghost{background:var(--cl);color:var(--ink2);padding:0 20px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-import-page{--cl:rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .character-import-page :is(.character-form-card,.character-preview-card,.character-form-actions .primary){background:var(--cx-card);border-color:var(--cx-card-line);box-shadow:none}
  :root:not([data-theme="light"]) .character-import-page .character-editor-wash{opacity:.35}}
:root[data-theme="dark"] .character-import-page{--cl:rgba(255,255,255,.08)}
:root[data-theme="dark"] .character-import-page :is(.character-form-card,.character-preview-card,.character-form-actions .primary){background:var(--cx-card);border-color:var(--cx-card-line);box-shadow:none}
:root[data-theme="dark"] .character-import-page .character-editor-wash{opacity:.35}

/* ---- 首页空状态：玻璃卡 + 两个白色胶囊，不要实心深色块 ---- */
.character-empty{background:var(--cx-card,#fff);border:1px solid var(--cx-card-line);box-shadow:0 12px 28px -20px color-mix(in srgb,var(--pri-deep) 60%,transparent);border-radius:22px;padding:30px 18px 26px}
.character-empty svg{opacity:.55}
.character-empty h2{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--ink)}
.character-empty p{color:var(--ink2)}
.character-empty-btns button{height:42px;border-radius:21px;background:var(--cx-card,#fff);color:var(--pri-deep);font-family:var(--font-display);font-size:14px;font-weight:600;padding:0 22px;border:1px solid color-mix(in srgb,var(--pri-deep) 14%,#fff);box-shadow:0 8px 18px -12px color-mix(in srgb,var(--pri-deep) 60%,transparent)}
.character-empty-btns button.ghost{background:color-mix(in srgb,var(--pri) 8%,transparent);color:var(--ink2);border-color:transparent;box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-empty-btns button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12);box-shadow:none}}
:root[data-theme="dark"] .character-empty-btns button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12);box-shadow:none}
/* fields inside white cards need a visible box: a faint theme tint instead of the white-on-white glass */
.character-import-page .character-form-card :is(.character-field input,.character-field textarea){background:color-mix(in srgb,var(--pri) 5%,var(--cx-card,#fff));border-color:color-mix(in srgb,var(--pri-deep) 12%,transparent)}
.character-import-page .character-field{gap:4px;margin-bottom:14px}
.character-import-page .character-card-compat,.character-import-page .character-form-card .character-soft-meta span{border-radius:14px}
.character-import-drop small{max-width:290px}

/* ===== 角色首页 fixes (hand-written, keep LAST) =====
   1) iPhone (Safari/WebKit): a child with filter:blur (.character-card-blob) is not clipped by an overflow:hidden +
      border-radius parent, so each card's left edge showed square corners. clip-path clips it everywhere; the card has
      no outer shadow, so nothing else is cut. Same for the filter chips: the active chip's shadow was cut into a square
      by the scrolling row, so the row gets room for it.
   2) The ··· menu, the sort menu, 新角色 and confirm/date pop-ups used the app-wide blue-grey surface; the page itself is
      neutral white - they follow the page now. */
.character-card{clip-path:inset(0 round 22px);-webkit-clip-path:inset(0 round 22px)}
.character-filter-tabs{padding:4px 4px 12px;margin:-4px -4px -8px}
.sheet.character-dialog{background:rgba(255,255,255,.96);border:1px solid #fff;box-shadow:0 24px 50px -24px rgba(25,30,40,.45)}
.character-dialog .character-sheet-action{border-bottom-color:rgba(30,36,46,.07)}
.character-dialog .character-sheet-action svg{color:var(--ink2)}
.character-dialog-close{background:rgba(30,36,46,.05)}
.character-sort-menu{background:#fff;border-color:rgba(30,36,46,.06);box-shadow:0 18px 40px -18px rgba(25,30,40,.35),0 1px 2px rgba(25,30,40,.05)}
.character-sort-menu [aria-selected="true"],.character-sort-menu .active,.character-sort-menu button.on{background:rgba(30,36,46,.05);color:var(--ink);box-shadow:none}
.character-fab{background:var(--surface);border:1px solid var(--ctl-edge);color:var(--ink);box-shadow:0 14px 30px -14px rgba(25,30,40,.4),0 1px 2px rgba(25,30,40,.05)}
.character-fab svg{color:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet.character-dialog,:root:not([data-theme="light"]) .character-sort-menu,:root:not([data-theme="light"]) .character-fab{background:#23252c;border-color:rgba(255,255,255,.1);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
:root:not([data-theme="light"]) .character-dialog .character-sheet-action{border-bottom-color:rgba(255,255,255,.07)}
:root:not([data-theme="light"]) .character-sort-menu [aria-selected="true"],:root:not([data-theme="light"]) .character-sort-menu .active{background:rgba(255,255,255,.07)}}
:root[data-theme="dark"] .sheet.character-dialog,:root[data-theme="dark"] .character-sort-menu,:root[data-theme="dark"] .character-fab{background:#23252c;border-color:rgba(255,255,255,.1);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
:root[data-theme="dark"] .character-dialog .character-sheet-action{border-bottom-color:rgba(255,255,255,.07)}
:root[data-theme="dark"] .character-sort-menu [aria-selected="true"],:root[data-theme="dark"] .character-sort-menu .active{background:rgba(255,255,255,.07)}
/* confirm + date pop-ups opened from 角色 (they live outside #v-character): neutral like the page */
:root:has(#v-character.active) :is(.xl-picker,.app-confirm-ov){--pri:#8f97a2;--pri-deep:#3d4652;--pri-pale:#eff1f4;--accent-text:#3d4652;--on-pri:#fff;--surface:#fff;--border:rgba(30,36,46,.08)}
/* ...and their dark twin (the light one above used to apply in dark too: a white dialog with light text) */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):has(#v-character.active) :is(.xl-picker,.app-confirm-ov){--pri:#9aa3ae;--pri-deep:#c9d0d8;--pri-pale:rgba(154,163,174,.18);--accent-text:#c9d0d8;--on-pri:#16181e;--surface:#262c33;--border:rgba(255,255,255,.1)}}
:root[data-theme="dark"]:has(#v-character.active) :is(.xl-picker,.app-confirm-ov){--pri:#9aa3ae;--pri-deep:#c9d0d8;--pri-pale:rgba(154,163,174,.18);--accent-text:#c9d0d8;--on-pri:#16181e;--surface:#262c33;--border:rgba(255,255,255,.1)}
.character-sort-option:focus-visible{outline:none;box-shadow:none;background:rgba(30,36,46,.05)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-sort-option:focus-visible{background:rgba(255,255,255,.07)}}
:root[data-theme="dark"] .character-sort-option:focus-visible{background:rgba(255,255,255,.07)}
/* the menu focuses its checked item on open; the app-wide focus ring (index.html, !important) drew a box around it.
   Inside this menu focus shows as the soft grey row instead - still visible for keyboard users. */
#v-character .character-sort-menu .character-sort-option:focus-visible{box-shadow:none!important;background:rgba(30,36,46,.06)}

/* ── 关系：身份和进度分开（界面）── 草图 ①②③④，沿用角色 App 现在的中性灰白 */
/* ① 关系卡：离下一步 + 想和 TA 更近一步 */
.character-rel-next{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11.5px;color:var(--ink2)}
.character-rel-next>i{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.character-rel-next>i>b{display:block;height:100%;border-radius:2px;background:var(--pri-deep)}
.character-detail-scroll .character-rel-next{color:var(--cx-sub)}
.character-detail-scroll .character-rel-next>i{background:color-mix(in srgb,var(--cd,var(--pri)) 18%,transparent)}
.character-detail-scroll .character-rel-next>i>b{background:var(--cx-icon)}
.character-rel-invite-card{width:100%;margin-top:14px;padding:12px 14px;border-radius:18px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);background:var(--surface);font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;box-shadow:0 6px 14px -10px color-mix(in srgb,var(--ink) 40%,transparent)}
.character-rel-invite-card b{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ink)}
.character-rel-invite-card span{font-size:11.5px;color:var(--ink2)}
.character-rel-invite-card:disabled{opacity:.55;cursor:default;box-shadow:none}
.character-detail-scroll .character-rel-invite-card{background:var(--cx-card);border-color:color-mix(in srgb,var(--cd,var(--ink)) 14%,transparent)}
.character-detail-scroll .character-rel-invite-card b{color:var(--ct,var(--ink))}
.character-detail-scroll .character-rel-invite-card span{color:var(--cx-sub)}
/* ② TA 是你的… */
.character-rel-grid.character-rel-grid-3{grid-template-columns:repeat(3,1fr)}
.character-rel-sub.character-rel-sub-tight{margin:10px 0 0}
.character-rel-title-row{margin-top:14px}
.character-rel-title-row>span{display:block;font-size:12px;color:var(--ink2);margin-bottom:7px}
.character-rel-title-row>div{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.character-rel-hint{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:11px 13px;border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,transparent);font-size:12px;line-height:1.55;color:var(--ink2)}
.character-rel-hint svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.character-rel-hint b{color:var(--ink);font-weight:600}
.character-rel-hint>span{flex:1}
.character-rel-hint-link{border:none;background:transparent;color:var(--accent-text);font-family:inherit;font-size:12px;font-weight:700;padding:0;cursor:pointer}
/* ③ 新建角色 · 选起点 */
.character-start-count{margin-left:auto;margin-right:8px;font-size:12px;color:var(--ct2,var(--ink2))}
.character-start-bar{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:2px 2px 18px}
.character-start-bar i{height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.character-start-bar i.on{background:var(--cd,var(--pri-deep))}
.character-start-q h2{margin:0 0 6px;font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--ct,var(--ink))}
.character-start-q p{margin:0 0 14px;font-size:12.5px;line-height:1.55;color:var(--ct2,var(--ink2))}
.character-start-note{margin:0 0 10px;font-size:12px;color:var(--ct2,var(--ink2))}
.character-start-list{display:flex;flex-direction:column;gap:10px}
.character-start-list.is-off{opacity:.45}
.character-start-opt{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:18px;border:1.5px solid transparent;background:var(--cx-card,var(--surface));font-family:inherit;text-align:left;cursor:pointer;box-shadow:0 4px 12px -10px color-mix(in srgb,var(--ink) 50%,transparent)}
.character-start-opt.on{border-color:var(--cd,var(--pri-deep))}
.character-start-opt:disabled{cursor:default}
.character-start-num{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11.5px;color:var(--ct2,var(--ink2));border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.character-start-opt.on .character-start-num{background:var(--cd,var(--pri-deep));border-color:transparent;color:#fff}
.character-start-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.character-start-main b{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ct,var(--ink))}
.character-start-main small{font-size:11.5px;color:var(--ct2,var(--ink2))}
.character-start-since{margin-top:12px}
.character-start-since small{display:block;margin-top:4px;font-size:11px;color:var(--ct2,var(--ink2))}
.character-start-idlabel{margin:20px 0 8px;font-size:12px;color:var(--ct2,var(--ink2))}
.character-start-ids{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.character-start-id{border:none;border-radius:999px;padding:7px 14px;background:var(--cx-card,var(--surface));color:var(--ct2,var(--ink2));font-family:inherit;font-size:12.5px;cursor:pointer}
.character-start-id.on{background:color-mix(in srgb,var(--cd,var(--pri-deep)) 14%,var(--cx-card,var(--surface)));color:var(--ct,var(--ink));font-weight:600}
.character-start-actions{gap:10px}
.character-editor-new .character-start-actions .ghost{height:50px;min-height:50px;border-radius:25px;padding:0 26px;background:var(--cx-card,#fff);color:var(--ct2,var(--ink2));font-family:var(--font-display);font-size:15px;border:1px solid color-mix(in srgb,var(--cd) 10%,transparent)}
.character-editor-new .character-start-actions .character-create-btn{background:var(--cd,var(--pri-deep));color:#fff;border-color:transparent}
/* 关系与设置：身份入口 / 手动修正 */
.character-setting-row.character-setting-link{width:100%;border:none;background:transparent;font-family:inherit;text-align:left;cursor:pointer}
.character-setting-link>svg:last-child{width:16px;height:16px;color:var(--ct2,var(--ink2));flex-shrink:0}
/* 现实地图第三步 3a: 生活栏 (characterLifeSetupHtml) */
.character-life-change{border:none;background:transparent;color:var(--accent-text);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 0}
.character-life-search{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.character-life-search-status,.character-life-search-credit{font-size:12px;color:var(--ink2);padding:6px 2px}
.character-life-city-result{display:flex;flex-direction:column;gap:2px;width:100%;border:none;border-bottom:1px solid var(--border);background:transparent;text-align:left;padding:9px 2px;cursor:pointer;font-family:inherit}
.character-life-city-result b{font-size:13.5px;color:var(--ink)}
.character-life-city-result span{font-size:11.5px;color:var(--ink2)}
.character-life-empty{margin:8px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.5}
.character-life-home-list{display:flex;flex-direction:column;margin-top:4px}
.character-life-home-row{display:flex;flex-direction:column;gap:2px;width:100%;border:none;border-bottom:1px solid var(--border);background:transparent;text-align:left;padding:9px 2px;cursor:pointer;font-family:inherit}
.character-life-home-row b{font-size:13.5px;color:var(--ink)}
.character-life-home-row span{font-size:11.5px;color:var(--ink2)}
.character-life-home-row.on b{color:var(--accent-text)}
.character-life-history{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.character-rel-fix{margin-top:12px}
.character-rel-fix .character-rel-grid{grid-template-columns:repeat(5,1fr);margin-top:8px}
.character-rel-fix .character-rel-chip{font-size:12px;min-height:34px;padding:0 2px}
/* ④ 列表顶部：成为恋人提示 */
.character-lover-notice{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:14px 16px;border-radius:20px;border:none;font-family:inherit;text-align:left;cursor:pointer}
.character-lover-notice-dot{width:38px;height:38px;border-radius:12px;flex-shrink:0}
.character-lover-notice-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.character-lover-notice-main b{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ink)}
.character-lover-notice-main small{font-size:12px;color:var(--ink2)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.character-rel-invite-card,.character-start-opt,.character-start-id){background:rgba(255,255,255,.07)}}

/* focus polish (hand-written, keep LAST): index.html's global input:focus rule draws a rectangular
   border+box-shadow directly on the <input>, which shows up as a square poking out inside this rounded
   search pill. Suppress it on the input itself and move the focus feedback to the pill via
   :focus-within instead (character has no own accent var, so this uses the global --pri). */
.character-search input{-webkit-appearance:none;appearance:none}
.character-search input:focus{outline:none!important;border-color:transparent!important;box-shadow:none!important}
:root[data-theme="dark"] :is(.character-rel-invite-card,.character-start-opt,.character-start-id){background:rgba(255,255,255,.07)}

/* 好感度第二版: 想念 / 了解 / 共同经历 short bars under the relationship progress (no numbers) + 边界感 note in the editor */
.character-rel-derived{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;align-items:center;gap:6px 8px;margin-top:10px;font-size:11px;color:var(--ink2)}
.character-rel-derived>i{height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;min-width:20px}
.character-rel-derived>i>b{display:block;height:100%;border-radius:2px;background:var(--pri-deep)}
.character-detail-scroll .character-rel-derived{color:var(--cx-sub)}
.character-detail-scroll .character-rel-derived>i{background:color-mix(in srgb,var(--cd,var(--pri)) 18%,transparent)}
#character-editor-body .pr .m em{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--ink2);margin-top:2px}

/* ===================================================================================================
   人设编辑器改版 (PR 2, _handoff/character-app previews/preview-editor.html). Everything uses the character
   tokens (--cd deep accent, --ct / --ct2 text, --cl pale accent, --cx-card / --character-field-* surfaces), which
   the dark rules above already remap for #character-editor-body; .character-subpage gets the same remap below.
   Wherever text sits on the accent colour itself, a dark rule switches it to the dark ink (as .crs-save does).
   =================================================================================================== */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-subpage{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}}
:root[data-theme="dark"] .character-subpage{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}
.character-subpage-gap{width:42px;flex-shrink:0}
/* 「···」 menu: unfolds under its button */
.character-pop{position:fixed;z-index:160;min-width:168px;padding:6px;border-radius:18px;background:var(--cx-card);border:1px solid var(--cx-card-line);box-shadow:0 18px 40px -16px color-mix(in srgb,var(--ink) 45%,transparent);animation:characterPopIn .22s cubic-bezier(.34,1.4,.64,1);transform-origin:top right}
.character-pop button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:none;border-radius:12px;background:transparent;font-family:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.character-pop button svg{width:17px;height:17px;flex-shrink:0}
.character-pop button:disabled{opacity:.45;cursor:default}
@keyframes characterPopIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-pop{background:color-mix(in srgb,var(--surface) 94%,transparent)}}
:root[data-theme="dark"] .character-pop{background:color-mix(in srgb,var(--surface) 94%,transparent)}
/* a page change slides in (motion.css moSubIn); a re-render of the same page never replays it */
.character-page-in{animation:moSubIn var(--mo-slow,.42s) var(--mo-ease-out,cubic-bezier(.22,1,.36,1)) backwards}
@media (prefers-reduced-motion:reduce){.character-page-in,.character-pop{animation:none}}
/* 保存方式 */
#character-editor-body .character-save-btn.is-dirty{background:var(--cd)!important;color:#fff!important;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--cd) 70%,transparent)!important}
#character-editor-body .character-save-btn.is-clean{color:var(--ct2)!important;box-shadow:none!important}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #character-editor-body .character-save-btn.is-dirty{color:#16181e!important}}
:root[data-theme="dark"] #character-editor-body .character-save-btn.is-dirty{color:#16181e!important}
.character-draftline{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;margin:-6px 0 6px;font-size:11.5px;color:var(--ct2)}
.character-draftline[hidden]{display:none}
.character-draftline i{width:6px;height:6px;border-radius:50%;background:var(--coral)}
/* 人设 index rows: n / m + bar */
.character-it-t{display:flex;align-items:center;gap:8px}
.character-it-t b{flex:1;min-width:0}
.character-it-t>span{font-size:12px;color:var(--ct2);font-variant-numeric:tabular-nums}
.character-it-t>svg{width:14px;height:14px;color:var(--ct2);flex-shrink:0}
.character-it-new{font-style:normal;font-size:10px;padding:1px 7px;border-radius:8px;background:var(--cd);color:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-it-new{color:#16181e}}
:root[data-theme="dark"] .character-it-new{color:#16181e}
.character-bar{display:block;height:5px;margin-top:7px;border-radius:3px;background:var(--cl);overflow:hidden}
.character-bar i{display:block;height:100%;border-radius:3px;background:var(--cd);transition:width .5s cubic-bezier(.34,1.3,.64,1)}
.character-tok-warn{display:block;margin-top:4px;font-weight:600;color:var(--coral-text)}
.character-ref-row{display:flex;align-items:center;gap:10px;width:100%;padding:12px 0;border:none;border-top:1px solid var(--character-glass-line);background:transparent;font-family:inherit;color:inherit;text-align:left;cursor:pointer}
.character-list>.character-ref-row:first-child,.character-color-more>.character-ref-row:first-child{border-top:none}
.character-ref-row>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.character-ref-row b{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ct)}
.character-ref-row small{font-size:12px;color:var(--ct2)}
.character-ref-row em{font-style:normal;display:flex;align-items:center;font-size:13px;color:var(--cd)}
.character-ref-row em svg{width:15px;height:15px}
.character-ro-pre{margin:0 0 6px;padding:12px 14px;border-radius:16px;background:var(--cx-card);border:1px solid var(--cx-card-line);font-family:inherit;font-size:12.5px;line-height:1.75;color:var(--ct);white-space:pre-wrap;overflow-wrap:anywhere}
/* AI 将这样理解 */
.character-aiview{margin-top:18px;padding:14px 16px;background:var(--cl)!important;border-color:transparent!important;box-shadow:none!important}
.character-aiview-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.character-aiview-h b{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--ct)}
.character-aiview-h small{font-size:11.5px;color:var(--ct2)}
.character-aiview p{margin:0;font-size:12.5px;line-height:1.8;color:var(--ct);overflow-wrap:anywhere}
.character-muted{color:var(--ct2)}
/* options / chips */
.character-opts{display:flex;flex-wrap:wrap;gap:8px}
.character-opt{min-height:36px;padding:0 15px;border:1px solid var(--character-field-line);border-radius:18px;background:var(--cx-card);font-family:inherit;font-size:13.5px;color:var(--ct);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.character-opts.sm .character-opt{min-height:32px;padding:0 12px;font-size:13px}
.character-opt[aria-pressed="true"]{background:var(--cd);border-color:transparent;color:#fff;box-shadow:0 6px 14px -8px color-mix(in srgb,var(--cd) 80%,transparent)}
.character-opt:disabled{opacity:.45;cursor:default}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-opt[aria-pressed="true"]{color:#16181e}}
:root[data-theme="dark"] .character-opt[aria-pressed="true"]{color:#16181e}
.character-chipbox{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-radius:20px;background:var(--cx-card);border:1px solid var(--cx-card-line)}
.character-chipbox .character-opt{background:var(--cl);border-color:transparent}
.character-chipbox .character-opt[aria-pressed="true"]{background:var(--cd)}
.character-chip{display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:0 6px 0 13px;border:none;border-radius:17px;background:var(--cl);font-family:inherit;font-size:13.5px;color:var(--ct);cursor:pointer}
.character-chip i{font-style:normal;width:20px;text-align:center;color:var(--ct2)}
.character-chip small{font-size:11px;color:var(--ct2)}
.character-chipbox[hidden]{display:none}
.character-addchip{display:inline-flex;align-items:center;gap:6px;min-height:34px;flex:1 1 120px;max-width:100%;padding:0 12px;border-radius:17px;border:1.5px dashed color-mix(in srgb,var(--cd) 35%,transparent);color:var(--cd);box-sizing:border-box}
.character-addchip svg{width:14px;height:14px;flex-shrink:0}
.character-addchip input{flex:1;min-width:0;border:none;background:transparent;outline:none;font:inherit;font-size:13.5px;color:var(--ct)}
.character-addchip:focus-within{border-style:solid}
.character-peek-tag{display:inline-flex!important;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;background:var(--cl);color:var(--cd)!important;font-size:11px!important}
.character-peek-tag svg{width:12px;height:12px}
.character-line{flex:1;min-width:0;border:none;background:transparent;outline:none;padding:9px 0;font-family:var(--font-display);font-size:14.5px;color:var(--ct)}
.character-soft-fld{background:var(--cl)!important;border-color:transparent!important;box-shadow:none!important}
.character-soft-tx{background:var(--cl)!important;border-color:transparent!important;box-shadow:none!important;min-height:44px;font-size:14px}
.character-stages,.character-rules,.character-contra,.character-goals,.character-plist,.character-dims{padding:6px 16px}
.character-group{display:flex;flex-direction:column;gap:9px;padding:14px 16px}
.character-own-lab{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ct2)}
.character-own-lab small{font-weight:400}
.character-group .character-chipbox,.character-own .character-chipbox{padding:0;background:none;border:none}
/* 性格倾向 */
.character-dim{display:grid;grid-template-columns:54px 1fr 66px;align-items:center;gap:10px;padding:5px 0}
.character-dim>span{font-size:13px;color:var(--ct2);transition:color .2s}
.character-dim>span:last-child{text-align:right}
.character-dim>span.on{color:var(--ct);font-weight:700}
.character-dim input{width:100%;accent-color:var(--cd)}
/* 称呼 by stage */
.character-stage-row{display:flex;align-items:center;gap:12px;margin:0;border-top:1px solid var(--character-glass-line)}
.character-stage-row:first-child{border-top:none}
.character-stage-row>span{flex:0 0 52px;font-size:13px;color:var(--ct2)}
.character-msgprev{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:16px;background:var(--cl)}
.character-msgprev small{font-size:11px;color:var(--ct2)}
.character-mp{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.character-mp span{max-width:86%;padding:6px 12px;border-radius:16px 16px 16px 5px;background:var(--cx-card);font-size:13.5px;line-height:1.6;color:var(--ct)}
/* 示例对话 / 开场白 bubbles */
.character-convo,.character-secret,.character-react{display:flex;flex-direction:column;gap:8px;padding:12px 14px;margin-bottom:10px}
.character-convo-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ct2)}
.character-bub{display:flex;flex-direction:column;gap:4px;max-width:88%}
.character-bub small{font-size:11px;color:var(--ct2);padding:0 6px}
.character-bub.me{align-self:flex-end;align-items:flex-end;width:88%}
.character-bub textarea{display:block;width:100%;box-sizing:border-box;border:none;resize:none;overflow:hidden;padding:8px 14px;border-radius:18px;font-family:inherit;font-size:14px;line-height:1.6;color:var(--ct);outline:none}
.character-bub.me textarea{background:var(--cl);border-bottom-right-radius:6px}
.character-bub.him textarea{background:var(--cx-card);border:1px solid var(--character-field-line);border-bottom-left-radius:6px}
.character-hb{display:flex;align-items:center;gap:4px;width:100%}
.character-hb textarea{flex:1}
.character-x{flex-shrink:0;width:28px;height:28px;border:none;border-radius:50%;background:color-mix(in srgb,var(--ct) 6%,transparent);color:var(--ct2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.character-x svg{width:13px;height:13px}
.character-x.sm{width:22px;height:22px;background:transparent}
.character-more-msg,.character-addline,.character-linkbtn{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;min-height:34px;padding:0 6px;border:none;background:none;font-family:inherit;font-size:13px;color:var(--cd);cursor:pointer}
.character-more-msg svg,.character-addline svg,.character-addbig svg,.character-gen svg,.character-sug svg{width:13px;height:13px;flex-shrink:0}
.character-linkbtn{align-self:flex-end;color:var(--ct2);font-size:12px}
.character-addbig{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--cd) 30%,transparent);background:transparent;font-family:inherit;font-size:14px;color:var(--cd);cursor:pointer;margin-bottom:10px}
/* 底线 */
.character-rule{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--character-glass-line)}
.character-rn{width:22px;height:22px;border-radius:50%;background:var(--cl);color:var(--cd);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-variant-numeric:tabular-nums}
.character-sug{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border:none;border-radius:17px;background:var(--cl);font-family:inherit;font-size:13px;color:var(--ct);cursor:pointer}
.character-sug small{font-size:10.5px;color:var(--ct2)}
.character-sug:disabled{opacity:.45;cursor:default}
/* 开场白 */
.character-hello{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.character-hello-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ct2)}
.character-pager{display:flex;align-items:center;gap:6px}
.character-pager button{width:28px;height:28px;border:none;border-radius:50%;background:var(--cl);color:var(--cd);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.character-pager button svg{width:14px;height:14px}
.character-pager button:disabled{opacity:.3;cursor:default}
.character-dots-pg{display:flex;gap:4px}
.character-dots-pg i{width:6px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--cd) 25%,transparent);transition:width .3s}
.character-dots-pg i.on{width:14px;background:var(--cd)}
.character-chatprev{display:flex;flex-direction:column;gap:6px}
.character-ts{align-self:center;font-size:11px;color:var(--ct2)}
.character-rowbtn{display:flex;gap:8px;flex-wrap:wrap}
.character-gen.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cd) 25%,transparent)}
.character-gen:disabled{cursor:progress}
.character-gen{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:none;border-radius:18px;background:var(--cl);font-family:inherit;font-size:13px;color:var(--cd);cursor:pointer}
/* 内心 */
.character-cpair{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--character-glass-line);padding:2px 0}
.character-cpair>div{flex:1;min-width:0}
.character-cpair label{display:flex;align-items:center;gap:12px;margin:0}
.character-cpair label+label{border-top:1px dashed var(--character-glass-line)}
.character-cpair label>span{flex:0 0 46px;font-size:13px;font-weight:600;color:var(--cd)}
.character-jh{display:flex;flex-direction:column;gap:14px;padding:14px 16px}
.character-jrow{display:flex;flex-direction:column;gap:8px}
.character-jrow+.character-jrow{border-top:1px solid var(--character-glass-line);padding-top:14px}
.character-jrow>div:first-child{display:flex;flex-direction:column;gap:2px}
.character-jrow>div:first-child b{font-size:14.5px;color:var(--ct)}
.character-jrow>div:first-child small{font-size:12px;color:var(--ct2)}
/* fixed height: switching options never makes what is below jump */
.character-jres{margin:0;min-height:64px;box-sizing:border-box;padding:10px 12px;border-radius:12px;background:var(--cl);font-size:12px;line-height:1.6;color:var(--ct2);display:flex;flex-direction:column;gap:2px}
.character-jres b{font-size:13px;color:var(--ct)}
.character-jres em{font-style:normal}
.character-own{display:flex;flex-direction:column;gap:10px;padding:14px 16px;margin-top:10px}
.character-own-body{display:flex;flex-direction:column;gap:10px}
.character-prow{display:flex;align-items:center;gap:12px;min-height:46px;width:100%;padding:6px 0;border:none;background:none;font-family:inherit;color:inherit;text-align:left}
.character-plist .character-prow+.character-prow{border-top:1px solid var(--character-glass-line)}
.character-prow>span:not(.character-app-ic){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.character-prow b{font-size:14px;font-weight:600;color:var(--ct)}
.character-prow em{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--ct2)}
.character-prow-link{cursor:pointer}
.character-prow-link>svg{width:15px;height:15px;color:var(--ct2);flex-shrink:0}
.character-locks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.character-lock{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:16px;background:var(--cl);color:var(--cd)}
.character-lock svg{width:17px;height:17px}
.character-lock b{font-size:14px;letter-spacing:2px;color:var(--ct)}
.character-lock span{font-size:11px;color:var(--ct2)}
.character-goal{display:flex;flex-direction:column;gap:6px;padding:6px 0 10px;border-bottom:1px solid var(--character-glass-line)}
.character-goal-t{display:flex;align-items:center;gap:6px}
.character-react-h,.character-react-b{display:flex;align-items:center;gap:6px}
.character-react-b{align-items:flex-start}
.character-react-h>span,.character-react-b>span{flex-shrink:0;font-size:13px;font-weight:600;color:var(--cd)}
.character-react-b>span{padding-top:11px}
.character-react-h .character-line{font-weight:600;border-bottom:1px dashed color-mix(in srgb,var(--cd) 25%,transparent)}
.character-react-b textarea{flex:1}
.character-old{margin-top:22px;padding-top:6px;border-top:1px dashed color-mix(in srgb,var(--cd) 22%,transparent)}
.character-old-h{display:flex;justify-content:space-between;align-items:baseline;margin:10px 4px 0}
.character-old-h b{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--ct)}
.character-old-h small{font-size:11.5px;color:var(--ct2)}
/* 过去 */
.character-tl{position:relative;padding:8px 14px 4px}
.character-tli{display:flex;align-items:center;gap:8px}
.character-tdot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 2.5px var(--cd);margin:0 4px}
.character-tt{flex:0 0 62px;font-weight:600}
.character-tli .character-line:not(.character-tt){border-bottom:1px solid var(--character-glass-line)}
/* 外貌 / 作息 */
.character-tbox{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:16px;background:var(--cl);min-width:0;margin:0}
.character-tbox>span{font-size:12px;color:var(--ct2)}
.character-tbox input{width:100%;border:none;background:transparent;outline:none;padding:0;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ct);font-variant-numeric:tabular-nums}
.character-voice{margin-top:10px}
.character-voice .character-tbox input,.character-voice .character-line{font-size:15px;font-weight:600;padding:0}
.character-voice .character-opt{min-height:28px;padding:0 9px;font-size:12px}
.character-sched{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.character-day{display:flex;flex-direction:column;gap:4px}
.character-dtrack{position:relative;height:10px;border-radius:5px;background:var(--cl)}
.character-dtrack i{position:absolute;top:0;bottom:0;background:var(--cd);opacity:.85}
.character-dtrack b{position:absolute;top:-3px;width:3px;height:16px;border-radius:2px;background:var(--ct);transform:translateX(-50%)}
.character-dticks{display:flex;justify-content:space-between;font-size:10px;color:var(--ct2);font-variant-numeric:tabular-nums}
.character-conv{margin:0;font-size:12px;line-height:1.7;color:var(--ct2)}
.character-city{display:flex;flex-direction:column;gap:12px;padding:14px 16px;margin-top:10px}
.character-picked{display:flex;align-items:center;gap:12px}
.character-picked>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.character-picked b{font-size:15.5px;color:var(--ct)}
.character-picked small{font-size:12px;line-height:1.5;color:var(--ct2)}
.character-life-search-credit{margin:0;font-size:11px;color:var(--ct2)}
.character-bplace-cur{margin:4px 0 10px}
.character-bplace-list{max-height:min(46vh,360px);overflow-y:auto;margin-top:8px;scrollbar-width:none}
.character-bplace-list::-webkit-scrollbar{display:none}
.character-bplace-list .character-own-lab{margin:10px 2px 2px}
.character-life-history{margin-top:10px}
/* 专属 App */
.character-app-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--cd);color:#fff}
.character-app-ic svg{width:18px;height:18px}
.character-app-ic.add{background:var(--cl);color:var(--cd)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-app-ic:not(.add){color:#16181e}}
:root[data-theme="dark"] .character-app-ic:not(.add){color:#16181e}
.character-app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.character-app-pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:1px solid var(--cx-card-line);border-radius:16px;background:var(--cx-card);font-family:inherit;font-size:12.5px;color:var(--ct);cursor:pointer}
.character-app-pick small{font-size:10.5px;color:var(--ct2)}
.character-app-pick[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--cd)}
/* 名片 */
.character-sign{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding:12px 16px;border-radius:18px;background:var(--cl)}
.character-sign>span{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--ct2)}
.character-sign>span button{border:none;background:none;padding:0;font-family:inherit;font-size:11.5px;color:var(--cd);cursor:pointer}
.character-sign>b{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ct)}
.character-sign-hist p{margin:0;font-size:12.5px;line-height:1.9;color:var(--ct2)}
.character-jump{cursor:pointer;font-family:var(--font-display)}
.character-color-prev{display:flex;align-items:center;gap:12px;margin-top:4px}
.character-color-prev .av{width:52px;height:52px;border-radius:28%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px;color:#fff;flex-shrink:0}
.character-color-prev b{display:block;font-size:15px;color:var(--ct)}
.character-color-prev small{font-size:12px;color:var(--ct2)}
.character-color-pal{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.character-color-pal button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 0;border:none;background:none;font-family:inherit;font-size:11.5px;color:var(--ct2);cursor:pointer}
.character-color-pal i{width:36px;height:36px;border-radius:50%}
.character-color-pal button[aria-pressed="true"]{color:var(--ct);font-weight:600}
.character-color-pal button[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--cx-page),0 0 0 4px var(--cd)}
.character-color-more{margin-top:12px;padding:2px 14px}
.character-color-more input[type=color]{-webkit-appearance:none;appearance:none;width:30px;height:30px;border:none;border-radius:50%;padding:0;overflow:hidden;background:none;flex-shrink:0}
.character-color-more input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.character-color-more input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}

/* ===================================================================================================
   关系与设置 tab (PR 3, preview-editor.html). Same tokens as the 人设 pages above (--cd / --ct / --ct2 / --cl /
   --cx-*); where text sits on the accent itself a dark rule switches it to the dark ink.
   =================================================================================================== */
.character-prow-val{flex-shrink:0;font-size:13.5px;color:var(--ct)}
.character-prow-col{flex-direction:column;align-items:stretch;gap:10px}
.character-prow-row{display:flex!important;flex-direction:row!important;justify-content:space-between;align-items:baseline}
.character-prow-note{font-style:normal;font-size:12px;color:var(--ct2)}
.character-prow.sub{padding-left:16px;box-sizing:border-box}
.character-prow.disabled b,.character-prow.disabled em{color:var(--ct2)}
.character-prow-danger b{color:var(--coral-text)}
.character-steps{display:flex!important;flex-direction:row!important;justify-content:space-between;padding:2px 2px 0}
.character-steps>span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:var(--ct2)}
.character-steps>span i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--cd) 30%,transparent)}
.character-steps>span.on{color:var(--ct);font-weight:600}
.character-steps>span.on i{width:14px;height:14px;margin-top:-2px;background:var(--cd);box-shadow:0 0 0 4px color-mix(in srgb,var(--cd) 16%,transparent)}
/* 认识的人 */
.character-people-card{padding:6px 16px 10px}
.character-people{display:flex;gap:14px;padding:10px 0 6px;overflow-x:auto;scrollbar-width:none}
.character-people::-webkit-scrollbar{display:none}
.character-person{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;max-width:64px;border:none;background:none;padding:0;font-family:inherit;cursor:pointer}
.character-person-av{width:48px;height:48px;border-radius:28%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--cl);color:var(--cd)}
.character-person-av svg{width:18px;height:18px}
.character-person b{font-size:12px;font-weight:600;color:var(--ct);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-person small{font-size:10.5px;color:var(--ct2);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-person.add .character-person-av{background:transparent;border:1.5px dashed color-mix(in srgb,var(--cd) 35%,transparent);box-sizing:border-box}
/* 世界书 */
.character-wb{display:flex;flex-wrap:wrap;gap:8px}
.character-wbc{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px 0 14px;border:none;border-radius:19px;background:var(--cl);font-family:inherit;font-size:13.5px;color:var(--ct);cursor:pointer;transition:background .2s,color .2s}
.character-wbc i{font-style:normal;font-size:10.5px;padding:2px 7px;border-radius:8px;background:var(--cx-card);color:var(--ct2)}
.character-wbc.active{background:var(--cd);color:#fff;font-weight:600}
.character-wbc.active i{background:color-mix(in srgb,#fff 22%,transparent);color:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-wbc.active,:root:not([data-theme="light"]) .character-wbc.active i{color:#16181e}}
:root[data-theme="dark"] .character-wbc.active,:root[data-theme="dark"] .character-wbc.active i{color:#16181e}
/* 手机里的文字风格 */
.character-vres{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:16px;background:var(--cl)}
.character-vtop{display:flex;align-items:center;gap:10px}
.character-vtop small{font-size:12px;color:var(--ct2)}
.character-vtag{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:16px;background:var(--cd);color:#fff;font-size:14px;font-weight:700}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-vtag{color:#16181e}}
:root[data-theme="dark"] .character-vtag{color:#16181e}
.character-vwhy{margin:0;font-size:12px;line-height:1.6;color:var(--ct2)}
.character-vmore{margin-top:4px;padding:8px 0 4px;border-top:1px solid var(--character-glass-line)}
.character-vmore b{color:var(--cd)}
.character-vmore>svg{transition:transform .25s}
.character-vmore[aria-expanded="true"]>svg{transform:rotate(90deg)}
.character-vlist{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.character-vopt{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:none;border-radius:14px;background:var(--cl);font-family:inherit;text-align:left;cursor:pointer}
.character-vopt b{font-size:14px;color:var(--ct)}
.character-vopt small{font-size:11px;color:var(--ct2)}
.character-vopt em{margin-top:4px;font-style:normal;font-size:11px;line-height:1.5;color:var(--ct2)}
.character-vopt[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--cd)}
/* 外貌与声音 · 语音音色（js/chat-tts.js）：选项沿用文字风格的 .character-vopt 卡片；复刻在卡片内展开 */
.character-chipbox.character-ttsv{display:flex;flex-direction:column;flex-wrap:nowrap;gap:10px}
.character-ttsv .character-vlist{margin-top:0}
.character-ttsv .character-vopt{position:relative;min-height:58px}
.character-ttsv-tag{position:absolute;top:9px;right:10px;font-size:10px;font-style:normal;line-height:16px;padding:0 6px;border-radius:8px;color:var(--ct2);border:1px solid color-mix(in srgb,var(--ct2) 35%,transparent)}
.character-ttsv-grp{margin:2px 2px -2px;font-size:12px;color:var(--ct2)}
.character-ttsv-del{align-self:flex-start;padding:0;min-height:28px;color:var(--ct2);font-size:12px}
.character-ttsv-note{margin:0;font-size:11.5px;line-height:1.6;color:var(--ct2)}
.character-ttsv-off{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:14px;background:var(--cl);font-size:12.5px;line-height:1.6;color:var(--ct2)}
.character-ttsv-off b{font-size:13.5px;color:var(--ct)}
.character-ttsv-off .character-linkbtn{align-self:flex-start;margin-top:6px;padding:0;color:var(--cd);font-size:13px}
.character-ttsv-off .character-linkbtn svg{width:14px;height:14px}
.character-ttsv-add{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--cd) 35%,transparent);background:none;font-family:inherit;font-size:13px;color:var(--cd);cursor:pointer}
.character-ttsv-add svg{width:14px;height:14px}
.character-ttsv-try{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--cl)}
.character-ttsv-try p{flex:1;min-width:0;margin:0;font-size:12.5px;line-height:1.55;color:var(--ct2)}
.character-ttsv-try p b{display:block;font-size:13px;font-weight:600;color:var(--ct)}
.character-ttsv-play{flex:none;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:var(--on-pri,#fff);background:var(--cd);box-shadow:0 6px 14px -8px var(--cd)}
.character-ttsv-play svg{width:18px;height:18px}
.character-ttsv-play.busy svg{animation:voicePulse .6s infinite}
.character-ttsv-clone{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:var(--cl)}
.character-ttsv-clone .character-tbox{background:#fff}
.character-ttsv .character-tbox input{font-size:15px;font-weight:600}
.character-ttsv-drop{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;border:1.5px dashed color-mix(in srgb,var(--cd) 35%,transparent);cursor:pointer}
.character-ttsv-drop.ok{border-style:solid}
.character-ttsv-drop svg{width:20px;height:20px;flex:none;color:var(--cd)}
.character-ttsv-drop span{font-size:13px;color:var(--ct)}
.character-ttsv-drop small{display:block;font-size:11px;color:var(--ct2)}
.character-ttsv-agree{display:flex;align-items:flex-start;gap:8px;padding:0;border:0;background:none;font-family:inherit;text-align:left;font-size:12px;line-height:1.55;color:var(--ct2);cursor:pointer}
.character-ttsv-agree i{flex:none;width:18px;height:18px;margin-top:1px;border-radius:6px;border:1.5px solid color-mix(in srgb,var(--ct2) 55%,transparent);display:grid;place-items:center}
.character-ttsv-agree[aria-checked="true"] i{background:var(--cd);border-color:var(--cd)}
.character-ttsv-agree[aria-checked="true"] i::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.character-ttsv-st{margin:0;font-size:12px;color:var(--ct2)}
.character-ttsv-acts{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.character-ttsv-acts button{min-height:40px;border-radius:13px;border:0;font-family:inherit;font-size:14px;cursor:pointer;background:#fff;color:var(--ct)}
.character-ttsv-acts button.go{background:var(--cd);color:var(--on-pri,#fff);font-weight:600}
.character-ttsv-acts button.go[aria-disabled="true"]{background:color-mix(in srgb,var(--cd) 45%,#fff)}
:root[data-theme="dark"] :is(.character-ttsv-clone .character-tbox,.character-ttsv-acts button:not(.go)){background:rgba(255,255,255,.06)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.character-ttsv-clone .character-tbox,.character-ttsv-acts button:not(.go)){background:rgba(255,255,255,.06)}}
@media(prefers-reduced-motion:reduce){.character-ttsv-play.busy svg{animation:none}}
/* 身份 / 关系 pages */
.character-rel-ended{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:13.5px;color:var(--ct)}
.character-rel-ended .character-gen{margin-top:0}
.character-subpage .crs-save{margin-top:18px}
.character-subpage .character-plist{padding:2px 14px}
.character-subpage .character-tx{background:var(--cx-card)}
.character-prow>span.character-prow-val{flex:0 0 auto;max-width:55%;text-align:right}
.crs-card .character-opt:not([aria-pressed="true"]){background:var(--cl);border-color:transparent}

/* ===================================================================================================
   角色详情 (PR 4, preview-detail.html). Character tokens (--cd / --ct / --ct2 / --cl / --cx-*) as everywhere else; the
   dock sits outside .character-detail-scroll, so it gets the same dark remap. Text on the accent: dark ink in dark mode.
   =================================================================================================== */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-dock-wrap{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}}
:root[data-theme="dark"] .character-dock-wrap{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}
#character-detail-body .character-detail-scroll{padding-bottom:calc(104px + var(--sab))}
/* the two tabs: the hidden one is really gone (a display rule must never override [hidden]) */
.character-detail-pane[hidden],.character-rel-nums[hidden],.character-stat-detail[hidden],.character-pfb[hidden],.character-sign-hist[hidden]{display:none!important}
.character-detail-seg{position:relative;z-index:1;margin:4px 0 14px}
.character-detail-pane{position:relative;z-index:1;animation:moFadeSoft var(--mo-fast,.2s) ease-out backwards}
@media (prefers-reduced-motion:reduce){.character-detail-pane{animation:none}}
/* hero: 签名 (with history) + status chip */
.character-sign-btn{border:none;background:none;padding:0;font-family:inherit;cursor:pointer}
.character-sign-btn p{text-decoration:underline dotted color-mix(in srgb,var(--cd) 40%,transparent);text-underline-offset:4px}
.character-sign-hist{display:flex;flex-direction:column;gap:6px;margin:10px 20px 0;padding:12px 16px;border-radius:18px;text-align:left;font-size:13px;color:var(--ct)}
.character-sign-hist small{font-size:11.5px;color:var(--ct2)}
.character-sign-hist em{font-style:normal;color:var(--ct2)}
.character-status-chip{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 14px;border-radius:16px;background:var(--cl);color:var(--ct);font-size:12.5px;max-width:100%;box-sizing:border-box}
.character-status-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-city-hint{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 12px;border-radius:12px;background:var(--cl);color:var(--ct);font-size:12px;line-height:1.5;max-width:100%;box-sizing:border-box}
.character-city-hint span{flex:1;min-width:0}
.character-city-hint button{flex-shrink:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;text-decoration:underline;padding:4px 2px;cursor:pointer}
.character-status-chip i{width:7px;height:7px;border-radius:50%;background:var(--cd);flex-shrink:0}
/* 关系卡 */
.character-relcard .character-rh>b{font-size:19px;color:var(--ct)}
.character-relcard .character-title-link{color:var(--cd);font-size:13px}
.character-rel-sub{margin:2px 0 12px;font-size:12.5px;color:var(--ct2)}
.character-rel-track{display:flex;justify-content:space-between;position:relative;margin:4px 2px 12px}
.character-rel-track::before{content:'';position:absolute;left:12px;right:12px;top:6px;height:2px;border-radius:1px;background:color-mix(in srgb,var(--cd) 18%,transparent)}
.character-rel-track span{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--ct2)}
.character-rel-track i{width:10px;height:10px;margin-top:2px;border-radius:50%;background:color-mix(in srgb,var(--cd) 30%,var(--cx-card))}
.character-rel-track span.done i{background:var(--cd)}
.character-rel-track span.now{color:var(--ct);font-weight:600}
.character-rel-track span.now i{width:14px;height:14px;margin-top:0;background:var(--cd);box-shadow:0 0 0 4px color-mix(in srgb,var(--cd) 16%,transparent)}
.character-rel-dims{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:10px;padding:0;border:none;background:none;font-family:inherit;text-align:left;cursor:pointer}
.character-rel-dims .character-rel-derived{margin-top:0}
.character-rel-dims .character-section-note{margin:0}
.character-rel-cells-3{grid-template-columns:repeat(3,1fr)}
.character-rel-nums{margin-top:8px}
.character-rel-nums .character-section-note{margin-top:8px}
.character-rel-missing-why{margin:6px 0 0;font-size:12.5px;color:var(--ink2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-rel-ended{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:10px}
.character-rel-ended p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ct2)}
.character-rel-ended .character-gen{margin-top:0}
/* 我们的数字 */
.character-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin:0 0 8px}
.character-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border-radius:18px;font-family:inherit;cursor:pointer;color:var(--ct)}
.character-stat strong{font-family:var(--num,var(--font-display));font-size:19px;font-weight:600;color:var(--ct)}
.character-stat strong small{font-size:11px;font-weight:400;margin-left:2px;color:var(--ct2)}
.character-stat span{font-size:11.5px;color:var(--ct2)}
.character-stat[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--cd)}
.character-stat-detail{position:relative;z-index:1;margin:0 0 14px;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.6;color:var(--ct)}
/* 近期动态 */
.character-grp-link{border:none;background:none;padding:0;font-family:inherit;font-size:12px;color:var(--cd);cursor:pointer}
.character-recent{position:relative;z-index:1;padding:4px 14px;margin-bottom:12px}
.character-recent-item{display:flex;align-items:center;gap:12px;padding:10px 0}
.character-recent-item+.character-recent-item{border-top:1px solid var(--character-glass-line)}
.character-recent-item>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.character-recent-item b{font-size:13.5px;font-weight:500;color:var(--ct);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-recent-item small{font-size:11.5px;color:var(--ct2)}
/* 相处中养成的习惯 */
.character-habits-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;width:100%;margin:0 0 12px;padding:14px 16px;border-radius:20px;font-family:inherit;text-align:left;cursor:pointer}
.character-habits-top p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ct)}
.character-habits-top p+p{margin-top:4px}
.character-habits-foot{display:flex;justify-content:space-between;align-items:center}
.character-habits-foot em{font-style:normal;font-size:11.5px;padding:2px 9px;border-radius:9px;background:var(--cl);color:var(--ct2);margin-right:6px}
.character-habits-foot small{font-size:12px;color:var(--cd)}
.character-related-list{position:relative;z-index:1;padding:2px 14px;margin-bottom:12px}
/* 关于 TA › 资料卡 */
.character-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-top:10px}
.character-facts>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:14px;background:var(--cl)}
.character-facts b{font-size:14.5px;color:var(--ct)}
.character-facts small{font-size:11px;color:var(--ct2)}
.character-facts-id{margin:12px 2px 0;font-size:13.5px;color:var(--ct2)}
.character-facts-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.character-facts-tags span{padding:4px 11px;border-radius:12px;background:var(--cl);color:var(--ct);font-size:12.5px}
/* 人物设定 */
.character-profile{position:relative;z-index:1;padding:2px 14px;margin-bottom:8px}
.character-pfx+.character-pfx{border-top:1px solid var(--character-glass-line)}
.character-persona-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;border:none;background:none;font-family:inherit;text-align:left;cursor:pointer;color:inherit}
.character-persona-row .character-it-t>svg{transition:transform .25s}
.character-persona-row[aria-expanded="true"] .character-it-t>svg{transform:rotate(90deg)}
.character-pfb{display:flex;flex-direction:column;gap:8px;padding:0 0 14px 48px}
.character-pkv{display:grid;grid-template-columns:64px 1fr;gap:10px;font-size:13px;line-height:1.7}
.character-pkv>span{color:var(--ct2)}
.character-pkv>div{color:var(--ct);overflow-wrap:anywhere}
.character-pfe{align-self:flex-end;border:none;background:none;padding:2px 0;font-family:inherit;font-size:12.5px;color:var(--cd);cursor:pointer}
.character-quote{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-radius:12px;background:var(--cl)}
.character-quote+.character-quote{margin-top:6px}
.character-secret-blur{display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:none;background:none;padding:0;font-family:inherit;text-align:left;cursor:pointer;color:var(--ct)}
.character-secret-blur>span{filter:blur(5px);transition:filter .3s;user-select:none}
.character-secret-blur[aria-pressed="true"]>span{filter:none;user-select:auto}
.character-secret-blur small{font-size:11px;color:var(--ct2)}
.character-secret-blur+.character-secret-blur{margin-top:8px}
.character-detail-tok{position:relative;z-index:1;margin:0 0 14px;text-align:center;font-size:12px;color:var(--ct2)}
.character-detail-scroll .character-people-card{position:relative;z-index:1;margin-bottom:12px}
/* 底部磨砂操作条 */
.character-dock-wrap{position:absolute;left:14px;right:14px;bottom:calc(12px + var(--sab));z-index:4}
.character-dock{display:flex;align-items:center;gap:8px;margin:0;padding:8px;border-radius:26px;background:var(--character-glass);border:1px solid var(--character-glass-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 14px 30px -18px color-mix(in srgb,var(--ink) 50%,transparent)}
.character-dock .character-quick-btn{flex:0 0 auto;flex-direction:row;gap:0}
.character-dock .character-quick-icon{width:46px;height:46px;border-radius:23px;background:var(--cl);border-color:transparent;box-shadow:none;color:var(--cd)}
.character-dock .character-quick-main{flex:1;height:46px;border-radius:23px;background:var(--cd);color:#fff;gap:8px;justify-content:center;font-size:15px;font-weight:600}
.character-dock .character-quick-main .character-quick-icon{width:auto;height:auto;background:none;color:inherit}
.character-dock .character-quick-main.disabled{background:color-mix(in srgb,var(--cd) 35%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-dock .character-quick-main{color:#16181e}}
:root[data-theme="dark"] .character-dock .character-quick-main{color:#16181e}
.character-export-warn-h{font-size:15px;color:var(--ct)}
.character-pop button.danger{color:var(--coral-text)}
#persona-panel .persona-field textarea{display:block;width:100%;min-height:72px;box-sizing:border-box;margin-top:6px}
/* ===================================================================================================
   角色列表 / 新建 / 导入 / 旧角色迁移 (PR 6, preview-list.html + preview-create.html). The list cards carry the character's
   own tokens inline (characterAccentVars), so they get the same dark remap as the dock; the create pages are the new-character
   editor (#character-editor-body, already remapped). Text on the accent colour: dark ink in dark mode.
   =================================================================================================== */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .character-lc-box{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}}
:root[data-theme="dark"] .character-lc-box{--ct:var(--ink)!important;--ct2:var(--ink2)!important;--cd:var(--c2)!important;--cl:color-mix(in srgb,var(--c1) 16%,transparent)!important}
/* top bar over the list: transparent until the list scrolls under it, then a fade and the centred title */
#character-home-body .character-home-top{position:absolute;left:0;right:0;top:0;z-index:5;height:64px;padding:0 12px;background:transparent;justify-content:space-between}
#character-home-body .character-home-top::before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;background:linear-gradient(180deg,var(--character-home-bg) 60%,transparent);opacity:0;transition:opacity .3s;pointer-events:none}
#character-home-body .character-home-top.scrolled::before{opacity:1}
#character-home-body .character-home-top .app-title{flex:0 1 auto;font-size:16px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
#character-home-body .character-home-top.scrolled .app-title{opacity:1;transform:none}
#character-home-body .character-home-scroll{padding:64px 16px calc(110px + var(--sab))}
.character-home-h1{margin:0 2px 12px;font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:1px;color:var(--ink)}
.character-filter-tabs button small{margin-left:4px;font-size:11px;font-weight:400;opacity:.75;font-variant-numeric:tabular-nums}
.character-sort-btn svg{transform:rotate(90deg)}
.character-home-sec{margin:14px 4px 8px;font-size:12px;letter-spacing:1px;color:var(--ink2)}
.character-home-none{margin:36px 0;text-align:center;font-size:13px;color:var(--ink2)}
/* the card: white, the character's colour fading in from the left, a soft coloured lift */
.character-lc{overflow:visible;clip-path:none;-webkit-clip-path:none}
.character-lc-box{position:relative;border-radius:24px;background:var(--cx-card);box-shadow:0 1px 2px rgba(20,28,40,.05),0 10px 24px -12px color-mix(in srgb,var(--cd) 45%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--cd) 10%,transparent);clip-path:none;-webkit-clip-path:none;overflow:hidden}
.character-lc-box::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,color-mix(in srgb,var(--c1) 55%,transparent) 0%,color-mix(in srgb,var(--c1) 18%,transparent) 45%,transparent 80%);pointer-events:none}
.character-lc .character-card-open{position:relative;flex-direction:column;align-items:stretch;gap:12px;padding:16px}
.character-lc-top{display:flex;align-items:center;gap:14px;min-width:0}
.character-lc-av{position:relative;overflow:visible;box-shadow:0 0 0 3px var(--cx-card),0 8px 18px -8px color-mix(in srgb,var(--cd) 60%,transparent)}
.character-lc-av>:first-child{border-radius:inherit;overflow:hidden;width:100%;height:100%}
.character-lc-on{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:var(--green,#7aaa78);box-shadow:0 0 0 2.5px var(--cx-card)}
.character-lc .character-card-name b{color:var(--ct)}
.character-lc .character-pin{margin-left:0;color:var(--ct2)}
.character-lc .character-card-intro{color:var(--ct2)}
.character-lc .character-pill{align-self:flex-start;flex-shrink:0;background:color-mix(in srgb,var(--cd) 14%,transparent);color:var(--cd);font-weight:400}
.character-lc-unread{position:absolute;z-index:2;top:14px;right:14px;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:var(--coral);color:var(--on-coral,#fff);font-size:11px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.character-lc-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ct2)}
.character-lc-st{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:13px;background:color-mix(in srgb,var(--cd) 9%,transparent);color:var(--cd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-lc-st i{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--cd);box-shadow:0 0 0 3px color-mix(in srgb,var(--cd) 15%,transparent)}
.character-lc-gap{flex:1}
.character-lc-tm{flex-shrink:0;font-variant-numeric:tabular-nums}
.character-lc.archived{opacity:1}
.character-lc.archived .character-card-open{opacity:.62}
.character-lc-restore{position:relative;display:block;margin:-6px 16px 14px auto;height:30px;padding:0 14px;border:none;border-radius:15px;background:color-mix(in srgb,var(--ink) 6%,transparent);font-family:inherit;font-size:12px;color:var(--ink);cursor:pointer}
.character-arch-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:6px;padding:12px 4px;border:none;background:none;font-family:inherit;font-size:12px;letter-spacing:1px;color:var(--ink2);cursor:pointer}
.character-arch-toggle em{display:flex;align-items:center;gap:2px;font-style:normal}
.character-arch-toggle svg{width:14px;height:14px;transform:rotate(90deg);transition:transform .25s}
.character-arch-toggle[aria-expanded="true"] svg{transform:rotate(-90deg)}
.character-lover-notice-dot{display:flex;align-items:center;justify-content:center;color:#fff}
.character-lover-notice-dot svg{width:16px;height:16px}
/* 排序: the centred menu */
.character-sort-dialog .character-sort-option{justify-content:space-between}
.character-sort-dialog .character-sort-option.active{font-weight:700}
/* empty list: the card stack and the three ways in */
.character-empty2{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 0 20px;text-align:center;background:none;border:none;box-shadow:none}
.character-empty2 h2{margin:0;font-family:var(--font-display);font-size:17px;color:var(--ink)}
.character-empty2>p{margin:0;font-size:13px;color:var(--ink2)}
.character-empty-stack{position:relative;width:120px;height:104px;margin-bottom:12px}
.character-empty-stack span{position:absolute;border-radius:22px;background:var(--cx-card)}
.character-empty-stack .s1{left:6px;top:14px;width:64px;height:80px;transform:rotate(-12deg);box-shadow:0 8px 20px -6px rgba(201,131,148,.4)}
.character-empty-stack .s2{right:6px;top:14px;width:64px;height:80px;transform:rotate(12deg);box-shadow:0 8px 20px -6px rgba(95,154,166,.4)}
.character-empty-stack .s3{left:28px;top:4px;width:64px;height:88px;display:flex;align-items:center;justify-content:center;color:var(--accent-text);box-shadow:0 12px 28px -8px color-mix(in srgb,var(--pri) 55%,transparent)}
.character-empty-stack .s3 svg{width:26px;height:26px}
.character-ways{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:16px}
.character-way2{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:none;border-radius:22px;background:var(--cx-card);font-family:inherit;text-align:left;color:var(--ink2);cursor:pointer;box-shadow:0 1px 2px rgba(20,28,40,.05),0 8px 20px -10px rgba(40,50,64,.25)}
.character-way2 i{width:42px;height:42px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--pri) 12%,transparent);color:var(--accent-text)}
.character-way2 i svg{width:20px;height:20px}
.character-way2>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.character-way2 b{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink)}
.character-way2 b em{font-style:normal;font-size:10px;font-weight:600;padding:2px 7px;border-radius:8px;background:var(--pri);color:var(--on-pri,#fff)}
.character-way2 small{font-size:12px}
.character-way2>svg{width:14px;height:14px;flex-shrink:0}
.character-way2.hi{box-shadow:0 10px 26px -10px color-mix(in srgb,var(--pri) 55%,transparent),inset 0 0 0 1.5px color-mix(in srgb,var(--pri) 45%,transparent)}
.character-way2.hi i{background:var(--pri);color:var(--on-pri,#fff)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.character-lc-restore){background:rgba(255,255,255,.08)}:root:not([data-theme="light"]) .character-way2 b em{color:var(--ink)}}
:root[data-theme="dark"] .character-lc-restore{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .character-way2 b em{color:var(--ink)}

/* ---- 新建：选择方式 / 粘贴 / 生成中 / 核对 ---- */
.character-create-top{background:transparent;border-bottom:none;height:58px;justify-content:space-between}
.character-create-top .app-title{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ct)}
.character-create-top .character-start-count{margin:0;width:38px;text-align:right}
.character-create-scroll{display:flex;flex-direction:column;gap:14px;padding:4px 18px 24px}
.character-create-h2{margin:4px 2px 0;font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--ct)}
.character-create-note{margin:0 4px;font-size:12px;line-height:1.7;color:var(--ct2)}
.character-way{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:16px;border:none;border-radius:22px;background:var(--cx-card);font-family:inherit;text-align:left;cursor:pointer;box-shadow:0 8px 24px -12px color-mix(in srgb,var(--ink) 30%,transparent)}
.character-way:disabled{opacity:.55;cursor:default}
.character-way.hi{box-shadow:0 0 0 1.5px var(--cd),0 10px 26px -12px color-mix(in srgb,var(--cd) 60%,transparent)}
.character-way-ic{width:46px;height:46px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--cl);color:var(--cd)}
.character-way-ic svg{width:22px;height:22px}
.character-way>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.character-way b{font-family:var(--font-display);font-size:16px;color:var(--ct)}
.character-way small{font-size:12px;line-height:1.6;color:var(--ct2)}
.character-way-rec{position:absolute;top:12px;right:14px;font-style:normal;font-size:10px;padding:2px 8px;border-radius:8px;background:var(--cd);color:#fff}
.character-create-minor{align-self:center;border:none;background:none;padding:6px 0;font-family:inherit;font-size:13px;color:var(--cd);cursor:pointer}
.character-gen-src{width:100%;box-sizing:border-box;min-height:300px;padding:14px 16px;border:1px solid var(--character-field-line);border-radius:20px;background:var(--character-field-bg);font-family:inherit;font-size:14px;line-height:1.85;color:var(--ink);resize:vertical}
.character-json-src{min-height:180px;font-family:ui-monospace,Menlo,monospace;font-size:12px}
.character-gen-meta{display:flex;justify-content:space-between;padding:0 4px;font-size:12px;color:var(--ct2);font-variant-numeric:tabular-nums}
.character-gen-meta .over{color:var(--coral-text)}
.character-gen-rules{display:flex;flex-direction:column;gap:8px;padding:14px 16px;font-size:13px;line-height:1.7;color:var(--ct2)}
.character-gen-rules b{display:flex;align-items:center;gap:6px;color:var(--ct)}
.character-gen-rules svg{width:16px;height:16px}
div.character-gen{display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px 0}
.character-gen-orb{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--cd);background:radial-gradient(circle at 35% 30%,#fff,var(--cl) 60%,var(--c1));box-shadow:0 10px 30px -10px color-mix(in srgb,var(--cd) 50%,transparent);animation:characterBreathe 1.8s ease-in-out infinite}
.character-gen-orb svg{width:30px;height:30px}
@keyframes characterBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.character-gen .character-create-note{text-align:center}
.character-gen-list{box-sizing:border-box;width:100%;padding:6px 16px}
.character-gen-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);font-size:14px;color:var(--ct2);transition:color .3s}
.character-gen-row:last-child{border-bottom:none}
.character-gen-row em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ct2);font-variant-numeric:tabular-nums}
.character-gen-st{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.character-gen-st svg{width:13px;height:13px}
.character-gen-row.doing,.character-gen-row.done{color:var(--ct)}
.character-gen-row.doing .character-gen-st::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--cd);border-top-color:transparent;animation:characterSpin .8s linear infinite}
.character-gen-row.done .character-gen-st{background:var(--cd);color:#fff;animation:characterPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes characterSpin{to{transform:rotate(360deg)}}
@keyframes characterPop{from{transform:scale(.4)}to{transform:none}}
.character-rv-sum{display:flex;flex-direction:column;gap:10px;padding:16px}
.character-rv-big{display:flex;gap:18px}
.character-rv-big div{display:flex;flex-direction:column;gap:2px}
.character-rv-big b{font-size:24px;color:var(--ct);font-variant-numeric:tabular-nums}
.character-rv-big span{font-size:12px;color:var(--ct2)}
.character-rv-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--ct2)}
.character-rv-dot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:var(--coral);vertical-align:1px}
.character-rv-dot.ok{background:var(--cd)}
.character-rv-dot.no{background:color-mix(in srgb,var(--ink) 18%,transparent)}
.character-rv-src{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:18px;font-family:inherit;font-size:13px;color:var(--ct2);text-align:left;cursor:pointer}
.character-rv-src span{flex:1}
.character-rv-src svg{width:16px;height:16px}
.character-rv-list{padding:2px 16px}
.character-rv-row{display:flex;width:100%;padding:13px 0;border:none;border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);background:none;font-family:inherit;text-align:left;cursor:pointer}
.character-rv-row:last-child{border-bottom:none}
.character-rv-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.character-rv-t{display:flex;align-items:center;gap:8px}
.character-rv-t b{flex:1;font-size:15px;color:var(--ct)}
.character-rv-t small{font-size:12px;color:var(--ct2);font-variant-numeric:tabular-nums}
.character-rv-t svg{width:14px;height:14px;color:var(--ct2)}
.character-rv-pend{font-style:normal;font-size:11px;padding:2px 8px;border-radius:9px;background:var(--coral-soft);color:var(--coral-text)}
.character-rv-ok{font-style:normal;font-size:11px;padding:2px 8px;border-radius:9px;background:var(--cl);color:var(--cd)}
.character-rv-bar{display:block;height:6px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.character-rv-bar i{display:block;height:100%;border-radius:3px;background:var(--cd)}
/* 分区核对: a coral dot on each AI-filled item, until the page is confirmed */
.character-ai{position:relative}
.character-ai::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px var(--cx-card);pointer-events:none}
.character-ai-note{margin:0 0 12px;padding:10px 12px;border-radius:14px;background:var(--coral-soft);font-size:12px;line-height:1.6;color:var(--coral-text)}
.character-ai-confirm{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;margin:14px 0 4px;border:none;border-radius:22px;background:var(--cl);font-family:inherit;font-size:14px;font-weight:600;color:var(--cd);cursor:pointer}
.character-ai-confirm svg{width:16px;height:16px}
/* 故事的起点: stage chips + a fixed-height line for the picked one */
.character-start-list{flex-direction:row;flex-wrap:wrap;gap:8px}
.character-start-opt{width:auto;padding:0 16px;min-height:36px;border-radius:18px;border:1px solid var(--character-field-line);box-shadow:none;font-size:14px;color:var(--ct2)}
.character-start-opt.on{background:var(--cd);border-color:transparent;color:#fff}
.character-start-desc{min-height:20px;margin:10px 4px 0;font-size:12px;color:var(--ct2)}
.character-start-idlabel{display:flex;justify-content:space-between;align-items:baseline}
.character-start-idlabel small{font-size:11.5px;color:var(--ct2)}
.character-start-foot{margin:14px 4px 0;font-size:12px;line-height:1.7;color:var(--ct2)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.character-start-opt.on .character-start-num,.character-editor-new .character-start-actions .character-create-btn,.character-start-opt.on,.character-way-rec,.character-gen-row.done .character-gen-st){color:#16181e}}
:root[data-theme="dark"] :is(.character-start-opt.on .character-start-num,.character-editor-new .character-start-actions .character-create-btn,.character-start-opt.on,.character-way-rec,.character-gen-row.done .character-gen-st){color:#16181e}

/* ---- 导入：识别结果的行、文件卡、世界书开关 ---- */
.character-rep h3{display:flex;flex-direction:column;gap:3px}
.character-rep h3 small{font-size:12px;font-weight:400;color:var(--ink2)}
.character-rep-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);font-size:13px}
.character-rep-row:last-child{border-bottom:none}
.character-rep-row span{flex:1;min-width:0;line-height:1.55;color:var(--ink2)}
.character-rep-row em{order:2;flex-shrink:0;max-width:40%;font-style:normal;font-size:11px;padding:2px 8px;border-radius:9px;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.character-rep-row em.w{background:var(--coral-soft);color:var(--coral-text)}
.character-cardfile{display:flex;align-items:center;gap:12px}
.character-cardfile>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.character-cardfile b{font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-cardfile small{font-size:12px;color:var(--ink2)}
#character-import-body .character-create-minor{color:var(--accent-text)}
.character-check-switch{display:flex;align-items:center;gap:12px}
.character-check-switch>span{flex:1;display:flex;flex-direction:column;gap:3px}
.character-check-switch b{font-size:15px;color:var(--ink)}
.character-check-switch small{font-size:12px;line-height:1.5;color:var(--ink2)}
.character-check-switch input{-webkit-appearance:none;appearance:none;position:relative;flex-shrink:0;width:50px;height:30px;margin:0;border-radius:15px;background:color-mix(in srgb,var(--ink) 12%,transparent);cursor:pointer;transition:background .25s}
.character-check-switch input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.character-check-switch input:checked{background:var(--pri)}
.character-check-switch input:checked::after{transform:translateX(20px)}

/* ---- 旧角色迁移：横幅 + 旧版原文 → 拆分结果 ---- */
.character-mig{display:flex;gap:12px;margin-bottom:14px;padding:14px 16px}
.character-mig-ic{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--coral-soft);color:var(--coral-text)}
.character-mig-ic svg{width:18px;height:18px}
.character-mig-m{display:flex;flex-direction:column;gap:6px;min-width:0}
.character-mig-m b{font-size:14px;color:var(--ct)}
.character-mig-m p{margin:0;font-size:13px;line-height:1.6;color:var(--ct2)}
.character-mig-btn{align-self:flex-start;display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:none;border-radius:17px;background:var(--cd);font-family:inherit;font-size:13px;color:#fff;cursor:pointer}
.character-mig-btn svg{width:14px;height:14px}
.character-mig-btn:disabled{opacity:.6;cursor:default}
.character-spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:characterSpin .8s linear infinite}
.character-split{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;padding:14px 16px;animation:moFade var(--mo-fast,.2s) ease-out backwards}
.character-split-h{display:flex;justify-content:space-between;align-items:baseline}
.character-split-h b{font-size:15px;color:var(--ct)}
.character-split-h small{font-size:12px;color:var(--ct2)}
.character-split-old{padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,transparent);font-size:13px;line-height:1.8;color:var(--ct2);white-space:pre-wrap}
.character-split-arrow{align-self:center;color:var(--ct2)}
.character-split-arrow svg{width:16px;height:16px}
.character-split-acts{display:flex;gap:8px}
.character-split-acts button{flex:1;height:38px;border:none;border-radius:19px;font-family:inherit;font-size:13px;cursor:pointer}
.character-split-acts .primary{background:var(--cd);color:#fff}
.character-split-acts .ghost{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ct2)}
.character-split.done .character-split-old,.character-split.done .character-split-new{opacity:.55}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.character-mig-btn,.character-split-acts .primary){color:#16181e}}
:root[data-theme="dark"] :is(.character-mig-btn,.character-split-acts .primary){color:#16181e}
@media (prefers-reduced-motion:reduce){.character-gen-orb,.character-gen-row.doing .character-gen-st::after,.character-gen-row.done .character-gen-st,.character-split{animation:none}}

/* 角色之间的关系页（E1，apps/character-link-page.js）：照 _handoff/character-app/previews/preview-detail.html「角色之间的关系页」 */
.crl-page{display:flex;flex-direction:column;gap:2px}
.crl-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0 4px}
.crl-hero-av{display:flex;align-items:center;gap:0}
.crl-hero-av .crs-av{width:60px;height:60px;font-size:21px;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--cd) 60%,transparent)}
.crl-hero-link{display:flex;align-items:center;padding:0 10px;position:relative}
.crl-hero-link::before,.crl-hero-link::after{content:"";width:14px;height:1.5px;background:color-mix(in srgb,var(--cd) 35%,transparent)}
.crl-hero-link i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--cd);padding:4px 12px;border-radius:12px;background:var(--cl);margin:0 4px;white-space:nowrap}
.crl-hero-names{display:flex;justify-content:space-between;width:min(300px,100%);padding:0 6px}
.crl-hero-names b{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--ct);max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crl-hero-dir,.crl-hero-sum{margin:0;font-size:12px;color:var(--ct2)}
.crl-sec-h{display:flex;justify-content:space-between;align-items:baseline;margin:18px 8px 8px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ct2)}
.crl-sec-h small{font-family:var(--font-body);font-weight:400;font-size:11.5px}
.crl-card{background:var(--cx-card);border:1px solid color-mix(in srgb,var(--cd) 10%,transparent);border-radius:22px;padding:2px 14px;box-shadow:0 10px 26px -18px color-mix(in srgb,var(--cd) 55%,transparent)}
.crl-card.crl-pad{padding:14px;display:flex;flex-direction:column;gap:10px}
.crl-row{border-bottom:1px solid color-mix(in srgb,var(--cd) 9%,transparent)}
.crl-row:last-child{border-bottom:0}
.crl-fhd{width:100%;min-height:46px;border:0;background:none;display:flex;align-items:center;gap:10px;padding:0;font-family:inherit;font-size:14px;color:var(--ct);text-align:left}
button.crl-fhd{cursor:pointer}
.crl-fhd>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.crl-fhd small{font-size:11.5px;font-weight:400;color:var(--ct2)}
.crl-fhd>b{font-weight:400;font-size:13.5px;color:var(--cd);display:inline-flex;align-items:center;gap:6px;max-width:55%;text-align:right;justify-content:flex-end;flex-wrap:wrap}
.crl-fhd>b small{color:var(--ct2)}
.crl-fhd>b.nil{color:var(--ct2)}
.crl-fhd svg{width:14px;height:14px;flex:none;color:var(--ct2);transition:transform .2s}
.crl-row.on>.crl-fhd svg{transform:rotate(90deg)}
.crl-fhd.col{flex-direction:column;align-items:stretch;padding:12px 0;gap:8px}
.crl-fhd.col>span{flex:none}
.crl-fpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.crl-row.on>.crl-fpanel{grid-template-rows:1fr}
.crl-fpanel>div{overflow:hidden}
.crl-fin{display:flex;flex-direction:column;gap:10px;padding:2px 0 14px}
.crl-opts{display:flex;flex-wrap:wrap;gap:7px}
.crl-opt,.crl-gtabs button,.crl-ystrip button,.crl-mgrid button,.crl-allbtn button,.crl-seg3 button{border:1px solid color-mix(in srgb,var(--cd) 14%,transparent);background:var(--cx-card);color:var(--ct);border-radius:15px;padding:6px 12px;font-family:inherit;font-size:13px;cursor:pointer}
.crl-opt[aria-pressed="true"],.crl-gtabs button[aria-pressed="true"],.crl-ystrip button[aria-pressed="true"],.crl-mgrid button[aria-pressed="true"],.crl-seg3 button[aria-pressed="true"]{background:var(--cl);color:var(--cd);border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--cd);font-weight:600}
.crl-opt:disabled,.crl-seg3 button:disabled,.crl-allbtn button:disabled{filter:grayscale(1) contrast(.6);cursor:default}
.crl-gtabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.crl-gtabs::-webkit-scrollbar{display:none}
.crl-gtabs button{flex:none;padding:5px 11px;font-size:12.5px}
.crl-ystrip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.crl-ystrip::-webkit-scrollbar{display:none}
.crl-ystrip button{flex:none;padding:5px 11px}
.crl-mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.crl-mgrid button{padding:7px 0;text-align:center}
.crl-mgrid .wide{grid-column:span 4}
.crl-fslider{display:grid;grid-template-columns:repeat(8,1fr);position:relative;padding:14px 0 4px}
.crl-fslider::before{content:"";position:absolute;left:6%;right:6%;top:50%;height:3px;border-radius:2px;background:color-mix(in srgb,var(--cd) 18%,transparent);transform:translateY(-50%)}
.crl-fslider button{position:relative;border:0;background:none;padding:6px 0;display:flex;justify-content:center;cursor:pointer}
.crl-fslider i{width:12px;height:12px;border-radius:50%;background:var(--cx-card);border:2px solid color-mix(in srgb,var(--cd) 35%,transparent)}
.crl-fslider button[aria-pressed="true"] i{background:var(--cd);border-color:var(--cd);box-shadow:0 0 0 5px color-mix(in srgb,var(--cd) 18%,transparent)}
.crl-fends{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--ct2)}
.crl-fends b{font-size:13px;font-weight:600;color:var(--cd)}
.crl-tgroups{display:flex;flex-direction:column;gap:10px}
.crl-tg{display:flex;flex-direction:column;gap:6px}
.crl-tg>small{font-size:11.5px;color:var(--ct2);display:flex;align-items:center;gap:5px}
.crl-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8fc59a}
.crl-dot[data-g="1"]{background:#e0c068}
.crl-dot[data-g="2"]{background:#e08a7a}
.crl-dot[data-g="3"]{background:#a3a9b3}
.crl-note{margin:0;padding:0 2px;font-size:11.5px;line-height:1.6;color:var(--ct2)}
.crl-note.big{font-size:13px}
.crl-note.warn{margin:0 4px 8px;color:var(--ct);font-weight:600}
.crl-dirl{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ct2)}
.crl-dirl b{color:var(--ct);font-weight:600}
.crl-vlink{border:0;background:none;padding:2px 0;font-family:inherit;font-size:12px;color:var(--cd);cursor:pointer}
.crl-vsw{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.crl-vsw button{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border-radius:16px;border:1px solid color-mix(in srgb,var(--cd) 12%,transparent);background:var(--cx-card);color:var(--ct2);font-family:inherit;font-size:12.5px;cursor:pointer}
.crl-vsw button .crs-av{width:26px;height:26px;font-size:11px}
.crl-vsw button[aria-pressed="true"]{background:var(--cl);color:var(--cd);box-shadow:inset 0 0 0 1.5px var(--cd);font-weight:600}
.crl-inl{flex:1;min-width:0;border:0;background:none;outline:none;font-family:inherit;font-size:14px;color:var(--ct);text-align:right;padding:0}
textarea.crl-inl{text-align:left;width:100%;resize:none;line-height:1.55;overflow:hidden}
.crl-row.static .crl-fhd.col>span{font-size:14px}
.crl-cl5{display:grid;grid-template-columns:repeat(5,1fr);position:relative;padding-top:6px}
.crl-cl5::before{content:"";position:absolute;left:10%;right:10%;top:15px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--cd) 18%,transparent)}
.crl-cl5 button{position:relative;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--ct2)}
.crl-cl5 i{width:12px;height:12px;border-radius:50%;background:var(--cx-card);border:2px solid color-mix(in srgb,var(--cd) 35%,transparent)}
.crl-cl5 small{font-size:11px}
.crl-cl5 button[aria-pressed="true"] i{background:var(--cd);border-color:var(--cd);box-shadow:0 0 0 5px color-mix(in srgb,var(--cd) 18%,transparent)}
.crl-cl5 button[aria-pressed="true"] small{color:var(--cd);font-weight:600}
.crl-sw{flex:none;width:46px;height:28px;border:0;border-radius:14px;background:color-mix(in srgb,var(--ct2) 28%,transparent);position:relative;cursor:pointer;transition:background .18s}
.crl-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .18s}
.crl-sw[aria-checked="true"]{background:var(--cd)}
.crl-sw[aria-checked="true"]::after{transform:translateX(18px)}
.crl-sw:disabled{filter:grayscale(1) contrast(.6);cursor:default}
.crl-seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.crl-seg3 button{padding:7px 0;text-align:center}
.crl-seg3d{font-size:11.5px;color:var(--ct2)}
.crl-allbtn{display:flex;gap:8px}
.crl-btn{align-self:flex-start;border:0;border-radius:16px;padding:8px 16px;background:var(--cl);color:var(--cd);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .crl-dot{background:#7fb98a}:root:not([data-theme="light"]) .crl-dot[data-g="1"]{background:#cfae55}:root:not([data-theme="light"]) .crl-dot[data-g="2"]{background:#d27a6b}:root:not([data-theme="light"]) .crl-dot[data-g="3"]{background:#8a909b}:root:not([data-theme="light"]) .crl-card{border-color:var(--cx-card-line);box-shadow:none}:root:not([data-theme="light"]) :is(.crl-opt,.crl-gtabs button,.crl-ystrip button,.crl-mgrid button,.crl-allbtn button,.crl-seg3 button,.crl-vsw button){border-color:var(--cx-card-line)}:root:not([data-theme="light"]) .crl-sw::after{background:#e9ece8}}
:root[data-theme="dark"] .crl-dot{background:#7fb98a}:root[data-theme="dark"] .crl-dot[data-g="1"]{background:#cfae55}:root[data-theme="dark"] .crl-dot[data-g="2"]{background:#d27a6b}:root[data-theme="dark"] .crl-dot[data-g="3"]{background:#8a909b}:root[data-theme="dark"] .crl-card{border-color:var(--cx-card-line);box-shadow:none}:root[data-theme="dark"] :is(.crl-opt,.crl-gtabs button,.crl-ystrip button,.crl-mgrid button,.crl-allbtn button,.crl-seg3 button,.crl-vsw button){border-color:var(--cx-card-line)}:root[data-theme="dark"] .crl-sw::after{background:#e9ece8}
@media(prefers-reduced-motion:reduce){.crl-fpanel,.crl-sw,.crl-sw::after,.crl-fhd svg{transition:none}}
/* 性格倾向 · 未设置: greyed until touched, 「未设置」 over the thumb */
.character-dim{position:relative}
.character-dim.unset>span{color:var(--ct2)}
.character-dim.unset input{accent-color:#8c939b;filter:grayscale(1)}
.character-dim.unset::after{content:'未设置';position:absolute;left:50%;top:-4px;transform:translateX(-50%);font-size:10.5px;line-height:1;color:var(--ct2);pointer-events:none}
/* 补充说明 names the user: a hint, not an edit */
.character-name-hint{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--cd,#8a7) 12%,transparent);font-size:12px;line-height:1.5;color:var(--ct2)}
.character-name-hint[hidden]{display:none}
.character-name-hint span{flex:1;min-width:0}
.character-name-hint button{flex:none;border:1px solid color-mix(in srgb,var(--ct) 25%,transparent);background:none;border-radius:99px;padding:5px 12px;font:inherit;font-size:12px;color:var(--ct);cursor:pointer}
/* TA 的约定 (js/apps/character-promises.js) */
.cp-wrap{display:flex;flex-direction:column;gap:10px;padding:4px 0 24px}
.cp-item{padding:12px 14px;border-radius:18px;background:var(--character-glass);border:1px solid var(--character-glass-line);box-shadow:var(--character-glass-shadow)}
.cp-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cp-kind{font-size:12px;font-weight:700;color:var(--ink2)}
.cp-status{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-alt);color:var(--ink2)}
.cp-status.cp-pending{background:var(--ink);color:var(--surface)}
.cp-text{margin:6px 0 4px;font-size:15px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.cp-time{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink2)}
.cp-day{font-weight:700;color:var(--ink)}
.cp-time .td-pair{display:flex;flex-direction:column;gap:1px}
.cp-note{margin:4px 0 0;font-size:12px;color:var(--ink2)}
.cp-cancel{margin-top:8px;border:1px solid var(--border);background:transparent;color:var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer}
.cp-empty{margin:24px 8px;text-align:center;font-size:14px;line-height:1.6;color:var(--ink2)}
/* 人设 PR B · 由 TA 自行设定秘密: a found one shows its text (and 删除) instead of the lock */
.character-lock.found b{letter-spacing:0;font-weight:500;line-height:1.5}
.character-lock.found button{align-self:flex-start;margin-top:4px}
.character-auto-tag{font-style:normal;font-size:11px;font-weight:600;margin-left:6px;padding:1px 6px;border-radius:8px;border:1px solid var(--ct2);color:var(--ct2);vertical-align:middle}
.character-jres .character-linkbtn{display:block;margin-top:4px}
.character-conflict-hint{display:block;margin-top:6px;font-size:11.5px;line-height:1.6;color:var(--ink2)}

/* 定妆照 / 照片三档（生图第二阶段） */
.gx-ref [hidden],.gx-photo [hidden]{display:none!important}
.gx-refcard{display:flex;gap:14px;align-items:center}
.gx-slot{position:relative;flex:none;width:96px;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--cl,rgba(255,255,255,.6));border:1px dashed var(--c1,#c5c9d3);isolation:isolate}
.gx-slot.set,.gx-slot.cand,.gx-slot.busy.has{border-style:solid;border-color:rgba(255,255,255,.7);box-shadow:0 6px 18px rgba(60,70,90,.14)}
.gx-slot-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ct2,#6c6d72);font-size:11px}
.gx-slot-empty svg{width:22px;height:22px;opacity:.7}
.gx-slot.set .gx-slot-empty,.gx-slot.cand .gx-slot-empty,.gx-slot.busy.has .gx-slot-empty{display:none}
.gx-slot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 300ms,filter 900ms cubic-bezier(.22,.9,.3,1),transform 900ms cubic-bezier(.22,.9,.3,1)}
.gx-slot.set .gx-slot-img,.gx-slot.cand .gx-slot-img{opacity:1;filter:none;transform:none}
.gx-slot.busy.has .gx-slot-img{opacity:1;filter:blur(10px);transform:scale(1.1)}
.gx-slot.cand .gx-slot-img{animation:gxDev 900ms cubic-bezier(.22,.9,.3,1)}
@keyframes gxDev{from{filter:blur(12px);transform:scale(1.12)}to{filter:none;transform:none}}
.gx-slot-sweep{position:absolute;inset:0;opacity:0;pointer-events:none}
.gx-slot.busy .gx-slot-sweep{opacity:1}
.gx-slot-sweep::before{content:"";position:absolute;top:0;bottom:0;width:70%;left:-70%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:gxSweep 1.3s cubic-bezier(.22,.9,.3,1) infinite}
@keyframes gxSweep{to{transform:translateX(250%)}}
.gx-slot-badge{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:50%;display:none;place-items:center;background:var(--cd,#676f84);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.gx-slot-badge svg{width:12px;height:12px}
.gx-slot.set .gx-slot-badge{display:grid}
.gx-refside{min-width:0;display:flex;flex-direction:column;gap:10px}
.gx-refstate{margin:0;font-size:13px;line-height:1.55;color:var(--ct2,#6c6d72)}
.gx-modenote{margin:8px 0 0;font-size:12px;line-height:1.55;color:var(--ct2,#6c6d72)}
@media (prefers-reduced-motion:reduce){.gx-slot-sweep::before,.gx-slot.cand .gx-slot-img{animation:none}}