@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --nc-ink: #060a08;
  --nc-ink-soft: #100708;
  --nc-panel: #0a0f0c;
  --nc-panel-red: #130809;
  --nc-red: #ff5454;
  --nc-red-deep: #b51f28;
  --nc-bone: #e6e0cc;
  --nc-muted: #839187;
  --nc-amber: #ff9d59;
  --nc-green: #69d18b;
  --nc-line: rgba(223, 231, 211, .14);
  --nc-radius: 8px;
  --bg: var(--nc-ink);
  --bg-2: var(--nc-ink-soft);
  --panel: var(--nc-panel);
  --panel-2: var(--nc-panel-red);
  --text: var(--nc-bone);
  --silver: var(--nc-bone);
  --muted: var(--nc-muted);
  --red: var(--nc-red);
  --accent: var(--nc-red);
  --gold: var(--nc-amber);
  --green: var(--nc-green);
  --line: var(--nc-line);
  --input: #0d0909;
  color-scheme: dark;
}

html { background: var(--nc-ink); }
body {
  color: var(--nc-bone) !important;
  background:
    radial-gradient(circle at 78% 15%, rgba(190, 33, 36, .17), transparent 30%),
    linear-gradient(120deg, var(--nc-ink-soft), #050405 67%) !important;
  font-family: "DM Sans", "Segoe UI", sans-serif !important;
}
body::before {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: .22 !important;
  pointer-events: none !important;
  content: "" !important;
  background-image:
    linear-gradient(rgba(255, 84, 84, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 84, 84, .035) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
}
h1, h2, h3, .sidebar-title, .brand-name {
  color: var(--nc-bone);
  font-family: "Space Grotesk", "Segoe UI", sans-serif !important;
}
aside {
  background: rgba(8, 4, 5, .97) !important;
  border-color: var(--nc-line) !important;
}
.sidebar-brand, .sidebar-account { border-color: var(--nc-line) !important; }
.sidebar-category, .muted, small { color: var(--nc-muted) !important; }
.nav-idle { color: #a2aaa2 !important; }
.nav-idle:hover {
  color: var(--nc-bone) !important;
  background: rgba(255, 84, 84, .055) !important;
  border-color: rgba(255, 84, 84, .22) !important;
}
.nav-active {
  color: var(--nc-red) !important;
  background: rgba(255, 84, 84, .12) !important;
  border-color: rgba(255, 84, 84, .42) !important;
}
.card, .status, .kpi, section, article, .panel {
  border-color: var(--nc-line) !important;
  border-radius: var(--nc-radius) !important;
  background: rgba(10, 15, 12, .94) !important;
  box-shadow: none !important;
}
button, .button, input, select, textarea {
  border-radius: 6px !important;
  border-color: var(--nc-line) !important;
  font-family: "DM Sans", "Segoe UI", sans-serif !important;
}
input, select, textarea { background: #0d0909 !important; color: var(--nc-bone) !important; }
button:hover, .button:hover { border-color: var(--nc-red) !important; }
button.blue, button.green, button.primary, .button-primary {
  color: #fff !important;
  background: var(--nc-red) !important;
  border-color: var(--nc-red) !important;
}
button.gray { color: var(--nc-bone) !important; background: #1b1213 !important; }
.pill {
  border-color: var(--nc-line) !important;
  border-radius: 999px !important;
  background: #12090a !important;
}
table { border-collapse: collapse; }
th {
  color: var(--nc-muted) !important;
  font-size: 10px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
th, td { border-color: var(--nc-line) !important; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--nc-red); outline-offset: 2px; }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr !important; }
  aside { position: static !important; width: auto !important; height: auto !important; }
  main { width: 100% !important; padding: 12px !important; }
}