/* ═══════════════════════════════════════════════════════════════════
   Pages: Login / Auth
   ═══════════════════════════════════════════════════════════════════ */

.fy-login-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--fluid-grid-gap);
}

.fy-login-hero,
.fy-login-panel {
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(23, 37, 56, 0.12);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 70px rgba(48, 86, 135, 0.16);
  backdrop-filter: blur(18px);
}

.fy-login-hero h1 {
  max-width: 12em;
  margin: 14px 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.fy-login-hero p { color: var(--color-ink-soft); }

/* Identity Cards */
.fy-identity-grid { display: grid; gap: 14px; }

.fy-identity-card {
  width: 100%;
  min-height: 132px;
  padding: 20px;
  text-align: left;
  border: 1px solid rgba(23, 37, 56, 0.12);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--color-ink);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.fy-identity-card:hover,
.fy-identity-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(69, 111, 174, 0.38);
  box-shadow: 0 12px 36px rgba(23, 37, 56, 0.1);
  outline: 3px solid rgba(30, 94, 255, 0.18);
}

.fy-identity-card.selected {
  border: 1.5px solid #4B73D1;
  background: #F6F9FF;
  box-shadow: 0 0 0 3px rgba(75, 115, 209, 0.12);
}

.fy-identity-card strong,
.fy-identity-card em,
.fy-card-arrow { display: block; }

.fy-identity-card strong { margin-top: 14px; font-size: 1.45rem; }

.fy-identity-card em {
  margin-top: 8px;
  color: var(--color-ink-soft);
  font-style: normal;
  line-height: 1.65;
}

.fy-card-arrow { margin-top: 14px; font-weight: var(--weight-extrabold); color: var(--color-blue-500); }

/* Login Form */
.fy-login-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(23, 37, 56, 0.12);
}

.fy-login-form label { display: grid; gap: 8px; color: var(--color-ink); font-weight: var(--weight-extrabold); }

.fy-login-form input {
  width: 100%;
  min-height: 52px;
  padding: 12px 15px;
  border: 1px solid rgba(23, 37, 56, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-ink);
}

.fy-login-form input:focus-visible {
  outline: 3px solid rgba(30, 94, 255, 0.18);
  border-color: var(--color-blue-500);
}

.fy-login-form [hidden] { display: none; }

/* Login Links */
.fy-login-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.fy-login-links a { color: var(--color-blue-500); text-decoration: underline; text-underline-offset: 4px; }

.fy-live-note { margin-top: 16px; color: var(--color-ink-soft); }

