/* nx-kit Tier A (see nx-kit.js). Colours come from the theme: --text, --muted,
   --purple, --panel, --panel-strong. Overshoot curves are on
   purpose: springy, liquid motion is the point of these components. */
:root {
    --kit-ink: var(--text);
    --kit-soft: color-mix(in srgb, var(--text) 6%, transparent);
    --kit-line: color-mix(in srgb, var(--text) 12%, transparent);
    --kit-accent: var(--purple);
    --kit-spring: cubic-bezier(.3, 1.45, .5, 1);
    --kit-out: cubic-bezier(.2, .8, .2, 1);
}

.nx-draw { stroke-dasharray: 24; stroke-dashoffset: 0; }

/* ── 1. Liquid toggle: every switch on the site ─────────────────────────── */
.nx-switch,
.toggle-row > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 1.35rem;
    margin: 0.05rem 0 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
    cursor: pointer;
    transition: background-color .25s var(--kit-out), box-shadow .25s;
}
.nx-switch::before,
.toggle-row > input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0.175rem;
    left: 0.175rem;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: left .42s var(--kit-spring), width .18s var(--kit-out), transform .3s var(--kit-spring);
}
/* The droplet: it stretches while pressed and is pulled long on the way across. */
.nx-switch:active::before,
.toggle-row > input[type="checkbox"]:active::before { width: 1.35rem; }
.nx-switch:checked,
.toggle-row > input[type="checkbox"]:checked { background: var(--kit-accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition-delay: .14s; }
/* Off = plain gray, knob left, colour drops at once (Mike, 2026-10-28: the
   track used to turn red while the knob was still on the left). */
.nx-switch:not(:checked),
.toggle-row > input[type="checkbox"]:not(:checked) { background: color-mix(in srgb, var(--text) 16%, transparent); transition-delay: 0s; }
.nx-switch:checked::before,
.toggle-row > input[type="checkbox"]:checked::before { left: calc(100% - 1.175rem); animation: nx-drip .42s var(--kit-out); }
.nx-switch:checked:active::before,
.toggle-row > input[type="checkbox"]:checked:active::before { left: calc(100% - 1.525rem); }
.nx-switch:not(:checked)::before,
.toggle-row > input[type="checkbox"]:not(:checked)::before { animation: nx-drip-back .42s var(--kit-out); }
.nx-switch:focus-visible,
.toggle-row > input[type="checkbox"]:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 2px; }
.nx-switch:disabled,
.toggle-row > input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
@keyframes nx-drip { 40% { transform: scaleX(1.45) scaleY(.82); } 100% { transform: none; } }
@keyframes nx-drip-back { 40% { transform: scaleX(1.45) scaleY(.82); } 100% { transform: none; } }
/* An old empty decoration div that never had styles. */
.toggle-row > .toggle-switch { display: none; }

/* ── 2. Inline confirm ─────────────────────────────────────────────────── */
.nx-confirm { overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background-color .2s, color .2s, border-color .2s; }
.nx-confirm.is-ask { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.nx-confirm.is-done { background: color-mix(in srgb, var(--text) 8%, transparent) !important; color: var(--text) !important; }
.nx-confirm.is-done u { text-decoration: none; color: var(--kit-accent); font-weight: 700; cursor: pointer; }
.nx-confirm > span { animation: nx-pop-in .26s var(--kit-out); }

/* ── 3. Slide to confirm ───────────────────────────────────────────────── */
.nx-slide { position: relative; height: 3.25rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); overflow: hidden; user-select: none; touch-action: none; }
.nx-slide-fill { position: absolute; inset: 0 auto 0 0; width: 3.25rem; border-radius: 999px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 10%, transparent)); }
.nx-slide-label { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 600; font-size: .92rem; pointer-events: none; background: linear-gradient(90deg, var(--muted) 40%, var(--text) 50%, var(--muted) 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: nx-sheen 2.6s linear infinite; }
.nx-slide-knob { position: absolute; top: .25rem; left: .25rem; width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center; background: var(--text); color: var(--bg); cursor: grab; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.nx-slide-knob svg { width: 1.15rem; height: 1.15rem; }
.nx-slide-knob:active { cursor: grabbing; }
.nx-slide.is-done { background: var(--green); box-shadow: none; }
.nx-slide.is-done .nx-slide-label { -webkit-text-fill-color: #fff; animation: none; }
.nx-slide.is-done .nx-slide-knob { opacity: 0; transition: opacity .2s; }
@keyframes nx-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── Toast stack (layout.ejs builds the toasts into #toast) ─────────────── */
#toast.nx-toasts { position: fixed; right: 1rem; bottom: 5.75rem; z-index: 1300; width: min(24rem, calc(100vw - 2rem)); padding: 0; border: 0; background: none; box-shadow: none; display: block; pointer-events: none; }
.nx-toast { position: absolute; right: 0; bottom: 0; width: 100%; display: flex; gap: .65rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius-md); border: 1px solid rgba(192, 132, 252, .36); background: rgba(20, 15, 34, .98); color: #F4F4F4; box-shadow: 0 18px 50px rgba(0, 0, 0, .42); pointer-events: auto; touch-action: pan-y; transform-origin: 50% 100%; transition: transform .45s var(--kit-spring), opacity .3s, filter .3s; animation: nx-toast-in .45s var(--kit-spring); }
.nx-toast.is-error { border-color: rgba(239, 68, 68, .55); }
.nx-toast.is-success { border-color: rgba(34, 197, 94, .45); }
.nx-toast > i { flex: 0 0 auto; width: .55rem; height: .55rem; margin-top: .42rem; border-radius: 999px; background: var(--purple-2, #c084fc); box-shadow: 0 0 0 4px rgba(192, 132, 252, .15); }
.nx-toast.is-error > i { background: var(--red); box-shadow: 0 0 0 4px rgba(239, 68, 68, .16); }
.nx-toast.is-success > i { background: var(--green); box-shadow: 0 0 0 4px rgba(34, 197, 94, .16); }
.nx-toast.is-leaving { opacity: 0; transform: translateY(12px) scale(.94) !important; }
html:not([data-theme="dyno"]):not([data-theme="super"]):not([data-theme="dusk"]) .nx-toast { background: var(--text); color: var(--surface); border-color: var(--text); }
@keyframes nx-toast-in { from { transform: translateY(24px) scale(.9); opacity: 0; } }

/* ── 5. Notify bell ────────────────────────────────────────────────────── */
.nx-notify { display: inline-flex; align-items: center; gap: .5rem; }
.nx-bell { display: inline-grid; width: 1.1rem; height: 1.1rem; transform-origin: 50% 8%; }
.nx-bell svg { width: 100%; height: 100%; }
.nx-notify.is-ringing { transform: scale(.96); filter: brightness(.92); }
.nx-notify.is-ringing .nx-bell { animation: nx-ring 1s var(--kit-out); }
@keyframes nx-ring { 10% { transform: rotate(18deg); } 25% { transform: rotate(-15deg); } 40% { transform: rotate(10deg); } 55% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } 100% { transform: none; } }

/* ── 6. Copy field ─────────────────────────────────────────────────────── */
.nx-copy { position: relative; display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem .85rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); overflow: hidden; min-width: 0; }
.nx-copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--text); background: none; }
.nx-copy button { position: relative; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); transition: background-color .2s, color .2s; }
.nx-copy button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.nx-copy button > span { position: absolute; display: grid; transition: opacity .2s, transform .3s var(--kit-spring); }
.nx-copy svg { width: 1.05rem; height: 1.05rem; }
.nx-copy-ok { opacity: 0; transform: scale(.6); color: var(--green); }
.nx-copy-ok .nx-draw { stroke-dashoffset: 24; }
.nx-copy-a, .nx-copy-b { transition: transform .3s var(--kit-out); }
.nx-copy.is-copied .nx-copy-a { transform: translate(-2px, -2px); }
.nx-copy.is-copied .nx-copy-b { transform: translate(2px, 2px); }
.nx-copy.is-copied .nx-copy-icon { opacity: 0; transform: scale(.6); transition-delay: .12s; }
.nx-copy.is-copied .nx-copy-ok { opacity: 1; transform: none; transition-delay: .14s; }
.nx-copy.is-copied .nx-copy-ok .nx-draw { stroke-dashoffset: 0; transition: stroke-dashoffset .35s .2s var(--kit-out); }
.nx-copy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 14%, transparent) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
.nx-copy.is-copied::after { transform: translateX(100%); transition: transform .7s var(--kit-out); }

