:root {
    --bg-base: #04111f;
    --bg-elevated: #0a1930;
    --surface-card: rgba(9, 25, 48, 0.78);
    --surface-card-strong: rgba(14, 35, 66, 0.88);
    --text-primary: #ebf3ff;
    --text-secondary: #96a8c6;
    --text-muted: #60718f;
    --text-on-accent: #05111f;
    --border-base: rgba(110, 147, 201, 0.18);
    --border-strong: rgba(110, 147, 201, 0.32);
    --accent-blue: #74c0fc;
    --accent-cyan: #5eead4;
    --accent-amber: #fbbf24;
    --accent-rose: #fb7185;
    --gradient-primary: linear-gradient(135deg, #7dd3fc 0%, #60a5fa 45%, #fbbf24 100%);
    --radius-lg: 18px;
    --radius-md: 12px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.36);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at 15% 10%, rgba(125, 211, 252, 0.18), transparent 28%),
        radial-gradient(circle at 85% 85%, rgba(251, 191, 36, 0.12), transparent 22%),
        linear-gradient(180deg, #04111f 0%, #07172b 100%);
    color: var(--text-primary);
    line-height: 1.6;
}
a { color: var(--accent-blue); text-decoration: none; }
h1, h2, p { margin-top: 0; }
.app-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.app-main { padding: var(--space-2xl) var(--space-xl); }
.page-hero { margin-bottom: var(--space-xl); }
.eyebrow { color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; }
.page-subtitle, .field-hint, .meta-label { color: var(--text-secondary); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--space-xl); position: relative; overflow: hidden; }
.login-shell::before,
.login-shell::after {
    content: "";
    position: fixed;
    width: 340px;
    height: 340px;
    border-radius: 999px;
    filter: blur(12px);
}
.login-shell::before { top: -100px; left: -120px; background: rgba(125, 211, 252, 0.16); }
.login-shell::after { right: -120px; bottom: -80px; background: rgba(251, 191, 36, 0.12); }
.login-layout { position: relative; z-index: 1; width: min(480px, 100%); }