@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* =====================================================================================
   Codary — optional New look (classic stays the default). Everything is scoped under html.nl,
   so the classic look (html without .nl) is untouched. Toggle lives in the profile menu (newlook.js).
   Colours follow the theme: --theme-accent from the tint themes, blue otherwise.
   ===================================================================================== */
html.nl {
  --nl-bg: #f4f6f9; --nl-panel: #ffffff; --nl-panel-2: #f8fafc; --nl-border: #e5e7eb; --nl-border-2: #d8dde5;
  --nl-text: #0f172a; --nl-muted: #64748b; --nl-faint: #94a3b8;
  --nl-accent: var(--theme-accent, #2563eb); --nl-accent-rgb: var(--theme-accent-rgb, 37, 99, 235);
  --nl-accent-soft: rgba(var(--nl-accent-rgb), .10); --nl-accent-soft-2: rgba(var(--nl-accent-rgb), .06);
  --nl-radius: 12px;
}
html.nl.dark {
  --nl-bg: #0b1120; --nl-panel: #111827; --nl-panel-2: #0f172a; --nl-border: #1f2937; --nl-border-2: #2b3648;
  --nl-text: #e5e7eb; --nl-muted: #94a3b8; --nl-faint: #64748b;
  --nl-accent: var(--theme-accent, #3b82f6); --nl-accent-rgb: var(--theme-accent-rgb, 59, 130, 246);
  --nl-accent-soft: rgba(var(--nl-accent-rgb), .16); --nl-accent-soft-2: rgba(var(--nl-accent-rgb), .08);
}
html.nl body, html.nl main { background: var(--nl-bg) !important; }

/* ---------- Top bar ---------- */
html.nl #app-screen > header { background: var(--nl-panel) !important; border-bottom: 1px solid var(--nl-border) !important; min-height: 58px; padding: 0 16px !important; gap: 10px !important; }
html.nl #team-picker { background: var(--nl-panel-2) !important; border: 1px solid var(--nl-border) !important; border-radius: 10px !important; padding: 6px 10px !important; color: var(--nl-text) !important; }
html.nl #search-input { background: var(--nl-panel-2) !important; border: 1px solid var(--nl-border) !important; border-radius: 10px !important; height: 38px; padding-right: 64px !important; color: var(--nl-text) !important; }
html.nl #search-input:focus { border-color: var(--nl-accent) !important; box-shadow: 0 0 0 3px var(--nl-accent-soft) !important; }
html.nl .nl-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--nl-faint); border: 1px solid var(--nl-border-2); border-radius: 6px; padding: 1px 6px; pointer-events: none; background: var(--nl-panel); }
html.nl #app-screen > header > button, html.nl #app-screen > header .relative > button:not(#user-menu-btn):not(.theme-toggle) {
  background: var(--nl-panel-2) !important; border: 1px solid var(--nl-border) !important; color: var(--nl-text) !important; border-radius: 10px !important;
}
html.nl #app-screen > header > button:hover, html.nl #activity-btn:hover { border-color: var(--nl-border-2) !important; background: var(--nl-accent-soft-2) !important; }
html.nl #user-menu-btn { border: 1px solid var(--nl-border) !important; border-radius: 12px !important; padding: 4px 10px 4px 4px !important; background: var(--nl-panel-2) !important; }
html.nl #user-avatar { background: var(--nl-accent-soft) !important; color: var(--nl-accent) !important; font-weight: 700 !important; }
html.nl #user-menu, html.nl #activity-panel { background: var(--nl-panel) !important; border-color: var(--nl-border) !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(0,0,0,.18) !important; }

/* ---------- Sidebar ---------- */
html.nl #app-screen aside { background: var(--nl-panel) !important; border-right: 1px solid var(--nl-border) !important; width: 252px !important; padding: 8px 8px 0; }
html.nl .nl-side-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-faint); padding: 12px 10px 6px; display: flex; align-items: center; gap: 6px; }
html.nl .nl-side-label::before { content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--nl-accent); }
html.nl #app-screen aside > button, html.nl .nl-side-item {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0 !important; border-radius: 9px !important; margin: 1px 0; padding: 8px 10px !important;
  font-size: 13.5px !important; font-weight: 500 !important; color: var(--nl-muted) !important; background: transparent !important;
}
html.nl #app-screen aside > button.hidden, html.nl .nl-side-item.hidden { display: none !important; }
html.nl #app-screen aside > button:hover, html.nl .nl-side-item:hover { background: var(--nl-accent-soft-2) !important; color: var(--nl-text) !important; }
html.nl .nl-side-item > span { display: inline !important; }
html.nl .nl-side-item > span.hidden:not(:first-child):not(:nth-child(2)) { display: none !important; }
html.nl #app-screen aside > div.px-3.py-2 { border: 0 !important; padding: 12px 10px 4px !important; }
html.nl #app-screen aside > div.px-3.py-2 > span { color: var(--nl-faint) !important; font-size: 11px !important; letter-spacing: .08em; }
html.nl #page-list { padding-top: 0 !important; }
html.nl .page-item { border-radius: 9px !important; margin: 1px 4px !important; width: calc(100% - 8px) !important; padding: 7px 10px !important; font-weight: 500 !important; color: var(--nl-muted) !important; border-left: 0 !important; }
html.nl .page-item:hover { background: var(--nl-accent-soft-2) !important; color: var(--nl-text) !important; }
html.nl .page-item.active { background: var(--nl-accent-soft) !important; color: var(--nl-accent) !important; border-left: 0 !important; padding-left: 10px !important; font-weight: 600 !important; }
html.nl .category-header, html.nl.dark .category-header, html.nl.dark[data-theme] .category-header {
  background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 8px !important;
  margin: 12px 4px 2px !important; padding: 6px 8px !important; width: calc(100% - 8px) !important;
  font-size: 11px !important; letter-spacing: .08em !important; color: var(--nl-faint) !important; text-shadow: none !important;
}
html.nl .category-header:hover { background: var(--nl-accent-soft-2) !important; color: var(--nl-text) !important; }
html.nl .category-header .category-arrow { color: var(--nl-faint) !important; font-size: 9px; }
html.nl .category-header .category-count { background: var(--nl-panel-2) !important; color: var(--nl-muted) !important; border: 1px solid var(--nl-border) !important; box-shadow: none !important; }