/* ── 7/8. Floating label + field error ─────────────────────────────────── */
.nx-field { position: relative; display: block; }
.nx-field > input, .nx-field > textarea { width: 100%; padding: 1.05rem .9rem .45rem; border-radius: var(--radius-md); border: 1px solid var(--kit-line); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; }
.nx-field > span { position: absolute; left: .9rem; top: .82rem; color: var(--muted); font-size: .92rem; pointer-events: none; transform-origin: 0 0; transition: transform .28s var(--kit-out), color .2s; }
.nx-field > input:focus, .nx-field > textarea:focus { border-color: var(--kit-accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
.nx-field > input:focus + span, .nx-field > input:not(:placeholder-shown) + span,
.nx-field > textarea:focus + span, .nx-field > textarea:not(:placeholder-shown) + span { transform: translateY(-.55rem) scale(.74); color: var(--kit-accent); }
.nx-field > input:not(:focus):not(:placeholder-shown) + span { color: var(--muted); }
.nx-input-row { position: relative; display: flex; align-items: center; border-radius: 999px; border: 1px solid var(--kit-line); background: color-mix(in srgb, var(--text) 4%, transparent); padding: .3rem .3rem .3rem 1rem; transition: border-color .2s; }
.nx-input-row input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); padding: .45rem 0; }
.nx-input-row button { width: 2.3rem; height: 2.3rem; border-radius: 999px; display: grid; place-items: center; background: var(--text); color: var(--bg); }
.nx-input-row button svg { width: 1rem; height: 1rem; }
.nx-input-row:focus-within { border-color: var(--kit-accent); }
.is-error.nx-field > input, .is-error.nx-input-row { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }
.is-error.nx-field, .is-error.nx-input-row { animation: nx-shake .42s var(--kit-out); }
.nx-field-error { max-height: 0; opacity: 0; overflow: hidden; color: #fca5a5; font-size: .82rem; padding-left: .9rem; transform: translateY(-4px); transition: max-height .3s var(--kit-out), opacity .2s, transform .3s var(--kit-out), margin .3s; }
.nx-field-error.is-open { max-height: 4rem; opacity: 1; transform: none; margin-top: .4rem; }
@keyframes nx-shake { 15% { transform: translateX(-7px); } 35% { transform: translateX(6px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(2px); } }

/* ── 9. Dropdown ───────────────────────────────────────────────────────── */
.nx-dd { position: relative; display: inline-block; min-width: 0; max-width: 100%; }
.kit-stage .nx-dd { min-width: 12rem; }
.nx-dd-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.nx-dd-btn { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .85rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); color: var(--text); font-weight: 600; transition: box-shadow .2s; }
.nx-dd-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-dd-btn svg { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--muted); transition: transform .35s var(--kit-spring); }
.nx-dd.is-open .nx-dd-btn { box-shadow: inset 0 0 0 1px var(--kit-accent); }
.nx-dd.is-open .nx-dd-btn svg { transform: rotate(180deg); }
.nx-dd-list { position: fixed; z-index: 70; left: 0; top: 0; min-width: 8rem; width: max-content; max-width: min(22rem, 90vw); padding: .3rem; border-radius: var(--radius-md); background: var(--panel-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--kit-line); transform-origin: 50% 0; transform: scaleY(.6) translateY(-.5rem); opacity: 0; pointer-events: none; transition: transform .38s var(--kit-spring), opacity .18s; max-height: 18rem; overflow: auto; }
.nx-dd.is-open .nx-dd-list, .nx-dd-list.is-open { transform: none; opacity: 1; pointer-events: auto; }
.nx-dd-list button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: .55rem .65rem; border-radius: var(--radius-sm); color: var(--text); text-align: left; opacity: 0; transform: translateY(-6px); transition: background-color .15s, opacity .25s calc(var(--i) * 30ms), transform .35s calc(var(--i) * 30ms) var(--kit-spring); }
.nx-dd.is-open .nx-dd-list button, .nx-dd-list.is-open button { opacity: 1; transform: none; }
.nx-dd-list button:hover, .nx-dd-list button:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); outline: none; }
.nx-dd-list button svg { width: .95rem; height: .95rem; color: var(--kit-accent); }

