:root { --bg:#f5f5f7; --surface:rgba(255,255,255,.76); --surface-strong:rgba(255,255,255,.92); --text:#1d1d1f; --muted:#6e6e73; --muted-2:#86868b; --line:rgba(0,0,0,.08); --blue:#007aff; --blue-dark:#0068d9; --green:#34c759; --shadow:0 28px 80px rgba(0,0,0,.10); --radius-xl:34px; --radius-lg:24px; --radius-md:16px; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif; background:radial-gradient(circle at 20% 10%, rgba(0,122,255,.16), transparent 30%),radial-gradient(circle at 82% 18%, rgba(175,82,222,.13), transparent 28%),radial-gradient(circle at 50% 100%, rgba(52,199,89,.10), transparent 30%),var(--bg); -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
.login-shell { min-height:100vh; width:min(1180px, calc(100% - 32px)); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 430px; align-items:center; gap:54px; padding:42px 0; }
.brand-area { padding:24px 0; }
.brand-row { display:inline-flex; align-items:center; gap:12px; margin-bottom:36px; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:17px; color:#fff; background:linear-gradient(135deg,#007aff,#5e5ce6); font-size:1.2rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 30px rgba(0,122,255,.22); }
.brand-text strong { display:block; font-size:1rem; font-weight:760; letter-spacing:-.025em; line-height:1.1; }
.brand-text span { display:block; margin-top:2px; color:var(--muted); font-size:.82rem; font-weight:520; }
.hero-title { margin:0; max-width:700px; font-size:clamp(3.1rem,7vw,6.4rem); line-height:.9; letter-spacing:-.085em; font-weight:820; }
.hero-copy { margin:24px 0 0; max-width:560px; color:rgba(60,60,67,.72); font-size:1.1rem; line-height:1.55; font-weight:460; }
.feature-strip { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:34px; }
.feature-pill { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; border-radius:999px; color:rgba(60,60,67,.78); background:rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.68); backdrop-filter:blur(18px); box-shadow:0 8px 20px rgba(0,0,0,.035); font-size:.86rem; font-weight:560; }
.feature-pill i { color:var(--blue); }
.login-card { position:relative; overflow:hidden; border-radius:var(--radius-xl); border:1px solid rgba(255,255,255,.76); background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,250,252,.82)); backdrop-filter:blur(28px); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.86); padding:28px; }
.login-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at top right, rgba(0,122,255,.12), transparent 34%); }
.login-card-inner { position:relative; z-index:1; }
.login-head { margin-bottom:24px; }
.login-kicker { margin:0 0 8px; color:var(--muted-2); font-size:.78rem; font-weight:640; letter-spacing:.055em; text-transform:uppercase; }
.login-title { margin:0; font-size:2rem; line-height:1.06; letter-spacing:-.052em; font-weight:780; }
.login-subtitle { margin:9px 0 0; color:var(--muted); font-size:.94rem; line-height:1.45; }
.form-stack { display:grid; gap:14px; }
.input-group { display:grid; gap:7px; }
.input-label { color:rgba(60,60,67,.68); font-size:.78rem; font-weight:560; padding-left:3px; }
.input-wrap { position:relative; }
.input-wrap i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:rgba(60,60,67,.44); font-size:.95rem; pointer-events:none; }
.soft-input { width:100%; min-height:50px; padding:0 16px 0 44px; border-radius:17px; border:1px solid rgba(0,0,0,.065); outline:none; color:var(--text); background:rgba(255,255,255,.74); font-size:.96rem; font-weight:520; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.soft-input:hover { background:rgba(255,255,255,.9); border-color:rgba(0,0,0,.095); }
.soft-input:focus { background:#fff; border-color:rgba(0,122,255,.36); box-shadow:0 0 0 4px rgba(0,122,255,.10), inset 0 1px 0 rgba(255,255,255,.86); }
.password-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:999px; color:rgba(60,60,67,.62); background:transparent; cursor:pointer; display:grid; place-items:center; transition:background .16s ease; }
.password-toggle:hover { background:rgba(118,118,128,.10); }
.password-toggle i { position:static; transform:none; pointer-events:auto; }
.remember-row { display:inline-flex; align-items:center; gap:9px; color:rgba(60,60,67,.72); font-size:.86rem; font-weight:520; cursor:pointer; }
.remember-row input { appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:6px; border:1px solid rgba(0,0,0,.16); background:rgba(255,255,255,.72); display:grid; place-items:center; cursor:pointer; }
.remember-row input:checked { border-color:var(--blue); background:var(--blue); }
.remember-row input:checked::after { content:"✓"; color:#fff; font-size:.72rem; font-weight:800; }
.sign-in-btn { width:100%; min-height:50px; margin-top:8px; border:0; border-radius:999px; background:var(--blue); color:#fff; font-size:.96rem; font-weight:650; cursor:pointer; box-shadow:0 12px 24px rgba(0,122,255,.24); transition:transform .16s ease, background .16s ease, box-shadow .16s ease; }
.sign-in-btn:hover { background:var(--blue-dark); box-shadow:0 14px 28px rgba(0,122,255,.28); transform:translateY(-1px); }
.sign-in-btn:active { transform:scale(.985); }
.security-note { margin-top:18px; display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:18px; background:rgba(52,199,89,.08); color:rgba(60,60,67,.72); font-size:.82rem; line-height:1.38; }
.security-note i { color:#248a3d; margin-top:1px; }
.login-footer { margin-top:22px; color:var(--muted); font-size:.83rem; line-height:1.45; text-align:center; }
.error-banner { margin: 0 0 12px; color:#b42318; font-size:.86rem; font-weight:560; }
@media (max-width:920px) { .login-shell { grid-template-columns:1fr; gap:34px; align-content:center; } .brand-area { text-align:center; padding:8px 0 0; } .brand-row { margin-bottom:24px; } .hero-title,.hero-copy { margin-left:auto; margin-right:auto; } .feature-strip { justify-content:center; } .login-card { width:min(430px, 100%); margin:0 auto; } }
@media (max-width:520px) { .login-shell { width:min(100% - 22px, 1180px); padding:22px 0; } .hero-title { font-size:3rem; } .hero-copy,.feature-strip { display:none; } .login-card { padding:22px; border-radius:28px; } }