/* Jiying brand theme: logo blue above, clean white below. Layout stays in styles.css. */
:root {
  --blue: #087ff5;
  --panel: #ffffff;
  --muted: #62798e;
  --ink: #163b60;
  --logo-cyan: #16b7f4;
  --logo-blue: #087ff5;
  --logo-deep: #0758e9;
}

.login-card {
  color-scheme: light;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d6e8fa;
  box-shadow: 0 20px 64px #0c66ad18, 0 5px 18px #0c66ad09;
}

.ambient-pattern {
  background:
    radial-gradient(ellipse at 0% 0%, #17b4fa6b 0%, #17b4fa00 58%),
    linear-gradient(180deg, #82caff 0%, #bbe4ff 22%, #edf8ff 51%, #ffffff 78%);
}

/* Folded playback cards echo the approved icon, replacing the old triangles. */
.ambient-pattern i {
  width: 25px;
  height: 32px;
  clip-path: none;
  background: linear-gradient(145deg, #ffffffed, #ffffff70);
  border: 1px solid #ffffff60;
  border-radius: 5px 9px 5px 5px;
  box-shadow: -4px 3px 0 #ffffff30, 0 3px 7px #2878b512;
  opacity: .43;
  transform: rotate(-14deg);
}

.ambient-pattern i::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: -1px;
  right: -1px;
  background: #aadfff;
  border-bottom-left-radius: 4px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.ambient-pattern i::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 10px;
  left: 9px;
  top: 12px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #54b4ed;
  border-radius: 1px;
}

.ambient-pattern i:nth-child(1) { top: 18px; left: 24px; }
.ambient-pattern i:nth-child(2) {
  top: 28px; left: 208px; width: 36px; height: 43px;
  opacity: .24; transform: rotate(14deg);
}
.ambient-pattern i:nth-child(2)::after { left: 13px; top: 17px; }
.ambient-pattern i:nth-child(3),
.ambient-pattern i:nth-child(4),
.ambient-pattern i:nth-child(5),
.ambient-pattern i:nth-child(8) { display: none; }
.ambient-pattern i:nth-child(6) {
  top: 17px; left: 564px; width: 25px; height: 32px;
  opacity: .3; transform: rotate(-12deg);
}
.ambient-pattern i:nth-child(7) {
  top: 41px; left: 662px; width: 25px; height: 32px;
  opacity: .35; transform: rotate(15deg);
}

.close-button { color: #305e87; }
.close-button:hover { color: #0a4b86; background: #ffffff63; }
.divider { background: #427fad25; }
.qr-frame {
  border-radius: 8px;
  box-shadow: 0 6px 20px #2b7aae14, 0 0 0 1px #ffffffc9;
}
.scan-instruction { color: #486780; }
.scan-instruction span { color: #0569c5; }
.scan-note { color: #6b8092; }
.phone-column h1 { color: #153e65; font-weight: 500; }
.input-shell {
  background: #ffffffb8;
  border-color: #9cbfda;
  box-shadow: 0 2px 5px #5189b005;
}
.input-shell:focus-within {
  background: #ffffffed;
  border-color: #258bf0;
  box-shadow: 0 0 0 3px #128aff0d;
}
.input-shell.invalid { border-color: #ca5554; }
.input-shell input { color: #203f5c; }
.input-shell input::placeholder { color: #698094; }
.country-code { color: #35536f; }
.input-divider { background: #41729a30; }
.send-code { color: #086bc9; }
.send-code:hover { color: #004e9f; }
.send-code:disabled { color: #6e8497; }
.form-message { color: #b14745; }
.form-message.info { color: #146ab0; }
.login-button {
  background: linear-gradient(105deg, #129ffb, #087df5 66%, #0b6eea);
  box-shadow: 0 5px 14px #087ff51c, inset 0 1px 0 #ffffff1a;
}
.login-button:hover {
  background: linear-gradient(105deg, #29adff, #208cff 66%, #197ef5);
}
.login-button:disabled { background: #86b8df; color: #fff; box-shadow: none; }
.agreement { color: #607489; }
.agreement input { background: #ffffffb3; border-color: #8098ad; }
.agreement input:checked { background: var(--blue); border-color: var(--blue); }
.agreement.consent-error input { border-color: #b14745; box-shadow: 0 0 0 3px #b1474512; }
.policy-link { color: #076dcc; }
.policy-link:hover { color: #004d9a; }
.back-button { color: #095ea5; }
.draft-label { color: #3c6385; border-color: #90b7d5; background: #ffffff62; }
.policy-content { color: #3e5b74; }
.policy-content strong { color: #163b60; font-weight: 650; }
.policy-content h3 { font-size: 16px; color: #163b60; margin: 26px 0 12px; font-weight: 650; }
.policy-content:focus-visible { outline: 2px solid #70b5f0; outline-offset: 5px; border-radius: 3px; }
.policy-reading .ambient-pattern {
  background: linear-gradient(180deg, #aadfff 0, #e7f6ff 105px, #fff 220px);
}
.policy-reading .policy-panel {
  display: flex;
  flex-direction: column;
  height: min(680px, calc(100svh - 96px));
  min-height: 360px;
  padding: 30px 40px;
}
.policy-reading .back-button { align-self: flex-start; }
.policy-reading .policy-panel h2 { margin: 17px 0 10px; }
.policy-reading .draft-label { align-self: flex-start; }
.policy-reading .policy-content {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin-top: 20px;
  padding: 0 14px 4px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a8cde9 transparent;
  line-height: 1.95;
}
.policy-reading .policy-content p { margin: 0 0 14px; }

@media (max-width: 560px) {
  .policy-reading .policy-panel { height: calc(100svh - 96px); padding: 30px 24px; min-height: 320px; }
  .ambient-pattern {
    background:
      radial-gradient(ellipse at 0% 0%, #17b4fa55 0%, #17b4fa00 52%),
      linear-gradient(180deg, #82caff 0%, #d2edff 25%, #f5fbff 51%, #fff 72%);
  }
  .ambient-pattern i:nth-child(2) { left: auto; right: 36px; top: 62px; }
}


/* Persistent login choice, independent of required agreement consent. */
.remember-choice{display:flex;align-items:center;gap:7px;margin:0 0 14px;color:#5d7b94;font-size:12px;cursor:pointer}
.remember-choice input{width:15px;height:15px;margin:0;accent-color:#087ff5;cursor:pointer}
.remember-choice small{font-size:11px;color:#92a8b8;margin-left:auto}
.admin-login-column .remember-choice{font-size:14px;margin-bottom:17px;gap:8px}
.admin-login-column .remember-choice input{width:16px;height:16px}
.admin-login-column .remember-choice small{font-size:12px}