/* ── 10. Collapsing sidebar ────────────────────────────────────────────── */
.nx-side { position: relative; display: flex; flex-direction: column; gap: .2rem; width: 13rem; padding: .5rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); transition: width .38s var(--kit-out); overflow: hidden; }
.nx-side.is-collapsed { width: 3.6rem; }
.nx-side > a, .nx-side > button:not(.nx-side-toggle) { position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: var(--radius-md); color: var(--muted); white-space: nowrap; transition: color .2s; }
.nx-side > a.is-active, .nx-side > button.is-active { color: var(--text); }
.nx-side svg, .nx-side [data-lucide] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.nx-side span { transition: opacity .12s, transform .2s var(--kit-out); }
.nx-side.is-hiding span, .nx-side.is-collapsed span { opacity: 0; transform: translateX(-4px); }
.nx-side-pill { position: absolute; z-index: 0; top: 0; left: .5rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 10%, transparent); transition: transform .4s var(--kit-spring), height .3s, width .38s var(--kit-out); }
.nx-side-toggle { display: grid; place-items: center; align-self: flex-end; width: 2.6rem; height: 2.2rem; border-radius: var(--radius-md); color: var(--muted); margin-bottom: .25rem; }
.nx-side-toggle:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }

/* ── 11-13. Tabs ───────────────────────────────────────────────────────── */
.nx-tabs { position: relative; display: inline-flex; gap: .15rem; padding: .3rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.nx-tabs > button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .8rem; border-radius: var(--radius-md); color: var(--muted); font-weight: 600; font-size: .88rem; white-space: nowrap; transition: color .2s; }
.nx-tabs > button.is-active { color: var(--text); }
.nx-tabs > button svg, .nx-tabs > button [data-lucide] { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.nx-tabs-tile { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
/* Bar: only the picked tab shows its name, opening on a spring. */
.nx-tabs-bar > button > span { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .4s var(--kit-spring), opacity .2s; }
.nx-tabs-bar > button.is-active > span { max-width: 9rem; opacity: 1; }
.nx-tabs-icons { border-radius: 999px; }
.nx-tabs-icons .nx-tabs-tile, .nx-tabs-icons > button { border-radius: 999px; }
.nx-tabs-jelly { border-radius: 999px; }
.nx-tabs-jelly .nx-tabs-tile, .nx-tabs-jelly > button { border-radius: 999px; }
.nx-tabs-jelly .nx-tabs-tile { background: var(--text); }
.nx-tabs-jelly > button.is-active { color: var(--bg); }

/* ── 14/15. Command bar + search ───────────────────────────────────────── */
.nx-cmd { position: relative; display: inline-grid; grid-template-columns: minmax(0, 1fr); height: 2.6rem; width: 10.5rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); transition: width .45s var(--kit-spring), box-shadow .2s; overflow: hidden; }
.nx-cmd-icon { width: 2.6rem; }
.nx-cmd.is-open { width: min(22rem, 100%); box-shadow: inset 0 0 0 1px var(--kit-accent); }
.nx-cmd > * { grid-area: 1 / 1; }
.nx-cmd-btn { display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; color: var(--muted); font-weight: 600; font-size: .88rem; transition: opacity .2s, transform .3s var(--kit-out); }
.nx-cmd-btn svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.nx-cmd-btn kbd { margin-left: auto; font: 600 .7rem/1 inherit; padding: .2rem .35rem; border-radius: 5px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.nx-cmd-icon .nx-cmd-btn { padding: 0; justify-content: center; }
.nx-cmd-icon .nx-cmd-btn span, .nx-cmd-icon .nx-cmd-btn kbd { display: none; }
.nx-cmd-input { width: 100%; min-width: 0; padding: 0 1rem 0 2.4rem; background: none; border: 0; outline: none; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .2s .1s; }
.nx-cmd.is-open .nx-cmd-input { opacity: 1; pointer-events: auto; }
.nx-cmd.is-open .nx-cmd-btn { pointer-events: none; }
.nx-cmd.is-open .nx-cmd-btn span, .nx-cmd.is-open .nx-cmd-btn kbd { opacity: 0; }
.nx-cmd.is-open .nx-cmd-btn { justify-content: flex-start; padding-left: .85rem; }

/* ── 16. Create menu ───────────────────────────────────────────────────── */
.nx-create { position: relative; display: inline-block; }
.nx-create-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .62rem 1rem; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 700; transition: border-radius .35s var(--kit-spring), transform .2s; }
.nx-create-pill svg { width: 1rem; height: 1rem; transition: transform .4s var(--kit-spring); }
.nx-create.is-open .nx-create-pill svg { transform: rotate(135deg); }
.nx-create-menu { position: absolute; z-index: 40; left: 0; top: calc(100% + .4rem); min-width: 14rem; padding: .35rem; border-radius: 1.2rem; background: var(--text); color: var(--bg); transform-origin: 2rem 0; transform: scale(.35, .2); opacity: 0; pointer-events: none; transition: transform .45s var(--kit-spring), opacity .2s, border-radius .4s; }
.nx-create.is-open .nx-create-menu { transform: none; opacity: 1; pointer-events: auto; border-radius: var(--radius-lg); }
.nx-create-menu > :is(button, a) { width: 100%; text-decoration: none; display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: var(--radius-md); color: inherit; font-weight: 600; text-align: left; opacity: 0; transform: translateY(-4px); transition: background-color .15s, opacity .25s calc(80ms + var(--i) * 35ms), transform .35s calc(80ms + var(--i) * 35ms) var(--kit-spring); }
.nx-create.is-open .nx-create-menu > :is(button, a) { opacity: 1; transform: none; }
.nx-create-menu > :is(button, a):hover { background: rgba(127, 127, 127, .16); }
.nx-create-menu svg, .nx-create-menu [data-lucide] { width: 1.05rem; height: 1.05rem; }

/* ── 17. Radial menu ───────────────────────────────────────────────────── */
.nx-radial { position: relative; display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; }
.nx-radial > button { grid-area: 1 / 1; }
.nx-radial-hub { position: relative; z-index: 2; width: 3.2rem; height: 3.2rem; border-radius: 999px; display: grid; place-items: center; background: var(--text); color: var(--bg); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.nx-radial-hub svg { width: 1.3rem; height: 1.3rem; transition: transform .45s var(--kit-spring); }
.nx-radial.is-open .nx-radial-hub svg { transform: rotate(135deg); }
.nx-radial > button:not(.nx-radial-hub) { z-index: 1; width: 2.6rem; height: 2.6rem; border-radius: 999px; display: grid; place-items: center; background: var(--panel-strong); color: var(--text); box-shadow: inset 0 0 0 1px var(--kit-line), 0 6px 16px rgba(0, 0, 0, .3); transform: scale(.3); opacity: 0; pointer-events: none; transition: transform .45s calc(var(--i) * 35ms) var(--kit-spring), opacity .2s calc(var(--i) * 35ms); }
.nx-radial.is-open > button:not(.nx-radial-hub) { transform: translate(var(--x), var(--y)); opacity: 1; pointer-events: auto; }
.nx-radial > button:not(.nx-radial-hub):hover { background: var(--kit-accent); color: #fff; }
.nx-radial svg, .nx-radial [data-lucide] { width: 1.1rem; height: 1.1rem; }

/* ── 18. Checklist ─────────────────────────────────────────────────────── */
.nx-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.nx-check-native { position: absolute; opacity: 0; pointer-events: none; }
.nx-check-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: var(--radius-md); cursor: pointer; transition: background-color .2s; }
.nx-check-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nx-check-box { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 30%, transparent); color: #fff; transition: box-shadow .25s var(--kit-out), transform .3s var(--kit-spring); }
.nx-check-box svg { width: .85rem; height: .85rem; }
.nx-check-box .nx-draw { stroke-dashoffset: 24; transition: stroke-dashoffset .3s var(--kit-out); }
.nx-check-text { background: linear-gradient(currentColor, currentColor) 0 55% / 0 1.5px no-repeat; transition: background-size .35s var(--kit-out) .1s, color .3s; }
.nx-check-native:checked + .nx-check-box { box-shadow: inset 0 0 0 .7rem var(--kit-accent); transform: scale(1.06); }
.nx-check-native:checked + .nx-check-box .nx-draw { stroke-dashoffset: 0; transition-delay: .12s; }
.nx-check-native:checked ~ .nx-check-text { background-size: 100% 1.5px; color: var(--muted); }
.nx-check-native:focus-visible + .nx-check-box { outline: 2px solid var(--kit-accent); outline-offset: 2px; }

/* ── 19. Upload dropzone ───────────────────────────────────────────────── */
.nx-drop { position: relative; display: block; padding: 1.4rem; border-radius: var(--radius-lg); border: 1.5px dashed color-mix(in srgb, var(--text) 20%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent); cursor: pointer; transition: border-color .2s, background-color .2s, transform .35s var(--kit-spring); }
.nx-drop-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nx-drop-face { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.nx-drop-face small { color: var(--muted); }
.nx-drop-icon { width: 2.6rem; height: 2.6rem; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 8%, transparent); margin-bottom: .3rem; transition: transform .4s var(--kit-spring); }
.nx-drop-icon svg { width: 1.2rem; height: 1.2rem; }
.nx-drop.is-over { border-color: var(--kit-accent); background: rgba(139, 92, 246, .08); transform: scale(1.015); }
.nx-drop.is-over .nx-drop-icon { transform: translateY(-4px) scale(1.12); }
.nx-drop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.nx-drop-list:not(:empty) { margin-top: 1rem; }
.nx-drop-list li { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .75rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; animation: nx-pop-in .4s calc(var(--i) * 60ms) both var(--kit-spring); cursor: default; }
.nx-drop-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-drop-list li small { color: var(--muted); flex: 0 0 auto; }
.nx-drop-list li i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--kit-accent); animation: nx-grow .8s calc(var(--i) * 220ms) var(--kit-out) forwards; }
.nx-drop-list li.is-done i { background: var(--green); }
@keyframes nx-grow { to { width: 100%; } }

