/* Preserve the original form controls while replacing browser-owned popup windows. */
.select-control { position: relative; display: block; min-width: 0; width: 100%; text-transform: none; letter-spacing: normal; }
.select-control[hidden] { display: none !important; }
select.pretty-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important; clip-path: inset(50%) !important; overflow: hidden !important; white-space: nowrap !important; pointer-events: none !important; }
/* Closed controls share the popup palette, with a separate, stable arrow area. */
.pretty-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 7px 9px 7px 15px; border: 1px solid var(--field-line); border-radius: 12px; background: var(--field); background-image: linear-gradient(135deg,color-mix(in srgb,var(--blue) 4%,transparent),transparent 75%); color: var(--ink); font-family: var(--font,system-ui,sans-serif); font-size: 14px; font-weight: 500; line-height: 1.5; text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: background-color .15s, border-color .15s, box-shadow .15s; }
.pretty-trigger:hover:not(:disabled) { background-color: var(--subtle); border-color: var(--line-strong); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.pretty-trigger[aria-expanded="true"] { border-color: var(--blue); background-color: var(--soft); }
.pretty-trigger:disabled { cursor: default; opacity: .5; }
.pretty-value { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pretty-arrow { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb,var(--muted) 8%,transparent); color: var(--muted); transition: background-color .15s,color .15s; }
.pretty-arrow svg, .suggestion-toggle svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.pretty-trigger:hover:not(:disabled) .pretty-arrow, .pretty-trigger[aria-expanded="true"] .pretty-arrow { background: color-mix(in srgb,var(--blue) 12%,transparent); color: var(--accent-ink); }
.pretty-trigger[aria-expanded="true"] .pretty-arrow svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pretty-trigger, .pretty-arrow, .pretty-arrow svg, .suggestion-toggle svg { transition: none; } }
.pretty-popup { position: fixed; inset: auto; z-index: 1000; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--paper-solid); background-image: linear-gradient(140deg,color-mix(in srgb,var(--blue) 7%,transparent),transparent 70%); color: var(--ink); box-shadow: 0 16px 44px rgba(0,0,0,.25); font-family: var(--font-body,inherit); text-transform: none; letter-spacing: normal; }
.pretty-popup::backdrop { background: transparent; }
dialog.pretty-fallback-host { animation: none !important; transform: none !important; }
.pretty-options { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
.pretty-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.pretty-option-text { min-width: 0; overflow-wrap: anywhere; }
.pretty-option:hover:not([aria-disabled="true"]), .pretty-option.is-active:not([aria-disabled="true"]) { background: var(--subtle); color: var(--ink); border-color: var(--line); }
.pretty-option[aria-selected="true"] { background: var(--soft); color: var(--accent-ink); font-weight: 650; }
.pretty-check { flex: 0 0 18px; color: var(--accent-ink); font-size: 16px; text-align: center; }
.pretty-option[aria-disabled="true"] { opacity: .4; cursor: default; }
.pretty-search { flex: 0 0 auto; min-height: 42px; padding: 10px 12px; font-size: 16px; border-radius: 10px; }
.pretty-empty, .pretty-group { padding: 10px 12px; color: var(--muted); font-size: .8rem; }
.pretty-group { font-weight: 700; }
.suggestion-control { position: relative; display: block; width: 100%; min-width: 0; }
.suggestion-control > input { padding-right: 42px; }
.suggestion-toggle { position: absolute; right: 4px; top: 4px; bottom: 4px; display: grid; place-items: center; width: 34px; border-radius: 8px; font-size: 20px; color: var(--muted); }
.suggestion-toggle:hover { background: var(--subtle); color: var(--ink); }
.setting-row > .select-control { width: min(100%,230px); flex: 0 1 230px; }
.evlog-tools > .select-control { width: 150px; flex: 0 1 150px; }
.pointer-navigation :is(button,summary,[role="checkbox"]):focus-visible { outline: none; }
.pointer-navigation .segmented input:focus-visible + span { outline: none; }
.community-card #btn-members.members-btn { display: grid; grid-template-columns: 34px minmax(0,1fr) 14px; align-items: center; gap: 9px; min-height: 66px; height: auto; padding: 11px 10px; line-height: 1.3; transform: none; filter: none; text-shadow: none; box-shadow: none; }
#btn-members .members-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--soft); color: var(--accent-ink); }
#btn-members .members-symbol .icon { width: 19px; height: 19px; }
#btn-members #members-stack { display: none; }
#btn-members .members-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; overflow-wrap: normal; }
.side-col > #community-card #btn-members .members-text b, #btn-members .members-text b { font-family: inherit; font-size: 14px; font-weight: 650; line-height: 1.2; letter-spacing: normal; white-space: nowrap; }
.side-col > #community-card #btn-members .members-text small, #btn-members .members-text small { display: block; font-size: 12px; font-weight: 450; line-height: 1.3; letter-spacing: normal; overflow-wrap: normal; }
#btn-members .members-arrow { width: 14px; height: 14px; margin: 0; color: var(--muted); }
.menu-list { border-radius: 14px; padding: 7px; background: var(--paper-solid); box-shadow: 0 12px 36px rgba(0,0,0,.24); }
.menu-list button { border-radius: 9px; white-space: normal; line-height: 1.4; }
@media (max-width: 600px) { .pretty-trigger { min-height: 46px; } .pretty-option { min-height: 44px; } .setting-row > .select-control { width: 100%; flex-basis: auto; } }
@media (prefers-reduced-motion: reduce) { .pretty-trigger { transition: none; } }