:root {
    color-scheme: dark;
    font-family: "Aptos", "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    background: #090b0e;
    color: #f1f7f7;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow: hidden; background: #090b0e; }
body::before {
    position: fixed; inset: 0; content: ""; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(78, 246, 227, .055) 1px, transparent 1px),
        linear-gradient(rgba(78, 246, 227, .04) 1px, transparent 1px),
        radial-gradient(circle at 18% 32%, rgba(22, 154, 158, .25), transparent 28%),
        radial-gradient(circle at 76% 72%, rgba(55, 91, 220, .18), transparent 24%);
    background-size: 44px 44px, 44px 44px, auto, auto;
}
body::after {
    position: fixed; inset: 0; content: ""; pointer-events: none;
    background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(116, 255, 242, .02) 3px 4px);
}

.login-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(420px, .7fr); min-height: 100vh; }
.login-identity { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px, 5vw, 76px); border-right: 1px solid rgba(119, 232, 222, .16); }
.login-identity::after { position: absolute; right: -1px; top: 12%; width: 2px; height: 24%; content: ""; background: #4ef0df; box-shadow: 0 0 24px #4ef0df; }
.login-brand { display: flex; align-items: center; gap: 15px; letter-spacing: .08em; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 14px; }
.login-brand small { margin-top: 5px; color: #7c8c93; font-size: 10px; }
.login-mark { position: relative; width: 42px; height: 42px; border: 1px solid #55dfd3; transform: rotate(45deg); box-shadow: inset 0 0 20px rgba(78, 240, 223, .16), 0 0 24px rgba(78, 240, 223, .12); }
.login-mark i, .login-mark b { position: absolute; background: #55dfd3; }
.login-mark i { width: 18px; height: 1px; left: 11px; top: 20px; }
.login-mark b { width: 1px; height: 18px; left: 20px; top: 11px; }
.login-statement { max-width: 720px; }
.login-statement p, .login-form header > span { color: #52dcd1; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.login-statement h1 { margin: 18px 0 24px; max-width: 690px; font-size: clamp(54px, 7vw, 108px); line-height: .94; letter-spacing: 0; }
.login-statement > span { display: block; max-width: 580px; color: #91a0a6; font-size: 16px; line-height: 1.8; }
.login-signals { display: flex; gap: clamp(28px, 5vw, 72px); }
.login-signals div { padding-left: 13px; border-left: 1px solid #2a3c40; }
.login-signals span, .login-signals strong { display: block; }
.login-signals span { color: #617077; font: 10px ui-monospace, monospace; }
.login-signals strong { margin-top: 7px; color: #c9d9d9; font: 12px ui-monospace, monospace; }

.login-access { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 6vw, 96px); background: rgba(10, 12, 15, .76); backdrop-filter: blur(18px); }
.login-form { width: min(100%, 430px); margin: auto; }
.login-form header { margin-bottom: 50px; }
.login-form h2 { margin: 12px 0 8px; font-size: 34px; letter-spacing: 0; }
.login-form header p { margin: 0; color: #748189; }
.login-form label { display: block; margin-bottom: 26px; }
.login-form label span { display: block; margin-bottom: 10px; color: #a6b2b7; font-size: 13px; }
.login-form input { width: 100%; height: 54px; padding: 0 16px; color: #eef8f7; font-size: 16px; background: rgba(19, 24, 29, .9); border: 1px solid #2b383e; border-radius: 4px; outline: none; transition: 160ms ease; }
.login-form input:focus { border-color: #4ee6d8; box-shadow: 0 0 0 3px rgba(78, 230, 216, .1), 0 0 25px rgba(78, 230, 216, .09); }
.login-form .remember-option { display: flex; align-items: center; gap: 11px; width: fit-content; margin: -7px 0 24px; color: #9ba8ad; cursor: pointer; user-select: none; }
.remember-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.remember-option > i { position: relative; flex: 0 0 34px; width: 34px; height: 18px; border: 1px solid #314047; border-radius: 9px; background: #161b20; transition: 160ms ease; }
.remember-option > i b { position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #66757b; transition: 160ms ease; }
.remember-option > span { margin: 0 !important; font-size: 12px !important; }
.remember-option input:checked + i { border-color: #4ee6d8; background: rgba(78, 230, 216, .16); box-shadow: 0 0 16px rgba(78, 230, 216, .12); }
.remember-option input:checked + i b { left: 19px; background: #63eadf; box-shadow: 0 0 9px #4ee6d8; }
.remember-option input:focus-visible + i { outline: 2px solid #4ee6d8; outline-offset: 3px; }
.login-form button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; padding: 0 20px; color: #031413; font-weight: 700; background: #57e7d9; border: 0; border-radius: 4px; cursor: pointer; }
.login-form button b { font-size: 24px; }
.login-form button:disabled { opacity: .55; cursor: wait; }
.login-error { min-height: 24px; margin: -10px 0 16px; color: #ff8f80; font-size: 13px; }
.login-access footer { display: flex; align-items: center; gap: 8px; margin: 44px auto 0; width: min(100%, 430px); color: #5e6b71; font: 10px ui-monospace, monospace; letter-spacing: .12em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ee6a8; box-shadow: 0 0 12px #4ee6a8; }

@media (max-width: 900px) {
    body { overflow: auto; }
    .login-shell { grid-template-columns: 1fr; }
    .login-identity { min-height: 42vh; padding: 30px 26px; border-right: 0; border-bottom: 1px solid rgba(119, 232, 222, .16); }
    .login-identity::after, .login-signals { display: none; }
    .login-statement h1 { margin-bottom: 14px; font-size: clamp(42px, 13vw, 68px); }
    .login-statement > span { font-size: 14px; line-height: 1.6; }
    .login-access { min-height: 58vh; padding: 44px 26px; }
    .login-form header { margin-bottom: 32px; }
}