/*! Nucleus CSS 2.0.0 · full build · @navitallabs/nucleus-css · MIT · https://github.com/daksh-bathla/nucleus */
/* ================================================
   NUCLEUS CSS — Lightweight, Mobile-First Framework
   ================================================ */

/* Public cascade contract. Later layers deliberately outrank earlier ones. */
@layer reset, tokens, base, layout, components, utilities, states, themes;

/* ----------------------------- */
/* 0 · CSS Custom Properties     */
/* ----------------------------- */
@layer tokens {
:root {
    /* ── Colors ── */
    --n-primary:     #0f766e;
    --n-primary-h:   #0b5f59;
    --n-secondary:   #147d74;
    --n-secondary-h: #0f665f;
    --n-success:     #15803d;
    --n-success-h:   #166534;
    --n-danger:      #dc2626;
    --n-danger-h:    #b91c1c;
    --n-warning:     #f59e0b;
    --n-warning-h:   #d97706;
    --n-info:        #0e7490;
    --n-info-h:      #155e75;
    --n-light:       #f1f5f9;
    --n-dark:        #1e293b;

    /* ── Text / Background ── */
    --n-text:        #1e293b;
    --n-text-muted:  #64748b;
    --n-bg:          #ffffff;
    --n-bg-muted:    #f8fafc;
    --n-border-color:#e2e8f0;
    --n-surface:     #ffffff;
    --n-surface-raised: #ffffff;
    --n-surface-sunken: #f1f5f9;
    --n-overlay:     rgba(15, 23, 42, 0.58);
    --n-focus:       rgba(15, 118, 110, 0.24);
    --n-primary-soft: rgba(15, 118, 110, 0.12);
    --n-primary-border: rgba(15, 118, 110, 0.32);
    --n-primary-ink: #0b5f59;
    --n-secondary-soft: rgba(20, 125, 116, 0.12);
    --n-visited: #0f766e;
    --n-on-primary:  #ffffff;
    --n-on-secondary:#ffffff;
    --n-on-success:  #ffffff;
    --n-on-danger:   #ffffff;
    --n-on-warning:  #111827;
    --n-on-info:     #ffffff;

    /* ── Spacing Scale ── */
    --n-space-0: 0;
    --n-space-1: 0.25rem;
    --n-space-2: 0.5rem;
    --n-space-3: 1rem;
    --n-space-4: 1.5rem;
    --n-space-5: 3rem;

    /* ── Grid ── */
    --n-gutter: 16px;
    --n-container-sm: 540px;
    --n-container-md: 720px;
    --n-container-lg: 960px;
    --n-container-xl: 1200px;
    --n-container-xxl: 1600px;

    /* ── Typography ── */
    --n-font-sans:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --n-font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --n-text-xs:    0.75rem;
    --n-text-sm:    0.875rem;
    --n-text-base:  1rem;
    --n-text-lg:    1.125rem;
    --n-text-xl:    1.25rem;
    --n-text-2xl:   1.5rem;
    --n-text-3xl:   1.875rem;
    --n-text-4xl:   2.25rem;

    /* ── Borders & Radius ── */
    --n-radius-sm:  0.25rem;
    --n-radius:     0.5rem;
    --n-radius-lg:  0.75rem;
    --n-radius-xl:  1rem;
    --n-radius-full:9999px;

    /* ── Shadows ── */
    --n-shadow-sm:  0 1px 2px rgba(0,0,0,.06);
    --n-shadow:     0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --n-shadow-md:  0 4px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
    --n-shadow-lg:  0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
    --n-shadow-xl:  0 20px 25px rgba(0,0,0,.1), 0 8px 10px rgba(0,0,0,.04);
    --n-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
    --n-shadow-glow: 0 0 0 1px rgba(15, 118, 110, 0.16), 0 16px 48px rgba(15, 118, 110, 0.16);

    /* ── Transitions ── */
    --n-ease:       cubic-bezier(.4,0,.2,1);
    --n-duration:   150ms;
    --n-duration-slow: 240ms;

    /* ── Component Density ── */
    --n-control-height: 2.5rem;
    --n-control-padding-x: 0.875rem;
    --n-component-gap: var(--n-space-3);
    --n-section-space: clamp(3rem, 7vw, 6rem);
}
}


/* ----------------------------- */
/* 1 · Reset Layer               */
/* ----------------------------- */
@layer reset {
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: var(--n-font-sans);
    font-size: var(--n-text-base);
    line-height: 1.5;
    color: var(--n-text);
    background-color: var(--n-bg);
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--n-primary-soft);
    color: var(--n-text);
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

a {
    color: var(--n-primary);
    text-decoration: none;
}
a:hover {
    color: var(--n-primary-h);
    text-decoration: underline;
}
a:not([class*="n-btn"]):visited { color: var(--n-visited); }

#root, #__next {
    isolation: isolate;
}
}


/* ----------------------------- */
/* 2 · Container System          */
/* ----------------------------- */
@layer layout {
.n-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--n-gutter);
}

@media (min-width: 576px)  { .n-container { max-width: var(--n-container-sm); } }
@media (min-width: 768px)  { .n-container { max-width: var(--n-container-md); } }
@media (min-width: 992px)  { .n-container { max-width: var(--n-container-lg); } }
@media (min-width: 1200px) { .n-container { max-width: var(--n-container-xl); } }
@media (min-width: 1600px) { .n-container { max-width: var(--n-container-xxl); } }

.n-container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--n-gutter);
    max-width: none;
}
}


/* ----------------------------- */
/* 3 · Grid System               */
/* ----------------------------- */
@layer layout {
.n-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--n-gutter);
}

/* Default column spans (all sizes) */
.n-col-1  { grid-column: span 1; }
.n-col-2  { grid-column: span 2; }
.n-col-3  { grid-column: span 3; }
.n-col-4  { grid-column: span 4; }
.n-col-5  { grid-column: span 5; }
.n-col-6  { grid-column: span 6; }
.n-col-7  { grid-column: span 7; }
.n-col-8  { grid-column: span 8; }
.n-col-9  { grid-column: span 9; }
.n-col-10 { grid-column: span 10; }
.n-col-11 { grid-column: span 11; }
.n-col-12 { grid-column: span 12; }

/* Small — ≥ 576px */
@media (min-width: 576px) {
    .n-col-sm-1  { grid-column: span 1; }
    .n-col-sm-2  { grid-column: span 2; }
    .n-col-sm-3  { grid-column: span 3; }
    .n-col-sm-4  { grid-column: span 4; }
    .n-col-sm-5  { grid-column: span 5; }
    .n-col-sm-6  { grid-column: span 6; }
    .n-col-sm-7  { grid-column: span 7; }
    .n-col-sm-8  { grid-column: span 8; }
    .n-col-sm-9  { grid-column: span 9; }
    .n-col-sm-10 { grid-column: span 10; }
    .n-col-sm-11 { grid-column: span 11; }
    .n-col-sm-12 { grid-column: span 12; }
}

/* Medium — ≥ 768px */
@media (min-width: 768px) {
    .n-col-md-1  { grid-column: span 1; }
    .n-col-md-2  { grid-column: span 2; }
    .n-col-md-3  { grid-column: span 3; }
    .n-col-md-4  { grid-column: span 4; }
    .n-col-md-5  { grid-column: span 5; }
    .n-col-md-6  { grid-column: span 6; }
    .n-col-md-7  { grid-column: span 7; }
    .n-col-md-8  { grid-column: span 8; }
    .n-col-md-9  { grid-column: span 9; }
    .n-col-md-10 { grid-column: span 10; }
    .n-col-md-11 { grid-column: span 11; }
    .n-col-md-12 { grid-column: span 12; }
}

/* Large — ≥ 992px */
@media (min-width: 992px) {
    .n-col-lg-1  { grid-column: span 1; }
    .n-col-lg-2  { grid-column: span 2; }
    .n-col-lg-3  { grid-column: span 3; }
    .n-col-lg-4  { grid-column: span 4; }
    .n-col-lg-5  { grid-column: span 5; }
    .n-col-lg-6  { grid-column: span 6; }
    .n-col-lg-7  { grid-column: span 7; }
    .n-col-lg-8  { grid-column: span 8; }
    .n-col-lg-9  { grid-column: span 9; }
    .n-col-lg-10 { grid-column: span 10; }
    .n-col-lg-11 { grid-column: span 11; }
    .n-col-lg-12 { grid-column: span 12; }
}

/* Extra Large — ≥ 1200px */
@media (min-width: 1200px) {
    .n-col-xl-1  { grid-column: span 1; }
    .n-col-xl-2  { grid-column: span 2; }
    .n-col-xl-3  { grid-column: span 3; }
    .n-col-xl-4  { grid-column: span 4; }
    .n-col-xl-5  { grid-column: span 5; }
    .n-col-xl-6  { grid-column: span 6; }
    .n-col-xl-7  { grid-column: span 7; }
    .n-col-xl-8  { grid-column: span 8; }
    .n-col-xl-9  { grid-column: span 9; }
    .n-col-xl-10 { grid-column: span 10; }
    .n-col-xl-11 { grid-column: span 11; }
    .n-col-xl-12 { grid-column: span 12; }
}
}


/* ----------------------------- */
/* 4 · Display Utilities         */
/* ----------------------------- */
@layer utilities {
.n-d-none          { display: none; }
.n-d-block         { display: block; }
.n-d-inline        { display: inline; }
.n-d-inline-block  { display: inline-block; }
.n-d-flex          { display: flex; }
.n-d-inline-flex   { display: inline-flex; }
.n-d-grid          { display: grid; }

@media (min-width: 576px) {
    .n-d-sm-none         { display: none; }
    .n-d-sm-block        { display: block; }
    .n-d-sm-flex         { display: flex; }
    .n-d-sm-inline       { display: inline; }
    .n-d-sm-inline-block { display: inline-block; }
}
@media (min-width: 768px) {
    .n-d-md-none         { display: none; }
    .n-d-md-block        { display: block; }
    .n-d-md-flex         { display: flex; }
    .n-d-md-inline       { display: inline; }
    .n-d-md-inline-block { display: inline-block; }
}
@media (min-width: 992px) {
    .n-d-lg-none         { display: none; }
    .n-d-lg-block        { display: block; }
    .n-d-lg-flex         { display: flex; }
    .n-d-lg-inline       { display: inline; }
    .n-d-lg-inline-block { display: inline-block; }
}
}


/* ----------------------------- */
/* 5 · Flexbox Utilities         */
/* ----------------------------- */
@layer utilities {
.n-flex            { display: flex; }
.n-flex-wrap       { flex-wrap: wrap; }
.n-flex-nowrap     { flex-wrap: nowrap; }
.n-flex-col        { flex-direction: column; }
.n-flex-row        { flex-direction: row; }
.n-flex-col-reverse { flex-direction: column-reverse; }
.n-flex-row-reverse { flex-direction: row-reverse; }
.n-flex-1          { flex: 1 1 0%; }
.n-flex-auto       { flex: 1 1 auto; }
.n-flex-none       { flex: none; }
.n-grow            { flex-grow: 1; }
.n-shrink-0        { flex-shrink: 0; }

/* Justify */
.n-justify-start   { justify-content: flex-start; }
.n-justify-center  { justify-content: center; }
.n-justify-end     { justify-content: flex-end; }
.n-justify-between { justify-content: space-between; }
.n-justify-around  { justify-content: space-around; }
.n-justify-evenly  { justify-content: space-evenly; }

/* Align */
.n-items-start     { align-items: flex-start; }
.n-items-center    { align-items: center; }
.n-items-end       { align-items: flex-end; }
.n-items-stretch   { align-items: stretch; }
.n-items-baseline  { align-items: baseline; }

.n-self-start      { align-self: flex-start; }
.n-self-center     { align-self: center; }
.n-self-end        { align-self: flex-end; }
.n-self-stretch    { align-self: stretch; }

/* Gap */
.n-gap-0           { gap: var(--n-space-0); }
.n-gap-1           { gap: var(--n-space-1); }
.n-gap-2           { gap: var(--n-space-2); }
.n-gap-3           { gap: var(--n-space-3); }
.n-gap-4           { gap: var(--n-space-4); }
.n-gap-5           { gap: var(--n-space-5); }
}


