:root {
  --lionnoc-bg-1: #250046;
  --lionnoc-bg-2: #5b068d;
  --lionnoc-bg-3: #b900cb;
  --lionnoc-panel: rgba(32, 5, 64, 0.86);
  --lionnoc-panel-2: rgba(49, 10, 85, 0.92);
  --lionnoc-line: rgba(228, 179, 255, 0.22);
  --lionnoc-text: #ffffff;
  --lionnoc-muted: #cdbde4;
  --lionnoc-accent: #d000e8;
  --lionnoc-accent-2: #7b22ff;
  --lionnoc-sidebar: #17012e;
}

/* ---------------- Login ---------------- */

html,
body {
  min-height: 100%;
}

.lionnoc-login-body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--lionnoc-text);
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 0, 219, .42), transparent 36%),
    radial-gradient(circle at 88% 76%, rgba(86, 0, 255, .45), transparent 42%),
    linear-gradient(135deg, var(--lionnoc-bg-3) 0%, var(--lionnoc-bg-2) 50%, var(--lionnoc-bg-1) 100%);
  position: relative;
}

.lionnoc-login-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.03), transparent 28%),
    repeating-radial-gradient(circle at 8% 90%, rgba(255,255,255,.08) 0 2px, transparent 2px 12px);
  opacity: .45;
}

.lionnoc-login-bg {
  position: fixed;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
  opacity: .25;
}

.lionnoc-login-bg-a {
  left: -24vw;
  bottom: -28vw;
  background: #f000ff;
}

.lionnoc-login-bg-b {
  right: -28vw;
  top: -24vw;
  background: #7117ff;
}

.lionnoc-login-shell {
  position: relative;
  z-index: 2;
  width: min(94vw, 720px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 48px 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lionnoc-login-card {
  position: relative;
  padding: 46px 58px 42px;
  border-radius: 28px;
  border: 1px solid rgba(239, 192, 255, .30);
  background:
    linear-gradient(180deg, rgba(64, 11, 103, .92), rgba(26, 5, 54, .95));
  box-shadow:
    0 30px 90px rgba(12, 0, 31, .55),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.lionnoc-login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 85% 15%, rgba(208, 0, 232, .16), transparent 32%);
}

.lionnoc-login-logo-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.lionnoc-login-logo {
  display: block;
  max-width: 360px;
  width: min(76%, 360px);
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22));
}

.lionnoc-login-heading {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 34px;
}

.lionnoc-login-heading h1 {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -.02em;
}

.lionnoc-login-heading p {
  margin: 0;
  color: var(--lionnoc-muted);
  font-size: 1rem;
}

.lionnoc-login-card form {
  position: relative;
  z-index: 1;
}

.lionnoc-login-card .form-label {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.lionnoc-input {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 18px;
  border: 1px solid rgba(238, 201, 255, .30);
  border-radius: 12px;
  background: rgba(35, 8, 67, .70);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.lionnoc-input:focus-within {
  border-color: rgba(222, 79, 255, .82);
  box-shadow: 0 0 0 4px rgba(205, 0, 232, .13);
  background: rgba(42, 8, 79, .90);
}

.lionnoc-input > i {
  flex: 0 0 auto;
  margin-right: 14px;
  color: #fff;
  font-size: 1.28rem;
}

.lionnoc-input .form-control {
  min-height: 62px;
  padding: 0;
  color: #fff;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 1rem;
}

.lionnoc-input .form-control::placeholder {
  color: #9f88b9;
}

.lionnoc-password-toggle {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-left: 8px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 1.25rem;
  border-radius: 10px;
}

.lionnoc-password-toggle:hover {
  background: rgba(255,255,255,.08);
}

.lionnoc-login-button {
  min-height: 58px;
  margin-top: 8px;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 1.05rem;
  font-weight: 700;
  background:
    linear-gradient(90deg, #db00e9 0%, #a000ed 48%, #7025ff 100%) !important;
  box-shadow: 0 14px 32px rgba(168, 0, 220, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}

.lionnoc-login-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(168, 0, 220, .38);
}

.lionnoc-login-footer {
  padding: 22px 0 0;
  color: rgba(255,255,255,.70);
  text-align: center;
  font-size: .92rem;
}

.lionnoc-alert {
  position: relative;
  z-index: 1;
  border-color: rgba(255, 98, 154, .45);
  background: rgba(118, 11, 52, .66);
  color: #ffe3eb;
}

@media (max-width: 700px) {
  .lionnoc-login-shell {
    padding: 20px 0;
  }

  .lionnoc-login-card {
    padding: 34px 22px 30px;
    border-radius: 22px;
  }

  .lionnoc-login-logo {
    width: min(85%, 320px);
  }
}

/* ---------------- Application ---------------- */

body:not(.lionnoc-login-body) {
  background:
    radial-gradient(circle at 82% 0%, rgba(126, 23, 180, .18), transparent 30%),
    #070b18;
}

.sidebar {
  background:
    linear-gradient(180deg, #1c0434 0%, #11051f 55%, #080e19 100%) !important;
  border-right-color: rgba(208, 0, 232, .20) !important;
}

.brand-mark {
  background:
    linear-gradient(135deg, #d600e8, #7526ff) !important;
  box-shadow: 0 8px 22px rgba(164, 0, 228, .25);
}

.brand {
  color: #fff !important;
}

.nav-link.active,
.nav-link:hover {
  background:
    linear-gradient(90deg, rgba(182, 0, 220, .30), rgba(111, 35, 255, .22)) !important;
  border-color: rgba(217, 74, 255, .22) !important;
}

.topbar {
  background:
    linear-gradient(90deg, rgba(25, 4, 48, .97), rgba(51, 8, 80, .96)) !important;
  border-bottom-color: rgba(208, 0, 232, .18) !important;
}

.main-area {
  background:
    radial-gradient(circle at 90% 4%, rgba(136, 25, 190, .13), transparent 30%),
    #07101f !important;
}

.panel,
.card,
.metric-card {
  border-color: rgba(204, 87, 255, .16) !important;
}

.btn-primary {
  border-color: transparent !important;
  background:
    linear-gradient(90deg, #c600df, #712aff) !important;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

a {
  --bs-link-color-rgb: 213, 88, 255;
}

.lionnoc-sidebar-brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
}

.lionnoc-brand-text {
  font-weight: 800;
  letter-spacing: -.02em;
}

.lionnoc-topbar-subtitle {
  color: #c9a9dc;
}

/* LionNOC - proteção do branding */
.lionnoc-welcome,
.lionnoc-welcome *,
.lionnoc-login-logo,
.lionnoc-login-heading {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

.lionnoc-name {
    color: #ffffff;
    font-weight: 800;
}

.lionnoc-login-footer {
    line-height: 1.7;
}

.lionnoc-developer {
    margin-top: 3px;
    color: rgba(255, 255, 255, .72);
    font-size: .90rem;
}

.lionnoc-developer strong {
    color: #e100ef;
    font-weight: 800;
    letter-spacing: .02em;
}