/* ── 20/21. Counter + stepper ──────────────────────────────────────────── */
.nx-counter { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); user-select: none; }
.nx-counter-btn { width: 2.3rem; height: 2.3rem; border-radius: 999px; display: grid; place-items: center; color: var(--text); touch-action: manipulation; transition: background-color .15s, transform .2s var(--kit-spring); }
.nx-counter-btn:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.nx-counter-btn:active { transform: scale(.88); }
.nx-counter-btn svg { width: 1rem; height: 1rem; }
.nx-digits { display: inline-flex; justify-content: center; min-width: 3ch; padding: 0 .3rem; font: 700 1.3rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; height: 1.3rem; overflow: hidden; }
.nx-digit { display: inline-block; height: 1.3rem; overflow: hidden; }
.nx-digit > span { display: flex; flex-direction: column; transition: transform .55s var(--kit-spring); }
.nx-digit i { font-style: normal; height: 1.3rem; line-height: 1.3rem; }
.nx-counter.is-wall .nx-digits { animation: nx-shake .35s var(--kit-out); }
.nx-stepper { --pull: 0px; display: inline-flex; align-items: center; justify-content: space-between; gap: .4rem; width: 9rem; height: 2.7rem; padding: 0 .55rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); cursor: ew-resize; user-select: none; touch-action: none; outline: none; }
.nx-stepper:focus-visible { box-shadow: inset 0 0 0 1px var(--kit-accent); }
.nx-stepper b { font-size: 1.1rem; font-variant-numeric: tabular-nums; transform: translateX(var(--pull)); transition: transform .3s var(--kit-spring); }
.nx-stepper.is-held b { transition: none; }
.nx-stepper-side { display: grid; color: var(--muted); }
.nx-stepper-side svg { width: .95rem; height: .95rem; }
.nx-stepper.is-held { background: color-mix(in srgb, var(--text) 10%, transparent); }

