/* Sign-in page — design A (split panel). Colours, fonts and shadows come
   from theme.css (same as the admin app); this file uses only its variables.
   Local names kept as aliases so the rules below read as before. */
:root{ --paper:var(--bg); --ink:var(--text); --line:var(--border); }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--brass);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}

.page{display:grid;grid-template-columns:minmax(380px,46%) 1fr;min-height:100vh}

/* ---- brand panel ---- */
.panel{position:relative;overflow:hidden;color:var(--side-text);padding:48px 56px;display:flex;flex-direction:column;
  background:
    radial-gradient(1200px 600px at 110% 120%, rgba(201,160,99,.20), transparent 60%),
    radial-gradient(800px 500px at -20% -10%, rgba(39,82,127,.55), transparent 60%),
    linear-gradient(165deg,var(--navy-800),var(--navy-950))}
.panel .lines{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 88px)}
.panel .mark{position:absolute;right:-90px;bottom:-60px;width:520px;opacity:.07;filter:saturate(0) brightness(2);pointer-events:none}
.panel .logo{position:relative;width:210px}
.panel .quote{margin-top:auto;position:relative;max-width:440px}
.panel .rule{width:44px;height:2px;background:var(--gold);margin-bottom:22px}
.panel .quote p{font-family:var(--serif);font-size:30px;line-height:1.22;color:var(--on-navy);font-weight:400;letter-spacing:-.005em}
.panel .quote em{color:var(--gold-l);font-style:italic}
.panel .quote small{display:block;margin-top:18px;font-size:13px;color:var(--c4);line-height:1.6}
.panel .foot{position:relative;margin-top:48px;font-size:11.5px;color:var(--side-foot);display:flex;justify-content:space-between}

/* ---- form side ---- */
.right{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 32px}
.mlogo{display:none}
.form{width:100%;max-width:380px;animation:rise .45s ease both}
.legal{margin-top:auto;padding-top:40px;text-align:center;font-size:11.5px;color:var(--faint);line-height:1.6}

.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:14px}
.h{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.1;letter-spacing:-.01em;color:var(--navy-900);margin-bottom:10px}
.sub{font-size:14px;line-height:1.55;color:var(--muted);margin-bottom:28px}
.field{margin-bottom:16px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:500;margin-bottom:7px}
.inp{position:relative}
.inp input{width:100%;height:48px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0 14px;
  font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s, box-shadow .15s}
.inp input.pw{padding-right:64px}
.inp input::placeholder{color:var(--placeholder)}
.inp input:focus{outline:none;border-color:var(--navy-600);box-shadow:var(--focus-ring)}
.err .inp input{border-color:var(--neg)}
.eye{position:absolute;right:8px;top:8px;height:32px;padding:0 10px;border:0;background:transparent;color:var(--muted);
  font:inherit;font-size:12px;font-weight:500;cursor:pointer;border-radius:6px}
.eye:hover{background:var(--surface-3);color:var(--ink)}

.btn{width:100%;height:48px;border:0;border-radius:10px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s, transform .05s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.65;cursor:progress}
.btn-primary{background:var(--navy-900);color:var(--on-navy);margin-top:8px}
.btn-primary:hover:not(:disabled){background:var(--navy-700)}
.btn-primary .arr{color:var(--gold);transition:transform .15s}
.btn-primary:hover .arr{transform:translateX(3px)}
.btn-google{background:var(--card);color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn-google:hover{background:var(--surface-2)}
.or{display:flex;align-items:center;gap:14px;margin:22px 0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}

.alert{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.5;margin-bottom:20px}
.alert svg{flex-shrink:0;margin-top:2px}
.alert.bad{background:var(--neg-bg);border:1px solid var(--neg-br);color:var(--neg-tx)}
.alert.info{background:var(--info-bg);border:1px solid var(--info-br);color:var(--info-tx)}

.secure{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:26px}
.secure svg{color:var(--pos);flex-shrink:0}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:26px}
.back:hover{color:var(--ink);text-decoration:none}
.small{font-size:13px;color:var(--muted);line-height:1.55;margin-top:20px}

.otp{display:flex;gap:10px;margin:4px 0 18px}
.otp input{width:100%;min-width:0;height:58px;text-align:center;font-family:var(--serif);font-size:26px;font-weight:500;
  color:var(--navy-900);border:1px solid var(--line);border-radius:10px;background:var(--card)}
.otp input:focus{outline:none;border-color:var(--navy-600);box-shadow:var(--focus-ring)}
.otp .gap{flex:0 0 6px}
.err .otp input{border-color:var(--neg)}

.rules{list-style:none;margin:2px 0 18px;display:grid;gap:7px}
.rules li{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--muted)}
.rules li i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.rules li.ok{color:var(--ink)}
.rules li.ok i{background:var(--pos);border-color:var(--pos)}
.rules li.ok i:after{content:"";width:6px;height:3.5px;border-left:1.6px solid var(--card);border-bottom:1.6px solid var(--card);transform:rotate(-45deg) translate(1px,-1px)}
.meter{display:flex;gap:4px;margin:-6px 0 14px}
.meter span{flex:1;height:4px;border-radius:2px;background:var(--surface-3);transition:background .2s}
.meter span.f{background:var(--pos)}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:860px){
  .page{grid-template-columns:1fr}
  .panel{display:none}
  .right{padding:40px 16px}
  .mlogo{display:block;width:170px;margin:0 auto 36px}
}
/* Required authenticator, first time: QR code and the one-time recovery codes */
.qr{display:flex;justify-content:center;margin:4px 0 8px}
.qr img{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:8px}
.small code,.codes code{font-family:var(--mono);font-size:13px;color:var(--navy-900)}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 24px;padding:14px;border:1px solid var(--line);
  border-radius:10px;background:var(--card)}