/* ==========================================================================
   LISTOOLAI USERS
   ========================================================================== */

:root{
    --u-bg:#050b14;
    --u-panel:#0e1728;
    --u-panel-2:#111d31;
    --u-border:#21314d;

    --u-text:#f8fbff;
    --u-muted:#9fb5d6;

    --u-blue:#38bdf8;
    --u-indigo:#6366f1;

    --u-good:#22c55e;
    --u-warn:#facc15;
    --u-danger:#fb7185;
}

/* ==========================================================================
   RESET
   ========================================================================== */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    background:
        radial-gradient(circle at top right,#151a3a 0,#050b14 40%,#030712 100%);
    color:var(--u-text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

/* ==========================================================================
   GLOBAL LAYOUT
   ========================================================================== */

.users-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
}

.users-main{
    min-width:0;
}

.users-content{
    padding:42px 44px 70px;
    max-width:1320px;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.users-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    padding:28px 20px;
    background:linear-gradient(180deg,#0d1628,#07101e);
    border-right:1px solid var(--u-border);
    overflow:auto;
}

.users-brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:34px;
}

.users-brand-mark{
    width:58px;
    height:58px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--u-indigo),var(--u-blue));
    display:grid;
    place-items:center;
    font-weight:950;
    color:#fff;
}

.users-brand-title{
    font-size:28px;
    font-weight:950;
    line-height:1;
}

.users-brand-sub{
    color:var(--u-muted);
    font-size:14px;
    margin-top:6px;
}

.users-nav{
    display:grid;
    gap:10px;
}

.users-nav a{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:52px;
    padding:13px 16px;
    border-radius:18px;
    color:#dbeafe;
    font-weight:800;
    border:1px solid transparent;
    white-space:nowrap;
    transition:.18s ease;
}

.users-nav a:hover{
    background:#111d31;
    border-color:var(--u-border);
}

.users-nav a.active{
    background:linear-gradient(135deg,var(--u-indigo),var(--u-blue));
    color:#fff;
    box-shadow:0 18px 48px rgba(56,189,248,.18);
}

