/* The values remain native form controls; the visible picker follows the site's glass material. */
.picker-control { position: relative; display: inline-flex; min-width: 0; width: 100%; vertical-align: middle; }
.picker-control > .picker-native { display: none !important; }
.picker-trigger, .glass-picker button { position: relative; isolation: isolate; overflow: hidden; }
.picker-trigger { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; border: 1px solid #d0dff645; border-radius: 12px; background: linear-gradient(145deg,#e7f2ff0d,transparent 65%),#12203575; color: #edf2fa; font: inherit; font-size: 13px; text-align: left; cursor: pointer; box-shadow: inset 0 1px #f5f8ff14,0 3px 10px #03071215; transition: background .2s,border-color .2s,box-shadow .2s; }
.picker-trigger:hover { background-color: #27344b80; border-color: #d2e3ff80; }
.picker-trigger[aria-expanded="true"], .picker-trigger:focus-visible { outline: 0; border-color: #c3dcffb0; box-shadow: inset 0 1px #f5f8ff2b,0 0 0 3px #a6caff20; }
.picker-trigger:disabled { cursor: not-allowed; opacity: .45; }
.picker-trigger.is-placeholder { color: #aab7ce; }
.picker-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-icon { width: 17px; height: 17px; flex-shrink: 0; color: #b7c9e5; }
.picker-icon svg { display: block; width: 100%; height: 100%; }
.account-switch .picker-control { width: 194px; }
.account-switch .picker-trigger { min-height: 40px; font-size: 12px; padding: 9px 12px; background-color: #2025329e; border-color: #d5e1f02b; }
.toolbar-filters > .picker-control { min-width: 155px; }
.leave-month-field > .picker-control, .inline-field > .picker-control { width: 190px; }
.game-filterbar > label > .picker-control { width: 132px; }
.game-filterbar .picker-trigger { min-height: 42px; font-size: 12px; }
.glass-picker { position: fixed; margin: 0; inset: auto; padding: 8px; width: 304px; max-width: calc(100vw - 32px); max-height: min(460px,calc(100dvh - 32px)); overflow: hidden; border: 1px solid #b8cdea69; border-radius: 20px; background: linear-gradient(145deg,#d7e8ff12,transparent 48%),#111b2cf2; color: #edf2fa; box-shadow: inset 0 1px #f5faff39,0 20px 70px #0009,0 2px 10px #0004; -webkit-backdrop-filter: blur(30px) saturate(135%); backdrop-filter: blur(30px) saturate(135%); animation: picker-arrive .18s cubic-bezier(.2,.7,.2,1) both; }
.glass-picker::backdrop { background: #0207120a; }
.picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 6px 10px 10px; color: #a6b7d2; font-size: 11px; font-weight: 550; letter-spacing: .02em; border-bottom: 1px solid #c3d5f018; }
.picker-dismiss { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d6e6ff20; background: #c0d9ff08; color: #afbed7; font-size: 20px; cursor: pointer; }
.picker-dismiss:hover { background: #c0d9ff18; color: white; }
.picker-options { padding: 6px 0; overflow-y: auto; max-height: min(354px,calc(100dvh - 100px)); overscroll-behavior: contain; scrollbar-width: thin; }
.picker-group { padding: 13px 12px 5px; color: #93a9ca; font-size: 10px; letter-spacing: .08em; }
.picker-group:not(:first-child) { margin-top: 7px; border-top: 1px solid #d2e4ff13; }
.picker-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; margin: 3px 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #e5ecf9; font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background .14s,border-color .14s; }
.picker-option:hover, .picker-option:focus-visible { outline: 0; background: #e0eeff13; border-color: #d2e2fa33; }
.picker-option[aria-selected="true"] { color: #eff5ff; background: linear-gradient(130deg,#b5d4ff29,#a4bcff13); border-color: #bfd7ff65; box-shadow: inset 0 1px #e2efff20; }
.picker-option:disabled { color: #8490a9; opacity: .5; cursor: not-allowed; }
.picker-tick { width: 16px; height: 16px; visibility: hidden; color: #c2e3ff; }
.picker-tick svg { width: 100%; height: 100%; }
.picker-option[aria-selected="true"] .picker-tick { visibility: visible; }
.picker-calendar { padding: 5px 8px 2px; }
.picker-year-nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 14px; }
.picker-year-nav > strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.picker-year-nav > button { width: 36px; height: 36px; border: 1px solid #bdd3f030; border-radius: 11px; background: #d6e9ff09; color: #d2e2f7; font-size: 24px; cursor: pointer; }
.picker-year-nav > button:hover { background: #d6e9ff1c; border-color: #bdd3f073; }
.picker-year-nav > button:disabled { opacity: .3; cursor: not-allowed; }
.picker-month-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.picker-month { position: relative; min-height: 47px; border: 1px solid #c6d7f01c; border-radius: 12px; background: #b8d3ff05; color: #bfcde4; font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; transition: background .15s,border-color .15s; }
.picker-month:hover, .picker-month:focus-visible { background: #b8d3ff18; border-color: #c6d7f079; outline: none; }
.picker-month[aria-selected="true"] { background: linear-gradient(140deg,#deebff,#adccf4); border-color: #e2eeff; color: #172844; box-shadow: 0 4px 12px #0716293d,inset 0 1px #fff9; }
.picker-month.is-current::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #99d8c9; bottom: 5px; left: calc(50% - 2px); }
.picker-month.is-current[aria-selected="true"]::after { background: #2b655d; }
.picker-month:disabled { opacity: .3; cursor: not-allowed; }
.picker-calendar-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid #c1d8fc20; }
.picker-calendar-foot > span { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #94a9c7; }
.picker-calendar-foot i { width: 4px; height: 4px; border-radius: 50%; background: #99d8c9; }
.picker-calendar-foot > button { min-height: 34px; padding: 5px 10px; border: 1px solid #b9d2f12d; border-radius: 10px; color: #d5e5fd; background: #c5dfff0a; font: inherit; font-size: 11px; cursor: pointer; }
.picker-calendar-foot > button:hover { background: #c5dfff20; }
.salary-summary { display: grid; grid-template-columns: repeat(var(--summary-count,3),minmax(0,1fr)); }
.salary-summary > div { min-width: 0; }
.salary-summary .summary-bonus > strong { color: #decffa; }
.salary-summary .summary-reimbursement > strong { color: #b7e7d9; }
.salary-summary .summary-status > strong { color: #edf2fa; }
@keyframes picker-arrive { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@media(max-width:760px) {
  .account-switch .picker-control { width: 175px; }
  .account-switch .picker-trigger { padding-inline: 10px; }
  .salary-summary { grid-template-columns: 1fr 1fr; }
  .salary-summary > .summary-status { grid-column: 1/-1; }
  .salary-summary.summary-count-2 > div:first-child { border-right: 0; }
  .salary-summary.summary-count-2 > .summary-total { grid-column: 1/-1; }
  .salary-summary.summary-count-2 > .summary-total > strong { font-size: 30px; }
  .salary-summary.summary-count-4 > .summary-total { grid-column: 1/-1; border-right: 0; }
  .modal .picker-trigger { font-size: 16px; min-height: 48px; }
}
@media(max-width:600px) {
  .glass-picker { top: auto !important; left: 12px !important; right: 12px !important; bottom: max(12px,env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none; max-height: calc(100dvh - 48px); border-radius: 24px; padding: 12px; }
  .glass-picker::backdrop { background: #02071255; }
  .picker-heading { padding: 0 2px 10px 8px; font-size: 12px; }
  .picker-dismiss { width: 36px; height: 36px; }
  .picker-options { max-height: min(420px,calc(100dvh - 150px)); }
  .picker-option { min-height: 48px; font-size: 15px; padding: 11px 14px; }
  .picker-month { min-height: 52px; font-size: 15px; }
  .picker-year-nav > button { width: 42px; height: 42px; }
}
@media(max-width:370px) {
  .account-switch .picker-control { width: 148px; }
  .account-switch .picker-trigger { font-size: 11px; gap: 7px; }
  .leave-month-field > .picker-control, .inline-field > .picker-control { width: 162px; }
}
@media(prefers-reduced-motion:reduce) { .glass-picker { animation: none; } .picker-trigger, .picker-option, .picker-month { transition: none; } }
@media(prefers-reduced-transparency:reduce) { .glass-picker { background: #172235; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media print { .glass-picker { display: none; } }