/**
 * SaveTool UI skin: cosmic (新版星图) / classic (旧版侧栏)
 * Pref key: savetool-ui-skin
 */
html[data-ui-skin="classic"] .st-app-hub {
    display: none !important;
}

html[data-ui-skin="classic"] .st-app-player-mount {
    display: none !important;
}

/* 旧版：恢复侧栏 */
html[data-ui-skin="classic"] .container.app-shell > .sidebar {
    display: flex !important;
    background: rgba(160, 190, 230, 0.1) !important;
    border-right: 1px solid rgba(200, 220, 255, 0.28) !important;
    backdrop-filter: blur(40px) saturate(1.75) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.75) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 4px 0 32px rgba(0, 0, 0, 0.25) !important;
}

/* 旧版桌面：侧栏默认收起，贴左边露出热区，悬停展开；工作区随之扩张 */
@media (min-width: 1101px) {
    html[data-ui-skin="classic"]:not(.is-compact):not(.is-mobile) .container.app-shell > .sidebar {
        transform: translateX(calc(-100% + 14px));
        transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1);
        will-change: transform;
        z-index: 130 !important;
    }

    html[data-ui-skin="classic"]:not(.is-compact):not(.is-mobile) .container.app-shell > .sidebar:hover,
    html[data-ui-skin="classic"]:not(.is-compact):not(.is-mobile) .container.app-shell > .sidebar:focus-within {
        transform: translateX(0);
    }

    html[data-ui-skin="classic"]:not(.is-compact):not(.is-mobile) .st-app-workspace,
    html[data-ui-skin="classic"]:not(.is-compact):not(.is-mobile) #stAppWorkspace {
        margin-left: 14px !important;
        transition: margin-left 0.3s cubic-bezier(0.22, 0.9, 0.32, 1);
    }

    html[data-ui-skin="classic"]:not(.is-compact):not(.is-mobile) .container.app-shell > .sidebar:hover ~ .st-app-workspace,
    html[data-ui-skin="classic"]:not(.is-compact):not(.is-mobile) .container.app-shell > .sidebar:focus-within ~ .st-app-workspace {
        margin-left: var(--sidebar-width, 240px) !important;
    }

    /* 切换皮肤动画期间不收起，避免跳动 */
    html[data-ui-skin="classic"].st-skin-switching:not(.is-compact):not(.is-mobile) .container.app-shell > .sidebar {
        transform: none !important;
        transition: none !important;
    }
    html[data-ui-skin="classic"].st-skin-switching:not(.is-compact):not(.is-mobile) .st-app-workspace,
    html[data-ui-skin="classic"].st-skin-switching:not(.is-compact):not(.is-mobile) #stAppWorkspace {
        margin-left: var(--sidebar-width, 240px) !important;
        transition: none !important;
    }
}

html[data-ui-skin="classic"] .container.app-shell > .sidebar-backdrop {
    display: none !important;
}

/* 旧版：工作台常驻（切换动画期间放行 transform/opacity） */
html[data-ui-skin="classic"] .st-app-workspace,
html[data-ui-skin="classic"] #stAppWorkspace {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    margin-left: var(--sidebar-width, 240px) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 100vh !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-ui-skin="classic"]:not(.st-skin-phase-in) .st-app-workspace,
html[data-ui-skin="classic"]:not(.st-skin-phase-in) #stAppWorkspace {
    transform: none !important;
    opacity: 1 !important;
}

html[data-ui-skin="classic"] .st-app-workspace::before {
    display: none !important;
    content: none !important;
}

/* 旧版顶栏：隐藏返回星图 / 展开菜单按钮 */
html[data-ui-skin="classic"] .st-app-back,
html[data-ui-skin="classic"] #btnAppBackHub,
html[data-ui-skin="classic"] #mobileMenuBtn,
html[data-ui-skin="classic"] .mobile-menu-btn {
    display: none !important;
}

