#compareProfilesBtn[hidden] { display: none !important; }
.profile-compare { box-sizing: border-box; width: calc(100vw - 32px); max-width: 1800px; height: calc(100dvh - 32px); max-height: none; padding: 0; border: 1px solid #505860; border-radius: 12px; color: #eee; background: #202427; font: 14px Arial, sans-serif; overflow: hidden; }
.profile-compare[open] { display: flex; flex-direction: column; }
.profile-compare::backdrop { background: #000b; }
.profile-compare * { box-sizing: border-box; }
.profile-compare header, .profile-compare footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: #282d31; }
.profile-compare header strong { font-size: 20px; }
.profile-compare small { display: block; margin-top: 5px; color: #b3c0c8; font-size: 12px; line-height: 1.4; }
.profile-compare button, .profile-compare input, .profile-compare select { color: #eee; background: #30373c; border: 1px solid #59636b; border-radius: 5px; padding: 7px 9px; font: inherit; min-width: 0; }
.profile-compare button { cursor: pointer; }
.profile-compare button:hover { background: #414e57; }
.profile-compare button:disabled { opacity: .4; cursor: default; }
.profile-compare :focus-visible { outline: 2px solid #63d8ff; outline-offset: 2px; }
.pc-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #414950; }
.pc-controls label { display: flex; flex-direction: column; gap: 6px; }
.pc-controls select { max-width: 320px; }
.pc-controls input[type=number] { width: 100px; }
.pc-controls .pc-checkbox { flex-direction: row; align-items: center; padding: 8px 0; }
.pc-workspace { display: flex; flex: 1; min-height: 0; }
.pc-workspace aside { width: 355px; flex-shrink: 0; overflow: auto; padding: 12px; border-right: 1px solid #414950; }
.pc-workspace summary { cursor: pointer; font-weight: bold; }
.pc-workspace p { color: #b3c0c8; line-height: 1.5; font-size: 12px; }
.pc-mapping-row { display: block; margin: 12px 0; font-size: 12px; overflow-wrap: anywhere; }
.pc-mapping-row select { display: block; width: 100%; margin-top: 6px; }
.pc-mapping-row input { display: block; width: 100%; margin-top: 6px; }
.pc-mapping-row select[hidden] { display: none; }
.pc-marker-visual { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.pc-marker-visual > span { min-width: 0; overflow-wrap: anywhere; }
.pc-marker-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.pc-style-picker { margin-top: 6px; border: 1px solid #59636b; border-radius: 5px; background: #30373c; }
.pc-style-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; font-weight: normal; list-style: none; }
.pc-style-picker > summary::-webkit-details-marker { display: none; }
.pc-style-picker > summary::after { content: '▾'; flex-shrink: 0; }
.pc-style-picker[open] > summary::after { content: '▴'; }
.pc-style-choices { max-height: 260px; overflow: auto; padding: 4px; border-top: 1px solid #59636b; }
.profile-compare .pc-style-choices button { display: block; width: 100%; margin: 2px 0; border: 0; }
.profile-compare .pc-style-choices button[aria-pressed=true] { background: #354e60; }
.pc-inspection { max-height: 120px; overflow: auto; padding: 10px 14px; background: #233440; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.pc-list-controls { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 8px; }
.pc-selection { display: flex; gap: 6px; }
.pc-selection button { font-size: 12px; }
.pc-results { margin-top: 12px; }
.pc-result { display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin-bottom: 5px; border-left: 3px solid #74828c; background: #282e33; }
.pc-result.pc-unique { border-color: #78d8a1; }
.pc-result.pc-duplicate, .pc-result.pc-internal { border-color: #ffb65c; }
.pc-result.pc-focused { background: #354e60; outline: 1px solid #63d8ff; }
.pc-result button { flex: 1; border: 0; padding: 7px 2px; background: transparent; text-align: left; overflow-wrap: anywhere; }
.pc-result strong { font-size: 13px; }
.pc-map-area { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pc-legend { padding: 10px 14px; font-size: 12px; background: #252a2e; }
.pc-source { color: #63d8ff; } .pc-target { color: #ffb65c; }
.pc-maps { display: flex; flex: 1; min-height: 0; }
.pc-maps > div { flex: 1; min-width: 0; background: #121617; }
.pc-maps > div + div { border-left: 2px solid #67737c; }
.pc-overlay [data-map="1"] { display: none; }
.profile-compare .pc-transfer { background: #235f48; border-color: #51a97d; flex-shrink: 0; }
.profile-compare footer { min-height: 60px; font-size: 13px; }
@media (max-width: 850px) {
    .profile-compare { width: 100vw; height: 100dvh; max-width: none; margin: 0; border-radius: 0; }
    .pc-workspace { flex-direction: column-reverse; }
    .pc-workspace aside { width: 100%; height: 42%; border-right: 0; border-top: 1px solid #414950; }
    .pc-map-area { min-height: 160px; }
    .pc-controls { padding: 8px; gap: 6px; }
    .pc-controls select { max-width: 210px; }
    .pc-controls label { font-size: 12px; }
    .profile-compare header, .profile-compare footer { padding: 10px; }
    .profile-compare header strong { font-size: 17px; }
    .profile-compare footer { align-items: stretch; flex-direction: column; gap: 6px; }
}