/* ---------- Page header ---------- */
html.nl #page-header { background: var(--nl-bg) !important; border: 0 !important; padding: 22px 28px 6px !important; }
html.nl #page-title { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--nl-text) !important; }
html.nl #page-icon { font-size: 24px !important; }
html.nl #page-header button.text-sm { border-radius: 10px !important; }
html.nl .brand-tab, html.nl.dark .brand-tab { border-radius: 999px !important; background: var(--nl-panel) !important; border: 1px solid var(--nl-border) !important; color: var(--nl-muted) !important; box-shadow: none !important; font-weight: 600; }
html.nl .brand-tab:hover { border-color: var(--nl-border-2) !important; color: var(--nl-text) !important; }
html.nl .brand-tab.active, html.nl.dark .brand-tab.active { background: var(--nl-accent) !important; border-color: var(--nl-accent) !important; color: #fff !important; }

/* ---------- Page summary (stats + language filter) ---------- */
html.nl #content-area { padding: 8px 28px 32px !important; }
.nl-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.nl-stat { background: var(--nl-panel); border: 1px solid var(--nl-border); border-radius: var(--nl-radius); padding: 12px 14px; }
.nl-stat .k { font-size: 12px; color: var(--nl-muted); }
.nl-stat .v { font-size: 20px; font-weight: 700; color: var(--nl-text); margin-top: 2px; }
.nl-toolbar { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.nl-toolbar .lbl { font-size: 12px; color: var(--nl-muted); margin-right: 2px; }
.nl-seg { display: inline-flex; background: var(--nl-panel); border: 1px solid var(--nl-border); border-radius: 10px; padding: 3px; gap: 2px; }
.nl-seg button { font-size: 12.5px; font-weight: 600; color: var(--nl-muted); padding: 4px 12px; border-radius: 7px; }
.nl-seg button:hover { color: var(--nl-text); }
.nl-seg button.on { background: var(--nl-accent); color: #fff; }

/* ---------- Sections & templates ---------- */
html.nl #content-area > [data-section-id] { background: var(--nl-panel); border: 1px solid var(--nl-border); border-radius: 14px; padding: 16px 18px 0; margin-bottom: 18px !important; overflow: visible; }
html.nl #content-area > [data-section-id] h3 { font-size: 18px !important; font-weight: 700 !important; color: var(--nl-text) !important; }
html.nl #content-area > [data-section-id] [data-vars] { border: 0 !important; border-top: 1px solid var(--nl-border) !important; border-radius: 0 0 14px 14px !important; margin: 0 -18px; box-shadow: none !important; background: transparent !important; }
html.nl #content-area > [data-section-id] [data-vars] > * { border-color: var(--nl-border) !important; }
html.nl #content-area > [data-section-id] [data-jumps] { padding-bottom: 14px; }
html.nl #content-area > [data-section-id] [data-jumps]:empty { padding: 0; }
html.nl .variant-row { padding: 16px 18px !important; }
html.nl .variant-row:hover { background: var(--nl-accent-soft-2) !important; }
html.nl .subtab-pill, html.nl.dark .subtab-pill { border-radius: 999px !important; background: var(--nl-panel-2) !important; border: 1px solid var(--nl-border) !important; color: var(--nl-muted) !important; font-weight: 600; transform: none !important; }
html.nl .subtab-pill:hover { color: var(--nl-text) !important; border-color: var(--nl-border-2) !important; }
html.nl .subtab-pill.active, html.nl.dark .subtab-pill.active { background: var(--nl-accent-soft) !important; color: var(--nl-accent) !important; border-color: rgba(var(--nl-accent-rgb), .45) !important; }
html.nl [data-sec-menu] { background: var(--nl-panel) !important; border-color: var(--nl-border) !important; }
html.nl .copy-btn { border-radius: 10px; }

/* Home / table-of-contents cards pick up the same surfaces */
html.nl #content-area .bg-white { background-color: var(--nl-panel) !important; }
html.nl #content-area .border-slate-200 { border-color: var(--nl-border) !important; }

/* Tools group: collapsible (closed by default) */
html.nl .nl-side-toggle { width: 100%; border: 0; background: transparent; cursor: pointer; border-radius: 8px; }
html.nl .nl-side-toggle:hover { background: var(--nl-accent-soft-2); color: var(--nl-muted); }
html.nl .nl-side-toggle .nl-caret { margin-left: auto; font-size: 10px; transition: transform .15s ease; }
html.nl #nl-tools.open .nl-caret { transform: rotate(90deg); }
html.nl .nl-tools-count { font-size: 10px; font-weight: 700; letter-spacing: 0; padding: 0 6px; border-radius: 999px; background: var(--nl-panel-2); border: 1px solid var(--nl-border); color: var(--nl-muted); }
html.nl .nl-tools-count:empty { display: none; }

/* =====================================================================================
   v2 polish — modern type, calmer template rows, readable headers (all scoped to html.nl)
   ===================================================================================== */
html.nl body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
html.nl { --nl-body: #1e293b; }
html.nl.dark { --nl-body: #dbe3ee; }

/* Page header: never squash the title — buttons wrap underneath instead */
html.nl #page-header > div:first-child { flex-wrap: wrap; row-gap: 10px; }
html.nl #page-header > div:first-child > div:first-child { flex: 1 1 360px; min-width: 0; }
html.nl #page-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15; }
html.nl #page-header > div:first-child > div:last-child { flex-wrap: wrap; justify-content: flex-end; }
html.nl #page-header button.text-sm { font-size: 12.5px !important; padding: 6px 12px !important; background: var(--nl-panel) !important; border: 1px solid var(--nl-border) !important; color: var(--nl-muted) !important; }
html.nl #page-header button.text-sm:hover { color: var(--nl-text) !important; border-color: var(--nl-border-2) !important; }
html.nl #page-header #add-section-btn { background: var(--nl-accent) !important; border-color: var(--nl-accent) !important; color: #fff !important; }

/* Stat cards with icons */
html.nl .nl-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; transition: border-color .15s ease, transform .15s ease; }
html.nl .nl-stat:hover { border-color: rgba(var(--nl-accent-rgb), .45); transform: translateY(-1px); }
html.nl .nl-stat .ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--nl-accent-soft); color: var(--nl-accent); }
html.nl .nl-stat .ic svg { width: 19px; height: 19px; }
html.nl .nl-stat .v { font-size: 19px; letter-spacing: -.01em; }

/* Section cards: title with accent bar, calmer header actions */
html.nl #content-area > [data-section-id] { padding-top: 18px; transition: border-color .15s ease; }
html.nl #content-area > [data-section-id]:hover { border-color: var(--nl-border-2); }
html.nl #content-area > [data-section-id] h3 { display: inline-flex; align-items: center; gap: 10px; }
html.nl #content-area > [data-section-id] h3::before { content: ''; width: 4px; height: 18px; border-radius: 3px; background: var(--nl-accent); }
html.nl .sec-tools button { opacity: .75; }
html.nl [data-section-id]:hover .sec-tools button { opacity: 1; }
html.nl [data-subtab-bar] > span > button + button { opacity: 0; transition: opacity .12s; }
html.nl [data-subtab-bar] > span:hover > button + button { opacity: 1; }

/* Template rows: content first. Badges small and quiet; admin actions appear on hover in a compact row */
html.nl .variant-row { gap: 16px !important; align-items: flex-start; }
html.nl .variant-row p.text-\[15px\] { font-size: 15px !important; line-height: 1.75 !important; color: var(--nl-body) !important; }
html.nl .variant-row > div.w-24 { width: auto !important; max-width: 128px; flex-direction: row !important; flex-wrap: wrap; gap: 4px !important; }
html.nl .variant-row > div.w-24 > span { font-size: 10.5px !important; padding: 2px 7px !important; border-radius: 6px !important; box-shadow: none !important; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.nl .variant-row > div.w-24 .lang-badge { background: var(--nl-accent-soft) !important; color: var(--nl-accent) !important; border: 0 !important; font-weight: 600; }
html.nl .variant-row > div.w-24 > span.bg-red-600 { background: rgba(239,68,68,.14) !important; color: #ef4444 !important; border: 0 !important; }
html.nl .variant-row > div.w-24 > span.bg-emerald-600 { background: rgba(16,185,129,.14) !important; color: #10b981 !important; border: 0 !important; }
html.nl.dark .variant-row > div.w-24 > span.bg-red-600 { color: #fca5a5 !important; }
html.nl.dark .variant-row > div.w-24 > span.bg-emerald-600 { color: #6ee7b7 !important; }
html.nl .variant-row > div:last-child { flex-direction: row !important; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; width: 168px; gap: 4px !important; }
html.nl .variant-row > div:last-child > .copy-btn { flex-basis: 100%; justify-content: center; }
html.nl .variant-row > div:last-child > button:not(.copy-btn) { display: none; font-size: 11px !important; padding: 3px 8px !important; border-radius: 7px !important; border: 1px solid var(--nl-border) !important; background: var(--nl-panel) !important; }
html.nl .variant-row:hover > div:last-child > button:not(.copy-btn), html.nl .variant-row:focus-within > div:last-child > button:not(.copy-btn) { display: inline-flex; }
html.nl .variant-row img { border-radius: 10px; }
html.nl mark { border-radius: 5px !important; }

/* Copy button: modern pill */
html.nl .copy-btn { border-radius: 999px !important; padding: 9px 20px !important; font-weight: 600; letter-spacing: .01em; }

/* Sidebar items a touch roomier */
html.nl .page-item { font-size: 13px !important; }
html.nl .page-item .text-base { font-size: 15px; }

/* =====================================================================================
   v3 — distinct layout: full-width content, new section headers with tabs, redesigned Home
   ===================================================================================== */
/* 1) Use the full width (no more empty bands left/right) */
html.nl #content-area { max-width: none !important; margin: 0 !important; }
html.nl .nl-summary { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* 2) Section card: tinted header bar + underline tabs instead of pills */
html.nl #content-area > [data-section-id] { padding: 0 !important; overflow: visible; border-radius: 16px !important; }
html.nl #content-area > [data-section-id] > div:first-child {
  margin: 0 !important; padding: 14px 20px !important; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--nl-accent-soft), transparent 75%); border-bottom: 1px solid var(--nl-border);
}
html.nl #content-area > [data-section-id] h3 { font-size: 19px !important; letter-spacing: -.01em; }
html.nl #content-area > [data-section-id] h3::before { width: 5px; height: 22px; border-radius: 4px; background: var(--nl-accent); }
html.nl [data-subtab-bar].flex { margin: 0 !important; padding: 2px 16px 0; gap: 2px !important; border-bottom: 1px solid var(--nl-border); }
html.nl .subtab-pill, html.nl.dark .subtab-pill {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important;
  padding: 11px 12px 9px !important; margin-bottom: -1px; color: var(--nl-muted) !important; font-weight: 600; font-size: 13.5px;
}
html.nl .subtab-pill:hover { color: var(--nl-text) !important; background: var(--nl-accent-soft-2) !important; }
html.nl .subtab-pill.active, html.nl.dark .subtab-pill.active { color: var(--nl-accent) !important; border-bottom-color: var(--nl-accent) !important; background: transparent !important; }
html.nl #content-area > [data-section-id] [data-vars] { margin: 0 !important; border-top: 0 !important; border-radius: 0 0 16px 16px !important; }
html.nl #content-area > [data-section-id] [data-jumps] { padding: 0 20px; }
html.nl #content-area > [data-section-id] [data-jumps].flex { padding: 12px 20px 16px; border-top: 1px solid var(--nl-border); margin-top: 0 !important; }
html.nl .variant-row { padding: 18px 20px !important; }
html.nl .variant-row > div:first-child span { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--nl-panel-2); border: 1px solid var(--nl-border); opacity: 1 !important; font-size: 11px !important; }

/* 3) Home: greeting hero, quick strips, category cards with tiles */
.nl-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 26px; margin-bottom: 14px;
  border-radius: 18px; border: 1px solid rgba(var(--nl-accent-rgb), .28); background: linear-gradient(135deg, rgba(var(--nl-accent-rgb), .20), rgba(var(--nl-accent-rgb), .04) 60%), var(--nl-panel); }
.nl-hero h2 { font-size: 24px; font-weight: 700; color: var(--nl-text); letter-spacing: -.01em; margin: 0; }
.nl-hero .sub { font-size: 13.5px; color: var(--nl-muted); margin-top: 4px; }
.nl-hero .nums { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-hero .num { background: var(--nl-panel); border: 1px solid var(--nl-border); border-radius: 12px; padding: 8px 14px; min-width: 96px; }
.nl-hero .num b { display: block; font-size: 20px; color: var(--nl-text); }
.nl-hero .num span { font-size: 11.5px; color: var(--nl-muted); }
.nl-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.nl-strip .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-faint); min-width: 118px; }
.nl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--nl-panel); border: 1px solid var(--nl-border); color: var(--nl-text); transition: border-color .15s, transform .15s; }
.nl-chip:hover { border-color: var(--nl-accent); transform: translateY(-1px); }
.nl-chip.hot { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .08); }
html.nl #toc-grid.nl-home-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; gap: 16px !important; }
html.nl .nl-cat { background: var(--nl-panel) !important; border: 1px solid var(--nl-border) !important; border-radius: 16px !important; box-shadow: none !important; transition: transform .15s, border-color .15s; }
html.nl .nl-cat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cat) 55%, var(--nl-border)) !important; }
html.nl .nl-cat-h { background: transparent !important; color: var(--nl-text) !important; padding: 16px 18px 8px !important; font-size: 13px !important; letter-spacing: .06em !important; }
html.nl .nl-cat-h > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
html.nl .nl-cat-h > span:first-child::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--cat); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 22%, transparent); }
html.nl .nl-cat-h > span:last-child { opacity: 1 !important; font-size: 11px !important; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: var(--cat); background: color-mix(in srgb, var(--cat) 14%, transparent); }
html.nl .nl-cat [data-pages] { padding: 6px 10px 12px !important; }
html.nl .nl-cat-item { color: var(--nl-text) !important; font-weight: 500 !important; border-radius: 10px !important; padding: 6px 8px !important; font-size: 13px !important; }
html.nl .nl-cat-item:hover { background: color-mix(in srgb, var(--cat) 12%, transparent) !important; }
html.nl .nl-cat-item > span:first-child { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cat) 14%, transparent); }
html.nl #content-area img[alt="Team banner"] { border-radius: 18px !important; }

