@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

:root{
  --bg:#050813;
  --bg-soft:#080c19;
  --surface:#101626;
  --surface-2:#151c31;
  --surface-3:#1b2440;
  --glass:rgba(17,23,39,.78);
  --glass-2:rgba(24,30,51,.68);
  --line:rgba(255,255,255,.105);
  --line-strong:rgba(255,255,255,.16);
  --text:#f8fbff;
  --soft:#ccd6ee;
  --muted:#95a3c4;
  --muted2:#687693;
  --cyan:#18d8ff;
  --blue:#4d8dff;
  --violet:#8a45ff;
  --green:#33e6a1;
  --amber:#ffca57;
  --red:#ff5f7e;
  --shadow:0 24px 70px rgba(0,0,0,.40);
  --radius:24px;
  --sidebar:260px;
}

*{box-sizing:border-box}
*::selection{background:rgba(24,216,255,.28);color:#fff}

html{
  scrollbar-width:thin;
  scrollbar-color:#7142ff #080c19;
}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#070b16;border-radius:999px}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--violet),var(--cyan));
  border-radius:999px;
  border:3px solid #070b16;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#9e62ff,#42e6ff)}

body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(138,69,255,.32), transparent 36%),
    radial-gradient(circle at 84% 0%, rgba(24,216,255,.12), transparent 30%),
    radial-gradient(circle at 76% 84%, rgba(51,230,161,.08), transparent 30%),
    linear-gradient(135deg,#060914 0%,#050711 58%,#080713 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 82%);
  z-index:-1;
}

a{color:inherit}

button,input,select,textarea{
  font:inherit;
  -webkit-appearance:none;
  appearance:none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0px 1000px #141b2c inset;
  transition:background-color 9999s ease-in-out 0s;
}

/* LOGIN */
body.login-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:
    linear-gradient(90deg,rgba(4,7,14,.36),rgba(4,7,14,.92)),
    url('../img/cpn-bg.jpg') left center/cover no-repeat,
    #05070d;
}

.login-card{
  width:100%;
  max-width:424px;
  padding:38px;
  border-radius:32px;
  background:linear-gradient(180deg,rgba(21,27,42,.94),rgba(10,14,25,.94));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
}
.login-logo{
  display:block;
  max-width:224px;
  max-height:76px;
  object-fit:contain;
  margin:0 auto 30px;
}

/* CUSTOM FORM CONTROLS */
.form-field{position:relative;margin-bottom:16px}
.form-field i{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--cyan);
  opacity:.95;
  z-index:2;
}
.input,
select,
textarea,
.form-field input{
  width:100%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));
  color:var(--text);
  outline:none;
  font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.form-field input{
  height:58px;
  padding:0 18px 0 48px;
}
.input,select{height:54px;padding:0 16px}
textarea{min-height:118px;padding:16px;resize:vertical;line-height:1.55}

.input::placeholder,
textarea::placeholder,
.form-field input::placeholder{color:#aab4cc}

.input:focus,
select:focus,
textarea:focus,
.form-field input:focus{
  border-color:rgba(24,216,255,.58);
  box-shadow:0 0 0 4px rgba(24,216,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.055));
}

.select-shell{position:relative}
.select-shell::after{
  content:"\\F282";
  font-family:"bootstrap-icons";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--cyan);
  font-size:14px;
}
select{
  padding-right:48px;
  cursor:pointer;
  color:#f7faff;
}
select option{
  background:#101626;
  color:#fff;
}

label{
  display:block;
  color:#cbd6ef;
  font-weight:850;
  font-size:13px;
  margin-bottom:8px;
}

.btn-primary,
.btn,
button{
  -webkit-appearance:none;
  appearance:none;
}

