@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

:root {
  --bg:#070b14;
  --panel:#0b1220;
  --panel2:#0e1730;
  --text:#e9eefc;
  --muted:#a9b2cc;
  --line: rgba(255,255,255,.10);
  --brand1:#6ae4ff;
  --brand2:#8b5cf6;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;

  /* FIX: kein Wiederholen + bessere Verteilung */
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(106,228,255,.18), transparent 60%),
    radial-gradient(800px 450px at 85% 10%, rgba(139,92,246,.14), transparent 65%),
    var(--bg);

  background-repeat: no-repeat;
  background-attachment: fixed;

  color: var(--text);
  margin: 0;
}

/* =========================
   NAVBAR (vereinheitlicht)
========================= */

.custom-navbar {
  background: rgba(11,18,32,0.65);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.navbar-nav {
  gap: 6px;
}

.navbar-nav .nav-item {
  display: flex;
}

.navbar-nav .nav-link {
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 14px;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  background: linear-gradient(135deg, rgba(106,228,255,.2), rgba(139,92,246,.2));
  color: var(--text);
}

/* =========================
   TOPBAR
========================= */

.topbar {
  backdrop-filter: blur(12px);
  background: rgba(7,11,20,.6);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* =========================
   CARD UI
========================= */

.card-ui {
  background: linear-gradient(180deg, rgba(14,23,48,.7), rgba(11,18,32,.7));
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: 0.3s;
}

.card-ui:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 40px rgba(106,228,255,0.12);
}

/* =========================
   KPI
========================= */

.kpi {
  font-size: 26px;
  font-weight: 800;
}

.kpi-sub {
  font-size: 13px;
  color: var(--muted);
}

/* =========================
   ICON BOX
========================= */

.icon-box {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
}

/* =========================
   ACTIVITY
========================= */

.activity {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.03);
  font-size: 13px;
}

/* =========================
   TEXT
========================= */

.text-muted-custom {
  color: var(--text);
  opacity: 0.85;
}

/* =========================
   BUTTONS
========================= */

.btn-dark {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--text);
}

.btn-dark:hover {
  background: rgba(255,255,255,.1);
}

/* =========================
   LICENSE SPLIT
========================= */

.license-split {
  display: flex;
  overflow: hidden;
}

.license-left {
  flex: 2;
}

.license-right {
  flex: 1;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.license-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand1);
}

.license-qty {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qty-value {
  font-size: 18px;
  font-weight: 600;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {

  .license-split {
    flex-direction: column;
  }

  .license-right {
    border-left: none;
    border-top: 1px solid var(--line);
  }

  .kpi {
    font-size: 20px;
  }
}