/* ── 22. Reorder list ──────────────────────────────────────────────────── */
.nx-reorder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nx-reorder > li { position: relative; display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); transition: box-shadow .2s, background-color .2s; }
.nx-grip { display: grid; color: var(--muted); cursor: grab; touch-action: none; padding: .2rem; margin: -.2rem 0 -.2rem -.2rem; }
.nx-grip svg { width: 1rem; height: 1rem; }
.nx-reorder > li.is-dragging { z-index: 5; background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--kit-accent), 0 14px 30px rgba(0, 0, 0, .35); cursor: grabbing; }
.nx-reorder.is-sorting > li:not(.is-dragging) { background: color-mix(in srgb, var(--text) 3.5%, transparent); }

/* ── 23/24. Skeleton morph + load cards ────────────────────────────────── */
.nx-skel { position: relative; }
.nx-skel > :not(.nx-skel-bars) { opacity: 0; transition: opacity .45s var(--kit-out); }
.nx-skel.is-ready > :not(.nx-skel-bars) { opacity: 1; transition-delay: .2s; }
.nx-skel-bars { position: absolute; inset: 0; pointer-events: none; }
.nx-skel-bars i { position: absolute; border-radius: 6px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; transform-origin: 0 50%; transform: scaleX(.6); transition: transform .5s calc(var(--i) * 30ms) var(--kit-out), opacity .4s calc(.15s + var(--i) * 30ms); }
.nx-skel-bars i::after, .nx-imgshim::after, .nx-loadcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--text) 12%, transparent) 50%, transparent 80%); transform: translateX(-100%); animation: nx-shimmer 1.4s infinite var(--kit-out); }
.nx-skel.is-ready .nx-skel-bars i { transform: scaleX(1); opacity: 0; }
@keyframes nx-shimmer { to { transform: translateX(100%); } }
.nx-loadcards { display: grid; gap: .75rem; }
.nx-loadcard { position: relative; overflow: hidden; opacity: 0; filter: blur(10px); transform: translateY(8px); transition: opacity .6s var(--kit-out), filter .7s var(--kit-out), transform .6s var(--kit-out); }
.nx-loadcard.is-in { opacity: 1; filter: blur(0); transform: none; }
.nx-loadcard > * { transition: opacity .5s var(--kit-out), filter .5s; opacity: .0; }
.nx-loadcard::before { content: ""; position: absolute; inset: 1rem; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--text) 10%, transparent) 0 .7rem, transparent .7rem 1.4rem); border-radius: 6px; transition: opacity .4s; pointer-events: none; }
.nx-loadcard.is-ready > * { opacity: 1; }
.nx-loadcard.is-ready::before, .nx-loadcard.is-ready::after { opacity: 0; animation: none; }

/* ── 25. Image shimmer ─────────────────────────────────────────────────── */
.nx-imgshim { position: relative; overflow: hidden; background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: var(--radius-md); }
.nx-imgshim::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); pointer-events: none; z-index: 1; }
.nx-imgshim img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .6s var(--kit-out), transform .9s var(--kit-out); }
.nx-imgshim.is-loaded img { opacity: 1; transform: none; }
.nx-imgshim.is-loaded::after, .nx-imgshim.is-loaded::before { opacity: 0; animation: none; }

@keyframes nx-pop-in { from { opacity: 0; transform: scale(.9); } }

@media (prefers-reduced-motion: reduce) {
    [class*="nx-"], [class*="nx-"]::before, [class*="nx-"]::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* Shared: initials avatar (Tier B people, voice, profile cards). */
.nx-ava { --h: 260; position: relative; overflow: hidden; display: inline-grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px; background: hsl(var(--h) 70% 58%); color: #fff; font: 800 .72rem/1 Inter, system-ui, sans-serif; letter-spacing: .02em; box-shadow: 0 0 0 2px var(--bg); }
/* The real picture (avatar(name, hue, src)) covers the initials once it loads. */
.nx-ava > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Keyframes shared by several nxkit/ groups. */
@keyframes nx-pf-in { from { opacity: 0; filter: blur(6px); transform: translateY(.35em); } }
@keyframes nx-live { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@keyframes nx-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@keyframes nx-spin { to { rotate: 1turn; } }

/* ════ Upgrades for existing markup (see "Upgrades" in nx-kit.js) ════════ */
/* Tabs: the pill that glides between the old and new tab. */
.nx-glide { position: absolute; z-index: 0; pointer-events: none; }
:where([role="tablist"], .tk-tabs, .mg-tabs, .mu-tabs, .cz-seg, .sup-seg, .fc-seg, .vis-seg, .wse-tabs) > :not(.nx-glide) { position: relative; z-index: 1; }

/* Number fields: − / + sit inside the right edge. */
.nx-num { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.nx-num.is-block { display: block; width: 100%; }
/* min-width: the buttons take 4.2rem, so a narrow field (style="width:5rem") hid its own number. */
.nx-num > input { padding-right: 4.2rem !important; min-width: 7.5rem; -moz-appearance: textfield; appearance: textfield; }
.nx-num > input::-webkit-outer-spin-button, .nx-num > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nx-num > input.is-bump { animation: nx-num-bump .28s var(--kit-out); }
@keyframes nx-num-bump { 40% { color: var(--kit-accent); } }
.nx-num-btns { position: absolute; top: 50%; right: .3rem; translate: 0 -50%; display: flex; gap: .15rem; }
.nx-num-btns button { width: 1.75rem; height: 1.75rem; border-radius: 8px; display: grid; place-items: center; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); touch-action: manipulation; transition: background-color .15s, color .15s, transform .2s var(--kit-spring); }
.nx-num-btns button:hover { background: color-mix(in srgb, var(--text) 13%, transparent); color: var(--text); }
.nx-num-btns button:active { transform: scale(.86); }
.nx-num-btns svg { width: .85rem; height: .85rem; }
.nx-num.is-wall { animation: nx-shake .35s var(--kit-out); }
.nx-num > input:disabled ~ .nx-num-btns { opacity: .4; pointer-events: none; }

/* Range sliders: a filled track and a knob that grows while held. */
input[type="range"].nx-range-native { --p: 50%; -webkit-appearance: none; appearance: none; height: 1.4rem; background: transparent; cursor: pointer; }
input[type="range"].nx-range-native::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--kit-accent) var(--p), color-mix(in srgb, var(--text) 14%, transparent) var(--p)); }
input[type="range"].nx-range-native::-moz-range-track { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 14%, transparent); }
input[type="range"].nx-range-native::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--kit-accent); }
input[type="range"].nx-range-native::-webkit-slider-thumb { -webkit-appearance: none; width: 1.15rem; height: 1.15rem; margin-top: calc(3px - .575rem); border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45), 0 0 0 4px color-mix(in srgb, var(--kit-accent) 0%, transparent); transition: transform .2s var(--kit-spring), box-shadow .2s; }
input[type="range"].nx-range-native::-moz-range-thumb { width: 1.15rem; height: 1.15rem; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
input[type="range"].nx-range-native:active::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 1px 4px rgba(0, 0, 0, .45), 0 0 0 6px color-mix(in srgb, var(--kit-accent) 25%, transparent); }
input[type="range"].nx-range-native:focus-visible { outline: none; }
input[type="range"].nx-range-native:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--kit-accent); }

