: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;}