/* =====================================================================================
   v4 — readability: stronger contrast between page / cards / text, no truncated page names
   ===================================================================================== */
html.nl.dark {
  --nl-bg: #090e18; --nl-panel: #151f31; --nl-panel-2: #1c283d; --nl-border: #2a374e; --nl-border-2: #3a4963;
  --nl-text: #f3f6fb; --nl-muted: #b0bccd; --nl-faint: #7f8ca3; --nl-body: #e8edf5;
}
html.nl {
  --nl-bg: #eef1f6; --nl-panel: #ffffff; --nl-panel-2: #f6f8fb; --nl-border: #dfe4ec; --nl-border-2: #c9d1dd;
  --nl-text: #0b1324; --nl-muted: #4b5870; --nl-body: #16213a;
}
/* Home grid: wider cards, page names wrap instead of being cut off */
html.nl #toc-grid.nl-home-grid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) !important; }
html.nl .nl-cat [data-pages].grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important; column-gap: 6px !important; row-gap: 2px !important; }
html.nl .nl-cat-item { align-items: center !important; min-height: 40px; color: var(--nl-text) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .015em; }
html.nl .nl-cat-item .truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; }
html.nl .nl-cat-item:hover { background: var(--nl-panel-2) !important; }
html.nl .nl-cat-item > span:first-child { background: var(--nl-panel-2) !important; border: 1px solid var(--nl-border); }
html.nl .nl-cat-h { border-bottom: 1px solid var(--nl-border); padding-bottom: 12px !important; margin-bottom: 4px; }
/* Sidebar + template text a bit brighter */
html.nl .page-item { color: var(--nl-muted) !important; }
html.nl .page-item:hover, html.nl .page-item.active { color: var(--nl-text) !important; }
html.nl .page-item.active { color: var(--nl-accent) !important; }
html.nl .nl-stat .k, html.nl .nl-hero .sub { color: var(--nl-muted) !important; }