/* ----------------------------- */
/* 6 · Spacing Utilities         */
/* ----------------------------- */
@layer utilities {

/* -- Margin -- */
.n-m-0  { margin: var(--n-space-0); }
.n-m-1  { margin: var(--n-space-1); }
.n-m-2  { margin: var(--n-space-2); }
.n-m-3  { margin: var(--n-space-3); }
.n-m-4  { margin: var(--n-space-4); }
.n-m-5  { margin: var(--n-space-5); }
.n-m-auto { margin: auto; }

.n-mt-0 { margin-top: var(--n-space-0); }  .n-mt-1 { margin-top: var(--n-space-1); }
.n-mt-2 { margin-top: var(--n-space-2); }  .n-mt-3 { margin-top: var(--n-space-3); }
.n-mt-4 { margin-top: var(--n-space-4); }  .n-mt-5 { margin-top: var(--n-space-5); }

.n-mb-0 { margin-bottom: var(--n-space-0); }  .n-mb-1 { margin-bottom: var(--n-space-1); }
.n-mb-2 { margin-bottom: var(--n-space-2); }  .n-mb-3 { margin-bottom: var(--n-space-3); }
.n-mb-4 { margin-bottom: var(--n-space-4); }  .n-mb-5 { margin-bottom: var(--n-space-5); }

.n-ml-0 { margin-left: var(--n-space-0); }  .n-ml-1 { margin-left: var(--n-space-1); }
.n-ml-2 { margin-left: var(--n-space-2); }  .n-ml-3 { margin-left: var(--n-space-3); }
.n-ml-4 { margin-left: var(--n-space-4); }  .n-ml-5 { margin-left: var(--n-space-5); }

.n-mr-0 { margin-right: var(--n-space-0); }  .n-mr-1 { margin-right: var(--n-space-1); }
.n-mr-2 { margin-right: var(--n-space-2); }  .n-mr-3 { margin-right: var(--n-space-3); }
.n-mr-4 { margin-right: var(--n-space-4); }  .n-mr-5 { margin-right: var(--n-space-5); }

.n-mx-0 { margin-inline: var(--n-space-0); }  .n-mx-1 { margin-inline: var(--n-space-1); }
.n-mx-2 { margin-inline: var(--n-space-2); }  .n-mx-3 { margin-inline: var(--n-space-3); }
.n-mx-4 { margin-inline: var(--n-space-4); }  .n-mx-5 { margin-inline: var(--n-space-5); }
.n-mx-auto { margin-inline: auto; }

.n-my-0 { margin-block: var(--n-space-0); }  .n-my-1 { margin-block: var(--n-space-1); }
.n-my-2 { margin-block: var(--n-space-2); }  .n-my-3 { margin-block: var(--n-space-3); }
.n-my-4 { margin-block: var(--n-space-4); }  .n-my-5 { margin-block: var(--n-space-5); }

/* -- Padding -- */
.n-p-0  { padding: var(--n-space-0); }
.n-p-1  { padding: var(--n-space-1); }
.n-p-2  { padding: var(--n-space-2); }
.n-p-3  { padding: var(--n-space-3); }
.n-p-4  { padding: var(--n-space-4); }
.n-p-5  { padding: var(--n-space-5); }

.n-pt-0 { padding-top: var(--n-space-0); }  .n-pt-1 { padding-top: var(--n-space-1); }
.n-pt-2 { padding-top: var(--n-space-2); }  .n-pt-3 { padding-top: var(--n-space-3); }
.n-pt-4 { padding-top: var(--n-space-4); }  .n-pt-5 { padding-top: var(--n-space-5); }

.n-pb-0 { padding-bottom: var(--n-space-0); }  .n-pb-1 { padding-bottom: var(--n-space-1); }
.n-pb-2 { padding-bottom: var(--n-space-2); }  .n-pb-3 { padding-bottom: var(--n-space-3); }
.n-pb-4 { padding-bottom: var(--n-space-4); }  .n-pb-5 { padding-bottom: var(--n-space-5); }

.n-pl-0 { padding-left: var(--n-space-0); }  .n-pl-1 { padding-left: var(--n-space-1); }
.n-pl-2 { padding-left: var(--n-space-2); }  .n-pl-3 { padding-left: var(--n-space-3); }
.n-pl-4 { padding-left: var(--n-space-4); }  .n-pl-5 { padding-left: var(--n-space-5); }

.n-pr-0 { padding-right: var(--n-space-0); }  .n-pr-1 { padding-right: var(--n-space-1); }
.n-pr-2 { padding-right: var(--n-space-2); }  .n-pr-3 { padding-right: var(--n-space-3); }
.n-pr-4 { padding-right: var(--n-space-4); }  .n-pr-5 { padding-right: var(--n-space-5); }

.n-px-0 { padding-inline: var(--n-space-0); }  .n-px-1 { padding-inline: var(--n-space-1); }
.n-px-2 { padding-inline: var(--n-space-2); }  .n-px-3 { padding-inline: var(--n-space-3); }
.n-px-4 { padding-inline: var(--n-space-4); }  .n-px-5 { padding-inline: var(--n-space-5); }

.n-py-0 { padding-block: var(--n-space-0); }  .n-py-1 { padding-block: var(--n-space-1); }
.n-py-2 { padding-block: var(--n-space-2); }  .n-py-3 { padding-block: var(--n-space-3); }
.n-py-4 { padding-block: var(--n-space-4); }  .n-py-5 { padding-block: var(--n-space-5); }
}


/* ----------------------------- */
/* 7 · Typography                */
/* ----------------------------- */
@layer utilities {
.n-text-xs    { font-size: var(--n-text-xs); }
.n-text-sm    { font-size: var(--n-text-sm); }
.n-text-base  { font-size: var(--n-text-base); }
.n-text-lg    { font-size: var(--n-text-lg); }
.n-text-xl    { font-size: var(--n-text-xl); }
.n-text-2xl   { font-size: var(--n-text-2xl); }
.n-text-3xl   { font-size: var(--n-text-3xl); }
.n-text-4xl   { font-size: var(--n-text-4xl); }

.n-font-light    { font-weight: 300; }
.n-font-normal   { font-weight: 400; }
.n-font-medium   { font-weight: 500; }
.n-font-semibold { font-weight: 600; }
.n-font-bold     { font-weight: 700; }

.n-text-left     { text-align: left; }
.n-text-center   { text-align: center; }
.n-text-right    { text-align: right; }
.n-text-justify  { text-align: justify; }

.n-uppercase     { text-transform: uppercase; }
.n-lowercase     { text-transform: lowercase; }
.n-capitalize    { text-transform: capitalize; }
.n-normal-case   { text-transform: none; }

.n-italic        { font-style: italic; }
.n-not-italic    { font-style: normal; }
.n-underline     { text-decoration: underline; }
.n-line-through  { text-decoration: line-through; }
.n-no-underline  { text-decoration: none; }

.n-leading-none    { line-height: 1; }
.n-leading-tight   { line-height: 1.25; }
.n-leading-normal  { line-height: 1.5; }
.n-leading-relaxed { line-height: 1.75; }

.n-tracking-tight  { letter-spacing: -0.025em; }
.n-tracking-normal { letter-spacing: 0; }
.n-tracking-wide   { letter-spacing: 0.05em; }

.n-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.n-font-mono { font-family: var(--n-font-mono); }
}

/* Heading defaults */
@layer base {
h1 { font-size: var(--n-text-4xl); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--n-text-3xl); font-weight: 700; line-height: 1.25; }
h3 { font-size: var(--n-text-2xl); font-weight: 600; line-height: 1.3; }
h4 { font-size: var(--n-text-xl);  font-weight: 600; line-height: 1.35; }
h5 { font-size: var(--n-text-lg);  font-weight: 500; line-height: 1.4; }
h6 { font-size: var(--n-text-base);font-weight: 500; line-height: 1.5; }
}


