/* ====== Finance Background + Login Card (login-style.css) ====== */

/* Layout reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #e5e7eb;
  min-height: 100vh;

  /* Base gradient */
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(0,190,255,.15), transparent 60%),
    radial-gradient(900px 700px at 85% 25%, rgba(99,102,241,.18), transparent 65%),
    linear-gradient(135deg, #0b1020 0%, #0a0f1a 35%, #060b12 100%);

  /* Center content */
  display: grid;
  place-items: center;
  overflow: hidden;

  /* Make body a stacking context so ::before/::after can go behind it */
  position: relative;
  z-index: 0;
}

/* Subtle grid */
body::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 80px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 80px
    );
  mask: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);

  /* IMPORTANT: never block clicks and stay behind content */
  pointer-events: none;
  z-index: -1;
}

/* Animated finance “charts” overlay (inline SVG, no external files) */
body::after {
  content: "";
  position: absolute; inset: -10% -10% -10% -10%;
  opacity: .25;
  background-repeat: no-repeat;
  background-size: 1400px auto, 1200px auto, 900px auto;
  background-position:
    -200px 8vh,         /* line chart 1 */
    calc(100% + 200px) 65vh, /* candlesticks */
    50% 85vh;           /* sparkline */
  animation: drift 28s linear infinite;

  /* Three layered SVGs: line chart, candlesticks, sparkline */
  background-image:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='1600' height='400' viewBox='0 0 1600 400'>\
        <defs>\
          <linearGradient id='g1' x1='0' x2='1' y1='0' y2='0'>\
            <stop offset='0%' stop-color='%2300e5ff'/>\
            <stop offset='100%' stop-color='%235c7cff'/>\
          </linearGradient>\
        </defs>\
        <polyline fill='none' stroke='url(%23g1)' stroke-width='3' \
          points='0,280 80,260 160,300 240,250 320,260 400,210 480,230 560,170 640,200 720,160 800,190 880,150 960,175 1040,140 1120,160 1200,120 1280,150 1360,110 1440,130 1520,95 1600,120'/>\
        <path d='M0,400 L0,320 C260,260 460,360 770,210 C980,110 1260,210 1600,120 L1600,400 Z' \
          fill='%2315b8ff22'/>\
      </svg>"
    ),
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='1400' height='340' viewBox='0 0 1400 340'>\
        <g stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2'>\
          <line x1='0' y1='300' x2='1400' y2='300' stroke-dasharray='6 8'/>\
        </g>\
        <g>\
          <!-- simple candlesticks -->\
          <g transform='translate(60,0)'>\
            <rect x='0' y='180' width='14' height='80' fill='%23f43f5e'/>\
            <line x1='7' y1='160' x2='7' y2='280' stroke='%23f43f5e' stroke-width='2'/>\
          </g>\
          <g transform='translate(120,0)'>\
            <rect x='0' y='140' width='14' height='110' fill='%2306b6d4'/>\
            <line x1='7' y1='110' x2='7' y2='290' stroke='%2306b6d4' stroke-width='2'/>\
          </g>\
          <g transform='translate(180,0)'>\
            <rect x='0' y='200' width='14' height='70' fill='%23f59e0b'/>\
            <line x1='7' y1='170' x2='7' y2='290' stroke='%23f59e0b' stroke-width='2'/>\
          </g>\
          <g transform='translate(240,0)'>\
            <rect x='0' y='120' width='14' height='130' fill='%238b5cf6'/>\
            <line x1='7' y1='90' x2='7' y2='290' stroke='%238b5cf6' stroke-width='2'/>\
          </g>\
          <g transform='translate(300,0)'>\
            <rect x='0' y='160' width='14' height='100' fill='%2300e5ff'/>\
            <line x1='7' y1='130' x2='7' y2='290' stroke='%2300e5ff' stroke-width='2'/>\
          </g>\
        </g>\
      </svg>"
    ),
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='1100' height='180' viewBox='0 0 1100 180'>\
        <polyline fill='none' stroke='%23e5e7eb' stroke-opacity='.55' stroke-width='2' \
          points='0,120 60,110 120,130 180,100 240,105 300,80 360,95 420,70 480,78 540,65 600,70 660,56 720,62 780,55 840,58 900,50 960,56 1020,52 1080,54 1100,50'/>\
      </svg>"
    );

  /* IMPORTANT: never block clicks and stay behind content */
  pointer-events: none;
  z-index: -1;
}

@keyframes drift {
  0%   { background-position: -200px 8vh, calc(100% + 200px) 65vh, 50% 85vh; }
  50%  { background-position: -50px 10vh, calc(100% - 300px) 64vh, 48% 86vh; }
  100% { background-position: 150px 8vh, -400px 65vh, 52% 85vh; }
}

/* Login card (ensure it sits above background layers) */
.center {
  width: 360px;
  max-width: 92vw;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 28px 24px 20px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  position: relative;
  z-index: 1; /* <-- stays above ::before/::after */
}

.center h1 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #f8fafc;
}

.form { display: grid; gap: 12px; }

.textfield {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(2,6,12,.55);
  color: #e5e7eb;
  outline: none;
}
.textfield::placeholder { color: #9aa5b1; }

.textfield:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34,211,238,.2);
}

.btn {
  height: 44px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  color: #04121a;
  background: linear-gradient(90deg, #22d3ee, #60a5fa);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 18px rgba(34,211,238,.25);
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

.forgetpass, .signup {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}

.link {
  color: #93c5fd;
  text-decoration: none;
  transition: color .15s ease;
}
.link:hover { color: #bfdbfe; }

/* Small screens */
@media (max-width: 420px) {
  .center { padding: 22px 16px 16px; }
  .forgetpass, .signup { flex-direction: column; align-items: stretch; gap: 10px; }
}