/* Guest enter (免登录试用) */
.fy-guest-enter {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(25, 38, 43, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fy-guest-enter span {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.fy-guest-enter .fy-guest-enter-btn {
  width: 100%;
  min-height: 48px;
  font-size: var(--text-base);
}

/* Paper Scene Illustration — #UI 抽象几何（Navy/Blue/Soft Cyan/中性，暖橙≤5%） */
.fy-paper-scene {
  position: relative;
  min-height: 270px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: var(--radius-4xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.14));
}

.fy-cloud { position: absolute; border-radius: var(--radius-full); filter: blur(1px); opacity: 0.9; }

.fy-cloud-one { width: 160px; height: 74px; left: 10%; top: 28%; background: #cfe2ff; }
.fy-cloud-two { width: 180px; height: 86px; right: 8%; top: 22%; background: #dce9fb; }

/* 抽象人物关系：几何圆 + 文件/护照/对话/盾牌 图标，Navy/Blue/Soft Cyan */
.fy-paper-person {
  position: absolute;
  bottom: 34px;
  width: 118px;
  height: 124px;
  border-radius: 34px 34px 20px 20px;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 12px 36px rgba(23, 37, 56, 0.1);
  display: grid;
  place-items: center;
  font-size: 40px;
}

.fy-paper-person span {
  position: absolute;
  left: 30px;
  top: -36px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: inherit;
}

.fy-paper-person i {
  position: absolute;
  inset: 32px 24px auto;
  height: 42px;
  border: 4px solid currentColor;
  border-top: 0;
  border-radius: 0 0 44px 44px;
  opacity: 0.72;
}

.fy-paper-person b {
  position: relative;
  z-index: 1;
  font-size: 40px;
  line-height: 1;
}

/* 抽象几何：Navy / Blue / Soft Cyan，暖橙仅保留极少量 */
.fy-paper-person.elder  { left: 12%;  color: #2B5A94; background: #cfe2ff; --r: -3deg; }
.fy-paper-person.family { left: 42%;  color: #4079b6; background: #dce9fb; --r: 1deg; }
.fy-paper-person.avatar { right: 10%; color: #5A7DE8; background: #eaf0fc; --r: 4deg; }

.fy-connection-line {
  position: absolute;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(69, 111, 174, 0.3);
  transform-origin: left center;
}

.fy-connection-line.line-one { left: 27%; top: 58%; width: 18%; transform: rotate(-9deg); }
.fy-connection-line.line-two { left: 55%; top: 56%; width: 24%; transform: rotate(7deg); }

.fy-paper-card {
  position: absolute;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(23, 37, 56, 0.12);
  font-weight: var(--weight-bold);
  color: var(--color-ink-soft);
}

.fy-paper-card.mini-card-one { left: 6%; bottom: 18px; }
.fy-paper-card.mini-card-two { right: 7%; bottom: 18px; }

/* Focus ring override for role pages */
.fy-role-page :is(a, button, input, select, textarea):focus-visible,
.topbar :is(a, button):focus-visible {
  outline: 3px solid var(--color-focus) !important;
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 940px) {
  .fy-login-page { grid-template-columns: 1fr; }
  .fy-login-hero h1 { font-size: clamp(2rem, 10vw, 3.2rem); }
}

@media (max-width: 640px) {
  .fy-login-hero, .fy-login-panel { padding: 20px; border-radius: var(--radius-xl); }
  .fy-paper-scene { min-height: 220px; }
  .fy-paper-person { width: 88px; height: 96px; }
  .fy-paper-person span { left: 22px; top: -28px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .fy-role-page, .fy-identity-card, .fy-skip-link {
    animation: none !important;
    transition: none !important;
  }
}

/* Login follows the same split-screen trust desk used throughout the product. */
.fy-login-page { max-width: 1060px !important; min-height: calc(100dvh - 92px); grid-template-columns: 1fr 1.08fr; gap: 0; overflow: hidden; border: 1px solid #e9edf3; border-radius: 6px; box-shadow: 0 5px 26px rgba(17,43,76,.055); }
.fy-login-hero { position: relative; min-height: 610px; padding: 40px 46px; border: 0; border-radius: 0; background: radial-gradient(circle at 72% 62%,rgba(30,124,234,.28),transparent 31%), linear-gradient(135deg,#092846,#0b2340 68%,#0c3159); color: white; overflow: hidden; }
.fy-login-hero::after { content:""; position:absolute; inset:0; opacity:.25; background-image: linear-gradient(rgba(117,195,255,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(117,195,255,.32) 1px,transparent 1px); background-size:32px 32px; mask-image:radial-gradient(circle at 65% 57%,black,transparent 55%); pointer-events:none; }
.fy-login-hero > * { position:relative; z-index:1; }.fy-login-hero .fy-pill { color:#cce1ff; background:rgba(127,182,255,.14); border-color:rgba(164,207,255,.22); }.fy-login-hero h1 { margin:34px 0 8px; font-size:26px; color:white; letter-spacing:-.02em; }.fy-login-hero p { color:#bad0e7; font-size:14px; }.fy-login-hero .fy-chip-row { display:none; }.fy-paper-scene { position:absolute; right:18px; bottom:40px; left:18px; min-height:265px; border:0; background:transparent; }.fy-paper-person { opacity:.85; }.fy-paper-card { background:rgba(255,255,255,.11); border-color:rgba(161,207,255,.24); color:#d8ebff; }
.fy-login-panel { padding: 52px 52px 32px; border:0; border-radius:0; background:#fff; box-shadow:none; }.fy-login-panel .fy-section-head .fy-pill { display:none; }.fy-login-panel .fy-section-head h2 { margin:0 0 6px; color:#1a2a42; font-size:20px; }.fy-login-panel .fy-section-head p { margin:0 0 26px; color:#708097; font-size:12px; }
.fy-identity-grid { grid-template-columns: repeat(2,1fr); gap:8px; }.fy-identity-card { min-height:64px; padding:10px; border-radius:7px; }.fy-identity-card .fy-pill,.fy-identity-card em,.fy-card-arrow { display:none; }.fy-identity-card strong { margin:0; font-size:13px; }.fy-identity-card.selected { background:#f2f6ff; border-color:#4a6fd4; box-shadow:0 0 0 1px #4a6fd4; }
.fy-login-form { gap:11px; margin-top:20px; padding-top:0; border:0; }.fy-login-form label { gap:5px; font-size:12px; font-weight:600; color:#405069; }.fy-login-form input { min-height:39px; padding:8px 11px; border-color:#dce4ef; border-radius:6px; font-size:12px; }.fy-login-form .fy-action-row { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:10px; margin-top:7px; }.fy-login-form .button { width:100%; min-height:42px; border-radius:6px; font-size:13px; }.fy-login-form .button.primary { background:#4168d2; }.fy-login-form .button.secondary { display:inline-flex; }.fy-live-note { margin:0; font-size:11px; }.fy-guest-enter { flex-direction:row; justify-content:center; gap:4px; margin-top:14px; padding-top:14px; border-top:1px solid #edf0f5; }.fy-guest-enter .fy-guest-enter-btn { width:auto; min-height:auto; padding:0; color:#4168d2; font-size:11px; }
@media (max-width: 800px) { .fy-login-page { grid-template-columns:1fr; }.fy-login-hero { min-height:260px; padding:30px; }.fy-paper-scene { display:none; }.fy-login-panel { padding:30px 24px; } }
@media (max-width: 480px) { .fy-login-form .fy-action-row { grid-template-columns:1fr; }.fy-login-form .button { min-height:46px; } }

/* Account entry audit: preserve readable identity choices and form controls.
   These selectors intentionally finalize the compact legacy login layer above. */
.fy-login-page { max-width: 1160px !important; }
.fy-login-panel { padding: clamp(32px, 4vw, 54px); }
.fy-login-panel .fy-section-head h2 { font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.3; }
.fy-login-panel .fy-section-head p { margin-bottom: 24px; font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.fy-identity-grid { gap: 10px; }
.fy-identity-card { min-height: 106px; padding: 14px; }
.fy-identity-card .fy-pill { display: none; }
.fy-identity-card strong { margin: 0; font-size: var(--fs-body); }
.fy-identity-card em { display: block; margin-top: 5px; color: #66768d; font-size: var(--fs-label); line-height: var(--lh-label); }
.fy-card-arrow { display: block; margin-top: 7px; color: #4168d2; font-size: var(--fs-caption); line-height: var(--lh-caption); }
.fy-login-form { gap: 13px; margin-top: 24px; }
.fy-login-form label { gap: 7px; font-size: var(--fs-body-s); }
.fy-login-form input { min-height: 50px; padding: 12px 14px; font-size: 16px; }
.fy-field-hint { margin: -5px 0 0; color: #66768d; font-size: var(--fs-label); line-height: var(--lh-label); }
.fy-login-form .fy-action-row { gap: 12px; margin-top: 8px; }
.fy-login-form .button { min-height: 50px; font-size: 16px; }
.fy-live-note { min-height: 1.5em; font-size: var(--fs-label); line-height: var(--lh-label); }
.fy-guest-enter { flex-direction: column; gap: 7px; margin-top: 18px; padding-top: 18px; }
.fy-guest-enter .fy-guest-enter-btn { min-height: 44px; padding: 8px 12px; font-size: var(--fs-body-s); }

/* The administrator flow remains invite-only, but it should be discoverable
   without asking people to hand-edit the route. This only reveals the
   invite-code form; it never grants or changes account permissions. */
.fy-login-admin-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin-top: 14px;
  color: #66768d;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.fy-login-admin-entry a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #315fc2;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fy-login-admin-entry a:hover { color: #244f9e; }

/* A legal-safety illustration replaces the generic paper mockup. The three
   evidence nodes make the product model legible without relying on a stock
   photo or an internal design asset. */
.fy-login-trust-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(100%, 390px);
  height: 290px;
  margin: auto auto 0;
  isolation: isolate;
}

.fy-login-trust-visual::before {
  content: "";
  position: absolute;
  inset: 28px 44px 44px;
  border: 1px solid rgba(124, 190, 255, .28);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32, 122, 213, .24), rgba(7, 29, 54, .08) 62%, transparent 64%);
  box-shadow: 0 28px 70px rgba(0, 12, 30, .34);
}

.fy-login-trust-ring {
  position: absolute;
  border: 1px dashed rgba(145, 204, 255, .38);
  border-radius: 50%;
}
.fy-login-trust-ring.ring-one { width: 242px; height: 166px; transform: rotate(12deg); }
.fy-login-trust-ring.ring-two { width: 186px; height: 232px; transform: rotate(-22deg); }

.fy-login-trust-shield {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 154px;
  border: 1px solid rgba(151, 210, 255, .65);
  border-radius: 50% 50% 46% 46% / 34% 34% 66% 66%;
  background: rgba(8, 43, 78, .82);
  color: #8ecbff;
  box-shadow: inset 0 0 0 8px rgba(65, 147, 225, .08), 0 22px 48px rgba(0, 13, 33, .38);
}
.fy-login-trust-shield svg { width: 72px; height: 72px; stroke-width: 1.35; }

.fy-login-trust-node {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 204, 255, .38);
  border-radius: 999px;
  background: rgba(8, 38, 70, .9);
  color: #d9ecff;
  font-size: var(--fs-caption);
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 12, 30, .28);
}
.fy-login-trust-node.node-evidence { top: 64px; left: 26px; }
.fy-login-trust-node.node-risk { top: 52px; right: 30px; }
.fy-login-trust-node.node-source { right: 42px; bottom: 52px; }
.fy-login-trust-visual > strong {
  position: absolute;
  bottom: 18px;
  color: rgba(230, 244, 255, .9);
  font-size: var(--fs-label);
  letter-spacing: .08em;
}

@media (max-width: 760px) {
  .fy-login-trust-visual { display: none; }
}

@media (max-width: 560px) {
  .fy-login-panel { padding: 28px 20px 32px; }
  .fy-identity-grid { grid-template-columns: 1fr; }
  .fy-identity-card { min-height: 96px; }
  .fy-login-form .fy-action-row { grid-template-columns: 1fr; }
  .fy-login-admin-entry { margin-top: 12px; }
}