/* ----------------------------- */
/* 8 · Color Utilities           */
/* ----------------------------- */
@layer utilities {

/* Text colors */
.n-text-primary   { color: var(--n-primary); }
.n-text-secondary { color: var(--n-secondary); }
.n-text-success   { color: var(--n-success); }
.n-text-danger    { color: var(--n-danger); }
.n-text-warning   { color: var(--n-warning); }
.n-text-info      { color: var(--n-info); }
.n-text-muted     { color: var(--n-text-muted); }
.n-text-light     { color: var(--n-light); }
.n-text-dark      { color: var(--n-dark); }
.n-text-white     { color: #ffffff; }

/* Background colors */
.n-bg-primary     { background-color: var(--n-primary); color: var(--n-on-primary); }
.n-bg-secondary   { background-color: var(--n-secondary); color: var(--n-on-secondary); }
.n-bg-success     { background-color: var(--n-success); color: var(--n-on-success); }
.n-bg-danger      { background-color: var(--n-danger); color: var(--n-on-danger); }
.n-bg-warning     { background-color: var(--n-warning); color: var(--n-on-warning); }
.n-bg-info        { background-color: var(--n-info); color: var(--n-on-info); }
.n-bg-light       { background-color: var(--n-light); color: var(--n-dark); }
.n-bg-dark        { background-color: var(--n-dark); color: #fff; }
.n-bg-white       { background-color: #fff; color: var(--n-dark); }
.n-bg-muted       { background-color: var(--n-bg-muted); }
}


/* ----------------------------- */
/* 9 · Buttons                   */
/* ----------------------------- */
@layer components {
.n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem var(--n-control-padding-x);
    font-size: var(--n-text-sm);
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--n-radius);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--n-duration) var(--n-ease),
                box-shadow var(--n-duration) var(--n-ease),
                background-color var(--n-duration) var(--n-ease),
                border-color var(--n-duration) var(--n-ease),
                color var(--n-duration) var(--n-ease);
    user-select: none;
    white-space: nowrap;
    box-shadow: var(--n-shadow-sm);
    min-height: var(--n-control-height);
}
.n-btn:hover { text-decoration: none; }
.n-btn:hover:not(:disabled):not(.n-is-disabled):not(.n-disabled) {
    transform: translateY(-1px);
    box-shadow: var(--n-shadow-md);
}
.n-btn:active:not(:disabled):not(.n-is-disabled):not(.n-disabled) {
    transform: translateY(0);
    box-shadow: var(--n-shadow-sm);
}
.n-btn:focus-visible {
    outline: 3px solid var(--n-focus);
    outline-offset: 2px;
    box-shadow: var(--n-shadow-sm);
}
.n-btn:disabled,
.n-btn[aria-disabled="true"],
.n-btn.n-is-disabled,
.n-btn.n-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Solid variants */
.n-btn-primary   { background: var(--n-primary);   color: var(--n-on-primary); }
.n-btn-primary:hover { background: var(--n-primary-h); }

.n-btn-secondary { background: var(--n-secondary); color: var(--n-on-secondary); }
.n-btn-secondary:hover { background: var(--n-secondary-h); }

.n-btn-success   { background: var(--n-success);   color: var(--n-on-success); }
.n-btn-success:hover { background: var(--n-success-h); }

.n-btn-danger    { background: var(--n-danger);    color: var(--n-on-danger); }
.n-btn-danger:hover { background: var(--n-danger-h); }

.n-btn-warning   { background: var(--n-warning);   color: var(--n-on-warning); }
.n-btn-warning:hover { background: var(--n-warning-h); }

.n-btn-info      { background: var(--n-info);      color: var(--n-on-info); }
.n-btn-info:hover { background: var(--n-info-h); }

.n-btn-dark      { background: var(--n-dark);      color: #fff; }
.n-btn-dark:hover { background: #0f172a; }

.n-btn-light     { background: var(--n-light);     color: var(--n-dark); }
.n-btn-light:hover { background: #e2e8f0; }

/* Outline variants */
.n-btn-outline-primary   { background: transparent; color: var(--n-primary);   border-color: var(--n-primary); }
.n-btn-outline-primary:hover { background: var(--n-primary); color: var(--n-on-primary); }

.n-btn-outline-secondary { background: transparent; color: var(--n-secondary); border-color: var(--n-secondary); }
.n-btn-outline-secondary:hover { background: var(--n-secondary); color: var(--n-on-secondary); }

.n-btn-outline-success   { background: transparent; color: var(--n-success);   border-color: var(--n-success); }
.n-btn-outline-success:hover { background: var(--n-success); color: var(--n-on-success); }

.n-btn-outline-danger    { background: transparent; color: var(--n-danger);    border-color: var(--n-danger); }
.n-btn-outline-danger:hover { background: var(--n-danger); color: var(--n-on-danger); }

.n-btn-outline-warning   { background: transparent; color: var(--n-warning-h); border-color: var(--n-warning); }
.n-btn-outline-warning:hover { background: var(--n-warning); color: var(--n-on-warning); }

.n-btn-outline-info      { background: transparent; color: var(--n-info);      border-color: var(--n-info); }
.n-btn-outline-info:hover { background: var(--n-info); color: var(--n-on-info); }

.n-btn-outline-dark      { background: transparent; color: var(--n-dark);      border-color: var(--n-dark); }
.n-btn-outline-dark:hover { background: var(--n-dark); color: #fff; }

.n-btn-outline-light     { background: transparent; color: var(--n-text);      border-color: var(--n-border-color); }
.n-btn-outline-light:hover { background: var(--n-light); color: var(--n-dark); }

/* Ghost */
.n-btn-ghost     { background: transparent; color: var(--n-primary); }
.n-btn-ghost:hover { background: var(--n-primary-soft); }

/* Sizes */
.n-btn-sm { padding: 0.25rem 0.75rem; font-size: var(--n-text-xs); }
.n-btn-lg { padding: 0.75rem 1.75rem; font-size: var(--n-text-lg); }
}


/* ----------------------------- */
/* 10 · Cards                    */
/* ----------------------------- */
@layer components {
.n-card {
    background: var(--n-bg);
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-lg);
    overflow: hidden;
    box-shadow: var(--n-shadow-sm);
    transition: transform var(--n-duration) var(--n-ease),
                box-shadow var(--n-duration) var(--n-ease),
                border-color var(--n-duration) var(--n-ease);
}
.n-card:hover {
    box-shadow: var(--n-shadow-md);
}
.n-card.n-card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--n-shadow-soft);
    border-color: var(--n-primary-border);
}
.n-card.n-card-elevated {
    box-shadow: var(--n-shadow-soft);
}
.n-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--n-border-color);
    font-weight: 600;
}
.n-card-body {
    padding: 1.25rem;
}
.n-card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--n-border-color);
}
.n-card-img {
    width: 100%;
    display: block;
}
}


/* ----------------------------- */
/* 11 · Forms                    */
/* ----------------------------- */
@layer components {
.n-form-group {
    margin-bottom: 1rem;
}
.n-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: var(--n-text-sm);
    font-weight: 500;
    color: var(--n-text);
}
.n-input,
.n-select,
.n-textarea {
    display: block;
    width: 100%;
    padding: 0.5rem var(--n-control-padding-x);
    font-size: var(--n-text-base);
    line-height: 1.5;
    color: var(--n-text);
    background-color: var(--n-bg);
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    transition: border-color var(--n-duration) var(--n-ease),
                box-shadow var(--n-duration) var(--n-ease);
    appearance: none;
}
.n-input,
.n-select { min-height: var(--n-control-height); }
.n-input:focus,
.n-select:focus,
.n-textarea:focus {
    outline: 3px solid transparent;
    outline-offset: 2px;
    border-color: var(--n-primary);
    box-shadow: 0 0 0 3px var(--n-focus), var(--n-shadow-sm);
}
.n-input::placeholder { color: var(--n-text-muted); }
.n-textarea { resize: vertical; min-height: 80px; }

.n-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
    padding-right: 2.25rem;
}

/* Checkbox / Radio */
.n-checkbox,
.n-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--n-text-sm);
    min-height: 2.75rem;
}
.n-checkbox input,
.n-radio input {
    accent-color: var(--n-primary);
    width: 1rem;
    height: 1rem;
}

.n-input-sm { padding: 0.25rem 0.5rem; font-size: var(--n-text-xs); }
.n-input-lg { padding: 0.75rem 1rem; font-size: var(--n-text-lg); }

/* Validation states */
.n-input-success { border-color: var(--n-success); }
.n-input-success:focus { box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.n-input-error   { border-color: var(--n-danger); }
.n-input-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.n-helper-text   { font-size: var(--n-text-xs); margin-top: 0.25rem; color: var(--n-text-muted); }
.n-error-text    { font-size: var(--n-text-xs); margin-top: 0.25rem; color: var(--n-danger); }
}


/* ----------------------------- */
/* 12 · Navbar                   */
/* ----------------------------- */
@layer components {
.n-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--n-bg);
    border-bottom: 1px solid var(--n-border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    min-width: 0;
}
.n-navbar-brand {
    font-size: var(--n-text-xl);
    font-weight: 700;
    color: var(--n-text);
    text-decoration: none;
}
.n-navbar-brand:hover { text-decoration: none; color: var(--n-primary); }
.n-navbar-menu {
    position: relative;
    margin-inline-start: auto;
}
.n-navbar-menu > summary { list-style: none; }
.n-navbar-menu > summary::-webkit-details-marker { display: none; }
.n-navbar-toggle {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    color: var(--n-text);
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-lg);
    background: var(--n-bg);
    box-shadow: var(--n-shadow-sm);
    cursor: pointer;
    transition: color var(--n-duration) var(--n-ease), border-color var(--n-duration) var(--n-ease), background var(--n-duration) var(--n-ease), box-shadow var(--n-duration) var(--n-ease);
}
.n-navbar-toggle:hover,
.n-navbar-menu[open] > .n-navbar-toggle,
.n-navbar-menu.n-is-open > .n-navbar-toggle {
    color: var(--n-primary);
    border-color: var(--n-primary);
    background: var(--n-primary-soft);
    box-shadow: var(--n-shadow);
}
.n-navbar-toggle-icon,
.n-navbar-toggle-icon::before,
.n-navbar-toggle-icon::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform var(--n-duration) var(--n-ease), opacity var(--n-duration) var(--n-ease);
}
.n-navbar-toggle-icon { position: relative; }
.n-navbar-toggle-icon::before,
.n-navbar-toggle-icon::after {
    position: absolute;
    inset-inline-start: 0;
    content: "";
}
.n-navbar-toggle-icon::before { transform: translateY(-0.35rem); }
.n-navbar-toggle-icon::after { transform: translateY(0.35rem); }
.n-navbar-menu[open] .n-navbar-toggle-icon,
.n-navbar-menu.n-is-open .n-navbar-toggle-icon { background: transparent; }
.n-navbar-menu[open] .n-navbar-toggle-icon::before,
.n-navbar-menu.n-is-open .n-navbar-toggle-icon::before { transform: rotate(45deg); }
.n-navbar-menu[open] .n-navbar-toggle-icon::after,
.n-navbar-menu.n-is-open .n-navbar-toggle-icon::after { transform: rotate(-45deg); }
.n-navbar-menu > .n-nav {
    position: absolute;
    inset-block-start: calc(100% + 0.625rem);
    inset-inline-end: 0;
    display: grid;
    width: min(18rem, calc(100vw - 2rem));
    max-height: min(30rem, calc(100vh - 6rem));
    gap: 0.125rem;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-xl);
    background: var(--n-bg);
    box-shadow: var(--n-shadow-lg);
}
.n-navbar-menu > .n-nav .n-nav-link {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
}
.n-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    min-width: 0;
}
.n-nav-item {
    list-style: none;
}
.n-nav-link {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    color: var(--n-text-muted);
    text-decoration: none;
    border-radius: var(--n-radius);
    font-size: var(--n-text-sm);
    font-weight: 500;
    transition: color var(--n-duration) var(--n-ease),
                background var(--n-duration) var(--n-ease);
    white-space: nowrap;
}
.n-nav-link:hover {
    color: var(--n-primary);
    background: var(--n-primary-soft);
    text-decoration: none;
}
.n-nav-link[aria-current="page"],
.n-nav-link.n-is-active,
.n-nav-link.n-active,
.n-nav-link.active {
    color: var(--n-primary);
    background: var(--n-primary-soft);
}

@media (max-width: 767.98px) {
    .n-navbar {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-inline: 1rem;
    }
    .n-navbar > .n-nav {
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        padding-bottom: 0.25rem;
    }
    .n-navbar-menu > .n-nav { max-height: calc(100vh - 5.5rem); }
}
}


/* ----------------------------- */
/* 13 · Borders & Radius         */
/* ----------------------------- */
@layer utilities {
.n-border        { border: 1px solid var(--n-border-color); }
.n-border-t      { border-top: 1px solid var(--n-border-color); }
.n-border-b      { border-bottom: 1px solid var(--n-border-color); }
.n-border-l      { border-left: 1px solid var(--n-border-color); }
.n-border-r      { border-right: 1px solid var(--n-border-color); }
.n-border-0      { border: none; }

.n-border-primary   { border-color: var(--n-primary); }
.n-border-secondary { border-color: var(--n-secondary); }
.n-border-success   { border-color: var(--n-success); }
.n-border-danger    { border-color: var(--n-danger); }
.n-border-warning   { border-color: var(--n-warning); }
.n-border-info      { border-color: var(--n-info); }
.n-border-light     { border-color: var(--n-light); }
.n-border-dark      { border-color: var(--n-dark); }

.n-rounded-none  { border-radius: 0; }
.n-rounded-sm    { border-radius: var(--n-radius-sm); }
.n-rounded       { border-radius: var(--n-radius); }
.n-rounded-lg    { border-radius: var(--n-radius-lg); }
.n-rounded-xl    { border-radius: var(--n-radius-xl); }
.n-rounded-full  { border-radius: var(--n-radius-full); }
}


