:root {
      --surface: rgba(13, 20, 35, .94);
      --surface-strong: rgba(8, 13, 25, .98);
      --border: rgba(124,92,255, .20);
      --txt: rgba(245, 249, 255, .96);
      --muted: rgba(180, 198, 224, .68);
      --accent: #7c5cff;
      --accent-2: #6d3ff5;
      --danger: #fb7185;
      --in-bg: rgba(255,255,255,.055);
      --in-bg-focus: rgba(124,92,255,.075);
      --sh: 0 28px 90px rgba(0,0,0,.62), 0 10px 34px rgba(109,63,245,.18);
    }
    [data-theme="light"] {
      --surface: rgba(14, 23, 42, .95);
      --surface-strong: rgba(8, 13, 25, .98);
      --border: rgba(124,92,255, .22);
      --txt: rgba(245, 249, 255, .96);
      --muted: rgba(180, 198, 224, .70);
      --accent: #7c5cff;
      --accent-2: #6d3ff5;
      --danger: #fb7185;
      --in-bg: rgba(255,255,255,.055);
      --in-bg-focus: rgba(124,92,255,.075);
      --sh: 0 28px 90px rgba(0,0,0,.58), 0 10px 34px rgba(109,63,245,.16);
    }
    [data-theme="dark"] {
      --surface: rgba(10, 16, 30, .96);
      --surface-strong: rgba(5, 9, 18, .99);
      --border: rgba(157,132,255, .18);
      --txt: rgba(255,255,255,.94);
      --muted: rgba(218, 232, 255, .58);
      --accent: #7c5cff;
      --accent-2: #5a2fe0;
      --danger: #fb7185;
      --in-bg: rgba(255,255,255,.052);
      --in-bg-focus: rgba(124,92,255,.08);
      --sh: 0 32px 100px rgba(0,0,0,.72), 0 10px 34px rgba(124,92,255,.12);
    }

    *, *::before, *::after { box-sizing: border-box; }
    html, body { min-height: 100vh; margin: 0; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      display: flex; align-items: center; justify-content: center;
      padding: 24px 16px;
      color: var(--txt);
      overflow-x: hidden;
    }
    body::before,
    body::after {
      content: '';
      position: fixed;
      pointer-events: none;
      z-index: 0;
    }
    body::before {
      inset: 0;
      background:
        radial-gradient(850px 560px at 18% 8%, rgba(124,92,255,.22), transparent 60%),
        radial-gradient(720px 520px at 84% 84%, rgba(109,63,245,.20), transparent 58%),
        radial-gradient(520px 360px at 50% 0%, rgba(251,113,133,.09), transparent 65%),
        linear-gradient(145deg, #050308 0%, #0d0819 42%, #160f28 100%);
    }
    body::after {
      width: 540px;
      height: 540px;
      right: -220px;
      top: -210px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(124,92,255,.16), transparent 67%);
      filter: blur(2px);
    }

    /* ── Page wrapper ── */
    .eleph-login {
      position: relative;
      width: min(392px, 100%);
      z-index: 1;
    }
    .eleph-login::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 28px;
      width: 64%;
      height: 22px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: rgba(124,92,255,.18);
      filter: blur(22px);
      z-index: 0;
    }

    /* ── Character area: SVG head + hand divs ── */
    .char-head {
      display: none;
    }

    /* Elephant logo */
    .char-head img {
      display: block;
    }
    .elephant-img {
      width: 286px;
      height: auto;
      user-select: none;
      pointer-events: none;
    }

    /* ── Password paws animation removed with compact logo variant ── */
    .hand-l, .hand-r {
      display: none;
    }


    /* ── Login card ── */
    .login-card {
      margin-top: 0;
      padding: 30px 30px 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
        var(--surface);
      border: 1px solid var(--border);
      border-radius: 30px;
      box-shadow: var(--sh);
      text-align: center;
      position: relative;
      z-index: 1;
      backdrop-filter: blur(18px);
      overflow: hidden;
    }
    .login-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(157,132,255,.58), transparent);
    }
    .login-card::after {
      content: '';
      position: absolute;
      width: 190px;
      height: 190px;
      right: -92px;
      top: -98px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(124,92,255,.18), transparent 68%);
      pointer-events: none;
    }

    /* ── Logo ── */
    .login-logo {
      width: 76px;
      height: 62px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.38));
    }
    .login-logo .elephant-logo-img {
      display: block;
      width: 76px;
      height: auto;
      user-select: none;
      pointer-events: none;
    }
    .login-title {
      font-size: 23px;
      font-weight: 900;
      color: var(--txt);
      margin: 0 0 4px;
      letter-spacing: -.035em;
      position: relative;
      z-index: 1;
    }
    .login-sub {
      font-size: 12.5px;
      color: var(--muted);
      margin: 0 0 22px;
      position: relative;
      z-index: 1;
    }

    /* ── Error ── */
    .login-error {
      display: flex; align-items: flex-start; gap: 8px;
      background: rgba(251,113,133,.10); border: 1px solid rgba(251,113,133,.28);
      color: #fecdd3; border-radius: 13px; padding: 10px 13px;
      font-size: 13px; font-weight: 700; margin-bottom: 14px; text-align: left;
      position: relative;
      z-index: 1;
    }
    .login-error i { margin-top: 1px; flex-shrink: 0; color: var(--danger); }

    /* ── Form ── */
    form { position: relative; z-index: 1; }
    .lc-field { margin-bottom: 13px; text-align: left; }
    .lc-field label {
      display: block; font-size: 11.5px; font-weight: 800;
      color: var(--muted); margin-bottom: 6px; letter-spacing: .015em;
    }
    .lc-input-wrap { position: relative; }
    .lc-input {
      width: 100%; height: 44px; padding: 0 14px;
      background: var(--in-bg); border: 1px solid rgba(148,163,184,.22);
      border-radius: 13px; font-size: 13.5px; color: var(--txt);
      outline: none; font-family: inherit;
      transition: border-color .15s, box-shadow .15s, background .15s;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .lc-input.has-btn { padding-right: 44px; }
    .lc-input:focus {
      background: var(--in-bg-focus);
      border-color: rgba(124,92,255,.78);
      box-shadow: 0 0 0 3px rgba(124,92,255,.13), inset 0 1px 0 rgba(255,255,255,.06);
    }
    .lc-input::placeholder { color: rgba(180,198,224,.48); }

    .pw-toggle {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      width: 30px; height: 30px; border: none; background: none;
      color: var(--muted); cursor: pointer; display: flex;
      align-items: center; justify-content: center;
      border-radius: 9px; transition: .14s; font-size: 14px; padding: 0;
    }
    .pw-toggle:hover { color: var(--txt); background: rgba(255,255,255,.08); }

    /* ── Submit ── */
    .login-btn {
      width: 100%; height: 46px; border-radius: 14px;
      background: linear-gradient(135deg, #7c5cff, #6d3ff5 58%, #1e3a8a);
      color: #fff; border: none;
      font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: opacity .15s, transform .12s, box-shadow .15s;
      margin-top: 7px;
      box-shadow: 0 14px 30px rgba(109,63,245,.28), inset 0 1px 0 rgba(255,255,255,.26);
    }
    .login-btn:hover { opacity: .95; transform: translateY(-1px); box-shadow: 0 18px 38px rgba(109,63,245,.34), inset 0 1px 0 rgba(255,255,255,.30); }
    .login-btn:active { opacity: 1; transform: none; }

    /* ── Mobile ── */
    @media (max-width: 480px) {
      body {
        /* Safe area: notch top + home indicator bottom */
        padding:
          max(20px, env(safe-area-inset-top, 20px))
          16px
          max(20px, env(safe-area-inset-bottom, 20px))
          16px;
        align-items: flex-start;
        padding-top: max(48px, env(safe-area-inset-top, 48px));
      }

      .eleph-login { width: 100%; }

      .login-card {
        padding: 26px 20px 28px;
        border-radius: 24px;
      }

      /* Prevent iOS auto-zoom on focus (requires font-size ≥ 16px) */
      .lc-input {
        font-size: 16px !important;
        height: 48px;
      }

      .login-title { font-size: 20px; }
      .login-btn   { height: 50px; font-size: 15px; }

      /* Hide decorative bg blob that spills off-screen */
      body::after { display: none; }
    }