.ex { position: relative; display: flex; width: 100%; height: calc(100vh - 64px); margin-top: 64px; min-height: 560px; background: #0a1622; }
    .ex-panel { width: 322px; flex: 0 0 322px; overflow-y: auto; background: #0a1622; color: #fff; padding: 1.1rem 1.2rem 2rem; border-right: 1px solid rgba(0,148,191,0.3); }
    .ex-map { position: relative; flex: 1; }
    #ex-map { position: absolute; inset: 0; }
    .ex-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
    .ex-panel h1 { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 0.15rem; line-height: 1.2; }
    .ex-panel h1 b { color: #0094BF; font-weight: 400; }
    .ex-panel h1 .h1-sub { display: block; font-style: italic; }
    .ex-panel .sub { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-bottom: 1rem; max-width: 200px; }
    .units { display: inline-flex; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
    .units button { background: transparent; color: rgba(255,255,255,0.7); border: none; padding: 0.25rem 0.6rem; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
    .units button.on { background: var(--teal); color: #fff; }
    .fg { margin-bottom: 1.05rem; }
    .fg > label { display: block; font-size: 0.8rem; font-weight: 700; color: #cfe9ff; margin-bottom: 0.4rem; }
    .fg-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
    .fg-head label { font-size: 0.8rem; font-weight: 700; color: #cfe9ff; margin: 0; }
    .row { display: flex; gap: 0.5rem; align-items: center; }
    .ex-panel input, .ex-panel select { width: 100%; background: #102a47; color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 0.4rem 0.5rem; font-family: var(--sans); font-size: 0.86rem; }
    .ex-panel .row span { font-size: 0.78rem; color: rgba(255,255,255,0.6); white-space: nowrap; }
    .cats { display: flex; flex-wrap: wrap; gap: 0.3rem; }
    .cats label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; background: #102a47; border: 1px solid rgba(255,255,255,0.18); border-radius: 100px; padding: 0.2rem 0.55rem; cursor: pointer; }
    .cats label i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
    .cats input { width: auto; }
    .hintrow { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 0.3rem; }
    .btn { width: 100%; background: var(--teal); color: #fff; border: none; border-radius: 6px; padding: 0.5rem; font-weight: 700; cursor: pointer; font-size: 0.86rem; }
    .btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.25); }
    #ex-count { font-size: 0.95rem; font-weight: 700; color: #cfe9ff; margin: 0.2rem 0 0.6rem; }
    #ex-list { max-height: 220px; overflow-y: auto; border-top: 1px solid rgba(255,255,255,0.1); }
    /* List items are built in JS, so they never get Astro's scope attribute — scope
       these to the unique #ex-list id with  so the rules actually apply. */
    #ex-list .item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.1rem; font-size: 0.82rem; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; }
    #ex-list .item:hover { color: #34c3e8; }
    #ex-list .item .nm { flex: 1 1 auto; min-width: 0; }
    #ex-list .item .totrack { color: #34c3e8; text-decoration: none; font-size: 0.9rem; margin-left: 0.5rem; flex: 0 0 auto; }
    #ex-list .item .totrack:hover { color: #fff; }
    .pickhint { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(10,22,34,0.92); color: #fff; font-size: 0.8rem; padding: 0.45rem 0.9rem; border-radius: 7px; display: none; }
    @media (max-width: 760px) { .ex { flex-direction: column; height: auto; } .ex-panel { width: 100%; flex: none; } .ex-map { height: 60vh; } }
  

.ex-panel { width:370px; flex-basis:370px; background:linear-gradient(180deg,#102430,#0b1925); padding:24px; }
.ex-panel .sub { max-width:260px; color:#a6c1ce; font-size:14px; }
.ex-panel h1 { font-size:25px; }
.fg { padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #ffffff12; }
.ex-panel input, .ex-panel select { background:#142e3d; min-width:0; }
.ex-panel input:focus-visible,.ex-panel button:focus-visible,.ex-panel a:focus-visible,.ex-panel select:focus-visible { outline:2px solid #61d8eb; outline-offset:2px; }
.ex-panel input[aria-invalid=true] { border-color:#ff8e82; }
#ex-count { margin-top:22px; }
#ex-error { color:#ffc5bc; padding:12px 0; font-size:14px; }
#ex-list { max-height:390px; margin-top:12px; }
#ex-list .item { padding:10px 0; gap:12px; }
#ex-list .nm { background:none; border:0; color:inherit; text-align:left; font:inherit; cursor:pointer; padding:4px; line-height:1.5; }
#ex-list .totrack { font-size:13px; }
.sort-label { font-size:13px; color:#a6c1ce; }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; font-size:12px; }
.pagination button { background:#142e3d; border:1px solid #345565; border-radius:6px; color:#d3edf4; padding:8px; cursor:pointer; }
.pagination button:disabled { opacity:.4; cursor:default; }
.map-key { position:absolute; bottom:30px; left:16px; right:55px; width:fit-content; background:#0a1622e8; border:1px solid #345565; border-radius:8px; padding:9px 12px; color:#cee3eb; font-size:13px; pointer-events:none; }
@media(max-width:760px) { .ex-panel { width:100%; flex-basis:auto; } .ex-map { min-height:440px; } }