:root{
  --bg: #060b18;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);

  --primary: #3b82f6;
  --primary2:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;

  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);

  --sidebar-w: 300px;
  --topbar-h: 64px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 15% 10%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(900px 700px at 50% 90%, rgba(168,85,247,.14), transparent 60%),
    var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{ color:inherit; }
.small-muted{ color:var(--muted); }

.gx-shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
}

.gx-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:18px 14px;
  border-right:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  backdrop-filter: blur(14px);
}

.gx-brand{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-soft);
}
.gx-brand-badge{
  width:42px;height:42px;border-radius:14px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  display:grid; place-items:center;
  font-weight:800;
}
.gx-nav{
  margin-top:16px;
}
.gx-nav a{
  text-decoration:none;
}
.gx-nav .gx-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px;
  border-radius: var(--radius-md);
  border:1px solid transparent;
  color: rgba(255,255,255,.86);
  transition: .18s ease;
}
.gx-nav .gx-link:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.gx-nav .gx-link.active{
  background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,197,94,.12));
  border-color: rgba(59,130,246,.28);
  box-shadow: 0 12px 30px rgba(59,130,246,.12);
}
.gx-link .pill{
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}

.gx-main{
  padding:18px 18px 96px;
}

.gx-topbar{
  position:sticky;
  top:0;
  z-index: 50;
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin-bottom:16px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}

.gx-card{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}
.gx-card .gx-card-h{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gx-card .gx-card-b{
  padding:14px 16px;
}

.kpi{
  padding:14px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-soft);
  min-height: 98px;
}
.kpi .kpi-v{ font-size:34px; font-weight:800; line-height:1; }
.kpi .kpi-k{ color:var(--muted); margin-top:6px; }

.table-darkish{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
}
.table-darkish th{
  color: rgba(255,255,255,.75);
  font-weight:650;
  border-bottom-color: rgba(255,255,255,.10)!important;
}
.table-darkish td{
  border-bottom-color: rgba(255,255,255,.08)!important;
}

.btn-gx{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.btn-gx:hover{ background: rgba(255,255,255,.10); }

.btn-primary-gx{
  border-radius: 14px;
  border:1px solid rgba(59,130,246,.35);
  background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(59,130,246,.55));
  color:#fff;
}
.btn-primary-gx:hover{ filter: brightness(1.04); }

.form-control, .form-select{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.35);
  color: rgba(255,255,255,.92);
}
.form-control::placeholder{ color: rgba(255,255,255,.45); }
.form-control:focus, .form-select:focus{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 .22rem rgba(59,130,246,.18);
}

.gx-mobilebar{
  position:fixed;
  left:12px; right:12px; bottom:12px;
  z-index: 60;
  display:none;
  padding:10px 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.gx-mobilebar a{
  text-decoration:none;
  flex:1;
  padding:10px 12px;
  border-radius: 16px;
  text-align:center;
  color: rgba(255,255,255,.85);
}
.gx-mobilebar a.active{
  background: rgba(59,130,246,.22);
  border:1px solid rgba(59,130,246,.28);
}

@media (max-width: 992px){
  .gx-shell{ grid-template-columns: 1fr; }
  .gx-sidebar{
    position:fixed;
    left:12px; top:12px; bottom:12px;
    width:min(92vw, var(--sidebar-w));
    z-index: 80;
    transform: translateX(-120%);
    transition: .22s ease;
    border-radius: 22px;
  }
  body.gx-sidebar-open .gx-sidebar{ transform: translateX(0); }
  .gx-main{ padding: 14px 14px 112px; }
  .gx-mobilebar{ display:flex; gap:10px; }
}

/* Toasts */
.gx-toast-wrap{
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 9999;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.gx-toast{
  min-width: 260px;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.78);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}
.gx-toast .t-title{ font-weight:800; }
.gx-toast .t-msg{ color: rgba(255,255,255,.74); margin-top:2px; }
.gx-toast.ok{ border-color: rgba(34,197,94,.35); }
.gx-toast.err{ border-color: rgba(239,68,68,.35); }
.gx-toast.warn{ border-color: rgba(245,158,11,.35); }