/* ===== login.html inline style 1 ===== */
:root{
      --black:#0f172a; --muted:#6b7280; --line:#eef2f7; --gold:#d4a019; --bg:#fbfcfe;
      /* bear palette */
      --fur:#ffffff; --fur-2:#f5f8ff; --fur-line:#e3eaf6;
      --shine:#ffffff; --cheek:#ff9ab3;
      --shadow:rgba(15,23,42,.14);
    }

    body{ background:linear-gradient(180deg,#f7fafc,#fff); color:var(--black); -webkit-font-smoothing:antialiased; }
    .container-xl{ max-width:980px; margin:0 auto; padding:1rem; }

    /* header */
    .page-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:.5rem 0 1rem; }
    .lang-switch .btn{ border:1px solid #e5e7eb; padding:.45rem .8rem; border-radius:.7rem; background:#fff; }
    .lang-switch .btn.active{ color:#fff; background:var(--black); border-color:var(--black); }

    /* table layout */
    .login-wrap{ position:relative; border:1px solid var(--line); border-radius:1rem; background:#fff; box-shadow:0 10px 28px rgba(2,6,23,.06); padding:1.25rem 1.25rem 1.5rem; overflow:visible; }
    .login-title{ font-weight:900; font-size:1.2rem; margin:0 0 1rem; }
    table.login-table{ width:100%; border-collapse:separate; border-spacing:0; }
    table.login-table th, table.login-table td{ padding:.65rem .75rem; border-bottom:1px solid var(--line); vertical-align:middle; }
    table.login-table th{ width:220px; text-align:start; color:#374151; font-weight:700; white-space:nowrap; }
    table.login-table tr:last-child th, table.login-table tr:last-child td{ border-bottom:0; }

    .field{ width:100%; }
    .field input{ width:100%; border:1px solid var(--line); border-radius:.6rem; padding:.65rem .8rem; }
    .field input:focus{ outline:none; border-color:#d1d5db; box-shadow:0 0 0 3px rgba(17,24,39,.08); }

    .actions-row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; margin-top:1rem; }
    .btn{ border:1px solid #e5e7eb; padding:.6rem .9rem; border-radius:.8rem; background:#fff; color:var(--black); transition:transform .15s, box-shadow .15s; }
    .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
    .btn-primary{ background:var(--black); color:#fff; border-color:var(--black); }
    .btn-google{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700; }
    .btn-google svg{ width:18px; height:18px; }
    .muted{ color:var(--muted); }
    .link-btn{ color:var(--black); text-decoration:underline; cursor:pointer; font-weight:700; }
    .link-btn:hover{ color:#6b21a8; }
    .show-pass{ display:flex; align-items:center; gap:.5rem; user-select:none; }

    /* responsive table -> stacked rows */
    @media(max-width:640px){
      table.login-table, tbody, tr, th, td{ display:block; width:100%; }
      table.login-table th{ padding-bottom:.35rem; border:0; }
      table.login-table td{ padding-top:0; border-bottom:1px dashed var(--line); }
      .actions-row{ justify-content:center; }
    }

    /* loader */
    #loader{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:60; background:rgba(255,255,255,.55); backdrop-filter:blur(3px); }
    #loader.active{ display:flex; }
    .spinner{ width:56px; height:56px; border-radius:9999px; border:6px solid rgba(0,0,0,.06); border-top-color:var(--gold); animation:spin .9s linear infinite; }
    @keyframes spin{ to{ transform:rotate(360deg); } }

    .msg{ margin-top:.6rem; font-weight:700; }
    .msg.err{ color:#b91c1c; }
    .msg.ok { color:#047857; }

    /* modal */
    .modal{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; }
    .modal.show{ display:flex; }
    .modal::before{ content:""; position:absolute; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(3px); }
    .modal-card{ position:relative; z-index:81; width:min(520px,92vw); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 48px rgba(2,6,23,.18); padding:18px 18px 16px; }
    .modal-title{ font-weight:900; font-size:1.05rem; margin-bottom:.25rem; }
    .modal-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:12px; }

    /* ------------------------------------------------------
       HIDE your old inline bear (we're not deleting it)
       ------------------------------------------------------ */
    .login-wrap > .bear{ display:none !important; }

    /* ======================================================
       PRO 3D-ISH ANIMATED BEAR — HEAD ONLY (mounted in login-wrap)
       ====================================================== */
    .bear-pro{ display:flex; justify-content:center; }
    .pbear{
      position:relative;
      width:min(520px, 90vw);
      aspect-ratio: 16 / 8;
      overflow:visible;
      isolation:isolate;
      z-index:12; /* above panel border */
      /* state classes handled in JS:
         .pbear.closed  -> both eyes closed
         .pbear.wink    -> right eye closed
      */
    }
    /* float */
    @keyframes floaty { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
    .pb-group{ position:absolute; inset:0; display:grid; place-items:end center; animation:floaty 7s ease-in-out infinite; }

    .pb-body{ position:relative; z-index:2; width:78%; max-width:420px; aspect-ratio: 1 / 0.92; transform-style:preserve-3d; }

    .pb-head{
      position:absolute; left:50%; transform:translateX(-50%) rotateY(0deg); bottom:0;
      width:80%; aspect-ratio: 1 / .78;
      background:
        radial-gradient(180px 120px at 50% 18%, #fff 0%, #f7fbff 58%, #e9eff8 100%),
        radial-gradient(120px 90px  at 50% 0%, rgba(255,255,255,.85), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 50%, rgba(0,0,0,.05) 100%);
      border:5px solid var(--fur-line);
      border-radius:140px 140px 102px 102px;
      box-shadow:
        0 18px 46px rgba(15,23,42,.18),
        inset 0 18px 28px rgba(255,255,255,.85),
        inset 0 -16px 22px rgba(0,0,0,.05),
        0 0 20px rgba(15,23,42,.1);
      transform-style:preserve-3d;
      transition:transform .25s ease;
    }

    .pb-ear{
      position:absolute; top:-12%; width:26%; aspect-ratio:1/1; background:var(--fur);
      border:5px solid var(--fur-line); border-radius:50%;
      box-shadow:0 10px 16px rgba(15,23,42,.18);
    }
    .pb-ear.left{ left:-3%; } .pb-ear.right{ right:-3%; }
    .pb-ear::after{
      content:""; position:absolute; inset:20%; border-radius:inherit;
      background:
        radial-gradient(circle at 55% 45%, #ffdbe3, #ffc2cf 65%, transparent 72%),
        radial-gradient(100% 90% at 50% 30%, rgba(255,255,255,.7), transparent 60%);
    }

    .pb-brow{ position:absolute; top:26%; width:22%; height:14%; border-top:7px solid #1b2540; border-radius:42px/20px; opacity:.9; }
    .pb-brow.left{ left:18%; transform:rotate(-8deg); }
    .pb-brow.right{ right:18%; transform:rotate(8deg); }

    .pb-eye{
      position:absolute; top:40%; width:18%; aspect-ratio:1/1; border-radius:50%;
      background:
        radial-gradient(circle at 50% 55%, #fff 0%, #edf3ff 72%),
        radial-gradient(80% 80% at 50% 25%, rgba(255,255,255,.85), transparent 60%);
      box-shadow:inset 0 -2px 0 rgba(0,0,0,.08), 0 6px 10px rgba(15,23,42,.14);
      display:flex; align-items:center; justify-content:center;
      transform-origin:center;
      animation:blink 4.8s infinite;
    }
    .pb-eye.left{ left:22%; } .pb-eye.right{ right:22%; }

    .pb-pupil{
      width:48%; aspect-ratio:1/1; border-radius:50%; background:#111827; position:relative; transition:transform .14s ease;
      box-shadow:0 0 0 5px rgba(17,24,39,.06);
    }
    .pb-pupil::after{ content:""; position:absolute; top:8%; right:8%; width:32%; aspect-ratio:1/1; border-radius:50%; background:var(--shine); opacity:.95; }

    /* close/wink states */
    .pbear.closed .pb-eye{ transform:scaleY(.12); animation:none; }
    .pbear.wink   .pb-eye.right{ transform:scaleY(.12); animation:none; }

    @keyframes blink{
      0%, 88%, 92%, 100% { transform:scaleY(1) }
      90% { transform:scaleY(.08) }
    }

    .pb-snout{
      position:absolute; left:50%; transform:translateX(-50%); bottom:16%;
      width:46%; height:30%; border-radius:30px;
      background:linear-gradient(180deg,#fff,#edf2fa); border:4px solid var(--fur-line);
      box-shadow:inset 0 -8px 12px rgba(0,0,0,.06), 0 3px 0 #fff;
    }
    .pb-nose{ position:absolute; left:50%; transform:translateX(-50%); top:18%; width:30%; height:36%; background:#0f172a; border-radius:12px; }
    .pb-smile{ position:absolute; left:50%; transform:translateX(-50%); bottom:14%; width:54%; height:26%; border-bottom:5px solid #1b2540; border-radius:0 0 28px 28px; }
    .pb-cheek{ position:absolute; bottom:28%; width:16%; height:12%; background:var(--cheek); border-radius:50%; opacity:.85; filter:blur(.2px); }
    .pb-cheek.left{ left:10%; } .pb-cheek.right{ right:10%; }

    /* paws/torso/scarf hidden for head-only */
    .pb-torso, .pb-belly, .pb-scarf, .pb-scarf-back, .pb-tail, .pb-paw{ display:none !important; }

    @media(max-width:640px){
      .pbear{ width:96vw; aspect-ratio:16/9; }
      .pb-body{ width:84%; }
      .pb-head{ width:86%; }
    }

    @media (prefers-reduced-motion: reduce){
      .pb-group{ animation:none; }
    }

    /* ============================
       ON-TOP placement: half in / half out
       ============================ */
    .login-wrap.bear-host{ padding-top:8.5rem; }
    .login-wrap .bear-pro{
      position:relative;
      left:50%; top:0;
      transform:translateX(-50%);
      width:100%; height:0; pointer-events:auto; z-index:12;
    }
    .login-wrap .bear-pro .pbear{
      position:absolute; left:50%; top:0;
      transform: translate(-50%, -140%); /* tweak -34%..-42% to taste */
      width:min(500px, 86%);
    }