:root {
  --ivory:#f8f2e8; --cream:#fffdf8; --paper:#fbf8f1;
  --burgundy:#6e263d; --burgundy-deep:#4d1d2d; --plum:#3c2934;
  --rose:#b78e97; --rose-soft:#ead9da; --gold:#bf9b55; --gold-soft:#e8d7ad;
  --ink:#302a28; --muted:#786d68; --line:rgba(83,54,53,.15);
  --serif:Georgia,'Times New Roman',serif;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;background:var(--ivory);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100vh;min-height:100svh}
button,input{font:inherit}
.login-layout{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(390px,.93fr) minmax(430px,1.07fr);overflow:hidden}
.portrait-panel{position:relative;min-height:100%;padding:42px 46px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(145deg,#4d1d2d 0%,#3c2934 58%,#281e26 100%);isolation:isolate;overflow:hidden}
.portrait-panel:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 22% 24%,rgba(232,215,173,.18),transparent 19rem),radial-gradient(circle at 88% 78%,rgba(183,142,151,.22),transparent 24rem),linear-gradient(120deg,transparent 40%,rgba(255,255,255,.035))}
.portrait-panel:after{content:'';position:absolute;width:650px;height:650px;right:-330px;top:12%;z-index:-1;border:1px solid rgba(232,215,173,.32);outline:1px solid rgba(255,255,255,.08);outline-offset:-24px;border-radius:50%}
.portrait-shade{position:absolute;left:6%;top:22%;width:72%;aspect-ratio:1;border:1px solid rgba(232,215,173,.12);border-radius:50%;z-index:-1}
.portrait-shade:before{content:'EJ';position:absolute;inset:0;display:grid;place-items:center;color:rgba(248,242,232,.055);font:600 clamp(220px,27vw,430px)/1 var(--serif);letter-spacing:-.1em;transform:translateX(-.03em)}
.portrait-brand{display:flex;align-items:center;gap:16px;text-shadow:0 2px 15px rgba(0,0,0,.25)}
.monogram{width:66px;height:66px;display:grid;place-items:center;border:1.5px solid var(--gold-soft);outline:1px solid rgba(255,255,255,.5);outline-offset:-7px;border-radius:50%;font:600 27px/1 var(--serif);letter-spacing:-.04em;background:rgba(255,255,255,.11);backdrop-filter:blur(6px)}
.portrait-brand p{margin:0 0 5px;color:var(--gold-soft);font-size:10px;font-weight:800;letter-spacing:.26em}
.portrait-brand h1{margin:0;font:600 29px/1.02 var(--serif);letter-spacing:-.025em}
blockquote{max-width:500px;margin:0;padding:0 0 5px;font:500 clamp(25px,3vw,39px)/1.14 var(--serif);letter-spacing:-.025em;text-shadow:0 2px 18px rgba(0,0,0,.34)}
.form-panel{display:grid;place-items:center;padding:42px;background:radial-gradient(circle at 85% 12%,rgba(191,155,85,.16),transparent 24rem),radial-gradient(circle at 8% 90%,rgba(183,142,151,.14),transparent 28rem),var(--ivory)}
.form-card{width:min(100%,500px);padding:42px 44px;border:1px solid var(--line);border-radius:30px;background:rgba(255,253,248,.94);box-shadow:0 25px 70px rgba(71,45,43,.12);backdrop-filter:blur(14px)}
.mobile-brand{display:none}
.eyebrow{margin:0;color:var(--gold);font-size:10px;font-weight:850;letter-spacing:.24em}
h2{margin:6px 0 8px;color:var(--plum);font:600 clamp(36px,4vw,49px)/1 var(--serif);letter-spacing:-.04em}
.intro{margin:0 0 30px;color:var(--muted);font-size:14px;line-height:1.65;max-width:44ch}
fieldset{margin:0 0 25px;padding:0;border:0}
legend,.pin-label{display:block;margin:0 0 10px;color:var(--plum);font-size:12px;font-weight:800}
.user-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.user-choice{position:relative;min-height:105px;padding:13px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.55);cursor:pointer;display:grid;grid-template-columns:46px 1fr;grid-template-rows:1fr 1fr;column-gap:12px;align-items:center;transition:.18s ease;-webkit-tap-highlight-color:transparent}
.user-choice:hover{transform:translateY(-1px);border-color:rgba(110,38,61,.28);box-shadow:0 9px 23px rgba(71,45,43,.07)}
.user-choice.selected{border-color:var(--burgundy);background:#fff;box-shadow:0 0 0 3px rgba(110,38,61,.07)}
.user-choice input{position:absolute;opacity:0;pointer-events:none}
.avatar{grid-row:1/3;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--burgundy);font:600 20px/1 var(--serif)}
.user-choice:nth-child(2) .avatar{background:var(--rose);color:var(--burgundy-deep)}
.user-choice strong{align-self:end;color:var(--plum);font-size:14px}
.user-choice small{align-self:start;color:var(--muted);font-size:11px}
.pin-wrap{position:relative}
#pin{width:100%;height:58px;padding:0 92px 0 18px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--plum);font-size:23px;letter-spacing:.28em;font-variant-numeric:tabular-nums;outline:none;transition:.18s ease}
#pin:focus{border-color:var(--burgundy);box-shadow:0 0 0 4px rgba(110,38,61,.08)}
.pin-toggle{position:absolute;right:8px;top:8px;height:42px;padding:0 12px;border:0;border-radius:11px;background:var(--rose-soft);color:var(--burgundy);font-size:11px;font-weight:800;cursor:pointer}
.hint{margin:8px 0 0;color:var(--muted);font-size:10.5px}
.error{min-height:20px;margin:7px 0 2px;color:#963a3a;font-size:12px;font-weight:700}
.submit{width:100%;height:54px;padding:0 21px;border:0;border-radius:999px;background:var(--burgundy);color:#fff;box-shadow:0 12px 28px rgba(110,38,61,.22);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-weight:800;transition:.18s ease}
.submit:hover{background:var(--burgundy-deep);transform:translateY(-1px)}
.submit:disabled{opacity:.62;cursor:wait;transform:none}
.privacy-note{margin:25px 0 0;text-align:center;color:var(--muted);font-size:10.5px;letter-spacing:.04em}
.privacy-note span{color:var(--gold);margin-right:5px}
@media(max-width:850px){
  .login-layout{grid-template-columns:1fr}
  .portrait-panel{display:none}
  .form-panel{min-height:100vh;min-height:100svh;padding:max(22px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom))}
  .form-card{padding:30px 23px 27px;border-radius:25px}
  .mobile-brand{display:flex;align-items:center;gap:12px;margin-bottom:31px;color:var(--gold);font-size:9px;font-weight:850;letter-spacing:.22em}
  .mobile-brand .monogram{width:52px;height:52px;color:var(--burgundy);border-color:var(--gold);outline-color:rgba(110,38,61,.35);background:var(--cream);font-size:21px}
  h2{font-size:39px}
}
@media(max-width:390px){.user-choice{grid-template-columns:40px 1fr;padding:10px;column-gap:9px}.avatar{width:40px;height:40px}.form-card{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}