/* Shared full-page login scene. Shared brand colors; no modal or backdrop. */
body[data-app="admin"], body[data-app="user"] { color: #163b60; background: #fff; }
.admin-login-page {
  display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(460px, 1fr);
  min-height: 100svh;
  background: radial-gradient(ellipse at 0% 0%, #099cf954, transparent 56%),
    linear-gradient(135deg, #7ccfff 0%, #c8ebff 32%, #edf8ff 58%, #fff 83%);
}
.brand-scene { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; display: grid; place-items: center; }
.scene-brand {
  position: absolute; top: 38px; left: clamp(32px, 4.1vw, 78px);
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: #154b77; font-size: 23px; font-weight: 700; z-index: 2;
}
.scene-brand img { width: 42px; height: 42px; object-fit: contain; }
.scene-identity { z-index: 1; text-align: center; padding: 100px 35px; transform: translateY(-8px); }
.hero-logo { width: clamp(152px, 13vw, 208px); margin: 0 auto 30px; }
.hero-logo img { display: block; width: 100%; filter: drop-shadow(0 20px 28px #0579d62b); }
.scene-identity h2 { margin: 0; font-size: clamp(36px, 3vw, 48px); font-weight: 720; letter-spacing: 3px; color: #124778; }
.scene-identity p { margin: 18px 0 0; font-size: 18px; letter-spacing: 3px; color: #537f9f; }
.flowing-cards { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.card-lane { position: absolute; left: -160px; width: 94px; height: 110px; animation: card-drift 50s linear infinite; }
.flow-card {
  display: block; position: relative; width: 100%; height: 100%;
  border-radius: 15px 25px 15px 15px; background: linear-gradient(145deg, #ffffffcc, #f4fbff66);
  border: 1px solid #ffffffb5; box-shadow: -7px 6px 0 #ffffff25, 0 12px 30px #0073c50b;
  transform: rotate(var(--tilt, -15deg));
}
.flow-card::before {
  content: ""; position: absolute; top: 0; right: 0; width: 27%; height: 25%;
  border-radius: 0 20px 0 11px; background: linear-gradient(135deg, #c3eaff, #a3dfff);
  box-shadow: -2px 3px 5px #1d93d910; clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.flow-card b { position: absolute; width: 33%; height: 31%; left: 37%; top: 39%; clip-path: polygon(0 0, 100% 50%, 0 100%); background: linear-gradient(135deg, #33b6ffb3, #0c84f582); border-radius: 5px; }
.lane-two .flow-card, .lane-six .flow-card { background: linear-gradient(145deg, #69c6ffbb, #bce6ffa3); border-color: #dff4ffd4; }
.lane-one { top: 15%; width: 62px; height: 78px; animation-duration: 47s; animation-delay: -20s; opacity: .6; --tilt: -18deg; }
.lane-two { top: 29%; width: 92px; height: 114px; animation-duration: 62s; animation-delay: -42s; opacity: .4; --tilt: 14deg; }
.lane-three { top: 63%; width: 69px; height: 85px; animation-duration: 55s; animation-delay: -15s; opacity: .52; --tilt: -12deg; }
.lane-four { top: 81%; width: 105px; height: 132px; animation-duration: 69s; animation-delay: -42s; opacity: .4; --tilt: 18deg; }
.lane-five { top: 8%; width: 38px; height: 48px; animation-duration: 58s; animation-delay: -52s; opacity: .5; --tilt: 8deg; }
.lane-six { top: 48%; width: 42px; height: 53px; animation-duration: 72s; animation-delay: -21s; opacity: .35; --tilt: 20deg; }
.lane-seven { top: 72%; width: 33px; height: 43px; animation-duration: 45s; animation-delay: -31s; opacity: .6; --tilt: -22deg; }
.lane-eight { top: 39%; width: 51px; height: 64px; animation-duration: 80s; animation-delay: -64s; opacity: .28; --tilt: -9deg; }
@keyframes card-drift { from { transform: translateX(0); } to { transform: translateX(calc(65vw + 320px)); } }
.admin-login-column { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 86px clamp(34px, 4vw, 84px) 110px; }
.admin-login-column .login-card { width: 100%; max-width: 420px; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; animation: none; isolation: auto; }
.admin-login-column .login-layout { display: block; min-height: 0; }
.login-heading { margin-bottom: 42px; }
.login-heading h1 { color: #153e65; margin: 0; font-size: 36px; line-height: 1.35; letter-spacing: 1px; font-weight: 680; }
.login-heading p { margin: 12px 0 0; color: #8097aa; font-size: 15px; line-height: 1.7; }
.admin-login-column .field-label { display: block; margin-bottom: 12px; color: #43627c; font-size: 15px; font-weight: 550; }
.admin-login-column .input-shell { height: 60px; border-radius: 16px; border: 1px solid #bed7eb; background: #ffffffc9; box-shadow: none; }
.admin-login-column .input-shell:focus-within { border-color: #278ffa; box-shadow: 0 0 0 4px #168eff0b; background: #fff; }
.admin-login-column .input-shell.invalid { border-color: #ca5554; }
.admin-login-column .input-shell input { font-size: 16px; padding: 0 18px; }
.admin-login-column .input-shell input::placeholder { color: #9ab0c2; }
.admin-login-column .country-code { font-size: 16px; margin-left: 19px; margin-right: 15px; }
.admin-login-column .input-divider { height: 22px; background: #abc9e33d; }
.admin-login-column .code-group { margin-top: 25px; }
.admin-login-column .send-code { height: 56px; width: 124px; font-size: 14px; }
.admin-login-column .form-message { height: 46px; min-height: 46px; font-size: 13px; line-height: 1.5; }
.admin-login-column .login-button { height: 60px; border-radius: 16px; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 16px; box-shadow: 0 9px 24px #0781f324; }
.admin-login-column .login-button svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.admin-login-column .login-button:disabled { box-shadow: none; }
.admin-login-column .agreement { margin-top: 22px; flex-wrap: nowrap; gap: 8px; color: #8094a5; font-size: 12px; line-height: 1.95; }
.admin-login-column .agreement input { width: 17px; height: 17px; flex-basis: 17px; margin: 3px 0 0; border-radius: 4px; }
.admin-login-column .agreement input:checked::after { margin: 4px 0 0 4px; }
.agreement-text { flex: 1; min-width: 0; }
.admin-login-column .policy-panel { padding: 0; min-height: 0; }
.admin-login-column .policy-reading .policy-panel { padding: 0; height: min(690px, calc(100svh - 160px)); min-height: 360px; }
.admin-login-column .policy-panel h2 { font-size: 27px; color: #163b60; line-height: 1.5; }
.admin-login-column .back-button { font-size: 14px; }
.admin-login-column .policy-content { font-size: 14px; }
.admin-login-column .draft-label { font-size: 11px; }
@media (min-width: 1800px) { .admin-login-column .login-card { max-width: 460px; } .login-heading h1 { font-size: 40px; } }
@media (max-width: 1000px) { .admin-login-page { grid-template-columns: minmax(0, 1fr) minmax(410px, 1fr); } .admin-login-column { padding-left: 34px; padding-right: 34px; } .scene-identity p { font-size: 15px; letter-spacing: 2px; } }
@media (max-width: 760px) {
  .admin-login-page { grid-template-columns: 1fr; background: linear-gradient(145deg, #a2ddff 0%, #eaf7ff 38%, #fff 74%); }
  .brand-scene { min-height: 260px; height: 30svh; max-height: 340px; }
  .scene-brand { top: 25px; left: 26px; font-size: 19px; gap: 9px; }
  .scene-brand img { width: 32px; height: 32px; }
  .scene-identity { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 18px; padding: 82px 26px 30px; transform: none; }
  .hero-logo { width: 84px; margin: 0; }
  .scene-identity h2 { font-size: 30px; letter-spacing: 2px; }
  .scene-identity p { flex-basis: 100%; margin-top: 13px; font-size: 13px; }
  .card-lane { scale: .65; }
  @keyframes card-drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 320px)); } }
  .admin-login-column { padding: 28px 28px 90px; min-height: 520px; }
  .login-heading { margin-bottom: 30px; }
  .login-heading h1 { font-size: 30px; margin: 0; }
  .login-heading p { font-size: 14px; }
  .admin-login-column .policy-reading .policy-panel { height: 580px; min-height: 360px; max-height: 75svh; }
}
@media (prefers-reduced-motion: reduce) { .card-lane { animation: none; left: 7%; } .lane-two, .lane-four, .lane-five, .lane-eight { left: 72%; } }


/* A folded page corner beside the greeting, with a readable hover/focus label. */
.login-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.client-page-turn {
  position: relative; flex: 0 0 152px; height: 64px; text-decoration: none;
  color: #086dc0; border-radius: 12px; isolation: isolate;
}
.client-page-turn::before {
  content: ""; position: absolute; inset: 8px 0;
  background: linear-gradient(115deg, #ffffffed, #e6f5ffed);
  border: 1px solid #d2eaff; border-radius: 11px;
  opacity: 0; transform: translateX(8px);
  transition: opacity .24s ease, transform .34s ease;
}
.turn-label {
  position: absolute; left: 15px; top: 50%; z-index: 1;
  font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translate(8px,-50%);
  transition: opacity .24s ease .04s, transform .34s ease;
}
.turn-fold {
  position: absolute; top: 4px; right: 0; width: 44px; height: 44px; z-index: 2;
  clip-path: polygon(0 0,100% 100%,100% 0);
  background: linear-gradient(225deg,#bce6ff 0%,#7cc5f954 45%,#fff 49%,#d6efff 55%,#8ec7ec 100%);
  filter: drop-shadow(-2px 3px 3px #317fb31c);
  transform-origin: top right; transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.client-page-turn:hover::before, .client-page-turn:focus-visible::before { opacity: 1; transform: translateX(0); }
.client-page-turn:hover .turn-label, .client-page-turn:focus-visible .turn-label { opacity: 1; transform: translate(0,-50%); }
.client-page-turn:hover .turn-fold, .client-page-turn:focus-visible .turn-fold { transform: translate(-1px,1px) scale(1.3); filter: drop-shadow(-3px 4px 4px #317fb329); }
.client-page-turn:focus-visible { outline: 2px solid #459ef7; outline-offset: 4px; }
@media (hover: none) { .client-page-turn::before { opacity: 1; transform: none; } .turn-label { opacity: 1; transform: translate(0,-50%); } }
@media (max-width: 380px) { .client-page-turn { flex-basis: 136px; } .turn-label { font-size: 15px; left: 10px; } .login-title-row { gap: 8px; } .login-heading h1 { font-size: 28px; } }

/* User-specific QR area; shared scene and phone form use the same rules above. */
.scan-identity { position: relative; z-index: 1; text-align: center; padding: 110px 28px 64px; color: #164b77; }
.scan-identity h2 { margin: 0; font-size: 32px; line-height: 1.5; font-weight: 650; letter-spacing: 2px; }
.scan-subtitle { margin: 10px 0 28px; color: #5281a2; font-size: 16px; letter-spacing: 1px; }
.user-qr-frame { position: relative; width: 248px; height: 248px; padding: 17px; margin: 0 auto; background: #fffffff2; border: 1px solid #ffffffb8; border-radius: 23px; box-shadow: 0 18px 45px #087aca19; }
.user-qr-frame svg { display: block; width: 212px; height: 212px; shape-rendering: crispEdges; opacity: .42; }
.qr-unavailable { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); white-space: nowrap; border-radius: 30px; padding: 10px 22px; color: #37627e; background: #f5fbfff5; border: 1px solid #cfe5f6; font-size: 15px; box-shadow: 0 4px 18px #164b7710; }
.user-scan-instruction { font-size: 16px; line-height: 1.9; margin: 28px 0 0; color: #507b9c; }
.user-scan-instruction strong { font-weight: 550; color: #087de0; }
.user-scan-note { font-size: 13px; margin: 15px 0 0; color: #6a8ba5; }
.client-home { min-height: 100svh; display: grid; place-items: center; position: relative; background: linear-gradient(135deg,#c8ebff 0%,#edf8ff 40%,#fff 83%); padding: 100px 28px; }
.client-home-brand { position: absolute; top: 38px; left: clamp(32px,4.1vw,78px); display: flex; align-items: center; gap: 12px; font-size: 23px; color: #154b77; }
.client-home-brand img { width: 42px; height: 42px; }
.client-home .signed-in p { line-height: 1.8; color: #607c93; }
@media(max-width:760px) {
  body[data-app="user"] .brand-scene { height: auto; max-height: none; min-height: 480px; }
  .scan-identity { padding: 90px 24px 26px; }
  .scan-identity h2 { font-size: 27px; }
  .scan-subtitle { font-size: 14px; margin: 5px 0 18px; }
  .user-qr-frame { width: 194px; height: 194px; padding: 14px; border-radius: 18px; }
  .user-qr-frame svg { width: 164px; height: 164px; }
  .user-scan-instruction { font-size: 14px; margin-top: 18px; }
  .user-scan-note { font-size: 12px; margin-top: 8px; }
}