:root{
      --ink:#07090f;
      --ink-2:#0b0f19;
      --panel:rgba(17,22,35,.72);
      --line:rgba(255,255,255,.11);
      --text:#f5f7fb;
      --muted:#98a2b4;
      --cyan:#8ff7ff;
      --blue:#6d8dff;
      --violet:#ad7dff;
      --lime:#bdfb8a;
      --danger:#ff7c9d;
      --radius:28px;
      --ease:cubic-bezier(.2,.75,.2,1);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;background:var(--ink)}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%,rgba(109,141,255,.13),transparent 28rem),
        radial-gradient(circle at 90% 22%,rgba(173,125,255,.10),transparent 28rem),
        linear-gradient(180deg,#07090f 0%,#090c14 45%,#07090f 100%);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      -webkit-font-smoothing:antialiased;
      min-height:100svh;
      display:grid;
      place-items:center;
      padding:24px 16px;
      overflow-x:hidden;
    }

    .noise{
      position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
      mix-blend-mode:soft-light;
    }

    .grid-bg::before{
      content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;z-index:0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
      background-size:72px 72px;
      -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
      mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
    }

    .auth-wrap{
      position:relative;
      z-index:1;
      width:100%;
      max-width:440px;
    }

    .brand{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:11px;
      margin-bottom:32px;
      font-weight:700;
      letter-spacing:-.03em;
      font-size:20px;
    }
    .brand-mark{width:38px;height:38px;position:relative;display:grid;place-items:center}
    .brand-mark::before,.brand-mark::after{content:"";position:absolute;border:1px solid rgba(143,247,255,.65);transform:rotate(45deg);border-radius:7px}
    .brand-mark::before{width:22px;height:22px;box-shadow:0 0 24px rgba(143,247,255,.18)}
    .brand-mark::after{width:10px;height:10px;background:var(--cyan);border:0;box-shadow:0 0 18px var(--cyan)}

    .auth-card{
      position:relative;
      border:1px solid var(--line);
      background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:0 26px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05);
      backdrop-filter:blur(24px);
      padding:36px 32px 32px;
    }

    .tabs{
      display:flex;
      gap:8px;
      padding:6px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(13,17,27,.64);
      backdrop-filter:blur(24px);
      border-radius:999px;
      margin-bottom:32px;
    }
    .tab{
      flex:1;
      padding:11px 16px;
      border-radius:999px;
      border:0;
      background:transparent;
      color:#9da7b9;
      font-size:13px;
      font-weight:600;
      cursor:pointer;
      transition:.2s;
    }
    .tab.active{
      color:#fff;
      background:rgba(255,255,255,.07);
    }
    .form.active{display:block;animation:fadeIn .35s var(--ease)}
    @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}}

    .form-group{margin-bottom:18px}
    .form-label{
      display:block;
      color:#c7d0e0;
      font:600 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
      letter-spacing:.16em;
      text-transform:uppercase;
      margin-bottom:8px;
    }
    .input-wrap{position:relative}
    .form-input{
      width:100%;
      min-height:48px;
      padding:0 16px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.045);
      color:var(--text);
      font-size:14px;
      transition:.25s var(--ease);
    }
    .form-input:focus{
      outline:none;
      border-color:rgba(143,247,255,.4);
      background:rgba(255,255,255,.06);
      box-shadow:0 0 0 3px rgba(143,247,255,.08);
    }
    .form-input::placeholder{color:#5a6578}

    .password-toggle{
      position:absolute;
      right:12px;
      top:50%;
      transform:translateY(-50%);
      width:32px;
      height:32px;
      border:0;
      background:transparent;
      color:#7f8ba0;
      cursor:pointer;
      display:grid;
      place-items:center;
      border-radius:8px;
      transition:.2s;
    }
    .password-toggle:hover{
      color:#c7d0e0;
      background:rgba(255,255,255,.06);
    }
    .password-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

    .form-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin:20px 0 24px;
      font-size:13px;
    }
    .checkbox{
      display:flex;
      align-items:center;
      gap:8px;
      color:#9ba5b8;
      cursor:pointer;
    }
    .checkbox input{
      width:16px;
      height:16px;
      accent-color:var(--cyan);
      cursor:pointer;
    }
    .link{
      color:var(--cyan);
      text-decoration:none;
      transition:.2s;
    }
    .link:hover{color:#fff;text-shadow:0 0 12px rgba(143,247,255,.4)}

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border:0;
      cursor:pointer;
      width:100%;
      min-height:48px;
      padding:0 20px;
      border-radius:999px;
      font-weight:700;
      font-size:13px;
      letter-spacing:-.01em;
      transition:transform .25s var(--ease),box-shadow .25s var(--ease);
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{
      color:#071015;
      background:linear-gradient(135deg,#fff 0%,#b8faff 55%,#b8c8ff 100%);
      box-shadow:0 14px 36px rgba(143,247,255,.14);
    }
    .btn-primary:hover{box-shadow:0 18px 42px rgba(143,247,255,.22)}
    .arrow{width:18px;height:18px;transition:transform .25s}.btn:hover .arrow{transform:translateX(3px)}

    .divider{
      display:flex;
      align-items:center;
      gap:12px;
      margin:28px 0;
      color:#536076;
      font:600 10px/1 ui-monospace,monospace;
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .divider::before,.divider::after{
      content:"";
      flex:1;
      height:1px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    }

    .social-btn{
      width:100%;
      min-height:46px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.025);
      color:#e7ebf3;
      font-size:13px;
      font-weight:600;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      transition:.25s var(--ease);
    }
    .social-btn:hover{
      background:rgba(255,255,255,.045);
      border-color:rgba(143,247,255,.24);
      transform:translateY(-2px);
    }

    .footer-text{
      text-align:center;
      margin-top:28px;
      color:#69758a;
      font-size:12px;
      line-height:1.6;
    }

    @media(max-width:560px){
      .auth-card{padding:28px 24px 24px}
      .brand{margin-bottom:24px}
      .tabs{margin-bottom:28px}
    }
    /*=========================
    REGISTER HEADER
=========================*/

.register-header{
    text-align:center;
    margin-bottom:35px;
}

.register-badge{
    display:inline-block;
    padding:8px 18px;
    margin-bottom:18px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    color:#9df8ff;

    background:rgba(143,247,255,.08);
    border:1px solid rgba(143,247,255,.25);

    box-shadow:
        0 0 20px rgba(143,247,255,.12),
        inset 0 0 12px rgba(143,247,255,.08);

    backdrop-filter:blur(10px);
}

.register-header h2{
    margin:0;
    font-size:34px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-1px;

    background:linear-gradient(
        90deg,
        #ffffff,
        #8ff7ff,
        #7da8ff,
        #c18dff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.register-header p{
    max-width:360px;
    margin:16px auto 0;
    color:#9ca9bc;
    font-size:15px;
    line-height:1.8;
}
.register-divider{
    width:80px;
    height:4px;
    margin:25px auto 35px;
    border-radius:20px;

    background:linear-gradient(
        90deg,
        #8ff7ff,
        #6d8dff,
        #ad7dff
    );

    box-shadow:
        0 0 20px rgba(143,247,255,.45);
}
.register-footer{
    text-align:center;
    margin-top:28px;
    color:#95a1b3;
    font-size:14px;
}

.register-footer a{
    color:#8ff7ff;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.register-footer a:hover{
    color:#ffffff;
    text-shadow:0 0 15px rgba(143,247,255,.6);
}

/******************************************Success*************************************
**************************************************************************************/

/*==============================
  Credentials Card
===============================*/

.credentials-table{
    width:100%;
    max-width:450px;
    margin:25px auto;
    padding:18px;
    background:linear-gradient(145deg,#ffffff,#f6f9fc);
    border:1px solid #e8eef5;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;
}

.credentials-table::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:5px;
    height:100%;
    background:linear-gradient(to bottom,#0ea5e9,#10b981);
}

.credentials-table .table-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 18px;
    margin-bottom:12px;
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:14px;
    transition:.35s ease;
}

.credentials-table .table-row:last-child{
    margin-bottom:0;
}

.credentials-table .table-row:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(16,185,129,.15);
    border-color:#10b981;
}

.credentials-table .table-row span{
    font-size:15px;
    font-weight:600;
    color:#64748b;
    letter-spacing:.4px;
}

.credentials-table .table-row strong{
    font-size:16px;
    font-weight:700;
    color:#0f172a;
    background:linear-gradient(135deg,#0ea5e9,#10b981);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    word-break:break-word;
    text-align:right;
}

/* Mobile Responsive */
@media(max-width:576px){

    .credentials-table{
        padding:15px;
    }

    .credentials-table .table-row{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        padding:15px;
    }

    .credentials-table .table-row strong{
        text-align:left;
        font-size:15px;
    }
}