/* ══════ 时间弹窗遮罩 ══════ */
#time-popup-mask {
    position: fixed; inset: 0;
    background: rgba(100,120,140,0.12);
    backdrop-filter: blur(3px);
    z-index: 300;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
#time-popup-mask.show { opacity: 1; pointer-events: auto; }

#time-popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 290px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 8px 32px rgba(100,120,140,0.12), 0 1px 2px rgba(0,0,0,0.04), 0 20px 0 -8px rgba(195,205,215,0.15);
    z-index: 310; padding: 22px 20px;
    opacity: 0; pointer-events: none;
    transition: all 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
#time-popup.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.time-popup-title {
    text-align: center; font-size: 15px; font-weight: 700;
    color: #546e7a; letter-spacing: 1px;
    margin-bottom: 18px; position: relative; padding-bottom: 14px;
}
.time-popup-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 40px; height: 2px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(33,150,243,0.2), transparent);
}

.time-mode-btns { display: flex; gap: 8px; margin-bottom: 16px; }
.time-mode-btns button {
    flex: 1; padding: 10px 0; border: none; border-radius: 12px;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.25s;
    background: rgba(239,243,246,0.7); color: #8a9aaa; font-family: inherit;
}
.time-mode-btns button:active { transform: scale(0.97); }
.time-mode-btns button.active {
    background: rgba(255,255,255,0.95); color: #0d47a1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 0 rgba(195,205,215,0.2);
}

#fiction-time-inputs { display: none; flex-direction: column; gap: 10px; margin-bottom: 14px; animation: fictionSlideDown 0.3s ease; }
#fiction-time-inputs.show { display: flex; }
@keyframes fictionSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.fiction-inputs-row { display: flex; gap: 6px; }

.custom-select { flex: 1; position: relative; }
.custom-select.year { flex: 1.3; }

.select-display {
    height: 40px; border-radius: 12px; background: rgba(239,243,246,0.8);
    display: flex; align-items: center; justify-content: center;
    padding: 0 28px 0 10px; font-size: 13px; font-weight: 500; color: #546e7a;
    cursor: pointer; transition: 0.2s; position: relative; user-select: none;
}
.select-display:active { transform: scale(0.97); }
.select-display.open { background: rgba(255,255,255,0.95); box-shadow: 0 0 0 2px rgba(33,150,243,0.12); }

.select-display::after {
    content: ''; position: absolute; right: 10px; top: 50%;
    width: 6px; height: 6px; border-right: 1.5px solid #90a4ae; border-bottom: 1.5px solid #90a4ae;
    transform: translateY(-60%) rotate(45deg); transition: transform 0.2s;
}
.select-display.open::after { transform: translateY(-30%) rotate(-135deg); }

.select-dropdown {
    position: absolute; top: 44px; left: 0; right: 0;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(16px);
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 8px 24px rgba(100,120,140,0.12);
    max-height: 160px; overflow-y: auto; z-index: 320;
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: all 0.2s cubic-bezier(0.2,0.8,0.2,1); padding: 4px;
    scrollbar-width: thin; scrollbar-color: rgba(33,150,243,0.15) transparent;
}
.select-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.select-dropdown::-webkit-scrollbar { width: 4px; }
.select-dropdown::-webkit-scrollbar-track { background: transparent; }
.select-dropdown::-webkit-scrollbar-thumb { background: rgba(33,150,243,0.15); border-radius: 2px; }

.select-option {
    padding: 9px 10px; font-size: 13px; color: #546e7a;
    border-radius: 8px; cursor: pointer; transition: 0.15s; text-align: center;
}
.select-option:hover { background: rgba(239,243,246,0.8); }
.select-option:active { transform: scale(0.97); }
.select-option.selected { color: #0d47a1; font-weight: 600; background: rgba(225,240,252,0.5); }

#fiction-time-inputs > button {
    width: 100%; padding: 11px 0; border: none; border-radius: 14px;
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
    color: #0d47a1; background: rgba(225,240,252,0.7); transition: 0.25s; margin-top: 4px;
    box-shadow: 0 1px 2px rgba(33,150,243,0.05), 0 4px 0 rgba(160,200,235,0.18);
}
#fiction-time-inputs > button:active { transform: scale(0.97); }

#time-mode-hint {
    text-align: center; font-size: 11px; color: #a0b0be;
    line-height: 1.5; padding: 8px 0 0; min-height: 20px;
}
#time-mode-hint:empty { display: none; }