/* === Theme tokens (kept) === */
:root {
  --bg:#00141f; --text:#04FFFB; --white:#fff;
  --muted:rgba(255,255,255,.72);
  --card:rgba(255,255,255,.06); --card-2:rgba(255,255,255,.02);
  --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.18);
  --shadow:rgba(0,0,0,.45); --shadow-2:rgba(0,0,0,.55);
  --focus:rgba(4,255,251,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.theme{
  background:var(--bg); color:var(--text);
  font-family:"Open Sans", Arial, sans-serif, ui-sans-serif, system-ui;
  line-height:1.5; min-height:100vh;
}

/* === Layout helpers used in index.html === */
.center{
  max-width:1200px; margin-inline:auto;
  padding:clamp(16px,4vw,48px);
  display:grid; place-items:center; min-height:100vh;
}

/* === Login hero background FX === */
/* --- Full-page watermark logo (behind all content) --- */
.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;                       /* fill the hero */
  background-image: url("/New color-05.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;         /* fills the screen; may crop edges */
  opacity: 0.08;                  /* watermark strength: 0.04–0.15 recommended */
  pointer-events: none;           /* clicks pass through */
  z-index: 0;                     /* stays behind your FX and card */
}
.login-hero{ position:relative; min-height:100vh; overflow:hidden; isolation:isolate; background:#00141f !important; }
.login-hero__blobs{ position:absolute; inset:-20vmax; pointer-events:none; z-index:0; filter:blur(40px); }
.login-hero__blob{ position:absolute; width:40vmax; height:40vmax; opacity:.35; border-radius:50%;
  background:conic-gradient(from 180deg at 50% 50%, #04FFFB33, #a0e8ff33, #04FFFB33);
  animation:blobMove 18s ease-in-out infinite alternate;
}
.login-hero__blob--1{ top:5%; left:0%; animation-delay:0s; }
.login-hero__blob--2{ top:40%; right:-10%; animation-delay:-4s; }
.login-hero__blob--3{ bottom:-5%; left:30%; animation-delay:-8s; }

.login-hero__grid{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.18;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(1200px 600px at 50% 40%, #000 40%, transparent 80%);
}
.login-hero__sparkles{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(2px 2px at 20% 20%, rgba(255,255,255,.35) 60%, transparent 61%),
    radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,.25) 60%, transparent 61%),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,.30) 60%, transparent 61%);
  animation:rise 22s linear infinite;
}

@keyframes blobMove{
  0%{transform:translate3d(-5%,-5%,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(5%,2%,0) scale(1.08) rotate(30deg)}
  100%{transform:translate3d(-3%,4%,0) scale(1.02) rotate(60deg)}
}
@keyframes rise{ from{transform:translateY(20px)} to{transform:translateY(-40px)} }

/* === Card === */
.card{
  position:relative; z-index:2; width:100%; max-width:28rem; border-radius:20px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); box-shadow:0 30px 80px var(--shadow);
  backdrop-filter:blur(10px);
  transform-style:preserve-3d; transition:transform 200ms ease, box-shadow .2s, border-color .2s;
}
.card:hover{ box-shadow:0 40px 100px var(--shadow-2); border-color:var(--border-strong); }
.card__header{ padding:28px 28px 8px; }
.card__header h1{ margin:0 0 6px; font-weight:700; }
.muted{ color:var(--muted); margin:0; }

/* 3D tilt */
.login-card.tilt{ transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }

/* Form */
.form{ padding:20px 28px 28px; display:grid; gap:16px; }
.field{ display:grid; gap:8px; }
.field>span{ font-size:.9rem; color:var(--muted); }
.field>input{
  appearance:none; width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--white);
  outline:none; transition:box-shadow .2s, border-color .2s, transform .06s;
}
.field>input:focus{
  box-shadow:0 0 0 3px var(--focus), 0 10px 30px rgba(4,217,255,.10);
  border-color:var(--text); transform:translateY(-1px);
}
.actions{ display:flex; gap:12px; align-items:center; justify-content:space-between; }
.actions__left{ display:flex; gap:12px; }

/* Buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 16px; border-radius:12px; border:1px solid var(--border);
  color:var(--white); background:rgba(255,255,255,.04); cursor:pointer; user-select:none;
  transition:transform .06s, box-shadow .2s, border-color .2s, background .2s;
}
.btn:active{ transform:translateY(0) }
.btn-primary{
  background:linear-gradient(180deg, rgba(4,217,255,.25), rgba(4,217,255,.08));
  border-color:rgba(4,217,255,.45);
}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  padding:12px 16px; border-radius:12px; background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.2); color:#fff; opacity:0; pointer-events:none;
  transition:transform .25s ease, opacity .25s ease; z-index:9999;
}
.toast--show{ opacity:1; transform:translateX(-50%) translateY(0) }
.toast--error{ background:rgba(120,20,20,.80) }

/* Dialog (reset password) */
dialog.dialog{ border:0; border-radius:16px; padding:0; background:transparent; }
.dialog::backdrop{ background:rgba(0,0,30,.6) }
.dialog__card{
  margin:0; border-radius:16px; border:1px solid var(--border);
  background:linear-gradient(180deg, var(--card), var(--card-2));
  padding:22px; min-width:min(90vw, 420px); color:var(--white);
}

/* Password eye toggle */
.field.field--has-toggle{ position:relative; }
.field.field--has-toggle>input.has-toggle{ padding-right:44px; }
.eye-toggle{
  position:absolute; right:12px; transform:translateY(-50%); width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent;
  cursor:pointer; opacity:.85; z-index:1;
}
.eye-toggle:hover, .eye-toggle:focus-visible{ opacity:1 }
.eye-toggle svg{ width:20px; height:20px }

/* Title gradient */
.login-title{
  background:linear-gradient(45deg, #CDE0F7, var(--text));
  -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.5px;
}

/* Shake on error */
.shake{ animation:shakeX 450ms cubic-bezier(.36,.07,.19,.97) both }
@keyframes shakeX{
  10%,90%{ transform:translateX(-1px) }
  20%,80%{ transform:translateX(2px) }
  30%,50%,70%{ transform:translateX(-4px) }
  40%,60%{ transform:translateX(4px) }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .login-hero__blobs, .login-hero__sparkles, .login-card.tilt { animation:none !important; transform:none !important; }
}