/* ----------------------------- */
/* 14 · Shadows                  */
/* ----------------------------- */
@layer utilities {
.n-shadow-none   { box-shadow: none; }
.n-shadow-sm     { box-shadow: var(--n-shadow-sm); }
.n-shadow        { box-shadow: var(--n-shadow); }
.n-shadow-md     { box-shadow: var(--n-shadow-md); }
.n-shadow-lg     { box-shadow: var(--n-shadow-lg); }
.n-shadow-xl     { box-shadow: var(--n-shadow-xl); }
}


/* ----------------------------- */
/* 15 · Width & Height           */
/* ----------------------------- */
@layer utilities {
.n-w-full     { width: 100%; }
.n-w-auto     { width: auto; }
.n-w-half     { width: 50%; }
.n-w-screen   { width: 100vw; }
.n-max-w-sm   { max-width: 24rem; }
.n-max-w-md   { max-width: 28rem; }
.n-max-w-lg   { max-width: 32rem; }
.n-max-w-xl   { max-width: 36rem; }
.n-max-w-2xl  { max-width: 42rem; }
.n-max-w-full { max-width: 100%; }
.n-min-w-0    { min-width: 0; }

.n-h-full     { height: 100%; }
.n-h-auto     { height: auto; }
.n-h-screen   { height: 100vh; }
.n-min-h-screen { min-height: 100vh; }
}


/* ----------------------------- */
/* 16 · Position                 */
/* ----------------------------- */
@layer utilities {
.n-relative  { position: relative; }
.n-absolute  { position: absolute; }
.n-fixed     { position: fixed; }
.n-sticky    { position: sticky; }
.n-static    { position: static; }

.n-top-0     { top: 0; }
.n-right-0   { right: 0; }
.n-bottom-0  { bottom: 0; }
.n-left-0    { left: 0; }
.n-inset-0   { inset: 0; }

.n-z-0       { z-index: 0; }
.n-z-10      { z-index: 10; }
.n-z-20      { z-index: 20; }
.n-z-50      { z-index: 50; }
.n-z-100     { z-index: 100; }
}


/* ----------------------------- */
/* 17 · Overflow                 */
/* ----------------------------- */
@layer utilities {
.n-overflow-hidden  { overflow: hidden; }
.n-overflow-auto    { overflow: auto; }
.n-overflow-scroll  { overflow: scroll; }
.n-overflow-visible { overflow: visible; }
.n-overflow-x-auto  { overflow-x: auto; }
.n-overflow-y-auto  { overflow-y: auto; }
}


/* ----------------------------- */
/* 18 · Opacity                  */
/* ----------------------------- */
@layer utilities {
.n-opacity-0   { opacity: 0; }
.n-opacity-25  { opacity: 0.25; }
.n-opacity-50  { opacity: 0.5; }
.n-opacity-75  { opacity: 0.75; }
.n-opacity-100 { opacity: 1; }
}


/* ----------------------------- */
/* 19 · Transitions              */
/* ----------------------------- */
@layer utilities {
.n-transition     { transition: all var(--n-duration) var(--n-ease); }
.n-transition-colors {
    transition: color var(--n-duration) var(--n-ease),
                background-color var(--n-duration) var(--n-ease),
                border-color var(--n-duration) var(--n-ease);
}
.n-transition-shadow {
    transition: box-shadow var(--n-duration) var(--n-ease);
}
.n-transition-transform {
    transition: transform var(--n-duration) var(--n-ease);
}
.n-transition-none { transition: none; }

.n-duration-75  { transition-duration: 75ms; }
.n-duration-150 { transition-duration: 150ms; }
.n-duration-300 { transition-duration: 300ms; }
.n-duration-500 { transition-duration: 500ms; }

.n-ease-linear  { transition-timing-function: linear; }
.n-ease-in      { transition-timing-function: cubic-bezier(.4,0,1,1); }
.n-ease-out     { transition-timing-function: cubic-bezier(0,0,.2,1); }
.n-ease-in-out  { transition-timing-function: cubic-bezier(.4,0,.2,1); }

/* Transform helpers */
.n-scale-95     { transform: scale(0.95); }
.n-scale-100    { transform: scale(1); }
.n-scale-105    { transform: scale(1.05); }
.n-rotate-90    { transform: rotate(90deg); }
.n-rotate-180   { transform: rotate(180deg); }
.n-translate-y-1 { transform: translateY(-0.25rem); }
}


/* ----------------------------- */
/* 20 · Alerts                   */
/* ----------------------------- */
@layer components {
.n-alert {
    padding: 0.875rem 1rem;
    border-radius: var(--n-radius);
    border-left: 4px solid transparent;
    font-size: var(--n-text-sm);
    line-height: 1.5;
    box-shadow: var(--n-shadow-sm);
}
.n-alert-primary   { background: var(--n-primary-soft); border-left-color: var(--n-primary); color: var(--n-primary-ink); }
.n-alert-secondary { background: var(--n-secondary-soft); border-left-color: var(--n-secondary); color: var(--n-secondary-h); }
.n-alert-success   { background: #f0fdf4; border-left-color: var(--n-success);   color: #166534; }
.n-alert-danger    { background: #fef2f2; border-left-color: var(--n-danger);    color: #991b1b; }
.n-alert-warning   { background: #fffbeb; border-left-color: var(--n-warning);   color: #92400e; }
.n-alert-info      { background: #ecfeff; border-left-color: var(--n-info);      color: #155e75; }
.n-alert-light     { background: var(--n-surface-sunken); border-left-color: var(--n-border-color); color: var(--n-text); }
.n-alert-dark      { background: var(--n-dark); border-left-color: #0f172a; color: #fff; }
}


/* ----------------------------- */
/* 21 · Badges                   */
/* ----------------------------- */
@layer components {
.n-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: var(--n-text-xs);
    font-weight: 600;
    border-radius: var(--n-radius-full);
    line-height: 1.5;
}
.n-badge-primary   { background: var(--n-primary-soft); color: var(--n-primary); }
.n-badge-secondary { background: var(--n-secondary-soft); color: var(--n-secondary); }
.n-badge-success   { background: #f0fdf4; color: #166534; }
.n-badge-danger    { background: #fef2f2; color: #991b1b; }
.n-badge-warning   { background: #fffbeb; color: #92400e; }
.n-badge-info      { background: #ecfeff; color: #155e75; }
.n-badge-light     { background: var(--n-surface-sunken); color: var(--n-text); }
.n-badge-dark      { background: var(--n-dark); color: #fff; }

.n-badge-soft {
    background: var(--n-primary-soft);
    color: var(--n-primary);
}
}


/* ----------------------------- */
/* 22 · Tables                   */
/* ----------------------------- */
@layer components {
.n-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--n-text-sm);
}
.n-table th,
.n-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--n-border-color);
}
.n-table th {
    font-weight: 600;
    color: var(--n-text-muted);
    background: var(--n-bg-muted);
}
.n-table-striped tbody tr:nth-child(even) {
    background: var(--n-bg-muted);
}
.n-table-hover tbody tr {
    transition: background var(--n-duration) var(--n-ease);
}
.n-table-hover tbody tr:hover {
    background: #f1f5f9;
}
.n-table-bordered,
.n-table-bordered th,
.n-table-bordered td {
    border: 1px solid var(--n-border-color);
}
}


/* ----------------------------- */
/* 23 · Lists                    */
/* ----------------------------- */
@layer components {
.n-list {
    list-style: none;
    padding: 0;
}
.n-list > li {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--n-border-color);
}
.n-list > li:last-child {
    border-bottom: none;
}
.n-list-unstyled {
    list-style: none;
    padding-left: 0;
}
.n-list-inline {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
}


/* ----------------------------- */
/* 24 · Miscellaneous Helpers    */
/* ----------------------------- */
@layer utilities {
.n-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.n-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.n-pointer  { cursor: pointer; }
.n-select-none { user-select: none; }
.n-select-all  { user-select: all; }

.n-divider {
    border: none;
    border-top: 1px solid var(--n-border-color);
    margin: 1.5rem 0;
}

.n-img-fluid {
    max-width: 100%;
    height: auto;
}
.n-img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Avatar */
.n-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--n-radius-full);
    background: var(--n-primary);
    color: #fff;
    font-weight: 600;
    font-size: var(--n-text-sm);
    overflow: hidden;
}
.n-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.n-avatar-sm { width: 2rem; height: 2rem; font-size: var(--n-text-xs); }
.n-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: var(--n-text-lg); }
}

/* ----------------------------- */
/* 25 · Premium Helpers          */
/* ----------------------------- */
@layer utilities {
.n-surface {
    background: var(--n-bg);
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-xl);
    box-shadow: var(--n-shadow-soft);
}

.n-surface-glass {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--n-shadow-glow);
}

.n-gradient-text {
    background: linear-gradient(135deg, var(--n-primary), var(--n-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.n-gradient-border {
    position: relative;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--n-bg), var(--n-bg)) padding-box,
        linear-gradient(135deg, rgba(99,102,241,.8), rgba(14,165,233,.55)) border-box;
}

.n-ring {
    box-shadow: 0 0 0 1px rgba(99,102,241,.15), 0 0 0 4px rgba(99,102,241,.08);
}

.n-stack {
    display: grid;
    gap: var(--n-space-3);
}

.n-center {
    display: grid;
    place-items: center;
}

.n-clamp-2,
.n-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.n-clamp-2 { -webkit-line-clamp: 2; }
.n-clamp-3 { -webkit-line-clamp: 3; }
}

/* ----------------------------- */
/* 26 · Intrinsic Layouts        */
/* ----------------------------- */
@layer layout {
.n-section {
    padding-block: var(--n-section-space);
}

.n-content {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
}

.n-flow > * + * {
    margin-block-start: var(--n-flow-space, 1em);
}

.n-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--n-cluster-gap, var(--n-space-2));
}

.n-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--n-space-3);
}

.n-auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--n-grid-min, 16rem)), 1fr));
    gap: var(--n-grid-gap, var(--n-gutter));
}

.n-grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--n-grid-min, 14rem)), 1fr));
    gap: var(--n-grid-gap, var(--n-gutter));
}

.n-grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--n-grid-min, 14rem)), 1fr));
    gap: var(--n-grid-gap, var(--n-gutter));
}

.n-sidebar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--n-sidebar-gap, var(--n-space-4));
}

@media (min-width: 768px) {
    .n-sidebar-layout {
        grid-template-columns: minmax(12rem, var(--n-sidebar-width, 18rem)) minmax(0, 1fr);
    }
    .n-sidebar-layout.n-sidebar-right {
        grid-template-columns: minmax(0, 1fr) minmax(12rem, var(--n-sidebar-width, 18rem));
    }
}

.n-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--n-switcher-gap, var(--n-gutter));
}

.n-switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--n-switcher-threshold, 48rem) - 100%) * 999);
}

.n-cover {
    display: flex;
    min-height: var(--n-cover-height, 100dvh);
    flex-direction: column;
    padding: var(--n-space-3);
}

.n-cover > :first-child:not(.n-cover-center) { margin-block-end: auto; }
.n-cover > :last-child:not(.n-cover-center) { margin-block-start: auto; }
.n-cover > .n-cover-center { margin-block: auto; }

.n-frame {
    overflow: hidden;
    aspect-ratio: var(--n-frame-ratio, 16 / 9);
}

.n-frame > img,
.n-frame > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.n-reel {
    display: flex;
    gap: var(--n-reel-gap, var(--n-gutter));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding-block-end: var(--n-space-2);
}

