:root {
            --accent: #007AFF;
            --red: #ff3b30;
            --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --curve: cubic-bezier(0.4, 0, 0.2, 1);
            --bg-default: #f4f6f8;
            --text-3: #aeaeb2;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFang SC", "SF Pro SC", "Noto Sans SC", sans-serif; }
        body {
            min-height: 100vh;
            overflow: hidden;
            background: #10141b url("../../内置文件/视频/Gargantua_BGM.poster.webp") center / cover no-repeat;
        }

        .liquid-filter-defs {
            position: fixed;
            width: 0;
            height: 0;
            overflow: hidden;
            pointer-events: none;
        }

        #login-bg-video {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            z-index: 0;
            pointer-events: none;
            opacity: 1;
            filter: none;
        }

        #wallpaper-cache-progress {
            position: fixed;
            z-index: 4;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s ease;
        }
        #wallpaper-cache-progress.active { opacity: 1; }
        #wallpaper-cache-progress.complete { opacity: 0; transition-delay: .45s; }
        #wallpaper-cache-progress span {
            display: block;
            width: 100%;
            height: 100%;
            transform: scaleX(0);
            transform-origin: left center;
            background: var(--accent);
            box-shadow: 0 0 12px rgba(0,122,255,.45);
            transition: transform .18s linear;
        }

        #auth-overlay {
            position: relative;
            z-index: 1;
            height: 100vh; width: 100vw;
            display: flex; justify-content: center; align-items: center;
            overflow: hidden;
            background: transparent;
        }

        .auth-card {
            position: relative;
            background: rgba(255,255,255,.16);
            width: 420px; padding: 42px 40px;
            border-radius: 16px;
            box-shadow: 0 12px 36px rgba(20,35,55,0.08), inset 0 1px 0 rgba(255,255,255,.52);
            border: 1px solid rgba(255,255,255,.52);
            backdrop-filter: saturate(126%) contrast(1.02);
            -webkit-backdrop-filter: saturate(126%) contrast(1.02);
            text-align: center;
            opacity: 0;
            animation: cardPop 1s var(--spring) forwards;
            transition: width 0.3s var(--curve), padding 0.3s var(--curve), height 0.35s var(--curve);
            overflow: hidden;
        }
        .auth-card::before {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(circle at var(--glass-x, 50%) var(--glass-y, 20%), rgba(255,255,255,.24), rgba(255,255,255,.04) 30%, transparent 58%);
            pointer-events: none; z-index: 0;
            border-radius: inherit;
            opacity: .55;
            transition: opacity .25s ease;
        }
        .auth-card::after {
            content: '';
            position: absolute;
            inset: 1px;
            border-radius: 14px;
            pointer-events: none;
            z-index: 0;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.12);
        }
        .auth-card.liquid-glass-ready {
            backdrop-filter: url('#yuni-liquid-distortion') saturate(132%) contrast(1.03);
            -webkit-backdrop-filter: saturate(132%) contrast(1.03);
        }
        .auth-card > * { position: relative; z-index: 1; }
        @keyframes cardPop {
            0% { opacity: 0; transform: scale(0.9) translateY(40px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }
        .card-leave {
            animation: cardDown 0.7s var(--curve) forwards !important;
        }
        @keyframes cardDown {
            to { opacity: 0; transform: scale(0.9) translateY(60px); filter: blur(20px); }
        }

        .logo { font-size: 34px; font-weight: 800; letter-spacing: 0; margin-bottom: 8px; color: #172033; text-shadow: 0 1px 12px rgba(255,255,255,.5); }
        .subtitle { font-size: 14px; font-weight: 500; color: #263347; margin-bottom: 30px; text-shadow: 0 1px 8px rgba(255,255,255,.7); }

        .input-group {
            margin-bottom: 12px; text-align: left;
            overflow: visible;
        }
        .input-group label {
            display: block; font-size: 12px; font-weight: 600;
            color: #253044; margin-bottom: 5px; padding-left: 4px; text-shadow: 0 1px 6px rgba(255,255,255,.72);
        }
        input[type="text"], input[type="password"], input[type="email"] {
            width: 100%; padding: 13px 15px; border-radius: 9px;
            border: 1px solid rgba(255,255,255,.72);
            background:
                radial-gradient(circle at var(--glass-x, 50%) var(--glass-y, 20%), rgba(255,255,255,.34), transparent 42%),
                rgba(244,248,253,.20);
            color: #111827;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(255,255,255,.24), 0 7px 18px rgba(15,23,42,.07);
            backdrop-filter: blur(7px) saturate(132%) contrast(1.02);
            -webkit-backdrop-filter: blur(7px) saturate(132%) contrast(1.02);
            font-size: 15px; outline: none;
            transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
        }
        input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover {
            border-color: rgba(255,255,255,.92);
            background:
                radial-gradient(circle at var(--glass-x, 50%) var(--glass-y, 20%), rgba(255,255,255,.44), transparent 42%),
                rgba(244,248,253,.27);
        }
        input:focus {
            background:
                radial-gradient(circle at var(--glass-x, 50%) var(--glass-y, 20%), rgba(255,255,255,.50), transparent 44%),
                rgba(245,249,255,.30);
            border-color: rgba(0,122,255,.70);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 0 0 3px rgba(0,122,255,.12), 0 9px 22px rgba(15,23,42,.08);
        }
        input[type="text"]:-webkit-autofill,
        input[type="password"]:-webkit-autofill,
        input[type="email"]:-webkit-autofill,
        input[type="text"]:-webkit-autofill:hover,
        input[type="password"]:-webkit-autofill:hover,
        input[type="email"]:-webkit-autofill:hover,
        input[type="text"]:-webkit-autofill:focus,
        input[type="password"]:-webkit-autofill:focus,
        input[type="email"]:-webkit-autofill:focus {
            -webkit-text-fill-color: #111827;
            caret-color: #111827;
            -webkit-background-clip: text;
            background-clip: text;
            background-color: transparent !important;
            -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 0 0 3px rgba(0,122,255,.12), 0 9px 22px rgba(15,23,42,.08);
            transition: background-color 9999s ease-out 0s;
        }

        .code-row {
            display: flex; gap: 10px;
        }
        .code-row input { flex: 1; min-width:0; }
        .code-send-btn {
            white-space: nowrap; padding: 12px 18px; border-radius: 9px;
            border: 1px solid #1c1c1e;
            background: #1c1c1e;
            box-shadow: none;
            color: #fff;
            font-size: 13px; font-weight: 700; cursor: pointer;
            transition: all 0.25s var(--spring); letter-spacing: 0.02em;
            flex-shrink: 0;
        }
        .code-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12); }
        .code-send-btn:active { transform: scale(0.95); }
        .code-send-btn:disabled {
            background: linear-gradient(135deg, #c7c7cc, #aaa);
            border-color: transparent;
            box-shadow: none;
            cursor: not-allowed; transform: none;
        }

        .btn-main {
            width: 100%; padding: 14px; border-radius: 9px; border: none;
            background: var(--accent); color: #fff;
            font-size: 16px; font-weight: 600;
            cursor: pointer; transition: 0.3s var(--spring);
            margin-top: 8px;
        }
        .btn-main:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,122,255,0.2); }
        .btn-main:active { transform: scale(0.97); }
        .btn-main.secondary {
            background: transparent; color: var(--accent);
            border: 1.5px solid var(--accent);
        }

        .agreement-box {
            margin: 6px 0 16px 0; font-size: 12px;
            color: #354052; text-shadow: 0 1px 6px rgba(255,255,255,.7);
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .agreement-box input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            border: 1.5px solid rgba(37,48,68,.55);
            border-radius: 5px;
            background: rgba(255,255,255,.68);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(15,23,42,.08);
            cursor: pointer;
            display: grid;
            place-items: center;
            transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
        }
        .agreement-box input[type="checkbox"]::after {
            content: '✓';
            color: #fff;
            font-size: 13px;
            font-weight: 800;
            line-height: 1;
            transform: scale(0);
            transition: transform .16s var(--spring);
        }
        .agreement-box input[type="checkbox"]:hover {
            border-color: var(--accent);
            background: rgba(255,255,255,.86);
        }
        .agreement-box input[type="checkbox"]:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0,122,255,.18);
        }
        .agreement-box input[type="checkbox"]:checked {
            border-color: var(--accent);
            background: var(--accent);
            box-shadow: 0 3px 10px rgba(0,122,255,.26);
        }
        .agreement-box input[type="checkbox"]:checked::after { transform: scale(1); }
        .agreement-box input[type="checkbox"]:active { transform: scale(.92); }
        .agreement-box a { color: var(--accent); text-decoration: none; font-weight: 600; }

        .switch-row {
            margin-top: 20px; font-size: 13px; color: #374151; text-shadow: 0 1px 6px rgba(255,255,255,.7);
        }
        .switch-row a {
            color: var(--accent); cursor: pointer; text-decoration: none; font-weight: 600;
        }

        .fade-section {
            transition: opacity 0.28s var(--curve), transform 0.28s var(--curve);
        }

        .toast {
            position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
            background: rgba(0,0,0,0.85); color: #fff;
            padding: 12px 24px; border-radius: 20px; font-size: 14px;
            z-index: 999; opacity: 0; pointer-events: none;
            transition: opacity 0.3s; backdrop-filter: blur(10px);
        }
        .toast.show { opacity: 1; }
        .toast.error { background: rgba(255,59,48,0.9); }

        .srv-dot {
            display: inline-block; width: 8px; height: 8px; border-radius: 50%;
            background: #ff3b30; vertical-align: middle; margin-left: 4px;
        }

        #disclaimer-overlay {
            position: fixed; inset: 0; z-index: 999;
            display: none; align-items: center; justify-content: center;
            backdrop-filter: blur(0px); transition: 0.6s var(--curve);
            background: rgba(0,0,0,0);
        }
        #disclaimer-card {
            width: 90%; max-width: 480px;
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(40px);
            border-radius: 35px; padding: 40px;
            transform: scale(0.85); opacity: 0;
            transition: 0.5s var(--spring);
            border: 1px solid rgba(255,255,255,0.4);
            box-shadow: 0 40px 80px rgba(0,0,0,0.15);
        }

        @media (max-width: 768px) {
            .auth-card { width: 92%; padding: 30px 20px; border-radius: 28px; max-height: 90vh; overflow-y: auto; scrollbar-width: none; }
            .auth-card::-webkit-scrollbar { display: none; }
            .logo { font-size: 32px; }
            .subtitle { font-size: 13px; margin-bottom: 22px; }
            input[type="text"], input[type="password"], input[type="email"] { padding: 13px 15px; font-size: 14px; }
            .btn-main { padding: 14px; font-size: 15px; }
            #disclaimer-card { width: 94%; padding: 24px 18px; border-radius: 24px; }
            #disclaimer-card div { height: 200px; font-size: 13px; }
        }