/* ndevr-base.css — NDEVR web app design system.

   Loaded right after the design tokens (/shared/css/theme.css) and before any feature CSS on every
   NDEVR-controlled app-shell page. This file owns three things:

     1. The cascade-LAYER ORDER for the whole app (below). Because the cascade resolves layer order
        before specificity, a rule in a later layer always wins over an earlier one regardless of
        selector weight — which is how we keep the app !important-free. Feature stylesheets put their
        unique layout in `@layer page`, so it cleanly overrides the shared `@layer components`
        primitives here without specificity games.
     2. The canonical @keyframes (nd-*). One definition each; feature files point `animation:` at these
        instead of redefining the same rotate/fade/bounce under a private name.
     3. The shared UI PRIMITIVES (.nui-*) used across the app — buttons, badges, cards, modals, toasts,
        menus, tabs, spinner, table, tooltip. Colors come exclusively from the --nd-* tokens, so dark
        (default) and light (html[data-theme="light"]) work with zero per-component effort.

   Tokens are NOT defined here — theme.css is the single source of truth. This is deliberately NOT the
   marketing shared/base.css (that ships a 17px/2.6rem document reset meant for content pages, which
   would bleed into these dark dashboards).

   NOTE: this file is fully layered and has NO !important — it only renders on NDEVR-controlled pages.
   The third-party-embeddable product widgets (ndevr-product-widget.css / ndevr-products-widget.css)
   are intentionally unlayered and keep a minimal defensive !important set; they do not load this. */

@layer reset, tokens, base, components, page, utilities;

/* ============================================================================ reset
   A modern, minimal reset. App pages set their own html/body chrome inline (unlayered, so it wins);
   these are safe baselines plus the universal border-box every feature scope already opts into. */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  :where(button, input, select, textarea) { font: inherit; color: inherit; }
  :where(img, svg) { vertical-align: middle; }
}

/* ============================================================================ base
   App-shell element defaults. Pages override via their own (unlayered) <style> block. We do NOT set a
   body font-size here so the existing browser-default sizing on app pages is preserved. */