/* Copy buttons: a tick pops over the button that copied. */
.nx-copied { position: relative; }
.nx-copied::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / min(1.1rem, 60%) no-repeat; animation: nx-copied 1.4s var(--kit-out) both; pointer-events: none; }
@keyframes nx-copied { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.04); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Setup guide steps: the bar fills on load, done steps strike through. */
.nx-guide-bar span { animation: nx-guide-fill .9s .15s both var(--kit-out); }
@keyframes nx-guide-fill { from { width: 0; } }
.nx-guide-list li.is-done .nx-guide-mark { animation: nx-pop-in .45s both var(--kit-spring); }
.nx-guide-list li.is-done .nx-guide-text b { background: linear-gradient(currentColor, currentColor) 0 55% / 100% 1.5px no-repeat; animation: nx-strike .5s .3s both var(--kit-out); }
@keyframes nx-strike { from { background-size: 0 1.5px; } }

/* Sidebar folds to icons (desktop). */
.nx-fold { display: none; }
@media (min-width: 1024px) {
    .nx-fold { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin: 0 0 .4rem auto; border-radius: 9px; color: var(--muted); transition: background-color .15s, color .15s; }
    .nx-fold:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
    .nx-fold svg { width: 1.1rem; height: 1.1rem; transition: transform .35s var(--kit-spring); }
    .dashboard-frame { transition: grid-template-columns .38s var(--kit-out); }
    html.nx-side-mini .dashboard-frame { --dashboard-sidebar-w: 66px; }
    html.nx-side-mini .nx-fold { margin: 0 auto .4rem; }
    html.nx-side-mini .nx-fold svg { transform: scaleX(-1); }
    html.nx-side-mini .app-sidebar { padding-inline: 8px; overflow-x: hidden; }
    html.nx-side-mini .app-sidebar :is(.nav-section:not(.nav-group-toggle), .nav-server-name, .nav-server-id, .nav-support-email, .nav-hosting-provider, .resource-provider, .nav-group-chevron, .mobile-nav-head) { display: none; }
    html.nx-side-mini .app-sidebar :is(.nav-link, .nav-group-toggle, .nav-group-title) { font-size: 0; gap: 0; justify-content: center; padding-inline: 0; }
    html.nx-side-mini .app-sidebar .nav-link > :not(svg):not(i) { display: none; }
    html.nx-side-mini .app-sidebar .nav-group-links-inner { padding-left: 0; }
    html.nx-side-hiding .app-sidebar :is(.nav-link, .nav-group-title) { color: transparent; transition: color .1s; }
}

/* Inline confirm question under the button, and slide-to-confirm in dialogs. */
.nx-ask-tip { position: absolute; z-index: 1400; translate: -50% 0; max-width: min(18rem, 90vw); padding: .45rem .7rem; border-radius: 10px; background: var(--panel-strong, #151622); color: var(--text); font-size: .78rem; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px color-mix(in srgb, var(--red) 45%, transparent); animation: nx-pop-in .25s var(--kit-spring); pointer-events: none; }
.nx-dialog-slide { flex: 1 1 14rem; min-width: min(12rem, 100%); max-width: 100%; height: 2.9rem; }
/* A narrow dialog puts the slider on its own row instead of pushing it past the card. */
.dashboard-dialog-actions:has(.nx-dialog-slide) { flex-wrap: wrap; }
.nx-slide-label { padding-inline: 3.2rem .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-dialog-slide .nx-slide-knob { width: 2.4rem; height: 2.4rem; }
.nx-dialog-slide .nx-slide-fill { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--red) 35%, transparent)); }
.nx-dialog-slide.is-done { background: var(--red); }