.n-reel > * {
    flex: 0 0 var(--n-reel-item-width, min(80vw, 22rem));
    scroll-snap-align: start;
}

.n-container-query { container-type: inline-size; }
.n-place-center { place-items: center; }
.n-aspect-square { aspect-ratio: 1; }
.n-aspect-video { aspect-ratio: 16 / 9; }
.n-object-cover { object-fit: cover; }
.n-object-contain { object-fit: contain; }
.n-order-1 { order: 1; }
.n-order-2 { order: 2; }
.n-order-3 { order: 3; }
.n-order-4 { order: 4; }
.n-order-5 { order: 5; }
.n-order-first { order: -9999; }
.n-order-last { order: 9999; }

@container (min-width: 36rem) {
    .n-cq-row {
        display: flex;
        align-items: center;
        gap: var(--n-space-3);
    }
}
}

/* ----------------------------- */
/* 27 · Content & Prose          */
/* ----------------------------- */
@layer components {
.n-lead {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.65;
    color: var(--n-text-muted);
}

.n-caption {
    font-size: var(--n-text-xs);
    line-height: 1.5;
    color: var(--n-text-muted);
}

.n-overline {
    font-size: var(--n-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--n-primary);
}

.n-text-balance { text-wrap: balance; }
.n-text-pretty { text-wrap: pretty; }
.n-text-fluid-xl { font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.05; }

.n-code,
.n-code-block,
.n-kbd {
    font-family: var(--n-font-mono);
}

.n-code {
    padding: 0.125em 0.375em;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-sm);
    background: var(--n-bg-muted);
    font-size: 0.875em;
}

.n-code-block {
    overflow-x: auto;
    padding: 1rem 1.125rem;
    border: 1px solid #273449;
    border-radius: var(--n-radius-lg);
    background: #0f172a;
    color: #e2e8f0;
    font-size: var(--n-text-sm);
    line-height: 1.7;
    tab-size: 2;
}

.n-blockquote {
    padding-inline-start: 1.25rem;
    border-inline-start: 4px solid var(--n-primary);
    color: var(--n-text-muted);
    font-size: var(--n-text-lg);
    font-style: italic;
}

.n-kbd {
    display: inline-flex;
    min-width: 1.75em;
    min-height: 1.75em;
    align-items: center;
    justify-content: center;
    padding-inline: 0.4em;
    border: 1px solid var(--n-border-color);
    border-bottom-width: 2px;
    border-radius: var(--n-radius-sm);
    background: var(--n-surface-raised);
    box-shadow: var(--n-shadow-sm);
    font-size: 0.8em;
}

.n-mark {
    padding-inline: 0.15em;
    border-radius: 0.15em;
    background: #fef08a;
    color: #422006;
}

.n-prose {
    max-width: 70ch;
    color: var(--n-text);
    line-height: 1.75;
}

.n-prose > * + * { margin-block-start: 1.25em; }
.n-prose :where(h2, h3, h4) { margin-block-start: 1.8em; text-wrap: balance; }
.n-prose :where(ul, ol) { padding-inline-start: 1.5em; }
.n-prose li + li { margin-block-start: 0.4em; }
.n-prose a { font-weight: 500; text-decoration: underline; text-underline-offset: 0.18em; }
.n-prose img { margin-inline: auto; border-radius: var(--n-radius-lg); }
.n-prose :where(pre, blockquote, figure) { margin-block: 1.75em; }
.n-prose figcaption { margin-block-start: 0.5rem; color: var(--n-text-muted); font-size: var(--n-text-sm); text-align: center; }

.n-clamp-1,
.n-clamp-4,
.n-clamp-5,
.n-clamp-6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.n-clamp-1 { -webkit-line-clamp: 1; }
.n-clamp-4 { -webkit-line-clamp: 4; }
.n-clamp-5 { -webkit-line-clamp: 5; }
.n-clamp-6 { -webkit-line-clamp: 6; }
}

/* ----------------------------- */
/* 28 · Advanced Forms          */
/* ----------------------------- */
@layer components {
.n-fieldset {
    min-width: 0;
    padding: var(--n-space-3);
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-lg);
}

.n-fieldset > legend {
    padding-inline: 0.5rem;
    font-weight: 600;
}

.n-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--n-component-gap);
}

.n-field-row {
    display: grid;
    gap: 0.375rem;
}

.n-input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.n-input-group > :where(.n-input, .n-select, .n-btn, .n-input-prefix, .n-input-suffix) {
    border-radius: 0;
}

.n-input-group > :first-child { border-start-start-radius: var(--n-radius); border-end-start-radius: var(--n-radius); }
.n-input-group > :last-child { border-start-end-radius: var(--n-radius); border-end-end-radius: var(--n-radius); }
.n-input-group > * + * { margin-inline-start: -1px; }
.n-input-group > :focus { position: relative; z-index: 1; }

.n-input-prefix,
.n-input-suffix {
    display: inline-flex;
    align-items: center;
    padding-inline: 0.75rem;
    border: 1px solid var(--n-border-color);
    background: var(--n-bg-muted);
    color: var(--n-text-muted);
    white-space: nowrap;
}

.n-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
}

.n-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.n-switch-track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-full);
    background: var(--n-bg-muted);
    transition: background var(--n-duration) var(--n-ease), border-color var(--n-duration) var(--n-ease);
}

.n-switch-track::after {
    content: "";
    position: absolute;
    inset-block-start: 0.1875rem;
    inset-inline-start: 0.1875rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--n-surface-raised);
    box-shadow: var(--n-shadow-sm);
    transition: transform var(--n-duration) var(--n-ease);
}

.n-switch input:checked + .n-switch-track { border-color: var(--n-primary); background: var(--n-primary); }
.n-switch input:checked + .n-switch-track::after { transform: translateX(1.25rem); }
.n-switch input:focus-visible + .n-switch-track { box-shadow: 0 0 0 3px var(--n-focus); }
.n-switch input:disabled + .n-switch-track { opacity: 0.55; cursor: not-allowed; }

.n-range { width: 100%; accent-color: var(--n-primary); }

.n-file-input {
    width: 100%;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius);
    background: var(--n-bg);
    color: var(--n-text-muted);
}

.n-file-input::file-selector-button {
    min-height: var(--n-control-height);
    margin-inline-end: 0.75rem;
    padding-inline: var(--n-control-padding-x);
    border: 0;
    border-inline-end: 1px solid var(--n-border-color);
    background: var(--n-bg-muted);
    color: var(--n-text);
    font-weight: 600;
    cursor: pointer;
}

.n-search-input { padding-inline-start: 2.5rem; }

.n-search-field {
    position: relative;
}

.n-search-field::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: 50%;
    inset-inline-start: 0.875rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--n-text-muted);
    border-radius: 50%;
    transform: translateY(-58%);
    pointer-events: none;
}

.n-search-field::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: 58%;
    inset-inline-start: 1.62rem;
    width: 0.4rem;
    height: 2px;
    background: var(--n-text-muted);
    transform: rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
}

.n-required::after { content: " *"; color: var(--n-danger); }
.n-character-count { margin-block-start: 0.25rem; color: var(--n-text-muted); font-size: var(--n-text-xs); text-align: end; }
.n-readonly { background: var(--n-bg-muted); cursor: default; }

.n-input-loading {
    position: relative;
}

.n-input-loading::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.875rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--n-border-color);
    border-top-color: var(--n-primary);
    border-radius: 50%;
    animation: n-spin 0.7s linear infinite;
    transform: translateY(-50%);
}

.n-valid,
[aria-invalid="false"].n-input { border-color: var(--n-success); }
.n-invalid,
[aria-invalid="true"].n-input { border-color: var(--n-danger); }
.n-invalid:focus,
[aria-invalid="true"].n-input:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16); }
}

/* ----------------------------- */
/* 29 · Extended Components      */
/* ----------------------------- */
@layer components {
.n-accordion {
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-lg);
    background: var(--n-surface);
    overflow: clip;
}

.n-accordion > details + details { border-top: 1px solid var(--n-border-color); }
.n-accordion summary {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--n-space-3);
    padding: 0.875rem 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.n-accordion summary::-webkit-details-marker { display: none; }
.n-accordion summary::after { content: "+"; color: var(--n-text-muted); font-size: 1.25em; }
.n-accordion details[open] summary::after { content: "−"; }
.n-accordion details[open] summary { background: var(--n-bg-muted); }
.n-accordion-panel { padding: 1rem; border-top: 1px solid var(--n-border-color); }

.n-dialog {
    width: min(calc(100% - 2rem), var(--n-dialog-width, 34rem));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-xl);
    background: var(--n-surface-raised);
    color: var(--n-text);
    box-shadow: var(--n-shadow-xl);
    overflow: auto;
}
.n-dialog::backdrop { background: var(--n-overlay); backdrop-filter: blur(3px); }
.n-dialog-header,
.n-dialog-body,
.n-dialog-footer { padding: 1rem 1.25rem; }
.n-dialog-header { border-bottom: 1px solid var(--n-border-color); }
.n-dialog-footer { display: flex; justify-content: flex-end; gap: 0.5rem; border-top: 1px solid var(--n-border-color); }

.n-drawer {
    width: min(90vw, var(--n-drawer-width, 26rem));
    height: 100dvh;
    max-height: none;
    margin: 0 0 0 auto;
    border: 0;
    border-inline-start: 1px solid var(--n-border-color);
    border-radius: 0;
}
.n-drawer.n-drawer-left { margin: 0 auto 0 0; border-inline-start: 0; border-inline-end: 1px solid var(--n-border-color); }

.n-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--n-border-color);
}
.n-tab {
    position: relative;
    padding: 0.625rem 0.875rem;
    border: 0;
    background: transparent;
    color: var(--n-text-muted);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.n-tab:hover { color: var(--n-text); }
.n-tab[aria-selected="true"],
.n-tab.n-is-selected,
.n-tab.n-selected,
.n-tab.active { color: var(--n-primary); }
.n-tab[aria-selected="true"]::after,
.n-tab.n-is-selected::after,
.n-tab.n-selected::after,
.n-tab.active::after {
    content: "";
    position: absolute;
    inset-inline: 0.5rem;
    inset-block-end: -1px;
    height: 2px;
    background: var(--n-primary);
}
.n-tab-panel { padding-block: 1rem; }

.n-dropdown,
.n-popover {
    min-width: 12rem;
    padding: 0.375rem;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-lg);
    background: var(--n-surface-raised);
    color: var(--n-text);
    box-shadow: var(--n-shadow-lg);
}
.n-dropdown-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: var(--n-radius-sm);
    background: transparent;
    color: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.n-dropdown-item:hover,
.n-dropdown-item:focus-visible { background: var(--n-bg-muted); text-decoration: none; }

.n-tooltip {
    position: relative;
}
.n-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 1000;
    inset-inline-start: 50%;
    inset-block-end: calc(100% + 0.5rem);
    width: max-content;
    max-width: 16rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--n-radius-sm);
    background: #0f172a;
    color: #fff;
    font-size: var(--n-text-xs);
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.25rem);
    transition: opacity var(--n-duration) var(--n-ease), transform var(--n-duration) var(--n-ease);
}
.n-tooltip:hover::after,
.n-tooltip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

.n-toast {
    display: flex;
    width: min(calc(100vw - 2rem), 24rem);
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-lg);
    background: var(--n-surface-raised);
    color: var(--n-text);
    box-shadow: var(--n-shadow-lg);
}
.n-toast-stack { position: fixed; z-index: 1000; inset-inline-end: 1rem; inset-block-end: 1rem; display: grid; gap: 0.75rem; }

