:root{
      --bg:#04101d;
      --bg-deep:#030b15;
      --panel:#081827;
      --panel-2:#0b1c2d;
      --line:rgba(130,167,194,.18);
      --line-strong:rgba(130,167,194,.30);
      --text:#f7fbff;
      --muted:#aebccc;
      --soft:#d4deea;
      --cyan:#19d7ea;
      --cyan-2:#0ab7d0;
      --cyan-soft:rgba(25,215,234,.12);
      --gold:#f4c64f;
      --shadow:0 28px 90px rgba(0,0,0,.46);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
    }

    *{box-sizing:border-box}
    html,body{min-height:100%}

    body{
      margin:0;
      color:var(--text);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(900px 540px at 50% 16%, rgba(25,215,234,.13), transparent 64%),
        radial-gradient(620px 420px at 50% 88%, rgba(244,198,79,.07), transparent 68%),
        linear-gradient(180deg, #061321 0%, #020912 100%);
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    button,input{font:inherit}

    .page{
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:28px 18px;
      position:relative;
      isolation:isolate;
    }

    .page::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      background:
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px);
      background-size:120px 120px;
      background-position:1px 1px;
      mask-image:radial-gradient(circle at center, rgba(0,0,0,.9), transparent 76%);
      pointer-events:none;
    }

    .page::after{
      content:"";
      position:absolute;
      width:min(78vw, 960px);
      height:min(78vw, 960px);
      border-radius:50%;
      z-index:-1;
      background:
        radial-gradient(circle, rgba(25,215,234,.07) 0%, rgba(25,215,234,.025) 30%, transparent 68%);
      filter:blur(1px);
      pointer-events:none;
    }

    .login-shell{
      width:min(100%, 480px);
      text-align:center;
    }

    .logo-coin{
      width:58px;
      height:58px;
      border-radius:50%;
      border:2px solid var(--gold);
      display:grid;
      place-items:center;
      color:var(--gold);
      font-size:18px;
      font-weight:900;
      letter-spacing:.02em;
      background:
        radial-gradient(circle at 32% 30%, rgba(255,245,193,.22), transparent 25%),
        radial-gradient(circle at 50% 50%, rgba(244,198,79,.13), rgba(4,16,29,.6) 70%);
      box-shadow:
        inset 0 0 0 3px rgba(244,198,79,.10),
        0 0 0 1px rgba(244,198,79,.18),
        0 10px 30px rgba(244,198,79,.08);
      flex:0 0 auto;
    }

    .brand-copy strong{
      display:block;
      margin:0;
      font-size:20px;
      line-height:1.02;
      letter-spacing:-.03em;
    }

    .brand-copy small{
      display:block;
      margin-top:2px;
      color:var(--gold);
      font-size:20px;
      line-height:1;
      font-weight:800;
      letter-spacing:-.03em;
    }

    .login-card{
      border-radius:var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(8,20,32,.92);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      padding:38px;
      text-align:left;
      position:relative;
      overflow:hidden;
    }

    .login-card::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(320px 210px at 50% 0%, rgba(25,215,234,.12), transparent 72%);
    }

    .login-inner{
      position:relative;
      z-index:1;
    }

    h1{
      margin:0 0 8px;
      font-size:32px;
      line-height:1.05;
      letter-spacing:-.045em;
      text-align:center;
    }

    .lead{
      margin:0 0 28px;
      color:var(--muted);
      font-size:15px;
      line-height:1.55;
      text-align:center;
    }

    .form-grid{
      display:grid;
      gap:18px;
    }

    .field label{
      display:block;
      margin:0 0 8px;
      color:#edf4fa;
      font-size:14px;
      font-weight:750;
    }

    .input-wrap{
      position:relative;
    }

    .field-icon{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      width:19px;
      height:19px;
      display:grid;
      place-items:center;
      color:#bfcddb;
      pointer-events:none;
    }

    .field input{
      width:100%;
      height:56px;
      border-radius:14px;
      border:1px solid rgba(192,216,232,.20);
      background:rgba(3,12,21,.66);
      color:var(--text);
      outline:none;
      padding:0 16px 0 48px;
      transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .field input::placeholder{
      color:#8797a8;
    }

    .field input:focus{
      border-color:rgba(25,215,234,.74);
      background:rgba(3,12,21,.86);
      box-shadow:0 0 0 4px rgba(25,215,234,.09);
    }

    .form-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-top:2px;
      flex-wrap:wrap;
    }

    .remember{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:#d5e0eb;
      font-size:14px;
      cursor:pointer;
      user-select:none;
    }

    .remember input{
      appearance:none;
      width:18px;
      height:18px;
      margin:0;
      border-radius:5px;
      border:1px solid rgba(192,216,232,.38);
      background:rgba(255,255,255,.03);
      display:grid;
      place-items:center;
      cursor:pointer;
    }

    .remember input:checked{
      border-color:rgba(25,215,234,.84);
      background:linear-gradient(135deg, #20def0 0%, #14c7e1 100%);
    }

    .remember input:checked::after{
      content:"";
      width:8px;
      height:4px;
      border-left:2px solid #00141d;
      border-bottom:2px solid #00141d;
      transform:rotate(-45deg) translateY(-1px);
    }

    .forgot{
      color:var(--cyan);
      font-size:14px;
      font-weight:750;
    }

    .forgot:hover{
      text-decoration:underline;
      text-underline-offset:3px;
    }

    .btn{
      width:100%;
      height:58px;
      border:0;
      border-radius:14px;
      margin-top:8px;
      color:#00121a;
      background:linear-gradient(135deg, #20def0 0%, #14c7e1 100%);
      box-shadow:0 18px 40px rgba(17,207,230,.18);
      cursor:pointer;
      font-weight:900;
      font-size:16px;
      transition:transform .2s ease, box-shadow .2s ease;
    }

    .btn:hover{
      transform:translateY(-1px);
      box-shadow:0 24px 50px rgba(17,207,230,.26);
    }

    .signup{
      margin:22px 0 0;
      text-align:center;
      color:var(--muted);
      font-size:14px;
    }

    .signup a{
      color:var(--cyan);
      font-weight:800;
    }

    .signup a:hover{
      text-decoration:underline;
      text-underline-offset:3px;
    }

    .footer-note{
      margin-top:22px;
      color:#9daebe;
      font-size:12px;
      text-align:center;
    }

    @media (max-width:640px){
      .page{
        padding:22px 14px;
      }

      .brand{
        margin-bottom:22px;
        gap:12px;
      }

      .logo-coin{
        width:52px;
        height:52px;
        font-size:16px;
      }

      .brand-copy strong,
      .brand-copy small{
        font-size:18px;
      }

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

      h1{
        font-size:28px;
      }

      .lead{
        margin-bottom:24px;
        font-size:14px;
      }

      .field input{
        height:54px;
      }

      .btn{
        height:56px;
      }

      .form-meta{
        align-items:flex-start;
        flex-direction:column;
      }
    }

    @media (max-width:420px){
      .page{
        padding:18px 12px;
      }

      .brand{
        width:100%;
        justify-content:center;
      }

      .login-card{
        padding:24px 16px;
      }

      h1{
        font-size:26px;
      }

      .lead{
        font-size:13px;
      }

      .field label,
      .remember,
      .forgot,
      .signup{
        font-size:13px;
      }
    }