:root{

    /* ======================================================
       COLORS
       ====================================================== */

    --cc-primary:#22d3ee;
    --cc-primary-light:#38dfff;
    --cc-primary-dark:#1498cc;

    --cc-bg:#05080d;
    --cc-surface:#091018;
    --cc-surface-light:#111827;

    --cc-border:#1e293b;

    --cc-text:#ffffff;
    --cc-text-muted:#94a3b8;

    --cc-success:#10b981;
    --cc-warning:#f59e0b;
    --cc-danger:#ef4444;

    /* ======================================================
       TYPOGRAPHY
       ====================================================== */

    --cc-font:"Inter",sans-serif;

    --cc-text-xs:.75rem;
    --cc-text-sm:.875rem;
    --cc-text-md:1rem;
    --cc-text-lg:1.125rem;
    --cc-text-xl:1.5rem;
    --cc-text-2xl:2rem;
    --cc-text-3xl:2.5rem;

    /* ======================================================
       SPACING
       ====================================================== */

    --cc-space-1:4px;
    --cc-space-2:8px;
    --cc-space-3:12px;
    --cc-space-4:16px;
    --cc-space-5:20px;
    --cc-space-6:24px;
    --cc-space-8:32px;
    --cc-space-10:40px;

    /* ======================================================
       BORDERS
       ====================================================== */

    --cc-radius-sm:8px;
    --cc-radius-md:12px;
    --cc-radius-lg:16px;
    --cc-radius-xl:20px;

    /* ======================================================
       SHADOWS
       ====================================================== */

    --cc-shadow:

        0 20px 60px rgba(0,0,0,.45);

    --cc-glow:

        0 0 25px rgba(34,211,238,.18);

    /* ======================================================
       TRANSITIONS
       ====================================================== */

    --cc-transition:.22s ease;

}
html{

    font-family:var(--cc-font);

    color:var(--cc-text);

}

body{

    font-family:var(--cc-font);

    font-size:16px;

    line-height:1.6;

}

h1{

    font-size:var(--cc-text-3xl);

    font-weight:800;

    line-height:1.1;

}

h2{

    font-size:var(--cc-text-2xl);

    font-weight:700;

}

h3{

    font-size:var(--cc-text-xl);

    font-weight:700;

}

h4{

    font-size:var(--cc-text-lg);

    font-weight:700;

}

p{

    color:var(--cc-text-muted);

}

strong{

    color:var(--cc-text);

}

small{

    font-size:.85rem;

}
*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:var(--cc-bg);

    color:var(--cc-text);

}

.container{

    width:min(1280px,95%);

    margin:auto;

}

.grid{

    display:grid;

    gap:24px;

}

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hidden{

    display:none;

}
button,
.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:52px;

    padding:0 24px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    transition:var(--cc-transition);

}

.btn-primary{

    background:

        linear-gradient(
            135deg,
            var(--cc-primary),
            var(--cc-primary-dark)
        );

    color:white;

    box-shadow:var(--cc-glow);

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:

        0 10px 30px rgba(34,211,238,.25);

}

.btn-secondary{

    background:#111827;

    color:white;

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

}
input,
textarea,
select{

    width:100%;

    background:#101827;

    color:white;

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

    border-radius:14px;

    padding:16px;

    transition:var(--cc-transition);

}

input::placeholder,
textarea::placeholder{

    color:#64748b;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--cc-primary);

    box-shadow:

        0 0 0 4px rgba(34,211,238,.12);

}

label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}
.card{

    background:rgba(11,17,24,.72);

    backdrop-filter:blur(20px);

    border-radius:20px;

    border:1px solid rgba(34,211,238,.15);

    box-shadow:var(--cc-shadow);

    padding:32px;

}

.card-header{

    margin-bottom:24px;

}

.card-title{

    font-size:1.5rem;

    font-weight:700;

}

.card-body{

    color:var(--cc-text-muted);

}
.fade-up{

    animation:fadeUp .45s ease;

}

.fade{

    animation:fade .3s ease;

}

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hover-lift{

    transition:var(--cc-transition);

}

.hover-lift:hover{

    transform:translateY(-2px);

}
/* ==========================================================
   CENCRAFT DASHBOARD
   ========================================================== */

body{

    background:#f8fafc;

    color:#0f172a;

}

.pf-c-page{

    background:#f8fafc;

}

