:root {
    --bg-color: #0d0f12;
    --card-bg: #161a22;
    --sti-blue: #00529b;
    --sti-yellow: #fff200;
    --neon-green: #38a9ff;
    --error-red: #ff3333;
    --text-main: #ffffff;
    --text-muted: #8b949e;
    --border: #21262d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
    position: relative;
}

.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.blob {
    position: absolute;
    width: 500px;
    height: 500px;
    background: var(--sti-yellow);
    filter: blur(120px);
    opacity: 0.05;
    border-radius: 50%;
}

.blob-1 { top: -150px; right: -100px; }
.blob-2 { bottom: -150px; left: -100px; background: var(--sti-blue); }

/* --- MAIN INTERFACE CARD --- */
.wrapper {
    width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--border);
    margin: 20px;
}

/* --- SIDE-BY-SIDE OPTIONS ROW (Remember Me & Forgot Password) --- */
.form-row-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.form-row-options a {
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

.form-row-options a:hover {
    color: var(--neon-green);
}

/* --- Back Button Styling --- */
.back-btn {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    margin-top: 10px;
    box-shadow: none !important;
}

.back-btn:hover {
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--text-muted) !important;
}

/* --- HEADER SYSTEM --- */
.header {
    text-align: center;
    margin-bottom: 30px;
}

.logo-container {
    background: transparent; 
    padding: 5px;
    display: inline-block;
    margin-bottom: 15px;
    cursor: default;
    filter: drop-shadow(0 0 10px rgba(0, 82, 155, 0.4));
}

.logo-img {
    width: 90px; 
    height: auto;
    display: block;
    user-select: none;  
    -webkit-user-drag: none;
}

h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

/* --- CONFIGURING FORM ELEMENTS --- */
.input-group {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.input-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-box input {
    width: 100%;
    height: 50px;
    padding: 0 48px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.input-box input:focus {
    outline: none;
    border-color: var(--neon-green);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px rgba(56, 169, 255, 0.15);
}

/* --- FIXED PLACEMENT ICON RENDERING --- */
.left-icon {
    position: absolute;
    left: 16px;
    font-size: 18px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 10;
}

.toggle-password {
    position: absolute;
    right: 16px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 18px;
    z-index: 10;
    padding: 4px;
}

.toggle-password:hover {
    color: var(--text-main);
}

/* --- TERMS AND CHECKBOX LAYOUT --- */
.terms-group {
    margin: 15px 0 20px;
    text-align: left;
}

.terms-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.terms-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--neon-green);
    cursor: pointer;
}

.terms-label a {
    color: var(--neon-green);
    text-decoration: none;
    font-weight: 600;
}

.terms-label a:hover {
    text-decoration: underline;
}

/* --- ERROR DISCOVERY LOGIC FEEDBACK --- */
.input-group.error label {
    color: var(--error-red);
}

.input-group.error .input-box input {
    border-color: var(--error-red);
    background-color: rgba(255, 51, 51, 0.02);
}

.input-group.error .left-icon {
    color: var(--error-red);
}

