/* MyPnetLab — calm, modern learning interface. Visual layer only; app behavior stays untouched. */
:root {
  color-scheme: light;
  --mpl-bg: #f5f7fb;
  --mpl-surface: #ffffff;
  --mpl-surface-2: #f8fafc;
  --mpl-surface-3: #eef3f8;
  --mpl-ink: #172338;
  --mpl-muted: #53647b;
  --mpl-dim: #718096;
  --mpl-line: #dce4ee;
  --mpl-line-strong: #c4d0df;
  --mpl-accent: #2563eb;
  --mpl-accent-strong: #1d4ed8;
  --mpl-accent-soft: #eaf1ff;
  --mpl-shadow: 0 12px 32px rgba(27, 48, 78, .08);
}

html.dark {
  color-scheme: dark;
  --mpl-bg: #111827;
  --mpl-surface: #1b2638;
  --mpl-surface-2: #202e42;
  --mpl-surface-3: #29384d;
  --mpl-ink: #edf3fb;
  --mpl-muted: #b5c2d4;
  --mpl-dim: #91a1b7;
  --mpl-line: #34445b;
  --mpl-line-strong: #4a5d77;
  --mpl-accent: #7eacff;
  --mpl-accent-strong: #a4c4ff;
  --mpl-accent-soft: #243754;
  --mpl-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

html, body {
  background: var(--mpl-bg) !important;
  color: var(--mpl-ink) !important;
}
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0;
  line-height: 1.55;
}
#root { background: var(--mpl-bg); min-height: 100vh; }

/* App chrome */
nav, header, [role="navigation"] {
  background: color-mix(in srgb, var(--mpl-surface) 94%, transparent) !important;
  color: var(--mpl-ink) !important;
  border-color: var(--mpl-line) !important;
  box-shadow: 0 1px 2px rgba(22, 39, 64, .04) !important;
  backdrop-filter: blur(14px);
}
nav a, nav button, header a, header button { color: var(--mpl-muted) !important; }
nav a:hover, nav button:hover, header a:hover, header button:hover,
nav a[aria-current="page"], nav a.active { color: var(--mpl-accent-strong) !important; }

/* High-contrast typography for course content and supporting copy */
h1, h2, h3, h4, h5, h6 { color: var(--mpl-ink) !important; letter-spacing: -.025em; }
p, li, label, dt, dd { color: inherit; }
.text-slate-400, .text-slate-500, .text-gray-500, .text-gray-600,
.text-zinc-400, .text-zinc-500 { color: var(--mpl-muted) !important; }
.text-slate-700, .text-slate-800, .text-slate-900,
.text-gray-700, .text-gray-800, .text-gray-900,
.text-zinc-700, .text-zinc-800, .text-zinc-900 { color: var(--mpl-ink) !important; }

/* Content cards, menus, and lesson panels */
.bg-white, .bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100,
.bg-zinc-50, .bg-zinc-100 { background-color: var(--mpl-surface) !important; color: var(--mpl-ink) !important; }
.bg-slate-200, .bg-gray-200, .bg-zinc-200 { background-color: var(--mpl-surface-3) !important; color: var(--mpl-ink) !important; }
.bg-slate-800, .bg-slate-900, .bg-gray-800, .bg-gray-900,
.bg-zinc-800, .bg-zinc-900 { background-color: var(--mpl-surface-3) !important; color: var(--mpl-ink) !important; }
.border-slate-100, .border-slate-200, .border-slate-300,
.border-gray-100, .border-gray-200, .border-gray-300,
.border-zinc-100, .border-zinc-200, .border-zinc-300 { border-color: var(--mpl-line) !important; }
[class*="rounded-2xl"], [class*="rounded-3xl"] { box-shadow: var(--mpl-shadow); }

/* Form controls and keyboard focus */
input, select, textarea {
  background: var(--mpl-surface) !important;
  color: var(--mpl-ink) !important;
  border-color: var(--mpl-line-strong) !important;
}
input::placeholder, textarea::placeholder { color: var(--mpl-dim) !important; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--mpl-accent) !important;
  outline-offset: 2px;
}

