<?php
// ===================== LOGIN HANDLER =====================
session_start();

$error = '';
$success = '';

// Demo credentials - ganti dengan database query di produksi
$valid_users = [
    'admin@sriwijayasmartedu.id' => 'admin123',
    'sekolah@sriwijayasmartedu.id' => 'sekolah123',
];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email    = trim($_POST['email'] ?? '');
    $password = $_POST['password'] ?? '';

    if (empty($email) || empty($password)) {
        $error = 'Email dan password wajib diisi.';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = 'Format email tidak valid.';
    } elseif (isset($valid_users[$email]) && $valid_users[$email] === $password) {
        $_SESSION['user_email'] = $email;
        $_SESSION['logged_in']  = true;
        // Redirect ke dashboard setelah login
        header('Location: dashboard.php');
        exit;
    } else {
        $error = 'Email atau password salah. Silakan coba lagi.';
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Login — Sriwijaya Smart Edu</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet"/>
<style>
  /* ===================== VARIABLES ===================== */
  :root {
    --navy:        #0f1f5c;
    --navy-deep:   #091444;
    --navy-mid:    #1a2f6e;
    --blue:        #1e40af;
    --blue-bright: #2563eb;
    --blue-light:  #3b82f6;
    --sky:         #60a5fa;
    --accent:      #f0a500;
    --white:       #ffffff;
    --gray-50:     #f8faff;
    --gray-100:    #eef2ff;
    --gray-200:    #e0e7ff;
    --text-main:   #0f172a;
    --text-muted:  #475569;
    --radius:      16px;
    --shadow-lg:   0 20px 60px rgba(15,31,92,0.22);
  }

  /* ===================== RESET ===================== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-main);
    min-height: 100vh;
    overflow: hidden;
    background: var(--navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ===================== BACKGROUND ===================== */
  .bg-layer {
    position: fixed; inset: 0; z-index: 0;
    background: var(--navy-deep);
    overflow: hidden;
  }
  .bg-layer::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 70% 55% at 15% 20%, rgba(37,99,235,0.28) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 85% 80%, rgba(96,165,250,0.14) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 50% 110%, rgba(240,165,0,0.07) 0%, transparent 60%);
  }
  .bg-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 52px 52px;
  }

  /* Floating orbs */
  .orb {
    position: absolute; border-radius: 50%;
    filter: blur(70px); pointer-events: none;
    animation: drift linear infinite;
  }
  .orb-1 {
    width: 380px; height: 380px;
    background: rgba(37, 99, 235, 0.20);
    top: -120px; left: -80px;
    animation-duration: 22s;
  }
  .orb-2 {
    width: 280px; height: 280px;
    background: rgba(96, 165, 250, 0.15);
    bottom: -80px; right: -60px;
    animation-duration: 18s; animation-delay: -9s;
  }
  .orb-3 {
    width: 200px; height: 200px;
    background: rgba(240, 165, 0, 0.10);
    top: 60%; left: 60%;
    animation-duration: 28s; animation-delay: -14s;
  }
  @keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.05); }
    66%  { transform: translate(-20px, 30px) scale(0.96); }
    100% { transform: translate(0, 0) scale(1); }
  }

  /* ===================== LAYOUT ===================== */
  .login-outer {
    position: relative; z-index: 10;
    display: flex; gap: 0;
    width: min(960px, 96vw);
    min-height: 540px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.07);
    animation: slideUp .65s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(32px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ===================== LEFT PANEL ===================== */
  .panel-left {
    flex: 0 0 44%;
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
    border-right: 1px solid rgba(255,255,255,.07);
    padding: 48px 40px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
  }
  .panel-left::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 100% 0%, rgba(37,99,235,.22) 0%, transparent 60%),
      radial-gradient(ellipse 60% 60% at 0% 100%, rgba(96,165,250,.10) 0%, transparent 60%);
    pointer-events: none;
  }
  .panel-left-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 36px 36px;
  }

  /* Logo */
  .logo-wrap { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
  .logo-mark {
    width: 44px; height: 44px; background: var(--blue-bright);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: white; font-size: 15px; letter-spacing: -0.5px;
    box-shadow: 0 4px 20px rgba(37,99,235,.45);
  }
  .logo-text  { font-size: 17px; font-weight: 800; color: white; line-height: 1.2; }
  .logo-sub   { font-size: 10px; color: rgba(255,255,255,.4); font-weight: 500; letter-spacing: .6px; text-transform: uppercase; margin-top: 1px; }

  /* Panel content */
  .panel-left-body { position: relative; z-index: 2; }
  .panel-left-body h2 {
    font-size: 26px; font-weight: 800; color: white; line-height: 1.25;
    margin-bottom: 10px;
  }
  .panel-left-body h2 em {
    font-style: italic; font-family: 'Instrument Serif', serif;
    color: var(--sky); font-weight: 400;
  }
  .panel-left-body p {
    font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.7;
    margin-bottom: 28px;
  }

  /* Mini stats */
  .mini-stats { display: flex; flex-direction: column; gap: 10px; }
  .mini-stat {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px; padding: 12px 16px;
    display: flex; align-items: center; gap: 12px;
    transition: background .25s;
  }
  .mini-stat:hover { background: rgba(255,255,255,.10); }
  .mini-stat-icon {
    width: 36px; height: 36px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
  }
  .ms-blue  { background: rgba(37,99,235,.3); }
  .ms-green { background: rgba(34,197,94,.2); }
  .ms-gold  { background: rgba(240,165,0,.2); }
  .mini-stat-text .ms-label { font-size: 13px; font-weight: 700; color: white; }
  .mini-stat-text .ms-sub   { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 1px; }

  /* Panel footer */
  .panel-left-footer { position: relative; z-index: 2; }
  .live-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 100px; padding: 6px 14px;
    font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.6);
  }
  .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 6px #22c55e;
    animation: pulse 2s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

  /* ===================== RIGHT PANEL ===================== */
  .panel-right {
    flex: 1;
    background: var(--white);
    padding: 48px 44px;
    display: flex; flex-direction: column; justify-content: center;
  }

  .form-head { margin-bottom: 32px; }
  .form-head .greeting {
    font-size: 12px; font-weight: 700; color: var(--blue);
    letter-spacing: 1px; text-transform: uppercase;
    margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
  }
  .form-head .greeting::before {
    content: '';
    display: block; width: 22px; height: 2px;
    background: var(--blue); border-radius: 2px;
  }
  .form-head h1 {
    font-size: 28px; font-weight: 800; color: var(--navy);
    line-height: 1.2; margin-bottom: 6px;
  }
  .form-head p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

  /* Alert */
  .alert {
    padding: 12px 16px; border-radius: 10px;
    font-size: 13.5px; font-weight: 600;
    margin-bottom: 22px;
    display: flex; align-items: center; gap: 10px;
    animation: alertIn .35s ease both;
  }
  @keyframes alertIn { from { opacity: 0; transform: translateY(-8px); } to { opacity:1; transform: none; } }
  .alert-error   { background: #fef2f2; border: 1.5px solid #fecaca; color: #991b1b; }
  .alert-success { background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #166534; }
  .alert-icon    { font-size: 16px; flex-shrink: 0; }

  /* Form fields */
  .field-group { margin-bottom: 20px; }
  .field-group label {
    display: block; font-size: 13px; font-weight: 700;
    color: var(--navy); margin-bottom: 7px;
  }
  .field-wrap { position: relative; }
  .field-wrap svg.field-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--text-muted);
    pointer-events: none; transition: color .2s;
  }
  .field-wrap input {
    width: 100%; padding: 13px 44px 13px 42px;
    border: 1.5px solid var(--gray-200); border-radius: 11px;
    font-size: 14px; font-family: inherit; color: var(--text-main);
    background: var(--gray-50); transition: all .2s;
    outline: none;
  }
  .field-wrap input:focus {
    border-color: var(--blue-bright); background: white;
    box-shadow: 0 0 0 3.5px rgba(37,99,235,.10);
  }
  .field-wrap input:focus + .field-focus-line { width: 100%; }
  .field-wrap input::placeholder { color: #94a3b8; }

  /* Password toggle */
  .toggle-pw {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--text-muted); line-height: 0; transition: color .2s;
  }
  .toggle-pw:hover { color: var(--navy); }
  .toggle-pw svg { width: 17px; height: 17px; }

  /* Remember / forgot */
  .row-options {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 26px;
  }
  .remember-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; user-select: none;
  }
  .remember-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer; }
  .forgot-link {
    font-size: 13px; font-weight: 700; color: var(--blue);
    text-decoration: none; transition: color .2s;
  }
  .forgot-link:hover { color: var(--navy); text-decoration: underline; }

  /* Submit button */
  .btn-login {
    width: 100%; padding: 15px;
    background: var(--navy); color: white;
    font-weight: 800; font-size: 15px;
    border-radius: 11px; border: none;
    cursor: pointer; transition: all .22s;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    position: relative; overflow: hidden;
  }
  .btn-login::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
    opacity: 0; transition: opacity .2s;
  }
  .btn-login:hover {
    background: var(--blue-bright);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37,99,235,.35);
  }
  .btn-login:hover::before { opacity: 1; }
  .btn-login:active { transform: translateY(0); }
  .btn-login svg { width: 18px; height: 18px; }

  /* Loading spinner */
  .spinner {
    display: none; width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: white; border-radius: 50%;
    animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Divider */
  .divider {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0; color: var(--text-muted);
    font-size: 12px; font-weight: 600;
  }
  .divider::before, .divider::after {
    content: ''; flex: 1;
    height: 1px; background: var(--gray-200);
  }

  /* WA contact */
  .btn-wa {
    width: 100%; padding: 13px;
    background: transparent; border: 1.5px solid var(--gray-200);
    border-radius: 11px; color: var(--text-muted);
    font-size: 13.5px; font-weight: 700;
    cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
  }
  .btn-wa:hover { border-color: #25d366; color: #16a34a; background: #f0fdf4; }
  .btn-wa svg { width: 17px; height: 17px; }

  /* Footer note */
  .form-footer {
    margin-top: 24px; text-align: center;
    font-size: 12px; color: var(--text-muted);
  }
  .form-footer a { color: var(--blue); font-weight: 700; text-decoration: none; }
  .form-footer a:hover { text-decoration: underline; }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 680px) {
    body { overflow: auto; align-items: flex-start; padding: 20px 0; }
    .login-outer { flex-direction: column; border-radius: 20px; width: calc(100vw - 32px); }
    .panel-left { flex: none; padding: 32px 28px 28px; }
    .panel-left-body h2 { font-size: 20px; }
    .mini-stats { flex-direction: row; flex-wrap: wrap; }
    .mini-stat { flex: 1; min-width: 140px; }
    .panel-right { padding: 32px 28px; }
  }
</style>
</head>
<body>

<!-- Background -->
<div class="bg-layer">
  <div class="bg-grid"></div>
  <div class="orb orb-1"></div>
  <div class="orb orb-2"></div>
  <div class="orb orb-3"></div>
</div>

<!-- Card -->
<div class="login-outer">

  <!-- ===== LEFT PANEL ===== -->
  <div class="panel-left">
    <div class="panel-left-grid"></div>

    <!-- Logo -->
    <div class="logo-wrap">
      <div class="logo-mark">SE</div>
      <div>
        <div class="logo-text">Sriwijaya Smart Edu</div>
        <div class="logo-sub">Smart Solutions for Modern Education</div>
      </div>
    </div>

    <!-- Body -->
    <div class="panel-left-body">
      <h2>Platform Digital<br/><em>Sekolah Modern</em></h2>
      <p>Kelola ujian, administrasi, dan layanan sekolah dalam satu sistem terintegrasi yang aman dan mudah digunakan.</p>

      <div class="mini-stats">
        <div class="mini-stat">
          <div class="mini-stat-icon ms-blue">🏫</div>
          <div class="mini-stat-text">
            <div class="ms-label">15+ Sekolah Aktif</div>
            <div class="ms-sub">Di Sumatera Selatan & Bengkulu</div>
          </div>
        </div>
        <div class="mini-stat">
          <div class="mini-stat-icon ms-green">👨‍🎓</div>
          <div class="mini-stat-text">
            <div class="ms-label">8.000+ Siswa</div>
            <div class="ms-sub">Menggunakan sistem kami</div>
          </div>
        </div>
        <div class="mini-stat">
          <div class="mini-stat-icon ms-gold">⭐</div>
          <div class="mini-stat-text">
            <div class="ms-label">12 Aplikasi Tersedia</div>
            <div class="ms-sub">Modular & bisa dikustomisasi</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="panel-left-footer">
      <div class="live-badge">
        <div class="live-dot"></div>
        Sistem Online — 99.9% Uptime
      </div>
    </div>
  </div>

  <!-- ===== RIGHT PANEL ===== -->
  <div class="panel-right">
    <div class="form-head">
      <div class="greeting">Selamat Datang</div>
      <h1>Masuk ke Dashboard</h1>
      <p>Gunakan akun sekolah Anda untuk mengakses sistem.</p>
    </div>

    <!-- Alert -->
    <?php if ($error): ?>
    <div class="alert alert-error">
      <span class="alert-icon">⚠️</span>
      <?= htmlspecialchars($error) ?>
    </div>
    <?php endif; ?>
    <?php if ($success): ?>
    <div class="alert alert-success">
      <span class="alert-icon">✅</span>
      <?= htmlspecialchars($success) ?>
    </div>
    <?php endif; ?>

    <!-- Form -->
    <form method="POST" action="" id="loginForm" autocomplete="on">

      <!-- Email -->
      <div class="field-group">
        <label for="email">Alamat Email</label>
        <div class="field-wrap">
          <svg class="field-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
            <polyline points="22,6 12,13 2,6"/>
          </svg>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="email@sekolah.sch.id"
            value="<?= htmlspecialchars($_POST['email'] ?? '') ?>"
            required
            autocomplete="email"
          />
        </div>
      </div>

      <!-- Password -->
      <div class="field-group">
        <label for="password">Password</label>
        <div class="field-wrap">
          <svg class="field-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
          </svg>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="Masukkan password Anda"
            required
            autocomplete="current-password"
          />
          <button type="button" class="toggle-pw" id="togglePw" aria-label="Tampilkan password">
            <svg id="eyeIcon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
              <circle cx="12" cy="12" r="3"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- Options -->
      <div class="row-options">
        <label class="remember-label">
          <input type="checkbox" name="remember" id="remember"/>
          Ingat saya
        </label>
        <a href="forgot-password.php" class="forgot-link">Lupa Password?</a>
      </div>

      <!-- Submit -->
      <button type="submit" class="btn-login" id="submitBtn">
        <span id="btnLabel">
          <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
            <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
            <polyline points="10,17 15,12 10,7"/>
            <line x1="15" y1="12" x2="3" y2="12"/>
          </svg>
          Masuk Sekarang
        </span>
        <div class="spinner" id="spinner"></div>
      </button>
    </form>

    <!-- Divider -->
    <div class="divider">atau</div>

    <!-- WhatsApp -->
    <a href="https://wa.me/6281234567890?text=Halo%20Sriwijaya%20Smart%20Edu%2C%20saya%20membutuhkan%20bantuan%20login."
       class="btn-wa" target="_blank" rel="noopener">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
        <path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.556 4.116 1.528 5.845L.057 23.899l6.234-1.635A11.936 11.936 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.892a9.876 9.876 0 01-5.017-1.364l-.36-.214-3.732.979 1.003-3.648-.234-.373A9.865 9.865 0 012.108 12C2.108 6.528 6.528 2.108 12 2.108S21.892 6.528 21.892 12 17.472 21.892 12 21.892z"/>
      </svg>
      Butuh Bantuan? Hubungi via WhatsApp
    </a>

    <!-- Footer note -->
    <div class="form-footer">
      Belum punya akun? &nbsp;
      <a href="https://wa.me/6281234567890?text=Halo%2C%20saya%20ingin%20mendaftar%20Sriwijaya%20Smart%20Edu." target="_blank">Hubungi Tim Kami</a>
      &nbsp;·&nbsp;
      <a href="index.php">Kembali ke Beranda</a>
    </div>
  </div>
</div>

<script>
  // ===== Password Toggle =====
  const togglePw  = document.getElementById('togglePw');
  const pwInput   = document.getElementById('password');
  const eyeIcon   = document.getElementById('eyeIcon');

  const eyeOpen   = `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`;
  const eyeClosed = `<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>`;

  togglePw.addEventListener('click', () => {
    const isText = pwInput.type === 'text';
    pwInput.type = isText ? 'password' : 'text';
    eyeIcon.innerHTML = isText ? eyeOpen : eyeClosed;
  });

  // ===== Submit loading state =====
  document.getElementById('loginForm').addEventListener('submit', function() {
    const btn     = document.getElementById('submitBtn');
    const label   = document.getElementById('btnLabel');
    const spinner = document.getElementById('spinner');
    btn.disabled    = true;
    label.style.display   = 'none';
    spinner.style.display = 'block';
  });

  // ===== Field focus icon color =====
  document.querySelectorAll('.field-wrap input').forEach(inp => {
    inp.addEventListener('focus', () => {
      const icon = inp.closest('.field-wrap').querySelector('.field-icon');
      if (icon) icon.style.color = '#2563eb';
    });
    inp.addEventListener('blur', () => {
      const icon = inp.closest('.field-wrap').querySelector('.field-icon');
      if (icon) icon.style.color = '';
    });
  });
</script>
</body>
</html>