/* ========================================
   SERVERQU CLIENT AREA
   Premium Minimal Enterprise Design
======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
    --bg:#f8fafc;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e2e8f0;

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --danger:#ef4444;

    --radius:24px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:'Inter',sans-serif;
    color:var(--text);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:30px;

    background:
    radial-gradient(circle at top left,
    rgba(37,99,235,.08) 0%,
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(59,130,246,.08) 0%,
    transparent 35%),

    #f8fafc;

    overflow-x:hidden;
    position:relative;
}

/* ==========================
   BACKGROUND GRID
========================== */

.bg-grid{
    position:fixed;
    inset:0;

    background-image:
    linear-gradient(
        rgba(15,23,42,.03) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(15,23,42,.03) 1px,
        transparent 1px
    );

    background-size:40px 40px;

    pointer-events:none;
    z-index:0;
}

.blur{
    position:fixed;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
    z-index:0;
}

.blur1{
    width:400px;
    height:400px;
    background:#60a5fa;
    opacity:.12;
    top:-150px;
    left:-150px;
}

.blur2{
    width:400px;
    height:400px;
    background:#93c5fd;
    opacity:.10;
    bottom:-150px;
    right:-150px;
}

/* ==========================
   CONTAINER
========================== */

.container{
    width:100%;
    max-width:470px;
    position:relative;
    z-index:2;
}

/* ==========================
   LOGIN CARD
========================== */

.login-box{
    background:
    rgba(255,255,255,.85);

    backdrop-filter:
    blur(25px);

    border:
    1px solid rgba(255,255,255,.9);

    border-radius:
    30px;

    padding:
    42px;

    box-shadow:
    0 10px 25px rgba(15,23,42,.03),
    0 30px 80px rgba(15,23,42,.08);
}

/* ==========================
   LOGO
========================== */

.logo{
    display:flex;
    justify-content:center;
    margin-bottom:28px;
}

.main-logo{
    width:90px;
    height:auto;
    user-select:none;
}

/* ==========================
   TITLE
========================== */

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

.title h1{
    font-size:32px;
    font-weight:700;
    letter-spacing:-1px;
    margin-bottom:10px;
    color:var(--text);
}

.title p{
    color:var(--muted);
    line-height:1.7;
    font-size:15px;
}

/* ==========================
   ERROR MESSAGE
========================== */

.error{
    background:#fef2f2;
    border:1px solid #fecaca;

    color:#dc2626;

    padding:14px 16px;

    border-radius:16px;

    font-size:14px;

    margin-bottom:20px;
}

/* ==========================
   FORM
========================== */

form{
    display:flex;
    flex-direction:column;
}

.input-group{
    margin-bottom:20px;
}

.input-group label{
    display:block;
    margin-bottom:8px;

    font-size:14px;
    font-weight:600;

    color:var(--text);
}

.input-group input{
    width:100%;
    height:56px;

    border:1px solid var(--border);

    border-radius:16px;

    background:#fff;

    padding:0 18px;

    font-size:15px;

    transition:.25s ease;
}

.input-group input::placeholder{
    color:#94a3b8;
}

.input-group input:focus{
    outline:none;

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.10);
}

/* ==========================
   BUTTON
========================== */

.button-wrapper{
    margin-top:8px;
}

.btn-17{
    width:100%;
    height:56px;

    border:none;
    border-radius:16px;

    cursor:pointer;

    background:
    linear-gradient(
    180deg,
    #3b82f6,
    #2563eb
    );

    color:#fff;

    font-size:15px;
    font-weight:600;

    transition:.25s ease;
}

.btn-17:hover{
    transform:translateY(-2px);

    box-shadow:
    0 15px 35px rgba(37,99,235,.25);
}

.btn-17:active{
    transform:translateY(0);
}

.text-container{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* ==========================
   REGISTER
========================== */

.secure{
    margin-top:22px;
    text-align:center;
}

.lock-icon{
    color:var(--muted);
    font-size:14px;
}

.lock-icon a{
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
    transition:.2s;
}

.lock-icon a:hover{
    color:#1d4ed8;
}

/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

    body{
        padding:20px;
    }

    .login-box{
        padding:34px 26px;
        border-radius:24px;
    }

    .title h1{
        font-size:28px;
    }
}

@media (max-width:480px){

    .login-box{
        padding:28px 20px;
    }

    .main-logo{
        width:80px;
    }

    .title h1{
        font-size:24px;
    }

    .title p{
        font-size:14px;
    }

    .input-group input{
        height:52px;
        font-size:14px;
    }

    .btn-17{
        height:52px;
    }
}

/* From Uiverse.io by BHARGAVPATEL1244 */ 
button {
 outline: none;
 cursor: pointer;
 border: none;
 padding: 0.9rem 2rem;
 margin: 0;
 font-family: inherit;
 font-size: inherit;
 position: relative;
 display: inline-block;
 letter-spacing: 0.05rem;
 font-weight: 700;
 font-size: 17px;
 border-radius: 500px;
 overflow: hidden;
 background: #66ff66;
 color: ghostwhite;
}

button span {
 position: relative;
 z-index: 10;
 transition: color 0.4s;
}

button:hover span {
 color: black;
}

button::before,
button::after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
}

button::before {
 content: "";
 background: #000;
 width: 120%;
 left: -10%;
 transform: skew(30deg);
 transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

button:hover::before {
 transform: translate3d(100%, 0, 0);
}


/* ==========================================
   SERVERQU HOMEPAGE BUTTON
========================================== */

.sq-back-container{
    position:fixed;
    top:24px;
    right:24px;
    z-index:9999;
}

.sq-back-button{
    width:50px;
    height:50px;

    background:#141414;

    border:1px solid rgba(255,255,255,.08);

    border-radius:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    overflow:hidden;

    transition:all .3s ease;
}

.sq-back-icon{
    color:#ffffff;

    font-size:16px;

    min-width:16px;

    transition:all .3s ease;
}

.sq-back-text{
    color:#ffffff;

    font-size:13px;
    font-weight:600;

    white-space:nowrap;

    max-width:0;

    opacity:0;

    overflow:hidden;

    transition:all .3s ease;
}

.sq-back-button:hover{
    width:145px;
    background:#2563eb;
}

.sq-back-button:hover .sq-back-icon{
    margin-left:14px;
}

.sq-back-button:hover .sq-back-text{
    max-width:100px;

    opacity:1;

    margin-left:10px;
    margin-right:16px;
}

.sq-back-button:active{
    transform:scale(.98);
}

/* Mobile */

@media (max-width:768px){

    .sq-back-container{
        top:15px;
        right:15px;
    }

    .sq-back-button{
        width:46px;
        height:46px;
    }

    .sq-back-button:hover{
        width:125px;
    }

    .sq-back-icon{
        font-size:15px;
    }

    .sq-back-text{
        font-size:12px;
    }
}