/* BETTAHUB AUTH - JEWEL AQUARIUM (matches homepage) */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --ink:#06222b; --deep:#0a3340; --paper:#f5fbfa;
  --blue:#38bdf8; --accent:#0284c7; --gold:#fbbf24;
  --primary:#0f766e; --primary-dark:#115e59; --primary-light:#e8f4f2;
  --dark:#06222b; --gray:#64748b; --light-gray:#d5e5e3; --background:#f5fbfa; --white:#fff;
  --display:"Bricolage Grotesque","Inter",Arial,sans-serif;
}

body{font-family:"Inter",Arial,sans-serif;background:var(--paper);color:var(--ink)}
a{text-decoration:none;color:inherit}
button,input{font-family:inherit}

.auth-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}

/* ---------- LEFT: aquarium panel ---------- */
.auth-visual{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 70% 55%,rgba(56,189,248,.28),transparent 42%),
             radial-gradient(circle at 10% 100%,rgba(2,132,199,.18),transparent 40%),
             linear-gradient(160deg,var(--deep),var(--ink))}
/* light rays */
.auth-visual::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(100deg,transparent 0 90px,rgba(255,255,255,.025) 90px 140px);
  animation:rays 14s ease-in-out infinite alternate}
@keyframes rays{to{transform:translateX(60px)}}
/* sparkles */
.auth-visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%,#fff 0 2px,transparent 3.5px),
    radial-gradient(circle at 86% 12%,rgba(190,245,255,.95) 0 3px,transparent 5px),
    radial-gradient(circle at 92% 60%,#fff 0 2px,transparent 3.5px),
    radial-gradient(circle at 6% 70%,rgba(255,214,120,.95) 0 2.5px,transparent 4.5px),
    radial-gradient(circle at 70% 90%,#fff 0 1.5px,transparent 3px),
    radial-gradient(circle at 40% 8%,rgba(190,245,255,.85) 0 1.5px,transparent 3px);
  animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}

.visual-content{width:82%;max-width:580px;min-height:100vh;margin:auto;display:flex;flex-direction:column;
  justify-content:center;position:relative;z-index:2;padding:30px 0}

.auth-logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-size:22px;font-weight:800;
  margin-bottom:46px;width:fit-content}
.logo-icon{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:22px}

.visual-label{display:inline-block;padding:7px 12px;border-radius:50px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);font-size:11px;font-weight:800;letter-spacing:.08em;margin-bottom:18px}
.visual-message h1{font-family:var(--display);font-size:clamp(42px,4.6vw,66px);font-weight:800;line-height:.98;
  letter-spacing:-.045em;max-width:540px}