.btn-primary{
  width:100%;
  height:56px;
  border:0;
  border-radius:18px;
  color:#fff;
  font-weight:900;
  letter-spacing:.01em;
  cursor:pointer;
  background:linear-gradient(135deg,var(--violet),#6535d9 45%,#1ecdf8);
  box-shadow:0 16px 34px rgba(105,62,255,.26);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover{transform:translateY(-1px);filter:saturate(1.15);box-shadow:0 20px 42px rgba(105,62,255,.36)}
.btn-primary:active{transform:translateY(1px) scale(.99)}

.custom-alert,
.alert{
  margin:0 0 16px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,95,126,.14),rgba(255,95,126,.05));
  border:1px solid rgba(255,95,126,.30);
  color:#ffdce4;
  font-size:14px;
  box-shadow:0 12px 30px rgba(255,95,126,.08);
}
.custom-alert.info{
  background:linear-gradient(135deg,rgba(24,216,255,.12),rgba(24,216,255,.04));
  border-color:rgba(24,216,255,.24);
  color:#c5f7ff;
}

/* APP LAYOUT */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  background:rgba(8,12,25,.88);
  border-right:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  z-index:30;
  padding:24px 20px;
  box-shadow:16px 0 50px rgba(0,0,0,.22);
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  margin-bottom:24px;
}
.brand img{max-width:196px;max-height:56px;object-fit:contain}

.nav{display:grid;gap:10px}
.nav a{
  display:flex;
  align-items:center;
  gap:12px;
  color:#cdd5ec;
  text-decoration:none;
  padding:15px 16px;
  border-radius:17px;
  font-weight:800;
  font-size:14px;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.nav a:hover,.nav a.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(126,75,255,.40),rgba(24,216,255,.12));
  border-color:rgba(255,255,255,.10);
  transform:translateX(2px);
}
.nav i{font-size:18px;color:#a8b3ff}
.main{
  margin-left:var(--sidebar);
  width:calc(100% - var(--sidebar));
  padding:34px 34px 60px;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:26px;
}
.eyebrow{color:var(--cyan);font-weight:950;font-size:12px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:8px}
h1{margin:0;font-size:34px;letter-spacing:-.04em;line-height:1.05}
.subtext{color:var(--muted);margin:10px 0 0;font-size:15px;max-width:760px}
.user-pill{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.avatar{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  font-weight:950;
}
.user-pill small{display:block;color:var(--muted);font-size:12px}
.logout{
  color:#fff;
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.07);
}

/* CARDS AND CONTENT */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.content-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:20px}

.card{
  background:linear-gradient(180deg,var(--glass),rgba(11,15,27,.76));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.055);
  padding:24px;
}
.hero-card{
  position:relative;
  overflow:hidden;
  min-height:250px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
  align-items:center;
}
.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 70% 35%,rgba(24,216,255,.12),transparent 34%);
  pointer-events:none;
}
.hero-card > *{position:relative;z-index:1}
.hero-card img{width:100%;max-height:230px;object-fit:contain;filter:drop-shadow(0 30px 50px rgba(0,0,0,.28))}
.hero-title{font-size:30px;line-height:1.08;letter-spacing:-.04em;margin:0 0 12px}
.hero-copy{color:var(--muted);line-height:1.65;margin:0 0 18px}

