:root{ --ctrl-radius: 4px; }
body.login-body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at top left, #1e3a8a 0, #020617 40%, #020617 100%),
      radial-gradient(rgba(148, 163, 184, 0.10) 1px, transparent 1px);
    background-size: auto, 28px 28px;
    background-position: 0 0, 0 0;

    color: #f9fafb;
    min-height: 100vh;
    display: flex;
    align-items: stretch;

    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.login-layout {
    display: flex;
    flex: 1;
    max-width: 1200px;
    margin: 32px auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.8);
    background: #0b1120;
    position: relative;
    z-index: 3;
}

.login-side {
    padding: 32px;
}

.login-side-left {
    flex: 0 0 45%;
    background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,64,175,0.9));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-side-right {
    flex: 0 0 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-logo img {
    display: block;
    width: 40px;
    height: 40px;
}

.login-brand-text {
    display: flex;
    flex-direction: column;
}

.login-app-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #e5e7eb;
}

.login-app-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #9ca3af;
}

.login-hero-text {
    margin-top: 40px;
}

.login-hero-text h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: #f9fafb;
}

.login-hero-text p {
    margin: 0;
    font-size: 13px;
    color: #cbd5f5;
    max-width: 340px;
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: #020617;
    border-radius: 16px;
    padding: 28px 24px 24px;
    box-shadow: 0 24px 40px rgba(15,23,42,0.65);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.login-card-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    color: #f9fafb;
}

.login-card-header p {
    margin: 0;
    font-size: 13px;
    color: #9ca3af;
}

.login-alert {
    margin-top: 16px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
}

.login-alert-error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.6);
    color: #fecaca;
}

.login-form {
    margin-top: 12px;
}

.login-field {
    margin-bottom: 14px;
}

.login-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #e5e7eb;
    margin-bottom: 4px;
}

.login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #020617;
    border-radius: 999px;
    border: 1px solid #334155;
    padding: 2px 10px 2px 10px;
}

.login-input-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}

.login-input-icon {
    color: #64748b;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-right: 6px;
}

.login-input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #e5e7eb;
    font-size: 13px;
    padding: 6px 4px;
}

.login-input-wrapper input::placeholder {
    color: #6b7280;
}

