:root{
  --ink:#0e0e0e; --panel:#121212; --line:#2a2a2a; --text:#f2f2f2; --muted:#bdbdbd;
  --accent:#c1121f; --accent2:#9d0e19; --ring:#ffffff33;
}

/* Shell */
.kc-topnav{
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(18,18,18,.92), rgba(18,18,18,.82));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ffffff18;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  overflow-x: auto; white-space: nowrap;
  /* nice fade on edges while scrolling */
  mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
}

/* Brand */
.kc-brand{ display:flex; align-items:center; gap:8px; margin-right:4px; }
.kc-logo{ width:24px; height:24px; border-radius:6px; }
.kc-brand-text{
  font: 800 16px/1.2 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.02em; color: var(--text);
}

/* Menu row */
.kc-menu-row{ display:flex; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }

/* Links */
.kc-link{
  --pad-x: 12px;
  position: relative; display:inline-flex; align-items:center; gap:.55rem;
  color: var(--text); text-decoration:none;
  padding: 9px var(--pad-x); border-radius:10px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.kc-link i{ width:18px; text-align:center; opacity:.95; }

/* Hover/Focus */
.kc-link:hover{ background: #ffffff10; }
.kc-link:focus-visible{
  outline: 2px solid var(--ring); outline-offset: 2px;
}

/* Active state + animated underline */
.kc-link::after{
  content:""; position:absolute; left: var(--pad-x); right: var(--pad-x); bottom:6px; height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left center; border-radius:2px;
  transition: transform .18s ease, background-position .8s linear;
}
.kc-link:hover::after{ transform: scaleX(1); }
.kc-link.is-active{ background:#ffffff10; }
.kc-link.is-active::after{ transform: scaleX(1); background-position: 200% 0; }

/* Separator bullet */
.kc-sep{ width:8px; height:8px; border-radius:50%; background:#ffffff26; margin:0 4px; }

/* External link hint (optional subtle icon tint) */
.kc-link.ext i{ opacity:.85; }

/* Small screens: slightly tighter */
@media (max-width:720px){
  .kc-link{ --pad-x: 10px; padding:8px var(--pad-x); }
  .kc-brand-text{ display:none; } /* keep just the logo on tiny screens */
}

/* Use per-link vars for the animated underline */
.kc-link::after{
  background: linear-gradient(90deg,
    var(--uline1, var(--accent)),
    var(--uline2, var(--accent2)),
    var(--uline1, var(--accent))
  );
  background-size: 200% 100%;
}

/* Palette (uses your preferred color names) */
.kc-link[data-u="home"]   { --uline1:#ffffff;  --uline2:#ffe9e9; }
.kc-link[data-u="cars"]   { --uline1:#4169E1;  --uline2:#1E90FF; }  /* RoyalBlue → DodgerBlue */
.kc-link[data-u="tracks"] { --uline1:#228B22;  --uline2:#3CB371; }  /* ForestGreen → MediumSeaGreen */
.kc-link[data-u="series"] { --uline1:#6495ED;  --uline2:#4682B4; }  /* CornflowerBlue → SteelBlue */
.kc-link[data-u="top3"]   { --uline1:#FFD700;  --uline2:#FF6347; }  /* Gold → Tomato */
.kc-link[data-u="yt"]     { --uline1:#DC143C;  --uline2:#FF6347; }  /* Crimson → Tomato */

/* Externals (subtle blues/greys) */
.kc-link[data-u="ext1"]   { --uline1:#20B2AA;  --uline2:#6495ED; }  /* LightSlateGrey-ish → CornflowerBlue */
.kc-link[data-u="ext2"]   { --uline1:#B0C4DE;  --uline2:#6495ED; }  /* LightSteelBlue → CornflowerBlue */

/* Optional: tint icon slightly when active */
.kc-link.is-active i{ filter: drop-shadow(0 0 6px var(--uline1)); }
.kc-topnav{
  margin-bottom: 10px;    /* tweak to taste: 8–14px */
}