/* ═══════════════════════════════════════════════════════
   XL Guard — Excel-Niche Animated WordPress Login
   Professional spreadsheet aesthetic with animated border
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --xl-green-deep:   #071810;
  --xl-green-dark:   #0a2014;
  --xl-green-mid:    #1a6b3c;
  --xl-green-bright: #21a366;
  --xl-green-neon:   #2dce7a;
  --xl-accent2:      #00e5a0;

  --card-bg:  rgba(6, 20, 12, 0.95);
  --border-c: rgba(33,163,102,0.28);
  --text-pri: #c8e6d0;
  --text-dim: rgba(160, 210, 175, 0.52);

  --glow-sm: 0 0 14px rgba(33,163,102,0.5);
  --glow-lg: 0 0 50px rgba(33,163,102,0.2);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html, body.login {
  min-height: 100vh;
  background: var(--xl-green-deep) !important;
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
}

/* ── Fine scanline texture ── */
body.login::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.045) 3px, rgba(0,0,0,0.045) 4px
  );
  pointer-events: none; z-index: 1;
}

/* ── Spreadsheet grid ── */
#xl-grid {
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(33,163,102,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,163,102,0.055) 1px, transparent 1px);
  background-size: 52px 28px;
  pointer-events: none;
}

/* ── Top row header bar ── */
#xl-header-row {
  position: fixed; top: 0; left: 0; right: 0;
  height: 24px;
  background: rgba(10,32,20,0.9);
  border-bottom: 1px solid rgba(33,163,102,0.18);
  z-index: 5; pointer-events: none;
  display: flex; align-items: center;
  backdrop-filter: blur(8px);
}
#xl-col-labels {
  display: flex;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: rgba(45,206,122,0.4);
  letter-spacing: 0.06em; padding-left: 42px;
}
#xl-col-labels span {
  width: 52px; text-align: center;
  border-right: 1px solid rgba(33,163,102,0.1);
  line-height: 24px;
}

/* ── Formula bar ── */
#xl-formula-bar {
  position: fixed; top: 24px; left: 0; right: 0;
  height: 30px;
  background: rgba(6,18,10,0.92);
  border-bottom: 1px solid rgba(33,163,102,0.15);
  z-index: 5; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  backdrop-filter: blur(12px);
}
#xl-cell-ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--xl-green-bright);
  background: rgba(33,163,102,0.1);
  border: 1px solid rgba(33,163,102,0.22);
  border-radius: 3px; padding: 2px 8px;
  min-width: 50px; text-align: center;
}
#xl-fx-icon {
  font-family: 'JetBrains Mono', monospace;
  font-style: italic; font-size: 11px;
  color: rgba(33,163,102,0.5);
  border-right: 1px solid rgba(33,163,102,0.18);
  padding-right: 8px; margin-right: 2px;
}
#xl-formula-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: rgba(200,230,210,0.6);
  white-space: nowrap; overflow: hidden;
}
#xl-formula-text .fn  { color: #64b5f6; }
#xl-formula-text .str { color: #a5d6a7; }
#xl-formula-text .num { color: #ffcc80; }
.xl-blink-cursor {
  display: inline-block; width: 6px; height: 11px;
  background: var(--xl-green-bright); vertical-align: middle;
  animation: blinkCursor 0.9s steps(1) infinite; margin-left: 1px;
}
@keyframes blinkCursor { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Ambient orbs ── */
#xl-orb1, #xl-orb2, #xl-orb3 {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0; filter: blur(90px);
}
#xl-orb1 {
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(33,163,102,0.13) 0%, transparent 70%);
  top: -200px; right: -160px;
  animation: orbDrift 15s ease-in-out infinite;
}
#xl-orb2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(0,210,130,0.08) 0%, transparent 70%);
  bottom: -120px; left: -100px;
  animation: orbDrift 11s ease-in-out infinite reverse;
  animation-delay: -6s;
}
#xl-orb3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(45,206,122,0.1) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: orbPulse 7s ease-in-out infinite;
}
@keyframes orbDrift { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-45px) scale(1.07)} }
@keyframes orbPulse { 0%,100%{opacity:0.5;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.18)} }

/* ── Canvas ── */
#xl-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ════════════════════════════════════
   LOGIN LAYOUT
════════════════════════════════════ */
#login {
  position: relative; z-index: 10;
  width: 100% !important; max-width: 440px !important;
  margin: 0 auto !important; padding: 58px 0 30px !important;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; justify-content: center; gap: 0;
}

