:root {
    --bg: #070b16;
    --bg-soft: #0d1324;
    --surface: rgba(17, 25, 45, 0.78);
    --surface-strong: rgba(28, 38, 66, 0.92);
    --line: rgba(132, 158, 255, 0.2);
    --line-strong: rgba(66, 211, 255, 0.45);
    --text-main: #f2f7ff;
    --text-sub: #b9c6de;
    --text-soft: #7f8daa;
    --blue: #42d3ff;
    --violet: #8f7aff;
    --pink: #ff5fb7;
    --danger: #ff5c7a;
    --success: #4be6a6;
    --radius: 8px;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
    --ease: 160ms ease;
    --bg-base: #020817;
    --bg-elevated: #030c1b;
    --bg-surface: #111f39;
    --bg-surface-alt: #0a182e;
    --surface-card: rgba(10, 24, 46, 0.72);
    --surface-card-strong: rgba(15, 32, 60, 0.88);
    --surface-card-hover: rgba(20, 42, 78, 0.82);
    --text-primary: #f0f6ff;
    --text-secondary: #a4b8d4;
    --text-muted: #6b7d99;
    --text-on-accent: #020817;
    --border-base: rgba(96, 130, 186, 0.18);
    --border-strong: rgba(96, 130, 186, 0.28);
    --border-glow: rgba(120, 170, 255, 0.32);
    --accent-blue: #60a5fa;
    --accent-violet: #a78bfa;
    --accent-pink: #f472b6;
    --accent-cyan: #22d3ee;
    --gradient-primary: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 50%, var(--accent-pink) 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(96, 165, 250, 0.16) 0%, rgba(167, 139, 250, 0.08) 100%);
    --shadow-glow: 0 0 32px rgba(96, 165, 250, 0.18), 0 18px 48px rgba(0, 0, 0, 0.32);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--text-primary);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    letter-spacing: 0;
    line-height: 1.6;
    background:
        radial-gradient(circle at top left, rgba(66, 211, 255, 0.14), transparent 32rem),
        radial-gradient(circle at 80% 0, rgba(255, 95, 183, 0.12), transparent 30rem),
        linear-gradient(180deg, #080d1a, #070b16 48%, #050812);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

input,
textarea,
select,
button {
    font: inherit;
}

input,
textarea,
select {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    color: var(--text-main);
    background: rgba(4, 10, 22, 0.72);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    outline: none;
}

textarea {
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(66, 211, 255, 0.14);
}

label {
    display: grid;
    gap: 8px;
    color: var(--text-sub);
    font-size: 14px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 13px 12px;
    border-bottom: 1px solid rgba(132, 158, 255, 0.14);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--text-sub);
    background: rgba(7, 13, 27, 0.72);
    font-size: 13px;
}

td {
    color: var(--text-main);
    font-size: 14px;
}

code,
pre {
    font-family: "SFMono-Regular", Consolas, monospace;
}

h1,
h2,
p {
    margin: 0;
}