/**
 * Cosmic 全站弹窗磨砂 — 最后加载，刻意做得很透，星空能透出来
 * 覆盖公告 / 确认 / 导出 / 工坊 / CK / 编辑器 / 卡密弹层等
 */

html .modal-overlay:not(.st-gate),
html #noticeModal.modal-overlay,
html #customConfirmModal.modal-overlay,
html #exportModal.modal-overlay,
html #rankingDetailModal.modal-overlay,
html #workshopUploadModal.modal-overlay,
html #workshopDetailModal.modal-overlay,
html #workshopEditModal.modal-overlay,
html #ckLoginModal.modal-overlay,
html #saveEditorModal.modal-overlay,
html #multiFileModal.modal-overlay,
html .ck-login-modal.modal-overlay {
    background: rgba(2, 8, 22, 0.28) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
    backdrop-filter: blur(10px) saturate(1.2) !important;
}

html .modal-overlay:not(.st-gate) .modal-content,
html #noticeModal .modal-content,
html #customConfirmModal .modal-content,
html #exportModal .modal-content,
html #rankingDetailModal .modal-content,
html #workshopUploadModal .modal-content,
html #workshopDetailModal .modal-content,
html #workshopEditModal .modal-content,
html #ckLoginModal .modal-content,
html #saveEditorModal .modal-content,
html #multiFileModal .modal-content,
html .workshop-upload-modal,
html .workshop-detail-modal,
html .ranking-detail-modal,
html .ck-login-modal__content,
html .st-glass-modal .modal-content {
    background: rgba(160, 190, 230, 0.1) !important;
    background-image: none !important;
    border: 1px solid rgba(200, 220, 255, 0.28) !important;
    border-radius: 16px !important;
    color: #b4c2d6 !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.75) !important;
    backdrop-filter: blur(40px) saturate(1.75) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 24px 64px rgba(0, 0, 0, 0.45) !important;
}

/* 标题/底栏不再叠第二层不透明底，只留分隔线 */
html .modal-overlay:not(.st-gate) .modal-header,
html #noticeModal .modal-header,
html #customConfirmModal .modal-header,
html #exportModal .modal-header,
html #rankingDetailModal .modal-header,
html #workshopUploadModal .modal-header,
html #workshopDetailModal .modal-header,
html #workshopEditModal .modal-header,
html #ckLoginModal .modal-header,
html #saveEditorModal .modal-header,
html #multiFileModal .modal-header,
html .ck-login-modal__header {
    background: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(200, 220, 255, 0.2) !important;
    border-radius: 16px 16px 0 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #c5d2e4 !important;
}

html .modal-overlay:not(.st-gate) .modal-header h3,
html #noticeModal .modal-header h3,
html #customConfirmModal .modal-header h3,
html #exportModal .modal-header h3,
html #rankingDetailModal .modal-header h3,
html #workshopUploadModal .modal-header h3,
html #workshopDetailModal .modal-header h3,
html #workshopEditModal .modal-header h3,
html #ckLoginModal .modal-header h3,
html #saveEditorModal .modal-header h3,
html #multiFileModal .modal-header h3 {
    color: #c5d2e4 !important;
}

html .modal-overlay:not(.st-gate) .modal-header-icon,
html #noticeModal .modal-header-icon,
html #customConfirmModal .modal-header-icon {
    background: rgba(124, 245, 255, 0.14) !important;
}

html .modal-overlay:not(.st-gate) .modal-header-icon .icon,
html #noticeModal .modal-header-icon .icon {
    stroke: #7cf5ff !important;
}

html .modal-overlay:not(.st-gate) .modal-body,
html .modal-overlay:not(.st-gate) .modal-footer,
html #noticeModal .modal-body,
html #noticeModal .modal-footer,
html #customConfirmModal .modal-body,
html #customConfirmModal .modal-footer,
html #exportModal .modal-body,
html #exportModal .modal-footer,
html #rankingDetailModal .modal-body,
html #rankingDetailModal .modal-footer,
html #workshopUploadModal .modal-body,
html #workshopUploadModal .modal-footer,
html #workshopDetailModal .modal-body,
html #workshopDetailModal .modal-footer,
html #workshopEditModal .modal-body,
html #workshopEditModal .modal-footer,
html #ckLoginModal .modal-body,
html #ckLoginModal .modal-footer,
html #saveEditorModal .modal-body,
html #saveEditorModal .modal-footer,
html #multiFileModal .modal-body,
html #multiFileModal .modal-footer,
html .ck-login-modal__body,
html .ck-login-modal__footer {
    background: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #b4c2d6 !important;
}