.users-nav-ico{
    width:24px;
    display:inline-grid;
    place-items:center;
    flex:0 0 24px;
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */

.users-topbar{
    height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 36px;
    border-bottom:1px solid var(--u-border);
    background:rgba(7,13,25,.88);
    backdrop-filter:blur(12px);
    position:sticky;
    top:0;
    z-index:5;
}

.users-topbar h1{
    margin:0;
    font-size:20px;
}

.users-topbar p{
    margin:5px 0 0;
    color:var(--u-muted);
}

.users-top-actions{
    display:flex;
    gap:12px;
    align-items:center;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.users-hero{
    border:1px solid var(--u-border);
    border-radius:32px;
    padding:42px;
    background:
        linear-gradient(
            135deg,
            rgba(250,204,21,.08),
            rgba(17,29,49,.96) 36%,
            rgba(15,23,42,.95)
        );
    margin-bottom:28px;
}

.users-eyebrow{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(56,189,248,.12);
    border:1px solid rgba(56,189,248,.35);
    color:#bae6fd;
    font-weight:950;
    margin-bottom:18px;
}

.users-hero h2{
    font-size:clamp(38px,5vw,70px);
    line-height:1;
    margin:0 0 14px;
    letter-spacing:-.05em;
}

.users-hero p{
    font-size:20px;
    color:#bdd1f2;
    margin:0;
    max-width:760px;
    line-height:1.65;
}

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

.users-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.users-grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

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

.users-card{
    background:rgba(15,23,42,.86);
    border:1px solid rgba(148,163,184,.18);
    border-radius:26px;
    padding:26px;
    box-shadow:0 18px 50px rgba(0,0,0,.18);
}

.users-card h3{
    margin:0 0 10px;
    font-size:26px;
    color:#fff;
}

.users-card p{
    color:#bdd1f2;
    line-height:1.65;
}

/* ==========================================================================
   STATS
   ========================================================================== */

.users-stat{
    font-size:42px;
    font-weight:950;
    margin:16px 0 4px;
}

.users-muted{
    color:var(--u-muted);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.users-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:12px 18px;
    border-radius:16px;
    border:1px solid var(--u-border);
    background:#17243a;
    color:#fff;
    font-weight:900;
    cursor:pointer;
    transition:.18s ease;
}

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

.users-btn.primary{
    background:linear-gradient(135deg,var(--u-indigo),var(--u-blue));
    border:0;
}

.users-btn.yellow{
    background:#facc15;
    color:#07101e;
    border:0;
}

.users-btn.danger{
    background:#3b1621;
    color:#fecdd3;
    border-color:#7f1d1d;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

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

.users-field label{
    display:block;
    margin-bottom:8px;
    font-weight:900;
}

.users-input,
.users-textarea,
.users-select{
    width:100%;
    border:1px solid var(--u-border);
    background:#07101e;
    color:#fff;
    border-radius:18px;
    padding:15px 16px;
    font:inherit;
}

.users-input:focus,
.users-textarea:focus,
.users-select:focus{
    outline:none;
    border-color:rgba(56,189,248,.55);
    box-shadow:0 0 0 4px rgba(56,189,248,.10);
}

.users-textarea{
    min-height:140px;
    resize:vertical;
}

/* ==========================================================================
   FLASH
   ========================================================================== */

.users-flash{
    border-radius:18px;
    padding:14px 16px;
    margin:0 0 20px;
    font-weight:800;
}

.users-flash.success{
    background:rgba(34,197,94,.12);
    border:1px solid rgba(34,197,94,.35);
    color:#bbf7d0;
}

.users-flash.error{
    background:rgba(251,113,133,.12);
    border:1px solid rgba(251,113,133,.35);
    color:#fecdd3;
}

/* ==========================================================================
   EMPTY / LIST
   ========================================================================== */

.users-empty{
    border:1px dashed #334766;
    border-radius:24px;
    padding:30px;
    text-align:center;
    color:#bdd1f2;
    background:rgba(7,16,30,.55);
}

.users-list{
    display:grid;
    gap:14px;
}

.users-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px;
    border:1px solid var(--u-border);
    border-radius:20px;
    background:#0b1424;
}

.users-row strong{
    color:#fff;
}

.users-row p{
    margin:6px 0 0;
    color:#9aa7ba;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.users-badge{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(56,189,248,.14);
    color:#bae6fd;
    font-weight:900;
    font-size:13px;
}

.users-pill{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(34,197,94,.13);
    border:1px solid rgba(34,197,94,.24);
    color:#bbf7d0;
    font-size:12px;
    font-weight:800;
}

/* ==========================================================================
   PAGE HEAD
   ========================================================================== */

.users-page-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    margin-bottom:22px;
}

.users-page-head h2{
    margin:0;
    font-size:28px;
    color:#fff;
}

.users-page-head p{
    margin:8px 0 0;
    color:#98a6bd;
}

/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */

.user-login-page-wrap{
    min-height:100vh;
    background:
        radial-gradient(circle at 18% 12%, rgba(0,194,255,.12), transparent 34%),
        radial-gradient(circle at 84% 12%, rgba(91,76,255,.22), transparent 38%),
        linear-gradient(180deg,#07111f 0%,#050914 100%);
    color:#fff;
    padding:120px 20px 130px;
}

.user-login-shell{
    max-width:1280px;
    margin:0 auto;
}

.user-login-hero{
    text-align:center;
    padding:70px 40px;
    border-radius:34px;
    border:1px solid rgba(143,166,255,.16);
    background:
        radial-gradient(circle at 10% 15%, rgba(255,167,38,.12), transparent 30%),
        linear-gradient(135deg, rgba(18,31,56,.9), rgba(32,38,86,.9));
    box-shadow:0 32px 90px rgba(0,0,0,.34);
    margin-bottom:44px;
}

.user-login-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border-radius:999px;
    color:#fff0a8;
    background:rgba(255,193,7,.10);
    border:1px solid rgba(255,193,7,.32);
    font-weight:950;
    margin-bottom:32px;
}

.user-login-hero h1{
    margin:0 0 22px;
    font-size:clamp(48px,7vw,92px);
    line-height:.95;
    letter-spacing:-.06em;
}

.user-login-hero p{
    max-width:860px;
    margin:0 auto;
    color:#aebfe0;
    font-size:23px;
    line-height:1.7;
}

.user-login-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(360px,.9fr);
    gap:36px;
    align-items:start;
}

