*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #04080f;
      --surface:   #070d18;
      --cyan:      #00d4ff;
      --cyan-dim:  #00a8cc;
      --cyan-glow: rgba(0,212,255,0.18);
      --white:     #ffffff;
      --muted:     #8a9bb5;
      --border:    rgba(0,212,255,0.3);
      --card-bg:   rgba(6,12,24,0.92);
    }

    html, body {
      background: var(--bg);
      color: var(--white);
      font-family: 'Exo 2', sans-serif;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* ── CIRCUIT BACKGROUND ── */
    .bg-layer {
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,100,160,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0,180,220,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 80% 20%, rgba(0,160,200,0.05) 0%, transparent 60%),
        linear-gradient(180deg, #04080f 0%, #060d1a 100%);
      pointer-events: none;
      z-index: 0;
    }

    /* circuit grid lines */
    .bg-layer::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    /* corner decorative circuit elements */
    .corner { position: fixed; z-index: 1; pointer-events: none; }
    .corner svg { display: block; }
    .corner-tl { top: 0; left: 0; }
    .corner-tr { top: 0; right: 0; transform: scaleX(-1); }
    .corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }
    .corner-br { bottom: 0; right: 0; transform: scale(-1); }

    /* ── CARD WRAPPER ── */
    .login-wrap {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 480px;
      padding: 20px;
    }

    /* logo header */
    .login-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 36px;
    }

    .login-header img {
      width: 52px;
      height: 52px;
      object-fit: contain;
      filter: drop-shadow(0 0 12px rgba(0,212,255,0.5));
    }

    .login-header-text {
      font-family: 'Orbitron', monospace;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--white);
    }
    .login-header-text span { color: var(--cyan); }

    /* card */
    .login-card {
      width: 100%;
      background: var(--card-bg);
      border: 1px solid rgba(0,212,255,0.22);
      border-radius: 16px;
      padding: 40px 44px;
      box-shadow:
        0 0 0 1px rgba(0,212,255,0.06),
        0 30px 80px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(0,212,255,0.12);
      position: relative;
    }

    /* corner brackets on card */
    .login-card::before,
    .login-card::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border-color: var(--cyan);
      border-style: solid;
    }
    .login-card::before {
      top: -1px; left: -1px;
      border-width: 2px 0 0 2px;
      border-radius: 4px 0 0 0;
    }
    .login-card::after {
      bottom: -1px; right: -1px;
      border-width: 0 2px 2px 0;
      border-radius: 0 0 4px 0;
    }

    /* extra corners via pseudo on inner div */
    .card-corner-tr,
    .card-corner-bl {
      position: absolute;
      width: 18px;
      height: 18px;
      border-color: var(--cyan);
      border-style: solid;
    }
    .card-corner-tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
    .card-corner-bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }

    .login-title {
      font-family: 'Exo 2', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 28px;
    }

    .login-title::after {
      content: '';
      display: block;
      width: 60px;
      height: 2px;
      background: var(--cyan);
      margin-top: 10px;
      border-radius: 1px;
    }

    /* form fields */
    .field { margin-bottom: 20px; }

    .field label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      margin-bottom: 8px;
      letter-spacing: 0.04em;
    }

    .input-wrap {
      position: relative;
    }

    .input-wrap .icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      display: flex;
    }
    .input-wrap .icon svg { width: 18px; height: 18px; }

    .input-wrap input {
      width: 100%;
      background: rgba(0,12,26,0.7);
      border: 1.5px solid rgba(0,212,255,0.25);
      border-radius: 8px;
      color: var(--white);
      font-family: 'Exo 2', sans-serif;
      font-size: 14px;
      padding: 13px 44px;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .input-wrap input:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(0,212,255,0.1);
    }
    .input-wrap input::placeholder { color: #3a4a60; }

    .input-wrap .eye {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      cursor: pointer;
      display: flex;
      transition: color 0.2s;
    }
    .input-wrap .eye:hover { color: var(--cyan); }
    .input-wrap .eye svg { width: 18px; height: 18px; }

    /* sign in button */
    .btn-signin {
      width: 100%;
      padding: 15px;
      background: var(--cyan);
      color: #000;
      font-family: 'Exo 2', sans-serif;
      font-size: 15px;
      font-weight: 700;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 8px;
      letter-spacing: 0.04em;
      transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
      box-shadow: 0 0 20px rgba(0,212,255,0.25);
    }
    .btn-signin:hover {
      background: var(--cyan-dim);
      box-shadow: 0 0 32px rgba(0,212,255,0.5);
      transform: translateY(-1px);
    }

    /* divider */
    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 22px 0;
      color: var(--muted);
      font-size: 13px;
    }
    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,0.08);
    }

    /* google button */
    .btn-google {
      width: 100%;
      padding: 13px;
      background: transparent;
      color: var(--cyan);
      font-family: 'Exo 2', sans-serif;
      font-size: 15px;
      font-weight: 600;
      border: 1.5px solid rgba(0,212,255,0.25);
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .btn-google:hover {
      border-color: var(--cyan);
      background: rgba(0,212,255,0.06);
      box-shadow: 0 0 16px rgba(0,212,255,0.12);
    }

    /* Google G icon */
    .g-icon {
      width: 20px;
      height: 20px;
    }

    /* top dots decoration */
    .top-dots {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
      z-index: 10;
    }
    .top-dots span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(0,212,255,0.3);
    }
    .top-dots span:nth-child(2) { background: rgba(0,212,255,0.15); }
    .top-dots span:nth-child(3) { background: rgba(0,212,255,0.08); }
    .top-dots span:nth-child(4) { background: rgba(0,212,255,0.04); }

    @media (max-width: 520px) {
      .login-card { padding: 28px 22px; }
    }

.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:13px}.auth-links a{color:var(--cyan);text-decoration:none}.auth-links a:hover{text-decoration:underline}.alert{border:1px solid rgba(0,212,255,.25);background:rgba(0,212,255,.07);color:#cdefff;border-radius:8px;padding:10px 12px;margin-bottom:18px;font-size:13px}.alert.error{border-color:rgba(255,59,92,.35);background:rgba(255,59,92,.08);color:#ffd1d9}.alert.success{border-color:rgba(0,230,118,.35);background:rgba(0,230,118,.08);color:#caffdf}.small-note{color:var(--muted);font-size:12px;line-height:1.5;margin-top:12px}.login-card form{width:100%}