.pf-c-card{

    border-radius:16px;

}

h1,
h2,
h3,
h4,
h5{

    color:#0f172a;

}

input,
textarea,
select{

    color:#0f172a;

}

input::placeholder{

    color:#64748b;

}
Current








/* ==========================================================
   CENCRAFT AUTHENTIK v2
   ========================================================== */

:root{

    /* =======================================================
       CENCRAFT BRAND
       ======================================================= */

    --ak-accent:#22d3ee;

    --ak-dark-background:#05080d;
    --ak-dark-background-light:#091018;
    --ak-dark-background-lighter:#111827;

    --ak-global--background-image:
        linear-gradient(
            rgba(5,8,13,.72),
            rgba(5,8,13,.84)
        ),
        url("https://css.cencraft.net/images/login-bg.webp");

    --ak-font-family-heading:"Inter",sans-serif;
    --ak-font-family-sans-serif:"Inter",sans-serif;

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

    --ak-c-login__main--BackgroundColor:rgba(11,17,24,.74);

    --ak-c-login__main--Color:#F8FAFC;

    --ak-c-login__main--BoxShadow:
        0 25px 70px rgba(0,0,0,.55),
        0 0 35px rgba(34,211,238,.10);

    --ak-c-login__main-ColumnWidth:520px;

    /* =======================================================
       PATTERNFLY
       ======================================================= */

    --pf-global--primary-color--100:#22d3ee;
    --pf-global--primary-color--200:#06b6d4;
    --pf-global--primary-color--dark-100:#0891b2;

    --pf-global--BackgroundColor--100:#05080d;
    --pf-global--BackgroundColor--200:#091018;

    --pf-global--Color--100:#ffffff;
    --pf-global--Color--200:#cbd5e1;
    --pf-global--Color--300:#94a3b8;

    --pf-global--BorderColor--100:rgba(34,211,238,.16);

    --pf-global--BorderRadius--sm:14px;
    --pf-global--BorderRadius--lg:20px;

    --pf-global--link--Color:#22d3ee;

}


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

body{

    background:var(--ak-global--background-image);

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    color:#ffffff;

}


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

.pf-c-login__main{

    background:rgba(11,17,24,.72);

    backdrop-filter:blur(20px);

    border:1px solid rgba(34,211,238,.15);

    border-radius:20px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.55),
        0 0 35px rgba(34,211,238,.08);

    overflow:hidden;

}


/* ==========================================================
   BRAND
   ========================================================== */

.pf-c-brand{

    padding-top:42px;

    padding-bottom:16px;

}

.pf-c-brand img{

    width:270px;

    max-width:100%;

}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1{

    color:#ffffff;

    font-size:2.5rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:12px;

}

p{

    color:#94a3b8;

}


/* ==========================================================
   LABELS
   ========================================================== */

label{

    color:#e2e8f0;

    font-weight:600;

}


/* ==========================================================
   INPUTS
   ========================================================== */

input{

    background:#101827 !important;

    color:#ffffff !important;

    border:1px solid #1e293b !important;

    border-radius:14px !important;

    height:56px;

    padding:0 18px;

    transition:all .2s ease;

}

input::placeholder{

    color:#64748b;

}

input:focus{

    border-color:#22d3ee !important;

    box-shadow:
        0 0 0 4px rgba(34,211,238,.10),
        0 0 18px rgba(34,211,238,.20);

}


/* Make typed text white */

input,
input:focus,
input:active{

    color:#ffffff !important;

    -webkit-text-fill-color:#ffffff !important;

}


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

button.pf-m-primary{

    height:58px;

    border:none;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #38dfff,
            #1498cc
        ) !important;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    transition:all .22s ease;

    box-shadow:
        0 0 20px rgba(34,211,238,.18);

}

button.pf-m-primary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 30px rgba(34,211,238,.28);

}


/* ==========================================================
   LINKS
   ========================================================== */

a{

    color:#22d3ee !important;

    transition:.2s;

}

a:hover{

    color:#67e8f9 !important;

}


/* ==========================================================
   FOOTER
   ========================================================== */

.pf-c-login__footer{

    opacity:.45;

}


/* ==========================================================
   ANIMATION
   ========================================================== */

.pf-c-login__main{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(14px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   Remove "Powered by Authentik"
   ========================================== */

.pf-c-login__footer{
    display:none !important;
}