/* v5 — Home: no greeting card; banner always shown in full (never cropped) */
html.nl #content-area img[alt="Team banner"] { max-height: none !important; height: auto !important; object-fit: contain !important; }
html.nl .nl-strip:first-child { margin-top: 2px; }

/* v6 — Home header: Hot now + Recently opened replace the recognition marquee (new look only) */
html.nl #reco-marquee-slot { display: none !important; }
html.nl #nl-home-strips { margin-top: 12px; }
html.nl #nl-home-strips .nl-strip { margin-bottom: 8px; }
html.nl #nl-home-strips .nl-strip:last-child { margin-bottom: 0; }

/* =====================================================================================
   v7 — modern depth + bright accents + comfortable reading
   ===================================================================================== */
html.nl { --nl-bubble: #f7f9fc; --nl-bubble-text: #0f172a; --nl-bubble-border: #e3e8f0;
  --nl-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -14px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.06);
  --nl-shadow-hi: 0 1px 0 rgba(255,255,255,.8) inset, 0 22px 40px -16px rgba(15,23,42,.30), 0 4px 10px rgba(15,23,42,.08);
  --nl-accent-2: #8b5cf6; }
html.nl.dark { --nl-bubble: #1c2943; --nl-bubble-text: #f5f8fd; --nl-bubble-border: #2c3b59;
  --nl-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 32px -14px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.35);
  --nl-shadow-hi: 0 1px 0 rgba(255,255,255,.07) inset, 0 24px 44px -16px rgba(0,0,0,.8), 0 4px 12px rgba(0,0,0,.4);
  --nl-accent-2: #a78bfa; }