.login-password-toggle {
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    padding-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-password-toggle:hover {
    color: #e5e7eb;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 8px;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #e5e7eb;
}

.login-remember input[type="checkbox"] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.login-submit {
    width: 100%;
    margin-top: 4px;
    padding: 8px 0;
    font-size: 14px;
    border-radius: 999px;
}

.login-footer {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #9ca3af;
}

.login-footer a {
    color: #93c5fd;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

.login-lang-switch {
    white-space: nowrap;
}

.login-copy {
    text-align: right;
}

/* Responsiveness */
@media (max-width: 900px) {
    .login-layout {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .login-side-left {
        display: none;
    }

    .login-side-right {
        flex: 1;
        padding: 24px 16px;
    }

    .login-card {
        max-width: 420px;
        margin: 0 auto;
    }
}

/* Force dark inputs on login page */
body.login-body input[type="text"],
body.login-body input[type="password"],
body.login-body input[type="email"],
body.login-body input[type="search"],
body.login-body .login-input-wrapper input {
    background-color: #020617 !important;
    color: #e5e7eb !important;
    border: none;
    outline: none;
}

/* Keep it dark on focus */
body.login-body .login-input-wrapper input:focus {
    background-color: #020617 !important;
    color: #e5e7eb !important;
}

/* Fix Chrome autofill (yellow/white background) */
body.login-body .login-input-wrapper input:-webkit-autofill,
body.login-body .login-input-wrapper input:-webkit-autofill:hover,
body.login-body .login-input-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e5e7eb !important;
    -webkit-box-shadow: 0 0 0 1000px #020617 inset !important;
    transition: background-color 9999s ease-out 0s;
}

/* =========================
   Animated Background (Aurora)
   ========================= */

body.login-body::before,
body.login-body::after{
    content: "";
    position: fixed;
    inset: -35%;
    pointer-events: none;
    z-index: 0;
    transform: translate3d(0,0,0);
}

/* Soft moving “blobs” */
body.login-body::before{
    background:
      radial-gradient(circle at 20% 25%, rgba(59, 130, 246, .42), transparent 58%),
      radial-gradient(circle at 82% 30%, rgba(99, 102, 241, .34), transparent 62%),
      radial-gradient(circle at 65% 86%, rgba(16, 185, 129, .18), transparent 58%),
      radial-gradient(circle at 28% 84%, rgba(236, 72, 153, .16), transparent 60%);
    filter: blur(42px) saturate(120%);
    opacity: .90;
    animation: login-bg-float 18s ease-in-out infinite alternate;
}

/* Subtle overlay shimmer */
body.login-body::after{
    inset: -25%;
    background:
      conic-gradient(
        from 180deg at 50% 50%,
        rgba(255,255,255,.06),
        transparent 20%,
        rgba(255,255,255,.04) 35%,
        transparent 55%,
        rgba(255,255,255,.05) 75%,
        transparent 100%
      );
    mix-blend-mode: overlay;
    opacity: .40;
    filter: blur(18px);
    animation: login-bg-rotate 28s linear infinite;
}

@keyframes login-bg-float{
    0%   { transform: translate(-3%, -2%) scale(1); }
    50%  { transform: translate(3%, 2%) scale(1.04); }
    100% { transform: translate(6%, 4%) scale(1.02); }
}

@keyframes login-bg-rotate{
    0%   { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1.02); }
}

/* Respect accessibility */
@media (prefers-reduced-motion: reduce){
    body.login-body::before,
    body.login-body::after{
        animation: none !important;
    }
}

/* =========================
   Cursor-follow Lines / Grid
   ========================= */

:root{
  --mx: 50vw;
  --my: 35vh;
  --dx: 0px;
  --dy: 0px;

  /* knobs: κάνε τις γραμμές πιο/λιγότερο έντονες */
  --grid-gap: 52px;
  --grid-line: rgba(148, 163, 184, 0.16);
  --grid-line-soft: rgba(148, 163, 184, 0.07);
  --spot-size: 320px;
}

.login-bg-lines{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* ανάμεσα στο aurora (συνήθως z=0/1) και στο login-layout (z=3) */
  transform: translate3d(0,0,0);
}

/* Stronger grid μόνο κοντά στον κέρσορα (spotlight) */
.login-bg-lines::before{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    repeating-linear-gradient(0deg,
      var(--grid-line) 0 1px,
      transparent 1px var(--grid-gap)
    ),
    repeating-linear-gradient(90deg,
      var(--grid-line) 0 1px,
      transparent 1px var(--grid-gap)
    );
  opacity: 0.95;
  mix-blend-mode: overlay;

  /* parallax */
  transform: translate3d(var(--dx), var(--dy), 0) scale(1.02);

  /* spotlight around cursor */
  -webkit-mask-image: radial-gradient(circle var(--spot-size) at var(--mx) var(--my),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 40%,
    rgba(0,0,0,0) 72%
  );
  mask-image: radial-gradient(circle var(--spot-size) at var(--mx) var(--my),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 40%,
    rgba(0,0,0,0) 72%
  );

  animation: grid-drift 26s linear infinite;
}

/* Soft grid σε όλη την οθόνη + “beam” γύρω από τον κέρσορα */
.login-bg-lines::after{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    /* overall soft grid */
    repeating-linear-gradient(0deg,
      var(--grid-line-soft) 0 1px,
      transparent 1px calc(var(--grid-gap) + 18px)
    ),
    repeating-linear-gradient(90deg,
      var(--grid-line-soft) 0 1px,
      transparent 1px calc(var(--grid-gap) + 18px)
    ),
    /* subtle glow around cursor */
    radial-gradient(circle 420px at var(--mx) var(--my),
      rgba(56, 189, 248, 0.18),
      transparent 60%
    ),
    /* rotating conic shimmer */
    conic-gradient(from 180deg at var(--mx) var(--my),
      rgba(255,255,255,0.10),
      transparent 18%,
      rgba(255,255,255,0.06) 34%,
      transparent 55%,
      rgba(255,255,255,0.08) 78%,
      transparent 100%
    );

  opacity: 0.55;
  mix-blend-mode: overlay;
  filter: blur(0px);
  transform: translate3d(calc(var(--dx) * -0.7), calc(var(--dy) * -0.7), 0) scale(1.01);

  animation: shimmer-rotate 34s linear infinite;
}

@keyframes grid-drift{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 240px 180px, 180px 240px; }
}

@keyframes shimmer-rotate{
  0%   { transform: translate3d(calc(var(--dx) * -0.7), calc(var(--dy) * -0.7), 0) scale(1.01) rotate(0deg); }
  100% { transform: translate3d(calc(var(--dx) * -0.7), calc(var(--dy) * -0.7), 0) scale(1.01) rotate(360deg); }
}

/* Respect accessibility */
@media (prefers-reduced-motion: reduce){
  .login-bg-lines::before,
  .login-bg-lines::after{
    animation: none !important;
  }
}

/* ==========================================
   PREMIUM BACKGROUND PACK (Aurora + Grid + Spotlight)
   ========================================== */

