:root {
    --blur: 18px;
    /* 毛玻璃强度 */
    --bg: rgba(255, 255, 255, .32);
    /* 背景覆盖层（有 blur 时） */
    --bg-fallback: rgba(255, 255, 255, .76);
    /* 无 blur 时降级 */
    --fg: #111;
    --muted: #6b7280;
    --line: #111;
    --badge: #ef4444;
    --rail-color: #111;
    /* 左侧 LEGACY 颜色 */
    --rail-opacity: .10;
    /* 左侧 LEGACY 透明度 */
}

/* 覆盖层容器 */
.legacy-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    color: var(--fg);
    opacity: 1;
    transition: opacity 1s ease;
}

.legacy-overlay.is-hiding {
    opacity: 0;
    pointer-events: none;
}


/* 左侧纵向 LEGACY（容器保持不变） */
.legacy-rail{
  position:fixed; left:0; top: 15vh; bottom: 0; width:78px; height: 100vh;
  display:grid; place-items:center;
  pointer-events:none; user-select:none;
  z-index: 1;
    transform: rotate(-90deg); 
  transform-origin: center;
  white-space: nowrap; 
  font-weight:900;
  letter-spacing:.15em;
  font-size:100px;  
  color:#111;
  opacity:.10;
}


/* 毛玻璃背景（兼容降级） */
.legacy-backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
    backdrop-filter: blur(var(--blur)) saturate(120%);
    filter: grayscale(100%);
    
}

/* 无 backdrop-filter 时更实一些 */
@supports not ((backdrop-filter: blur(1px))) {
    .legacy-backdrop {
        background: var(--bg-fallback);
    }
}

/* 对话框卡片 */
.legacy-card {
    position: relative;
    width: min(720px, 92vw);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    padding: 26px 28px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
    z-index: 2;
}

.legacy-badge {
    display: inline-block;
    background: var(--badge);
    color: #fff;
    font-weight: 800;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .85rem;
}

h1 {
    margin: .6rem 0 0;
    font-size: 1.9rem;
    line-height: 1.25
}

.legacy-note {
    color: var(--muted);
    margin: .7rem 0 0
}

.legacy-actions {
    margin-top: 1rem;
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.legacy-btn {
    appearance: none;
    background: #111;
    color: #fff;
    border: 1px solid #111;
    padding: .7rem 1.1rem;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .2s ease;
}

.legacy-btn:hover {
    transform: translateY(-1px)
}

.legacy-btn:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 3px
}

.legacy-fallback {
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--muted)
}

/* 进入动效（尊重减少动效设置） */
@media (prefers-reduced-motion:no-preference) {
    .legacy-card {
        animation: legacy-in .35s ease both
    }

    @keyframes legacy-in {
        from {
            opacity: 0;
            transform: translateY(8px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }
}

/* 小屏优化 */
@media (max-width:420px) {
    .legacy-rail {
        width: 64px
    }

    .legacy-rail span {
        font-size: 36px
    }

    .legacy-btn {
        flex: 1
    }
}