:root{
      --bg1:#07131c; --bg2:#0a1b26;
      --ink:#eaf2f6; --muted:#9db0be;
      --card:#0f1d29; --stroke:#1b3140;
      --aqua:#0bb3b0; --aqua-2:#48d6c9; --blue:#0b6cb8;
      --radius:18px; --shadow:0 26px 60px rgba(0,0,0,.45);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--ink);
      font:16px/1.55 Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;
      background:
        radial-gradient(900px 600px at 86% -10%, rgba(11,179,176,.18), transparent 60%),
        radial-gradient(720px 520px at 10% 110%, rgba(11,108,184,.18), transparent 60%),
        linear-gradient(180deg, var(--bg2), var(--bg1) 60%);
      display:grid; place-items:center; overflow:hidden;
    }

    /* Centered card */
    .card{
      width:min(520px, 94vw);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--card);
      border:1px solid var(--stroke);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:22px;
    }

    /* Brand row (logo + text) */
    .brand{
      display:flex; align-items:center; gap:12px; margin-bottom:8px;
    }
    .brand .mark{
      width:44px; height:44px; border-radius:50%;
      display:grid; place-items:center;
     
    
    }
    .brand .mark img{ width:50px; height:50px; object-fit:contain }
    .brand .name{ font-weight:700; font-size:20px; letter-spacing:.2px }
    .brand .sub { display:block; font-size:12px; color:var(--muted); margin-top:2px }

    .top{
      display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
    }
    .lang{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
    .lang select{
      appearance:none; -webkit-appearance:none;
      background:#0b1822; color:#e6eef3; border:1px solid var(--stroke);
      border-radius:10px; padding:8px 12px; outline:none;
    }

    .rule{ height:1px; margin:10px 0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }

    /* Form */
    .row{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
    label{ font-size:13px; color:#a9bac7; }
    input[type="text"], input[type="password"]{
      width:100%; background:#0b1822; color:#eaf2f6;
      border:1px solid var(--stroke); border-radius:12px;
      padding:12px 14px; outline:none;
      transition:border-color .2s, box-shadow .2s;
    }
    input::placeholder{ color:#6f8593 }
    input:focus{ border-color:#2a4456; box-shadow:0 0 0 3px rgba(11,179,176,.22) }

    .meta{ display:flex; justify-content:space-between; font-size:12px; margin-top:6px }
    .meta a{ color:#a7c7d1; text-decoration:none }
    .meta a:hover{ text-decoration:underline }

    .error{ min-height:20px; margin-top:8px; font-size:13px; color:#ff8b8b }
    .actions{ margin-top:10px }
    .btn{
      appearance:none; border:0; cursor:pointer; outline:none;
      padding:12px 16px; border-radius:12px; font-weight:700;
      background:linear-gradient(135deg, var(--aqua), var(--aqua-2)); color:#052226;
      box-shadow:0 10px 28px rgba(11,179,176,.35);
    }
    .btn:active{ transform:translateY(1px) }

    .foot{ margin-top:16px; color:var(--muted); font-size:12px; text-align:center; border-top:1px dashed var(--stroke); padding-top:12px }