html .modal-overlay:not(.st-gate) .modal-footer,
html #noticeModal .modal-footer,
html #customConfirmModal .modal-footer,
html #exportModal .modal-footer,
html #rankingDetailModal .modal-footer,
html #workshopUploadModal .modal-footer,
html #workshopDetailModal .modal-footer,
html #workshopEditModal .modal-footer,
html #ckLoginModal .modal-footer,
html #saveEditorModal .modal-footer,
html #multiFileModal .modal-footer {
    border-top: 1px solid rgba(200, 220, 255, 0.18) !important;
    border-radius: 0 0 16px 16px !important;
}

html .modal-overlay:not(.st-gate) .modal-body p,
html #noticeContent,
html #confirmMessage {
    color: #b4c2d6 !important;
}

/* 卡密弹层 / 信息板 / 工作区 sheet */
html .st-gate.is-kami-popup .st-cosmic-panel,
html .st-gate.is-kami-popup .st-gate-panel,
html .st-cosmic-sheet__panel,
html .st-cosmic-info__box {
    background: rgba(160, 190, 230, 0.1) !important;
    border: 1px solid rgba(200, 220, 255, 0.28) !important;
    border-radius: 16px !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.75) !important;
    backdrop-filter: blur(40px) saturate(1.75) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 22px 56px rgba(0, 0, 0, 0.4) !important;
}

html .toast-container .toast {
    background: rgba(160, 190, 230, 0.12) !important;
    border: 1px solid rgba(200, 220, 255, 0.26) !important;
    border-radius: 12px !important;
    color: #b4c2d6 !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
    backdrop-filter: blur(28px) saturate(1.5) !important;
}

/* 不支持 backdrop-filter 时仍保持半透明，不回退到实色 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html .modal-overlay:not(.st-gate) .modal-content,
    html #noticeModal .modal-content,
    html #customConfirmModal .modal-content,
    html #exportModal .modal-content,
    html #ckLoginModal .modal-content {
        background: rgba(18, 28, 48, 0.82) !important;
    }
}

/* =========================================================
   卡密芯片 / 功能分块 / 输入 / 下拉 / 按钮 — 强制磨砂
   ========================================================= */
html .sidebar-footer #kaimaInfo,
html .st-app-workspace .section,
html .app-shell .section,
html .left-panel > .section,
html .right-panel > .section,
html .info-box,
html .stat-card,
html .card,
html .panel,
html .account-card,
html .login4399-banner,
html .batch-log,
html #刷取Log,
html #regLog,
html #batchLog,
html .workshop-bar,
html .workshop-tile,
html .workshop-filter-panel.open,
html .crypto-mode-bar,
html .crypto-action-bar,
html .crypto-util-bar,
html .preprocess-toggles,
html .save-list-container,
html .ranking-table-wrap,
html #savedAccountsPanel,
html #accountInfo,
html #loginAccountInfo,
html #刷取UserInfo,
html .custom-select-panel,
html .custom-select-panel.custom-select-panel--portal,
html .ui-select-menu,
html .drop-zone,
html .reg-local-confirm,
html .st-cosmic-player__panel,
html .st-cosmic-player__search-panel,
html .st-cosmic-player__auth-panel {
    background: rgba(160, 190, 230, 0.1) !important;
    background-image: none !important;
    border: 1px solid rgba(200, 220, 255, 0.28) !important;
    border-radius: 14px !important;
    color: #e2eaf4 !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.75) !important;
    backdrop-filter: blur(40px) saturate(1.75) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 24px 64px rgba(0, 0, 0, 0.45) !important;
}

html .st-cosmic-player__title,
html .st-cosmic-player__results strong,
html .st-cosmic-player__results button,
html .st-cosmic-player__auth-user,
html .st-cosmic-player__search input,
html .st-cosmic-player__auth textarea {
    color: #eef3fa !important;
}

html .st-cosmic-player__artist,
html .st-cosmic-player__status,
html .st-cosmic-player__results em,
html .st-cosmic-player__auth-label,
html .st-cosmic-player__auth-tip,
html .st-cosmic-player__auth-tip li,
html .st-cosmic-player__lyric-line,
html .st-app-workspace label,
html .app-shell label,
html .input-group label,
html .progress-label,
html .stat-label,
html .text-muted {
    color: #cdd8e8 !important;
}

html .st-cosmic-player__shell {
    align-items: flex-end !important;
    gap: 0.4rem !important;
}

html .st-app-player-mount .st-cosmic-player {
    bottom: calc(var(--player-scale, 0.92) * 14.5rem) !important;
}