/* Bright ambient glow behind the page */
html.nl main { background:
  radial-gradient(1100px 480px at 92% -8%, rgba(var(--nl-accent-rgb), .20), transparent 62%),
  radial-gradient(900px 420px at -5% 0%, rgba(139, 92, 246, .14), transparent 60%),
  var(--nl-bg) !important; }

/* 3D cards: layered shadow + top highlight, lift on hover */
html.nl #content-area > [data-section-id], html.nl .nl-stat, html.nl .nl-cat {
  box-shadow: var(--nl-shadow) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
html.nl #content-area > [data-section-id]:hover, html.nl .nl-stat:hover, html.nl .nl-cat:hover { box-shadow: var(--nl-shadow-hi) !important; transform: translateY(-2px); }
html.nl .nl-stat .ic { background: linear-gradient(135deg, var(--nl-accent), var(--nl-accent-2)) !important; color: #fff !important; box-shadow: 0 6px 14px -6px rgba(var(--nl-accent-rgb), .8); }

/* Section header: glass gradient + animated accent bar */
html.nl #content-area > [data-section-id] > div:first-child {
  background: linear-gradient(100deg, rgba(var(--nl-accent-rgb), .22), rgba(139, 92, 246, .10) 45%, transparent 80%) !important; }
html.nl #content-area > [data-section-id] h3::before { background: linear-gradient(180deg, var(--nl-accent), var(--nl-accent-2), var(--nl-accent)) !important; background-size: 100% 200% !important; animation: nlBar 3.5s ease-in-out infinite; }
@keyframes nlBar { 0%, 100% { background-position: 0 0; } 50% { background-position: 0 100%; } }
html.nl .subtab-pill.active, html.nl.dark .subtab-pill.active { border-bottom: 0 !important; background-image: linear-gradient(90deg, var(--nl-accent), var(--nl-accent-2)) !important; background-size: 100% 3px !important; background-repeat: no-repeat !important; background-position: 0 100% !important; }

