/* ============================================================
   Neutronova SHARED THEME — light palette + topbar + language toggle
   ------------------------------------------------------------
   Link this on ANY Lab tool to inherit the unified look:
     <link rel="stylesheet" href="../../css/neutronova-theme.css" />   (adjust depth)
   Then add the topbar markup (uses .nv-* classes here, prefixed to
   avoid clashing with each tool's own .topbar/.brand classes) and the
   .lang toggle, and include js/i18n.js. Page-specific CSS keeps its own
   class names and just inherits these tokens (var(--a) etc.).
   ============================================================ */
:root{
  --bg:#F7FAFF; --bg2:#EEF4FF;
  --panel:rgba(255,255,255,.78); --panel2:rgba(255,255,255,.62);
  --stroke:rgba(12,18,36,.12);
  --text:rgba(12,18,36,.92); --muted:rgba(12,18,36,.68);
  --a:#4C77FF;  /* fleet blue */
  --b:#FFB55C;  /* amber */
  --c:#2FD6B3;  /* mint */
  --d:#B37CFF;  /* violet */
  --shadow:0 18px 50px rgba(8,15,40,.14);
  --radius:18px; --radius2:26px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  /* the same soft pastel wash as Home + Lab */
  background:
    radial-gradient(1000px 520px at 15% 0%, rgba(76,119,255,.18), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(47,214,179,.14), transparent 60%),
    radial-gradient(900px 620px at 50% 110%, rgba(255,181,92,.14), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

/* ---- Shared topbar (nv- prefixed to avoid clashing with tool CSS) ---- */
.nv-topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(247,250,255,.86), rgba(238,244,255,.62));
  border-bottom:1px solid rgba(12,18,36,.08);
}
.nv-topbar__inner{
  max-width:1100px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.nv-brand{ display:inline-flex; gap:10px; align-items:center; text-decoration:none; color:var(--text); }
.nv-brand__pip{
  width:12px; height:26px; border-radius:999px;
  background:linear-gradient(180deg, var(--b), var(--a));
  box-shadow:0 0 0 1px rgba(12,18,36,.10), 0 6px 16px rgba(76,119,255,.18);
}
.nv-brand__text{ font-weight:900; letter-spacing:.14em; font-size:.9rem; text-transform:uppercase; }

.nv-nav{ display:inline-flex; gap:10px; align-items:center; }
.nv-link{
  text-decoration:none; color:rgba(12,18,36,.80);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem;
  padding:9px 14px; border-radius:999px;
  border:1px solid rgba(12,18,36,.12); background:rgba(255,255,255,.55);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.nv-link:hover{ transform:translateY(-1px); background:rgba(255,255,255,.85); border-color:rgba(12,18,36,.18); }

/* ---- Shared language toggle (same look as Home + Lab) ---- */
.lang{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border-radius:999px; border:1px solid rgba(12,18,36,.12); background:rgba(255,255,255,.55);
}
.lang__btn{
  font-family:var(--mono); font-size:12px; font-weight:700;
  padding:7px 12px; border-radius:999px;
  border:1px solid transparent; background:transparent;
  color:rgba(12,18,36,.62); cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.lang__btn:hover{ color:rgba(12,18,36,.9); }
.lang__btn--active{
  color:#fff;
  background:linear-gradient(135deg, var(--a), var(--c));
  box-shadow:0 4px 14px rgba(76,119,255,.30);
}