.signin-page { min-height: 100svh; background: #020506; }
.signin-shell { display: grid; grid-template-columns: minmax(0,1.22fr) minmax(390px,.78fr); min-height: 100svh; }
.signin-scene { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; border-right: 1px solid rgba(255,255,255,.1); background: #020506; }
.signin-earth,
.signin-earth img,
.signin-shade { position: absolute; inset: 0; }
.signin-earth { z-index: -4; overflow: hidden; }
.signin-earth img { width: 100%; height: 100%; object-fit: cover; object-position: 77% 52%; transform: scale(1.03); filter: brightness(.51) saturate(.76) contrast(1.09); }
.signin-shade { z-index: -2; background: linear-gradient(90deg,rgba(1,4,6,.95) 0%,rgba(1,4,6,.78) 34%,rgba(1,4,6,.25) 67%,rgba(1,4,6,.48) 100%),linear-gradient(180deg,rgba(1,4,6,.68),transparent 26%,transparent 70%,rgba(1,4,6,.92)); }
.signin-header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(22px,4vw,64px); border-bottom: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg,rgba(2,5,7,.48),transparent); }
.signin-story { position: absolute; z-index: 3; left: clamp(28px,6vw,100px); top: 47%; width: min(610px,58vw); transform: translateY(-48%); }
.signin-story > p:first-child { display: flex; align-items: center; gap: 12px; margin: 0 0 23px; color: rgba(255,255,255,.61); font-size: .61rem; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; }
.signin-story > p:first-child span { width: 28px; height: 1px; background: #62d68e; box-shadow: 0 0 13px rgba(98,214,142,.68); }
.signin-story h1 { max-width: 670px; color: white; font-size: clamp(3.5rem,5.65vw,7rem); font-weight: 530; letter-spacing: -.065em; line-height: .9; }
.signin-story h1 em { color: rgba(255,255,255,.53); }
.signin-story > p:last-child { max-width: 520px; margin: 28px 0 0; color: rgba(255,255,255,.58); font-size: clamp(.88rem,1.08vw,1.03rem); line-height: 1.68; }

.signin-map-marker { position: absolute; z-index: 4; right: clamp(58px,8vw,92px); bottom: 33%; display: flex; align-items: center; }
.signin-map-marker > img { position: relative; z-index: 3; width: clamp(42px,4vw,58px); height: clamp(42px,4vw,58px); object-fit: contain; filter: drop-shadow(0 13px 23px rgba(0,0,0,.58)); }
.signin-map-marker > div { position: relative; z-index: 2; display: grid; gap: 4px; min-width: 182px; margin-left: -10px; padding: 12px 14px 12px 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(4,10,10,.9); backdrop-filter: blur(18px); box-shadow: 0 18px 38px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.09); }
.signin-map-marker span { color: #8ce8ad; font-size: .45rem; font-weight: 850; letter-spacing: .13em; }
.signin-map-marker strong { color: #fff; font-size: .59rem; font-weight: 820; letter-spacing: .045em; }
.signin-map-marker small { color: rgba(255,255,255,.67); font-size: .5rem; font-weight: 650; }
.signin-scene-footer { position: absolute; z-index: 4; left: clamp(28px,6vw,100px); right: clamp(28px,5vw,76px); bottom: 27px; display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.31); font-size: .48rem; font-weight: 740; letter-spacing: .15em; }
.signin-panel { display: grid; place-items: center; min-height: 100svh; padding: clamp(32px,5vw,76px); background: radial-gradient(circle at 15% 8%,rgba(22,163,74,.09),transparent 30%),#050806; }
.signin-panel-inner { width: min(100%,430px); }
.signin-panel-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; color: #72dc99; font-size: .54rem; font-weight: 770; letter-spacing: .17em; }
.signin-panel-mark img { width: 27px; height: 27px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(22,163,74,.22)); }
.signin-panel h2 { margin: 0; color: white; font-size: clamp(2.25rem,3.15vw,3.85rem); font-weight: 550; letter-spacing: -.055em; line-height: .96; }
.signin-intro { margin: 15px 0 31px; color: rgba(255,255,255,.49); font-size: .82rem; line-height: 1.6; }
.signin-form { display: grid; gap: 11px; }
.signin-form > label,.signin-label-row label { color: rgba(255,255,255,.52); font-size: .6rem; font-weight: 700; letter-spacing: .035em; }
.signin-label-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.signin-label-row button { padding: 0; border: 0; background: transparent; color: rgba(114,220,153,.75); cursor: pointer; font-size: .58rem; }
.signin-label-row button:hover,.signin-label-row button:focus-visible { color: #92e8b0; }
.signin-field { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; min-height: 54px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(1,5,6,.72); transition: border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.signin-field:focus-within { border-color: rgba(98,214,142,.68); background: rgba(2,9,7,.9); box-shadow: 0 0 0 3px rgba(22,163,74,.09); }
.signin-field > span { padding-left: 14px; color: rgba(114,220,153,.78); font-family: Arial,sans-serif; font-size: .72rem; font-weight: 800; }
.signin-field input { min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; color: white; font: inherit; font-size: .78rem; }
.signin-field input::placeholder { color: rgba(255,255,255,.25); }
.signin-field input:disabled { cursor: not-allowed; opacity: .38; }
.password-toggle { height: 34px; margin-right: 7px; padding: 0 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.03); color: rgba(255,255,255,.43); cursor: pointer; font-size: .47rem; font-weight: 760; letter-spacing: .1em; }
.signin-security { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; margin-top: 9px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.025); }
.signin-security > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(98,214,142,.35); border-radius: 8px; background: rgba(22,163,74,.12); color: #77dd9c; font-size: .7rem; }
.signin-security div { display: grid; gap: 2px; }
.signin-security strong { color: rgba(255,255,255,.72); font-size: .62rem; }
.signin-security small { color: rgba(255,255,255,.32); font-size: .5rem; }
.signin-security b { color: rgba(114,220,153,.62); font-size: .45rem; letter-spacing: .12em; }
.signin-error { min-height: 14px; margin: 0; color: #ff7f7f; font-size: .58rem; }
.signin-submit,.signin-create { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 15px; border-radius: 11px; cursor: pointer; font-size: .75rem; font-weight: 760; transition: transform .18s ease,background .18s ease,border-color .18s ease; }
.signin-submit { border: 1px solid #dc2626; background: #dc2626; color: white; box-shadow: 0 14px 34px rgba(220,38,38,.2); }
.signin-submit:hover:not(:disabled),.signin-submit:focus-visible:not(:disabled) { transform: translateY(-3px); background: #b91c1c; border-color: #b91c1c; }
.signin-submit:disabled,.auth-provider-buttons button:disabled { cursor: not-allowed; opacity: .34; box-shadow: none; }
.signin-submit i,.signin-create i { font-style: normal; }
.signin-terms { margin: 17px 0 0; color: rgba(255,255,255,.28); font-size: .52rem; line-height: 1.6; text-align: center; }
.signin-terms button { padding: 0; border: 0; background: transparent; color: rgba(114,220,153,.68); cursor: pointer; font: inherit; }
.signin-divider { display: flex; align-items: center; gap: 13px; margin: 25px 0 17px; color: rgba(255,255,255,.26); font-size: .48rem; font-weight: 750; letter-spacing: .13em; }
.signin-divider::before,.signin-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.09); }
.signin-create { border: 1px solid #dc2626; background: #dc2626; color: white; box-shadow: 0 14px 34px rgba(220,38,38,.16); }
.signin-create:hover,.signin-create:focus-visible { transform: translateY(-3px); border-color: #b91c1c; background: #b91c1c; }
.signin-create-note { margin: 10px 0 0; color: rgba(255,255,255,.31); font-size: .55rem; line-height: 1.55; text-align: center; }
.signup-page .signin-panel { padding-block: clamp(28px,4vw,58px); }
.signup-page .signin-panel-inner { width: min(100%,470px); }
.signup-page .signin-intro { margin-bottom: 23px; }
.signup-page .signin-form { gap: 10px; }
.signup-page .signup-map-marker { bottom: 26%; }
.signup-consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; margin-top: 7px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.022); color: rgba(255,255,255,.42); font-size: .53rem; line-height: 1.5; cursor: pointer; transition: border-color .18s ease,background .18s ease; }
.signup-consent:hover,.signup-consent:focus-within { border-color: rgba(98,214,142,.35); background: rgba(98,214,142,.035); }
.signup-consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: #16a34a; }
.signup-consent strong { display: block; margin-bottom: 2px; color: rgba(255,255,255,.76); font-size: .57rem; }
.signup-consent a { color: #7ddd9f; text-underline-offset: 3px; }
.signup-consent-required { border-color: rgba(98,214,142,.2); }
.auth-terms { margin: 0 0 15px; }
.auth-terms strong { display: inline; margin: 0; }
.auth-provider-slot { display: grid; gap: 9px; margin: 0 0 18px; }
.auth-provider-slot > span { color: rgba(255,255,255,.38); font-size: .49rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.auth-provider-slot > small { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.25); font-size: .46rem; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.auth-provider-slot > small::before,.auth-provider-slot > small::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.auth-provider-placeholder { height: 1px; background: rgba(255,255,255,.06); }
.auth-provider-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.auth-provider-buttons button { min-height: 42px; padding: 0 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.72); cursor: pointer; font-size: .59rem; font-weight: 680; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.auth-provider-buttons button:hover:not(:disabled),.auth-provider-buttons button:focus-visible:not(:disabled) { transform: translateY(-2px); border-color: rgba(98,214,142,.38); background: rgba(98,214,142,.07); }
.auth-secondary-actions { display: grid; gap: 11px; margin-top: 19px; }
.auth-text-action { justify-self: center; padding: 2px 4px; border: 0; background: transparent; color: rgba(114,220,153,.7); cursor: pointer; font-size: .57rem; }
.auth-text-action:hover,.auth-text-action:focus-visible { color: #92e8b0; }
.signup-signin { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.035); box-shadow: none; }
.signup-signin:hover,.signup-signin:focus-visible { border-color: rgba(98,214,142,.44); background: rgba(98,214,142,.08); }
.reset-page .signin-panel-inner { width: min(100%,430px); }

@media (max-width: 980px) {
  .signin-shell { grid-template-columns: 1fr; }
  .signin-scene { min-height: 720px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .signin-story { top: 45%; width: min(670px,80vw); }
  .signin-map-marker { right: clamp(72px,16vw,158px); bottom: 33%; }
  .signin-panel { min-height: auto; padding-block: 76px; }
}

@media (max-width: 600px) {
  .signin-scene { min-height: 680px; }
  .signin-header { padding: 16px 18px; }
  .signin-story { top: 39%; left: 22px; right: 22px; width: auto; }
  .signin-story h1 { font-size: clamp(3rem,13vw,4.7rem); }
  .signin-story > p:last-child { max-width: 92%; font-size: .83rem; }
  .signin-map-marker { right: 16px; bottom: 33%; }
  .signin-map-marker > img { width: 48px; height: 48px; }
  .signin-map-marker > div { min-width: 155px; padding: 10px 10px 10px 18px; }
  .signin-scene-footer { left: 22px; right: 22px; }
  .signin-scene-footer span:last-child { display: none; }
  .signin-panel { padding: 64px 22px; }
  .auth-provider-buttons { grid-template-columns: 1fr; }
}

/* Explicit foreground/background pairs keep provider labels readable across shared button styles. */
.signin-page .auth-provider-buttons button { background: #13271e; color: #f2fff6; border-color: #486955; }
.signin-page .auth-provider-buttons button:hover:not(:disabled),
.signin-page .auth-provider-buttons button:focus-visible:not(:disabled) { background: #245b3b; color: #fff; border-color: #92e8b0; }
.signin-page .auth-provider-buttons button:focus-visible { outline: 2px solid #92e8b0; outline-offset: 3px; }
.signin-page .auth-provider-buttons button:disabled { background: #17221c; color: #9eafa5; opacity: 1; border-color: #344b3d; }
.signin-legal-links { margin: 0 0 18px; color: #a4b4ab; font-size: .65rem; }
.signin-legal-links a { color: #92e8b0; }