/* Template text: a calm "message bubble" with comfortable line length — much easier on the eyes */
html.nl .variant-row p.text-\[15px\] {
  background: var(--nl-bubble) !important; color: var(--nl-bubble-text) !important; border: 1px solid var(--nl-bubble-border);
  border-radius: 14px 14px 14px 4px; padding: 14px 18px !important; max-width: 78ch;
  font-size: 15.5px !important; line-height: 1.8 !important; letter-spacing: .005em;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 16px -10px rgba(0,0,0,.45); }
html.nl .variant-row:hover p.text-\[15px\] { border-color: rgba(var(--nl-accent-rgb), .45); }
html.nl .variant-row mark { background: #fde68a !important; color: #78350f !important; padding: 1px 6px !important; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
html.nl .variant-row:hover { background: transparent !important; }

/* 3D Copy button with a shine sweep */
html.nl .copy-btn { position: relative; overflow: hidden; background: linear-gradient(180deg, #22c55e, #059669) !important;
  box-shadow: 0 4px 0 #047857, 0 10px 20px -8px rgba(5, 150, 105, .7) !important; transform: translateY(0); transition: transform .08s ease, box-shadow .08s ease, filter .15s !important; }
html.nl .copy-btn:hover:not(:disabled) { filter: brightness(1.08); }
html.nl .copy-btn:active:not(:disabled) { transform: translateY(3px) !important; box-shadow: 0 1px 0 #047857, 0 4px 10px -6px rgba(5, 150, 105, .7) !important; }
html.nl .copy-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); }
html.nl .variant-row:hover .copy-btn::after { animation: nlShine .9s ease; }
@keyframes nlShine { to { left: 130%; } }
html.nl .copy-btn.copy-btn-success { background: linear-gradient(180deg, #64748b, #475569) !important; box-shadow: 0 4px 0 #334155 !important; }

/* Sidebar: active page as a bright gradient pill */
html.nl .page-item.active { background: linear-gradient(90deg, rgba(var(--nl-accent-rgb), .28), rgba(139, 92, 246, .14)) !important; box-shadow: inset 3px 0 0 var(--nl-accent); }

/* Gentle entrance: sections and cards rise in one after another */
html.nl #content-area > [data-section-id], html.nl #toc-grid > .nl-cat, html.nl .nl-summary > .nl-stat { animation: nlUp .38s cubic-bezier(.2,.8,.2,1) both; }
html.nl #content-area > [data-section-id]:nth-of-type(2), html.nl #toc-grid > .nl-cat:nth-child(2), html.nl .nl-summary > .nl-stat:nth-child(2) { animation-delay: .05s; }
html.nl #content-area > [data-section-id]:nth-of-type(3), html.nl #toc-grid > .nl-cat:nth-child(3), html.nl .nl-summary > .nl-stat:nth-child(3) { animation-delay: .1s; }
html.nl #content-area > [data-section-id]:nth-of-type(4), html.nl #toc-grid > .nl-cat:nth-child(4), html.nl .nl-summary > .nl-stat:nth-child(4) { animation-delay: .15s; }
html.nl #content-area > [data-section-id]:nth-of-type(n+5), html.nl #toc-grid > .nl-cat:nth-child(n+5) { animation-delay: .2s; }
@keyframes nlUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html.nl * { animation: none !important; }
  html.nl #content-area > [data-section-id]:hover, html.nl .nl-stat:hover, html.nl .nl-cat:hover { transform: none; }
}
/* keep the ⋯ dropdown above neighbouring (animated/lifted) cards */
html.nl #content-area > [data-section-id] { position: relative; z-index: 0; }
html.nl #content-area > [data-section-id]:hover, html.nl #content-area > [data-section-id]:focus-within { z-index: 5; }

/* =====================================================================================
   v8 — Home: bright category headers, page tiles with depth, glowing Hot chips
   ===================================================================================== */
html.nl .nl-cat { overflow: hidden; }
html.nl .nl-cat-h { background: linear-gradient(100deg, color-mix(in srgb, var(--cat) 26%, transparent), color-mix(in srgb, var(--cat) 6%, transparent) 55%, transparent 85%) !important;
  padding: 15px 18px 13px !important; margin-bottom: 8px; font-size: 13.5px !important; }
html.nl .nl-cat-h > span:first-child::before { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--cat), color-mix(in srgb, var(--cat) 55%, #fff)); box-shadow: 0 0 12px color-mix(in srgb, var(--cat) 70%, transparent); }
html.nl .nl-cat [data-pages] { gap: 8px !important; padding: 4px 14px 16px !important; }
html.nl .nl-cat-item {
  background: var(--nl-panel-2) !important; border: 1px solid var(--nl-border) !important; border-radius: 12px !important;
  padding: 8px 10px !important; min-height: 46px; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 10px -8px rgba(0,0,0,.5);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease !important; }
html.nl .nl-cat-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cat) 60%, var(--nl-border)) !important;
  background: color-mix(in srgb, var(--cat) 10%, var(--nl-panel-2)) !important; box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--cat) 70%, transparent); }