.stat-card{position:relative;overflow:hidden;min-height:154px}
.stat-card::after{
  content:"";position:absolute;inset:auto -30px -40px auto;
  width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(24,216,255,.14),transparent 70%);
}
.stat-icon{
  width:48px;height:48px;border-radius:18px;
  display:grid;place-items:center;
  color:#07101b;
  background:linear-gradient(135deg,var(--cyan),#85f5ff);
  font-size:24px;margin-bottom:18px;
}
.stat-label{color:var(--muted);font-size:14px;font-weight:850}
.stat-number{font-size:38px;font-weight:950;letter-spacing:-.05em;margin-top:4px}
.stat-meta{color:var(--muted2);font-size:12px;margin-top:8px}

.panel-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.panel-title h2{margin:0;font-size:22px;letter-spacing:-.025em}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 11px;border-radius:999px;
  background:rgba(24,216,255,.09);
  color:#a8f3ff;border:1px solid rgba(24,216,255,.18);
  font-size:12px;font-weight:950;
}
.table-wrap{
  overflow:auto;
  border-radius:18px;
}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{text-align:left;padding:15px 13px;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
th{color:#aab8ff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.025)}
td{color:#e6ebff}
tr:hover td{background:rgba(255,255,255,.025)}

.empty{
  padding:34px;
  text-align:center;
  color:var(--muted);
  border:1px dashed rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
  font-weight:850;
  font-size:13px;
  cursor:pointer;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.btn.cyan{background:rgba(24,216,255,.11);color:#a8f3ff;border-color:rgba(24,216,255,.18)}
.btn.green{background:rgba(51,230,161,.11);color:#bcffe5;border-color:rgba(51,230,161,.18)}
.btn.amber{background:rgba(255,202,87,.10);color:#ffe2a0;border-color:rgba(255,202,87,.20)}

.status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:950;padding:7px 10px;border-radius:999px;
}
.status.pending{background:rgba(255,202,87,.12);color:#ffe2a0}
.status.done,.status.active{background:rgba(51,230,161,.12);color:#bcffe5}
.status.failed{background:rgba(255,95,126,.12);color:#ffdce4}
.status.running{background:rgba(24,216,255,.12);color:#a8f3ff}
.level-security{color:#a8f3ff}
.level-info{color:#bcffe5}
.level-warning{color:#ffe2a0}
.level-error{color:#ffdce4}

.form-card form{display:grid;gap:14px}
.mini-list{display:grid;gap:12px}
.mini-item{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
.mini-item strong{display:block;margin-bottom:6px}
.mini-item span{color:var(--muted);font-size:13px;line-height:1.5}

/* CUSTOM DROPDOWN */
.custom-dropdown{position:relative}
.custom-dropdown-toggle{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));
  color:#fff;
  padding:0 16px;
  cursor:pointer;
}
.custom-dropdown-menu{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:20;
  padding:8px;
  border-radius:18px;
  background:#11182a;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 22px 50px rgba(0,0,0,.38);
}
.custom-dropdown.open .custom-dropdown-menu{display:grid;gap:6px}
.custom-dropdown-option{
  padding:12px 12px;
  border-radius:13px;
  cursor:pointer;
  color:#dce5ff;
}
.custom-dropdown-option:hover{
  background:linear-gradient(135deg,rgba(138,69,255,.25),rgba(24,216,255,.10));
  color:#fff;
}

/* FAQ */
.lang-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.lang-tab{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  color:#dce6ff;
  padding:11px 15px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
}
.lang-tab.active{
  background:linear-gradient(135deg,rgba(138,69,255,.42),rgba(24,216,255,.18));
  border-color:rgba(24,216,255,.25);
  color:#fff;
}
.faq-list{display:grid;gap:12px}
.faq-item{
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.038);
}
.faq-question{
  width:100%;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 18px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-weight:950;
  text-align:left;
}
.faq-question i{color:var(--cyan);transition:transform .18s ease}
.faq-answer{
  display:none;
  padding:0 18px 18px;
  color:var(--muted);
  line-height:1.65;
}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-question i{transform:rotate(180deg)}

@media(max-width:1100px){
  .content-grid,.hero-card{grid-template-columns:1fr}
}
@media(max-width:980px){
  :root{--sidebar:86px}
  .sidebar{padding:18px 12px}
  .brand img{max-width:58px}
  .nav a span{display:none}
  .nav a{justify-content:center;padding:16px 10px}
  .main{padding:26px 18px 48px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .topbar{flex-direction:column}
}


/* SYSTEM INTELLIGENCE PRO */
.system-health-grid{
  display:grid;
  gap:14px;
}

.health-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:15px;
  min-height:92px;
  padding:16px;
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035)),
    radial-gradient(circle at 90% 20%,rgba(24,216,255,.10),transparent 36%);
  border:1px solid rgba(255,255,255,.105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 18px 38px rgba(0,0,0,.14);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.health-card:hover{
  transform:translateY(-2px);
  border-color:rgba(24,216,255,.24);
  background:
    linear-gradient(135deg,rgba(255,255,255,.095),rgba(255,255,255,.045)),
    radial-gradient(circle at 90% 20%,rgba(24,216,255,.16),transparent 38%);
}

.health-icon{
  width:56px;
  height:56px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:25px;
  color:#06111c;
  background:linear-gradient(135deg,#18d8ff,#8df7ff);
  box-shadow:0 14px 34px rgba(24,216,255,.20);
}

.health-icon.logs{
  background:linear-gradient(135deg,#8a45ff,#c9a6ff);
  box-shadow:0 14px 34px rgba(138,69,255,.22);
}

.health-icon.backups{
  background:linear-gradient(135deg,#33e6a1,#b7ffe3);
  box-shadow:0 14px 34px rgba(51,230,161,.18);
}

.health-icon.php{
  background:linear-gradient(135deg,#ffca57,#ffe8a8);
  box-shadow:0 14px 34px rgba(255,202,87,.18);
}

.health-content strong{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  margin-bottom:6px;
}

.health-content span{
  display:block;
  color:#9da8c2;
  font-size:13px;
  line-height:1.45;
}

.health-status{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  min-width:86px;
}

.health-dot{
  width:11px;
  height:11px;
  border-radius:99px;
  background:#33e6a1;
  box-shadow:0 0 0 5px rgba(51,230,161,.10), 0 0 22px rgba(51,230,161,.65);
}

.health-dot.warning{
  background:#ffca57;
  box-shadow:0 0 0 5px rgba(255,202,87,.10), 0 0 22px rgba(255,202,87,.65);
}

.health-label{
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#bcffe5;
}

.health-label.warning{
  color:#ffe2a0;
}

.health-meter{
  width:100%;
  height:7px;
  border-radius:99px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
  margin-top:10px;
}

.health-meter span{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#33e6a1,#18d8ff);
  box-shadow:0 0 18px rgba(24,216,255,.30);
}

@media(max-width:560px){
  .health-card{
    grid-template-columns:auto 1fr;
  }
  .health-status{
    grid-column:1 / -1;
    align-items:flex-start;
    flex-direction:row;
  }
}


/* V1.0.6 - DYNAMIC HEALTH METERS + ROUNDED MEDIA STANDARD */
.hero-card img,
.rounded-media{
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 22px 55px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
}

.health-status{
  justify-content:center;
  min-width:92px;
}

.health-state-inline{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  width:100%;
}

.health-dot{
  position:relative;
  flex:0 0 auto;
  animation:healthPulse 1.8s ease-in-out infinite;
}

.health-dot::before,
.health-dot::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:inherit;
  border:1px solid rgba(51,230,161,.45);
  animation:healthSignal 1.8s ease-out infinite;
}

.health-dot::after{
  inset:-14px;
  animation-delay:.45s;
  opacity:.55;
}

.health-dot.warning::before,
.health-dot.warning::after{
  border-color:rgba(255,202,87,.42);
}

@keyframes healthPulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.16);filter:brightness(1.25)}
}

@keyframes healthSignal{
  0%{transform:scale(.45);opacity:.55}
  80%,100%{transform:scale(1.75);opacity:0}
}

.health-meter{
  position:relative;
  isolation:isolate;
}

.health-meter span{
  position:relative;
  overflow:hidden;
  width:0;
  animation:healthMeterLoad 1.25s cubic-bezier(.2,.85,.22,1) forwards;
}

.health-meter span::after{
  content:"";
  position:absolute;
  inset:0;
  width:44%;
  transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:healthMeterShine 2.35s ease-in-out infinite;
}

@keyframes healthMeterLoad{
  from{width:0}
  to{width:var(--meter-width,100%)}
}

@keyframes healthMeterShine{
  0%{transform:translateX(-120%)}
  55%,100%{transform:translateX(260%)}
}


/* V1.0.7 HERO IMAGE FULL COVER + STATUS FIX */
.hero-card{
  grid-template-columns:1.15fr .85fr;
}

.hero-media{
  position:relative;
  height:100%;
  min-height:260px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#0a0f1b;
  box-shadow:0 24px 55px rgba(0,0,0,.32);
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
  border:0;
  box-shadow:none;
  filter:none !important;
}

.health-card{
  overflow:visible !important;
}

.health-status{
  position:relative;
  z-index:5;
  padding-right:10px;
}

.health-dot{
  overflow:visible !important;
}

/* USER MANAGEMENT */
.user-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
}

.user-profile-card{
  position:relative;
  overflow:hidden;
}

.user-profile-header{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}

.user-avatar-large{
  width:82px;
  height:82px;
  border-radius:26px;
  display:grid;
  place-items:center;
  font-size:30px;
  font-weight:950;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#fff;
  box-shadow:0 22px 50px rgba(105,62,255,.28);
}

.user-meta h3{
  margin:0;
  font-size:26px;
  letter-spacing:-.03em;
}

.user-meta p{
  margin:7px 0 0;
  color:var(--muted);
}

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

.settings-mini{
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

.settings-mini strong{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
}

.user-table-avatar{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.inline-user{
  display:flex;
  align-items:center;
  gap:12px;
}

@media(max-width:1100px){
  .user-grid{
    grid-template-columns:1fr;
  }
}


/* V1.0.8 SMART HERO SLIDER + CAPABILITY CARDS */
.hero-slider{
  position:relative;
  width:100%;
  height:100%;
  min-height:260px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#080d18;
  box-shadow:0 24px 55px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.045);
  transition:opacity 1.45s ease, transform 7s ease;
}

.hero-slide.active{
  opacity:1;
  transform:scale(1);
}

.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
}

.hero-slider::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,8,19,.06),transparent 40%,rgba(5,8,19,.12)),
    linear-gradient(180deg,transparent 72%,rgba(5,8,19,.22));
}

.capability-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:20px;
}

.capability-card{
  position:relative;
  overflow:hidden;
  padding:22px;
  min-height:210px;
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.030)),
    radial-gradient(circle at 90% 0%,rgba(24,216,255,.13),transparent 38%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

.capability-icon{
  width:56px;
  height:56px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:26px;
  color:#06111c;
  background:linear-gradient(135deg,#18d8ff,#86f5ff);
  margin-bottom:18px;
}

.capability-card h3{
  margin:0 0 10px;
  font-size:20px;
  letter-spacing:-.02em;
}

.capability-card p{
  margin:0;
  color:#9da8c2;
  line-height:1.6;
  font-size:14px;
}

.capability-card .status{
  margin-top:16px;
}

@media(max-width:1100px){
  .capability-grid{
    grid-template-columns:1fr;
  }
}


/* V1.0.9 REAL IMAGE SLIDER + AVATAR + CAPABILITIES PRO */
.hero-card{
  align-items:stretch !important;
  min-height:300px;
}

.hero-slider{
  min-height:300px !important;
  height:100% !important;
  align-self:stretch;
}

.hero-slide{
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

.hero-slide img{
  display:none !important;
}

.capability-grid.pro{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:20px 0;
}

.capability-card.pro{
  min-height:245px;
  padding:24px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),
    radial-gradient(circle at 86% 8%,rgba(24,216,255,.16),transparent 38%),
    radial-gradient(circle at 0% 100%,rgba(138,69,255,.14),transparent 32%);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.capability-card.pro:hover{
  transform:translateY(-4px);
  border-color:rgba(24,216,255,.24);
  box-shadow:0 30px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}

.capability-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.capability-icon{
  margin-bottom:0 !important;
}

.capability-number{
  color:rgba(255,255,255,.18);
  font-size:36px;
  font-weight:950;
  letter-spacing:-.07em;
}

.capability-card.pro p{
  min-height:90px;
}

.capability-actions{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.capability-mini{
  color:#9da8c2;
  font-size:12px;
  font-weight:800;
}

.avatar,
.user-table-avatar,
.user-avatar-large{
  overflow:hidden;
}

.avatar img,
.user-table-avatar img,
.user-avatar-large img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.avatar-upload-box{
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  margin:16px 0;
}

.file-input-pro{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:12px 14px;
  border-radius:18px;
  border:1px dashed rgba(24,216,255,.30);
  background:rgba(24,216,255,.055);
  color:#c7f7ff;
  cursor:pointer;
  overflow:hidden;
}

.file-input-pro input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.file-input-pro i{
  font-size:22px;
  color:#18d8ff;
}

.file-input-pro strong{
  display:block;
  color:#fff;
}

.file-input-pro span{
  color:#9da8c2;
  font-size:12px;
}

@media(max-width:1100px){
  .capability-grid.pro{
    grid-template-columns:1fr;
  }
}


/* V1.1.0 PROFESSIONAL HERO - NO SLIDER */
.hero-card.hero-pro{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
  min-height:330px;
  align-items:stretch !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 10%,rgba(138,69,255,.22),transparent 36%),
    radial-gradient(circle at 88% 18%,rgba(24,216,255,.16),transparent 34%),
    linear-gradient(135deg,rgba(17,23,39,.86),rgba(7,11,23,.92));
}

.hero-card.hero-pro::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.70),transparent 85%);
  pointer-events:none;
}

.hero-content-pro{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(24,216,255,.10);
  border:1px solid rgba(24,216,255,.18);
  color:#a8f3ff;
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.hero-title-pro{
  margin:0;
  font-size:38px;
  line-height:1.02;
  letter-spacing:-.055em;
  max-width:760px;
}

.hero-copy-pro{
  max-width:780px;
  margin:16px 0 24px;
  color:#aab6d4;
  line-height:1.72;
  font-size:16px;
}

.hero-actions-pro{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.hero-insight-panel{
  position:relative;
  z-index:2;
  min-height:270px;
  border-radius:28px;
  padding:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)),
    radial-gradient(circle at 80% 10%,rgba(24,216,255,.16),transparent 38%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 22px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}

.hero-insight-panel::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-90px;
  bottom:-90px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(24,216,255,.22),transparent 68%);
}

.hero-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
  position:relative;
  z-index:1;
}

.hero-panel-title{
  margin:0;
  font-size:18px;
  letter-spacing:-.02em;
}

.hero-panel-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#06111c;
  background:linear-gradient(135deg,#18d8ff,#33e6a1);
  box-shadow:0 18px 36px rgba(24,216,255,.20);
  font-size:22px;
}

.hero-metric-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.hero-metric{
  padding:16px;
  border-radius:20px;
  background:rgba(6,10,22,.50);
  border:1px solid rgba(255,255,255,.08);
}

.hero-metric strong{
  display:block;
  font-size:24px;
  letter-spacing:-.05em;
  margin-bottom:5px;
}

.hero-metric span{
  display:block;
  color:#9da8c2;
  font-size:12px;
  font-weight:800;
}

.hero-capabilities-row{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.hero-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  color:#dffaff;
  background:rgba(24,216,255,.08);
  border:1px solid rgba(24,216,255,.16);
  font-size:12px;
  font-weight:900;
}

@media(max-width:1100px){
  .hero-card.hero-pro{
    grid-template-columns:1fr;
  }
  .hero-title-pro{
    font-size:32px;
  }
}


/* V1.1.3 PROFILE SAVE FIX + SPACING */
.user-profile-card form{
  display:grid;
  gap:16px;
}

.user-profile-card .avatar-upload-box{
  margin:8px 0 6px !important;
}

.user-profile-card .btn-primary{
  margin-top:10px;
}

.user-profile-card input[name="new_password"]{
  margin-bottom:4px;
}

.form-card form{
  gap:16px !important;
}


/* v1.1.4 FAQ HERO CLEAN */
.faq-hero,
.help-hero,
.faq-top-card{
    grid-template-columns: 1fr !important;
}

.faq-hero .faq-content,
.help-hero .faq-content{
    max-width: 100% !important;
}


/* V1.1.5 UI FIXES: FAQ CLEAN, ALIGNED CARDS, CUSTOM DROPDOWNS */
.select-shell::after{
  content:"\F282" !important;
}

.card-equal{
  display:flex !important;
  flex-direction:column !important;
}

.card-equal .card-body-flex{
  display:flex;
  flex-direction:column;
  height:100%;
}

.card-equal .card-actions-bottom{
  margin-top:auto;
  padding-top:22px;
}

.capability-grid,
.capability-grid.pro{
  align-items:stretch !important;
}

.capability-card,
.capability-card.pro{
  display:flex !important;
  flex-direction:column !important;
}

.capability-card p,
.capability-card.pro p{
  flex:1 1 auto;
}

.capability-card form,
.capability-card.pro form,
.capability-actions{
  margin-top:auto !important;
  padding-top:20px;
}

.faq-clean-hero{
  display:block !important;
  min-height:auto !important;
}

.faq-clean-hero .hero-content-pro,
.faq-clean-hero .hero-copy-pro{
  max-width:100% !important;
}

.faq-clean-hero .hero-insight-panel,
.faq-clean-hero .hero-media,
.faq-clean-hero .hero-slider,
.faq-clean-hero img{
  display:none !important;
}

.custom-dropdown-menu{
  max-height:260px;
  overflow:auto;
}

.custom-dropdown-option.active{
  background:linear-gradient(135deg,rgba(138,69,255,.34),rgba(24,216,255,.12));
  color:#fff;
}


/* V1.1.6 - GLOBAL CUSTOM DROPDOWN SYSTEM */
select{
  display:none !important;
}

.select-shell{
  display:block !important;
}

.select-shell::after{
  display:none !important;
  content:"" !important;
}

.custom-dropdown{
  position:relative;
  width:100%;
  z-index:10;
}

.custom-dropdown.open{
  z-index:999;
}

.custom-dropdown-toggle{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045)),
    radial-gradient(circle at 95% 0%,rgba(24,216,255,.10),transparent 34%);
  color:#fff;
  padding:0 16px;
  cursor:pointer;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.12);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.custom-dropdown-toggle:hover,
.custom-dropdown.open .custom-dropdown-toggle{
  border-color:rgba(24,216,255,.36);
  box-shadow:0 0 0 4px rgba(24,216,255,.07), inset 0 1px 0 rgba(255,255,255,.07);
}

.custom-dropdown-toggle i{
  color:#18d8ff;
  transition:transform .18s ease;
}

.custom-dropdown.open .custom-dropdown-toggle i{
  transform:rotate(180deg);
}

.custom-dropdown-menu{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:1000;
  padding:8px;
  max-height:280px;
  overflow:auto;
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(20,27,44,.98),rgba(10,15,27,.98));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}

.custom-dropdown.open .custom-dropdown-menu{
  display:grid !important;
  gap:6px;
}

.custom-dropdown-option{
  padding:13px 13px;
  border-radius:14px;
  cursor:pointer;
  color:#dce5ff;
  font-weight:800;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}

.custom-dropdown-option:hover,
.custom-dropdown-option.active{
  background:linear-gradient(135deg,rgba(138,69,255,.34),rgba(24,216,255,.12));
  color:#fff;
  transform:translateX(2px);
}

.form-card,
.card{
  overflow:visible !important;
}

.content-grid{
  overflow:visible !important;
}