/* Varko-inspired visual overhaul for MyPnetLab. Visual layer only: routes, auth, sandbox logic and data flows remain app-owned. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --mpl-varko-bg: #f4f0e8;
  --mpl-varko-surface: #fffdf8;
  --mpl-varko-surface-raised: #ffffff;
  --mpl-varko-ink: #171714;
  --mpl-varko-muted: #6f706b;
  --mpl-varko-line: #dedbd2;
  --mpl-varko-accent: #f36b3f;
  --mpl-varko-accent-strong: #dc4d26;
  --mpl-varko-accent-soft: #ffebe3;
  --mpl-varko-shadow: 0 20px 55px rgba(34, 28, 20, .08);
  --mpl-varko-radius: 18px;
}
html.dark {
  color-scheme: dark;
  --mpl-varko-bg: #111210;
  --mpl-varko-surface: #191a17;
  --mpl-varko-surface-raised: #20211d;
  --mpl-varko-ink: #f6f2ea;
  --mpl-varko-muted: #aaa99f;
  --mpl-varko-line: #34352f;
  --mpl-varko-accent: #ff8055;
  --mpl-varko-accent-strong: #ff9a75;
  --mpl-varko-accent-soft: #3b251d;
  --mpl-varko-shadow: 0 22px 60px rgba(0, 0, 0, .24);
}
html { scroll-behavior: smooth; }
body, #root {
  background: var(--mpl-varko-bg) !important;
  color: var(--mpl-varko-ink) !important;
  font-family: 'DM Sans', Inter, ui-sans-serif, system-ui, sans-serif !important;
}
body { line-height: 1.6; }
h1,h2,h3,h4,h5,h6,.font-heading {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
  letter-spacing: -.045em !important;
  color: var(--mpl-varko-ink) !important;
}
p { line-height: 1.7; }
::selection { background: var(--mpl-varko-accent); color: #171714; }
a,button { -webkit-tap-highlight-color: transparent; }
a { transition: color .2s ease, opacity .2s ease; }
button, [role=button] {
  transition: transform .22s cubic-bezier(.2,.75,.25,1), background-color .22s ease,
    border-color .22s ease, box-shadow .22s ease, color .22s ease !important;
}
button:hover:not(:disabled), [role=button]:hover {
  transform: translateY(-1px);
}
:focus-visible { outline: 2px solid var(--mpl-varko-accent) !important; outline-offset: 3px; }
html:not(.dark) .nk-app-shell, html.dark .nk-app-shell {
  background: var(--mpl-varko-bg) !important;
  color: var(--mpl-varko-ink) !important;
}
.nk-shell-main { padding-bottom: clamp(28px, 5vw, 72px); }
.nk-shell-main > section, .nk-shell-main section.mpl-course-section {
  border-color: var(--mpl-varko-line);
}
.nk-app-shell nav, .nk-app-shell header, .nk-app-shell [role=navigation] {
  background: color-mix(in srgb, var(--mpl-varko-bg) 88%, transparent) !important;
  color: var(--mpl-varko-ink) !important;
  border-color: var(--mpl-varko-line) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--mpl-varko-line) 65%, transparent) !important;
  backdrop-filter: blur(18px) saturate(135%);
}
.nk-nav-item { border-radius: 999px !important; font-weight: 600 !important; }
.nk-nav-item:hover, .nk-nav-item[data-open=true] { background: var(--mpl-varko-accent-soft) !important; color: var(--mpl-varko-ink) !important; }
.nk-nav-item[data-on=true] { color: var(--mpl-varko-accent-strong) !important; }
.nk-nav-cta {
  background: var(--mpl-varko-accent) !important;
  color: #171714 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--mpl-varko-accent) 22%, transparent) !important;
}
.nk-nav-cta:hover { background: var(--mpl-varko-accent-strong) !important; transform: translateY(-2px) !important; }
.nk-nav-pop, .nk-nav-pop.nk-nav-pop, .nk-nav-row {
  background: var(--mpl-varko-surface) !important;
  color: var(--mpl-varko-ink) !important;
  border-color: var(--mpl-varko-line) !important;
}
.nk-nav-row:hover { background: var(--mpl-varko-accent-soft) !important; }
.nk-home-hero, .mpl-home-hero {
  border-radius: 28px !important;
  border: 1px solid var(--mpl-varko-line) !important;
  background:
    radial-gradient(ellipse at 88% 10%, color-mix(in srgb, var(--mpl-varko-accent) 18%, transparent), transparent 38%),
    var(--mpl-varko-surface) !important;
  box-shadow: var(--mpl-varko-shadow) !important;
  overflow: hidden;
}
.nk-home-hero h1, .mpl-home-hero h1 { font-size: clamp(2.6rem, 6vw, 5.4rem) !important; line-height: .99 !important; max-width: 13ch; }
.mpl-home-toolbar { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; padding:clamp(24px,4vw,48px) 0 20px; }
.mpl-home-eyebrow, .eyebrow, .nk-home-eyebrow {
  color: var(--mpl-varko-accent-strong) !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .16em !important;
}
.mpl-home-toolbar h1 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; margin:8px 0; }
.mpl-home-toolbar p { color:var(--mpl-varko-muted); margin:0; }
.mpl-course-search input { border-radius:999px !important; background:var(--mpl-varko-surface) !important; border:1px solid var(--mpl-varko-line) !important; }
.mpl-course-tabs { display:flex; flex-wrap:wrap; gap:6px; padding:5px; border-radius:999px; background:var(--mpl-varko-surface) !important; border:1px solid var(--mpl-varko-line); }
.mpl-course-tabs button { border-radius:999px !important; padding:9px 14px; color:var(--mpl-varko-muted); }
.mpl-course-tabs button.is-active { background:var(--mpl-varko-ink) !important; color:var(--mpl-varko-bg) !important; }
.nk-home-track, .mpl-course-card {
  background:var(--mpl-varko-surface) !important;
  color:var(--mpl-varko-ink) !important;
  border:1px solid var(--mpl-varko-line) !important;
  border-radius:20px !important;
  box-shadow:none !important;
  transition:transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, border-color .28s ease !important;
}
.nk-home-track:hover, .mpl-course-card:hover {
  border-color:var(--mpl-varko-accent) !important;
  box-shadow:var(--mpl-varko-shadow) !important;
  transform:translateY(-5px) !important;
}
.nk-track-cover { background:var(--mpl-varko-surface-raised) !important; }
.nk-track-cover:after { background:var(--mpl-varko-accent) !important; height:4px !important; }
.mpl-course-card__meta { color:var(--mpl-varko-muted) !important; gap:8px; }
.mpl-course-card__meta span { background:var(--mpl-varko-bg); border:1px solid var(--mpl-varko-line); border-radius:999px; padding:4px 8px; font-size:11px; }
.mpl-course-card__progress-track { background:var(--mpl-varko-line) !important; border-radius:99px; }
.mpl-course-card__progress-track span { background:var(--mpl-varko-accent) !important; }
.nk-shell-main [class*="rounded-2xl"], .nk-shell-main [class*="rounded-3xl"] {
  border-color:var(--mpl-varko-line);
}
.nk-shell-main .bg-white, .nk-shell-main .bg-slate-50, .nk-shell-main .bg-gray-50,
.nk-shell-main .bg-zinc-50 {
  background-color:var(--mpl-varko-surface) !important; color:var(--mpl-varko-ink) !important;
}
.nk-shell-main .border-slate-100, .nk-shell-main .border-slate-200, .nk-shell-main .border-gray-100,
.nk-shell-main .border-gray-200, .nk-shell-main .border-zinc-100, .nk-shell-main .border-zinc-200 {
  border-color:var(--mpl-varko-line) !important;
}
.nk-shell-main input, .nk-shell-main select, .nk-shell-main textarea, input, select, textarea {
  background-color:var(--mpl-varko-surface) !important; color:var(--mpl-varko-ink) !important;
  border-color:var(--mpl-varko-line) !important; border-radius:10px;
}
.nk-shell-main input::placeholder, input::placeholder, textarea::placeholder { color:var(--mpl-varko-muted) !important; }
.nk-shell-main button.bg-blue-600, .nk-shell-main button.bg-indigo-600,
.nk-shell-main a.bg-blue-600, .nk-shell-main button[class*="bg-teal-"] {
  background:var(--mpl-varko-accent) !important; color:#171714 !important; border-radius:999px !important;
}
.nk-shell-main button.bg-blue-600:hover, .nk-shell-main button.bg-indigo-600:hover,
.nk-shell-main a.bg-blue-600:hover { background:var(--mpl-varko-accent-strong) !important; }
.nk-shell-main [role=tab][aria-selected=true], .nk-shell-main button[aria-pressed=true] {
  border-color:var(--mpl-varko-accent) !important;
}
pre, code, .font-mono { font-family:'JetBrains Mono', ui-monospace, monospace !important; }
.nk-shell-main table th { background:var(--mpl-varko-surface-raised) !important; color:var(--mpl-varko-ink) !important; }
.nk-shell-main table td { border-color:var(--mpl-varko-line) !important; }
.nk-home-track:focus-visible, .mpl-course-card:focus-visible { outline:2px solid var(--mpl-varko-accent) !important; outline-offset:4px; }
.auth-shell { width:min(100% - 32px, 480px) !important; padding-top:clamp(30px,7vh,76px) !important; }
.auth-card {
  border:1px solid var(--mpl-varko-line) !important; border-radius:24px !important;
  background:var(--mpl-varko-surface) !important; color:var(--mpl-varko-ink) !important;
  box-shadow:var(--mpl-varko-shadow) !important; padding:clamp(26px,5vw,42px) !important;
}
.auth-card h1 { font-family:'Space Grotesk',sans-serif !important; font-size:clamp(2rem,5vw,2.65rem) !important; }
.auth-shell .brand { color:var(--mpl-varko-ink) !important; }
.auth-card .primary, .auth-card button.primary {
  background:var(--mpl-varko-accent) !important; color:#171714 !important; border-radius:999px !important;
}
.auth-card .primary:hover { background:var(--mpl-varko-accent-strong) !important; }
.auth-card a, .center a { color:var(--mpl-varko-accent-strong) !important; }
@keyframes mpl-varko-enter { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
.nk-shell-main > section, .nk-shell-main > article, .nk-shell-main > div > section { animation:mpl-varko-enter .55s both; }
.nk-shell-main > section:nth-child(2), .nk-shell-main > div > section:nth-child(2) { animation-delay:.05s; }
.nk-shell-main > section:nth-child(3), .nk-shell-main > div > section:nth-child(3) { animation-delay:.1s; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}
@media(max-width:768px) {
  .mpl-home-toolbar { align-items:stretch; }
  .mpl-home-toolbar__actions { width:100%; }
  .mpl-course-tabs { overflow-x:auto; max-width:100%; }
  .nk-home-hero h1, .mpl-home-hero h1 { font-size:clamp(2.3rem,11vw,3.6rem) !important; }
  .nk-shell-main { padding-left:16px; padding-right:16px; }
}