.visual-message h1 span{color:var(--blue)}
.visual-message p{margin-top:18px;max-width:470px;color:#b6d3da;line-height:1.7;font-size:15px}

/* glowing betta with rings (the emoji inside is hidden) */
.visual-fish{position:relative;width:min(320px,100%);height:300px;margin:26px auto 0;font-size:0;transform:none;
  filter:none}
.visual-fish::before{content:"";position:absolute;left:50%;top:50%;width:280px;height:280px;
  transform:translate(-50%,-50%) rotate(-28deg);border-radius:50%;
  border:1.5px solid rgba(160,235,255,.12);border-top-color:rgba(200,248,255,.75);border-right-color:rgba(160,235,255,.35);
  box-shadow:0 0 0 34px rgba(255,255,255,.02),0 0 0 35px rgba(160,235,255,.12),
             0 0 60px rgba(56,189,248,.28),inset 0 0 60px rgba(56,189,248,.18)}
.visual-fish::after{content:"";position:absolute;inset:0;
  background:url("../../assets/hero-betta.png") center / 96% no-repeat;
  filter:drop-shadow(0 0 14px rgba(170,240,255,.65)) drop-shadow(0 0 40px rgba(56,189,248,.4));
  animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.visual-bottom{display:flex;flex-wrap:wrap;gap:10px;color:#9fc3cb;font-size:12px;font-weight:600;margin-top:22px}

/* ---------- RIGHT: form ---------- */
.auth-form-section{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper);padding:40px}
.auth-card{width:100%;max-width:450px}

.mobile-logo{display:none;align-items:center;gap:10px;font-family:var(--display);font-size:21px;font-weight:800;
  margin-bottom:40px;color:var(--ink)}
.mobile-logo .logo-icon{background:var(--ink)}

.form-label{display:inline-block;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.08em;margin-bottom:12px}
.form-header h2{font-family:var(--display);font-size:42px;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.form-header p{margin-top:10px;color:var(--gray);font-size:14px}

.auth-form{margin-top:30px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.label-row{display:flex;align-items:center;justify-content:space-between}
.label-row a{color:var(--accent);font-size:12px;font-weight:700}
.label-row a:hover{text-decoration:underline}

.form-group input{width:100%;height:52px;border:1.5px solid var(--light-gray);border-radius:13px;padding:0 16px;
  outline:none;font-size:14px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.form-group input::placeholder{color:#94a3b8}
.form-group input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(56,189,248,.18)}

/* ---------- Password show/hide (SVG eye icon) ---------- */
.password-input{position:relative}
.password-input input{padding-right:50px}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;
  color:var(--gray);cursor:pointer;transition:color .2s,background .2s}
.password-toggle:hover{color:var(--ink);background:var(--primary-light)}
.password-toggle svg{display:block;pointer-events:none}

.remember-row{margin-top:-4px;margin-bottom:22px}
.checkbox-label{display:flex !important;align-items:center;gap:8px;font-size:12px !important;font-weight:500 !important;
  color:var(--gray);cursor:pointer}
.checkbox-label input{width:16px !important;height:16px !important;accent-color:var(--accent)}

.login-submit{width:100%;height:54px;border:0;border-radius:14px;background:var(--accent);color:#fff;font-weight:800;
  font-size:14px;cursor:pointer;box-shadow:0 12px 30px rgba(2,132,199,.35);transition:background .2s,transform .2s}
.login-submit:hover{background:#0369a1;transform:translateY(-2px)}

.divider{display:flex;align-items:center;gap:15px;margin:26px 0;color:#94a3b8;font-size:10px;font-weight:700}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--light-gray)}

.register-section{text-align:center}
.register-section p{color:var(--gray);font-size:13px;margin-bottom:12px}
.register-button{display:flex;align-items:center;justify-content:center;width:100%;height:50px;
  border:1.5px solid var(--ink);border-radius:13px;color:var(--ink);font-size:13px;font-weight:800;transition:.2s}
.register-button:hover{background:var(--ink);color:#fff}

.back-home{display:block;text-align:center;margin-top:24px;color:var(--gray);font-size:12px;font-weight:600}
.back-home:hover{color:var(--accent)}

a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- Register: terms popup (beats the inline styles) ---------- */
body .terms-link,body .terms-modal .terms-content a{color:var(--accent)}
body .terms-modal-card{border-radius:24px}
body .terms-modal-brand{color:var(--ink);font-family:var(--display)}
body .terms-page-label{color:var(--accent)}
body .terms-modal-body h1{font-family:var(--display);color:var(--ink);letter-spacing:-.03em}
body .terms-updated{background:var(--primary-light);color:var(--primary-dark)}
body .terms-btn-primary{background:var(--accent);border-color:var(--accent);box-shadow:0 8px 20px rgba(2,132,199,.3)}
body .terms-btn-primary:hover{background:#0369a1}
body .terms-btn-outline{border-color:var(--ink);color:var(--ink)}
body .terms-btn-outline:hover{background:var(--primary-light)}

/* ---------- terms.html (add class="terms-theme" to its <body>) ---------- */
body.terms-theme{background:var(--paper);font-family:"Inter",Arial,sans-serif}
.terms-theme .terms-header{background:rgba(6,34,43,.96);border-bottom:1px solid rgba(255,255,255,.12)}
.terms-theme .logo{color:#fff;font-family:var(--display)}
.terms-theme .back-button{color:#c3dce2}
.terms-theme .back-button:hover{color:#fff;text-decoration:none}
.terms-theme .terms-card{border:0;border-radius:24px;box-shadow:0 20px 50px rgba(6,34,43,.1)}
.terms-theme .page-label{color:var(--accent)}
.terms-theme h1{font-family:var(--display);font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.terms-theme .updated{background:var(--primary-light);color:var(--primary-dark)}
.terms-theme .terms-content a{color:var(--accent)}
.terms-theme .terms-footer{background:var(--ink);color:#9fc3cb;margin-top:60px}

/* ---------- Responsive ---------- */
@media(max-width:850px){
  .auth-page{grid-template-columns:1fr}
  .auth-visual{display:none}
  .mobile-logo{display:flex}
  .auth-form-section{padding:30px}
}
@media(max-width:480px){
  .auth-form-section{padding:25px 20px}
  .form-header h2{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Hide the browser's built-in show-password eye (Edge) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* Inline field error messages */
.field-error {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #dc2626;
}

.input-error {
    border-color: #dc2626 !important;
}

.input-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* If the border is on the password box wrapper instead of the input */
.password-input:has(.input-error) {
    border-color: #dc2626;
}
body .login-popup-icon { background: #eff6ff; color: #0369a1; }
body .login-popup button { background: #0369a1; }
body .login-popup button:hover { background: #0369a1; }