:root{
  --bg:#0b1220;
  --panel:#111b2e;
  --panel2:#0f182a;
  --border: rgba(148,163,184,.14);
  --text:#e5e7eb;
  --muted: rgba(226,232,240,.62);
  --accent:#7c6cff;  /* purple-blue like sample */
  --accent2:#8b5cf6;
  --radius: 14px;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
}

html,body{height:100%;}
body{
  background: radial-gradient(1200px 700px at 20% -10%, rgba(124,108,255,.18), transparent 60%),
              radial-gradient(900px 600px at 90% 0%, rgba(139,92,246,.12), transparent 60%),
              linear-gradient(180deg, #070b14, var(--bg));
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

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

/* layout */
.admin-wrap{ min-height: 100vh; display:flex; }
.sidebar{
  width: 260px;
  background: linear-gradient(180deg, rgba(17,27,46,.92), rgba(12,19,33,.92));
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  position: sticky;
  top: 0; height: 100vh;
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding: 10px 10px 14px;
}
.brand .logo{
  width:40px;height:40px;border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 16px 30px rgba(124,108,255,.22);
  display:flex;align-items:center;justify-content:center;
  color:white;
}
.brand .t{ font-weight: 900; }
.brand .s{ font-size:.8rem; color: var(--muted); margin-top:-2px; }

.side-title{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(226,232,240,.45);
  padding: 10px 10px 6px;
}
.side-link{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  margin: 2px 6px;
  border-radius: 12px;
  color: rgba(226,232,240,.80);
  border: 1px solid transparent;
}
.side-link:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(148,163,184,.14);
  color: #fff;
}
.side-link.active{
  background: rgba(124,108,255,.18);
  border-color: rgba(124,108,255,.25);
  color:#fff;
  font-weight: 800;
}

/* content */
.content{ flex:1; padding: 18px 22px; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 14px;
  background: rgba(17,27,46,.75);
  border:1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.search{
  display:flex; align-items:center; gap:10px;
  background: rgba(15,24,42,.75);
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: min(520px, 60vw);
}
.search input{
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  width: 100%;
}
.icon-btn{
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(15,24,42,.75);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: rgba(226,232,240,.85);
}
.icon-btn:hover{ filter: brightness(1.06); color:#fff; }
.profile{
  display:flex; align-items:center; gap:10px;
  padding: 6px 10px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(15,24,42,.55);
}
.profile .avatar{
  width:34px;height:34px;border-radius: 12px;
  background: rgba(124,108,255,.18);
  border:1px solid rgba(124,108,255,.25);
  display:flex;align-items:center;justify-content:center;
}

/* cards */
.panel{
  background: rgba(17,27,46,.72);
  border:1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.kpi{
  padding: 14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
}
.kpi .lbl{ color: rgba(226,232,240,.55); font-size:.85rem; }
.kpi .val{ font-weight: 900; font-size: 1.45rem; letter-spacing: -.02em; }

/* tables */
.tablex{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
}
.tablex thead th{
  text-align:left;
  font-size:.8rem;
  color: rgba(226,232,240,.62);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(15,24,42,.55);
}
.tablex tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,.10);
  color: rgba(226,232,240,.85);
}
.tablex tbody tr:hover td{ background: rgba(255,255,255,.03); }

/* forms */
.form-control, .form-select{
  background: rgba(15,24,42,.7) !important;
  border-color: rgba(148,163,184,.18) !important;
  color: var(--text) !important;
  border-radius: 12px;
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(124,108,255,.15) !important;
  border-color: rgba(124,108,255,.45) !important;
}

/* responsive */
@media (max-width: 992px){
  .sidebar{ position: fixed; left: -270px; transition: left .25s ease; z-index: 1040; }
  .sidebar.open{ left: 0; }
  .content{ padding: 14px; }
  .search{ min-width: 0; width: 100%; }
}