*{box-sizing:border-box}html{scroll-behavior:smooth}body{--bg:#f4f6f9;--surface:#fff;--subtle:#eef2f7;--text:#172333;--muted:#58677b;--line:#dce2eb;--accent:#275ac3;--accent-soft:#e9effb;--on-accent:#fff;--radius:14px;--shadow:0 8px 24px #19263e07;margin:0;background:var(--bg);color:var(--text);font:14px/1.5 'Segoe UI','Microsoft YaHei',sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button{transition:background .15s,transform .15s}button:hover{filter:brightness(.97)}button:active{transform:scale(.97)}h1,h2,h3,p{margin:0}h2{font-size:19px;letter-spacing:-.5px}img{display:block;object-fit:cover}button.primary{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--accent);color:var(--on-accent);padding:14px 18px;border-radius:8px;font-weight:600;min-height:48px}.direction-bar{height:44px;background:#fff;color:#465267;display:flex;align-items:center;padding:0 28px;gap:24px;border-bottom:1px solid #e0e4eb;font-size:12px}.direction-bar>span{color:#778295}.direction-bar nav{margin-left:auto;display:flex;gap:16px}.direction-bar [aria-current]{color:#172333;font-weight:700}.direction-bar a{padding:8px 0}.site-header{height:88px;margin:0 auto;max-width:1376px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:64px}.brand{display:flex;gap:12px;align-items:center;font-size:19px;font-weight:700;letter-spacing:1px}.brand svg{color:var(--accent)}.brand small{font-size:10px;display:block;font-weight:400;letter-spacing:3px;color:var(--muted);margin-top:2px}.site-header nav{display:flex;gap:32px;align-self:stretch}.site-header nav a{display:grid;place-items:center;font-weight:500;color:var(--muted);position:relative}.site-header nav .active{color:var(--accent)}.site-header nav .active:after{content:'';position:absolute;height:2px;bottom:0;inset-inline:0;background:var(--accent)}.header-note{margin-left:auto;color:var(--muted);font-size:12px}main{max-width:1376px;margin:0 auto}.intro{display:flex;align-items:center;justify-content:space-between;padding:36px 0 32px;gap:24px}.eyebrow{display:block;font-size:10px;font-weight:600;letter-spacing:2px;color:var(--muted);margin-bottom:8px}.intro h1{font-size:32px;letter-spacing:-1px;line-height:1.35}.intro p{color:var(--muted);margin-top:12px}.sample-tag{font-size:11px;color:var(--muted);text-align:right;line-height:1.8}.sample-tag b{font-weight:400}.workspace{display:grid;grid-template-columns:344px minmax(0,1fr);gap:32px;align-items:start}.workspace aside{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.picker{padding:24px}.picker-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.native .picker-head{display:block}.native .picker-head h2{font-size:18px}.native .picker-head .eyebrow{display:none}.tabs{display:flex;gap:4px;padding:4px;background:var(--subtle);border-radius:8px}.tabs button{background:transparent;color:var(--muted);min-height:36px;padding:6px 18px;border-radius:6px;white-space:nowrap}.tabs button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000000f;font-weight:600}.tabs span{margin-left:8px;font-size:11px;opacity:.7}.native .tabs{margin-top:18px}.native .tabs button{flex:1}.pick-hint{font-size:12px;margin:16px 0;color:var(--muted)}.characters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 12px}.character{padding:0;background:none;text-align:center;min-width:0}.portrait{display:block;position:relative;border-radius:8px}.portrait img{width:100%;aspect-ratio:4/5;border-radius:8px;filter:saturate(.92);border:2px solid transparent}.character-name{display:block;font-size:11px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.counter{position:absolute;bottom:3px;right:3px;min-width:20px;height:20px;display:grid;place-items:center;font-size:12px;background:var(--surface);color:var(--text);border-radius:5px;font-weight:700}.rarity{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;color:white;text-shadow:0 1px 3px #000;display:none}.is-selected .portrait img{border-color:var(--accent)}.is-selected .counter{background:var(--accent);color:var(--on-accent)}.is-selected .character-name{color:var(--accent);font-weight:700}.selection{padding:24px;border-top:1px solid var(--line)}.section-label{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-label h2{font-size:15px}.text-button{background:none;color:var(--muted);padding:8px;min-height:40px;font-size:12px}.selection-stat{display:none}.selected-row{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}.selected-row>img{width:40px;height:48px;border-radius:6px}.selected-title{flex:1;min-width:0}.selected-title strong{display:block;font-size:12px}.selected-title small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden}.stepper button{background:var(--surface);width:30px;height:36px;font-size:18px}.stepper>span{min-width:22px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}.quantity-hint{font-size:11px;color:var(--muted);margin:18px 0;line-height:1.8}.selection .primary{width:100%}.filter-controls{display:flex;gap:16px;margin-bottom:24px}.filter-controls label{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.filter-controls label>span{font-size:12px;color:var(--muted);white-space:nowrap}.filter-controls input,.filter-controls select{border:1px solid var(--line);border-radius:8px;min-height:44px;padding:10px 14px;background:var(--surface);color:var(--text);min-width:0;flex:1;width:100%}input::placeholder{color:var(--muted)}.result-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px;gap:16px}.result-head .eyebrow{display:none}.result-head h2{font-size:20px}.result-head h2>span{font-size:14px;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:6px;background:var(--accent-soft);color:var(--accent);margin-left:6px;vertical-align:middle}.result-note{font-size:12px;color:var(--muted)}.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.account{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);min-width:0}.account-top{display:flex;align-items:center;justify-content:space-between}.server-label{font-size:10px;letter-spacing:.5px;color:var(--muted)}.account h3{font-size:15px;margin-top:3px;font-weight:600;letter-spacing:.3px}.ssr-count{display:flex;align-items:baseline;gap:5px}.ssr-count strong{font-size:26px;line-height:1}.ssr-count>span{font-size:10px;color:var(--muted)}.account-images{display:flex;gap:8px;margin:22px 0;flex-wrap:wrap;align-content:start;min-height:69px}.account-images>div{width:calc((100% - 40px)/6);max-width:64px}.account-images img{width:100%;aspect-ratio:1;border-radius:6px}.account-images>div>span{display:block;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px;text-align:center}.account-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;gap:12px}.account-bottom>span{font-size:10px;color:var(--muted)}.account-bottom button{background:var(--accent-soft);color:var(--accent);font-size:12px;min-height:36px;border-radius:6px;padding:8px 12px;white-space:nowrap}.account-bottom button>span{margin-left:6px}.empty-results{grid-column:1/-1;text-align:center;border:1px dashed var(--line);padding:64px 24px;border-radius:var(--radius)}.empty-results p{color:var(--muted);margin:8px 0 16px}.empty-list{color:var(--muted);padding:24px 0;font-size:12px}footer{max-width:1376px;margin:48px auto 0;padding:24px 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px;display:flex;justify-content:space-between}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,12px);padding:12px 24px;background:var(--text);color:var(--surface);border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;font-size:13px;z-index:5}#toast.visible{opacity:1;transform:translate(-50%,0)}
.signature{--bg:#f6f3ed;--surface:#fffdf9;--subtle:#eae5dc;--text:#302b27;--muted:#776b60;--line:#ded7cb;--accent:#9e3449;--accent-soft:#f4e6e6;--radius:4px;--shadow:none}.signature .site-header{height:96px}.signature .brand small{letter-spacing:4px}.signature .intro{position:relative;min-height:210px;padding-top:32px;padding-bottom:32px}.signature .intro h1{font:40px/1.4 'STSong','SimSun',serif;letter-spacing:1px;font-weight:600}.signature .intro p{font-size:13px}.signature .sample-tag{position:absolute;right:0;top:24px}.hero-art{display:flex;align-items:center;margin-right:150px;position:relative;width:224px;height:160px;isolation:isolate}.hero-art img{position:absolute;width:88px;height:128px;border:5px solid var(--surface);box-shadow:0 8px 16px #38261d12;left:0;transform:rotate(-12deg)}.hero-art img:nth-child(2){left:65px;transform:rotate(1deg);z-index:2}.hero-art img:nth-child(3){left:125px;transform:rotate(12deg)}.hero-art>span{position:absolute;right:-132px;font-size:10px;letter-spacing:2px;line-height:1.8;color:var(--muted)}.signature .filter-controls{justify-content:flex-end;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:0}.signature .filter-controls label{flex:none;width:280px}.signature .picker{padding:24px 0 20px}.signature .picker h2{font-size:22px}.signature .tabs{background:transparent;border:1px solid var(--line);border-radius:4px}.signature .tabs button{border-radius:2px}.signature .tabs button[aria-pressed=true]{background:var(--text);color:var(--surface);box-shadow:none}.signature .characters{grid-template-columns:repeat(10,minmax(0,1fr));gap:18px}.signature .portrait img{border-radius:3px;aspect-ratio:4/5}.signature .portrait{border-radius:3px}.signature .character-name{font-size:12px;margin-top:10px}.signature .counter{width:28px;height:28px;right:8px;bottom:8px;border-radius:2px;font-size:14px}.signature .rarity{display:block}.signature .selection{display:flex;align-items:center;gap:24px;border-block:1px solid var(--line);padding:16px 0;margin:0 0 32px}.signature .section-label{display:block;width:130px;flex-shrink:0}.signature .section-label .text-button{padding:4px 0}.signature #selected-list{display:flex;gap:24px;flex:1;flex-wrap:wrap}.signature .selected-row{border:0;padding:0;gap:12px}.signature .selected-row>img{width:36px;height:44px;border-radius:2px}.signature .stepper{margin-left:8px}.signature .quantity-hint{display:none}.signature .selection .primary{width:180px;border-radius:3px;flex-shrink:0;font-size:13px}.signature .results{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.signature .account{padding:24px;border:0;box-shadow:0 0 0 1px var(--line)}.signature .account-images>div{width:calc((100% - 40px)/6)}.signature .account h3{font-family:Georgia,serif;font-size:19px;font-weight:400}.signature .result-head .eyebrow{display:block}.signature .result-head h2{font-size:24px}.signature .ssr-count strong{font-family:Georgia,serif;font-size:30px;font-weight:400}.signature .account-bottom button{background:transparent;padding-right:0}.signature .account-images img{border-radius:2px}
.experimental{--bg:#121818;--surface:#1b2322;--subtle:#27302d;--text:#f1f4ec;--muted:#a8b3ab;--line:#36423c;--accent:#d1ef85;--accent-soft:#303d24;--on-accent:#1d2d08;--radius:12px;--shadow:none}.experimental .direction-bar{background:#202726;color:#ccd4cd;border-color:#38433d}.experimental .direction-bar>span{color:#a8b3ab}.experimental .direction-bar [aria-current]{color:var(--accent)}.experimental .site-header{height:80px}.experimental .site-header .brand{font-size:18px}.experimental .intro{padding:32px 0}.experimental .intro h1{font-size:36px;font-weight:500;letter-spacing:-1px}.experimental .workspace{grid-template-columns:minmax(0,1fr) 304px;gap:32px}.experimental .workspace aside{position:sticky;top:20px;border-color:var(--line);border-radius:12px;padding:24px}.experimental .picker{padding:0;margin-bottom:32px}.experimental .picker-head h2{display:none}.experimental .picker-head .eyebrow{margin:0;color:var(--accent)}.experimental .tabs{background:var(--surface);border:1px solid var(--line)}.experimental .tabs button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.experimental .characters{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.experimental .portrait img{aspect-ratio:1.35;object-position:center 28%;border-radius:8px}.experimental .character{position:relative;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--surface);text-align:left}.experimental .character-name{padding:4px 6px 6px;margin:0;font-size:12px}.experimental .counter{width:28px;height:28px;right:8px;bottom:8px;font-size:14px}.experimental .rarity{display:block}.experimental .character.is-selected{border-color:var(--accent)}.experimental .is-selected .portrait img{border-color:transparent}.experimental .filter-controls{display:block;margin:0 0 24px}.experimental .filter-controls label{display:block;margin-bottom:16px}.experimental .filter-controls label>span{display:block;margin-bottom:8px}.experimental .filter-controls input,.experimental .filter-controls select{background:var(--bg)}.experimental .selection{padding:24px 0 0}.experimental .selection-stat{display:flex;gap:16px;align-items:center;margin:20px 0}.experimental .selection-stat>strong{font-size:64px;font-weight:400;letter-spacing:-3px;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}.experimental .selection-stat>span{font-size:12px}.experimental .selection-stat small{font-size:10px;color:var(--muted)}.experimental .selected-row{gap:8px}.experimental .selected-row>img{width:34px;height:42px}.experimental .stepper button{width:28px}.experimental .selected-title strong{font-size:11px}.experimental .quantity-hint{margin:22px 0}.experimental .result-head h2{font-size:20px;font-weight:500}.experimental .results{grid-template-columns:1fr;gap:12px}.experimental .account{display:grid;grid-template-columns:160px minmax(0,1fr) 130px;align-items:center;gap:20px;padding:16px 20px}.experimental .account-top{align-items:start}.experimental .account h3{font-size:13px}.experimental .ssr-count{display:flex;gap:4px}.experimental .ssr-count strong{font-size:16px}.experimental .ssr-count>span{font-size:9px}.experimental .account-top{gap:8px}.experimental .account-images{margin:0;min-height:0;gap:8px}.experimental .account-images>div{width:40px}.experimental .account-images>div>span{display:none}.experimental .account-images img{aspect-ratio:1}.experimental .account-bottom{border:0;display:block;padding:0;text-align:right}.experimental .account-bottom>span{display:none}.experimental .account-bottom button{background:transparent;color:var(--accent)}
@media(min-width:1500px){.site-header,main,footer{max-width:1376px}}@media(max-width:1499px){.site-header,main,footer{margin-inline:48px}.workspace{grid-template-columns:320px minmax(0,1fr);gap:24px}.native .picker,.native .selection{padding:20px}.native .characters{gap:18px 8px}.signature .hero-art{margin-right:120px}.signature .intro h1{font-size:36px}.signature .hero-art>span{right:-120px}.account{padding:18px}.experimental .workspace{grid-template-columns:minmax(0,1fr) 288px;gap:24px}.experimental .workspace aside{padding:20px}.experimental .account{grid-template-columns:130px minmax(0,1fr) 116px;gap:12px}}
@media(max-width:1050px){.site-header,main,footer{margin-inline:24px}.header-note{display:none}.native .workspace{grid-template-columns:280px minmax(0,1fr);gap:20px}.native .results{grid-template-columns:1fr}.native .characters{grid-template-columns:repeat(5,minmax(0,1fr))}.signature .hero-art{display:none}.signature .characters{grid-template-columns:repeat(5,minmax(0,1fr))}.signature .portrait img{aspect-ratio:1}.signature .selection{flex-wrap:wrap}.signature .results{grid-template-columns:repeat(2,minmax(0,1fr))}.experimental .characters{grid-template-columns:repeat(5,minmax(0,1fr))}.experimental .account{grid-template-columns:1fr auto}.experimental .account-images{grid-row:2;grid-column:1/-1}.experimental .account-bottom{grid-row:1;grid-column:2}.experimental .workspace{grid-template-columns:minmax(0,1fr) 260px}.experimental .workspace aside{padding:16px}.direction-bar{padding-inline:24px}.direction-bar>span{display:none}.account-images>div{width:48px}.signature .sample-tag{position:static}}
@media(max-width:720px){.direction-bar{height:auto;min-height:48px;flex-wrap:wrap;padding:8px 16px;gap:4px}.direction-bar nav{gap:12px;font-size:10px}.direction-bar>a{font-size:11px}.site-header,main,footer{margin-inline:16px}.site-header,.signature .site-header,.experimental .site-header{height:76px;gap:24px}.brand{font-size:16px;gap:8px}.brand svg{width:24px}.brand small{font-size:9px}.site-header nav{gap:20px;margin-left:auto;font-size:12px}.intro,.experimental .intro{padding:24px 0;display:block}.intro h1,.experimental .intro h1{font-size:27px;letter-spacing:-.5px}.signature .intro{min-height:0}.signature .intro h1{font-size:29px}.intro p{font-size:12px;margin-top:10px}.sample-tag,.signature .sample-tag{text-align:left;margin-top:16px;font-size:10px}.sample-tag br{display:none}.sample-tag b{margin-left:8px}.intro .eyebrow{font-size:9px}.workspace,.native .workspace,.experimental .workspace{display:flex;flex-direction:column;gap:24px}.workspace aside,.main-results{width:100%}.native .picker-head{display:flex}.native .tabs{margin:0}.native .picker-head h2{font-size:16px}.native .tabs button{padding:6px 12px}.native .characters{gap:14px 10px}.native .portrait img{aspect-ratio:1}.native .selection #selected-list{display:grid;grid-template-columns:1fr;gap:0}.selected-row{padding:10px 0}.native .quantity-hint{font-size:11px}.native .quantity-hint br{display:none}.native .selection{padding:16px 20px}.native .selection .primary{margin-top:12px}.filter-controls{gap:10px}.filter-controls label{display:block}.filter-controls label>span{display:block;margin-bottom:8px}.filter-controls input,.filter-controls select{font-size:13px}.native .results,.signature .results{grid-template-columns:1fr}.account{padding:20px}.result-note{font-size:10px}.account-images>div,.signature .account-images>div{width:calc((100% - 40px)/6);max-width:60px}.account-images>div>span{font-size:9px}.signature .filter-controls{padding:0 0 20px}.signature .filter-controls label{flex:1;width:auto}.signature .picker-head h2{font-size:18px}.signature .picker-head .eyebrow{font-size:8px}.signature .tabs button{padding:6px 10px}.signature .tabs span{display:none}.signature .characters{gap:16px 8px}.signature .character-name{font-size:10px}.signature .counter{width:22px;height:22px;bottom:5px;right:5px;font-size:11px}.signature .rarity{font-size:8px;top:5px;left:6px}.signature .selection{display:block;padding:16px 0 20px;margin-bottom:24px}.signature .section-label{display:flex;width:auto}.signature #selected-list{display:block}.signature .selected-row{padding:8px 0;gap:12px}.signature .selection .primary{width:100%;margin-top:16px}.experimental .main-results{display:contents}.experimental .picker{order:0;width:100%;margin:0}.experimental aside{order:1;position:static!important}.experimental .result-panel{order:2;width:100%}.experimental .characters{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 6px}.experimental .character{padding:3px;border-radius:7px}.experimental .portrait img{aspect-ratio:.85;border-radius:4px}.experimental .character-name{font-size:9px;padding:6px 0 4px;text-align:center}.experimental .counter{right:3px;bottom:3px;width:20px;height:20px;font-size:11px}.experimental .rarity{display:none}.experimental .tabs button{padding:6px 10px}.experimental .picker-head .eyebrow{font-size:9px;letter-spacing:1px}.experimental .filter-controls{display:flex;margin-bottom:16px}.experimental .filter-controls label{margin-bottom:0}.experimental .selection-stat{display:none}.experimental .selection{padding-top:12px}.experimental .selected-title strong{font-size:12px}.experimental .quantity-hint{margin:16px 0}.experimental .quantity-hint br{display:none}.experimental .account{padding:16px}.experimental .account-images>div{width:34px}.experimental .account-images{gap:6px}footer{font-size:10px;display:block;margin-top:32px}footer span{display:block;margin-top:8px}.stepper button{min-width:36px;height:36px}.empty-results{padding:32px 16px}.empty-results h3{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.native .account,.signature .account{display:flex;flex-direction:column}.native .account-bottom,.signature .account-bottom{margin-top:auto}

/* Selected direction B: keep the first screen focused on choosing characters. */
.signature .site-header{height:72px}
.signature .compact-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.signature .preview-note{font-size:11px;color:var(--muted);white-space:nowrap}
.signature .compact-toolbar .filter-controls{border:0;padding:0;margin:0;gap:20px}
.signature .compact-toolbar .filter-controls label{width:256px}
.signature .compact-toolbar input,.signature .compact-toolbar select{min-height:40px;padding:8px 12px}
.signature .picker{padding:18px 0 16px}
.signature .picker-head .eyebrow{display:none}
.signature .picker-head h2{font-size:20px}
.signature .pick-hint{margin:8px 0 14px}
.signature .selection{margin-bottom:24px;padding:12px 0}
.signature .result-head .eyebrow{display:none}
.signature .result-head{margin-bottom:16px}
@media(max-width:900px){
 .signature .compact-toolbar .filter-controls{flex:1}
 .signature .compact-toolbar .filter-controls label{width:auto;flex:1}
}
@media(max-width:720px){
 .signature .site-header{height:64px}
 .signature .compact-toolbar{display:block;padding:12px 0}
 .signature .preview-note{font-size:10px;margin-bottom:8px}
 .signature .compact-toolbar .filter-controls{gap:12px}
 .signature .compact-toolbar .filter-controls label>span{margin-bottom:4px}
 .signature .picker{padding:14px 0}
 .signature .picker-head h2{font-size:18px}
 .signature .selection{padding:12px 0 16px}
}

/* Show both inventory types together using smaller, consistently sized portraits. */
.signature .picker-summary{font-size:12px;color:var(--muted)}
.signature #characters{display:block}
.signature .character-group{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center}
.signature .character-group+.character-group{margin-top:16px}
.signature .character-group h3{font-size:13px;font-weight:600}
.signature .character-group h3 span{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:4px}
.signature .character-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px}
.signature .character-grid .character{width:100%;max-width:88px;justify-self:center}
.signature .character-grid .portrait img{height:88px;aspect-ratio:auto;object-position:center 30%}
.signature .character-grid .character-name{font-size:11px;margin-top:6px}
.signature .character-grid .counter{width:22px;height:22px;right:5px;bottom:5px;font-size:12px}
.signature .character-grid .rarity{font-size:8px;left:6px;top:5px}
@media(max-width:1050px){
 .signature .character-group{grid-template-columns:36px minmax(0,1fr);gap:12px}
 .signature .character-grid{gap:8px}
 .signature .character-grid .portrait img{height:auto;aspect-ratio:1}
}
@media(max-width:720px){
 .signature .picker-summary{font-size:10px}
 .signature .character-group{display:block}
 .signature .character-group h3{font-size:12px;display:flex;align-items:center;gap:8px;margin:0 0 8px}
 .signature .character-group h3 span{display:inline;margin:0;font-size:10px}
 .signature .character-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 8px}
 .signature .character-grid .character{max-width:64px}
 .signature .character-grid .portrait img{height:auto;aspect-ratio:1}
 .signature .character-grid .character-name{font-size:10px;margin-top:4px}
}

.account h3{overflow-wrap:anywhere}

/* Identifiers and quantities use lining, tabular numerals instead of editorial figures. */
.signature .account h3,
.signature .ssr-count strong,
.signature .stepper>span,
.signature .counter,
.signature #match-count{
 font-family:'Consolas','SFMono-Regular','Liberation Mono',monospace;
 font-variant-numeric:lining-nums tabular-nums;
 font-feature-settings:"lnum" 1,"tnum" 1;
}
.signature .account h3{font-size:15px;line-height:1.5;letter-spacing:0;font-weight:500}
.signature .account-top{align-items:center;gap:16px}
.signature .account-top>div:first-child{min-width:0}
.signature .ssr-count{flex-shrink:0;align-items:baseline}
.signature .ssr-count strong{font-size:28px;line-height:1;font-weight:500}
@media(max-width:720px){
 .signature .account h3{font-size:12px}
 .signature .account-top{gap:8px}
 .signature .ssr-count strong{font-size:24px}
}

/* Production states and controls. */
.signature .compact-toolbar{justify-content:flex-end}
.signature #languageInput{margin-left:auto;flex-shrink:0}
@media(max-width:720px){.signature .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto}.signature .brand{min-width:0;font-size:14px;letter-spacing:0}.signature .brand>span{min-width:0;overflow-wrap:anywhere}.signature .brand svg{flex-shrink:0}.signature .site-header nav{grid-row:2;grid-column:1 / -1}.signature #languageInput{grid-row:1;grid-column:2;align-self:start;margin-left:0}}
@media(min-width:721px){.signature .character-group{grid-template-columns:88px minmax(0,1fr)}html[lang="ja"] .signature .character-group h3{white-space:nowrap;font-size:12px}}
.signature .character-grid .character{align-self:start}
@media(max-width:420px){.signature .result-head{flex-wrap:wrap;gap:8px}.signature .result-head h2{width:100%}.signature .result-head .result-note{margin-left:0}}
#languageInput{min-height:44px;max-width:132px;padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text);margin-left:auto}
@media(max-width:720px){.signature .site-header{flex-wrap:wrap;height:auto;gap:8px 16px;padding:12px 0}.signature .site-header nav{height:44px}.signature #languageInput{margin-left:auto}.signature .picker-head{flex-wrap:wrap}.signature .picker-summary{white-space:normal}}
[hidden]{display:none!important}
.signature .picker-head h1{font-size:20px;line-height:1.5;letter-spacing:-.5px}
.signature #selected-list{min-width:0}
.signature .selection .section-label{width:140px}
.signature .selection .empty-list{padding:8px 0}
.signature .selected-title strong{font-size:12px}
#selectedRoleCount{font-family:Consolas,monospace;color:var(--accent);font-variant-numeric:lining-nums tabular-nums}
.import-controls{display:flex;gap:8px;align-items:center}
.site-status{font-size:12px;color:var(--muted);margin-bottom:12px;min-height:18px}
.more{text-align:center;margin-top:20px}
.more button{min-width:160px;border:1px solid var(--line);background:var(--surface)}
button:disabled{cursor:wait;opacity:.65}
#accountList{scroll-margin-top:20px}
.signature .character-name{white-space:normal;overflow-wrap:anywhere;line-height:1.35;min-height:30px}
.signature{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC','Segoe UI',sans-serif;--muted:#61564c}
.signature .account-images>div>span{font-size:12px;line-height:1.5;color:var(--text)}
.signature .account h3{font-family:inherit;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.signature .server-label,.signature .account-bottom>span{font-size:12px;letter-spacing:0}
.signature .account-bottom button{font-size:14px}
.signature .character-grid .character-name{font-size:12px}
.signature .compact-toolbar .filter-controls{flex-wrap:wrap}
.signature .header-note{max-width:260px;text-align:right}
@media(max-width:720px){.signature .stepper button{width:44px;height:44px}.signature .text-button,.signature .copy-btn{min-height:44px}.signature .filter-controls input,.signature .filter-controls select{min-height:44px}}
@media(max-width:720px){.signature .picker-head h1{font-size:18px}.signature .account h3{font-size:14px}.signature .compact-toolbar .import-controls{margin-bottom:8px}.signature .selection .section-label{width:auto}.signature .header-note{display:none}}

.signature .result-head{align-items:center}
.signature .result-tools{display:flex;align-items:center;justify-content:flex-end;gap:20px;flex-wrap:wrap}
.signature .result-sort{display:flex;align-items:center;gap:12px;white-space:nowrap}
.signature .result-sort>span{font-size:12px;color:var(--muted)}
.signature .result-sort select{min-height:44px;max-width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text)}
@media(max-width:720px){.signature .result-head{flex-wrap:wrap}.signature .result-tools{width:100%;justify-content:space-between;gap:12px}.signature .result-tools .result-note{flex-basis:100%}.signature .result-sort{width:100%}.signature .result-sort select{flex:1;min-width:0}}

.signature .header-selectors{display:flex;align-items:center;gap:16px;margin-left:auto;min-width:0}
.signature .header-server,.signature .result-search label{display:flex;align-items:center;gap:12px;min-width:0}
.signature .header-server>span,.signature .result-search label>span{font-size:12px;color:var(--muted);white-space:nowrap}
.signature .header-server select,.signature .result-search input{min-height:44px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text)}
.signature .header-server select{max-width:190px}
.signature .result-search input{width:220px}
.signature .result-head{flex-wrap:wrap}
@media(max-width:720px){.signature .header-selectors{grid-column:1/-1;grid-row:2;width:100%;margin:0;gap:12px}.signature .header-server{flex:1}.signature .header-server select{flex:1;width:100%;max-width:none}.signature .site-header nav{grid-row:3}.signature .header-selectors #languageInput{margin:0}.signature .result-search{width:100%}.signature .result-search input{flex:1;width:100%}}