.error-tooltip {
    color: var(--error-red);
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- PRIMARY SUBMIT SYSTEM ACTION --- */
.login-btn {
    width: 100%;
    height: 50px;
    background: var(--neon-green);
    color: #000000;
    border: none;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px rgba(56, 169, 255, 0.3);
}

.login-btn:hover {
    background: var(--text-main);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

/* --- ARCHITECTURE LINKING FOOTER --- */
.register-link {
    text-align: center;
    margin-top: 25px;
    font-size: 13px;
    color: var(--text-muted);
}

.register-link a {
    color: var(--neon-green);
    text-decoration: none;
    font-weight: 700;
    margin-left: 4px;
}

.register-link a:hover {
    text-decoration: underline;
}

/* --- POPUP DIALOG INTERACTION WINDOWS --- */
.popup {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(13, 15, 18, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); 
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.popup-content {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    border: 2px solid var(--border);
    animation: zoomIn 0.2s ease-out;
}

.system-alert-icon {
    font-size: 32px;
    color: var(--error-red);
    display: inline-block;
    margin-bottom: 15px;
}

#popup-message {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.5;
    font-weight: 500;
}

.popup-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.choice-btn {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.yes-btn {
    background-color: transparent;
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
}

.yes-btn:hover {
    background-color: rgba(56, 169, 255, 0.1);
    box-shadow: 0 0 15px rgba(56, 169, 255, 0.2);
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.input-group.error .input-box {
    border: 2px solid red !important;
}

.error-tooltip {
    margin-top: 5px;
    display: none;
}

/* Container for the Feedback Popup */
#emailFeedbackPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#sendResetBtn, #closeFeedbackBtn {
    margin-top: 20px;
    padding: 12px 20px;
    width: 100%;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.3s ease;
}

#sendResetBtn { background-color: var(--neon-green); color: #000; }
#closeFeedbackBtn { background-color: #333; color: #fff; }

/* ==========================================================
   SYNTAXERROR 2026 AUTH UI ENHANCEMENTS (non-destructive)
   ========================================================== */
:root{--bg-color:#080d15;--card-bg:#111b28;--border:#29374b;--text-muted:#a7b7ca;--error-red:#ff6675;--glass:rgba(15,25,40,.8)}
html{scroll-behavior:smooth}body{display:block;min-height:100dvh;background:radial-gradient(ellipse at 12% 15%,rgba(0,82,155,.24),transparent 43%),radial-gradient(ellipse at 92% 92%,rgba(56,169,255,.08),transparent 35%),#080d15;isolation:isolate;overflow-x:hidden}
body:before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(160,200,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(160,200,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 95%)}
.background-blobs{z-index:-1;pointer-events:none;overflow:hidden}.blob{opacity:.13;filter:blur(110px);animation:blobDrift 12s ease-in-out infinite alternate}.blob-2{animation-delay:-6s}
@keyframes blobDrift{to{transform:translate(70px,-40px) scale(1.13)}}
.auth-shell{min-height:100dvh;width:min(1180px,100%);margin:auto;padding:clamp(24px,4vw,60px);display:grid;grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr);gap:clamp(25px,6vw,95px);align-items:center}
.auth-showcase{padding:35px 0;position:relative}.showcase-pill{display:inline-flex;gap:10px;align-items:center;padding:9px 15px;border:1px solid rgba(56,169,255,.3);background:rgba(56,169,255,.06);border-radius:999px;color:#a4dcff;font:600 11px 'Inter',sans-serif;letter-spacing:1.7px;text-transform:uppercase}.showcase-pill i{font-size:14px}
.showcase-title{font:900 clamp(35px,4.6vw,64px)/1.1 'Orbitron',sans-serif;letter-spacing:-2px;margin:26px 0}.showcase-title span{display:block;color:var(--neon-green);text-shadow:0 0 35px rgba(56,169,255,.22)}
.showcase-desc{max-width:510px;color:#b4c4d7;font-size:15px;line-height:1.9}
.showcase-code{border:1px solid #2e425b;border-radius:18px;background:linear-gradient(155deg,rgba(23,42,59,.87),rgba(8,15,28,.8));box-shadow:0 24px 64px rgba(0,0,0,.26);padding:0;margin-top:34px;overflow:hidden;max-width:490px;transform:rotate(-1deg);transition:transform .4s ease}.showcase-code:hover{transform:rotate(0) translateY(-5px)}
.code-top{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid #29374b;color:#8a9cb1;font-size:11px;letter-spacing:1px}.code-dot{width:9px;height:9px;border-radius:50%;background:#fb6b6b}.code-dot:nth-child(2){background:#ffd65e}.code-dot:nth-child(3){background:#35b1fb}.code-filename{margin-left:auto}
.showcase-code pre{font:13px/2 'Fira Code',monospace;color:#d6e6f8;white-space:pre-wrap;padding:22px;overflow:auto}.code-keyword{color:#87baff}.code-string{color:#f9d477}.code-comment{color:#7ea591}
.showcase-footer{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;color:#93a7bc;font-size:12px}.showcase-footer i{color:var(--neon-green);margin-right:5px}
.wrapper{width:100%;max-width:470px;margin:0 auto;background:linear-gradient(150deg,rgba(22,35,51,.96),rgba(10,18,30,.96));border:1px solid rgba(136,170,205,.23);box-shadow:0 28px 90px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.045);padding:clamp(24px,3.5vw,43px);border-radius:25px;position:relative;overflow:visible;animation:authEnter .7s both}
.wrapper:before{content:'';position:absolute;inset:-1px auto auto 12%;width:76%;height:2px;background:linear-gradient(90deg,transparent,var(--neon-green),transparent);opacity:.85}
@keyframes authEnter{from{transform:translateY(22px);opacity:0}to{transform:translateY(0);opacity:1}}
.header{margin-bottom:28px}.logo-container{padding:12px;border:1px solid rgba(56,169,255,.16);border-radius:20px;background:rgba(56,169,255,.035);margin-bottom:17px}.logo-img{width:78px}.header h1{font-size:clamp(21px,2.5vw,27px);letter-spacing:1.2px}.subtitle{font-size:13px;margin-top:9px;line-height:1.6}
.input-group{margin-bottom:18px}.input-group label{color:#c4d2e3;font-size:11px;letter-spacing:1.4px}.input-box input,.input-group>input{background:rgba(3,10,21,.53);border:1px solid #324359;color:#f3f8ff;border-radius:12px;height:54px;transition:border-color .25s,box-shadow .25s,background .25s,transform .25s}.input-box input:hover,.input-group>input:hover{border-color:#5d7898}.input-box input:focus,.input-group>input:focus{border-color:var(--neon-green);box-shadow:0 0 0 4px rgba(56,169,255,.09);background:#0b1726;transform:translateY(-1px)}.input-box input::placeholder,.input-group>input::placeholder{color:#75869b}.left-icon{color:#829cb9;transition:color .2s}.input-box:focus-within .left-icon{color:var(--neon-green)}.toggle-password{border-radius:9px;transition:color .2s,background .2s}.toggle-password:hover{color:var(--neon-green);background:rgba(56,169,255,.08)}
.form-row-options{gap:12px;flex-wrap:wrap}.terms-label{color:#bbcada;line-height:1.5}.terms-label input[type=checkbox]{width:17px;height:17px}.form-row-options a{color:#92baff}.login-btn{border-radius:12px;min-height:53px;background:linear-gradient(105deg,#087de9,#36b4ff);box-shadow:0 8px 28px rgba(56,169,255,.17);font-size:13px;letter-spacing:1px;position:relative;overflow:hidden}.login-btn:hover{transform:translateY(-3px);background:linear-gradient(105deg,#299df4,#72d0ff);box-shadow:0 12px 36px rgba(56,169,255,.26)}.login-btn:active{transform:translateY(0) scale(.99)}.login-btn:focus-visible,.choice-btn:focus-visible,.toggle-password:focus-visible,a:focus-visible{outline:3px solid var(--sti-yellow);outline-offset:3px}
.register-link{border-top:1px solid rgba(141,162,185,.14);padding-top:20px;margin-top:23px}.register-link a:hover{color:#9ed9ff}.terms-group{margin-bottom:24px}
/* Preserve the reset form's original selectors, but make nested panel compact. */
#forgotPasswordSection.wrapper{max-width:none;width:100%;margin:10px 0 20px;padding:18px;border-radius:15px;background:rgba(4,13,23,.7);box-shadow:none}#forgotPasswordSection .header{margin-bottom:18px}#forgotPasswordSection h1{font-size:17px}#forgotPasswordSection .input-group>input{width:100%;padding:0 15px}#backToLogin{background:#26394d!important;color:white!important;margin-top:10px}
.popup{background:rgba(2,7,15,.81);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);padding:18px}.popup-content{background:linear-gradient(145deg,#17283b,#0e192a);border:1px solid #3c516a;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.5);padding:clamp(22px,4vw,35px);max-width:450px}.popup-content h2{font-family:'Orbitron',sans-serif;font-size:18px;line-height:1.45}.popup-actions{flex-wrap:wrap;gap:10px}.choice-btn{border-radius:11px;min-height:47px}#otpInput{padding:0 15px;letter-spacing:6px;font-size:18px}
#termsModal .popup-content{max-width:520px!important}#termsModal .popup-content h2{color:#72c9ff!important}#termsModal .popup-content>div{color:#b9c8db!important;scrollbar-color:#4b627c transparent;scrollbar-width:thin}#termsModal li{margin:7px 0}#termsModal .popup-buttons{margin-top:22px}
#popup-close{background:var(--neon-green);color:#ffffff;border:0;border-radius:10px;padding:12px 25px;margin-top:18px;cursor:pointer;font-weight:800}
.input-group.error .input-box{border:0!important}.input-group.error .input-box input{border:1px solid var(--error-red)!important}.error-tooltip{color:var(--error-red)}
.auth-return{display:inline-flex;align-items:center;gap:8px;color:#afc2d4;text-decoration:none;font-size:12px;margin-bottom:22px;transition:color .2s}.auth-return:hover{color:var(--neon-green)}
@media(max-width:900px){.auth-shell{grid-template-columns:1fr;max-width:620px;gap:20px}.auth-showcase{padding:8px 0;text-align:center}.showcase-title{font-size:clamp(28px,6vw,46px);margin:12px auto}.showcase-desc{margin:auto;font-size:13px}.showcase-code,.showcase-footer{display:none}.wrapper{max-width:480px}}
@media(max-width:540px){.auth-shell{padding:19px 15px 32px}.wrapper{padding:25px 20px;border-radius:20px}.showcase-title{font-size:30px}.showcase-pill{font-size:9px}.showcase-desc{font-size:12px}.header{margin-bottom:20px}.form-row-options{font-size:11px}.popup{padding:12px}.popup-content{padding:22px}.logo-img{width:65px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* 2026 BLUE AUTH THEME — override older green-focused rules */
:root { --sti-blue:#1688f2; --neon-green:#38a9ff; }
.blob { background:#0e68d2; }
.blob-2 { background:#29c1ff; }
body {background:radial-gradient(ellipse at 12% 15%,rgba(9,102,207,.27),transparent 43%),radial-gradient(ellipse at 92% 92%,rgba(27,155,255,.12),transparent 36%),#080e1a;}
.login-btn, #sendResetBtn, #popup-close {color:#fff!important;}
.login-btn {background:linear-gradient(105deg,#086bd2,#20a8f7);box-shadow:0 8px 28px rgba(29,136,245,.27);}
.login-btn:hover {background:linear-gradient(105deg,#168aee,#58c4ff);box-shadow:0 12px 36px rgba(29,136,245,.33);}
.yes-btn {border-color:#38a9ff;color:#73c8ff;}
.yes-btn:hover {background:rgba(56,169,255,.11);box-shadow:0 0 15px rgba(56,169,255,.2);}
.login-btn:focus-visible,.choice-btn:focus-visible,.toggle-password:focus-visible,a:focus-visible {outline-color:#65c5ff;}
.input-box input:focus,.input-group>input:focus {border-color:#38a9ff;box-shadow:0 0 0 4px rgba(56,169,255,.13);}
#closeFeedbackBtn {background:linear-gradient(105deg,#086bd2,#20a8f7)!important;color:white!important;}
#termsModal .popup-content h2 {color:#72c9ff!important;}


/* Registration confirmation popup — clean compact blue layout.
   CSS-only: does not change registration or confirmation event listeners. */
#popup {
  padding: 20px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto;
}
#popup .popup-content {
  width: min(100%, 410px) !important;
  max-width: 410px !important;
  padding: clamp(25px,5vw,36px) !important;
  border: 1px solid rgba(75,159,248,.36) !important;
  background: linear-gradient(145deg,#192b43,#101b2d) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.48), 0 0 34px rgba(16,109,222,.12) !important;
  border-radius: 22px !important;
  text-align: center;
  color: #eef6ff;
}
#popup #popup-message {
  color: #f0f6ff !important;
  font: 600 clamp(15px,3.8vw,17px)/1.65 'Inter',sans-serif !important;
  margin: 0 0 23px !important;
  overflow-wrap: anywhere;
}
/* Buttons may be inserted dynamically by register.js. */
#popup .popup-content .popup-actions,
#popup .popup-content .popup-buttons,
#popup .popup-content .button-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-top: 15px !important;
  width: 100% !important;
}
#popup .popup-content button {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 145px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 11px 17px !important;
  border-radius: 11px !important;
  font: 700 12px 'Orbitron','Inter',sans-serif !important;
  letter-spacing: .025em !important;
  white-space: normal !important;
  background: #22344b !important;
  border: 1px solid #435873 !important;
  color: #dceaff !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .18s ease,transform .18s ease !important;
}
/* First button is the Yes/Submit option in the registration confirmation. */
#popup .popup-content button:first-of-type,
#popup .popup-content .yes-btn {
  background: linear-gradient(110deg,#0875df,#24b0fa) !important;
  border-color: #36b9ff !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(8,117,223,.22) !important;
}
#popup .popup-content button:hover { transform:translateY(-1px) !important;filter:brightness(1.12); }
#popup .popup-content button:focus-visible {outline:3px solid #82d7ff !important;outline-offset:2px;}
@media(max-width:440px){
 #popup .popup-content {padding:23px 19px !important;border-radius:18px !important;}
 #popup .popup-content button { flex-basis:100% !important; }
}

/* Mobile: finger-sized tap areas for the small text links. */
.auth-return,#forgotPasswordLink{display:inline-flex;align-items:center;min-height:40px}
.auth-return{margin-bottom:12px}

/* Busy buttons and PIN resend (prevents repeated sign-in clicks from sending many emails) */
.login-btn.is-busy, .login-btn:disabled { cursor: wait; opacity: .85; transform: none !important; }
.btn-spinner { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: btn-spin .8s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 2s; } }
.otp-note { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: rgba(54, 180, 255, .12); color: #cfe6ff; font-size: 12px; }
.resend-pin-btn { width: 100%; margin-top: 10px; min-height: 42px; border-radius: 12px; border: 1px solid rgba(146, 186, 255, .4); background: transparent; color: #cfe6ff; font: 600 13px Inter, 'Segoe UI', sans-serif; cursor: pointer; }
.resend-pin-btn:hover:not(:disabled) { background: rgba(146, 186, 255, .12); }
.resend-pin-btn:disabled { opacity: .6; cursor: not-allowed; }
#forgotPasswordLink[aria-disabled="true"] { pointer-events: none; opacity: .6; }