/* 旧版侧栏图标强制可见 */
html[data-ui-skin="classic"] .sidebar-nav .nav-tab .icon,
html[data-ui-skin="classic"] .sidebar-nav .nav-tab svg.icon,
html[data-ui-skin="classic"] .sidebar-footer .icon,
html[data-ui-skin="classic"] .sidebar-footer svg.icon {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}

/* 旧版侧栏：选中 ≠ 悬停/焦点（覆盖 cosmic 同款青色条） */
html[data-ui-skin="classic"] .sidebar-nav .nav-tab,
html[data-ui-skin="classic"] .app-shell .sidebar .nav-tab {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #c5d2e4 !important;
}

html[data-ui-skin="classic"] .sidebar-nav .nav-tab:hover,
html[data-ui-skin="classic"] .app-shell .sidebar .nav-tab:hover {
    background: transparent !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

html[data-ui-skin="classic"] .sidebar-nav .nav-tab.active,
html[data-ui-skin="classic"] .app-shell .sidebar .nav-tab.active,
html[data-ui-skin="classic"][data-theme="dark"] .sidebar-nav .nav-tab.active,
html[data-ui-skin="classic"][data-theme="light"] .sidebar-nav .nav-tab.active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #7cf5ff !important;
    font-weight: 600;
}

html[data-ui-skin="classic"] .sidebar-nav .nav-tab.active .icon,
html[data-ui-skin="classic"] .sidebar-nav .nav-tab.active [data-lucide],
html[data-ui-skin="classic"] .sidebar-nav .nav-tab.active svg.icon {
    color: #7cf5ff !important;
    stroke: #7cf5ff !important;
    opacity: 1 !important;
}

/* 选中：左侧色条 + 淡青底 */
html[data-ui-skin="classic"] .sidebar-active-indicator {
    background: rgba(124, 245, 255, 0.12) !important;
    box-shadow: inset 3px 0 0 #7cf5ff !important;
    border-radius: 12px;
}

/* 悬停/焦点：仅浅底，无色条、无光晕 */
html[data-ui-skin="classic"] .sidebar-hover-indicator {
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
    border-radius: 12px;
}

html[data-ui-skin="classic"] .sidebar-nav .nav-tab:focus-visible {
    outline: 2px solid rgba(124, 245, 255, 0.55);
    outline-offset: 2px;
    background: rgba(255, 255, 255, 0.06) !important;
}

html[data-ui-skin="classic"] .sidebar-nav .nav-tab.active:focus-visible {
    outline-color: rgba(124, 245, 255, 0.75);
    background: transparent !important;
}

/* 旧版面板：与音乐播放器同款模糊 */
html[data-ui-skin="classic"] .st-app-workspace .section,
html[data-ui-skin="classic"] .st-app-workspace .info-box,
html[data-ui-skin="classic"] .st-app-workspace .stat-card,
html[data-ui-skin="classic"] .st-app-workspace .batch-log,
html[data-ui-skin="classic"] .st-app-workspace .workshop-bar,
html[data-ui-skin="classic"] .st-app-workspace .workshop-tile,
html[data-ui-skin="classic"] .st-app-workspace .crypto-mode-bar,
html[data-ui-skin="classic"] .st-app-workspace .crypto-action-bar,
html[data-ui-skin="classic"] .st-app-workspace .preprocess-toggles,
html[data-ui-skin="classic"] .st-app-workspace .custom-select-panel,
html[data-ui-skin="classic"] .st-app-workspace .topbar,
html[data-ui-skin="classic"] .st-app-workspace #刷取Log,
html[data-ui-skin="classic"] .st-app-workspace #savedAccountsPanel,
html[data-ui-skin="classic"] .st-app-workspace #findAccountsPanel,
html[data-ui-skin="classic"] .st-app-workspace #accountInfo {
    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;
    backdrop-filter: blur(40px) saturate(1.75) !important;
    -webkit-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;
    transform: none !important;
    filter: none !important;
}

html[data-ui-skin="classic"] .st-app-workspace .topbar {
    border-radius: 0 !important;
}