/* Upgrades, batch 2 */
.nx-dd.is-block { display: block; width: 100%; }
.nx-dd-btn:disabled { opacity: .5; cursor: not-allowed; }
img.nx-img-loading { background: linear-gradient(100deg, color-mix(in srgb, var(--text) 6%, transparent) 30%, color-mix(in srgb, var(--text) 14%, transparent) 50%, color-mix(in srgb, var(--text) 6%, transparent) 70%) 0 0 / 300% 100%; animation: nx-img-sweep 1.3s linear infinite; }
img.nx-img-in { animation: nx-img-in .5s var(--kit-out); }
@keyframes nx-img-sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes nx-img-in { from { opacity: 0; filter: blur(6px); } }
.nx-ring svg.lucide-bell, .nx-ring svg.lucide-bell-ring { transform-origin: 50% 8%; animation: nx-ring 1s var(--kit-out); }
.nx-shake { animation: nx-shake .42s var(--kit-out); }
.skeleton-line::after, .skeleton-block::after, .tk-skeleton::after { animation-timing-function: var(--kit-out) !important; }
[data-file-drop].is-file-over { outline: 2px dashed var(--kit-accent); outline-offset: 3px; transform: scale(1.01); transition: transform .3s var(--kit-spring), outline-color .2s; }
[data-file-drop].is-file-over { animation: nx-drop-breathe 1.1s ease-in-out infinite; }
[data-file-drop].is-file-dropped { animation: nx-drop-land .5s var(--kit-spring); }
@keyframes nx-drop-breathe { 50% { outline-offset: 6px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--kit-accent) 14%, transparent); } }
@keyframes nx-drop-land { 0% { transform: scale(1.02); } 45% { transform: scale(.985); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-file-drop].is-file-over, [data-file-drop].is-file-dropped { animation: none; } }
input[type="search"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--kit-accent) 22%, transparent); }

/* Command bar: the topbar search icon opens into a "Search ⌘K" pill on hover. */
@media (hover: hover) and (pointer: fine) {
    .topbar-search-btn { display: inline-flex; align-items: center; width: auto; min-width: 2.25rem; padding-inline: .6rem; transition: background-color .2s, box-shadow .25s; }
    .topbar-search-btn::after { content: attr(aria-label) "  ⌘K"; display: inline-block; max-width: 0; overflow: hidden; white-space: pre; font-size: .78rem; font-weight: 700; opacity: 0; transition: max-width .4s var(--kit-spring), opacity .2s, margin .3s; }
    .topbar-search-btn:hover, .topbar-search-btn:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent); }
    .topbar-search-btn:hover::after, .topbar-search-btn:focus-visible::after { max-width: 9rem; opacity: 1; margin-left: .45rem; }
}
.nx-flow { display: inline-flex; transition: color .4s; }
.nx-flow span { display: inline-block; white-space: pre; }
.nx-flow span.is-new { animation: nx-pf-in .45s calc(var(--i) * 40ms) both var(--kit-out); }
.nx-flow.is-up { color: #22c55e; } .nx-flow.is-down { color: #ef4444; }

/* Colour fields: palette row under each colour picker. */
.nx-swatches { display: flex; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; }
.nx-swatches button { width: 1.5rem; height: 1.5rem; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); animation: nx-pop-in .35s calc(var(--i, 0) * 40ms) both var(--kit-spring); transition: transform .2s var(--kit-spring); }
.nx-swatches button:hover { transform: translateY(-2px) scale(1.12); }
.nx-swatches button.is-pick { position: relative; background: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444); }
.nx-swatches button.is-pick::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .9rem; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.nx-swatches button.is-new { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); font-size: .8rem; font-weight: 800; box-shadow: none; }

/* Bot status selects → status picker dots. */
.nx-presence { display: inline-flex; gap: .2rem; padding: .25rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); flex: 0 0 auto; }
.nx-presence button { display: inline-flex; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 .6rem; border-radius: 999px; color: var(--muted); font-size: .78rem; font-weight: 700; transition: background-color .2s, color .2s; }
.nx-presence button i { width: .7rem; height: .7rem; border-radius: 999px; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 0%, transparent); transition: box-shadow .3s var(--kit-spring), transform .3s var(--kit-spring); }
.nx-presence button span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--kit-spring); }
.nx-presence button[aria-checked="true"] { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.nx-presence button[aria-checked="true"] span { max-width: 9rem; }
.nx-presence button[aria-checked="true"] i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); transform: scale(1.1); }
.nx-presence button:hover span { max-width: 9rem; }
.nx-presence button:disabled { opacity: .5; cursor: not-allowed; }