html.nl .nl-cat-item > span:first-child { width: 30px; height: 30px; border-radius: 9px; border: 0 !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 35%, transparent), color-mix(in srgb, var(--cat) 12%, transparent)) !important; }
html.nl .nl-cat-item .hot-badge { margin-left: auto; }

/* Home header strips: 3D chips, Hot ones glow */
html.nl .nl-chip { box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 14px -10px rgba(0,0,0,.6); }
html.nl .nl-chip:hover { box-shadow: 0 10px 18px -10px rgba(var(--nl-accent-rgb), .8); }
html.nl .nl-chip.hot { background: linear-gradient(135deg, rgba(249, 115, 22, .22), rgba(239, 68, 68, .14)) !important; border-color: rgba(249, 115, 22, .6) !important; animation: nlHotGlow 2.4s ease-in-out infinite; }
@keyframes nlHotGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .0); } 50% { box-shadow: 0 0 16px 1px rgba(249, 115, 22, .45); } }
html.nl .nl-strip .lbl { color: var(--nl-muted) !important; }
html.nl #content-area > div > .mb-4 > p.text-sm { color: var(--nl-muted) !important; }
@media (prefers-reduced-motion: reduce) { html.nl .nl-chip.hot { animation: none; } html.nl .nl-cat-item:hover { transform: none; } }

/* v9 — Quick jump navigator (replaces the stat cards): sections + template titles in the sticky header */
html.nl #nl-jump { margin-top: 12px; }
html.nl .nl-jump-row { display: flex; align-items: flex-start; gap: 10px; }
html.nl .nl-jump-row .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-muted); padding-top: 8px; white-space: nowrap; }
html.nl .nl-jump-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 92px; overflow-y: auto; padding: 2px; flex: 1; min-width: 0; }
html.nl .nl-jg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--nl-panel); border: 1px solid var(--nl-border); box-shadow: 0 4px 10px -8px rgba(0,0,0,.5); }
html.nl .nl-js { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--nl-accent), var(--nl-accent-2, #8b5cf6)); }
html.nl .nl-js:hover { filter: brightness(1.1); }
html.nl .nl-jt { font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 8px; color: var(--nl-muted); }
html.nl .nl-jt:hover { color: var(--nl-text); background: var(--nl-panel-2); }
html.nl .nl-jt.on { color: var(--nl-accent); background: var(--nl-accent-soft); }
html.nl #content-area > [data-section-id].nl-flash { animation: nlFlash 1.2s ease; }
@keyframes nlFlash { 0% { box-shadow: 0 0 0 0 rgba(var(--nl-accent-rgb), .0); } 25% { box-shadow: 0 0 0 4px rgba(var(--nl-accent-rgb), .55); } 100% { box-shadow: var(--nl-shadow); } }

/* v10 — compact sticky header while scrolling: title shrinks, admin buttons + brand tabs fold away,
   the jump list becomes one horizontally scrollable line */
html.nl #page-header { transition: padding .18s ease, background .18s ease, box-shadow .18s ease; }
html.nl #page-header.nl-compact { padding-top: 10px !important; padding-bottom: 10px !important; background: color-mix(in srgb, var(--nl-bg) 88%, transparent) !important; backdrop-filter: blur(10px); box-shadow: 0 8px 20px -14px rgba(0,0,0,.7); }
html.nl #page-header.nl-compact #page-title { font-size: 17px !important; }
html.nl #page-header.nl-compact #page-icon { font-size: 17px !important; }
html.nl #page-header.nl-compact > div:first-child > div:last-child,
html.nl #page-header.nl-compact #brand-tabs,
html.nl #page-header.nl-compact #page-note-slot,
html.nl #page-header.nl-compact #announce-slot { display: none !important; }
html.nl #page-header.nl-compact #nl-jump { margin-top: 8px; }
html.nl #page-header.nl-compact .nl-jump-list { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; scrollbar-width: thin; }
html.nl #page-header.nl-compact .nl-jg { flex-wrap: nowrap; flex-shrink: 0; }
html.nl #page-header.nl-compact .nl-jump-row .lbl { padding-top: 6px; }
html.nl #page-header.nl-compact .nl-js, html.nl #page-header.nl-compact .nl-jt { padding: 4px 9px; font-size: 11.5px; white-space: nowrap; }

/* v11 — jump bar: section titles only, as clean pills */
html.nl .nl-jump-list { gap: 6px; }
html.nl .nl-js { background: var(--nl-panel) !important; color: var(--nl-text) !important; border: 1px solid var(--nl-border); font-weight: 600; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 10px -8px rgba(0,0,0,.5); transition: border-color .15s, color .15s, transform .15s; }
html.nl .nl-js:hover { border-color: var(--nl-accent); color: var(--nl-accent) !important; transform: translateY(-1px); filter: none; }

/* v12 — jump bar: bright gradient pills (one colour per section); subtabs slide in only for the clicked section */
html.nl .nl-jg { padding: 0; border: 0; background: transparent; box-shadow: none; gap: 4px; }
html.nl .nl-jg.open { padding: 3px 6px 3px 3px; border-radius: 999px; background: color-mix(in srgb, var(--c1) 14%, var(--nl-panel)); border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); }
html.nl .nl-js, html.nl .nl-js:hover {
  background: linear-gradient(135deg, var(--c1), var(--c2)) !important; color: #fff !important; border: 0 !important;
  padding: 6px 13px; border-radius: 999px; font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 1px rgba(0,0,0,.18);
  box-shadow: 0 6px 14px -8px var(--c1), inset 0 1px 0 rgba(255,255,255,.25); display: inline-flex; align-items: center; gap: 6px; }
