:root {
  --plumit-plum: #a447b8;
  --plumit-plum-bright: #d06ad2;
  --plumit-plum-deep: #722687;
  --plumit-ink: #0d0e15;
  --plumit-panel: #171822;
  --plumit-border: rgba(214, 127, 222, .24);
}

/* Preserve TacticalRMM's information density while giving PlumRMM a clear identity. */
body { background-color: var(--plumit-ink); font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif; }
.bg-primary { background: linear-gradient(135deg, var(--plumit-plum), var(--plumit-plum-deep)) !important; }
.text-primary { color: var(--plumit-plum-bright) !important; }
.q-btn.bg-primary { box-shadow: 0 7px 22px rgba(125, 45, 148, .28); }
.q-btn.bg-primary:hover { filter: brightness(1.1); }
.q-linear-progress__model--determinate,
.q-linear-progress__model--indeterminate { background: var(--plumit-plum-bright) !important; }
#q-loading-bar .q-loading-bar { background: var(--plumit-plum-bright) !important; }

/* Login */
.q-page.bg-image {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(156, 63, 177, .19), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(86, 41, 110, .14), transparent 30%),
    linear-gradient(135deg, #181925 0%, #11131b 52%, #0d1117 100%) !important;
}
.q-page.bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.q-page.bg-image > .q-card {
  width: min(390px, calc(100vw - 36px));
  border: 1px solid var(--plumit-border);
  border-radius: 16px;
  background: rgba(26, 27, 39, .94) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.025) inset;
  backdrop-filter: blur(14px);
}
.q-page.bg-image .text-center.q-pt-lg::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 13px;
  background: url('/plumit-mark.svg') center/contain no-repeat;
  filter: drop-shadow(0 9px 18px rgba(115, 43, 136, .34));
}
.q-page.bg-image .text-h4 { font-weight: 650; letter-spacing: -.7px; }
.q-page.bg-image .text-h4::after {
  content: "PlumIT Remote Operations";
  display: block;
  margin-top: 7px;
  color: #aaa9b7;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.q-page.bg-image .q-field__control { border-radius: 8px; }

/* Persistent, isolated navigation added outside the Vue mount tree. */
#plumit-home-link {
  position: fixed;
  z-index: 7000;
  right: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(212, 137, 219, .23);
  border-radius: 999px;
  color: #d7d5de;
  background: rgba(18, 19, 29, .82);
  box-shadow: 0 8px 24px rgba(0,0,0,.26);
  font: 600 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .35px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: border-color .18s, color .18s, transform .18s;
}
#plumit-home-link::before { content: "●"; color: #95cf7b; font-size: 9px; }
#plumit-home-link:hover { color: #fff; border-color: rgba(212,137,219,.6); transform: translateY(-1px); }
@media (max-width: 700px) {
  #plumit-home-link { right: 10px; bottom: 10px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #plumit-home-link, .q-btn { transition: none !important; }
}