/* QrTapz log in + sign up. Self-contained: no build step needed. */
:root { --blue:#2B3FF2; --blue-deep:#1B2AC4; --yellow:#FFD23F; --ink:#14142B; --body:#4A4A68; --line:#C9CCE0; --mist:#F3F4FB; --red:#B42318; --green:#128A5E;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --text:"Instrument Sans","Segoe UI",system-ui,sans-serif; }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; background:var(--mist); color:var(--body); font-family:var(--text); font-size:18px; line-height:1.5; -webkit-font-smoothing:antialiased; }
h1,p { margin:0; }
a { color:var(--blue); font-weight:700; text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }

.page { display:grid; min-height:100vh; }
.side { display:none; background:var(--blue); color:#DCE0FF; padding:40px 48px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#fff; font-family:var(--display); font-size:1.5rem; font-weight:800; letter-spacing:-.03em; }
.brand img { width:44px; height:44px; border-radius:12px; box-shadow:0 0 0 2px rgba(255,255,255,.28); }
.side h2 { margin:0; color:#fff; font-family:var(--display); font-size:clamp(2.25rem,3.6vw,3.25rem); font-weight:800; letter-spacing:-.035em; line-height:1; }
.side p { margin-top:16px; max-width:22em; font-size:1.125rem; }
.sample { width:230px; margin-top:40px; padding:18px; border-radius:22px; background:var(--yellow); color:var(--ink); transform:rotate(-6deg); box-shadow:0 24px 40px -18px rgba(8,10,60,.6); }
.sample img { display:block; width:124px; height:124px; border-radius:12px; }
.sample b { display:block; margin-top:12px; font-family:var(--display); font-size:1.125rem; line-height:1.15; }
.sample span { font-size:.875rem; font-weight:600; }

.main { display:flex; flex-direction:column; align-items:center; padding:28px 20px 48px; }
.main > .brand { color:var(--ink); margin-bottom:28px; align-self:flex-start; }
.main > .brand img { box-shadow:none; }
.box { width:100%; max-width:460px; margin:auto 0; }
.box h1 { font-family:var(--display); color:var(--ink); font-size:clamp(2rem,6vw,2.75rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; }
.box h1 + p { margin-top:8px; }
form { display:grid; gap:20px; margin-top:28px; }
.field label { display:block; margin-bottom:6px; color:var(--ink); font-weight:700; }
.field .help { margin-bottom:8px; font-size:1rem; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password] {
  width:100%; height:56px; padding:0 16px; border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); font:inherit; font-size:1.125rem; }
.field input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(43,63,242,.18); }
.field.has-error input { border-color:var(--red); }
.error { margin-top:6px; color:var(--red); font-weight:600; font-size:1rem; }
.status { margin-top:20px; padding:12px 16px; border-radius:14px; background:#E2F6EE; color:#0B5C3E; font-weight:600; }

.pw { position:relative; }
.pw input { padding-right:92px !important; }
.pw button { position:absolute; right:6px; top:6px; height:44px; padding:0 14px; border:0; border-radius:10px; background:var(--mist); color:var(--ink); font:inherit; font-size:1rem; font-weight:700; cursor:pointer; }
.addr { display:flex; align-items:center; border:2px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; }
.addr:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px rgba(43,63,242,.18); }
.addr span { padding-left:16px; color:var(--body); font-size:1.125rem; white-space:nowrap; }
.addr input { border:0 !important; border-radius:0 !important; box-shadow:none !important; padding-left:2px !important; min-width:0; }
.has-error .addr { border-color:var(--red); }

.check { display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:600; cursor:pointer; }
.check input { width:24px; height:24px; accent-color:var(--blue); }
.btn { display:flex; align-items:center; justify-content:center; width:100%; min-height:58px; padding:0 24px; border:2px solid transparent; border-radius:999px; font-family:var(--display); font-size:1.125rem; font-weight:700; text-decoration:none; cursor:pointer; }
.btn-blue { background:var(--blue); color:#fff; }
.btn-blue:hover { background:var(--blue-deep); }
.btn-line { border-color:var(--line); background:#fff; color:var(--ink); }
.btn-line:hover { border-color:var(--ink); }
.or { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); display:grid; gap:12px; }
.or p { color:var(--ink); font-weight:600; }
.small { text-align:center; font-size:1rem; }

@media (min-width:960px) {
  .page { grid-template-columns:minmax(380px,.85fr) 1.15fr; }
  .side { display:flex; flex-direction:column; justify-content:space-between; }
  .main > .brand { display:none; }
  .main { padding:48px; }
}