:root { font-family:Inter,sans-serif; color:#164F57; font-size:14px; --primary:#3D96A2; --dark:#164F57; --border:#D5E5E3; }
* { box-sizing:border-box; }
body { margin:0; background:transparent; }
button,input { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
#filters { padding:6px; }
.territories { border:0; padding:0; margin:0 0 24px; min-width:0; }
.territories legend { font-weight:500; margin-bottom:10px; padding:0; }
.territory-options { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:#F2F8F7; border:1px solid var(--border); border-radius:10px; }
.territory-options label { position:relative; cursor:pointer; }
.territory-options input { position:absolute; opacity:0; width:1px; height:1px; }
.territory-options span { display:block; padding:10px 14px; border-radius:7px; font-size:13px; }
.territory-options input:checked + span { background:#1C636D; color:white; }
.territory-options input:focus-visible + span { outline:2px solid var(--dark); outline-offset:2px; }
.fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.field { position:relative; min-width:0; }
.field-title { display:block; margin:0 0 10px; font-size:14px; font-weight:500; }
.trigger { display:flex; align-items:center; gap:12px; width:100%; min-height:50px; padding:12px 16px; background:white; border:1px solid var(--border); border-radius:9px; color:var(--dark); text-align:left; transition:border-color .2s,box-shadow .2s; }
.trigger:hover { border-color:var(--primary); }
.trigger[aria-expanded="true"] { border-color:var(--primary); box-shadow:0 0 0 4px rgb(61 150 162 / 12%); }
.summary { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.count { padding:2px 7px; background:#E7F4F1; border-radius:5px; font-size:12px; font-weight:600; }
.chevron { width:8px; height:8px; border:solid var(--dark); border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg); transition:transform .2s; flex-shrink:0; }
[aria-expanded="true"] .chevron { transform:translateY(2px) rotate(225deg); }
.panel { position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:10; margin:0; padding:8px; background:white; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgb(22 79 87 / 7%); }
.options { max-height:240px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.search { display:block; width:100%; min-height:42px; margin:0 0 8px; padding:10px 12px; color:var(--dark); background:#F2F8F7; border:1px solid var(--border); border-radius:7px; font-size:16px; }
.search::placeholder { color:#57787C; }
.search:focus { border-color:var(--primary); }
.empty-search { margin:0; padding:16px 10px; line-height:1.5; color:#42676C; font-size:13px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip { display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:#F2F8F7; color:var(--dark); font-size:12px; line-height:1.5; text-align:left; }
.chip > span:first-child { min-width:0; overflow-wrap:anywhere; }
.chip > span:last-child { flex-shrink:0; font-size:18px; line-height:1; }
.chip:hover { background:#E7F4F1; border-color:var(--primary); }
.option { display:flex; align-items:flex-start; gap:10px; padding:12px 10px; border-radius:7px; color:#2D2D2D; line-height:1.45; cursor:pointer; user-select:none; -webkit-user-select:none; }
.option > span { flex:1; min-width:0; }
.option:hover,.option:has(input:checked) { background:#F2F8F7; }
.option input { appearance:none; flex:0 0 20px; width:20px; height:20px; margin:0; border:1.5px solid var(--primary); border-radius:6px; background:white; display:grid; place-content:center; cursor:pointer; transition:background-color .16s; }
.option input:checked { background:#1C636D; border-color:#1C636D; }
.option input::before { content:""; width:6px; height:10px; margin-top:-2px; border:solid white; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .16s; }
.option input:checked::before { transform:rotate(45deg) scale(1); }
.panel-actions { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #EDF3F2; margin-top:6px; padding:10px 6px 2px; }
.panel-actions button,#reset { border:0; background:transparent; color:#1C636D; padding:6px 2px; font-size:13px; text-underline-offset:4px; }
.panel-actions button:hover,#reset:hover { text-decoration:underline; }
.panel-actions .done { font-weight:600; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:34px; margin-top:12px; font-size:12px; color:#42676C; }
button:focus-visible,input:focus-visible { outline:2px solid var(--dark); outline-offset:3px; }
@media(max-width:640px) { .fields { grid-template-columns:1fr; gap:20px; } .footer { flex-wrap:wrap; min-height:64px; } }
@media(prefers-reduced-motion:reduce) { *,*::before { transition:none !important; } }
@media(forced-colors:active) { .option input { appearance:auto; } .option input::before { content:none; } }