.user-login-info,
.user-login-card{
    border-radius:30px;
    border:1px solid rgba(143,166,255,.16);
    background:linear-gradient(145deg, rgba(18,31,56,.92), rgba(8,13,26,.94));
    box-shadow:0 28px 80px rgba(0,0,0,.28);
}

.user-login-info{
    padding:46px;
}

.user-login-info h2{
    margin:0 0 26px;
    font-size:38px;
    letter-spacing:-.04em;
}

.user-login-info ul{
    margin:0;
    padding-left:24px;
    color:#abc0df;
    font-size:22px;
    line-height:2;
}

.user-login-secure{
    margin-top:38px;
    padding:24px 28px;
    border-radius:20px;
    border:1px solid rgba(255,193,7,.28);
    background:rgba(255,193,7,.08);
    color:#fff0a8;
    font-size:21px;
    font-weight:950;
}

.user-login-card{
    padding:38px;
}

.user-login-card-badge{
    display:inline-flex;
    padding:10px 18px;
    border-radius:999px;
    color:#d3c3ff;
    background:rgba(117,92,255,.14);
    border:1px solid rgba(117,92,255,.32);
    font-size:14px;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:30px;
}

.user-login-card h2{
    margin:0 0 22px;
    font-size:42px;
    letter-spacing:-.05em;
}

.user-login-card p{
    margin:0 0 28px;
    color:#aebfe0;
    font-size:19px;
    line-height:1.7;
}

.user-login-error{
    margin-bottom:22px;
    padding:15px 17px;
    border-radius:16px;
    background:rgba(239,68,68,.12);
    border:1px solid rgba(239,68,68,.28);
    color:#fecaca;
    font-weight:800;
}

.user-login-field{
    margin-bottom:24px;
}

.user-login-field label{
    display:block;
    margin-bottom:12px;
    font-size:19px;
    font-weight:950;
}

.user-login-input{
    width:100%;
    height:76px;
    border-radius:19px;
    border:1px solid rgba(143,166,255,.18);
    background:rgba(3,8,18,.92);
    color:#fff;
    outline:none;
    padding:0 22px;
    font-size:18px;
}

.user-login-input:focus{
    border-color:rgba(91,76,255,.7);
    box-shadow:0 0 0 4px rgba(91,76,255,.12);
}

.user-login-submit{
    width:100%;
    height:76px;
    border:0;
    border-radius:19px;
    cursor:pointer;
    color:#fff;
    font-size:22px;
    font-weight:950;
    background:linear-gradient(135deg,#5b4cff,#35b8f5);
    box-shadow:0 24px 60px rgba(53,184,245,.24);
    transition:.18s ease;
}

.user-login-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 28px 70px rgba(91,76,255,.34);
}

.user-login-links{
    margin-top:28px;
    display:grid;
    gap:18px;
    color:#9fb3d3;
    font-size:18px;
}

.user-login-links a{
    color:#8cc8ff;
    font-weight:950;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:980px){

    .users-shell{
        grid-template-columns:1fr;
    }

    .users-sidebar{
        position:relative;
        height:auto;
    }

    .users-nav{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .users-topbar{
        position:relative;
    }

    .users-grid,
    .users-grid-2,
    .user-login-grid{
        grid-template-columns:1fr;
    }

    .users-content{
        padding:28px 20px;
    }

    .users-hero,
    .user-login-hero,
    .user-login-info,
    .user-login-card{
        padding:28px;
    }

    .user-login-hero h1{
        font-size:48px;
    }
}

@media(max-width:640px){

    .users-nav{
        grid-template-columns:1fr;
    }

    .users-topbar{
        height:auto;
        align-items:flex-start;
        flex-direction:column;
        padding:20px;
    }

    .users-top-actions{
        flex-wrap:wrap;
    }

    .users-hero h2{
        font-size:38px;
    }
}