html.nl .nl-js:hover { transform: translateY(-1px); filter: brightness(1.08) saturate(1.1); box-shadow: 0 10px 18px -8px var(--c1), inset 0 1px 0 rgba(255,255,255,.3); }
html.nl .nl-jcar { font-size: 10px; opacity: .9; }
html.nl .nl-jt { color: color-mix(in srgb, var(--c1) 70%, var(--nl-text)); font-weight: 600; border-radius: 999px; padding: 5px 10px; animation: nlChipIn .18s ease both; }
html.nl .nl-jt:hover { background: color-mix(in srgb, var(--c1) 18%, transparent); color: var(--nl-text); }
html.nl .nl-jt.on { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; }
@keyframes nlChipIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }

/* v13 — 🔔 Template updates bell (replaces 📢 in the new look; announcements stay reachable from the panel) */
html.nl #announce-slot { display: none !important; }
#nl-bell { position: relative; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--nl-panel); border: 1px solid var(--nl-border); color: var(--nl-muted); transition: color .15s, border-color .15s; }
#nl-bell:hover { color: var(--nl-text); border-color: var(--nl-border-2); }
#nl-bell.has { color: #f59e0b; border-color: rgba(245, 158, 11, .5); }
#nl-bell.has svg { animation: nlRing 2.6s ease-in-out infinite; transform-origin: 50% 2px; }
@keyframes nlRing { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 85% { transform: rotate(8deg); } 90% { transform: rotate(-5deg); } }
#nl-bell-count:empty { display: none; }
#nl-bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 18px; color: #fff; background: linear-gradient(135deg, #ef4444, #f97316); box-shadow: 0 0 0 2px var(--nl-bg); }
#nl-bell-panel { position: absolute; left: 0; top: calc(100% + 8px); width: 380px; max-width: 86vw; z-index: 60; border-radius: 14px; overflow: hidden;
  background: var(--nl-panel); border: 1px solid var(--nl-border); box-shadow: 0 24px 48px -16px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.25); animation: nlUp .18s ease both; }
.nlb-head { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; font-weight: 700; color: var(--nl-text); border-bottom: 1px solid var(--nl-border); }
.nlb-sub { font-size: 11.5px; font-weight: 500; color: var(--nl-muted); }
.nlb-list { max-height: 380px; overflow-y: auto; }
.nlb-item { width: 100%; display: flex; gap: 10px; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--nl-border); transition: background .12s; }
.nlb-item:hover { background: var(--nl-panel-2); }
.nlb-item.unread { background: rgba(var(--nl-accent-rgb), .08); box-shadow: inset 3px 0 0 var(--nl-accent); }
.nlb-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--nl-panel-2); border: 1px solid var(--nl-border); }
.nlb-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nlb-t { font-size: 12.5px; font-weight: 700; color: var(--nl-text); line-height: 1.35; }
.nlb-m { font-size: 12px; color: var(--nl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlb-time { font-size: 11px; color: var(--nl-faint); }
.nlb-new, .nlb-upd { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.nlb-new { color: #fff; background: linear-gradient(135deg, #10b981, #06b6d4); }
.nlb-upd { color: #fff; background: linear-gradient(135deg, #f59e0b, #f97316); }
.nlb-empty { padding: 26px 14px; text-align: center; font-size: 13px; color: var(--nl-muted); }
.nlb-foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; font-size: 12px; }
.nlb-foot button { color: var(--nl-accent); font-weight: 600; }
.nlb-foot button:hover { text-decoration: underline; }
.nlb-foot b { margin-left: 4px; padding: 0 6px; border-radius: 999px; color: #fff; background: #ef4444; font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) { #nl-bell.has svg { animation: none; } }

/* Language filter in the brand tabs row, pushed to the right */
#brand-tabs > #nl-summary-wrap { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; }
#brand-tabs > #nl-summary-wrap .nl-toolbar { margin: 0; flex-wrap: nowrap; }