.n-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--n-text-muted); font-size: var(--n-text-sm); list-style: none; }
.n-breadcrumb > li + li::before { content: "/"; margin-inline-end: 0.5rem; color: var(--n-border-color); }
.n-breadcrumb [aria-current="page"] { color: var(--n-text); font-weight: 600; }

.n-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; list-style: none; }
.n-pagination-link {
    display: inline-grid;
    min-width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding-inline: 0.625rem;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius);
    color: var(--n-text);
    text-decoration: none;
}
.n-pagination-link:hover { border-color: var(--n-primary); color: var(--n-primary); text-decoration: none; }
.n-pagination-link[aria-current="page"] { border-color: var(--n-primary); background: var(--n-primary); color: var(--n-on-primary); }

.n-progress {
    width: 100%;
    height: 0.625rem;
    border: 0;
    border-radius: var(--n-radius-full);
    background: var(--n-bg-muted);
    overflow: hidden;
}
.n-progress::-webkit-progress-bar { background: var(--n-bg-muted); }
.n-progress::-webkit-progress-value { border-radius: inherit; background: var(--n-primary); }
.n-progress::-moz-progress-bar { border-radius: inherit; background: var(--n-primary); }

.n-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: n-spin 0.7s linear infinite;
}
.n-spinner-sm { width: 1rem; height: 1rem; }
.n-spinner-lg { width: 2rem; height: 2rem; border-width: 3px; }

.n-skeleton {
    color: transparent !important;
    border-radius: var(--n-radius-sm);
    background: linear-gradient(90deg, var(--n-bg-muted) 25%, var(--n-border-color) 50%, var(--n-bg-muted) 75%);
    background-size: 200% 100%;
    animation: n-shimmer 1.5s ease-in-out infinite;
}
.n-skeleton-text { height: 0.875em; }
.n-skeleton-circle { border-radius: 50%; aspect-ratio: 1; }

.n-stat { display: grid; gap: 0.25rem; }
.n-stat-label { color: var(--n-text-muted); font-size: var(--n-text-sm); font-weight: 600; }
.n-stat-value { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.n-stat-change { font-size: var(--n-text-sm); font-weight: 600; }

.n-empty-state { display: grid; max-width: 32rem; place-items: center; gap: 0.75rem; margin-inline: auto; padding: 3rem 1.5rem; text-align: center; }
.n-empty-state-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: var(--n-radius-full); background: var(--n-bg-muted); font-size: 1.5rem; }

.n-callout { padding: 1rem; border: 1px solid var(--n-border-color); border-radius: var(--n-radius-lg); background: var(--n-bg-muted); }
.n-callout-title { margin-block-end: 0.25rem; font-weight: 700; }
.n-callout-primary { border-color: var(--n-primary-border); background: var(--n-primary-soft); color: var(--n-primary-ink); }
.n-callout-success { border-color: rgba(21, 128, 61, 0.3); background: #f0fdf4; color: #14532d; }
.n-callout-danger { border-color: rgba(220, 38, 38, 0.3); background: #fef2f2; color: #7f1d1d; }

.n-chip { display: inline-flex; min-height: 2rem; align-items: center; gap: 0.375rem; padding-inline: 0.625rem; border: 1px solid var(--n-border-color); border-radius: var(--n-radius-full); background: var(--n-surface); color: var(--n-text); font-size: var(--n-text-sm); }
.n-chip-removable { padding-inline-end: 0.375rem; }
.n-chip-remove { display: inline-grid; width: 1.375rem; height: 1.375rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--n-text-muted); cursor: pointer; }
.n-chip-remove:hover { background: var(--n-bg-muted); color: var(--n-text); }

.n-avatar-group { display: flex; align-items: center; padding-inline-start: 0.5rem; }
.n-avatar-group > .n-avatar { margin-inline-start: -0.5rem; border: 2px solid var(--n-bg); }

.n-button-group { display: inline-flex; }
.n-button-group > .n-btn { border-radius: 0; }
.n-button-group > .n-btn + .n-btn { margin-inline-start: -1px; }
.n-button-group > .n-btn:first-child { border-start-start-radius: var(--n-radius); border-end-start-radius: var(--n-radius); }
.n-button-group > .n-btn:last-child { border-start-end-radius: var(--n-radius); border-end-end-radius: var(--n-radius); }

.n-list-group { border: 1px solid var(--n-border-color); border-radius: var(--n-radius-lg); background: var(--n-surface); list-style: none; overflow: hidden; }
.n-list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }
.n-list-group-item + .n-list-group-item { border-top: 1px solid var(--n-border-color); }
.n-list-group-item[href]:hover { background: var(--n-bg-muted); text-decoration: none; }

@keyframes n-spin { to { transform: rotate(360deg); } }
@keyframes n-shimmer { to { background-position: -200% 0; } }
}

/* ----------------------------- */
/* 30 · Surfaces & Effects       */
/* ----------------------------- */
@layer utilities {
.n-surface-raised {
    background: var(--n-surface-raised);
    border: 1px solid var(--n-border-color);
    box-shadow: var(--n-shadow-md);
}
.n-surface-sunken { background: var(--n-surface-sunken); border: 1px solid var(--n-border-color); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06); }
.n-surface-overlay { background: var(--n-surface-raised); border: 1px solid var(--n-border-color); box-shadow: var(--n-shadow-xl); }
.n-gradient-primary { background: linear-gradient(135deg, var(--n-primary), var(--n-secondary)); color: #fff; }
.n-gradient-mesh {
    background-color: var(--n-bg);
    background-image:
        radial-gradient(circle at 10% 15%, rgba(15, 118, 110, 0.18), transparent 30%),
        radial-gradient(circle at 90% 10%, rgba(14, 116, 144, 0.14), transparent 28%),
        radial-gradient(circle at 70% 90%, rgba(20, 125, 116, 0.12), transparent 32%);
}
.n-page-atmosphere {
    background-color: var(--n-bg);
    background-image:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 32%),
        radial-gradient(circle at top right, rgba(14, 116, 144, 0.06), transparent 28%);
    background-attachment: fixed;
}
.n-noise { background-image: repeating-radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 4px); }
.n-shadow-inner { box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.08); }
.n-shadow-glow { box-shadow: var(--n-shadow-glow); }
.n-ring-success { box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18); }
.n-ring-danger { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.n-backdrop-blur { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.n-divider-gradient { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--n-border-color), transparent); }
.n-hover-lift { transition: transform var(--n-duration) var(--n-ease), box-shadow var(--n-duration) var(--n-ease); }
.n-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--n-shadow-lg); }
.n-hover-scale { transition: transform var(--n-duration) var(--n-ease); }
.n-hover-scale:hover { transform: scale(1.025); }
.n-press:active { transform: translateY(1px) scale(0.99); }
.n-blur-sm { filter: blur(4px); }
.n-grayscale { filter: grayscale(1); }
.n-saturate { filter: saturate(1.5); }
}

/* ----------------------------- */
/* 31 · State Utilities          */
/* ----------------------------- */
@layer states {
.n-focus-ring:focus-visible { outline: 3px solid var(--n-focus); outline-offset: 2px; }
.n-is-selected,
.n-selected,
[data-state="selected"] { border-color: var(--n-primary); background: var(--n-primary-soft); }
.n-is-active,
.n-active,
[data-state="active"] { color: var(--n-primary); }
.n-is-expanded,
.n-expanded,
[aria-expanded="true"].n-expandable { background: var(--n-bg-muted); }
.n-is-dragging,
.n-dragging,
[data-state="dragging"] { opacity: 0.72; box-shadow: var(--n-shadow-lg); transform: rotate(1deg); cursor: grabbing; }
.n-is-loading,
.n-loading,
[data-state="loading"] { cursor: progress; }
.n-is-loading > :not(.n-spinner),
.n-loading > :not(.n-spinner) { opacity: 0.62; }
.n-is-disabled,
.n-disabled,
[aria-disabled="true"] { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.n-is-open,
[data-state="open"] { --n-state-open: 1; }
.n-hidden { display: none !important; }
.n-invisible { visibility: hidden; }
.n-visible { visibility: visible; }
}

/* ----------------------------- */
/* 32 · Themes & Density         */
/* ----------------------------- */
@layer themes {
[data-theme="ocean"] {
    --n-primary: #0369a1;
    --n-primary-h: #075985;
    --n-secondary: #0e7490;
    --n-secondary-h: #155e75;
    --n-focus: rgba(3, 105, 161, 0.22);
    --n-primary-soft: rgba(3, 105, 161, 0.12);
    --n-primary-border: rgba(3, 105, 161, 0.3);
    --n-primary-ink: #075985;
    --n-secondary-soft: rgba(14, 116, 144, 0.12);
    --n-visited: #0f766e;
}

[data-theme="forest"] {
    --n-primary: #166534;
    --n-primary-h: #14532d;
    --n-secondary: #3f6212;
    --n-secondary-h: #365314;
    --n-focus: rgba(22, 101, 52, 0.22);
    --n-primary-soft: rgba(22, 101, 52, 0.12);
    --n-primary-border: rgba(22, 101, 52, 0.3);
    --n-primary-ink: #14532d;
    --n-secondary-soft: rgba(63, 98, 18, 0.12);
    --n-visited: #0f766e;
}

[data-theme="rose"] {
    --n-primary: #be123c;
    --n-primary-h: #9f1239;
    --n-secondary: #9d174d;
    --n-secondary-h: #831843;
    --n-focus: rgba(190, 18, 60, 0.22);
    --n-primary-soft: rgba(190, 18, 60, 0.12);
    --n-primary-border: rgba(190, 18, 60, 0.3);
    --n-primary-ink: #9f1239;
    --n-secondary-soft: rgba(157, 23, 77, 0.12);
    --n-visited: #0f766e;
}

[data-theme="amber"] {
    --n-primary: #b45309;
    --n-primary-h: #92400e;
    --n-secondary: #a16207;
    --n-secondary-h: #854d0e;
    --n-focus: rgba(180, 83, 9, 0.22);
    --n-primary-soft: rgba(180, 83, 9, 0.12);
    --n-primary-border: rgba(180, 83, 9, 0.3);
    --n-primary-ink: #78350f;
    --n-secondary-soft: rgba(161, 98, 7, 0.12);
    --n-visited: #0f766e;
}

[data-theme="mono"] {
    --n-primary: #334155;
    --n-primary-h: #1e293b;
    --n-secondary: #475569;
    --n-secondary-h: #334155;
    --n-focus: rgba(51, 65, 85, 0.22);
    --n-primary-soft: rgba(51, 65, 85, 0.12);
    --n-primary-border: rgba(51, 65, 85, 0.3);
    --n-primary-ink: #1e293b;
    --n-secondary-soft: rgba(71, 85, 105, 0.12);
    --n-visited: #0f766e;
}

[data-density="compact"] {
    --n-control-height: 2rem;
    --n-control-padding-x: 0.625rem;
    --n-component-gap: var(--n-space-2);
}

[data-density="spacious"] {
    --n-control-height: 3rem;
    --n-control-padding-x: 1.125rem;
    --n-component-gap: var(--n-space-4);
}
}

/* ----------------------------- */
/* 33 · Accessibility & Print    */
/* ----------------------------- */
@layer base {
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--n-focus);
    outline-offset: 2px;
}