/* ── Logo ── */
h1 { text-align: center; margin-bottom: 0 !important; }
h1 a {
  background: none !important;
  width: auto !important; height: auto !important;
  text-indent: 0 !important; display: block;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.05rem !important; font-weight: 700 !important;
  color: var(--xl-green-neon) !important;
  letter-spacing: 0.14em;
  text-shadow: var(--glow-sm);
  line-height: 1.4;
}

/* ── Robot ── */
#xl-robot-wrap {
  width: 110px; height: 128px;
  margin: 14px auto 6px; display: block;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(33,163,102,0.5));
  transition: filter 0.3s;
}
#xl-robot-wrap:hover { filter: drop-shadow(0 0 22px rgba(45,206,122,0.85)); }

@keyframes xlBounce { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-7px)} 65%{transform:translateY(-4px)} }
#xl-robot-wrap { animation: xlBounce 3.4s ease-in-out infinite; }

@keyframes xlBlink { 0%,86%,100%{transform:scaleY(1)} 90%{transform:scaleY(0.06)} }
#xl-eyes { animation: xlBlink 4s ease-in-out infinite; transform-origin: center; }

@keyframes xlTyping { 0%,100%{transform:rotate(-3deg) translateY(-5px)} 25%{transform:rotate(3deg) translateY(-7px)} 50%{transform:rotate(-2deg) translateY(-4px)} 75%{transform:rotate(2deg) translateY(-6px)} }
#xl-robot-wrap.typing { animation: xlTyping 0.5s ease-in-out infinite; }

@keyframes xlPeek { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
#xl-robot-wrap.peeking #xl-eyes { animation: xlPeek 1.4s ease-in-out infinite; }

/* ── Tagline ── */
#xl-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
  text-align: center; margin: 0 0 7px;
}

/* ── Speech bubble ── */
#xl-bubble {
  background: rgba(6,22,12,0.85);
  border: 1px solid rgba(33,163,102,0.28);
  border-radius: 10px 10px 10px 3px;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; color: var(--xl-green-neon);
  letter-spacing: 0.03em;
  max-width: 310px; margin: 0 auto 12px;
  text-align: center; min-height: 34px;
  display: flex; align-items: center; justify-content: center;
  position: relative; backdrop-filter: blur(12px);
}
#xl-bubble::after {
  content: '';
  position: absolute; bottom: -8px; left: 18px;
  border: 8px solid transparent;
  border-top-color: rgba(33,163,102,0.28);
  border-bottom: none;
}
.xl-cursor::after {
  content: '█';
  font-size: 0.55rem;
  animation: blinkCursor 0.7s steps(1) infinite;
  margin-left: 2px; color: var(--xl-green-bright);
}

/* ════════════════════════════════════
   ANIMATED GRADIENT BORDER WRAPPER
════════════════════════════════════ */
.xl-form-wrapper {
  position: relative;
  width: 100%; border-radius: 17px;
  padding: 2px; /* border thickness */
  background: conic-gradient(
    from var(--angle),
    #21a366 0deg,
    #2dce7a 60deg,
    #6effc4 120deg,
    #00e5a0 180deg,
    #1a8a52 240deg,
    #38d98a 300deg,
    #21a366 360deg
  );
  animation: rotateBorder 3.5s linear infinite;
}
@keyframes rotateBorder { to { --angle: 360deg; } }

/* Glow halo behind border */
.xl-form-wrapper::before {
  content: '';
  position: absolute; inset: -2px; border-radius: 19px;
  background: conic-gradient(
    from var(--angle),
    #21a366, #2dce7a, #6effc4, #00e5a0, #1a8a52, #38d98a, #21a366
  );
  filter: blur(14px);
  opacity: 0.4; z-index: -1;
  animation: rotateBorder 3.5s linear infinite, haloBreath 3s ease-in-out infinite;
}
@keyframes haloBreath { 0%,100%{opacity:0.28} 50%{opacity:0.55} }

