/* Isolated login concept. Colors and control sizing follow public/styles.css. */
:root {
  --bg:#10181c;
  --bg-2:#151f23;
  --card:#192329;
  --line:#2a353c;
  --text:#e8eef0;
  --muted:#8b9aa3;
  --teal:#3d9b8f;
  --btn:#243038;
  --hover:#182228;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { font-family:"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--text); }
button,input { font:inherit; }
button { cursor:pointer; }
.back-home { position:fixed; top:22px; left:24px; z-index:20; color:#78aaa9; font-size:13px; line-height:1.3; text-decoration:none; transition:color .18s ease; }
.back-home:hover { color:#b9ded8; text-decoration:underline; }
.page { min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:44% 56%; overflow:hidden; }
.sign-in { min-height:100vh; min-height:100dvh; display:grid; place-items:center; position:relative; z-index:2; background:linear-gradient(135deg,#10181c 0%,#111a1e 68%,#0f181c 100%); border-right:1px solid #304047; }
.sign-in-inner { width:min(100% - 112px,450px); min-width:0; position:relative; top:-34px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--text); font-size:15px; font-weight:750; letter-spacing:.085em; }
.brand img { width:31px; height:34px; object-fit:contain; flex:none; }
.form-area { margin-top:86px; }
.eyebrow { display:block; font-size:11px; font-weight:700; letter-spacing:.15em; color:#8ac5bd; }
.heading h1 { margin:12px 0 5px; font-size:clamp(34px,3vw,44px); line-height:1.12; letter-spacing:-.035em; font-weight:720; }
.heading p { margin:0; color:var(--muted); font-size:15px; line-height:1.5; }
form { margin-top:37px; }
.field { margin:0 0 18px; }
.field label { display:block; margin:0 0 8px; color:#dce6e7; font-size:13px; font-weight:600; }
.field input { display:block; width:100%; height:47px; padding:0 14px; border:1px solid #36434b; border-radius:3px; outline:0; background:var(--bg-2); color:var(--text); color-scheme:dark; font-size:14px; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.field input::placeholder { color:#91a2aa; opacity:1; }
.field input:hover { border-color:#52616a; }
.field input:focus { border-color:#5ba99e; box-shadow:0 0 0 3px rgba(61,155,143,.12); background:#151f23; }
.field input:-webkit-autofill { -webkit-text-fill-color:var(--text); box-shadow:0 0 0 1000px var(--bg-2) inset; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:53px; }
.eye-button { position:absolute; top:0; right:0; width:48px; height:47px; display:grid; place-items:center; border:0; border-radius:0 3px 3px 0; background:transparent; color:#91a0a8; }
.eye-button:hover { color:#dbe5e7; }
.eye-button svg { width:19px; height:19px; }
.eye-closed { display:none; }
.eye-button[aria-pressed="true"] .eye-open { display:none; }
.eye-button[aria-pressed="true"] .eye-closed { display:block; }
.form-options { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:1px 0 21px; }
.remember { display:inline-flex; align-items:center; gap:8px; color:#d6e0e2; font-size:13px; cursor:pointer; }
.remember input { width:15px; height:15px; margin:0; accent-color:var(--teal); }
.text-button { border:0; padding:4px 0; background:none; color:#a0dcd1; font-size:13px; font-weight:700; }
.text-button:hover { color:#b5e0d8; text-decoration:underline; }
.action-row { display:grid; grid-template-columns:minmax(0,44fr) minmax(0,56fr); gap:10px; }
.primary-button,.google-button { min-width:0; width:100%; height:46px; border-radius:3px; font-size:14px; font-weight:700; transition:background .18s ease,border-color .18s ease; }
.primary-button { border:1px solid #5b9e94; background:#28383c; color:#f2f7f6; }
.primary-button:hover { background:#34474b; border-color:#82c5ba; }
.google-button { display:flex; align-items:center; justify-content:center; gap:8px; padding:0 8px; border:1px solid #354149; background:#171f25; color:#e4ebec; white-space:nowrap; }
.google-button:hover { background:#202a30; border-color:#61767a; }
.google-button svg { width:17px; height:17px; flex:none; }
.preview-note { margin:11px 0 0; padding:10px 12px; border:1px solid var(--line); border-radius:6px; color:#b8d5d0; background:#142522; font-size:12px; line-height:1.4; }
.preview-note[hidden] { display:none; }
:focus-visible { outline:2px solid #7ec9bf; outline-offset:3px; }

.world-panel { min-width:0; min-height:100vh; min-height:100dvh; overflow:hidden; position:relative; isolation:isolate; background:radial-gradient(ellipse 82% 70% at 78% 39%,#193337 0%,#13262b 48%,#101b21 76%,#0c151b 100%); }
.world-panel::before { content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(90deg,rgba(11,25,30,.92) 0%,rgba(12,29,34,.62) 16%,rgba(14,34,39,.24) 34%,transparent 54%),radial-gradient(ellipse 48% 50% at 65% 42%,rgba(61,155,143,.11),transparent 72%); pointer-events:none; }
.world-panel::after { content:""; position:absolute; z-index:1; bottom:0; left:0; right:0; height:27%; background:linear-gradient(0deg,rgba(10,20,27,.91) 0%,rgba(10,20,27,.46) 48%,rgba(10,20,27,0) 100%); pointer-events:none; }
.world-topline { position:absolute; top:44px; left:clamp(34px,5vw,84px); right:clamp(34px,5vw,84px); display:flex; align-items:center; gap:12px; z-index:3; color:#94adae; font-size:10px; font-weight:700; letter-spacing:.16em; white-space:nowrap; }
.signal-dot { width:6px; height:6px; border-radius:50%; background:#66bdb0; box-shadow:0 0 9px rgba(102,189,176,.4); }
.topline-rule { height:1px; flex:1; position:relative; overflow:hidden; background:rgba(157,189,187,.20); }
.topline-rule::before,.topline-rule::after { content:""; position:absolute; top:0; left:-20%; width:18%; height:1px; background:linear-gradient(90deg,transparent,rgba(174,226,215,.72),transparent); animation:signal-sweep 5.5s linear infinite; }
.topline-rule::before { animation-delay:-2.75s; }
@keyframes signal-sweep { 0%,8% { transform:translateX(0); opacity:0; } 18% { opacity:.9; } 78% { opacity:.9; } 92%,100% { transform:translateX(680%); opacity:0; } }
.status-end { animation:status-arrival 5.5s ease-in-out infinite; }
@keyframes status-arrival { 0%,72%,100% { color:#94adae; text-shadow:none; } 84% { color:#c7e6e1; text-shadow:0 0 8px rgba(113,211,198,.28); } }
.globe-stage { position:absolute; z-index:1; width:108%; aspect-ratio:1; top:4%; right:-21%; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 12%,rgba(0,0,0,.66) 31%,rgba(0,0,0,.94) 50%,#000 68%); mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 12%,rgba(0,0,0,.66) 31%,rgba(0,0,0,.94) 50%,#000 68%); }
.globe-halo { position:absolute; inset:13%; border-radius:50%; background:radial-gradient(circle at 63% 42%,rgba(62,142,154,.10),rgba(32,88,108,.025) 48%,transparent 73%); filter:blur(22px); }
#globe { position:absolute; inset:0; width:100%; height:100%; display:block; }
.world-copy { position:absolute; z-index:3; left:clamp(34px,5vw,84px); right:36px; bottom:clamp(105px,13vh,160px); max-width:680px; text-shadow:0 1px 10px rgba(6,14,18,.6); }
.world-copy h2 { margin:13px 0 13px; color:#e8eef0; font-size:clamp(27px,2.3vw,35px); line-height:1.23; letter-spacing:-.025em; font-weight:690; }
.world-copy h2 em { color:#bed9d5; font-style:normal; }
.world-copy p { margin:0; color:#a0b3b5; font-size:14px; line-height:1.5; }
.world-footer { position:absolute; z-index:3; bottom:30px; left:clamp(34px,5vw,84px); right:clamp(34px,5vw,84px); display:flex; justify-content:space-between; gap:14px; color:#718c90; font-size:9px; font-weight:700; letter-spacing:.13em; border-top:1px solid rgba(151,187,185,.14); padding-top:17px; }

@media (max-width:1050px) {
  .page { grid-template-columns:48% 52%; }
  .sign-in-inner { width:min(100% - 68px,440px); }
  .world-copy h2 { font-size:29px; }
  .globe-stage { width:126%; right:-38%; top:5%; }
}
@media (max-width:760px) {
  .back-home { top:16px; left:18px; font-size:12px; }
  .page { display:block; overflow:auto; }
  .sign-in { min-height:100vh; min-height:100dvh; border-right:0; background:radial-gradient(ellipse 80% 35% at 90% 0%,rgba(37,90,86,.15),transparent 75%),var(--bg); }
  .sign-in-inner { width:min(100% - 48px,460px); padding:32px 0; top:-14px; }
  .form-area { margin-top:55px; }
  .sign-in .field input { font-size:16px !important; }
  .world-panel { display:none; }
}
@media (max-width:880px) {
  .action-row { grid-template-columns:minmax(0,42fr) minmax(0,58fr); gap:8px; }
  .action-row .primary-button,.action-row .google-button { padding-left:6px; padding-right:6px; font-size:12px; }
  .action-row .google-button { gap:5px; }
}
@media (max-width:420px) {
  .sign-in-inner { width:calc(100% - 36px); }
  .form-area { margin-top:42px; }
  .heading h1 { font-size:36px; }
  .form-options { align-items:flex-start; }
}
@media (max-height:730px) and (min-width:761px) {
  .sign-in-inner { top:-10px; }
  .form-area { margin-top:35px; }
  .world-copy { bottom:70px; }
  .globe-stage { top:-20%; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}

/* Working authentication states */
form[hidden], [hidden] { display:none !important; }
.brand { text-decoration:none; }
.sign-in { overflow:auto; padding:28px 0; }
.sign-in-inner { margin:auto; }
.form-area form:not(#loginForm) { margin-top:28px; }
.form-area .muted { color:var(--muted); line-height:1.5; }
.login-name-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sign-in .field input { height:47px !important; border-radius:3px !important; background:var(--bg-2) !important; border:1px solid #36434b !important; color:var(--text) !important; }
.sign-in .eye-button { top:0 !important; right:0 !important; width:48px !important; min-width:48px !important; height:47px !important; padding:0 !important; border-radius:0 3px 3px 0 !important; }
.sign-in .primary-button,.sign-in .google-button { min-height:46px; border-radius:3px !important; }
.sign-in .google-btn { margin:0; opacity:.72; }
.sign-in .google-btn .google-icon { position:static; width:17px; height:17px; transform:none; }
.sign-in .google-btn .google-icon svg { width:17px; height:17px; }
.sign-in .login-go { display:inline-flex; align-items:center; justify-content:center; }
.sign-in .secondary-auth-form { margin-top:28px; }
.login-status { min-height:42px; margin-top:12px; }
.sign-in .banner { display:block !important; min-height:42px; margin:0; visibility:hidden; opacity:0; }
.sign-in .banner.show { visibility:visible; opacity:1; }
.sign-in .text-button { margin-top:8px; }
.sign-in .form-options .text-button { margin-top:0; }
@media (max-width:880px) { .login-name-grid { grid-template-columns:1fr; gap:0; } }

/* Fix719: grey eye at the password ring end; reserved Wrong login slot. */
.sign-in input[type="password"]::-ms-reveal,
.sign-in input[type="password"]::-ms-clear{display:none!important;width:0!important;height:0!important;}
.sign-in .password-wrap,.sign-in .pass-wrap{position:relative!important;overflow:visible!important;}
.sign-in .password-wrap input,.sign-in .pass-wrap input{padding-right:48px!important;}
.sign-in .eye-button.eye{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:46px!important;
  min-width:46px!important;
  height:47px!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  display:grid!important;
  place-items:center!important;
  z-index:3!important;
  color:#9aa6ad!important;
  font-size:0!important;
  line-height:0!important;
  opacity:1!important;
  background:transparent!important;
  border:0!important;
}
.sign-in .eye-button.eye svg{display:none!important;}
.sign-in .eye-button.eye::before{
  content:"";
  width:18px;
  height:18px;
  display:block;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2.6 12s3.5-6 9.4-6 9.4 6 9.4 6-3.5 6-9.4 6-9.4-6-9.4-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.7' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2.6 12s3.5-6 9.4-6 9.4 6 9.4 6-3.5 6-9.4 6-9.4-6-9.4-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.7' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sign-in .eye-button.eye[aria-pressed="true"]::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M3 3l18 18M9.8 6.3A12 12 0 0 1 12 6c6 0 9.5 6 9.5 6a18 18 0 0 1-3.2 3.8M6.1 7.1A19 19 0 0 0 2.5 12s3.5 6 9.5 6a13 13 0 0 0 4.3-.8M10 10a2.8 2.8 0 0 0 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M3 3l18 18M9.8 6.3A12 12 0 0 1 12 6c6 0 9.5 6 9.5 6a18 18 0 0 1-3.2 3.8M6.1 7.1A19 19 0 0 0 2.5 12s3.5 6 9.5 6a13 13 0 0 0 4.3-.8M10 10a2.8 2.8 0 0 0 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sign-in .eye-button.eye:hover{color:#dbe5e7!important;}

/* 730: stable auth layout and reset visibility controls. */
.sign-in{overflow-anchor:none}
.sign-in-inner,.form-area{animation:none!important;transition:none!important}
.login-status{height:54px;min-height:54px}
.sign-in .banner{min-height:42px;max-height:54px;overflow:auto}