@layer base {
  body {
    margin: 0;
    font-family: var(--nd-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--nd-text, #e8eaed);
    background: var(--nd-bg, #14171c);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
}

/* ============================================================================ keyframes
   Canonical animations for the INTERNAL (layered) app stylesheets. @keyframes are not subject to the
   cascade, so they live at top level; feature stylesheets reference these names rather than redefining
   them. The third-party-embeddable widgets (product-widget/products-widget/product-manage/kanban/
   quail-assistant) render on host pages where this file is NOT loaded, so they keep their own private
   copies by design — do not fold theirs in here.
     nd-spin     ← was nui-spin / nf-spin / nchat-spin / owl-pv-spin
     nd-fade-in  ← was nf-fadein / nchat-enter
     nd-fade     ← was nchat-fade
     nd-bounce   ← was nchat-bounce
     nd-shimmer  ← was nui-shimmer */
@keyframes nd-spin    { to { transform: rotate(360deg); } }
@keyframes nd-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nd-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes nd-bounce  { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes nd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============================================================================ components
   The .nui-* primitives (ndevr-ui.js). Feature families (.nf-btn, .nk-btn, …) are folded into these
   grouped selectors as each feature file is migrated into @layer page, so a button is defined once. */
@layer components {

  /* --- knob: per-overlay accent override (set --nui-accent inline). z-index knobs sit at the very
     top of the int range, above the OWL flyup/preview overlays, so a confirm/prompt always wins. --- */
  :root {
    --nui-accent: var(--nd-accent-deep, #f2a900);
    --nui-z-menu: 2147483500;
    --nui-z-modal: 2147483505;   /* +3 per stacked layer, applied inline by ndevr-ui.js */
    --nui-z-toast: 2147483630;
    --nui-z-tooltip: 2147483645;
  }

  /* ---------------------------------------------------------------- buttons
     Base is inline-flex and auto-width. No !important: the @layer order keeps page-level overrides
     winning, and there's no hostile host theme on app pages. */
  .nui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 9px 16px;
    border-radius: var(--nd-radius-sm, 8px);
    border: 1px solid var(--nd-border, #353b46);
    background: var(--nd-surface-2, #23272f);
    color: var(--nd-text, #e8eaed);
    font: 600 0.92rem/1.2 var(--nd-font, inherit);
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
  }
  .nui-btn:hover { background: var(--nd-hover, #222732); color: var(--nd-text-strong, #fff); }
  .nui-btn:focus-visible { outline: none; box-shadow: var(--nd-focus, 0 0 0 3px rgba(255, 182, 59, .22)); }
  .nui-btn:disabled { opacity: .55; cursor: default; }
  .nui-btn--primary {
    background: var(--nui-accent);
    border-color: var(--nui-accent);
    color: var(--nd-accent-contrast, #232323);
  }
  .nui-btn--primary:hover { background: var(--nd-accent, #ffb63b); color: var(--nd-accent-contrast, #232323); }
  .nui-btn--ghost { background: transparent; }
  .nui-btn--danger {
    background: transparent;
    border-color: var(--nd-error, #ff7a85);
    color: var(--nd-error, #ff7a85);
  }
  .nui-btn--danger:hover { background: var(--nd-error, #ff7a85); color: var(--nd-surface, #1b1e24); }
  .nui-btn--sm { padding: 5px 11px; font-size: .82rem; }

  /* ---------------------------------------------------------------- badges / chips */
  .nui-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font: 700 .72rem/1.5 var(--nd-font, inherit);
    letter-spacing: .03em; text-transform: uppercase;
    background: var(--nd-tint-2, rgba(255, 255, 255, .12));
    color: var(--nd-text-soft, #c7ccd6);
  }
  .nui-badge--ok    { background: var(--nd-ok, #5ee08a); color: var(--nd-accent-contrast, #232323); }
  .nui-badge--err   { background: var(--nd-error, #ff7a85); color: var(--nd-accent-contrast, #232323); }
  .nui-badge--warn  { background: var(--nd-warn, #ffc857); color: var(--nd-accent-contrast, #232323); }
  .nui-badge--muted { background: transparent; border: 1px solid var(--nd-border, #353b46); color: var(--nd-muted, #9aa3b2); }
  .nui-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--nd-border, #353b46);
    background: transparent; color: var(--nd-text-soft, #c7ccd6);
    font: 600 .82rem/1.4 var(--nd-font, inherit); cursor: pointer;
  }
  .nui-chip:hover { background: var(--nd-tint-1, rgba(255, 255, 255, .06)); }
  .nui-chip.is-on {
    background: var(--nui-accent); border-color: var(--nui-accent);
    color: var(--nd-accent-contrast, #232323);
  }

  /* ---------------------------------------------------------------- card / surface */
  .nui-card {
    background: var(--nd-surface-2, #23272f);
    border: 1px solid var(--nd-border, #353b46);
    border-radius: var(--nd-radius, 12px);
    box-shadow: var(--nd-shadow-1, 0 6px 18px rgba(0, 0, 0, .28));
    padding: 18px;
    color: var(--nd-text, #e8eaed);
  }

  /* ---------------------------------------------------------------- modal */
  .nui-modal {
    position: fixed; inset: 0;
    z-index: var(--nui-z-modal);
    display: flex; align-items: center; justify-content: center;
    background: var(--nd-overlay, rgba(8, 10, 14, .6));
    opacity: 0; transition: opacity .22s ease;
    padding: 24px;
  }
  .nui-modal.is-open { opacity: 1; }
  .nui-modal__sheet {
    position: relative;
    display: flex; flex-direction: column;
    width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
    background: var(--nd-surface-2, #23272f);
    border: 1px solid var(--nd-border, #353b46);
    border-radius: var(--nd-radius, 12px);
    box-shadow: var(--nd-shadow-2, 0 18px 48px rgba(0, 0, 0, .55));
    color: var(--nd-text, #e8eaed);
    transform: translateY(14px) scale(.985);
    transition: transform .22s ease;
  }
  .nui-modal.is-open .nui-modal__sheet { transform: none; }
  .nui-modal__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px 0;
  }
  .nui-modal__title {
    flex: 1; min-width: 0;
    font: 700 1.08rem/1.3 var(--nd-font, inherit);
    color: var(--nd-text-strong, #fff);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nui-modal__x {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    margin: 0; padding: 0;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--nd-muted, #9aa3b2);
    cursor: pointer; box-shadow: none;
  }
  .nui-modal__x:hover { background: var(--nd-hover, #222732); color: var(--nd-text-strong, #fff); }
  .nui-modal__x svg { width: 16px; height: 16px; }
  .nui-modal__body { flex: 1 1 auto; overflow: auto; padding: 14px 18px; }
  .nui-modal__msg { margin: 0; color: var(--nd-text-soft, #c7ccd6); line-height: 1.55; }
  .nui-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 18px 16px; }
  .nui-modal__foot:empty { display: none; }

  /* sheet variant — bottom fly-up with a drag grip (mobile full-bleed) */
  .nui-modal--sheet { align-items: flex-end; padding: 0; }
  .nui-modal--sheet .nui-modal__sheet {
    max-width: 640px; width: 100%;
    margin: 0 auto;
    max-height: 86vh;
    border-radius: var(--nd-radius, 12px) var(--nd-radius, 12px) 0 0;
    border-bottom: 0;
    transform: translateY(100%);
    transition: transform .28s ease;
  }
  .nui-modal--sheet.is-open .nui-modal__sheet { transform: none; }
  .nui-modal__grip {
    flex: 0 0 auto;
    width: 44px; height: 5px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: var(--nd-border, #353b46);
    cursor: grab;
  }

  /* page variant — full-viewport opaque editor surface (deliberate: Esc/backdrop do NOT dismiss) */
  .nui-modal--page { padding: 0; background: var(--nd-bg, #14171c); }
  .nui-modal--page .nui-modal__sheet {
    max-width: none; width: 100%; height: 100%; max-height: none;
    border: 0; border-radius: 0; box-shadow: none;
    background: var(--nd-bg, #14171c);
  }

  /* ---------------------------------------------------------------- toast */
  .nui-toasts {
    position: fixed; right: 18px; bottom: 18px;
    z-index: var(--nui-z-toast);
    display: flex; flex-direction: column; gap: 8px;
    max-width: min(380px, calc(100vw - 36px));
    pointer-events: none;
  }
  .nui-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    border-radius: var(--nd-radius-sm, 8px);
    border: 1px solid var(--nd-border, #353b46);
    border-left: 3px solid var(--nd-muted, #9aa3b2);
    background: var(--nd-surface-2, #23272f);
    color: var(--nd-text, #e8eaed);
    box-shadow: var(--nd-shadow-1, 0 6px 18px rgba(0, 0, 0, .28));
    font: 500 .9rem/1.45 var(--nd-font, inherit);
    cursor: pointer;
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .nui-toast.is-open { opacity: 1; transform: none; }
  .nui-toast--ok  { border-left-color: var(--nd-ok, #5ee08a); }
  .nui-toast--err { border-left-color: var(--nd-error, #ff7a85); }
  .nui-toast__msg { flex: 1; min-width: 0; overflow-wrap: break-word; }
  @media (max-width: 560px) {
    .nui-toasts { right: 0; left: 0; bottom: 12px; margin: 0 auto; align-items: center; }
  }

  /* ---------------------------------------------------------------- menu */
  .nui-menu {
    position: fixed;
    z-index: var(--nui-z-menu);
    min-width: 200px; max-width: 320px;
    padding: 6px;
    border-radius: var(--nd-radius-sm, 8px);
    border: 1px solid var(--nd-border, #353b46);
    background: var(--nd-surface-2, #23272f);
    box-shadow: var(--nd-shadow-2, 0 18px 48px rgba(0, 0, 0, .55));
    opacity: 0; transform: translateY(4px);
    transition: opacity .14s ease, transform .14s ease;
  }
  .nui-menu.is-open { opacity: 1; transform: none; }
  .nui-menu__item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 12px;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--nd-text, #e8eaed);
    font: 500 .92rem/1.3 var(--nd-font, inherit);
    text-align: left; text-decoration: none; text-transform: none;
    cursor: pointer; box-shadow: none;
  }
  .nui-menu__item:hover:not(:disabled) { background: var(--nd-hover, #222732); color: var(--nd-text-strong, #fff); }
  .nui-menu__item:disabled { opacity: .5; cursor: default; }
  .nui-menu__item.is-danger { color: var(--nd-error, #ff7a85); }
  .nui-menu__sep { height: 1px; margin: 5px 4px; background: var(--nd-line, #2a2f39); }

  /* ---------------------------------------------------------------- tabs */
  .nui-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--nd-line, #2a2f39);
  }
  .nui-tab {
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--nd-muted, #9aa3b2);
    font: 600 .92rem/1.3 var(--nd-font, inherit);
    text-transform: none;
    cursor: pointer; box-shadow: none;
  }
  .nui-tab:hover { color: var(--nd-text, #e8eaed); }
  .nui-tab.is-active {
    color: var(--nd-text-strong, #fff);
    border-bottom-color: var(--nd-accent, #ffb63b);
  }

  /* ---------------------------------------------------------------- spinner / busy / skeleton */
  .nui-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid var(--nd-tint-2, rgba(255, 255, 255, .12));
    border-top-color: var(--nd-accent, #ffb63b);
    border-radius: 50%;
    animation: nd-spin .7s linear infinite;
    vertical-align: middle;
  }
  .nui-busy {
    position: absolute; inset: 0;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: var(--nd-overlay, rgba(8, 10, 14, .6));
    border-radius: inherit;
  }
  .nui-skeleton {
    height: 14px; border-radius: 6px;
    background: linear-gradient(90deg,
      var(--nd-tint-1, rgba(255, 255, 255, .06)) 25%,
      var(--nd-tint-2, rgba(255, 255, 255, .12)) 50%,
      var(--nd-tint-1, rgba(255, 255, 255, .06)) 75%);
    background-size: 200% 100%;
    animation: nd-shimmer 1.3s ease infinite;
  }

  /* ---------------------------------------------------------------- empty state */
  .nui-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 34px 18px;
    text-align: center;
    color: var(--nd-muted, #9aa3b2);
  }
  .nui-empty__icon { font-size: 30px; line-height: 1; }
  .nui-empty__title { font: 700 1rem/1.3 var(--nd-font, inherit); color: var(--nd-text, #e8eaed); }
  .nui-empty__hint { font-size: .88rem; max-width: 42ch; }
  .nui-empty .nui-btn { margin-top: 8px; }

  /* ---------------------------------------------------------------- table */
  .nui-table-wrap { overflow: auto; border: 1px solid var(--nd-line, #2a2f39); border-radius: var(--nd-radius-sm, 8px); }
  .nui-table { width: 100%; border-collapse: collapse; font: 400 .92rem/1.4 var(--nd-font, inherit); color: var(--nd-text, #e8eaed); }
  .nui-table th {
    position: sticky; top: 0;
    padding: 10px 12px;
    text-align: left;
    font: 700 .78rem/1.4 var(--nd-font, inherit);
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--nd-muted, #9aa3b2);
    background: var(--nd-surface, #1b1e24);
    border-bottom: 1px solid var(--nd-border, #353b46);
    white-space: nowrap;
  }
  .nui-table th.is-sortable { cursor: pointer; user-select: none; }
  .nui-table th.is-sortable:hover { color: var(--nd-text, #e8eaed); }
  .nui-table th.is-asc::after  { content: " ↑"; color: var(--nd-accent-text, #ffb63b); }
  .nui-table th.is-desc::after { content: " ↓"; color: var(--nd-accent-text, #ffb63b); }
  .nui-table td { padding: 10px 12px; border-bottom: 1px solid var(--nd-line, #2a2f39); }
  .nui-table tbody tr:last-child td { border-bottom: 0; }
  .nui-table tbody tr.is-clickable { cursor: pointer; }
  .nui-table tbody tr.is-clickable:hover td { background: var(--nd-tint-1, rgba(255, 255, 255, .06)); }
  .nui-table__empty { padding: 0; }
  .nui-table__skeleton-row td .nui-skeleton { width: 70%; }

  /* ---------------------------------------------------------------- tooltip (pure CSS, data-nui-tip) */
  [data-nui-tip] { position: relative; }
  [data-nui-tip]:hover::after, [data-nui-tip]:focus-visible::after {
    content: attr(data-nui-tip);
    position: absolute; left: 50%; bottom: calc(100% + 7px);
    transform: translateX(-50%);
    z-index: var(--nui-z-tooltip);
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid var(--nd-border, #353b46);
    background: var(--nd-surface-2, #23272f);
    color: var(--nd-text, #e8eaed);
    font: 500 .78rem/1.35 var(--nd-font, inherit);
    white-space: nowrap; max-width: 280px;
    box-shadow: var(--nd-shadow-1, 0 6px 18px rgba(0, 0, 0, .28));
    pointer-events: none;
  }

  /* ---------------------------------------------------------------- field scope helper
     NDEVRUI.field() wraps its .nf-field in .ndevr-forms so the forms kit styles it anywhere; the
     wrapper itself must not introduce card chrome on host pages. */
  .nui-field-scope { background: transparent; padding: 0; margin: 0 0 2px; }

  /* ---------------------------------------------------------------- app top bar
     Sticky page header: brand on the left, controls (theme toggle + nav cluster) cluster on the right.
     The brand's margin-right:auto pushes everything after it to the right edge — so dropping a
     [data-ndevr-nav] account widget + theme toggle after the brand lands them on the right (no stray
     center-floated control). Used by app-shell pages that aren't the Vue app (e.g. the developer portal). */
  .nui-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--nd-border, #353b46);
    background: var(--nd-bg, #14171c);
    position: sticky; top: 0; z-index: 30;
    backdrop-filter: saturate(140%) blur(6px);
  }
  .nui-brand {
    margin-right: auto;
    font-size: 18px; font-weight: 700; letter-spacing: .01em;
    color: var(--nd-text, #e8eaed); text-decoration: none;
  }
  .nui-brand .gold { color: var(--nd-accent-text, #ffb63b); }
  .gold { color: var(--nd-accent-text, #ffb63b); }  /* generic gold-text utility (wordmark accents) */

  /* ---------------------------------------------------------------- page hero (h1 + subtitle) */
  .nui-hero { margin: 14px 4px 26px; }
  .nui-hero h1 { font-size: clamp(24px, 5vw, 30px); font-weight: 700; margin: 0 0 6px; }
  .nui-hero p { color: var(--nd-muted, #9aa3b2); margin: 0; font-size: 16px; max-width: 70ch; }

  /* ---------------------------------------------------------------- responsive card grid */
  .nui-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
  }
  .nui-grid__span { grid-column: 1 / -1; }

  /* ---------------------------------------------------------------- card heading (use inside .nui-card) */
  .nui-card__title {
    font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--nd-accent-text, #ffb63b); margin: 0 0 14px; font-weight: 700;
  }
  .nui-card__sub { color: var(--nd-muted, #9aa3b2); font-size: 13.5px; margin: -8px 0 14px; }

  /* ---------------------------------------------------------------- list (title + sub + trailing action)
     A vertical list of rows; each row carries a title, an optional sub line, and a trailing "go"
     affordance. Rows are borderless with a hover tint. Models nav-style link lists (<a> rows) and
     clickable item lists (<div> rows) alike. */
  .nui-list { display: flex; flex-direction: column; gap: 2px; margin: 0; }
  .nui-list__item {
    display: flex; align-items: baseline; gap: 10px;
    padding: 9px 10px; border-radius: var(--nd-radius-sm, 8px);
    text-decoration: none; color: var(--nd-text, #e8eaed);
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .nui-list__item:hover { background: var(--nd-hover, #222732); }
  .nui-list__title { font-weight: 600; }
  .nui-list__sub { color: var(--nd-muted, #9aa3b2); font-size: 12.5px; }
  .nui-list__go { margin-left: auto; color: var(--nd-accent-text, #ffb63b); font-weight: 600; flex: 0 0 auto; }

  /* ---------------------------------------------------------------- misc layout helpers */
  .nui-page     { max-width: 1060px; margin: 0 auto; padding: 26px 20px 80px; }  /* centered content column */
  .nui-btn__sub { font-weight: 500; font-size: 12px; opacity: .8; }      /* muted sub-label inside a .nui-btn */
  .nui-btn-row  { display: flex; flex-wrap: wrap; gap: 10px; }            /* a row of buttons */
  .nui-meta     { color: var(--nd-muted, #9aa3b2); font-size: 12.5px; margin-top: 12px; }  /* small caption/note */
}

/* Shared theme toggle (sun/moon) for app-page headers (chat, library, …). The click is wired by each
   page — a Vue @click calling NDEVRWeb.theme.toggle(), or site.js's [data-ndevr-theme-toggle]; the icon
   swaps purely on html[data-theme]. Self-contained so it looks right wherever it's dropped. */
@layer components {
  .ndevr-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; cursor: pointer; border-radius: var(--nd-radius-sm, 8px); background: var(--nd-surface, #1b1e24); border: 1px solid var(--nd-line, #2a2f39); color: var(--nd-text, #e8eaed); transition: background .15s, border-color .15s, color .15s; }
  .ndevr-theme-toggle:hover { background: var(--nd-hover, #222732); border-color: var(--nd-border, #353b46); color: var(--nd-text-strong, #fff); }
  .ndevr-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ndevr-theme-toggle .tt-moon { display: none; }
  html[data-theme="light"] .ndevr-theme-toggle .tt-sun { display: none; }
  html[data-theme="light"] .ndevr-theme-toggle .tt-moon { display: block; }
}