.n-skip-link {
    position: fixed;
    z-index: 9999;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--n-radius);
    background: var(--n-primary);
    color: var(--n-on-primary);
    box-shadow: var(--n-shadow-lg);
    transform: translateY(-200%);
}
.n-skip-link:focus { transform: translateY(0); }

.n-sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.n-touch-target { min-width: 2.75rem; min-height: 2.75rem; }
.n-pointer-events-none { pointer-events: none; }
.n-pointer-events-auto { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root { --n-border-color: #64748b; --n-focus: rgba(49, 46, 129, 0.42); }
    .n-btn, .n-input, .n-select, .n-textarea { border-width: 2px; }
}

@media (forced-colors: active) {
    .n-btn, .n-input, .n-select, .n-textarea, .n-card, .n-dialog { forced-color-adjust: auto; }
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
    .n-btn:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; }
    .n-spinner { border-color: CanvasText; border-right-color: transparent; }
}

@media print {
    *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .n-navbar, .n-no-print, .n-toast-stack { display: none !important; }
    .n-container, .n-container-fluid { max-width: none; padding: 0; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
    a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
    .n-card, .n-prose pre, .n-table { break-inside: avoid; }
}
}

/* ----------------------------- */
/* 34 · Modern Utilities         */
/* ----------------------------- */
@layer utilities {
.n-columns-2 { columns: 2; column-gap: var(--n-gutter); }
.n-columns-3 { columns: 3; column-gap: var(--n-gutter); }
.n-break-inside-avoid { break-inside: avoid; }
.n-resize-none { resize: none; }
.n-resize { resize: both; }
.n-scroll-smooth { scroll-behavior: smooth; }
.n-snap-x { scroll-snap-type: x mandatory; }
.n-snap-start { scroll-snap-align: start; }
.n-overscroll-contain { overscroll-behavior: contain; }
.n-isolate { isolation: isolate; }
.n-mix-blend-multiply { mix-blend-mode: multiply; }
.n-will-change-transform { will-change: transform; }

@media (max-width: 767.98px) {
    .n-btn,
    .n-input,
    .n-select,
    .n-nav-link,
    .n-pagination-link { min-height: 2.75rem; }
    .n-columns-2,
    .n-columns-3 { columns: 1; }
    .n-split { align-items: stretch; flex-direction: column; }
    .n-tooltip::after {
        inset-inline-start: auto;
        inset-inline-end: 0;
        max-width: min(16rem, calc(100vw - 2rem));
        transform: translate(0, 0.25rem);
    }
    .n-tooltip:hover::after,
    .n-tooltip:focus-visible::after { transform: translate(0, 0); }
}
}

