.year-picker-trigger{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto;border:0;background:transparent;min-height:44px;padding:6px 14px;color:#d6deea;cursor:pointer;border-radius:30px}
.year-picker-trigger:hover{background:#ffffff10;color:#fff}
.year-picker-trigger #vaultLabel{margin:0;font:inherit;font-size:.65rem;letter-spacing:.15em}
.year-picker-trigger>span[aria-hidden]{font-size:.9rem;color:var(--accent)}
.journey-actions{display:flex;justify-content:center;align-items:center}
.journey-actions .journey-exit{padding-inline:12px}
#findSongBtn{color:var(--accent)}
.empty-year-alternatives{display:flex;justify-content:center;gap:8px;margin-top:4px}
.empty-year-alternatives[hidden]{display:none}
.empty-year-alternatives button{min-height:44px;border:1px solid #ffffff30;border-radius:30px;background:#09121b99;padding:5px 15px;color:var(--accent);font:500 .7rem system-ui;cursor:pointer}
.year-picker{width:min(540px,calc(100vw - 32px));max-height:calc(100svh - 40px);padding:28px;margin:auto;border:1px solid #ffffff30;border-radius:24px;color:#edf2f7;background:linear-gradient(145deg,#17202c,#0b1019 65%);box-shadow:0 24px 100px #0009;overflow:auto;overscroll-behavior:contain;font-family:system-ui,sans-serif}
.year-picker::backdrop{background:#03060ac9;backdrop-filter:blur(9px)}
.year-picker-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.picker-kicker{font-size:.63rem;letter-spacing:.16em;color:var(--accent);margin:0 0 7px}
.year-picker h2{font-size:1.35rem;letter-spacing:-.025em;line-height:1.4;color:#fff}
#yearPickerClose{flex-shrink:0;width:44px;height:44px;min-height:44px;border:1px solid #ffffff28;border-radius:50%;background:#ffffff08;color:#fff;cursor:pointer;font-size:1.6rem}
#yearPickerRegion{font-size:.8rem;color:#b9c8d8;margin:12px 0 22px}
#yearJumpLabel{display:block;font-size:.75rem;margin-bottom:8px;color:#cbd7e3}
.year-jump-row{display:flex;gap:8px}
#yearJumpInput{width:100%;min-width:0;height:48px;border:1px solid #ffffff35;background:#070c14;border-radius:12px;color:#fff;font:500 1rem system-ui;padding:10px 14px;letter-spacing:.1em}
#yearJumpSubmit{min-height:48px;min-width:72px;padding:10px 16px;border:0;border-radius:12px;background:var(--accent);color:#101621;font:600 .8rem system-ui;cursor:pointer}
#yearJumpError{font-size:.75rem;line-height:1.5;color:#ffd09a;margin-top:7px}
.decade-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:22px 0 12px;border-bottom:1px solid #ffffff20;padding-bottom:10px}
.decade-options button{min-height:44px;padding:8px 2px;background:transparent;border:0;border-radius:9px;color:#b9c8d8;font:500 .72rem ui-monospace,monospace;cursor:pointer}
.decade-options button[aria-pressed=true]{color:var(--accent);background:rgba(var(--accent-rgb),.1)}
.year-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.year-grid button{min-height:66px;border:1px solid #ffffff25;border-radius:12px;background:#ffffff06;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#fff;cursor:pointer;padding:8px 4px}
.year-grid button strong{font:500 1rem ui-monospace,monospace}
.year-grid button span{font-size:.61rem;color:#bccbdc}
.year-grid button.is-empty{background:transparent;border-style:dashed;color:#9aabbf}
.year-grid button[aria-pressed=true]{border-color:var(--accent);background:rgba(var(--accent-rgb),.12)}
.year-grid button:hover{border-color:var(--accent)}
.picker-note{font-size:.73rem;color:#b9c8d8;line-height:1.7;margin-top:20px}
.year-picker button:focus-visible,.year-picker input:focus-visible,.year-picker-trigger:focus-visible,#findSongBtn:focus-visible,.empty-year-alternatives button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:400px){.year-picker{padding:20px 16px}.year-picker h2{font-size:1.15rem}.year-grid{gap:6px}.year-grid button span{font-size:.56rem}.decade-options button{font-size:.65rem}}
@media(max-height:550px){.year-picker-trigger{min-height:32px;padding-block:2px}.journey-actions{gap:0}.journey-actions .journey-exit{padding-inline:8px;font-size:.61rem}.time-navigation{width:min(590px,calc(100% - 32px))}.year-picker{max-height:calc(100svh - 20px);padding-top:18px;padding-bottom:18px}}