/* Accessible brand accents; keep success, warning, and error states semantic. */
.bg-teal-500, .bg-teal-600, .bg-sky-500, .bg-sky-600, .bg-blue-600,
.bg-cyan-600, .bg-indigo-600 { background-color: var(--mpl-accent) !important; color: #fff !important; }
.text-teal-500, .text-teal-600, .text-teal-700, .text-sky-500, .text-sky-600,
.text-blue-600, .text-cyan-600, .text-indigo-600 { color: var(--mpl-accent-strong) !important; }
.border-teal-500, .border-teal-600, .border-sky-500, .border-blue-600 { border-color: var(--mpl-accent) !important; }
.hover\\:bg-teal-600:hover, .hover\\:bg-teal-700:hover, .hover\\:bg-sky-600:hover,
.hover\\:bg-blue-700:hover { background-color: var(--mpl-accent-strong) !important; }
.from-teal-500, .from-teal-600, .from-sky-500, .from-sky-600 { --tw-gradient-from: var(--mpl-accent) !important; }
.to-teal-500, .to-teal-600, .to-sky-500, .to-sky-600 { --tw-gradient-to: var(--mpl-accent-strong) var(--tw-gradient-to-position) !important; }
button.bg-white, a.bg-white, button.bg-slate-50, a.bg-slate-50 {
  background-color: var(--mpl-surface) !important;
  color: var(--mpl-ink) !important;
}

[role="menu"], [data-radix-menu-content], [data-radix-popper-content-wrapper] > div {
  background: var(--mpl-surface) !important;
  border: 1px solid var(--mpl-line) !important;
  color: var(--mpl-ink) !important;
  box-shadow: var(--mpl-shadow) !important;
}
[class*="shadow-"] { --tw-shadow: var(--mpl-shadow) !important; }
pre, code, .font-mono { background-color: var(--mpl-surface-3); color: var(--mpl-ink); }
table th { background: var(--mpl-surface-3) !important; color: var(--mpl-ink) !important; }
table td { border-color: var(--mpl-line) !important; }
[data-brand], .brand { color: var(--mpl-ink) !important; }

@media (max-width: 640px) {
  nav, header { backdrop-filter: none; }
  .rounded-3xl { border-radius: 1rem; }
}

/* Requested de-cluttering: keep pricing/checkout routes functional, hide only these two UI entries. */
a.nk-nav-item[href="/pricing"],
[data-testid="offer-bar"][aria-label="Offer"] {
  display: none !important;
}

/* Requested navigation and footer cleanup */
[aria-label="Main"] button.nk-nav-item:has(> svg.lucide-gauge),
details[data-testid="footer-pricing-rules"] {
  display: none !important;
}

/* Show the supplied MyPnetLab logo in the existing home link without changing app-owned markup. */
a.config-brand > img,
a.config-brand > .config-brand-fallback { display: none !important; }
a.config-brand::after {
  content: "";
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  background: url("/assets/mypnetlab-login-logo.webp") center / contain no-repeat;
}

/* Site-wide visual system follows the login screen: pale network art, navy type, and blue actions. */
html:not(.dark) .nk-app-shell {
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
  background-image: none !important;
}
html:not(.dark) .nk-app-shell::before {
  content: "";
  position: fixed;
  inset: -10px;
  z-index: -1;
  pointer-events: none;
  /* Keep the artwork visible without allowing it to compete with page text. */
  background-image: linear-gradient(rgba(245, 247, 251, .94), rgba(245, 247, 251, .94)), url("/assets/login-network-background.webp");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  filter: blur(4px);
  transform: scale(1.025);
}
html.dark .nk-app-shell {
  background-color: var(--mpl-bg) !important;
  background-image: radial-gradient(ellipse at 50% 0%, #243754 0, transparent 42%), linear-gradient(180deg, #111827 0%, #141d2b 100%) !important;
  background-attachment: scroll !important;
}

/* Contrast guardrails for text rendered directly on the light site shell. */
html:not(.dark) .nk-app-shell .nk-shell-main,
html:not(.dark) .nk-app-shell .nk-shell-main p,
html:not(.dark) .nk-app-shell .nk-shell-main li,
html:not(.dark) .nk-app-shell .nk-shell-main label,
html:not(.dark) .nk-app-shell .nk-shell-main dt,
html:not(.dark) .nk-app-shell .nk-shell-main dd {
  color: var(--mpl-ink);
}
html:not(.dark) .nk-app-shell .nk-shell-main .text-slate-400,
html:not(.dark) .nk-app-shell .nk-shell-main .text-slate-500,
html:not(.dark) .nk-app-shell .nk-shell-main .text-gray-500,
html:not(.dark) .nk-app-shell .nk-shell-main .text-gray-600,
html:not(.dark) .nk-app-shell .nk-shell-main .text-zinc-400,
html:not(.dark) .nk-app-shell .nk-shell-main .text-zinc-500,
html:not(.dark) .nk-app-shell .nk-shell-main .sb-muted {
  color: var(--mpl-muted) !important;
}
html:not(.dark) .nk-app-shell .nk-shell-main a:not([class*="bg-"]):not(.nk-nav-cta) {
  color: var(--mpl-accent-strong) !important;
}

.nk-app-shell .nk-nav-cta {
  background: var(--mpl-accent) !important;
  border-color: var(--mpl-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .18) !important;
}
.nk-app-shell .nk-nav-cta:hover {
  background: var(--mpl-accent-strong) !important;
  border-color: var(--mpl-accent-strong) !important;
}
.nk-shell-main a:not([class*="bg-"]):not(.nk-nav-cta) { color: var(--mpl-accent-strong); }

.nk-app-shell input,
.nk-app-shell select,
.nk-app-shell textarea { border-radius: 9px !important; }
.nk-app-shell button[class*="bg-"],
.nk-app-shell a[class*="bg-"],
.nk-app-shell .nk-nav-cta { border-radius: 9px !important; }
.nk-app-shell [class*="rounded-2xl"],
.nk-app-shell [class*="rounded-3xl"] { border-radius: 18px !important; }

/* Replace the old orange brand accents with the same blue used by the sign-in button. */
.nk-app-shell .bg-orange-50,
.nk-app-shell .bg-orange-100 { background-color: var(--mpl-accent-soft) !important; color: var(--mpl-accent-strong) !important; }
.nk-app-shell .bg-orange-400,
.nk-app-shell .bg-orange-500,
.nk-app-shell .bg-orange-600,
.nk-app-shell .bg-orange-700,
.nk-app-shell .bg-amber-400,
.nk-app-shell .bg-amber-500,
.nk-app-shell .bg-amber-600 { background-color: var(--mpl-accent) !important; color: #fff !important; }
.nk-app-shell [class~="bg-orange-500/15"] { background-color: rgba(37, 99, 235, .15) !important; color: var(--mpl-accent-strong) !important; }
.nk-app-shell .text-orange-500,
.nk-app-shell .text-orange-600,
.nk-app-shell .text-orange-700 { color: var(--mpl-accent-strong) !important; }
.nk-app-shell .border-orange-200,
.nk-app-shell .border-orange-300 { border-color: var(--mpl-line) !important; }
.nk-app-shell .border-orange-400,
.nk-app-shell .border-orange-500,
.nk-app-shell .border-orange-600 { border-color: var(--mpl-accent) !important; }
.nk-app-shell .ring-orange-200,
.nk-app-shell .ring-orange-300 { --tw-ring-color: var(--mpl-accent-soft) !important; }
.nk-app-shell .ring-orange-400,
.nk-app-shell .ring-orange-500,
.nk-app-shell .ring-amber-400 { --tw-ring-color: var(--mpl-accent) !important; }
.nk-app-shell .hover\:bg-orange-500:hover,
.nk-app-shell .hover\:bg-orange-600:hover,
.nk-app-shell .hover\:bg-amber-500:hover { background-color: var(--mpl-accent-strong) !important; }
.nk-app-shell .from-orange-400,
.nk-app-shell .from-orange-500,
.nk-app-shell .from-orange-600,
.nk-app-shell .from-amber-400,
.nk-app-shell .from-amber-500,
.nk-app-shell .from-violet-600 {
  --tw-gradient-from: var(--mpl-accent) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.nk-app-shell .via-orange-500,
.nk-app-shell .via-fuchsia-600 { --tw-gradient-stops: var(--tw-gradient-from), var(--mpl-accent), var(--tw-gradient-to) !important; }
.nk-app-shell .to-orange-500,
.nk-app-shell .to-orange-600,
.nk-app-shell .to-amber-500,
.nk-app-shell .to-fuchsia-600 { --tw-gradient-to: var(--mpl-accent-strong) var(--tw-gradient-to-position) !important; }

/* Calm site-wide motion. The Sandbox workbench, device canvas, terminals, and
   collaboration overlays are intentionally excluded so active labs remain stable. */
@keyframes mpl-page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mpl-card-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.nk-app-shell:not(:has(.sb-workbench)) .nk-shell-main {
  animation: mpl-page-enter .42s cubic-bezier(.22, .8, .25, 1) both;
}
.nk-app-shell:not(:has(.sb-workbench)) .nk-shell-main > section,
.nk-app-shell:not(:has(.sb-workbench)) .nk-shell-main > div > section {
  animation: mpl-card-enter .48s cubic-bezier(.22, .8, .25, 1) both;
}
.nk-app-shell:not(:has(.sb-workbench)) nav a,
.nk-app-shell:not(:has(.sb-workbench)) nav button,
.nk-app-shell:not(:has(.sb-workbench)) header a,
.nk-app-shell:not(:has(.sb-workbench)) header button,
.nk-app-shell:not(:has(.sb-workbench)) button,
.nk-app-shell:not(:has(.sb-workbench)) a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
    box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}
.nk-app-shell:not(:has(.sb-workbench)) button:hover:not(:disabled),
.nk-app-shell:not(:has(.sb-workbench)) a[class*="bg-"]:hover {
  transform: translateY(-1px);
}
.nk-app-shell:not(:has(.sb-workbench)) button:active:not(:disabled),
.nk-app-shell:not(:has(.sb-workbench)) a[class*="bg-"]:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .nk-app-shell:not(:has(.sb-workbench)) .nk-shell-main,
  .nk-app-shell:not(:has(.sb-workbench)) .nk-shell-main > section,
  .nk-app-shell:not(:has(.sb-workbench)) .nk-shell-main > div > section {
    animation: none;
  }
  .nk-app-shell:not(:has(.sb-workbench)) button,
  .nk-app-shell:not(:has(.sb-workbench)) a { transition: none; }
}

/* Router/simulator console: retain the familiar dark terminal surface in the light site theme. */
.nk-scroll-managed:has(> pre.nk-term-out) {
  background: #05080d !important;
  color: #dbe5f2 !important;
}
.nk-scroll-managed:has(> pre.nk-term-out) > pre.nk-term-out {
  background: #05080d !important;
  color: #dbe5f2 !important;
  border-color: #1f2937 !important;
}
.nk-scroll-managed:has(> pre.nk-term-out) .nk-term-row {
  background: #05080d !important;
  color: #e5edf7 !important;
  border-color: #1f2937 !important;
}
.nk-scroll-managed:has(> pre.nk-term-out) .nk-term-in {
  background: transparent !important;
  color: #f8fafc !important;
  caret-color: #7db3ff !important;
}
.nk-scroll-managed:has(> pre.nk-term-out) .nk-term-out .dm { color: #94a3b8 !important; }
.nk-scroll-managed:has(> pre.nk-term-out) .nk-term-out .lg { color: #86efac !important; }
.nk-scroll-managed:has(> pre.nk-term-out) .nk-term-out .pr { color: #93c5fd !important; }
.nk-scroll-managed:has(> pre.nk-term-out) .nk-term-out .er { color: #fca5a5 !important; }


/* Sandbox-only color palette: match the login screen without changing layout or artwork. */
.sb-workbench {
  --surface: #ffffff;
  --sunk: #f5f7fb;
  --ink: #172338;
  --line: #dce4ee;
  --accent-hex: #2563eb;
  --accent-ink: #ffffff;
  --accent-soft: #eaf1ff;
  --sb-on-accent: #ffffff;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 218 42% 15%;
  --muted: 210 40% 96%;
  --muted-foreground: 214.5 19.42% 40.39%;
  --accent: 220 100% 95.88%;
  --accent-foreground: 224.28 76.33% 48.04%;
  --border: 213.33 34.62% 89.8%;
  --input: 213.33 34.62% 89.8%;
  --ring: 221 83% 53%;
  color: var(--ink) !important;
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
}

.sb-workbench .sb-button.sb-primary {
  color: #ffffff !important;
}

.sb-workbench .sb-console-view-select {
  min-width: 156px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--ink);
  font: 500 12px/1.2 var(--font-body);
  cursor: pointer;
}
.sb-workbench .sb-console-view-select:focus-visible {
  outline: 2px solid var(--accent-hex);
  outline-offset: 2px;
}


/* Compact Sandbox chrome while keeping every tool visible and responsive. */
.sb-workbench .sb-header {
  gap: 12px;
  padding: 9px 14px;
}
.sb-workbench .sb-heading {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
  row-gap: 1px;
}
.sb-workbench .sb-heading .sb-kicker {
  grid-column: 1 / -1;
}
.sb-workbench .sb-heading h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}
.sb-workbench .sb-heading .sb-muted {
  font-size: 11px;
  line-height: 1.25;
}
.sb-workbench .sb-lab-name {
  gap: 3px;
}
.sb-workbench .sb-lab-name input {
  height: 30px;
  padding: 0 9px;
  font-size: 12px;
}
.sb-workbench .sb-file-actions {
  gap: 4px;
}
.sb-workbench .sb-file-actions .sb-button {
  height: 29px;
  min-height: 29px;
  padding: 4px 7px;
  font-size: 11px;
}
.sb-workbench .sb-toolbar {
  gap: 5px 8px;
  padding: 5px 8px;
  align-items: center;
}
.sb-workbench .sb-toolbar .sb-tools,
.sb-workbench .sb-toolbar .sb-views {
  gap: 4px;
}
.sb-workbench .sb-toolbar .sb-button {
  height: 28px;
  min-height: 28px;
  gap: 4px;
  padding: 3px 7px;
  font-size: 11px;
}
.sb-workbench .sb-toolbar .sb-build-tools {
  padding-left: 8px;
}
.sb-workbench .sb-toolbar .sb-views {
  width: auto;
}
.sb-workbench .sb-toolbar .sb-console-view-select {
  min-width: 132px;
  height: 28px;
  font-size: 11px;
}
@media (max-width: 1023px) {
  .sb-workbench .sb-header {
    gap: 8px;
    padding: 8px 10px;
  }
  .sb-workbench .sb-heading {
    grid-template-columns: minmax(0, 1fr);
  }
  .sb-workbench .sb-heading .sb-kicker {
    grid-column: 1;
  }
  .sb-workbench .sb-toolbar .sb-build-tools {
    border: 0;
    padding-left: 0;
  }
}

/* Match Packets' wider content shell on Labs, Projects, and Experience pages. */
html.mpl-wide-route .nk-app-shell .max-w-6xl,
.nk-app-shell main.nk-shell-main.max-w-6xl {
  width: 100% !important;
  max-width: none !important;
}

.nk-app-shell main.nk-shell-main.max-w-6xl {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (min-width: 640px) {
  .nk-app-shell main.nk-shell-main.max-w-6xl {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* Keep the lab instructions and steps in their own scroll area instead of
   making learners scroll the entire page to reach the lower steps. */
.nk-app-shell aside.rounded-2xl.bg-white.ring-1.ring-slate-200.overflow-hidden:has(> p.whitespace-pre-line) {
  max-height: min(70vh, 620px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--mpl-line-strong) transparent;
}
.nk-app-shell aside.rounded-2xl.bg-white.ring-1.ring-slate-200.overflow-hidden:has(> p.whitespace-pre-line)::-webkit-scrollbar {
  width: 8px;
}
.nk-app-shell aside.rounded-2xl.bg-white.ring-1.ring-slate-200.overflow-hidden:has(> p.whitespace-pre-line)::-webkit-scrollbar-thumb {
  background: var(--mpl-line-strong);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
/* Keep navigation width independent of each route's content width. */
.nk-app-shell nav[aria-label="Main"].config-main-nav {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1600px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center course pages in the same viewport-aligned shell as the main nav. */
.nk-app-shell main.nk-shell-main:has(.nk-guard) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Give lesson cards a centered reading column that uses more of the wide panel. */
.nk-app-shell .nk-guard article.space-y-6 > section[id^="s-"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.nk-app-shell .nk-guard article.space-y-6 > section[id^="s-"] > :not(figure) {
  width: 100%;
  max-width: 96ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep copy protection, but remove the repeated account-email background stamp. */
.nk-app-shell .nk-guard-wm {
  display: none !important;
}

/* Keep the module tab page centered even when the active tab is not guarded. */
.nk-app-shell main.nk-shell-main:has(
  .inline-flex.p-1.rounded-2xl.nk-glass.gap-1 > button.whitespace-nowrap
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep expanded interview answers in the same centered reading column. */
.nk-app-shell main.nk-shell-main:has(
  .inline-flex.p-1.rounded-2xl.nk-glass.gap-1 > button.whitespace-nowrap
) .nk-guard .nk-prose {
  width: 100%;
  max-width: 96ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Quiz, scenario, and interview roots use 2xl/3xl width utilities. */
.nk-app-shell main.nk-shell-main:has(
  .inline-flex.p-1.rounded-2xl.nk-glass.gap-1 > button.whitespace-nowrap
) :is(.max-w-2xl, .max-w-3xl) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ticket workspace: the page header already identifies the active incident. */
.nk-app-shell nav[aria-label="My tickets"] {
  display: none !important;
}

.ticket-guidance {
  margin: 12px 16px 0;
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
  color: #172338;
}
.ticket-guidance__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ticket-guidance__eyebrow {
  margin: 0 0 3px;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.ticket-guidance h2 {
  margin: 0;
  color: #172338;
  font-size: 15px;
  line-height: 1.25;
}
.ticket-guidance__intro {
  margin: 6px 0 10px;
  color: #334155;
  font-size: 12px;
  line-height: 1.45;
}
.ticket-guidance__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticket-guidance__steps li {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dbeafe;
}
.ticket-guidance__steps strong {
  color: #1e3a8a;
  font-size: 12px;
}
.ticket-guidance__steps span {
  color: #475569;
  font-size: 11px;
  line-height: 1.35;
}
.ticket-guidance__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.ticket-guidance__actions button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  background: #fff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.ticket-guidance__actions .ticket-guidance__done {
  margin-left: auto;
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}
.ticket-guidance__dismiss {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 900px) {
  .ticket-guidance__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ticket-guidance { margin: 10px 10px 0; padding: 12px; }
  .ticket-guidance__steps { grid-template-columns: 1fr; }
  .ticket-guidance__actions .ticket-guidance__done { margin-left: 0; }
}

/* Ticket workspace density: scope all compacting to the incident route only. */
.ticket-route .nk-shell-main section:has([data-nk-console]) > div:first-child {
  gap: 6px;
  margin-bottom: 8px;
}
.ticket-route .nk-shell-main section:has([data-nk-console]) > div:first-child > button {
  height: 34px !important;
  padding: 5px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}
.ticket-route [data-nk-console] > div:first-child {
  min-height: 32px !important;
}
.ticket-route [data-nk-console] > div:first-child > button {
  gap: 6px !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}
.ticket-route [data-nk-console] > div:first-child > button > span:first-child {
  width: 7px !important;
  height: 7px !important;
}
.ticket-route .nk-grid-bg {
  max-height: min(620px, calc(100vh - 300px));
  overflow: auto !important;
  padding: 8px !important;
}
.ticket-route .nk-grid-bg > div {
  min-width: 0 !important;
}
.ticket-route .nk-grid-bg svg {
  display: block;
  width: 100% !important;
  min-width: 560px;
  max-height: 540px;
}
.ticket-route .nk-grid-bg svg text {
  font-size: 10px !important;
}
@media (max-width: 1100px) {
  .ticket-route .nk-shell-main section:has([data-nk-console]) > div:first-child > button {
    padding-inline: 8px !important;
    font-size: 11px !important;
  }
}

/* Ticket diagram mode: give the topology room instead of shrinking labels into each other. */
.ticket-route .nk-shell-main > div:has(> section:has(.nk-grid-bg)) {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.58fr) !important;
}
.ticket-route .nk-grid-bg {
  min-height: 480px;
  max-height: min(680px, calc(100vh - 270px));
  overflow: auto !important;
}
.ticket-route .nk-grid-bg svg {
  width: 980px !important;
  min-width: 980px !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
}
.ticket-route .nk-grid-bg svg text {
  font-size: 11px !important;
}
@media (max-width: 1023px) {
  .ticket-route .nk-shell-main > div:has(> section:has(.nk-grid-bg)) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .ticket-route .nk-grid-bg svg {
    width: 900px !important;
    min-width: 900px !important;
  }
}

/* Sandbox dark mode: the workbench has its own variables, so mirror the site theme here. */
html.dark .sb-workbench {
  color-scheme: dark;
  --surface: #111827;
  --sunk: #0b1220;
  --ink: #edf3fb;
  --line: #34445b;
  --accent-hex: #7eacff;
  --accent-ink: #08111f;
  --accent-soft: #243754;
  --sb-on-accent: #08111f;
  --primary: 221 100% 74%;
  --primary-foreground: 222 47% 8%;
  --secondary: 217 28% 20%;
  --secondary-foreground: 214 40% 96%;
  --muted: 217 28% 20%;
  --muted-foreground: 214 20% 72%;
  --accent: 220 35% 25%;
  --accent-foreground: 214 100% 86%;
  --border: 216 28% 28%;
  --input: 216 28% 28%;
  --ring: 221 100% 74%;
  color: var(--ink) !important;
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
}
html.dark .sb-workbench .sb-console-view-select {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark .sb-workbench .sb-button:not(.sb-primary) {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark .sb-workbench .sb-button:not(.sb-primary):hover {
  background-color: var(--sunk) !important;
  border-color: var(--accent-hex) !important;
}
html.dark .sb-workbench .sb-muted {
  color: var(--muted-foreground) !important;
}

/* Keep sandbox action icons visible against the dark workbench. */
html.dark .sb-workbench :is(button, a)[aria-label*="connect" i],
html.dark .sb-workbench :is(button, a)[title*="connect" i],
html.dark .sb-workbench :is(button, a)[data-testid*="connect" i] {
  background-color: #1d4ed8 !important;
  border-color: #7eacff !important;
  color: #ffffff !important;
}
html.dark .sb-workbench :is(button, a)[aria-label*="delete" i],
html.dark .sb-workbench :is(button, a)[title*="delete" i],
html.dark .sb-workbench :is(button, a)[data-testid*="delete" i] {
  background-color: #4c1d2a !important;
  border-color: #fb7185 !important;
  color: #fecdd3 !important;
}
html.dark .sb-workbench :is(button, a)[aria-label*="connect" i] svg,
html.dark .sb-workbench :is(button, a)[title*="connect" i] svg,
html.dark .sb-workbench :is(button, a)[data-testid*="connect" i] svg,
html.dark .sb-workbench :is(button, a)[aria-label*="delete" i] svg,
html.dark .sb-workbench :is(button, a)[title*="delete" i] svg,
html.dark .sb-workbench :is(button, a)[data-testid*="delete" i] svg {
  color: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
html.dark .sb-workbench :is(button, a)[aria-label*="connect" i] img,
html.dark .sb-workbench :is(button, a)[title*="connect" i] img,
html.dark .sb-workbench :is(button, a)[data-testid*="connect" i] img,
html.dark .sb-workbench :is(button, a)[aria-label*="delete" i] img,
html.dark .sb-workbench :is(button, a)[title*="delete" i] img,
html.dark .sb-workbench :is(button, a)[data-testid*="delete" i] img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}


/* Home dashboard refresh: visual-only course catalog layer. */
html:not(.dark) .mpl-home-dashboard {
  --mpl-dashboard-bg: #f0f4ff;
  --mpl-dashboard-blue: #0860ff;
  --mpl-dashboard-ink: #191919;
  --mpl-dashboard-muted: #666666;
  --mpl-dashboard-track: #c7daff;
  background: var(--mpl-dashboard-bg) !important;
}
html:not(.dark) .mpl-home-dashboard .nk-shell-main {
  max-width: 1440px !important;
  padding: 24px !important;
  color: var(--mpl-dashboard-ink);
}
html:not(.dark) .mpl-home-dashboard .mpl-home-offer,
html:not(.dark) .mpl-home-dashboard .mpl-home-hero { display: none !important; }
html:not(.dark) .mpl-home-dashboard .mpl-home-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 4px 0 26px;
  padding: 4px 0;
}
html:not(.dark) .mpl-home-dashboard .mpl-home-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--mpl-dashboard-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
html:not(.dark) .mpl-home-dashboard .mpl-home-toolbar h1 {
  margin: 0;
  color: var(--mpl-dashboard-ink) !important;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
html:not(.dark) .mpl-home-dashboard .mpl-home-toolbar p {
  margin: 8px 0 0;
  color: var(--mpl-dashboard-muted) !important;
  font-size: 14px;
}
html:not(.dark) .mpl-home-dashboard .mpl-home-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
  flex-wrap: wrap;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d5def2;
  border-radius: 12px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 8px 20px rgba(45,78,140,.06);
}
html:not(.dark) .mpl-home-dashboard .mpl-course-search__icon { color: var(--mpl-dashboard-blue); font-size: 22px; line-height: 1; }
html:not(.dark) .mpl-home-dashboard .mpl-course-search input {
  min-width: 0;
  width: 100%;
  height: 40px;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--mpl-dashboard-ink) !important;
  font-size: 13px;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid #d5def2;
  border-radius: 13px;
  background: rgba(255,255,255,.78);
}
html:not(.dark) .mpl-home-dashboard .mpl-course-tabs button {
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mpl-dashboard-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-tabs button.is-active {
  background: var(--mpl-dashboard-blue);
  color: #fff;
  box-shadow: 0 5px 12px rgba(8,96,255,.2);
}
html:not(.dark) .mpl-home-dashboard .mpl-course-section {
  margin-top: 0 !important;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-section > div:first-child h2 {
  color: var(--mpl-dashboard-ink) !important;
  font-size: 20px;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-section > div:first-child p { color: var(--mpl-dashboard-muted) !important; }
html:not(.dark) .mpl-home-dashboard .mpl-course-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-card {
  display: flex !important;
  min-height: 252px;
  flex-direction: column;
  padding: 20px !important;
  border: 1px solid rgba(190,205,235,.75) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.75) !important;
  color: var(--mpl-dashboard-ink) !important;
  box-shadow: 0 12px 24px rgba(52,82,140,.07) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-card:hover {
  transform: translateY(-3px);
  border-color: #9fbcff !important;
  box-shadow: 0 18px 32px rgba(52,82,140,.13) !important;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-card h3 {
  margin-top: 14px !important;
  color: var(--mpl-dashboard-ink) !important;
  font-size: 17px;
  line-height: 1.25;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 10px;
  color: var(--mpl-dashboard-muted);
  font-size: 11px;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-card__meta span + span { position: relative; padding-left: 10px; }
html:not(.dark) .mpl-home-dashboard .mpl-course-card__meta span + span::before { content: ""; position: absolute; left: 0; top: 5px; width: 3px; height: 3px; border-radius: 50%; background: #9bb3e6; }
html:not(.dark) .mpl-home-dashboard .mpl-course-card__progress {
  margin-top: auto;
  padding-top: 18px;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-card__progress-label {
  display: block;
  margin-bottom: 7px;
  color: var(--mpl-dashboard-muted);
  font-size: 11px;
  font-weight: 700;
}
html:not(.dark) .mpl-home-dashboard .mpl-course-card__progress-track {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--mpl-dashboard-track);
}
html:not(.dark) .mpl-home-dashboard .mpl-course-card__progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mpl-dashboard-blue); }
html:not(.dark) .mpl-home-dashboard .mpl-course-card [data-dashboard-action="open"] { color: var(--mpl-dashboard-blue) !important; }
html:not(.dark) .mpl-home-dashboard .mpl-course-card[hidden] { display: none !important; }
@media (max-width: 1100px) {
  html:not(.dark) .mpl-home-dashboard .mpl-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  html:not(.dark) .mpl-home-dashboard .nk-shell-main { padding: 18px 14px !important; }
  html:not(.dark) .mpl-home-dashboard .mpl-home-toolbar { align-items: stretch; flex-direction: column; gap: 16px; }
  html:not(.dark) .mpl-home-dashboard .mpl-home-toolbar__actions { align-items: stretch; justify-content: stretch; flex-direction: column; }
  html:not(.dark) .mpl-home-dashboard .mpl-course-search { width: 100%; }
  html:not(.dark) .mpl-home-dashboard .mpl-course-tabs { width: 100%; justify-content: space-between; }
  html:not(.dark) .mpl-home-dashboard .mpl-course-tabs button { flex: 1; padding: 0 6px; }
  html:not(.dark) .mpl-home-dashboard .mpl-course-grid { grid-template-columns: minmax(0, 1fr) !important; }
}


/* Navigation-only accent correction: menu hover and active states use the site blue,
   while orange/amber semantic status badges elsewhere remain unchanged. */
.nk-app-shell [aria-label="Main"] .nk-nav-item[data-accent],
.nk-app-shell [aria-label="Main"] .nk-nav-item[data-accent]:hover,
.nk-app-shell [aria-label="Main"] .nk-nav-item[data-accent][data-on="true"] {
  background: var(--mpl-accent-soft) !important;
  border-color: var(--mpl-accent-soft) !important;
  color: var(--mpl-accent-strong) !important;
}
.nk-app-shell .nk-nav-pop .nk-nav-row:hover,
.nk-app-shell .nk-nav-pop .nk-nav-row[data-on="true"],
.nk-app-shell [aria-label="Sections"] a:hover,
.nk-app-shell [aria-label="Sections"] a[data-on="true"] {
  background-color: var(--mpl-accent-soft) !important;
  border-color: var(--mpl-accent-soft) !important;
  color: var(--mpl-accent-strong) !important;
}
.nk-app-shell .hover\:bg-orange-50:hover,
.nk-app-shell .hover\:bg-orange-100:hover,
.nk-app-shell .hover\:bg-amber-50:hover,
.nk-app-shell .hover\:bg-amber-100:hover {
  background-color: var(--mpl-accent-soft) !important;
}
.nk-app-shell .hover\:text-orange-700:hover,
.nk-app-shell .hover\:text-orange-800:hover,
.nk-app-shell .hover\:text-amber-700:hover,
.nk-app-shell .hover\:text-amber-800:hover {
  color: var(--mpl-accent-strong) !important;
}
.nk-app-shell .hover\:ring-orange-200:hover,
.nk-app-shell .hover\:ring-orange-300:hover,
.nk-app-shell .hover\:ring-amber-200:hover,
.nk-app-shell .hover\:ring-amber-300:hover {
  --tw-ring-color: var(--mpl-accent) !important;
}