/* Fallback for browsers without @property support */
@supports not (background: conic-gradient(from 1deg, red, blue)) {
  .xl-form-wrapper {
    background: linear-gradient(135deg, #21a366, #6effc4, #21a366);
  }
}

/* ── Form itself ── */
#loginform, #lostpasswordform {
  background: var(--card-bg) !important;
  border: none !important;
  border-radius: 15px !important;
  box-shadow: none !important;
  padding: 26px 24px !important;
  width: 100% !important;
  backdrop-filter: blur(24px);
  animation: formSlideUp 0.65s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: 0.3s; opacity: 0;
}
@keyframes formSlideUp {
  from { opacity:0; transform:translateY(26px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Inside form decorative header */
.xl-form-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(33,163,102,0.14);
}
.xl-form-header-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.xl-form-header-dot:nth-child(1) { background: #e05a6a; }
.xl-form-header-dot:nth-child(2) { background: #f0c060; }
.xl-form-header-dot:nth-child(3) { background: var(--xl-green-bright); }
.xl-form-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.12em;
  color: rgba(33,163,102,0.4); margin-left: 4px;
}

/* ── Labels ── */
.login label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.61rem !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(45,206,122,0.6) !important;
  margin-bottom: 6px !important; display: block;
}

/* ── Inputs ── */
.login input[type=text],
.login input[type=password],
.login input[type=email] {
  background: rgba(0,10,5,0.88) !important;
  border: 1px solid rgba(33,163,102,0.2) !important;
  border-radius: 6px !important;
  color: #cce6d4 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.88rem !important; letter-spacing: 0.04em;
  padding: 11px 14px !important; width: 100% !important;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s !important;
  outline: none !important;
}
.login input[type=text]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus {
  border-color: var(--xl-green-bright) !important;
  box-shadow: 0 0 0 3px rgba(33,163,102,0.12), 0 0 18px rgba(33,163,102,0.1) !important;
  background: rgba(0,15,8,0.96) !important;
}

/* ── Checkbox ── */
.login .forgetmenot label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.78rem !important; letter-spacing: 0.04em !important;
  color: var(--text-dim) !important; text-transform: none !important;
}
.login input[type=checkbox] { accent-color: var(--xl-green-bright); }

/* ── Submit button ── */
.login input[type=submit],
.login .button-primary {
  background: linear-gradient(135deg, #1a7a48, #21a366, #2dce7a) !important;
  border: none !important; border-radius: 7px !important;
  color: #031208 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important; font-weight: 700 !important;
  letter-spacing: 0.2em !important; text-transform: uppercase !important;
  padding: 13px 20px !important; width: 100% !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.3s !important;
  box-shadow: 0 4px 20px rgba(33,163,102,0.42) !important;
  position: relative; overflow: hidden;
}
.login input[type=submit]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(33,163,102,0.62) !important;
  opacity: 1 !important;
}
.login input[type=submit]:active { transform: translateY(0) !important; }
.login input[type=submit]::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
  animation: btnShimmer 2.8s ease-in-out infinite;
}
@keyframes btnShimmer { 0%{left:-100%} 50%,100%{left:160%} }

/* ── Links ── */
.login #nav a, .login #backtoblog a {
  color: rgba(33,163,102,0.5) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important; letter-spacing: 0.05em !important;
  text-decoration: none !important; transition: color 0.2s !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
  color: var(--xl-green-neon) !important;
  text-shadow: 0 0 8px rgba(45,206,122,0.5) !important;
}

/* ── Errors ── */
.login #login_error, .login .message {
  border-radius: 7px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.73rem !important;
}
.login #login_error {
  background: rgba(255,50,70,0.07) !important;
  border-left: 3px solid #e05a6a !important;
  color: #f0a0a8 !important;
}
.login .message {
  background: rgba(33,163,102,0.07) !important;
  border-left: 3px solid var(--xl-green-bright) !important;
  color: var(--xl-green-neon) !important;
}

/* ── Progress bar ── */
#xl-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #21a366, #2dce7a, #6effc4, #2dce7a);
  background-size: 200% 100%;
  z-index: 200;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
  box-shadow: 0 0 10px rgba(45,206,122,0.7), 0 0 30px rgba(45,206,122,0.35);
  animation: progressShine 2s linear infinite;
}
@keyframes progressShine { 0%{background-position:0%} 100%{background-position:200%} }

/* ── Floating cell fragments ── */
.xl-cell-float {
  position: fixed;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; color: rgba(33,163,102,0.18);
  pointer-events: none; z-index: 1;
  white-space: nowrap;
  animation: cellFloat linear infinite;
}
@keyframes cellFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.9); }
  15%  { opacity: 1; }
  85%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-70px) scale(1.05); }
}

/* ── Toolbar row bottom decoration ── */
#xl-statusbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 22px;
  background: rgba(8,22,14,0.9);
  border-top: 1px solid rgba(33,163,102,0.14);
  z-index: 5; pointer-events: none;
  display: flex; align-items: center; gap: 20px;
  padding: 0 16px;
  backdrop-filter: blur(8px);
}
.xl-status-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; color: rgba(45,206,122,0.35);
  letter-spacing: 0.08em;
}