/* Shared native select appearance. Layout widths remain owned by each page.
   Important declarations prevent legacy page/theme rules from changing the skin. */
body {
    --select-surface: var(--ui-surface, #fff);
    --select-hover: var(--ui-surface-alt, #eef2fb);
    --select-ink: var(--ui-ink, #0c1b3a);
    --select-muted: var(--ui-ink-soft, #6f7a93);
    --select-border: var(--ui-border, #d4def2);
    --select-border-hover: var(--ui-border-strong, #9bb3e5);
    --select-focus: #3875d6;
    --select-ring: rgba(56, 117, 214, 0.22);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%234d5875' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --select-color-scheme: light;
}

body.dark-mode,
.account-shell {
    --select-focus: #7eb7ff;
    --select-ring: rgba(126, 183, 255, 0.25);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23b7c4e3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --select-color-scheme: dark;
}

/* Account pages always use a dark surface, independently of the site toggle. */
.account-shell {
    --select-surface: #111b36;
    --select-hover: #131f3c;
    --select-ink: #eaf0ff;
    --select-muted: #8da0c5;
    --select-border: #344a66;
    --select-border-hover: #6b809d;
}

body select {
    box-sizing: border-box;
    min-height: 44px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--select-border) !important;
    border-radius: 12px !important;
    background-color: var(--select-surface) !important;
    color: var(--select-ink) !important;
    font-family: var(--ui-font-sans, system-ui, sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color-scheme: var(--select-color-scheme);
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

body select:not([multiple]):is(:not([size]), [size="1"]) {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 42px !important;
    background-image: var(--select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
}

body select:hover:not(:disabled) {
    border-color: var(--select-border-hover) !important;
    background-color: var(--select-hover) !important;
}

body select:focus {
    outline: 2px solid var(--select-focus) !important;
    outline-offset: 2px !important;
    border-color: var(--select-focus) !important;
    box-shadow: 0 0 0 4px var(--select-ring) !important;
}

body select:disabled {
    background-color: var(--select-hover) !important;
    border-color: var(--select-border) !important;
    color: var(--select-muted) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

body select option,
body select optgroup {
    background-color: var(--select-surface) !important;
    color: var(--select-ink) !important;
}

body select:is([multiple], [size]:not([size="1"])) option:checked {
    background-color: var(--select-focus) !important;
    color: var(--select-surface) !important;
}

body select option:disabled {
    color: var(--select-muted) !important;
}

@media (prefers-reduced-motion: reduce) {
    body select {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    body select:not([multiple]):is(:not([size]), [size="1"]) {
        appearance: auto !important;
        -webkit-appearance: auto !important;
        background-image: none !important;
    }
}