/* 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:48px;padding:0 12px;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:14px 16px;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:66px}
.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:56px;padding:0 10px 0 8px;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)}
.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(--pri-deep);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-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);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 25%,transparent)}
.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);box-shadow:0 0 0 4px color-mix(in srgb,var(--cd) 12%,transparent)}
.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}
@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%}

/* 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%)}
.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{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);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 25%,transparent)}
/* 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:#fff;border-color:#fff;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)}
.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}
.character-search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 22%,transparent)}
:root[data-theme="dark"] :is(.character-rel-invite-card,.character-start-opt,.character-start-id){background:rgba(255,255,255,.07)}