:root{
  --mx: 50vw;
  --my: 35vh;
  --dx: 0px;
  --dy: 0px;

  /* Ρυθμιστικά εμφάνισης */
  --grid-gap: 54px;                  /* μικρότερο = πιο πυκνό */
  --grid-strong: rgba(148,163,184,.22); /* πιο μεγάλο alpha = πιο έντονες γραμμές */
  --grid-soft: rgba(148,163,184,.10);
  --spot-size: 360px;                /* μέγεθος spotlight γύρω από cursor */
  --glow: rgba(56,189,248,.22);
}

body.login-body{
  /* κράτα τα δικά σου fonts/layout, εδώ κάνουμε μόνο bg/layers */
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Βάση: premium dark gradient + πολύ διακριτικό dot texture */
  background:
    radial-gradient(circle at 12% 12%, rgba(59,130,246,.24), transparent 45%),
    radial-gradient(circle at 80% 18%, rgba(99,102,241,.18), transparent 52%),
    radial-gradient(circle at 55% 90%, rgba(16,185,129,.10), transparent 55%),
    radial-gradient(1200px 900px at 30% 20%, rgba(2,6,23,0.10), rgba(2,6,23,0.92)),
    radial-gradient(rgba(148,163,184,0.12) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 28px 28px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* Το login πάνω απ’ όλα */
.login-layout{
  position: relative;
  z-index: 5;
}

/* Background stage */
.login-bg{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translate3d(0,0,0);
}

/* Layer 1: Aurora blobs (κίνηση αργή, “pro”) */
.login-bg::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 18% 30%, rgba(59,130,246,.44), transparent 58%),
    radial-gradient(circle at 78% 24%, rgba(99,102,241,.34), transparent 60%),
    radial-gradient(circle at 70% 84%, rgba(16,185,129,.20), transparent 60%),
    radial-gradient(circle at 30% 86%, rgba(236,72,153,.14), transparent 62%);
  filter: blur(52px) saturate(120%);
  opacity: .85;
  animation: aurora-float 16s ease-in-out infinite alternate;
  transform: translate3d(var(--dx), var(--dy), 0) scale(1.02);
}

/* Layer 2: Grid + diagonal strokes με spotlight γύρω από cursor */
.login-bg::after{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    /* vertical grid */
    repeating-linear-gradient(90deg,
      var(--grid-strong) 0 1px,
      transparent 1px var(--grid-gap)
    ),
    /* horizontal grid */
    repeating-linear-gradient(0deg,
      var(--grid-strong) 0 1px,
      transparent 1px var(--grid-gap)
    ),
    /* diagonal soft strokes */
    repeating-linear-gradient(135deg,
      rgba(148,163,184,.08) 0 1px,
      transparent 1px 18px
    ),
    /* glow around cursor */
    radial-gradient(circle 520px at var(--mx) var(--my),
      var(--glow),
      transparent 60%
    );

  opacity: .85;
  mix-blend-mode: overlay;
  transform: translate3d(calc(var(--dx) * -0.9), calc(var(--dy) * -0.9), 0) scale(1.01);

  /* Spotlight mask: έντονο μόνο κοντά στον κέρσορα */
  -webkit-mask-image: radial-gradient(circle var(--spot-size) at var(--mx) var(--my),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 42%,
    rgba(0,0,0,0) 76%
  );
  mask-image: radial-gradient(circle var(--spot-size) at var(--mx) var(--my),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 42%,
    rgba(0,0,0,0) 76%
  );

  animation: grid-drift 22s linear infinite;
  filter: drop-shadow(0 0 14px rgba(56,189,248,.06));
}

/* Extra: soft overall grid παντού (πολύ διακριτικό) */
body.login-body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      var(--grid-soft) 0 1px,
      transparent 1px calc(var(--grid-gap) + 22px)
    ),
    repeating-linear-gradient(0deg,
      var(--grid-soft) 0 1px,
      transparent 1px calc(var(--grid-gap) + 22px)
    );
  opacity: .35;
  mix-blend-mode: overlay;
}

/* Animations */
@keyframes aurora-float{
  0%   { transform: translate3d(calc(var(--dx) * 0.8), calc(var(--dy) * 0.8), 0) scale(1.02); }
  50%  { transform: translate3d(calc(var(--dx) * 1.1), calc(var(--dy) * 1.1), 0) scale(1.06); }
  100% { transform: translate3d(calc(var(--dx) * 1.3), calc(var(--dy) * 1.3), 0) scale(1.03); }
}

@keyframes grid-drift{
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 260px 0, 0 220px, 220px 220px, 0 0; }
}

/* Respect accessibility */
@media (prefers-reduced-motion: reduce){
  .login-bg::before,
  .login-bg::after{
    animation: none !important;
  }
}