/* ----------------------------- */
/* 35 · Dark Mode                */
/* ----------------------------- */
@layer themes {
@media (prefers-color-scheme: dark) {
    :root {
        --n-text:        #e2e8f0;
        --n-text-muted:  #94a3b8;
        --n-bg:          #0f172a;
        --n-bg-muted:    #1e293b;
        --n-border-color:#334155;
        --n-surface:     #0f172a;
        --n-surface-raised: #172033;
        --n-surface-sunken: #0b1220;
        --n-overlay:     rgba(2, 6, 23, 0.76);
        --n-primary:     #d5a44f;
        --n-primary-h:   #e2bc75;
        --n-secondary:   #c28b31;
        --n-secondary-h: #d5a44f;
        --n-focus:       rgba(213, 164, 79, 0.42);
        --n-primary-soft: rgba(213, 164, 79, 0.13);
        --n-primary-border: rgba(213, 164, 79, 0.42);
        --n-primary-ink: #f0d395;
        --n-secondary-soft: rgba(194, 139, 49, 0.14);
        --n-visited: #d5a44f;
        --n-on-primary: #1a160f;
        --n-on-secondary: #1a160f;
        color-scheme: dark;
    }

    .n-page-atmosphere {
        background-image:
            radial-gradient(circle at top left, rgba(213, 164, 79, 0.12), transparent 30%),
            radial-gradient(circle at top right, rgba(226, 188, 117, 0.07), transparent 26%);
    }

    .n-alert-primary   { background: var(--n-primary-soft); color: var(--n-text); }
    .n-alert-success   { background: #052e16; color: #bbf7d0; }
    .n-alert-danger    { background: #450a0a; color: #fecaca; }
    .n-alert-warning   { background: #451a03; color: #fde68a; }
    .n-alert-info      { background: #083344; color: #a5f3fc; }

    .n-badge-primary   { background: var(--n-primary-soft); color: var(--n-text); }
    .n-badge-secondary { background: var(--n-secondary-soft); color: var(--n-text); }
    .n-badge-success   { background: #052e16; color: #86efac; }
    .n-badge-danger    { background: #450a0a; color: #fca5a5; }
    .n-badge-warning   { background: #451a03; color: #fcd34d; }
    .n-badge-info      { background: #083344; color: #67e8f9; }

    .n-table-hover tbody tr:hover { background: #1e293b; }

    .n-surface-glass {
        background: rgba(15, 23, 42, 0.72);
        border-color: rgba(148, 163, 184, 0.18);
    }

    .n-callout-primary { background: var(--n-primary-soft); color: var(--n-text); }
    .n-callout-success { background: #052e16; color: #bbf7d0; }
    .n-callout-danger { background: #450a0a; color: #fecaca; }
    .n-mark { background: #713f12; color: #fef3c7; }
    .n-tooltip::after { background: #f8fafc; color: #0f172a; }
}

/* Manual dark mode class override */
.n-dark-mode {
    --n-text:        #e2e8f0;
    --n-text-muted:  #94a3b8;
    --n-bg:          #0f172a;
    --n-bg-muted:    #1e293b;
    --n-border-color:#334155;
    --n-surface:     #0f172a;
    --n-surface-raised: #172033;
    --n-surface-sunken: #0b1220;
    --n-overlay:     rgba(2, 6, 23, 0.76);
    --n-primary:     #d5a44f;
    --n-primary-h:   #e2bc75;
    --n-secondary:   #c28b31;
    --n-secondary-h: #d5a44f;
    --n-focus:       rgba(213, 164, 79, 0.42);
    --n-primary-soft: rgba(213, 164, 79, 0.13);
    --n-primary-border: rgba(213, 164, 79, 0.42);
    --n-primary-ink: #f0d395;
    --n-secondary-soft: rgba(194, 139, 49, 0.14);
    --n-visited: #d5a44f;
    --n-on-primary: #1a160f;
    --n-on-secondary: #1a160f;
    color-scheme: dark;
}

.n-dark-mode .n-page-atmosphere,
.n-dark-mode.n-page-atmosphere {
    background-image:
        radial-gradient(circle at top left, rgba(213, 164, 79, 0.12), transparent 30%),
        radial-gradient(circle at top right, rgba(226, 188, 117, 0.07), transparent 26%);
}

.n-dark-mode .n-alert-primary   { background: var(--n-primary-soft); color: var(--n-text); }
.n-dark-mode .n-alert-success   { background: #052e16; color: #bbf7d0; }
.n-dark-mode .n-alert-danger    { background: #450a0a; color: #fecaca; }
.n-dark-mode .n-alert-warning   { background: #451a03; color: #fde68a; }
.n-dark-mode .n-alert-info      { background: #083344; color: #a5f3fc; }
.n-dark-mode .n-badge-primary   { background: var(--n-primary-soft); color: var(--n-text); }
.n-dark-mode .n-badge-secondary { background: var(--n-secondary-soft); color: var(--n-text); }
.n-dark-mode .n-badge-success   { background: #052e16; color: #86efac; }
.n-dark-mode .n-badge-danger    { background: #450a0a; color: #fca5a5; }
.n-dark-mode .n-badge-warning   { background: #451a03; color: #fcd34d; }
.n-dark-mode .n-badge-info      { background: #083344; color: #67e8f9; }
.n-dark-mode .n-table-hover tbody tr:hover { background: #1e293b; }
.n-dark-mode .n-surface-glass { background: rgba(15, 23, 42, 0.72); border-color: rgba(148, 163, 184, 0.18); }
.n-dark-mode .n-callout-primary { background: var(--n-primary-soft); color: var(--n-text); }
.n-dark-mode .n-callout-success { background: #052e16; color: #bbf7d0; }
.n-dark-mode .n-callout-danger { background: #450a0a; color: #fecaca; }
.n-dark-mode .n-mark { background: #713f12; color: #fef3c7; }
.n-dark-mode .n-tooltip::after { background: #f8fafc; color: #0f172a; }
}


/* ----------------------------- */
/* 36 · Production Primitives     */
/* ----------------------------- */
@layer components {
/* Distilled from shipping products: metric/quota dashboards (LeadScrapper Pro)
   and travel-itinerary overviews (Itiner). All token-driven, so dark mode is
   automatic. Each component's origin product is noted in its curated entry. */

/* Icon tile — rounded icon container (origin: both products, pervasive) */
.n-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--n-radius-lg);
    background: var(--n-primary-soft);
    color: var(--n-primary);
    flex: none;
}
.n-icon-tile-sm { width: 2rem; height: 2rem; border-radius: var(--n-radius); }
.n-icon-tile-lg { width: 3.5rem; height: 3.5rem; border-radius: var(--n-radius-xl); }
.n-icon-tile-round { border-radius: var(--n-radius-full); }
.n-icon-tile-primary { background: var(--n-primary-soft);           color: var(--n-primary); }
.n-icon-tile-success { background: rgba(21, 128, 61, 0.14);         color: var(--n-success); }
.n-icon-tile-danger  { background: rgba(220, 38, 38, 0.14);         color: var(--n-danger); }
.n-icon-tile-warning { background: rgba(245, 158, 11, 0.16);        color: var(--n-warning-h); }
.n-icon-tile-info    { background: rgba(14, 116, 144, 0.14);        color: var(--n-info); }
.n-icon-tile-neutral { background: var(--n-surface-sunken);         color: var(--n-text-muted); }

/* Status indicator — dot + label (origin: both products) */
.n-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: var(--n-text-sm);
    font-weight: 600;
    color: var(--n-text-muted);
}
.n-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--n-radius-full);
    background: currentColor;
    flex: none;
}
.n-status-online  { color: var(--n-success); }
.n-status-idle    { color: var(--n-warning-h); }
.n-status-offline { color: var(--n-text-muted); }
.n-status-error   { color: var(--n-danger); }
.n-status-busy    { color: var(--n-info); }
.n-status-pulse .n-status-dot {
    position: relative;
}
.n-status-pulse .n-status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    animation: n-status-ping 1.4s var(--n-ease) infinite;
}
@keyframes n-status-ping {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .n-status-pulse .n-status-dot::after { animation: none; }
}

/* Meter — labeled usage/quota bar with threshold colors (origin: LeadScrapper Pro) */
.n-meter { display: block; }
.n-meter-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}
.n-meter-label {
    font-size: var(--n-text-xs);
    font-weight: 600;
    color: var(--n-text-muted);
}
.n-meter-value {
    font-size: var(--n-text-xs);
    font-weight: 700;
    color: var(--n-text);
}
.n-meter-track {
    height: 0.5rem;
    border-radius: var(--n-radius-full);
    background: var(--n-surface-sunken);
    overflow: hidden;
}
.n-meter-fill {
    height: 100%;
    width: var(--n-meter-value, 0%);
    border-radius: inherit;
    background: var(--n-primary);
    transition: width var(--n-duration-slow) var(--n-ease);
}
.n-meter-success .n-meter-fill { background: var(--n-success); }
.n-meter-warning .n-meter-fill { background: var(--n-warning); }
.n-meter-danger  .n-meter-fill { background: var(--n-danger); }
.n-meter-sm .n-meter-track { height: 0.375rem; }
.n-meter-lg .n-meter-track { height: 0.75rem; }

/* Gauge — radial score ring (origin: LeadScrapper Pro) */
.n-gauge {
    --n-gauge-value: 0;
    --n-gauge-size: 5rem;
    --n-gauge-color: var(--n-primary);
    position: relative;
    display: grid;
    place-items: center;
    width: var(--n-gauge-size);
    height: var(--n-gauge-size);
    border-radius: var(--n-radius-full);
    background: conic-gradient(var(--n-gauge-color) calc(var(--n-gauge-value) * 1%), var(--n-surface-sunken) 0);
}
.n-gauge::before {
    content: "";
    position: absolute;
    inset: 0.5rem;
    border-radius: var(--n-radius-full);
    background: var(--n-surface);
}
.n-gauge-value {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: var(--n-text-lg);
    color: var(--n-text);
}
.n-gauge-label {
    position: relative;
    z-index: 1;
    font-size: var(--n-text-xs);
    color: var(--n-text-muted);
}
.n-gauge-success { --n-gauge-color: var(--n-success); }
.n-gauge-warning { --n-gauge-color: var(--n-warning); }
.n-gauge-danger  { --n-gauge-color: var(--n-danger); }
.n-gauge-sm { --n-gauge-size: 3.5rem; }
.n-gauge-sm .n-gauge-value { font-size: var(--n-text-sm); }
.n-gauge-lg { --n-gauge-size: 7rem; }

/* Segmented control — single-select pill group (origin: both products) */
.n-segmented {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--n-surface-sunken);
    border-radius: var(--n-radius-full);
}
.n-segmented-item {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.375rem 0.875rem;
    border-radius: var(--n-radius-full);
    font-size: var(--n-text-sm);
    font-weight: 600;
    color: var(--n-text-muted);
    cursor: pointer;
    transition: background var(--n-duration) var(--n-ease),
                color var(--n-duration) var(--n-ease),
                box-shadow var(--n-duration) var(--n-ease);
}
.n-segmented-item:hover { color: var(--n-text); }
.n-segmented-item[aria-selected="true"],
.n-segmented-item.n-is-selected,
.n-segmented-item.n-selected,
.n-segmented-item.active {
    background: var(--n-surface);
    color: var(--n-text);
    box-shadow: var(--n-shadow-sm);
}
.n-segmented-item:focus-visible {
    outline: 2px solid var(--n-primary);
    outline-offset: 1px;
}
.n-segmented-sm .n-segmented-item { padding: 0.25rem 0.625rem; font-size: var(--n-text-xs); }

/* Stat grid — responsive wrapper for n-stat / metric tiles (origin: both products) */
.n-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--n-component-gap);
}
}


/* ----------------------------- */
/* 37 · Production Surfaces       */
/* ----------------------------- */
@layer components {

/* Promo / CTA banner (origin: LeadScrapper Pro) */
.n-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-xl);
    background: var(--n-surface-raised);
    overflow: hidden;
}
.n-banner-dark {
    border-color: transparent;
    color: #f8fafc;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(15, 118, 110, 0.35), transparent 60%),
        var(--n-dark);
}
.n-banner-dark .n-banner-text { color: rgba(248, 250, 252, 0.72); }
.n-banner-eyebrow {
    font-size: var(--n-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--n-primary);
}
.n-banner-dark .n-banner-eyebrow { color: #5eead4; }
.n-banner-title {
    font-size: var(--n-text-2xl);
    font-weight: 700;
    line-height: 1.2;
}
.n-banner-text {
    color: var(--n-text-muted);
    max-width: 46ch;
}
.n-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.n-banner-media { flex: none; }
@media (min-width: 768px) {
    .n-banner-split {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Sticky action dock — floating pill of actions (origin: Itiner) */
.n-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    z-index: 40;
    display: flex;
    justify-content: center;
    padding: 0 1rem;
    pointer-events: none;
}
.n-dock-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-full);
    background: var(--n-surface-raised);
    box-shadow: var(--n-shadow-lg);
    pointer-events: auto;
    max-width: 100%;
}
.n-dock-bar-dark {
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
}
.n-dock-item {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--n-radius);
    font-size: var(--n-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--n-duration) var(--n-ease);
}
.n-dock-item:hover { background: rgba(148, 163, 184, 0.18); }
.n-dock-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.25rem 0;
    background: var(--n-border-color);
}
.n-dock-bar-dark .n-dock-divider { background: rgba(255, 255, 255, 0.12); }

/* Cookie / consent bar — persistent bottom notice (origin: both products) */
.n-cookie-bar {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-lg);
    background: var(--n-surface-raised);
    box-shadow: var(--n-shadow-lg);
}
.n-cookie-bar-text {
    font-size: var(--n-text-sm);
    color: var(--n-text-muted);
    flex: 1;
}
.n-cookie-bar-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
@media (min-width: 768px) {
    .n-cookie-bar {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(92vw, 54rem);
        flex-direction: row;
        align-items: center;
    }
}

/* Combobox — typeahead input + results list (origin: both products) */
.n-combobox { position: relative; }
.n-combobox-list {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.25rem;
    list-style: none;
    background: var(--n-surface-raised);
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-lg);
    box-shadow: var(--n-shadow-lg);
}
.n-combobox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: var(--n-radius);
    font-size: var(--n-text-sm);
    color: var(--n-text);
    cursor: pointer;
    text-align: left;
}
.n-combobox-option:hover,
.n-combobox-option[aria-selected="true"],
.n-combobox-option.n-is-selected,
.n-combobox-option.n-selected,
.n-combobox-option.active {
    background: var(--n-primary-soft);
    color: var(--n-primary-ink);
}
.n-combobox-empty {
    padding: 1rem;
    text-align: center;
    font-size: var(--n-text-sm);
    color: var(--n-text-muted);
}
}


/* ----------------------------- */
/* 38 · Production Data Display   */
/* ----------------------------- */
@layer components {

/* Timeline — vertical connector list (origin: Itiner) */
.n-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}
.n-timeline-item {
    position: relative;
    padding-left: 2.25rem;
    padding-bottom: 1.5rem;
}
.n-timeline-item::before {
    content: "";
    position: absolute;
    left: 0.6875rem;
    top: 1.75rem;
    bottom: 0;
    width: 1px;
    background: var(--n-border-color);
}
.n-timeline-item:last-child { padding-bottom: 0; }
.n-timeline-item:last-child::before { display: none; }
.n-timeline-marker {
    position: absolute;
    left: 0;
    top: 0.125rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--n-radius-full);
    background: var(--n-primary-soft);
    border: 1px solid var(--n-primary-border);
    color: var(--n-primary);
    font-size: var(--n-text-xs);
    font-weight: 700;
}
.n-timeline-marker-muted {
    background: var(--n-surface-sunken);
    border-color: var(--n-border-color);
    color: var(--n-text-muted);
}
.n-timeline-title { font-weight: 600; }
.n-timeline-meta {
    font-size: var(--n-text-xs);
    color: var(--n-text-muted);
    margin-top: 0.125rem;
}
.n-timeline-content { margin-top: 0.5rem; }

/* Pricing plan card (origin: both products) */
.n-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--n-component-gap);
}
.n-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--n-border-color);
    border-radius: var(--n-radius-xl);
    background: var(--n-surface);
    transition: transform var(--n-duration) var(--n-ease),
                box-shadow var(--n-duration) var(--n-ease),
                border-color var(--n-duration) var(--n-ease);
}
.n-plan:hover {
    transform: translateY(-2px);
    box-shadow: var(--n-shadow-md);
}
.n-plan-featured {
    border-color: var(--n-primary);
    box-shadow: var(--n-shadow-lg);
}
.n-plan-inverted {
    border-color: transparent;
    background: var(--n-primary);
    color: var(--n-on-primary);
}
.n-plan-ribbon {
    position: absolute;
    top: -0.75rem;
    left: 1.5rem;
    padding: 0.125rem 0.625rem;
    border-radius: var(--n-radius-full);
    background: var(--n-primary);
    color: var(--n-on-primary);
    font-size: var(--n-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.n-plan-inverted .n-plan-ribbon {
    background: var(--n-on-primary);
    color: var(--n-primary);
}
.n-plan-name {
    font-size: var(--n-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--n-text-muted);
}
.n-plan-inverted .n-plan-name { color: rgba(255, 255, 255, 0.75); }
.n-plan-price {
    font-size: var(--n-text-3xl);
    font-weight: 700;
    line-height: 1;
}
.n-plan-period {
    font-size: var(--n-text-sm);
    font-weight: 500;
    color: var(--n-text-muted);
}
.n-plan-inverted .n-plan-period { color: rgba(255, 255, 255, 0.7); }
.n-plan-desc {
    font-size: var(--n-text-sm);
    color: var(--n-text-muted);
}
.n-plan-inverted .n-plan-desc { color: rgba(255, 255, 255, 0.75); }
.n-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.n-plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--n-text-sm);
}
.n-plan-feature::before {
    content: "✓";
    color: var(--n-success);
    font-weight: 700;
    line-height: 1.4;
}
.n-plan-inverted .n-plan-feature::before { color: var(--n-on-primary); }

/* Checklist — onboarding task list (origin: Itiner) */
.n-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}
.n-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}
.n-checklist-marker {
    flex: none;
    color: var(--n-text-muted);
    line-height: 1.4;
}
.n-checklist-done {
    opacity: 0.55;
}
.n-checklist-done .n-checklist-marker { color: var(--n-success); }

/* Responsive table — collapses rows to cards on small screens (origin: LeadScrapper Pro) */
@media (max-width: 767.98px) {
    .n-table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .n-table-stack tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.875rem;
        border: 1px solid var(--n-border-color);
        border-radius: var(--n-radius-lg);
    }
    .n-table-stack td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.375rem 0;
        border: none;
        text-align: right;
    }
    .n-table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--n-text-muted);
        text-align: left;
    }
}
}


/* ----------------------------- */
/* 39 · Production Extras         */
/* ----------------------------- */
@layer components {

/* Marketing footer — multi-column site footer (origin: both products) */
.n-footer {
    border-top: 1px solid var(--n-border-color);
    background: var(--n-surface);
    padding: 2.5rem 0;
}
.n-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 2rem;
}
.n-footer-col {
    display: grid;
    gap: 0.5rem;
    align-content: start;
}
.n-footer-title {
    font-size: var(--n-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--n-text-muted);
}
.n-footer-col a {
    color: var(--n-text-muted);
    font-size: var(--n-text-sm);
    text-decoration: none;
}
.n-footer-col a:hover { color: var(--n-text); }
.n-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--n-border-color);
    font-size: var(--n-text-sm);
    color: var(--n-text-muted);
}

/* Signal list — dotted pro/con or insight list (origin: LeadScrapper Pro) */
.n-signal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.n-signal {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--n-text-sm);
}
.n-signal::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.4rem;
    border-radius: var(--n-radius-full);
    background: var(--n-text-muted);
}
.n-signal-positive::before { background: var(--n-success); }
.n-signal-negative::before { background: var(--n-danger); }
.n-signal-neutral::before  { background: var(--n-text-muted); }
}