html[data-ui-skin="classic"] .st-app-workspace .section::before,
html[data-ui-skin="classic"] .st-app-workspace .stat-card::before {
    content: none !important;
    display: none !important;
}

html[data-ui-skin="classic"] .st-app-workspace .tab-content.active,
html[data-ui-skin="classic"] .st-app-workspace .tab-content.active .section {
    animation: none !important;
    transform: none !important;
}

/* 侧栏内「切换新版」按钮 */
.st-ui-skin-btn {
    appearance: none;
    cursor: pointer;
    font: inherit;
    border-radius: 10px;
    border: 1px solid rgba(200, 220, 255, 0.32);
    background: rgba(160, 190, 230, 0.12);
    color: #7cf5ff;
    padding: 0.45rem 0.75rem;
    line-height: 1.2;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.st-ui-skin-btn:hover {
    background: rgba(124, 245, 255, 0.16);
    border-color: rgba(124, 245, 255, 0.5);
}

.st-ui-skin-btn:focus-visible {
    outline: 2px solid rgba(124, 245, 255, 0.55);
    outline-offset: 2px;
}

html[data-ui-skin="classic"] .st-ui-skin-btn {
    width: 100%;
    margin-top: 8px;
    color: #7cf5ff;
    border-color: rgba(200, 220, 255, 0.28);
    background: rgba(160, 190, 230, 0.1);
}

.topbar-right .st-ui-skin-btn {
    display: none;
}

@media (max-width: 900px) {
    html[data-ui-skin="classic"] .st-app-workspace,
    html[data-ui-skin="classic"] #stAppWorkspace {
        margin-left: 0 !important;
    }
}

/* ========== 新旧界面切换过渡 ========== */
@keyframes stSkinFadeOut {
    from { opacity: 1; filter: blur(0); transform: scale(1); }
    to { opacity: 0; filter: blur(8px); transform: scale(0.985); }
}

@keyframes stSkinClassicIn {
    from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes stSkinSidebarIn {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: none; }
}

@keyframes stSkinHubIn {
    from { opacity: 0; transform: scale(1.03) translateY(10px); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes stSkinFadeIn {
    from { opacity: 0; filter: blur(6px); transform: scale(0.99); }
    to { opacity: 1; filter: none; transform: none; }
}

html.st-skin-switching {
    pointer-events: none;
}

html.st-skin-switching .container.app-shell {
    overflow: hidden;
}

/* 退场：整壳淡出 */
html.st-skin-phase-out .container.app-shell {
    animation: stSkinFadeOut 0.26s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 入场：切到旧版 */
html.st-skin-to-classic.st-skin-phase-in .container.app-shell {
    animation: stSkinFadeIn 0.38s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}

html.st-skin-to-classic.st-skin-phase-in .container.app-shell > .sidebar {
    animation: stSkinSidebarIn 0.42s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}

html.st-skin-to-classic.st-skin-phase-in .st-app-workspace,
html.st-skin-to-classic.st-skin-phase-in #stAppWorkspace {
    animation: stSkinClassicIn 0.45s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}

/* 入场：切回星图 — 只淡入一次，避免整壳跳亮后再播 hub 入场造成双闪 */
html.st-skin-to-cosmic.st-skin-phase-in .container.app-shell {
    animation: stSkinFadeIn 0.42s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}

html.st-skin-to-cosmic.st-skin-phase-in .st-app-hub {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    html.st-skin-phase-out .container.app-shell,
    html.st-skin-to-classic.st-skin-phase-in .container.app-shell,
    html.st-skin-to-classic.st-skin-phase-in .container.app-shell > .sidebar,
    html.st-skin-to-classic.st-skin-phase-in .st-app-workspace,
    html.st-skin-to-classic.st-skin-phase-in #stAppWorkspace,
    html.st-skin-to-cosmic.st-skin-phase-in .container.app-shell,
    html.st-skin-to-cosmic.st-skin-phase-in .st-app-hub {
        animation: none !important;
    }
}