/* Dynamic island for slow saves (top centre). */
.nx-dyn-island { position: fixed; z-index: 1350; top: calc(env(safe-area-inset-top, 0px) + .6rem); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: .5rem; height: 2.2rem; padding: 0 .9rem; border-radius: 999px; background: #050505; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .07); font: 800 .8rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; transform: translateY(-160%) scale(.6); opacity: 0; pointer-events: none; transition: transform .45s var(--kit-spring), opacity .2s, width .3s; }
.nx-dyn-island.is-on { transform: none; opacity: 1; }
.nx-dyn-island > * { display: none; }
.nx-dyn-island.is-busy .nx-dyn-time { display: inline-block; }
.nx-dyn-island:not(.is-busy) .nx-ld-dots { display: none; } /* nx-kit dot loader shows while busy */
.nx-dyn-island.is-ok { background: #16a34a; }
.nx-dyn-island.is-ok .nx-dyn-ok, .nx-dyn-island.is-bad .nx-dyn-bad { display: inline-block; font-size: 1rem; animation: nx-pop-in .35s var(--kit-spring); }
.nx-dyn-island.is-bad { background: #dc2626; }
input[type="range"].nx-range-native { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
input[type="range"].nx-range-native.is-held { transition: none; }

/* Selection actions: Discord formatting pill over a message box. */
.nx-sel-pill { position: absolute; z-index: 1300; translate: -100% -100%; display: flex; gap: .1rem; padding: .25rem; border-radius: 999px; background: var(--text); box-shadow: 0 10px 26px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(4px) scale(.92); pointer-events: none; transition: opacity .15s, transform .3s var(--kit-spring); }
.nx-sel-pill.is-on { opacity: 1; transform: none; pointer-events: auto; }
.nx-sel-pill button { min-width: 1.9rem; height: 1.9rem; padding: 0 .45rem; border-radius: 999px; color: var(--bg); font: 800 .78rem/1 Inter, system-ui, sans-serif; }
.nx-sel-pill button:nth-child(2) { font-style: italic; } .nx-sel-pill button:nth-child(3) { text-decoration: underline; } .nx-sel-pill button:nth-child(4) { text-decoration: line-through; }
.nx-sel-pill button:hover { background: color-mix(in srgb, var(--bg) 16%, transparent); }

/* Shimmer text (AI 'thinking' lines, and every plain "Loading…" on the site). */
.nx-shimmer { background: linear-gradient(100deg, var(--muted) 35%, var(--text) 50%, var(--muted) 65%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: nx-shim 1.8s linear infinite; }
@keyframes nx-shim { from { background-position: 125% 0; } to { background-position: -125% 0; } }
.nx-dock-plain > * { transform: scale(var(--s, 1)); transform-origin: 50% 100%; transition: transform .18s ease-out; }
[data-kit="create-menu"]:not(.nx-create), [data-kit="radial"]:not(.nx-radial) { visibility: hidden; }
html.nx-side-mini .nx-khint { display: none !important; } /* the ⌘K hint card has no room beside an icon-only sidebar */

/* Loaders used outside /kit (moved from nxkit/motion.css): base, trace (busy buttons),
   morph (page swaps), dots (save island). Wave/bounce/pixel/blocks stay in motion.css. */
.nx-ld { display: inline-grid; color: var(--text); }
.btn .nx-ld { color: currentColor; transform: scale(.6); margin: -6px -2px; } /* busy buttons */
.nx-ld-trace { width: 2.4rem; height: 2.4rem; }
.nx-ld-trace svg { width: 100%; height: 100%; animation: nx-spin 1.4s linear infinite; }
.nx-ld-trace .t { fill: none; stroke: color-mix(in srgb, currentColor 15%, transparent); stroke-width: 3; }
.nx-ld-trace .d { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 20 200; animation: nx-ld-breathe 1.4s ease-in-out infinite; }
@keyframes nx-ld-breathe { 50% { stroke-dasharray: 60 200; } }
.nx-ld-morph { width: 1.8rem; height: 1.8rem; background: currentColor; animation: nx-ld-morph 1.6s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes nx-ld-morph { 0% { border-radius: 4px; transform: rotate(0); } 50% { border-radius: 999px; transform: rotate(180deg) scale(.8); } 100% { border-radius: 4px; transform: rotate(360deg); } }
.nx-ld-dots { grid-template-columns: repeat(4, 7px); gap: 5px; cursor: pointer; }
.nx-ld-dots i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .15; animation: 1.6s infinite ease-in-out; }
.nx-ld-dots.is-scan i { animation-name: nx-ld-on; animation-delay: calc(var(--x) * 120ms + var(--y) * 40ms); }
.nx-ld-dots.is-twinkle i { animation-name: nx-ld-on; animation-delay: calc(var(--t) * 100ms); }
.nx-ld-dots.is-orbit i { animation-name: nx-ld-on; animation-duration: 1.2s; animation-delay: calc(var(--o) * 100ms); }
.nx-ld-dots.is-pulse i { animation-name: nx-ld-on; animation-delay: calc(var(--r) * 220ms - 1.6s); animation-direction: reverse; }
@keyframes nx-ld-on { 0%, 100% { opacity: .15; } 25% { opacity: 1; } }
.nx-dyn-island .nx-ld-dots { grid-template-columns: repeat(4, 3px); gap: 2px; color: #a78bfa; }
.nx-dyn-island .nx-ld-dots i { width: 3px; height: 3px; border-radius: 1px; }
body.is-navigating .app-main::after { content: ""; position: fixed; top: 50%; left: calc(50% + var(--sidebar-w, 0px) / 2); width: 1.6rem; height: 1.6rem; margin: -.8rem; background: var(--muted); opacity: 0; pointer-events: none; z-index: 30; animation: nx-ld-morph 1.6s cubic-bezier(.6, 0, .4, 1) infinite, nx-ld-late .2s .45s forwards; } /* morph loader, only for slow swaps */
@keyframes nx-ld-late { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { body.is-navigating .app-main::after { animation: nx-ld-late .2s .45s forwards; } }

/* One-time code boxes (nx-kit one-time-code). The real input sits on top, invisible. */
.nx-otp { position: relative; }
.nx-otp > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none; color: transparent; caret-color: transparent; font-size: 16px; cursor: text; -webkit-text-fill-color: transparent; }
.nx-otp-row { display: flex; gap: .45rem; justify-content: center; }
.nx-otp-box { position: relative; flex: 1 1 0; min-width: 0; max-width: 2.75rem; aspect-ratio: 11 / 13; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px var(--kit-line); transition: box-shadow .2s, background .2s, transform .3s var(--kit-spring); }
.nx-otp-box i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--text); transform: scale(0); transition: transform .24s var(--kit-spring); }
.nx-otp-box b { position: absolute; font-size: 1.15rem; font-weight: 800; }
.nx-otp.is-plain .nx-otp-box i { display: none; }
.nx-otp-box.is-filled i { transform: scale(1); }
.nx-otp-box.is-filled { transform: translateY(-1px); }
.nx-otp-box.is-caret { box-shadow: inset 0 0 0 2px var(--accent, var(--brand)); }
.nx-otp-box.is-caret::after { content: ''; position: absolute; width: 2px; height: 40%; border-radius: 2px; background: var(--accent, var(--brand)); animation: nx-otp-blink 1s steps(1) infinite; }
.nx-otp-box.is-caret.is-filled::after { display: none; }
.nx-otp.is-ok .nx-otp-box { box-shadow: inset 0 0 0 2px var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); transition-delay: calc(var(--k) * 35ms); }
.nx-otp.is-ok .nx-otp-box i { background: var(--green); }
.nx-otp.is-bad .nx-otp-row { animation: nx-otp-shake .42s; }
.nx-otp.is-bad .nx-otp-box { box-shadow: inset 0 0 0 2px var(--red); }
@keyframes nx-otp-blink { 50% { opacity: 0; } }
@keyframes nx-otp-shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .nx-otp.is-bad .nx-otp-row { animation: none; } .nx-otp-box.is-caret::after { animation: none; } }

/* Page switch showing last visit's copy, then the fresh page (layout.ejs quiet):
   charts draw at their size at once instead of growing in twice. */
html[data-nx-quiet] .app-main [data-kit], html[data-nx-quiet] .app-main [data-kit] * { transition: none !important; }