html .st-cosmic-player.is-search-open .st-cosmic-player__panel:not([hidden]),
html .st-cosmic-player.is-search-open .st-cosmic-player__search-panel:not([hidden]),
html .st-cosmic-player:has(#stPlayerAuthPanel:not([hidden])) .st-cosmic-player__panel:not([hidden]),
html .st-cosmic-player:has(#stPlayerAuthPanel:not([hidden])) .st-cosmic-player__search-panel:not([hidden]),
html .st-cosmic-player:has(#stPlayerAuthPanel:not([hidden])) .st-cosmic-player__auth-panel:not([hidden]) {
    border-radius: 14px !important;
    border: 1px solid rgba(200, 220, 255, 0.28) !important;
    margin: 0 !important;
}

/* 音乐输入 / 音源 / 按钮：强制磨砂 */
html .st-cosmic-player__search input,
html .st-cosmic-player__auth textarea,
html .st-cosmic-player__source,
html .st-cosmic-player__search-submit,
html .st-cosmic-player__btn,
html .st-cosmic-player__auth-btn {
    background: rgba(160, 190, 230, 0.14) !important;
    border: 1px solid rgba(200, 220, 255, 0.3) !important;
    color: #eef3fa !important;
    border-radius: 10px !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.45) !important;
    backdrop-filter: blur(18px) saturate(1.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html .st-cosmic-player__source.is-on,
html .st-cosmic-player__btn--main,
html .st-cosmic-player__search-submit,
html .st-cosmic-player__auth-btn {
    background: rgba(124, 245, 255, 0.16) !important;
    border-color: rgba(124, 245, 255, 0.5) !important;
    color: #9ae8f2 !important;
}

/* number 加减按钮暗色适配 */
html input[type="number"],
html .st-app-workspace input[type="number"],
html .app-shell input[type="number"],
html .input-group input[type="number"] {
    color-scheme: dark;
}

html input[type="number"]::-webkit-inner-spin-button,
html input[type="number"]::-webkit-outer-spin-button {
    opacity: 1 !important;
    height: 1.4em;
    margin-left: 0.15rem;
    cursor: pointer;
    filter: invert(0.92) sepia(0.35) saturate(4.2) hue-rotate(145deg) brightness(1.08);
}

/* 卡密：不要边框和背景，直接显示文字 */
html .st-app-hub__kami-chip,
html #stAppKamiChip {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 总进度：去掉外层框，透明 */
html .batch-progress,
html #刷取-tab .batch-progress,
html .st-app-workspace .batch-progress {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html .batch-progress-bar {
    background: rgba(160, 190, 230, 0.12) !important;
    border: 1px solid rgba(200, 220, 255, 0.22) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* LOGOUT：无外框 */
html .st-cosmic-hud__link,
html #btnAppHubLogout,
html .st-app-hub__hud .st-cosmic-hud__link {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #7cf5ff !important;
}

html[data-theme="dark"] .input-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]),
html[data-theme="dark"] .input-group select,
html[data-theme="dark"] .input-group textarea,
html[data-theme="dark"] .st-app-workspace input[type="text"],
html[data-theme="dark"] .st-app-workspace input[type="password"],
html[data-theme="dark"] .st-app-workspace input[type="number"],
html[data-theme="dark"] .st-app-workspace input[type="search"],
html[data-theme="dark"] .st-app-workspace textarea,
html[data-theme="dark"] .st-app-workspace select,
html[data-theme="dark"] .app-shell input[type="text"],
html[data-theme="dark"] .app-shell input[type="password"],
html[data-theme="dark"] .app-shell input[type="number"],
html[data-theme="dark"] .app-shell textarea,
html[data-theme="dark"] .app-shell select,
html[data-theme="dark"] .custom-select-trigger,
html[data-theme="dark"] .ui-select-trigger,
html[data-theme="dark"] .workshop-search,
html[data-theme="dark"] .workshop-select,
html[data-theme="dark"] .custom-select-search,
html[data-theme="dark"] #cryptoData,
html[data-theme="dark"] #cryptoResult,
html[data-theme="dark"] #data {
    background: rgba(160, 190, 230, 0.1) !important;
    background-image: none !important;
    border-color: rgba(200, 220, 255, 0.28) !important;
    color: #c5d2e4 !important;
    -webkit-text-fill-color: #c5d2e4;
    -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
    backdrop-filter: blur(20px) saturate(1.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-crypto-util,
html[data-theme="dark"] .st-app-back,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .st-cosmic-ghost {
    background: rgba(160, 190, 230, 0.1) !important;
    background-image: none !important;
    border: 1px solid rgba(200, 220, 255, 0.28) !important;
    color: #7cf5ff !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.45) !important;
    backdrop-filter: blur(18px) saturate(1.45) !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .app-shell .btn.btn-primary,
html[data-theme="dark"] .st-app-workspace .btn-primary,
html[data-theme="dark"] button.btn-primary {
    background: linear-gradient(90deg, rgba(124, 245, 255, 0.55), rgba(90, 210, 255, 0.42)) !important;
    border: 1px solid rgba(124, 245, 255, 0.45) !important;
    color: #0a1624 !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
}

html .st-app-workspace {
    background: rgba(4, 10, 24, 0.2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html .st-app-workspace .topbar {
    background: rgba(160, 190, 230, 0.1) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
    backdrop-filter: blur(24px) saturate(1.5) !important;
}