/* theme.css - iOS 风毛玻璃主题（深度模仿 BMS Pro v19.8.0） */
:root {
    color-scheme: light;
    --page: #eef3f8;
    --surface: rgba(255, 255, 255, 0.58);
    --surface-strong: rgba(255, 255, 255, 0.82);
    --surface-soft: rgba(255, 255, 255, 0.36);
    --ink: #111827;
    --muted: #697386;
    --subtle: #9aa4b5;
    --line: rgba(59, 74, 99, 0.14);

    --color-primary: #0a84ff;
    --color-primary-rgb: 10, 132, 255;
    --color-bg: #eef3f8;
    --color-card: rgba(255, 255, 255, 0.82);
    --color-card-rgb: 255, 255, 255;
    --color-text: #111827;
    --color-text-secondary: #697386;
    --color-text-tertiary: #9aa4b5;
    --color-border: rgba(59, 74, 99, 0.14);
    --color-border-light: rgba(59, 74, 99, 0.08);
    --color-success: #22c55e;
    --color-warning: #ff9f0a;
    --color-danger: #ff375f;
    --color-info: #0a84ff;
    --color-purple: #8f62ff;

    --blue: #0a84ff;
    --blue-rgb: 10, 132, 255;
    --green: #22c55e;
    --green-rgb: 34, 197, 94;
    --orange: #ff9f0a;
    --orange-rgb: 255, 159, 10;
    --red: #ff375f;
    --red-rgb: 255, 55, 95;
    --purple: #8f62ff;
    --purple-rgb: 143, 98, 255;
    --cell-color: #0a84ff;
    --cell-color-rgb: 10, 132, 255;

    --glass-highlight: rgba(255, 255, 255, 0.74);
    --glass-lowlight: rgba(255, 255, 255, 0.18);
    --glass-gradient: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32) 58%, rgba(255,255,255,0.2));
    --glass-inner: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.12));
    --tile: rgba(255, 255, 255, 0.46);
    --tile-gradient: linear-gradient(145deg, rgba(255,255,255,0.62), rgba(255,255,255,0.22) 58%, rgba(255,255,255,0.12));
    --tile-shadow: inset 0 1px 0 rgba(255,255,255,0.72), inset 0 0 0 1px rgba(255,255,255,0.34), 0 9px 22px rgba(31,41,55,0.08);
    --accent-glow: 0 16px 36px rgba(10, 132, 255, 0.14);
    --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.04);
    --shadow-md: 0 12px 30px rgba(31, 41, 55, 0.1);
    --shadow-lg: 0 24px 60px rgba(31, 41, 55, 0.15), 0 2px 10px rgba(31, 41, 55, 0.06);
    --soft-shadow: 0 12px 30px rgba(31, 41, 55, 0.1);
    --hairline: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px var(--line);
    --blur: blur(28px) saturate(1.45);
    --glass-blur: 28px;
    --glass-opacity: 0.78;

    --radius: 16px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;

    --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-theme="dark"],
:root[data-theme="dark"] {
    color-scheme: dark;
    --page: #090d13;
    --surface: rgba(24, 29, 39, 0.58);
    --surface-strong: rgba(37, 43, 56, 0.72);
    --surface-soft: rgba(255, 255, 255, 0.08);
    --ink: #f8fafc;
    --muted: #a8b2c2;
    --subtle: #707b8d;
    --line: rgba(255, 255, 255, 0.12);

    --color-bg: #090d13;
    --color-card: rgba(37, 43, 56, 0.72);
    --color-card-rgb: 37, 43, 56;
    --color-text: #f8fafc;
    --color-text-secondary: #a8b2c2;
    --color-text-tertiary: #707b8d;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-border-light: rgba(255, 255, 255, 0.06);

    --blue: #73bbff;
    --blue-rgb: 115, 187, 255;
    --green: #4ade80;
    --green-rgb: 74, 222, 128;
    --orange: #ffb340;
    --orange-rgb: 255, 179, 64;
    --red: #ff5f7f;
    --red-rgb: 255, 95, 127;
    --purple: #b9a1ff;
    --purple-rgb: 185, 161, 255;
    --cell-color: #73bbff;
    --cell-color-rgb: 115, 187, 255;

    --glass-highlight: rgba(255, 255, 255, 0.12);
    --glass-lowlight: rgba(0, 0, 0, 0.24);
    --glass-gradient: linear-gradient(145deg, rgba(42,50,66,0.72), rgba(20,25,35,0.5) 58%, rgba(14,19,28,0.32));
    --glass-inner: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035));
    --tile: rgba(255, 255, 255, 0.075);
    --tile-gradient: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.055) 58%, rgba(255,255,255,0.025));
    --tile-shadow: inset 0 1px 0 rgba(255,255,255,0.13), inset 0 0 0 1px rgba(255,255,255,0.11), 0 10px 24px rgba(0,0,0,0.18);
    --accent-glow: 0 18px 42px rgba(115, 187, 255, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.42), 0 2px 12px rgba(0, 0, 0, 0.28);
    --soft-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    --hairline: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(0,0,0,0.28), inset 0 0 0 1px var(--line);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* 全局过渡动画 */
.page-container > * {
    animation: card-enter 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.page-container > *:nth-child(2) { animation-delay: 30ms; }
.page-container > *:nth-child(3) { animation-delay: 60ms; }
.page-container > *:nth-child(4) { animation-delay: 90ms; }
.page-container > *:nth-child(5) { animation-delay: 120ms; }
.page-container > *:nth-child(6) { animation-delay: 150ms; }
.page-container > *:nth-child(7) { animation-delay: 180ms; }
.page-container > *:nth-child(8) { animation-delay: 210ms; }
.page-container > *:nth-child(9) { animation-delay: 240ms; }
.page-container > *:nth-child(10) { animation-delay: 270ms; }

html, body {
    height: 100%;
    overscroll-behavior-y: contain;
}

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background:
        radial-gradient(circle at 16% 6%, rgba(255, 255, 255, 0.92), transparent 24%),
        radial-gradient(circle at 86% 14%, rgba(10, 132, 255, 0.26), transparent 32%),
        radial-gradient(circle at 12% 78%, rgba(34, 197, 94, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(143, 98, 255, 0.1), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), transparent 390px),
        var(--page);
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    background-attachment: fixed;
}

body[data-theme="dark"] {
    background:
        radial-gradient(circle at 18% 5%, rgba(115, 187, 255, 0.16), transparent 28%),
        radial-gradient(circle at 82% 16%, rgba(185, 161, 255, 0.16), transparent 34%),
        radial-gradient(circle at 18% 80%, rgba(74, 222, 128, 0.1), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 390px),
        var(--page);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.34) 44%, transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 18px);
    opacity: 0.5;
}

body[data-theme="dark"]::before {
    background:
        linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, 0.07) 48%, transparent 66%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px);
    opacity: 0.58;
}

/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--blue-rgb), 0.2);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--blue-rgb), 0.4); }

/* 数值字体 */
.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* 颜色工具类 */
.text-success, .green { color: var(--green); }
.text-warning, .orange { color: var(--orange); }
.text-danger, .red { color: var(--red); }
.text-info, .blue { color: var(--blue); }
.text-muted { color: var(--muted); }
.text-tertiary, .subtle { color: var(--subtle); }
.purple { color: var(--purple); }

[hidden] { display: none !important; }