/* Scoped controls only; original cards, names and grid dimensions are untouched. */
.name-tone-filter{display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;max-width:240px;font-size:12px;}
.name-tone-filter .name-tone-filter-trigger{display:inline-flex;align-items:center;gap:6px;max-width:190px;min-height:28px;padding:4px 8px;font-size:12px;white-space:nowrap;}
.name-tone-filter [data-tone-summary]{min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:130px;}
.name-tone-filter .name-tone-filter-clear{font-size:12px;padding:3px 5px;min-height:26px;white-space:nowrap;background:transparent;}
.name-tone-filter-overlay{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.18);}
.name-tone-filter-panel{width:min(620px,100%);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line,#d8e1dc);border-radius:14px;padding:16px;background:var(--panel,#fff);color:var(--ink,#263b32);box-shadow:0 14px 48px #0002;font:13px/1.5 system-ui,-apple-system,'PingFang SC',sans-serif;}
.name-tone-filter-panel header,.name-tone-filter-panel footer{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.name-tone-filter-panel header strong{font-size:15px;}
.name-tone-filter-panel button{font:inherit;padding:5px 10px;min-height:30px;}
.name-tone-filter-panel p,.name-tone-filter-panel footer span{font-size:12px;color:var(--muted,#6b7470);}
.name-tone-filter-panel fieldset{border:0;margin:10px 0;padding:0;}
.name-tone-filter-panel legend{font-size:12px;color:var(--muted,#6b7470);margin-bottom:5px;}
.name-tone-filter-panel fieldset>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.name-tone-filter-panel label{display:flex;align-items:center;gap:5px;border:1px solid var(--line,#d8e1dc);border-radius:6px;padding:6px 7px;cursor:pointer;white-space:nowrap;}
.name-tone-filter-panel input{width:14px;height:14px;margin:0;accent-color:var(--primary,#316b55);}
.name-tone-filter-panel label:has(input:checked){background:var(--soft,#edf4ee);border-color:var(--primary,#316b55);}
.m-main .name-tone-filter{max-width:100%;margin-bottom:0;}
@media(max-width:600px){.name-tone-filter-overlay{padding:12px;align-items:end;}.name-tone-filter-panel{padding:12px;}.name-tone-filter-panel fieldset>div{gap:4px;}.name-tone-filter-panel label{font-size:12px;padding:7px 3px;gap:3px;}.name-tone-filter-panel footer span{display:none;}.name-tone-filter .name-tone-filter-trigger{max-width:235px;}.name-tone-filter [data-tone-summary]{max-width:150px;}}

html[data-ui=mobile] .m-main .name-tone-filter-trigger{max-width:112px;padding:4px 5px;font-size:12px;gap:4px;}
html[data-ui=mobile] .m-main .name-tone-filter [data-tone-summary]{max-width:55px;}
html[data-ui=mobile] .m-main .name-tone-filter-clear{display:none;}
.name-tone-filter .name-tone-filter-trigger{border:1px solid var(--line,#cbd7cf);border-radius:6px;background:var(--panel,#fff);color:var(--ink,#365a46);line-height:18px;}
.name-tone-filter .name-tone-filter-clear{border:0;color:var(--muted,#6b7470);}
.name-tone-filter-panel button{border:1px solid var(--line,#cbd7cf);border-radius:6px;background:var(--panel,#fff);color:var(--ink,#365a46);}
.name-tone-filter-panel [data-tone-apply]{background:var(--primary,#38654c);border-color:var(--primary,#38654c);color:#fff;}
