.md3-select-card-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.md3-select-card {
    position: relative;
    width: 100%;
    z-index: 1;
}

.md3-select-card__trigger {
    width: 100%;
    min-height: 44px;
    height: 44px;
    border-radius: var(--md3-shape-md, 12px);
    border: var(--md3-border-thin, 1px) solid var(--md3-color-outline, #79747e);
    background: var(--md3-color-surface, #fafcff);
    color: var(--md3-color-on-surface, #1a1c1e);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--md3-spacing-2, 8px);
    padding: 0 10px 0 12px;
    font-size: var(--md3-typescale-body-medium-size, 14px);
    line-height: 1.25;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--md3-motion-duration-short, 150ms) var(--md3-motion-easing-standard, ease);
}

.md3-select-card__text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md3-select-card__arrow {
    font-size: 22px !important;
    line-height: 1 !important;
    color: var(--md3-color-on-surface-variant, #43474e);
}

.md3-select-card__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 10060;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border-radius: var(--md3-shape-md, 12px);
    border: var(--md3-border-thin, 1px) solid var(--md3-color-outline-variant, #c3c6cf);
    background: var(--md3-color-surface-container-high, #e7e9ed);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    max-height: 220px;
    overflow: auto;
}

.md3-select-card__menu[hidden] {
    display: none !important;
}

.md3-select-card__option {
    min-height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    color: var(--md3-color-on-surface, #1a1c1e);
    cursor: pointer;
    transition: background var(--md3-motion-duration-short, 150ms);
}

.md3-select-card__option:hover {
    background: color-mix(in srgb, var(--md3-color-on-surface, #1a1c1e) 8%, transparent);
}

.md3-select-card__option.is-selected {
    background: color-mix(in srgb, var(--md3-color-primary, #1976d2) 16%, transparent);
    color: var(--md3-color-primary, #1976d2);
    font-weight: 500;
}

.md3-select-card--open {
    z-index: 10050;
}

.md3-select-card--open .md3-select-card__trigger,
.md3-select-card__trigger:focus-visible {
    border-color: var(--md3-color-primary, #1976d2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md3-color-primary, #1976d2) 22%, transparent);
    outline: none;
}

/* ====== Dark Mode ====== */
:root[data-theme="dark"] .md3-select-card__trigger,
:root.theme-dark .md3-select-card__trigger {
    background: var(--md3-color-surface-container-low, #1a1d21);
    color: var(--md3-color-on-surface, #f5f5f5);
    border-color: var(--md3-color-outline, #a0a0a0);
}

:root[data-theme="dark"] .md3-select-card__arrow,
:root.theme-dark .md3-select-card__arrow {
    color: var(--md3-color-on-surface-variant, #e8e8e8);
}

:root[data-theme="dark"] .md3-select-card__menu,
:root.theme-dark .md3-select-card__menu {
    background: var(--md3-color-surface-container-high, #2e343b);
    border-color: var(--md3-color-outline-variant, #6a6a6a);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

:root[data-theme="dark"] .md3-select-card__option,
:root.theme-dark .md3-select-card__option {
    color: var(--md3-color-on-surface, #f5f5f5);
}

:root[data-theme="dark"] .md3-select-card__option:hover,
:root.theme-dark .md3-select-card__option:hover {
    background: color-mix(in srgb, var(--md3-color-primary) 12%, transparent);
}

:root[data-theme="dark"] .md3-select-card__option.is-selected,
:root.theme-dark .md3-select-card__option.is-selected {
    background: color-mix(in srgb, var(--md3-color-primary) 24%, transparent);
    color: var(--md3-color-primary);
    font-weight: 500;
}

:root[data-theme="dark"] .md3-select-card--open .md3-select-card__trigger,
:root[data-theme="dark"] .md3-select-card__trigger:focus-visible,
:root.theme-dark .md3-select-card--open .md3-select-card__trigger,
:root.theme-dark .md3-select-card__trigger:focus-visible {
    border-color: var(--md3-color-primary, #18ffff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md3-color-primary, #18ffff) 25%, transparent);
}