/*!
* Nyx — The Design System for Modern SaaS
* v1.0.0 · MIT License
* Luminous Depth: every element lit from within.
*
* Usage:
* Theme: (dark is default)
* RTL: (fully supported)
* Tokens live on :root — override any --nyx-* var to retheme.
* ========================================================== */
/* ---------- TOKENS · DARK (default) ---------- */
:root{
--nyx-bg:#0a0b0f; --nyx-surface:#12141a; --nyx-surface-2:#1c1f2a;
--nyx-border:#2a2d3a; --nyx-accent:#6c63ff; --nyx-accent-2:#00d4aa;
--nyx-danger:#ff4d6a; --nyx-warning:#ffb020; --nyx-text:#e8eaf0;
--nyx-text-muted:#6b7280; --nyx-glass:rgba(255,255,255,0.04);
/* theme-variant surfaces (flip in light mode) */
--nyx-navbar-bg:rgba(10,11,15,.72);
--nyx-overlay-bg:rgba(5,6,10,.65);
--nyx-elev-hover:rgba(255,255,255,.08);
--nyx-glass-border:rgba(255,255,255,.08);
--nyx-shimmer:#252836;
--nyx-radius-sm:6px; --nyx-radius:10px; --nyx-radius-lg:16px;
--nyx-radius-xl:24px; --nyx-radius-full:9999px;
--nyx-shadow-sm:0 1px 3px rgba(0,0,0,.4);
--nyx-shadow:0 4px 16px rgba(0,0,0,.5);
--nyx-shadow-lg:0 12px 40px rgba(0,0,0,.6);
--nyx-glow:0 0 24px color-mix(in srgb,var(--nyx-accent) 35%,transparent);
--nyx-glow-danger:0 0 24px color-mix(in srgb,var(--nyx-danger) 38%,transparent);
--nyx-success:var(--nyx-accent-2);
--nyx-fs-xs:11px; --nyx-fs-sm:13px; --nyx-fs-base:15px; --nyx-fs-lg:17px;
--nyx-fs-xl:22px; --nyx-fs-2xl:30px; --nyx-fs-3xl:42px;
--nyx-s1:4px; --nyx-s2:8px; --nyx-s3:12px; --nyx-s4:16px; --nyx-s5:24px;
--nyx-s6:32px; --nyx-s7:48px; --nyx-s8:64px; --nyx-s9:96px;
--nyx-font-display:'Plus Jakarta Sans',system-ui,sans-serif;
--nyx-font-body:'Inter',system-ui,sans-serif;
--nyx-font-mono:'JetBrains Mono',ui-monospace,monospace;
--nyx-font-ar:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif; /* Arabic body */
--nyx-font-ar-display:'Aref Ruqaa','Lalezar',serif; /* Arabic hero display (Ruq'ah cursive) */
--nyx-ease:cubic-bezier(.4,0,.2,1);
}
/* ---------- TOKENS · LIGHT (one-attribute swap) ---------- */
:root[data-theme="light"]{
--nyx-bg:#f5f6fb; --nyx-surface:#ffffff; --nyx-surface-2:#eef0f7;
--nyx-border:#e2e5ef; --nyx-accent:#6c5cff; --nyx-accent-2:#06b690;
--nyx-danger:#e23a54; --nyx-warning:#c07a00; --nyx-text:#15171f;
--nyx-text-muted:#6b7280; --nyx-glass:rgba(20,22,45,0.03);
--nyx-navbar-bg:rgba(255,255,255,.72);
--nyx-overlay-bg:rgba(20,22,45,.40);
--nyx-elev-hover:rgba(20,22,50,.06);
--nyx-glass-border:rgba(20,22,50,.10);
--nyx-shimmer:#e7eaf3;
--nyx-shadow-sm:0 1px 2px rgba(20,22,50,.08);
--nyx-shadow:0 6px 20px rgba(20,22,50,.10);
--nyx-shadow-lg:0 16px 40px rgba(20,22,50,.16);
--nyx-glow:0 0 22px color-mix(in srgb,var(--nyx-accent) 22%,transparent);
--nyx-glow-danger:0 0 22px color-mix(in srgb,var(--nyx-danger) 26%,transparent);
--nyx-success:var(--nyx-accent-2);
}
/* ---------- ACCENT THEMES (data-accent="…", default is violet) ----------
Every tint/glow/border derives from --nyx-accent via color-mix(), so
overriding these two vars retones the whole UI. Works with light + RTL. */
:root[data-accent="emerald"]{--nyx-accent:#10b981; --nyx-accent-2:#0ea5e9}
:root[data-accent="rose"]{--nyx-accent:#f43f6b; --nyx-accent-2:#fb923c}
:root[data-accent="amber"]{--nyx-accent:#f59e0b; --nyx-accent-2:#f43f5e}
/* ---------- BASE (opt-in via ) ---------- */
.nyx-reset *,.nyx-reset *::before,.nyx-reset *::after{box-sizing:border-box;margin:0;padding:0}
body.nyx{
background:var(--nyx-bg);color:var(--nyx-text);
font-family:var(--nyx-font-body);font-size:var(--nyx-fs-base);line-height:1.6;
-webkit-font-smoothing:antialiased;margin:0;
background-image:radial-gradient(900px 500px at 80% -10%,color-mix(in srgb,var(--nyx-accent) 10%,transparent),transparent 60%),
radial-gradient(700px 400px at -10% 20%,color-mix(in srgb,var(--nyx-accent-2) 6%,transparent),transparent 55%);
background-attachment:fixed;transition:background-color .3s var(--nyx-ease),color .3s var(--nyx-ease);
}
[data-theme="light"] body.nyx{
background-image:radial-gradient(900px 500px at 80% -10%,color-mix(in srgb,var(--nyx-accent) 10%,transparent),transparent 60%),
radial-gradient(700px 400px at -10% 20%,color-mix(in srgb,var(--nyx-accent-2) 10%,transparent),transparent 55%);
}
body.nyx *,body.nyx *::before,body.nyx *::after{box-sizing:border-box}
body.nyx a{color:inherit;text-decoration:none}
body.nyx ::selection{background:color-mix(in srgb,var(--nyx-accent) 35%,transparent);color:#fff}
.nyx-root :focus-visible,body.nyx :focus-visible{outline:2px solid var(--nyx-accent);outline-offset:3px;border-radius:var(--nyx-radius-sm)}
@keyframes nyx-focus-ripple{0%{box-shadow:0 0 0 0px color-mix(in srgb,var(--nyx-accent) 60%,transparent)}100%{box-shadow:0 0 0 6px color-mix(in srgb,var(--nyx-accent) 0%,transparent)}}
body.nyx ::-webkit-scrollbar{width:10px;height:10px}
body.nyx ::-webkit-scrollbar-thumb{background:var(--nyx-surface-2);border-radius:var(--nyx-radius-full);border:2px solid var(--nyx-bg)}
/* ============================================================
1. LAYOUT
============================================================ */
.nyx-container{max-width:1280px;margin-inline:auto;padding-inline:var(--nyx-s5)}
.nyx-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--nyx-s4)}
.nyx-col-1{grid-column:span 1}.nyx-col-2{grid-column:span 2}.nyx-col-3{grid-column:span 3}
.nyx-col-4{grid-column:span 4}.nyx-col-5{grid-column:span 5}.nyx-col-6{grid-column:span 6}
.nyx-col-7{grid-column:span 7}.nyx-col-8{grid-column:span 8}.nyx-col-9{grid-column:span 9}
.nyx-col-10{grid-column:span 10}.nyx-col-11{grid-column:span 11}.nyx-col-12{grid-column:span 12}
.nyx-flex{display:flex}.nyx-inline-flex{display:inline-flex}
.nyx-items-center{align-items:center}.nyx-items-start{align-items:flex-start}
.nyx-justify-between{justify-content:space-between}.nyx-justify-center{justify-content:center}
.nyx-wrap{flex-wrap:wrap}.nyx-flex-col{flex-direction:column}.nyx-grow{flex:1}
.nyx-gap-1{gap:var(--nyx-s1)}.nyx-gap-2{gap:var(--nyx-s2)}.nyx-gap-3{gap:var(--nyx-s3)}
.nyx-gap-4{gap:var(--nyx-s4)}.nyx-gap-5{gap:var(--nyx-s5)}.nyx-gap-6{gap:var(--nyx-s6)}
.nyx-stack{display:flex;flex-direction:column;gap:var(--nyx-s4)}
/* — flex & grid utilities (v1.0) — */
.nyx-flex-row{flex-direction:row}.nyx-flex-row-reverse{flex-direction:row-reverse}.nyx-flex-col-reverse{flex-direction:column-reverse}
.nyx-nowrap{flex-wrap:nowrap}.nyx-wrap-reverse{flex-wrap:wrap-reverse}
.nyx-justify-start{justify-content:flex-start}.nyx-justify-end{justify-content:flex-end}.nyx-justify-around{justify-content:space-around}.nyx-justify-evenly{justify-content:space-evenly}
.nyx-items-end{align-items:flex-end}.nyx-items-stretch{align-items:stretch}.nyx-items-baseline{align-items:baseline}
.nyx-content-start{align-content:flex-start}.nyx-content-center{align-content:center}.nyx-content-between{align-content:space-between}.nyx-content-around{align-content:space-around}.nyx-content-end{align-content:flex-end}
.nyx-self-auto{align-self:auto}.nyx-self-start{align-self:flex-start}.nyx-self-center{align-self:center}.nyx-self-end{align-self:flex-end}.nyx-self-stretch{align-self:stretch}
.nyx-flex-1{flex:1 1 0%}.nyx-flex-auto{flex:1 1 auto}.nyx-flex-initial{flex:0 1 auto}.nyx-flex-none{flex:none}
.nyx-grow-0{flex-grow:0}.nyx-shrink{flex-shrink:1}.nyx-shrink-0{flex-shrink:0}
.nyx-gap-0{gap:0}.nyx-gap-x-2{column-gap:var(--nyx-s2)}.nyx-gap-x-3{column-gap:var(--nyx-s3)}.nyx-gap-x-4{column-gap:var(--nyx-s4)}.nyx-gap-y-2{row-gap:var(--nyx-s2)}.nyx-gap-y-3{row-gap:var(--nyx-s3)}.nyx-gap-y-4{row-gap:var(--nyx-s4)}
.nyx-order-first{order:-9999}.nyx-order-last{order:9999}.nyx-order-none{order:0}.nyx-order-1{order:1}.nyx-order-2{order:2}.nyx-order-3{order:3}.nyx-order-4{order:4}.nyx-order-5{order:5}
.nyx-grid-cols-1{display:grid;grid-template-columns:repeat(1,minmax(0,1fr))}.nyx-grid-cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.nyx-grid-cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.nyx-grid-cols-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.nyx-grid-cols-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.nyx-grid-cols-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.nyx-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--nyx-grid-min,220px),1fr))}
.nyx-col-span-full{grid-column:1/-1}.nyx-place-center{place-items:center}.nyx-place-between{place-content:space-between}
.nyx-divider{display:flex;align-items:center;gap:var(--nyx-s3);color:var(--nyx-text-muted);
font-size:var(--nyx-fs-xs);text-transform:uppercase;letter-spacing:.08em;margin:var(--nyx-s5) 0}
.nyx-divider::before,.nyx-divider::after{content:"";flex:1;height:1px;background:var(--nyx-border)}
.nyx-divider.plain{margin-block:var(--nyx-s4)}
.nyx-ratio{position:relative;width:100%}
.nyx-ratio::before{content:"";display:block;padding-top:56.25%}
.nyx-ratio-1x1::before{padding-top:100%}
.nyx-ratio-4x3::before{padding-top:75%}
.nyx-ratio > *{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--nyx-radius)}
/* auto-collapse for bare cols (no explicit breakpoint class) */
@media(max-width:1024px){[class*="nyx-col-"]:not([class*="-sm-"]):not([class*="-md-"]):not([class*="-lg-"]):not([class*="-xl-"]){grid-column:span 6}}
@media(max-width:640px){
[class*="nyx-col-"]:not([class*="-sm-"]):not([class*="-md-"]):not([class*="-lg-"]):not([class*="-xl-"]){grid-column:span 12}
.nyx-container{padding-inline:var(--nyx-s4)}
}
/* responsive grid — Bootstrap-style breakpoints (mobile-first, min-width).
Pair a base col for mobile with a breakpoint col: class="nyx-col-12 nyx-col-md-6" */
.nyx-col-auto{grid-column:auto}
@media(min-width:640px){
.nyx-col-sm-1{grid-column:span 1}.nyx-col-sm-2{grid-column:span 2}.nyx-col-sm-3{grid-column:span 3}.nyx-col-sm-4{grid-column:span 4}.nyx-col-sm-5{grid-column:span 5}.nyx-col-sm-6{grid-column:span 6}.nyx-col-sm-7{grid-column:span 7}.nyx-col-sm-8{grid-column:span 8}.nyx-col-sm-9{grid-column:span 9}.nyx-col-sm-10{grid-column:span 10}.nyx-col-sm-11{grid-column:span 11}.nyx-col-sm-12{grid-column:span 12}
}
@media(min-width:768px){
.nyx-col-md-1{grid-column:span 1}.nyx-col-md-2{grid-column:span 2}.nyx-col-md-3{grid-column:span 3}.nyx-col-md-4{grid-column:span 4}.nyx-col-md-5{grid-column:span 5}.nyx-col-md-6{grid-column:span 6}.nyx-col-md-7{grid-column:span 7}.nyx-col-md-8{grid-column:span 8}.nyx-col-md-9{grid-column:span 9}.nyx-col-md-10{grid-column:span 10}.nyx-col-md-11{grid-column:span 11}.nyx-col-md-12{grid-column:span 12}
}
@media(min-width:1024px){
.nyx-col-lg-1{grid-column:span 1}.nyx-col-lg-2{grid-column:span 2}.nyx-col-lg-3{grid-column:span 3}.nyx-col-lg-4{grid-column:span 4}.nyx-col-lg-5{grid-column:span 5}.nyx-col-lg-6{grid-column:span 6}.nyx-col-lg-7{grid-column:span 7}.nyx-col-lg-8{grid-column:span 8}.nyx-col-lg-9{grid-column:span 9}.nyx-col-lg-10{grid-column:span 10}.nyx-col-lg-11{grid-column:span 11}.nyx-col-lg-12{grid-column:span 12}
}
@media(min-width:1280px){
.nyx-col-xl-1{grid-column:span 1}.nyx-col-xl-2{grid-column:span 2}.nyx-col-xl-3{grid-column:span 3}.nyx-col-xl-4{grid-column:span 4}.nyx-col-xl-5{grid-column:span 5}.nyx-col-xl-6{grid-column:span 6}.nyx-col-xl-7{grid-column:span 7}.nyx-col-xl-8{grid-column:span 8}.nyx-col-xl-9{grid-column:span 9}.nyx-col-xl-10{grid-column:span 10}.nyx-col-xl-11{grid-column:span 11}.nyx-col-xl-12{grid-column:span 12}
}
/* ============================================================
2. TYPOGRAPHY
============================================================ */
.nyx-display{font-family:var(--nyx-font-display);font-weight:800;font-size:var(--nyx-fs-3xl);line-height:1.1;letter-spacing:-.02em}
.nyx-h1{font-family:var(--nyx-font-display);font-weight:800;font-size:var(--nyx-fs-2xl);letter-spacing:-.02em;line-height:1.2}
.nyx-h2{font-family:var(--nyx-font-display);font-weight:700;font-size:var(--nyx-fs-xl);letter-spacing:-.01em;line-height:1.25}
.nyx-h3{font-family:var(--nyx-font-display);font-weight:700;font-size:var(--nyx-fs-lg)}
.nyx-h4{font-family:var(--nyx-font-display);font-weight:600;font-size:var(--nyx-fs-base)}
.nyx-h5{font-family:var(--nyx-font-display);font-weight:600;font-size:var(--nyx-fs-sm)}
.nyx-h6{font-family:var(--nyx-font-display);font-weight:600;font-size:var(--nyx-fs-xs);text-transform:uppercase;letter-spacing:.1em}
.nyx-body{font-size:var(--nyx-fs-base);color:var(--nyx-text)}
.nyx-lead{font-size:var(--nyx-fs-lg);color:var(--nyx-text);line-height:1.7;font-weight:400}
.nyx-caption{font-size:var(--nyx-fs-sm);color:var(--nyx-text-muted)}
.nyx-overline{font-size:var(--nyx-fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--nyx-accent);font-weight:600;font-family:var(--nyx-font-mono)}
.nyx-muted{color:var(--nyx-text-muted)}
.nyx-gradient-text{background:linear-gradient(120deg,var(--nyx-accent),var(--nyx-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nyx-code{font-family:var(--nyx-font-mono);font-size:.9em;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);padding:2px 6px;border-radius:var(--nyx-radius-sm);color:var(--nyx-accent-2)}
.nyx-lead-sm{font-size:var(--nyx-fs-base);color:var(--nyx-text-muted);line-height:1.65}
/* gradient-text variants (modifiers keep the clip from .nyx-gradient-text) */
.nyx-gradient-text.cool{background-image:linear-gradient(120deg,var(--nyx-accent-2),var(--nyx-accent))}
.nyx-gradient-text.warm{background-image:linear-gradient(120deg,var(--nyx-warning),var(--nyx-danger))}
.nyx-text-stroke{-webkit-text-stroke:1.5px var(--nyx-accent);color:transparent}
.nyx-text-glow{text-shadow:0 0 18px color-mix(in srgb,var(--nyx-accent) 70%,transparent)}
.nyx-smallcaps{font-variant:small-caps}
/* animated underline link */
.nyx-link{position:relative;color:var(--nyx-accent);text-decoration:none;cursor:pointer}
.nyx-link::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transition:transform .25s var(--nyx-ease)}
.nyx-link:hover::after,.nyx-link:focus-visible::after{transform:scaleX(1)}
/* highlight + keyboard key */
.nyx-mark{background:color-mix(in srgb,var(--nyx-accent) 22%,transparent);color:var(--nyx-text);padding:.05em .3em;border-radius:var(--nyx-radius-sm)}
.nyx-kbd{display:inline-block;font-family:var(--nyx-font-mono);font-size:.82em;line-height:1;padding:3px 7px;color:var(--nyx-text);background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-bottom-width:2px;border-radius:var(--nyx-radius-sm);box-shadow:0 1px 0 rgba(0,0,0,.18)}
/* pull-quote */
.nyx-blockquote{border-inline-start:3px solid var(--nyx-accent);padding-inline-start:var(--nyx-s4);font-size:var(--nyx-fs-lg);line-height:1.6;color:var(--nyx-text)}
.nyx-blockquote cite,.nyx-blockquote footer{display:block;margin-top:var(--nyx-s2);font-size:var(--nyx-fs-sm);color:var(--nyx-text-muted);font-style:normal}
/* drop cap (articles) */
.nyx-dropcap::first-letter{float:inline-start;font-family:var(--nyx-font-display);font-size:3.1em;line-height:.78;font-weight:800;margin-inline-end:.08em;margin-top:.04em;color:var(--nyx-accent)}
/* rich-text container — style raw HTML (articles, markdown output) */
.nyx-prose{color:var(--nyx-text);line-height:1.75;font-size:var(--nyx-fs-base);max-width:70ch}
.nyx-prose :where(h1,h2,h3,h4){font-family:var(--nyx-font-display);line-height:1.25;margin:1.6em 0 .6em}
.nyx-prose :where(h1,h2,h3,h4):first-child{margin-top:0}
.nyx-prose h1{font-size:var(--nyx-fs-2xl);font-weight:800;letter-spacing:-.02em}
.nyx-prose h2{font-size:var(--nyx-fs-xl);font-weight:700;letter-spacing:-.01em}
.nyx-prose h3{font-size:var(--nyx-fs-lg);font-weight:700}
.nyx-prose h4{font-size:var(--nyx-fs-base);font-weight:600}
.nyx-prose :where(p,ul,ol,blockquote,pre,table){margin:0 0 1.1em}
.nyx-prose a{color:var(--nyx-accent);text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--nyx-accent) 45%,transparent)}
.nyx-prose a:hover{text-decoration-color:var(--nyx-accent)}
.nyx-prose strong{color:var(--nyx-text);font-weight:700}
.nyx-prose code{font-family:var(--nyx-font-mono);font-size:.88em;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);padding:2px 6px;border-radius:var(--nyx-radius-sm);color:var(--nyx-accent-2)}
.nyx-prose pre{background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);padding:var(--nyx-s4);overflow:auto}
.nyx-prose pre code{background:none;border:0;padding:0;color:var(--nyx-text)}
.nyx-prose :where(ul,ol){padding-inline-start:1.4em}
.nyx-prose li{margin:.35em 0}
.nyx-prose blockquote{border-inline-start:3px solid var(--nyx-accent);padding-inline-start:var(--nyx-s4);color:var(--nyx-text-muted);font-style:italic}
.nyx-prose hr{border:0;border-top:1px solid var(--nyx-border);margin:2em 0}
.nyx-prose img{max-width:100%;border-radius:var(--nyx-radius)}
/* ============================================================
3. BUTTONS
============================================================ */
.nyx-btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--nyx-s2);
font-family:var(--nyx-font-body);font-weight:500;font-size:var(--nyx-fs-sm);
padding:10px 18px;border-radius:var(--nyx-radius);border:1px solid transparent;
background:var(--nyx-surface-2);color:var(--nyx-text);cursor:pointer;
transition:all .2s var(--nyx-ease);white-space:nowrap;user-select:none;position:relative;
}
.nyx-btn:active{transform:translateY(1px)}
.nyx-btn:disabled,.nyx-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.nyx-btn-primary{background:linear-gradient(120deg,var(--nyx-accent),color-mix(in srgb,var(--nyx-accent) 60%,#ffffff));color:#fff;box-shadow:var(--nyx-shadow-sm)}
.nyx-btn-primary:hover{box-shadow:var(--nyx-glow),var(--nyx-shadow);transform:translateY(-1px)}
.nyx-btn-secondary{background:transparent;border-color:var(--nyx-accent-2);color:var(--nyx-accent-2)}
.nyx-btn-secondary:hover{background:color-mix(in srgb,var(--nyx-accent-2) 10%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--nyx-accent-2) 25%,transparent)}
.nyx-btn-ghost{background:transparent;border-color:transparent;color:var(--nyx-text-muted)}
.nyx-btn-ghost:hover{border-color:var(--nyx-border);color:var(--nyx-text);background:var(--nyx-glass)}
.nyx-btn-danger{background:linear-gradient(120deg,var(--nyx-danger),#ff6f86);color:#fff}
.nyx-btn-danger:hover{box-shadow:var(--nyx-glow-danger);transform:translateY(-1px)}
.nyx-btn-glass{background:var(--nyx-glass);border-color:var(--nyx-glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--nyx-text)}
.nyx-btn-glass:hover{background:var(--nyx-elev-hover);box-shadow:var(--nyx-shadow)}
/* outline variants (Bootstrap-style, all colors) */
.nyx-btn-outline-primary{background:transparent;border-color:var(--nyx-accent);color:var(--nyx-accent)}
.nyx-btn-outline-primary:hover{background:color-mix(in srgb,var(--nyx-accent) 12%,transparent);box-shadow:var(--nyx-glow)}
.nyx-btn-outline-success{background:transparent;border-color:var(--nyx-success);color:var(--nyx-success)}
.nyx-btn-outline-success:hover{background:color-mix(in srgb,var(--nyx-success) 12%,transparent)}
.nyx-btn-outline-danger{background:transparent;border-color:var(--nyx-danger);color:var(--nyx-danger)}
.nyx-btn-outline-danger:hover{background:color-mix(in srgb,var(--nyx-danger) 12%,transparent)}
.nyx-btn-outline-warning{background:transparent;border-color:var(--nyx-warning);color:var(--nyx-warning)}
.nyx-btn-outline-warning:hover{background:color-mix(in srgb,var(--nyx-warning) 12%,transparent)}
.nyx-btn-icon{padding:10px;width:40px;height:40px}
.nyx-btn-sm{padding:6px 12px;font-size:var(--nyx-fs-xs)}
.nyx-btn-sm.nyx-btn-icon{width:32px;height:32px;padding:6px}
.nyx-btn-lg{padding:14px 26px;font-size:var(--nyx-fs-base)}
.nyx-btn-lg.nyx-btn-icon{width:52px;height:52px}
.nyx-btn-block{display:flex;width:100%}
.nyx-btn-loading{color:transparent !important;pointer-events:none}
.nyx-btn-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:nyx-spin .7s linear infinite}
.nyx-btn-glow{background:linear-gradient(120deg,var(--nyx-accent),var(--nyx-accent-2));color:#fff;animation:nyx-pulse 2.4s var(--nyx-ease) infinite}
/* Gradient buttons sit on a 1px transparent border. The `background:` shorthand above resets
background-origin to padding-box, so the gradient's edge color leaks into that border as a
seam on the edge. Re-assert border-box (after the shorthands) so the fill covers the whole box.
Must stay a separate longhand — folding it into the shorthand would be reset again by overrides. */
.nyx-btn-primary,.nyx-btn-danger,.nyx-btn-glow{background-origin:border-box}
.nyx-btn-glow:hover{transform:translateY(-1px)}
@keyframes nyx-spin{to{transform:rotate(360deg)}}
@keyframes nyx-pulse{
0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--nyx-accent) 0%,transparent),0 0 18px color-mix(in srgb,var(--nyx-accent) 30%,transparent)}
50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--nyx-accent) 0%,transparent),0 0 34px color-mix(in srgb,var(--nyx-accent) 55%,transparent)}
}
/* button group */
.nyx-btn-group{display:inline-flex}
.nyx-btn-group > .nyx-btn{border-radius:0}
.nyx-btn-group > .nyx-btn:first-child{border-start-start-radius:var(--nyx-radius);border-end-start-radius:var(--nyx-radius)}
.nyx-btn-group > .nyx-btn:last-child{border-start-end-radius:var(--nyx-radius);border-end-end-radius:var(--nyx-radius)}
.nyx-btn-group > .nyx-btn:not(:first-child){margin-inline-start:-1px}
body.nyx .nyx-btn-group > .nyx-btn:focus-visible,
body.nyx .nyx-btn-split .nyx-btn:focus-visible {
z-index: 2;
outline-offset: 0;
}
/* close button */
.nyx-close{width:32px;height:32px;border:none;background:var(--nyx-glass);color:var(--nyx-text-muted);border-radius:var(--nyx-radius-sm);cursor:pointer;display:grid;place-items:center;font-size:16px;line-height:1;transition:all .2s var(--nyx-ease)}
.nyx-close:hover{background:var(--nyx-elev-hover);color:var(--nyx-text)}
/* ============================================================
4. CARDS
============================================================ */
.nyx-card{background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);padding:var(--nyx-s5);box-shadow:var(--nyx-shadow-sm)}
.nyx-card-glass{background:var(--nyx-glass);border:1px solid var(--nyx-glass-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--nyx-radius-lg);padding:var(--nyx-s5)}
.nyx-card-gradient{position:relative;background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);padding:var(--nyx-s5);overflow:hidden}
.nyx-card-gradient::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--nyx-accent),var(--nyx-accent-2))}
.nyx-card-interactive{cursor:pointer;transition:all .2s var(--nyx-ease)}
.nyx-card-interactive:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--nyx-accent) 50%,transparent);box-shadow:var(--nyx-glow),var(--nyx-shadow-lg)}
.nyx-card-stat{background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);padding:var(--nyx-s5);display:flex;flex-direction:column;gap:var(--nyx-s2)}
.nyx-card-stat .nyx-stat-num{font-family:var(--nyx-font-display);font-weight:800;font-size:var(--nyx-fs-2xl);line-height:1}
.nyx-card-stat .nyx-stat-label{font-size:var(--nyx-fs-sm);color:var(--nyx-text-muted)}
.nyx-card-feature{background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);padding:var(--nyx-s5);display:flex;flex-direction:column;gap:var(--nyx-s3)}
.nyx-card-feature .nyx-feat-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--nyx-radius);background:color-mix(in srgb,var(--nyx-accent) 14%,transparent);color:var(--nyx-accent);font-size:20px}
/* ============================================================
5. FORMS
============================================================ */
.nyx-label{display:block;font-size:var(--nyx-fs-sm);font-weight:500;margin-bottom:var(--nyx-s2)}
.nyx-input,.nyx-textarea,.nyx-select{width:100%;font-family:var(--nyx-font-body);font-size:var(--nyx-fs-sm);color:var(--nyx-text);background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);padding:10px 14px;transition:all .2s var(--nyx-ease)}
.nyx-input::placeholder,.nyx-textarea::placeholder{color:var(--nyx-text-muted)}
.nyx-input:focus,.nyx-textarea:focus,.nyx-select:focus{outline:none;border-color:var(--nyx-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-accent) 18%,transparent),var(--nyx-glow)}
.nyx-textarea{resize:vertical;min-height:90px}
.nyx-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-inline-end:36px}
.nyx-form-hint{font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted);margin-top:var(--nyx-s2)}
.nyx-input-group{display:flex;align-items:stretch;background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);transition:all .2s var(--nyx-ease)}
.nyx-input-group:focus-within{border-color:var(--nyx-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-accent) 18%,transparent)}
.nyx-input-group .nyx-addon{display:grid;place-items:center;padding-inline:14px;color:var(--nyx-text-muted);background:var(--nyx-surface-2);font-size:var(--nyx-fs-sm)}
.nyx-input-group > :first-child{border-start-start-radius:calc(var(--nyx-radius) - 1px);border-end-start-radius:calc(var(--nyx-radius) - 1px)}
.nyx-input-group > :last-child{border-start-end-radius:calc(var(--nyx-radius) - 1px);border-end-end-radius:calc(var(--nyx-radius) - 1px)}
.nyx-input-group .nyx-input{border:none;background:transparent;box-shadow:none !important}
.nyx-input-group .nyx-btn{border-radius:0}
.nyx-input-group > .nyx-btn:last-child{border-start-end-radius:calc(var(--nyx-radius) - 1px);border-end-end-radius:calc(var(--nyx-radius) - 1px)}
.nyx-input-group > .nyx-btn:first-child{border-start-start-radius:calc(var(--nyx-radius) - 1px);border-end-start-radius:calc(var(--nyx-radius) - 1px)}
.nyx-input-group.nyx-invalid{border-color:var(--nyx-danger)}
.nyx-input-group.nyx-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-danger) 20%,transparent)}
.nyx-search{display:flex;align-items:center;gap:var(--nyx-s3);background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-full);padding:8px 8px 8px 16px;transition:all .2s var(--nyx-ease);max-width:420px}
.nyx-search:focus-within{border-color:var(--nyx-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-accent) 18%,transparent),var(--nyx-glow)}
.nyx-search input{flex:1;background:transparent;border:none;outline:none;color:var(--nyx-text);font-size:var(--nyx-fs-sm)}
.nyx-search .nyx-search-icon{color:var(--nyx-text-muted)}
/* grouped inputs: only the :focus-within wrapper shows the ring — never the inner control */
.nyx-input-group .nyx-input,.nyx-input-group input,.nyx-input-group .nyx-select,
.nyx-search input,.nyx-phone input,.nyx-phone select,
.nyx-input-group .nyx-input:focus,.nyx-input-group input:focus,.nyx-input-group .nyx-select:focus,
.nyx-search input:focus,.nyx-phone input:focus,.nyx-phone select:focus{border:0;outline:0;box-shadow:none}
body.nyx .nyx-input-group input:focus-visible,
body.nyx .nyx-input-group select:focus-visible,
body.nyx .nyx-search input:focus-visible,
body.nyx .nyx-phone input:focus-visible,
body.nyx .nyx-phone select:focus-visible {
outline: none;
animation: none;
box-shadow: none;
}
.nyx-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.nyx-toggle input{position:absolute;opacity:0;width:0;height:0}
.nyx-toggle .nyx-track{width:42px;height:24px;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-full);transition:all .2s var(--nyx-ease);position:relative}
.nyx-toggle .nyx-track::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:var(--nyx-text-muted);transition:all .2s var(--nyx-ease)}
.nyx-toggle input:checked + .nyx-track{background:var(--nyx-accent);border-color:var(--nyx-accent);box-shadow:var(--nyx-glow)}
.nyx-toggle input:checked + .nyx-track::after{inset-inline-start:20px;background:#fff}
.nyx-toggle input:focus-visible + .nyx-track{outline:2px solid var(--nyx-accent);outline-offset:2px}
.nyx-checkbox,.nyx-radio{position:relative;display:inline-flex;align-items:center;gap:var(--nyx-s2);cursor:pointer;font-size:var(--nyx-fs-sm)}
.nyx-checkbox input,.nyx-radio input{position:absolute;opacity:0;width:0;height:0}
.nyx-checkbox .nyx-box,.nyx-radio .nyx-box{width:18px;height:18px;border:1px solid var(--nyx-border);background:var(--nyx-surface);transition:all .2s var(--nyx-ease);display:grid;place-items:center}
.nyx-checkbox .nyx-box{border-radius:var(--nyx-radius-sm)}
.nyx-radio .nyx-box{border-radius:50%}
.nyx-checkbox .nyx-box::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:transform .15s var(--nyx-ease);margin-top:-2px}
.nyx-radio .nyx-box::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .15s var(--nyx-ease)}
.nyx-checkbox input:checked + .nyx-box,.nyx-radio input:checked + .nyx-box{background:var(--nyx-accent);border-color:var(--nyx-accent);box-shadow:var(--nyx-glow)}
.nyx-checkbox input:checked + .nyx-box::after{transform:rotate(-45deg) scale(1)}
.nyx-radio input:checked + .nyx-box::after{transform:scale(1)}
.nyx-checkbox input:focus-visible + .nyx-box,.nyx-radio input:focus-visible + .nyx-box{outline:2px solid var(--nyx-accent);outline-offset:2px}
/* single-handle range is .nyx-slider (§23); dual-handle .nyx-range lives there too */
/* floating label */
.nyx-float{position:relative}
.nyx-float > .nyx-input{height:52px;padding:22px 14px 6px}
.nyx-float > label{position:absolute;top:15px;inset-inline-start:14px;transform:none;transform-origin:inline-start;color:var(--nyx-text-muted);font-size:var(--nyx-fs-sm);pointer-events:none;transition:transform .18s var(--nyx-ease),color .18s var(--nyx-ease)}
.nyx-float > .nyx-input:focus + label,.nyx-float > .nyx-input:not(:placeholder-shown) + label{transform:translateY(-8px) scale(.8);color:var(--nyx-accent)}
/* validation states — add .is-valid / .is-invalid, or wrap a form in
.nyx-was-validated to drive feedback from the browser's :valid/:invalid */
.nyx-input.is-valid,.nyx-textarea.is-valid,.nyx-select.is-valid,.nyx-was-validated .nyx-input:valid,.nyx-was-validated .nyx-textarea:valid,.nyx-was-validated .nyx-select:valid{border-color:var(--nyx-accent-2)}
.nyx-input.is-valid:focus,.nyx-textarea.is-valid:focus,.nyx-select.is-valid:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-accent-2) 24%,transparent)}
.nyx-input.is-invalid,.nyx-textarea.is-invalid,.nyx-select.is-invalid,.nyx-was-validated .nyx-input:invalid,.nyx-was-validated .nyx-textarea:invalid,.nyx-was-validated .nyx-select:invalid{border-color:var(--nyx-danger)}
.nyx-input.is-invalid:focus,.nyx-textarea.is-invalid:focus,.nyx-select.is-invalid:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-danger) 24%,transparent)}
.nyx-checkbox.is-invalid .nyx-box,.nyx-radio.is-invalid .nyx-box{border-color:var(--nyx-danger)}
.nyx-valid-feedback,.nyx-invalid-feedback{display:none;font-size:var(--nyx-fs-xs);margin-top:var(--nyx-s2)}
.nyx-valid-feedback{color:var(--nyx-accent-2)}
.nyx-invalid-feedback{color:var(--nyx-danger)}
.is-valid ~ .nyx-valid-feedback,.is-invalid ~ .nyx-invalid-feedback{display:block}
.nyx-was-validated .nyx-input:valid ~ .nyx-valid-feedback,.nyx-was-validated .nyx-textarea:valid ~ .nyx-valid-feedback,.nyx-was-validated .nyx-select:valid ~ .nyx-valid-feedback{display:block}
.nyx-was-validated .nyx-input:invalid ~ .nyx-invalid-feedback,.nyx-was-validated .nyx-textarea:invalid ~ .nyx-invalid-feedback,.nyx-was-validated .nyx-select:invalid ~ .nyx-invalid-feedback{display:block}
/* ============================================================
6. NAVIGATION
============================================================ */
.nyx-navbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--nyx-s4);padding:var(--nyx-s3) var(--nyx-s5);background:var(--nyx-navbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--nyx-border)}
.nyx-sidebar{display:flex;flex-direction:column;gap:2px}
.nyx-sidebar a{display:flex;align-items:center;gap:var(--nyx-s2);padding:8px 12px;border-radius:var(--nyx-radius);color:var(--nyx-text-muted);font-size:var(--nyx-fs-sm);font-weight:500;transition:all .2s var(--nyx-ease);border-inline-start:2px solid transparent}
.nyx-sidebar a:hover{color:var(--nyx-text);background:var(--nyx-glass)}
.nyx-sidebar a.active{color:var(--nyx-text);background:color-mix(in srgb,var(--nyx-accent) 12%,transparent);border-inline-start-color:var(--nyx-accent)}
.nyx-breadcrumb{display:flex;align-items:center;gap:var(--nyx-s2);font-size:var(--nyx-fs-sm);color:var(--nyx-text-muted);flex-wrap:wrap}
.nyx-breadcrumb a:hover{color:var(--nyx-text)}
.nyx-breadcrumb .nyx-sep{color:var(--nyx-border)}
.nyx-breadcrumb [aria-current]{color:var(--nyx-text)}
.nyx-tabs{display:flex;gap:var(--nyx-s1);border-bottom:1px solid var(--nyx-border)}
.nyx-tab{background:none;border:none;color:var(--nyx-text-muted);font-family:var(--nyx-font-body);font-size:var(--nyx-fs-sm);font-weight:500;padding:10px 14px;cursor:pointer;position:relative;transition:color .2s var(--nyx-ease)}
.nyx-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--nyx-accent);transform:scaleX(0);transition:transform .2s var(--nyx-ease);box-shadow:0 0 12px var(--nyx-accent)}
.nyx-tab:hover{color:var(--nyx-text)}
.nyx-tab.active{color:var(--nyx-text)}
.nyx-tab.active::after{transform:scaleX(1)}
.nyx-tab-panel{display:none;padding-top:var(--nyx-s4)}
.nyx-tab-panel.active{display:block;animation:nyx-fade .25s var(--nyx-ease)}
@keyframes nyx-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* nav pills */
.nyx-nav-pills{display:flex;gap:6px;flex-wrap:wrap}
.nyx-pill{padding:8px 14px;border-radius:var(--nyx-radius-full);font-size:var(--nyx-fs-sm);font-weight:500;color:var(--nyx-text-muted);cursor:pointer;border:1px solid transparent;background:none;font-family:var(--nyx-font-body);transition:all .2s var(--nyx-ease)}
.nyx-pill:hover{color:var(--nyx-text);background:var(--nyx-glass)}
.nyx-pill.active{background:var(--nyx-accent);color:#fff;box-shadow:var(--nyx-glow)}
.nyx-pagination{display:flex;align-items:center;gap:var(--nyx-s1)}
.nyx-pagination button{min-width:36px;height:36px;border:1px solid var(--nyx-border);background:var(--nyx-surface);color:var(--nyx-text-muted);border-radius:var(--nyx-radius);cursor:pointer;font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-sm);transition:all .2s var(--nyx-ease)}
.nyx-pagination button:hover{border-color:var(--nyx-accent);color:var(--nyx-text)}
.nyx-pagination button.active{background:var(--nyx-accent);border-color:var(--nyx-accent);color:#fff;box-shadow:var(--nyx-glow)}
.nyx-pagination button:disabled{opacity:.4;cursor:not-allowed}
.nyx-pagination .nyx-page-gap{min-width:36px;text-align:center;color:var(--nyx-text-muted)}
/* variants */
.nyx-pagination.rounded button{border-radius:var(--nyx-radius-full)}
.nyx-pagination.ghost button{border-color:transparent;background:transparent}
.nyx-pagination.ghost button:hover{background:var(--nyx-surface-2)}
.nyx-pagination.ghost button.active{background:color-mix(in srgb,var(--nyx-accent) 16%,transparent);border-color:transparent;color:var(--nyx-accent);box-shadow:none}
.nyx-pagination.sm button{min-width:30px;height:30px;font-size:var(--nyx-fs-xs)}
.nyx-pagination-info{color:var(--nyx-text-muted);font-size:var(--nyx-fs-sm)}
/* dropdown */
.nyx-dropdown{position:relative;display:inline-flex}
.nyx-dropdown-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:120;min-width:184px;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);box-shadow:var(--nyx-shadow-lg);padding:6px;display:none}
.nyx-dropdown.open .nyx-dropdown-menu{display:block;animation:nyx-fade .15s var(--nyx-ease)}
.nyx-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--nyx-radius-sm);color:var(--nyx-text-muted);font-size:var(--nyx-fs-sm);cursor:pointer;white-space:nowrap;width:100%;text-align:start;background:none;border:none;font-family:var(--nyx-font-body)}
.nyx-dropdown-item:hover{background:color-mix(in srgb,var(--nyx-accent) 12%,transparent);color:var(--nyx-text)}
.nyx-dropdown-divider{height:1px;background:var(--nyx-border);margin:6px 0}
.nyx-command-palette{position:fixed;inset:0;z-index:200;display:none;background:var(--nyx-overlay-bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding-top:14vh;justify-content:center;align-items:flex-start}
.nyx-command-palette.open{display:flex;animation:nyx-fade .2s var(--nyx-ease)}
.nyx-command-palette .nyx-cp-box{width:min(560px,92vw);background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);box-shadow:var(--nyx-shadow-lg),var(--nyx-glow);overflow:hidden}
.nyx-cp-input{display:flex;align-items:center;gap:var(--nyx-s3);padding:16px 18px;border-bottom:1px solid var(--nyx-border)}
.nyx-cp-input input{flex:1;background:transparent;border:none;outline:none;color:var(--nyx-text);font-size:var(--nyx-fs-lg)}
.nyx-cp-list{max-height:320px;overflow:auto;padding:var(--nyx-s2)}
.nyx-cp-item{display:flex;align-items:center;gap:var(--nyx-s3);padding:10px 12px;border-radius:var(--nyx-radius);color:var(--nyx-text-muted);font-size:var(--nyx-fs-sm);cursor:pointer}
.nyx-cp-item:hover,.nyx-cp-item.active{background:color-mix(in srgb,var(--nyx-accent) 12%,transparent);color:var(--nyx-text)}
/* responsive nav & mega-menu */
.nyx-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--nyx-s4);padding:12px 16px;background:var(--nyx-surface);border-bottom:1px solid var(--nyx-border)}
.nyx-nav .brand{font-weight:700;font-size:var(--nyx-fs-lg)}
.nyx-nav .nav-toggle{display:none;background:transparent;border:0;font-size:20px;color:var(--nyx-text);cursor:pointer}
.nyx-nav .nav-links{display:flex;gap:var(--nyx-s3);align-items:center}
.nyx-nav .nav-links a{color:var(--nyx-text-muted);text-decoration:none;padding:8px 12px;border-radius:var(--nyx-radius-sm);transition:all .2s var(--nyx-ease)}
.nyx-nav .nav-links a:focus,.nyx-nav .nav-links a:hover{background:var(--nyx-glass);color:var(--nyx-text)}
.nyx-mega{position:relative}
.nyx-mega .mega-panel{display:none;position:absolute;inset-inline-start:0;top:100%;background:var(--nyx-surface);box-shadow:var(--nyx-shadow-lg);padding:var(--nyx-s4);border-radius:var(--nyx-radius-lg);min-width:320px;z-index:80;border:1px solid var(--nyx-border)}
.nyx-mega:focus-within .mega-panel,.nyx-mega:hover .mega-panel{display:block;animation:nyx-fade .15s var(--nyx-ease)}
@media (max-width: 820px){
.nyx-nav{padding:8px 12px}
.nyx-nav .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
.nyx-nav .nav-links{position:absolute;top:100%;inset-inline-start:0;inset-inline-end:0;background:var(--nyx-surface);flex-direction:column;gap:0;padding:8px 16px;border-bottom:1px solid var(--nyx-border);box-shadow:var(--nyx-shadow-lg);display:none;z-index:70}
.nyx-nav .nav-links a{width:100%;display:block}
.nyx-nav[data-open="true"] .nav-links{display:flex;animation:nyx-fade .2s var(--nyx-ease)}
.nyx-mega .mega-panel{position:static;box-shadow:none;border-radius:0;padding-inline-start:0;border:none;margin-top:8px}
}
/* ============================================================
7. FEEDBACK & STATUS
============================================================ */
.nyx-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-xs);font-weight:500;padding:3px 10px;border-radius:var(--nyx-radius-full);background:var(--nyx-surface-2);color:var(--nyx-text-muted);border:1px solid var(--nyx-border)}
.nyx-badge-success{background:color-mix(in srgb,var(--nyx-success) 12%,transparent);color:var(--nyx-success);border-color:color-mix(in srgb,var(--nyx-success) 30%,transparent)}
.nyx-badge-danger{background:color-mix(in srgb,var(--nyx-danger) 12%,transparent);color:var(--nyx-danger);border-color:color-mix(in srgb,var(--nyx-danger) 30%,transparent)}
.nyx-badge-warning{background:color-mix(in srgb,var(--nyx-warning) 12%,transparent);color:var(--nyx-warning);border-color:color-mix(in srgb,var(--nyx-warning) 30%,transparent)}
.nyx-badge-info{background:color-mix(in srgb,var(--nyx-accent) 14%,transparent);color:var(--nyx-accent);border-color:color-mix(in srgb,var(--nyx-accent) 30%,transparent)}
.nyx-badge-dot{display:inline-flex;align-items:center;gap:8px;font-size:var(--nyx-fs-sm);color:var(--nyx-text)}
.nyx-badge-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nyx-accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--nyx-accent-2) 18%,transparent);animation:nyx-blink 1.6s var(--nyx-ease) infinite}
@keyframes nyx-blink{50%{opacity:.4}}
.nyx-alert{display:flex;gap:var(--nyx-s3);padding:14px 16px;border-radius:var(--nyx-radius);border:1px solid var(--nyx-border);background:var(--nyx-surface);border-inline-start-width:3px;font-size:var(--nyx-fs-sm)}
.nyx-alert .nyx-alert-icon{font-size:18px;line-height:1.4}
.nyx-alert-info{border-inline-start-color:var(--nyx-accent)}
.nyx-alert-success{border-inline-start-color:var(--nyx-success)}
.nyx-alert-warning{border-inline-start-color:var(--nyx-warning)}
.nyx-alert-danger{border-inline-start-color:var(--nyx-danger)}
.nyx-progress{height:8px;background:var(--nyx-surface-2);border-radius:var(--nyx-radius-full);overflow:hidden}
.nyx-progress > span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--nyx-accent),var(--nyx-accent-2));box-shadow:var(--nyx-glow);transition:width .4s var(--nyx-ease)}
.nyx-skeleton{background:linear-gradient(90deg,var(--nyx-surface-2) 25%,var(--nyx-shimmer) 50%,var(--nyx-surface-2) 75%);background-size:200% 100%;border-radius:var(--nyx-radius);animation:nyx-shimmer 1.4s linear infinite}
@keyframes nyx-shimmer{to{background-position:-200% 0}}
.nyx-status-bar{display:flex;align-items:flex-start;width:100%}
.nyx-status-bar .nyx-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted);position:relative}
.nyx-status-bar .nyx-step .nyx-step-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);font-size:var(--nyx-fs-xs);font-family:var(--nyx-font-mono);position:relative;z-index:1}
/* connector runs dot-center to dot-center, behind the dots (logical → RTL-safe) */
.nyx-status-bar .nyx-step::after{content:"";position:absolute;top:15px;inset-inline-start:-50%;width:100%;height:2px;background:var(--nyx-border);z-index:0}
.nyx-status-bar .nyx-step:first-child::after{display:none}
.nyx-status-bar .nyx-step.done .nyx-step-dot{background:var(--nyx-accent-2);border-color:var(--nyx-accent-2);color:#04130f}
.nyx-status-bar .nyx-step.done::after{background:var(--nyx-accent-2)}
.nyx-status-bar .nyx-step.current .nyx-step-dot{background:var(--nyx-accent);border-color:var(--nyx-accent);color:#fff;box-shadow:var(--nyx-glow)}
.nyx-status-bar .nyx-step.current{color:var(--nyx-text)}
/* spinners */
.nyx-spinner{display:inline-block;width:24px;height:24px;border-radius:50%;border:3px solid var(--nyx-surface-2);border-top-color:var(--nyx-accent);animation:nyx-spin .7s linear infinite}
.nyx-spinner-sm{width:16px;height:16px;border-width:2px}
.nyx-spinner-lg{width:36px;height:36px;border-width:4px}
.nyx-spinner-dots{display:inline-flex;gap:5px;align-items:center}
.nyx-spinner-dots span{width:8px;height:8px;border-radius:50%;background:var(--nyx-accent);animation:nyx-bounce 1s var(--nyx-ease) infinite}
.nyx-spinner-dots span:nth-child(2){animation-delay:.15s}
.nyx-spinner-dots span:nth-child(3){animation-delay:.3s}
@keyframes nyx-bounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}
.nyx-toast-wrap{position:fixed;inset-inline-end:var(--nyx-s5);bottom:var(--nyx-s5);z-index:300;display:flex;flex-direction:column;gap:var(--nyx-s3);max-width:340px}
.nyx-toast{display:flex;align-items:center;gap:var(--nyx-s3);padding:12px 16px;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-inline-start-width:3px;border-radius:var(--nyx-radius);box-shadow:var(--nyx-shadow-lg);font-size:var(--nyx-fs-sm);animation:nyx-toast-in .3s var(--nyx-ease)}
.nyx-toast.nyx-out{animation:nyx-toast-out .3s var(--nyx-ease) forwards}
.nyx-toast-info{border-inline-start-color:var(--nyx-accent)}
.nyx-toast-success{border-inline-start-color:var(--nyx-accent-2)}
.nyx-toast-warning{border-inline-start-color:var(--nyx-warning)}
.nyx-toast-danger{border-inline-start-color:var(--nyx-danger)}
.nyx-toast-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.nyx-toast-title{font-weight:700}
.nyx-toast-action{margin-inline-start:auto;background:none;border:0;color:var(--nyx-accent);font-weight:600;font-size:var(--nyx-fs-sm);cursor:pointer;padding:2px 8px;border-radius:var(--nyx-radius-sm);white-space:nowrap;flex:0 0 auto}
.nyx-toast-action:hover{background:var(--nyx-glass)}
.nyx-toast-close{background:none;border:0;color:var(--nyx-text-muted);cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;border-radius:var(--nyx-radius-sm);flex:0 0 auto}
.nyx-toast-close:hover{color:var(--nyx-text);background:var(--nyx-glass)}
.nyx-toast-wrap[data-pos^="top"]{top:var(--nyx-s5);bottom:auto}
.nyx-toast-wrap[data-pos$="left"]{inset-inline-start:var(--nyx-s5);inset-inline-end:auto}
.nyx-toast-wrap[data-pos$="center"]{inset-inline-start:50%;inset-inline-end:auto;transform:translateX(-50%);align-items:center}
@keyframes nyx-toast-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes nyx-toast-out{to{opacity:0;transform:translateX(40px)}}
/* ============================================================
8. DATA DISPLAY
============================================================ */
.nyx-table{width:100%;border-collapse:collapse;font-size:var(--nyx-fs-sm);overflow:hidden;border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg)}
.nyx-table th,.nyx-table td{text-align:start;padding:12px 16px;border-bottom:1px solid var(--nyx-border)}
.nyx-table thead th{color:var(--nyx-text-muted);font-weight:600;font-size:var(--nyx-fs-xs);text-transform:uppercase;letter-spacing:.06em;background:var(--nyx-surface)}
.nyx-table tbody tr{transition:background .2s var(--nyx-ease)}
.nyx-table tbody tr:hover{background:var(--nyx-glass)}
.nyx-table tbody tr:last-child td{border-bottom:none}
.nyx-table-sortable th{cursor:pointer;user-select:none}
.nyx-table-sortable th::after{content:"↕";margin-inline-start:6px;opacity:.4;font-size:11px}
/* variants */
.nyx-table.striped tbody tr:nth-child(even){background:color-mix(in srgb,var(--nyx-surface-2) 60%,transparent)}
.nyx-table.bordered th,.nyx-table.bordered td{border-inline-end:1px solid var(--nyx-border)}
.nyx-table.bordered th:last-child,.nyx-table.bordered td:last-child{border-inline-end:0}
.nyx-table.compact th,.nyx-table.compact td{padding:7px 12px}
.nyx-table.borderless,.nyx-table.borderless th,.nyx-table.borderless td{border:0}
.nyx-table tbody tr.selected{background:color-mix(in srgb,var(--nyx-accent) 12%,transparent)}
.nyx-table-wrap{overflow-x:auto;border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg)}
.nyx-table-wrap > .nyx-table{border:0;border-radius:0}
.nyx-data-grid{font-size:var(--nyx-fs-xs);font-family:var(--nyx-font-mono);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);overflow:auto}
.nyx-data-grid table{width:100%;border-collapse:collapse}
.nyx-data-grid th,.nyx-data-grid td{padding:6px 10px;border:1px solid var(--nyx-border);white-space:nowrap}
.nyx-data-grid th{background:var(--nyx-surface-2);color:var(--nyx-text-muted);position:sticky;top:0}
.nyx-data-grid td:first-child{background:var(--nyx-surface);color:var(--nyx-text-muted);position:sticky;inset-inline-start:0}
.nyx-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--nyx-s4)}
/* list group */
.nyx-list-group{display:flex;flex-direction:column;border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);overflow:hidden}
.nyx-list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--nyx-surface);border-bottom:1px solid var(--nyx-border);font-size:var(--nyx-fs-sm);transition:background .2s var(--nyx-ease)}
.nyx-list-item:last-child{border-bottom:none}
a.nyx-list-item:hover{background:var(--nyx-glass)}
.nyx-list-item.active{background:color-mix(in srgb,var(--nyx-accent) 12%,transparent);color:var(--nyx-text)}
@media(max-width:880px){.nyx-kpi-row{grid-template-columns:repeat(2,1fr)}.nyx-data-grid table{min-width:560px}}
@media(max-width:480px){.nyx-kpi-row{grid-template-columns:1fr}}
/* ============================================================
9. OVERLAYS
============================================================ */
.nyx-overlay{position:fixed;inset:0;z-index:150;display:none;background:var(--nyx-overlay-bg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.nyx-overlay.open{display:block;animation:nyx-fade .2s var(--nyx-ease)}
.nyx-modal{position:fixed;inset:0;z-index:160;display:none;place-items:center;padding:var(--nyx-s4)}
.nyx-modal.open{display:grid}
.nyx-modal .nyx-modal-box{width:min(480px,100%);background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);box-shadow:var(--nyx-shadow-lg);padding:var(--nyx-s5);animation:nyx-modal-in .25s var(--nyx-ease)}
@keyframes nyx-modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.nyx-drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:160;width:min(400px,90vw);background:var(--nyx-surface);border-inline-start:1px solid var(--nyx-border);box-shadow:var(--nyx-shadow-lg);padding:var(--nyx-s5);transform:translateX(100%);transition:transform .3s var(--nyx-ease);overflow-y:auto}
.nyx-drawer.open{transform:none}
.nyx-drawer-left{inset-inline-end:auto;inset-inline-start:0;border-inline-start:none;border-inline-end:1px solid var(--nyx-border);transform:translateX(-100%)}
.nyx-drawer-left.open{transform:none}
.nyx-tooltip{position:relative;display:inline-flex}
.nyx-tooltip > .nyx-tip{position:absolute;z-index:120;padding:6px 10px;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-sm);font-size:var(--nyx-fs-xs);color:var(--nyx-text);white-space:nowrap;box-shadow:var(--nyx-shadow);opacity:0;pointer-events:none;transition:opacity .2s var(--nyx-ease),transform .2s var(--nyx-ease)}
.nyx-tooltip:hover > .nyx-tip{opacity:1}
.nyx-tip.top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px)}
.nyx-tooltip:hover .nyx-tip.top{transform:translateX(-50%)}
.nyx-tip.bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px)}
.nyx-tooltip:hover .nyx-tip.bottom{transform:translateX(-50%)}
.nyx-tip.left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px)}
.nyx-tooltip:hover .nyx-tip.left{transform:translateY(-50%)}
.nyx-tip.right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(-4px)}
.nyx-tooltip:hover .nyx-tip.right{transform:translateY(-50%)}
.nyx-popover{position:relative;display:inline-flex}
.nyx-popover .nyx-pop{position:absolute;bottom:calc(100% + 12px);inset-inline:0;margin-inline:auto;width:max-content;max-width:min(300px,90vw);z-index:120;padding:var(--nyx-s4);background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);box-shadow:var(--nyx-shadow-lg);font-size:var(--nyx-fs-sm);display:none}
.nyx-popover.open .nyx-pop{display:block;animation:nyx-pop-in .18s var(--nyx-ease)}
.nyx-popover .nyx-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:var(--nyx-surface-2);border-right:1px solid var(--nyx-border);border-bottom:1px solid var(--nyx-border);margin-top:-5px}
@keyframes nyx-pop-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* collapse + accordion */
.nyx-collapse{max-height:0;overflow:hidden;transition:max-height .3s var(--nyx-ease)}
.nyx-collapse.open{max-height:480px}
.nyx-accordion{display:flex;flex-direction:column;gap:var(--nyx-s2)}
.nyx-accordion-item{border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);overflow:hidden;background:var(--nyx-surface)}
.nyx-accordion-head{width:100%;text-align:start;background:none;border:none;color:var(--nyx-text);font-family:var(--nyx-font-body);font-weight:500;font-size:var(--nyx-fs-sm);padding:14px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:color .2s var(--nyx-ease)}
.nyx-accordion-head::after{content:"⌄";color:var(--nyx-text-muted);transition:transform .2s var(--nyx-ease)}
.nyx-accordion-head.active{color:var(--nyx-accent)}
.nyx-accordion-head.active::after{transform:rotate(180deg)}
.nyx-accordion-body{padding:0 16px 16px;font-size:var(--nyx-fs-sm);color:var(--nyx-text-muted)}
/* carousel */
.nyx-carousel{position:relative;border-radius:var(--nyx-radius-lg);overflow:hidden;border:1px solid var(--nyx-border)}
.nyx-carousel:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--nyx-accent) 40%,transparent)}
.nyx-slide{display:none}
.nyx-slide.active{display:block;animation:nyx-fade .4s var(--nyx-ease)}
.nyx-carousel-ctrl{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.nyx-carousel-ctrl.prev{inset-inline-start:12px}
.nyx-carousel-ctrl.next{inset-inline-end:12px}
.nyx-carousel-dots{position:absolute;bottom:12px;inset-inline:0;display:flex;justify-content:center;gap:6px;z-index:2}
.nyx-carousel-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:all .2s var(--nyx-ease)}
.nyx-carousel-dots button.active{background:#fff;box-shadow:var(--nyx-glow);width:20px;border-radius:var(--nyx-radius-full)}
/* slide content shouldn't add its own frame on top of the carousel border */
.nyx-carousel .nyx-slide > .nyx-spotlight,
.nyx-carousel .nyx-slide > .nyx-card,
.nyx-carousel .nyx-slide > .nyx-product{border:0;border-radius:0;box-shadow:none}
.nyx-carousel.flat{border:0}
.nyx-carousel.flat .nyx-carousel-ctrl .nyx-btn{box-shadow:var(--nyx-shadow-lg)}
/* optional caption band over a slide */
.nyx-carousel-caption{position:absolute;inset-inline:0;bottom:0;z-index:1;padding:var(--nyx-s5) var(--nyx-s4) var(--nyx-s4);background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;text-align:start}
.nyx-carousel-caption h3,.nyx-carousel-caption h4{color:#fff;margin:0}
/* fade-only transition (no horizontal jump) is the default; .slide cross-fades softer */
.nyx-carousel.fade .nyx-slide.active{animation:nyx-fade-in .5s var(--nyx-ease)}
/* ============================================================
10. SIGNATURE ELEMENTS
============================================================ */
.nyx-spotlight{position:relative;text-align:center;padding:var(--nyx-s9) var(--nyx-s5);border-radius:var(--nyx-radius-xl);overflow:hidden;background:var(--nyx-surface);border:1px solid var(--nyx-border)}
.nyx-spotlight::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(circle,color-mix(in srgb,var(--nyx-accent) 35%,transparent),transparent 60%);pointer-events:none}
.nyx-spotlight::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:240px;height:1px;background:linear-gradient(90deg,transparent,var(--nyx-accent),transparent)}
.nyx-spotlight > *{position:relative}
.nyx-orbit{position:relative;width:220px;height:220px;margin-inline:auto}
.nyx-orbit .nyx-orbit-center{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:var(--nyx-radius-lg);display:grid;place-items:center;background:linear-gradient(120deg,var(--nyx-accent),var(--nyx-accent-2));box-shadow:var(--nyx-glow);font-size:22px;z-index:2}
.nyx-orbit .nyx-ring{position:absolute;inset:0;margin:auto;border:1px solid var(--nyx-border);border-radius:50%}
.nyx-orbit .nyx-ring.r1{width:120px;height:120px}
.nyx-orbit .nyx-ring.r2{width:180px;height:180px}
.nyx-orbit .nyx-ring.r3{width:220px;height:220px}
.nyx-orbit .nyx-spin{position:absolute;inset:0;margin:auto;width:120px;height:120px;animation:nyx-orbit-rot 12s linear infinite}
.nyx-orbit .nyx-spin.s2{width:180px;height:180px;animation-duration:18s;animation-direction:reverse}
.nyx-orbit .nyx-node{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);font-size:14px;box-shadow:var(--nyx-shadow)}
@keyframes nyx-orbit-rot{to{transform:rotate(360deg)}}
.nyx-command{font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-xs);display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--nyx-radius-sm);background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-bottom-width:2px;color:var(--nyx-text);box-shadow:var(--nyx-shadow-sm)}
.nyx-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--nyx-fs-sm);padding-block:5px;padding-inline:12px 6px;border-radius:var(--nyx-radius-full);background:var(--nyx-surface-2);border:1px solid var(--nyx-border);color:var(--nyx-text)}
.nyx-chip .nyx-chip-x{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--nyx-text-muted);transition:all .2s var(--nyx-ease);font-size:13px}
.nyx-chip .nyx-chip-x:hover{background:var(--nyx-elev-hover);color:var(--nyx-text)}
.nyx-chip-accent{background:color-mix(in srgb,var(--nyx-accent) 14%,transparent);border-color:color-mix(in srgb,var(--nyx-accent) 35%,transparent);color:var(--nyx-accent)}
.nyx-chip-outline{background:transparent}
.nyx-timeline{position:relative;padding-inline-start:var(--nyx-s6)}
.nyx-timeline::before{content:"";position:absolute;inset-inline-start:9px;top:6px;bottom:6px;width:2px;background:var(--nyx-border)}
.nyx-timeline .nyx-tl-item{position:relative;padding-bottom:var(--nyx-s5)}
.nyx-timeline .nyx-tl-item:last-child{padding-bottom:0}
.nyx-timeline .nyx-tl-dot{position:absolute;inset-inline-start:calc(-1 * var(--nyx-s6) + 2px);top:4px;width:16px;height:16px;border-radius:50%;background:var(--nyx-surface);border:2px solid var(--nyx-accent);box-shadow:var(--nyx-glow)}
.nyx-timeline .nyx-tl-date{font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted);margin-bottom:var(--nyx-s2)}
.nyx-meter{display:inline-grid;place-items:center;position:relative}
.nyx-meter svg{transform:rotate(-90deg)}
.nyx-meter .nyx-meter-track{fill:none;stroke:var(--nyx-surface-2);stroke-width:10}
.nyx-meter .nyx-meter-fill{fill:none;stroke:url(#nyxMeterGrad);stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--nyx-accent) 60%,transparent));transition:stroke-dashoffset .6s var(--nyx-ease)}
.nyx-meter .nyx-meter-val{position:absolute;font-family:var(--nyx-font-display);font-weight:700;font-size:var(--nyx-fs-xl)}
.nyx-gradient-border{position:relative;border-radius:var(--nyx-radius-lg);padding:1px;background:linear-gradient(120deg,var(--nyx-accent),var(--nyx-accent-2),var(--nyx-accent));background-size:200% 200%;animation:nyx-gb 4s linear infinite}
.nyx-gradient-border > *{background:var(--nyx-surface);border-radius:calc(var(--nyx-radius-lg) - 1px);padding:var(--nyx-s5)}
@keyframes nyx-gb{to{background-position:200% 0}}
.nyx-avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;line-height:1;text-align:center;position:relative;background:linear-gradient(120deg,var(--nyx-accent),var(--nyx-accent-2));color:#fff;font-weight:600;font-size:var(--nyx-fs-sm);font-family:var(--nyx-font-display);border:2px solid var(--nyx-surface);flex-shrink:0;overflow:hidden}
.nyx-avatar.online::after{content:"";position:absolute;inset-inline-end:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--nyx-accent-2);border:2px solid var(--nyx-bg)}
.nyx-avatar-group{display:inline-flex}
.nyx-avatar-group .nyx-avatar{margin-inline-start:-12px;transition:transform .2s var(--nyx-ease)}
.nyx-avatar-group .nyx-avatar:first-child{margin-inline-start:0}
.nyx-avatar-group .nyx-avatar:hover{transform:translateY(-3px);z-index:1}
.nyx-notification-dot{position:relative;display:inline-flex}
.nyx-notification-dot[data-count]::after{content:attr(data-count);position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--nyx-radius-full);background:var(--nyx-danger);color:#fff;font-size:10px;font-weight:600;font-family:var(--nyx-font-mono);display:grid;place-items:center;border:2px solid var(--nyx-bg);box-shadow:0 0 12px color-mix(in srgb,var(--nyx-danger) 50%,transparent)}
.nyx-notification-dot.plain::after{content:"";min-width:0;width:10px;height:10px;padding:0;top:-2px;inset-inline-end:-2px}
.nyx-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.nyx-marquee .nyx-track{display:inline-flex;gap:var(--nyx-s7);align-items:center;animation:nyx-marquee 18s linear infinite;white-space:nowrap}
.nyx-marquee:hover .nyx-track{animation-play-state:paused}
.nyx-marquee .nyx-track span{color:var(--nyx-text-muted);font-family:var(--nyx-font-display);font-weight:700;font-size:var(--nyx-fs-lg);opacity:.7}
@keyframes nyx-marquee{to{transform:translateX(-50%)}}
/* segmented control */
.nyx-segment{display:inline-flex;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);padding:3px;gap:3px}
.nyx-segment label{position:relative;cursor:pointer}
.nyx-segment input{position:absolute;opacity:0;width:0;height:0}
.nyx-segment span{display:block;padding:6px 14px;border-radius:calc(var(--nyx-radius) - 3px);font-size:var(--nyx-fs-sm);color:var(--nyx-text-muted);transition:all .2s var(--nyx-ease)}
.nyx-segment input:checked + span{background:var(--nyx-accent);color:#fff;box-shadow:var(--nyx-glow)}
.nyx-segment input:focus-visible + span{outline:2px solid var(--nyx-accent);outline-offset:2px}
/* rating */
.nyx-rating{display:inline-flex;flex-direction:row-reverse;gap:2px}
.nyx-rating input{position:absolute;opacity:0;width:0;height:0}
.nyx-rating label{cursor:pointer;font-size:22px;line-height:1;color:var(--nyx-surface-2);transition:color .15s var(--nyx-ease)}
.nyx-rating label::before{content:"★"}
.nyx-rating input:checked ~ label,.nyx-rating label:hover,.nyx-rating label:hover ~ label{color:var(--nyx-warning)}
/* empty state */
.nyx-empty{text-align:center;padding:var(--nyx-s7);border:1px dashed var(--nyx-border);border-radius:var(--nyx-radius-lg);background:var(--nyx-glass)}
.nyx-empty .nyx-empty-icon{font-size:34px;opacity:.7;margin-bottom:var(--nyx-s3)}
/* announcement banner */
.nyx-banner{display:flex;align-items:center;justify-content:center;gap:var(--nyx-s3);flex-wrap:wrap;padding:10px 16px;border-radius:var(--nyx-radius);background:linear-gradient(120deg,color-mix(in srgb,var(--nyx-accent) 18%,transparent),color-mix(in srgb,var(--nyx-accent-2) 14%,transparent));border:1px solid var(--nyx-border);font-size:var(--nyx-fs-sm)}
/* file dropzone */
.nyx-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--nyx-s2);text-align:center;padding:var(--nyx-s7);border:2px dashed var(--nyx-border);border-radius:var(--nyx-radius-lg);background:var(--nyx-glass);color:var(--nyx-text-muted);cursor:pointer;transition:all .2s var(--nyx-ease)}
.nyx-dropzone:hover{border-color:var(--nyx-accent);color:var(--nyx-text);box-shadow:var(--nyx-glow)}
.nyx-dropzone .nyx-dz-icon{font-size:28px}
/* ============================================================
11. MORE COMPONENTS (v1.0)
============================================================ */
/* stepper (number input) */
.nyx-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);overflow:hidden;background:var(--nyx-surface)}
.nyx-stepper button{width:36px;border:none;background:var(--nyx-surface-2);color:var(--nyx-text);cursor:pointer;font-size:16px;line-height:1;transition:all .2s var(--nyx-ease)}
.nyx-stepper button:hover{background:var(--nyx-elev-hover);color:var(--nyx-accent)}
.nyx-stepper input{width:52px;border:none;background:transparent;color:var(--nyx-text);text-align:center;font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-sm);outline:none}
/* OTP / pin input */
.nyx-otp{display:inline-flex;gap:8px}
.nyx-otp input{width:44px;height:52px;text-align:center;font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-lg);color:var(--nyx-text);background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);outline:none;transition:all .2s var(--nyx-ease)}
.nyx-otp input:focus{border-color:var(--nyx-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-accent) 18%,transparent),var(--nyx-glow)}
/* tag input */
.nyx-tag-input{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);transition:all .2s var(--nyx-ease)}
.nyx-tag-input:focus-within{border-color:var(--nyx-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-accent) 18%,transparent)}
.nyx-tag-input input{flex:1;min-width:120px;border:none;background:transparent;outline:none;color:var(--nyx-text);font-size:var(--nyx-fs-sm);padding:4px}
/* split button */
.nyx-btn-split{display:inline-flex;align-items:stretch}
.nyx-btn-split > .nyx-btn:first-child{border-start-end-radius:0;border-end-end-radius:0}
.nyx-btn-split > .nyx-dropdown{display:flex}
.nyx-btn-split > .nyx-dropdown > .nyx-btn{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:1px solid color-mix(in srgb,var(--nyx-text) 22%,transparent);margin-inline-start:-1px;padding-inline:10px}
/* toolbar */
.nyx-toolbar{display:flex;align-items:center;gap:var(--nyx-s2);flex-wrap:wrap;padding:8px;background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius)}
.nyx-toolbar-sep{width:1px;align-self:stretch;background:var(--nyx-border);margin-inline:4px}
/* tree view (uses collapse) */
.nyx-tree{font-size:var(--nyx-fs-sm)}
.nyx-tree-label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--nyx-radius-sm);cursor:pointer;color:var(--nyx-text);transition:background .2s var(--nyx-ease)}
.nyx-tree-label:hover{background:var(--nyx-glass)}
.nyx-tree-label::before{content:"▸";color:var(--nyx-text-muted);font-size:10px;transition:transform .2s var(--nyx-ease)}
.nyx-tree-label.active::before{transform:rotate(90deg)}
.nyx-tree-children{padding-inline-start:18px}
.nyx-tree-leaf{display:flex;align-items:center;gap:8px;padding:6px 8px;padding-inline-start:26px;color:var(--nyx-text-muted)}
/* vertical tabs */
.nyx-tabs-vertical{display:flex;gap:var(--nyx-s5)}
.nyx-tabs-vertical .nyx-tabs{flex-direction:column;border-bottom:none;border-inline-end:1px solid var(--nyx-border);gap:2px}
.nyx-tabs-vertical .nyx-tab::after{left:auto;right:auto;inset-inline-end:-1px;top:0;bottom:0;width:2px;height:auto;transform:scaleY(0)}
.nyx-tabs-vertical .nyx-tab.active::after{transform:scaleY(1)}
/* calendar */
.nyx-calendar{display:inline-block;background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);padding:var(--nyx-s4);width:280px}
.nyx-calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--nyx-s3);font-family:var(--nyx-font-display);font-weight:700}
.nyx-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.nyx-calendar-grid .dow{font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted);padding:4px 0;font-family:var(--nyx-font-mono)}
.nyx-calendar-grid .day{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--nyx-radius-sm);font-size:var(--nyx-fs-sm);cursor:pointer;transition:background .15s var(--nyx-ease)}
.nyx-calendar-grid .day:hover{background:var(--nyx-glass)}
.nyx-calendar-grid .day.muted{color:var(--nyx-text-muted);opacity:.4}
.nyx-calendar-grid .day.today{border:1px solid var(--nyx-accent);color:var(--nyx-accent)}
.nyx-calendar-grid .day.selected{background:var(--nyx-accent);color:#fff;box-shadow:var(--nyx-glow)}
.nyx-calendar-grid .day.disabled{opacity:.3;cursor:not-allowed}
.nyx-calendar-foot{display:flex;gap:var(--nyx-s2);justify-content:flex-end;margin-top:var(--nyx-s3);padding-top:var(--nyx-s3);border-top:1px solid var(--nyx-border)}
.nyx-calendar-foot button{background:none;border:0;color:var(--nyx-accent);font-family:var(--nyx-font-body);font-size:var(--nyx-fs-sm);font-weight:600;cursor:pointer;padding:4px 10px;border-radius:var(--nyx-radius-sm);transition:background .15s var(--nyx-ease)}
.nyx-calendar-foot button:hover{background:var(--nyx-glass)}
/* file item */
.nyx-file{display:flex;align-items:center;gap:var(--nyx-s3);padding:12px 14px;background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius)}
.nyx-file .nyx-file-icon{width:38px;height:38px;border-radius:var(--nyx-radius-sm);display:grid;place-items:center;background:color-mix(in srgb,var(--nyx-accent) 14%,transparent);color:var(--nyx-accent);font-size:18px;flex-shrink:0}
.nyx-file .nyx-file-meta{flex:1;min-width:0}
.nyx-file .nyx-file-name{font-size:var(--nyx-fs-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nyx-file .nyx-file-sub{font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted)}
/* sparkline */
.nyx-sparkline{display:inline-flex;align-items:flex-end;gap:3px;height:40px}
.nyx-sparkline span{width:6px;background:linear-gradient(180deg,var(--nyx-accent),var(--nyx-accent-2));border-radius:2px;opacity:.85}
/* ============================================================
12. BIG TYPE & MOTION (v1.0)
============================================================ */
/* oversized hero type — the big-typography trend */
.nyx-bigtype{font-family:var(--nyx-font-display);font-weight:800;font-size:clamp(46px,11vw,132px);line-height:.92;letter-spacing:-.04em;margin:0}
.nyx-bigtype-sm{font-size:clamp(34px,7vw,72px)}
.nyx-bigtype .stroke{-webkit-text-stroke:1.5px var(--nyx-accent);color:transparent}
.nyx-bigtype .nyx-gradient-text{display:inline-block;padding-bottom:.18em}
.nyx-font-ruqaa{font-family:'Aref Ruqaa','Lalezar',serif}
/* scroll-reveal (wire with data-nyx-reveal) */
.nyx-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--nyx-ease),transform .6s var(--nyx-ease)}
.nyx-reveal.nyx-in{opacity:1;transform:none}
/* one-shot entrance animations + stagger delays */
.nyx-anim-fade{animation:nyx-fade-in .6s var(--nyx-ease) both}
.nyx-anim-up{animation:nyx-slide-up .6s var(--nyx-ease) both}
.nyx-anim-zoom{animation:nyx-zoom-in .5s var(--nyx-ease) both}
.nyx-anim-float{animation:nyx-float 3s var(--nyx-ease) infinite}
.nyx-anim-delay-1{animation-delay:.1s}.nyx-anim-delay-2{animation-delay:.2s}.nyx-anim-delay-3{animation-delay:.3s}.nyx-anim-delay-4{animation-delay:.4s}
@keyframes nyx-fade-in{from{opacity:0}to{opacity:1}}
@keyframes nyx-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes nyx-zoom-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes nyx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* directional entrances */
.nyx-anim-left{animation:nyx-slide-left .6s var(--nyx-ease) both}
.nyx-anim-right{animation:nyx-slide-right .6s var(--nyx-ease) both}
@keyframes nyx-slide-left{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes nyx-slide-right{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
[dir="rtl"] .nyx-anim-left{animation-name:nyx-slide-right}
[dir="rtl"] .nyx-anim-right{animation-name:nyx-slide-left}
/* glass flare sweep shine */
.nyx-glass-flare{position:relative;overflow:hidden}
.nyx-glass-flare::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:-150%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 30%,rgba(255,255,255,.24) 50%,rgba(255,255,255,.12) 70%,transparent);transform:skewX(-25deg);pointer-events:none}
.nyx-glass-flare:hover::after{inset-inline-start:150%;transition:inset-inline-start .85s cubic-bezier(.16,1,.3,1)}
/* spotlight card hover pointer shine */
.nyx-spotlight-card{position:relative;overflow:hidden}
.nyx-spotlight-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(600px circle at var(--nyx-mx,-999px) var(--nyx-my,-999px),color-mix(in srgb,var(--nyx-accent) 15%,transparent),transparent 40%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
.nyx-spotlight-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px circle at var(--nyx-mx,-999px) var(--nyx-my,-999px),color-mix(in srgb,var(--nyx-accent) 7%,transparent),transparent 40%);pointer-events:none;z-index:1}
/* hover lift elevation */
.nyx-hover-lift{transition:transform .3s var(--nyx-ease),box-shadow .3s var(--nyx-ease),border-color .3s var(--nyx-ease)}
.nyx-hover-lift:hover{transform:translateY(-4px) scale(1.005);border-color:color-mix(in srgb,var(--nyx-accent) 30%,var(--nyx-border));box-shadow:var(--nyx-shadow-lg),0 4px 20px color-mix(in srgb,var(--nyx-accent) 10%,transparent)}
/* pulse glow */
.nyx-anim-pulse-glow{animation:nyx-pulse-glow 2s infinite alternate}
@keyframes nyx-pulse-glow{0%{box-shadow:0 0 4px color-mix(in srgb,var(--nyx-accent) 15%,transparent)}100%{box-shadow:0 0 16px color-mix(in srgb,var(--nyx-accent) 45%,transparent)}}
/* hover effects (transition-based) — .nyx-hover-lift keeps its accent-glow definition above */
.nyx-hover-grow{transition:transform .25s var(--nyx-ease)}.nyx-hover-grow:hover{transform:scale(1.04)}
.nyx-hover-shrink{transition:transform .25s var(--nyx-ease)}.nyx-hover-shrink:hover{transform:scale(.96)}
.nyx-hover-rotate{transition:transform .3s var(--nyx-ease)}.nyx-hover-rotate:hover{transform:rotate(3deg)}
.nyx-hover-glow{transition:box-shadow .25s var(--nyx-ease)}.nyx-hover-glow:hover{box-shadow:var(--nyx-glow)}
/* animated underline link */
.nyx-anim-underline{position:relative;text-decoration:none}
.nyx-anim-underline::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--nyx-ease)}
.nyx-anim-underline:hover::after,.nyx-anim-underline:focus-visible::after{transform:scaleX(1);transform-origin:left}
[dir="rtl"] .nyx-anim-underline::after{transform-origin:left}
[dir="rtl"] .nyx-anim-underline:hover::after,[dir="rtl"] .nyx-anim-underline:focus-visible::after{transform-origin:right}
/* attention seekers */
.nyx-anim-bounce{animation:nyx-bounce 1s var(--nyx-ease) infinite}
@keyframes nyx-bounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-12px)}50%{transform:translateY(0)}75%{transform:translateY(-5px)}}
.nyx-anim-shake{animation:nyx-shake .5s var(--nyx-ease)}
@keyframes nyx-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.nyx-anim-wiggle{animation:nyx-wiggle .6s var(--nyx-ease) infinite}
@keyframes nyx-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.nyx-anim-heartbeat{animation:nyx-heartbeat 1.4s var(--nyx-ease) infinite}
@keyframes nyx-heartbeat{0%,100%{transform:scale(1)}10%,30%{transform:scale(1.12)}20%{transform:scale(1)}}
.nyx-anim-spin-slow{animation:nyx-spin 6s linear infinite}
/* ping / pulse ring */
.nyx-anim-ping{position:relative}
.nyx-anim-ping::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,var(--nyx-accent) 55%,transparent);animation:nyx-ping 1.5s var(--nyx-ease) infinite}
@keyframes nyx-ping{to{box-shadow:0 0 0 12px transparent}}
/* Ken Burns slow image zoom */
.nyx-anim-kenburns{animation:nyx-kenburns 14s var(--nyx-ease) infinite alternate}
@keyframes nyx-kenburns{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-1%)}}
/* blur-in reveal */
.nyx-anim-blur{animation:nyx-blur-in .7s var(--nyx-ease) both}
@keyframes nyx-blur-in{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
/* animated gradient text */
.nyx-gradient-text.animated{background-size:200% auto;animation:nyx-text-shine 4s linear infinite}
@keyframes nyx-text-shine{to{background-position:200% center}}
/* animated aurora backdrop for heroes */
.nyx-aurora{position:relative;overflow:hidden}
.nyx-aurora::before{content:"";position:absolute;inset:-40%;z-index:0;background:conic-gradient(from 0deg,var(--nyx-accent),var(--nyx-accent-2),var(--nyx-danger),var(--nyx-accent));filter:blur(80px);opacity:.22;animation:nyx-aurora-rot 16s linear infinite}
.nyx-aurora > *{position:relative;z-index:1}
@keyframes nyx-aurora-rot{to{transform:rotate(360deg)}}
/* ============================================================
13. UTILITIES & HELPERS (v1.0)
============================================================ */
/* spacing — 0..6 maps to the 4px scale; sides: t b s(start) e(end) */
.nyx-m-0{margin:0}.nyx-mt-0{margin-top:0}.nyx-mb-0{margin-bottom:0}.nyx-ms-0{margin-inline-start:0}.nyx-me-0{margin-inline-end:0}
.nyx-m-1{margin:var(--nyx-s1)}.nyx-mt-1{margin-top:var(--nyx-s1)}.nyx-mb-1{margin-bottom:var(--nyx-s1)}.nyx-ms-1{margin-inline-start:var(--nyx-s1)}.nyx-me-1{margin-inline-end:var(--nyx-s1)}
.nyx-m-2{margin:var(--nyx-s2)}.nyx-mt-2{margin-top:var(--nyx-s2)}.nyx-mb-2{margin-bottom:var(--nyx-s2)}.nyx-ms-2{margin-inline-start:var(--nyx-s2)}.nyx-me-2{margin-inline-end:var(--nyx-s2)}
.nyx-m-3{margin:var(--nyx-s3)}.nyx-mt-3{margin-top:var(--nyx-s3)}.nyx-mb-3{margin-bottom:var(--nyx-s3)}.nyx-ms-3{margin-inline-start:var(--nyx-s3)}.nyx-me-3{margin-inline-end:var(--nyx-s3)}
.nyx-m-4{margin:var(--nyx-s4)}.nyx-mt-4{margin-top:var(--nyx-s4)}.nyx-mb-4{margin-bottom:var(--nyx-s4)}.nyx-ms-4{margin-inline-start:var(--nyx-s4)}.nyx-me-4{margin-inline-end:var(--nyx-s4)}
.nyx-m-5{margin:var(--nyx-s5)}.nyx-mt-5{margin-top:var(--nyx-s5)}.nyx-mb-5{margin-bottom:var(--nyx-s5)}.nyx-ms-5{margin-inline-start:var(--nyx-s5)}.nyx-me-5{margin-inline-end:var(--nyx-s5)}
.nyx-m-6{margin:var(--nyx-s6)}.nyx-mt-6{margin-top:var(--nyx-s6)}.nyx-mb-6{margin-bottom:var(--nyx-s6)}.nyx-ms-6{margin-inline-start:var(--nyx-s6)}.nyx-me-6{margin-inline-end:var(--nyx-s6)}
.nyx-mx-auto{margin-inline:auto}
.nyx-p-0{padding:0}.nyx-pt-0{padding-top:0}.nyx-pb-0{padding-bottom:0}.nyx-ps-0{padding-inline-start:0}.nyx-pe-0{padding-inline-end:0}
.nyx-p-1{padding:var(--nyx-s1)}.nyx-pt-1{padding-top:var(--nyx-s1)}.nyx-pb-1{padding-bottom:var(--nyx-s1)}.nyx-ps-1{padding-inline-start:var(--nyx-s1)}.nyx-pe-1{padding-inline-end:var(--nyx-s1)}
.nyx-p-2{padding:var(--nyx-s2)}.nyx-pt-2{padding-top:var(--nyx-s2)}.nyx-pb-2{padding-bottom:var(--nyx-s2)}.nyx-ps-2{padding-inline-start:var(--nyx-s2)}.nyx-pe-2{padding-inline-end:var(--nyx-s2)}
.nyx-p-3{padding:var(--nyx-s3)}.nyx-pt-3{padding-top:var(--nyx-s3)}.nyx-pb-3{padding-bottom:var(--nyx-s3)}.nyx-ps-3{padding-inline-start:var(--nyx-s3)}.nyx-pe-3{padding-inline-end:var(--nyx-s3)}
.nyx-p-4{padding:var(--nyx-s4)}.nyx-pt-4{padding-top:var(--nyx-s4)}.nyx-pb-4{padding-bottom:var(--nyx-s4)}.nyx-ps-4{padding-inline-start:var(--nyx-s4)}.nyx-pe-4{padding-inline-end:var(--nyx-s4)}
.nyx-p-5{padding:var(--nyx-s5)}.nyx-pt-5{padding-top:var(--nyx-s5)}.nyx-pb-5{padding-bottom:var(--nyx-s5)}.nyx-ps-5{padding-inline-start:var(--nyx-s5)}.nyx-pe-5{padding-inline-end:var(--nyx-s5)}
.nyx-p-6{padding:var(--nyx-s6)}.nyx-pt-6{padding-top:var(--nyx-s6)}.nyx-pb-6{padding-bottom:var(--nyx-s6)}.nyx-ps-6{padding-inline-start:var(--nyx-s6)}.nyx-pe-6{padding-inline-end:var(--nyx-s6)}
/* display */
.nyx-d-none{display:none}.nyx-d-block{display:block}.nyx-d-inline{display:inline}.nyx-d-inline-block{display:inline-block}.nyx-d-flex{display:flex}.nyx-d-inline-flex{display:inline-flex}.nyx-d-grid{display:grid}
/* text */
.nyx-text-start{text-align:start}.nyx-text-center{text-align:center}.nyx-text-end{text-align:end}
.nyx-text-uppercase{text-transform:uppercase}.nyx-text-lowercase{text-transform:lowercase}.nyx-text-capitalize{text-transform:capitalize}
.nyx-fw-normal{font-weight:400}.nyx-fw-medium{font-weight:500}.nyx-fw-bold{font-weight:700}
.nyx-text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nyx-text-accent{color:var(--nyx-accent)}.nyx-text-accent-2{color:var(--nyx-accent-2)}.nyx-text-danger{color:var(--nyx-danger)}.nyx-text-warning{color:var(--nyx-warning)}.nyx-text-muted{color:var(--nyx-text-muted)}
/* font-size scale */
.nyx-text-xs{font-size:var(--nyx-fs-xs)}.nyx-text-sm{font-size:var(--nyx-fs-sm)}.nyx-text-base{font-size:var(--nyx-fs-base)}.nyx-text-lg{font-size:var(--nyx-fs-lg)}.nyx-text-xl{font-size:var(--nyx-fs-xl)}.nyx-text-2xl{font-size:var(--nyx-fs-2xl)}.nyx-text-3xl{font-size:var(--nyx-fs-3xl)}
/* font weight */
.nyx-fw-light{font-weight:300}.nyx-fw-semibold{font-weight:600}.nyx-fw-extrabold{font-weight:800}.nyx-fw-black{font-weight:900}
/* line-height */
.nyx-leading-none{line-height:1}.nyx-leading-tight{line-height:1.2}.nyx-leading-snug{line-height:1.4}.nyx-leading-normal{line-height:1.6}.nyx-leading-relaxed{line-height:1.8}.nyx-leading-loose{line-height:2.1}
/* letter-spacing (Latin; auto-reset for Arabic in the RTL layer) */
.nyx-tracking-tight{letter-spacing:-.02em}.nyx-tracking-normal{letter-spacing:0}.nyx-tracking-wide{letter-spacing:.05em}.nyx-tracking-wider{letter-spacing:.12em}
/* font family */
.nyx-font-display{font-family:var(--nyx-font-display)}.nyx-font-body{font-family:var(--nyx-font-body)}.nyx-font-mono{font-family:var(--nyx-font-mono)}.nyx-font-serif{font-family:'Aref Ruqaa','Lalezar',serif}
/* multi-line clamp */
.nyx-line-clamp-1,.nyx-line-clamp-2,.nyx-line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.nyx-line-clamp-1{-webkit-line-clamp:1}.nyx-line-clamp-2{-webkit-line-clamp:2}.nyx-line-clamp-3{-webkit-line-clamp:3}
/* text-wrap + whitespace */
.nyx-text-balance{text-wrap:balance}.nyx-text-pretty{text-wrap:pretty}.nyx-text-nowrap{white-space:nowrap}.nyx-text-break{overflow-wrap:break-word;word-break:break-word}
/* numerics + extra decoration */
.nyx-nums-tabular{font-variant-numeric:tabular-nums}.nyx-nums-slashed{font-variant-numeric:slashed-zero}
.nyx-underline{text-decoration:underline;text-underline-offset:2px}.nyx-no-underline{text-decoration:none}.nyx-strike{text-decoration:line-through}.nyx-italic{font-style:italic}
/* background */
.nyx-bg-surface{background:var(--nyx-surface)}.nyx-bg-surface-2{background:var(--nyx-surface-2)}.nyx-bg-accent{background:var(--nyx-accent);color:#fff}.nyx-bg-glass{background:var(--nyx-glass)}
/* borders + radius */
.nyx-border{border:1px solid var(--nyx-border)}.nyx-border-0{border:0}
.nyx-rounded{border-radius:var(--nyx-radius)}.nyx-rounded-sm{border-radius:var(--nyx-radius-sm)}.nyx-rounded-lg{border-radius:var(--nyx-radius-lg)}.nyx-rounded-full{border-radius:var(--nyx-radius-full)}
/* shadows */
.nyx-shadow-sm{box-shadow:var(--nyx-shadow-sm)}.nyx-shadow{box-shadow:var(--nyx-shadow)}.nyx-shadow-lg{box-shadow:var(--nyx-shadow-lg)}.nyx-shadow-glow{box-shadow:var(--nyx-glow)}
/* sizing */
.nyx-w-25{width:25%}.nyx-w-50{width:50%}.nyx-w-75{width:75%}.nyx-w-100{width:100%}.nyx-mw-100{max-width:100%}.nyx-h-100{height:100%}
/* opacity */
.nyx-opacity-0{opacity:0}.nyx-opacity-25{opacity:.25}.nyx-opacity-50{opacity:.5}.nyx-opacity-75{opacity:.75}.nyx-opacity-100{opacity:1}
/* position */
.nyx-position-relative{position:relative}.nyx-position-absolute{position:absolute}.nyx-position-fixed{position:fixed}.nyx-position-sticky{position:sticky}
/* ---- Helpers ---- */
.nyx-vr{display:inline-block;align-self:stretch;width:1px;min-height:1em;background:var(--nyx-border)}
.nyx-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nyx-stretched-link::after{content:"";position:absolute;inset:0;z-index:1}
.nyx-focus-ring:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-accent) 40%,transparent)}
.nyx-clearfix::after{content:"";display:block;clear:both}
/* ============================================================
14. HIERARCHY (v1.0) — file/org trees, vertical + horizontal
============================================================ */
/* vertical indented tree with elbow connectors */
.nyx-hierarchy{font-size:var(--nyx-fs-sm)}
.nyx-hierarchy ul{list-style:none;margin:0;padding-inline-start:22px}
.nyx-hierarchy > ul{padding-inline-start:0}
.nyx-hierarchy li{position:relative;padding-block:1px}
.nyx-hierarchy ul ul > li::before{content:"";position:absolute;inset-inline-start:-12px;top:0;bottom:50%;width:1px;background:var(--nyx-border)}
.nyx-hierarchy ul ul > li::after{content:"";position:absolute;inset-inline-start:-12px;top:50%;width:11px;height:1px;background:var(--nyx-border)}
.nyx-hierarchy ul ul > li:last-child::before{bottom:auto;height:50%}
.nyx-hierarchy-node{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:var(--nyx-radius-sm);color:var(--nyx-text);transition:background .15s var(--nyx-ease)}
.nyx-hierarchy-node:hover{background:var(--nyx-glass)}
.nyx-hierarchy-node.active{background:color-mix(in srgb,var(--nyx-accent) 14%,transparent);color:var(--nyx-accent)}
.nyx-hierarchy-node .ico{font-size:15px;line-height:1}
.nyx-hierarchy-node .meta{margin-inline-start:auto;padding-inline-start:var(--nyx-s4);color:var(--nyx-text-muted);font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-xs)}
.nyx-hierarchy-node.has-kids{cursor:pointer}
.nyx-hierarchy-node .caret{display:inline-block;font-size:9px;color:var(--nyx-text-muted);transition:transform .15s var(--nyx-ease);transform:rotate(90deg)}
.nyx-hierarchy li.nyx-collapsed > ul{display:none}
.nyx-hierarchy li.nyx-collapsed > .nyx-hierarchy-node .caret{transform:rotate(0)}
[dir="rtl"] .nyx-hierarchy li.nyx-collapsed > .nyx-hierarchy-node .caret{transform:rotate(180deg)}
/* horizontal Finder/Miller columns — a left-to-right file hierarchy */
.nyx-hierarchy-cols{display:flex;border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);overflow-x:auto;background:var(--nyx-surface)}
.nyx-hierarchy-cols .nyx-hcol{min-width:184px;flex:0 0 auto;border-inline-end:1px solid var(--nyx-border);padding:6px;display:flex;flex-direction:column;gap:1px}
.nyx-hierarchy-cols .nyx-hcol[hidden]{display:none}
.nyx-hierarchy-cols .nyx-hcol:last-child{border-inline-end:none}
.nyx-hierarchy-cols .nyx-hitem{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--nyx-radius-sm);cursor:pointer;color:var(--nyx-text-muted);transition:background .15s var(--nyx-ease)}
.nyx-hierarchy-cols .nyx-hitem:hover{background:var(--nyx-glass);color:var(--nyx-text)}
.nyx-hierarchy-cols .nyx-hitem.active{background:color-mix(in srgb,var(--nyx-accent) 16%,transparent);color:var(--nyx-text)}
.nyx-hierarchy-cols .nyx-hitem .chev{margin-inline-start:auto;opacity:.55;font-size:11px}
/* ============================================================
15. REGIONAL — built for MENA (v1.0)
============================================================ */
/* prayer times — five daily prayers, highlight the next one */
.nyx-prayer-times{display:flex;gap:var(--nyx-s2);flex-wrap:wrap}
.nyx-prayer{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:74px;padding:10px 12px;border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);background:var(--nyx-surface);text-align:center}
.nyx-prayer .name{font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted)}
.nyx-prayer .time{font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-sm);font-weight:600;color:var(--nyx-text)}
.nyx-prayer.next{border-color:var(--nyx-accent);background:color-mix(in srgb,var(--nyx-accent) 10%,transparent);box-shadow:var(--nyx-glow)}
.nyx-prayer.next .name{color:var(--nyx-accent)}
/* dual Hijri + Gregorian date */
.nyx-datepair{display:inline-flex;flex-direction:column;line-height:1.3}
.nyx-datepair .hijri{font-family:var(--nyx-font-display);font-weight:700}
.nyx-datepair .greg{font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted);font-family:var(--nyx-font-mono)}
.nyx-datepair.inline{flex-direction:row;align-items:baseline;gap:8px}
/* price amount (.amt/.cur/.per) — undocumented utility kept for the pricing/checkout/dashboard examples */
.nyx-price{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--nyx-font-display);color:var(--nyx-text)}
.nyx-price .amt{font-weight:800;font-size:var(--nyx-fs-xl);line-height:1}
.nyx-price .cur{font-size:var(--nyx-fs-sm);color:var(--nyx-text-muted);font-family:var(--nyx-font-body)}
.nyx-price .per{font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted);font-family:var(--nyx-font-body);align-self:flex-end}
.nyx-price.lg .amt{font-size:var(--nyx-fs-3xl)}
.nyx-price del{color:var(--nyx-text-muted);font-weight:400;font-size:.7em}
/* ============================================================
16. FORMS+ (v1.0) — combobox, multi-select, phone, date picker
============================================================ */
/* combobox / autocomplete */
.nyx-combobox{position:relative}
.nyx-combobox-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:120;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);box-shadow:var(--nyx-shadow-lg);padding:6px;max-height:240px;overflow:auto;display:none}
.nyx-combobox.open .nyx-combobox-menu{display:block;animation:nyx-fade .15s var(--nyx-ease)}
.nyx-combobox-opt{padding:8px 10px;border-radius:var(--nyx-radius-sm);cursor:pointer;font-size:var(--nyx-fs-sm);color:var(--nyx-text-muted)}
.nyx-combobox-opt:hover,.nyx-combobox-opt.active{background:color-mix(in srgb,var(--nyx-accent) 14%,transparent);color:var(--nyx-text)}
.nyx-combobox-opt[hidden]{display:none}
.nyx-combobox-empty{padding:8px 10px;color:var(--nyx-text-muted);font-size:var(--nyx-fs-sm);display:none}
.nyx-combobox.empty .nyx-combobox-empty{display:block}
/* multi-select */
.nyx-multiselect{position:relative}
.nyx-multiselect-control{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:42px;padding:6px;background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);cursor:text;transition:all .2s var(--nyx-ease)}
.nyx-multiselect.open .nyx-multiselect-control{border-color:var(--nyx-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-accent) 22%,transparent)}
.nyx-multiselect-control input{flex:1;min-width:70px;border:none;background:transparent;outline:none;color:var(--nyx-text);font-size:var(--nyx-fs-sm);padding:4px}
.nyx-multiselect-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:120;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);box-shadow:var(--nyx-shadow-lg);padding:6px;max-height:220px;overflow:auto;display:none}
.nyx-multiselect.open .nyx-multiselect-menu{display:block;animation:nyx-fade .15s var(--nyx-ease)}
.nyx-multiselect-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--nyx-radius-sm);cursor:pointer;font-size:var(--nyx-fs-sm);color:var(--nyx-text-muted)}
.nyx-multiselect-opt:hover{background:var(--nyx-glass);color:var(--nyx-text)}
.nyx-multiselect-opt.selected{color:var(--nyx-text)}
.nyx-multiselect-opt.selected::after{content:"✓";margin-inline-start:auto;color:var(--nyx-accent);font-weight:700}
.nyx-multiselect-opt[hidden]{display:none}
/* phone input — dial-code + number */
.nyx-phone{display:flex;align-items:stretch;background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);transition:all .2s var(--nyx-ease)}
.nyx-phone:focus-within{border-color:var(--nyx-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--nyx-accent) 22%,transparent)}
.nyx-phone select{border:0;background:var(--nyx-surface-2);color:var(--nyx-text);font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-sm);padding:0 24px 0 10px;outline:none;cursor:pointer;border-inline-end:1px solid var(--nyx-border);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;border-start-start-radius:calc(var(--nyx-radius) - 1px);border-end-start-radius:calc(var(--nyx-radius) - 1px)}
.nyx-phone input{flex:1;border:0;background:transparent;outline:none;color:var(--nyx-text);font-size:var(--nyx-fs-sm);padding:10px 14px;border-start-end-radius:calc(var(--nyx-radius) - 1px);border-end-end-radius:calc(var(--nyx-radius) - 1px)}
/* date picker — input + calendar popover */
.nyx-datepicker{position:relative;display:inline-block}
.nyx-datepicker-pop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:130;display:none}
.nyx-datepicker.open .nyx-datepicker-pop{display:block;animation:nyx-fade .15s var(--nyx-ease)}
.nyx-calendar-head button{background:none;border:0;color:var(--nyx-text-muted);cursor:pointer;font-size:16px;padding:2px 9px;border-radius:var(--nyx-radius-sm);line-height:1}
.nyx-calendar-head button:hover{background:var(--nyx-glass);color:var(--nyx-text)}
.nyx-calendar-head .nyx-calendar-sel{display:flex;align-items:center;gap:4px}
.nyx-calendar-head select{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid transparent;color:var(--nyx-text);font-family:var(--nyx-font-display);font-weight:700;font-size:var(--nyx-fs-sm);cursor:pointer;padding-block:3px;padding-inline:8px 22px;border-radius:var(--nyx-radius-sm);transition:background-color .15s var(--nyx-ease),border-color .15s var(--nyx-ease);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b90a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center}
.nyx-calendar-head select:hover{background-color:var(--nyx-glass)}
.nyx-calendar-head select:focus-visible{outline:none;border-color:var(--nyx-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nyx-accent) 25%,transparent)}
.nyx-calendar-head select option{background:var(--nyx-surface);color:var(--nyx-text);font-weight:500}
[dir="rtl"] .nyx-calendar-head select{background-position:left 7px center}
.nyx-calendar-grid .day.event{position:relative}
.nyx-calendar-grid .day.event::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--nyx-accent-2)}
/* ============================================================
17. OVERLAYS+ (v1.0) — sheet, FAB, back-to-top, top progress, context menu
============================================================ */
/* bottom sheet */
.nyx-sheet{position:fixed;inset-inline:0;bottom:0;z-index:160;background:var(--nyx-surface);border-top:1px solid var(--nyx-border);border-start-start-radius:var(--nyx-radius-xl);border-start-end-radius:var(--nyx-radius-xl);box-shadow:var(--nyx-shadow-lg);padding:var(--nyx-s5);max-height:85vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s var(--nyx-ease)}
.nyx-sheet.open{transform:none}
.nyx-sheet .nyx-sheet-grip{width:40px;height:4px;border-radius:var(--nyx-radius-full);background:var(--nyx-border);margin:0 auto var(--nyx-s4)}
/* floating action button + speed dial */
.nyx-fab{position:fixed;inset-inline-end:var(--nyx-s5);bottom:var(--nyx-s5);z-index:140}
.nyx-fab-btn{width:56px;height:56px;border-radius:var(--nyx-radius-full);border:0;cursor:pointer;background:linear-gradient(120deg,var(--nyx-accent),var(--nyx-accent-2));color:#fff;font-size:24px;box-shadow:var(--nyx-glow),var(--nyx-shadow-lg);display:grid;place-items:center;transition:transform .25s var(--nyx-ease)}
.nyx-fab.open .nyx-fab-btn{transform:rotate(45deg)}
.nyx-fab-actions{position:absolute;bottom:68px;inset-inline-end:6px;display:flex;flex-direction:column;gap:var(--nyx-s3);align-items:flex-end}
.nyx-fab-actions > *{opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;transition:all .2s var(--nyx-ease)}
.nyx-fab.open .nyx-fab-actions > *{opacity:1;transform:none;pointer-events:auto}
.nyx-fab-action{display:inline-flex;align-items:center;gap:var(--nyx-s2)}
.nyx-fab-mini{width:44px;height:44px;border-radius:var(--nyx-radius-full);border:1px solid var(--nyx-border);background:var(--nyx-surface-2);color:var(--nyx-text);display:grid;place-items:center;cursor:pointer;box-shadow:var(--nyx-shadow);font-size:18px}
.nyx-fab-label{background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-sm);padding:4px 8px;font-size:var(--nyx-fs-xs);box-shadow:var(--nyx-shadow-sm)}
/* back-to-top */
.nyx-to-top{position:fixed;inset-inline-end:var(--nyx-s5);bottom:var(--nyx-s5);z-index:130;width:44px;height:44px;border-radius:var(--nyx-radius-full);border:1px solid var(--nyx-border);background:var(--nyx-surface-2);color:var(--nyx-text);cursor:pointer;display:grid;place-items:center;font-size:18px;box-shadow:var(--nyx-shadow-lg);opacity:0;transform:translateY(12px);pointer-events:none;transition:all .25s var(--nyx-ease)}
.nyx-to-top.show{opacity:1;transform:none;pointer-events:auto}
/* top page-load progress bar */
.nyx-topbar{position:fixed;top:0;inset-inline:0;height:3px;z-index:400;pointer-events:none;background:transparent}
.nyx-topbar > span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--nyx-accent),var(--nyx-accent-2));box-shadow:var(--nyx-glow);transition:width .3s var(--nyx-ease),opacity .4s var(--nyx-ease)}
/* context menu */
.nyx-context-menu{position:fixed;z-index:200;min-width:184px;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);box-shadow:var(--nyx-shadow-lg);padding:6px;display:none}
.nyx-context-menu.open{display:block;animation:nyx-fade .12s var(--nyx-ease)}
/* ============================================================
18. COMMERCE (v1.0) — product, cart, order, coupon, payment, address
============================================================ */
.nyx-product{display:flex;flex-direction:column;background:var(--nyx-surface);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);overflow:hidden;transition:all .2s var(--nyx-ease)}
.nyx-product:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--nyx-accent) 50%,transparent);box-shadow:var(--nyx-glow),var(--nyx-shadow-lg)}
.nyx-product-media{aspect-ratio:4/3;background:var(--nyx-surface-2);display:grid;place-items:center;font-size:42px;position:relative}
.nyx-product-tag{position:absolute;top:10px;inset-inline-start:10px}
.nyx-product-body{padding:var(--nyx-s4);display:flex;flex-direction:column;gap:6px}
.nyx-product-title{font-weight:600;font-size:var(--nyx-fs-sm)}
.nyx-product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--nyx-s2)}
.nyx-cart-item{display:flex;align-items:center;gap:var(--nyx-s3);padding:var(--nyx-s3) 0;border-bottom:1px solid var(--nyx-border)}
.nyx-cart-item:last-child{border-bottom:0}
.nyx-cart-thumb{width:54px;height:54px;border-radius:var(--nyx-radius);background:var(--nyx-surface-2);display:grid;place-items:center;font-size:24px;flex-shrink:0}
.nyx-cart-meta{flex:1;min-width:0}
.nyx-order{border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);background:var(--nyx-surface);padding:var(--nyx-s5)}
.nyx-order-row{display:flex;justify-content:space-between;font-size:var(--nyx-fs-sm);padding:6px 0;color:var(--nyx-text-muted)}
.nyx-order-row.total{border-top:1px solid var(--nyx-border);margin-top:var(--nyx-s2);padding-top:var(--nyx-s3);color:var(--nyx-text);font-weight:700;font-size:var(--nyx-fs-base)}
.nyx-coupon{display:flex;gap:var(--nyx-s2)}
.nyx-coupon input{flex:1}
.nyx-pay{display:flex;flex-direction:column;gap:var(--nyx-s2)}
.nyx-pay-opt{position:relative;display:flex;align-items:center;gap:var(--nyx-s3);padding:12px 14px;border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);cursor:pointer;font-size:var(--nyx-fs-sm);transition:all .15s var(--nyx-ease)}
.nyx-pay-opt:hover{border-color:color-mix(in srgb,var(--nyx-accent) 40%,transparent)}
.nyx-pay-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.nyx-pay-opt:has(input:checked){border-color:var(--nyx-accent);background:color-mix(in srgb,var(--nyx-accent) 8%,transparent);box-shadow:var(--nyx-glow)}
.nyx-pay-icon{font-size:20px}
.nyx-pay-opt .nyx-pay-check{margin-inline-start:auto;color:var(--nyx-accent);opacity:0}
.nyx-pay-opt:has(input:checked) .nyx-pay-check{opacity:1}
.nyx-address{border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);padding:var(--nyx-s4);display:flex;gap:var(--nyx-s3);font-size:var(--nyx-fs-sm)}
.nyx-address-icon{font-size:20px;color:var(--nyx-accent)}
/* ============================================================
19. REGIONAL+ (v1.0) — countdown, zakat, qibla, delivery tracking
============================================================ */
/* countdown (Iftar / Suhoor / sale) */
.nyx-countdown{display:inline-flex;gap:var(--nyx-s2);align-items:center}
.nyx-countdown .unit{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;padding:10px;border:1px solid var(--nyx-border);border-radius:var(--nyx-radius);background:var(--nyx-surface)}
.nyx-countdown .unit b{font-family:var(--nyx-font-mono);font-size:var(--nyx-fs-xl);font-weight:700;line-height:1;color:var(--nyx-text)}
.nyx-countdown .unit span{font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted)}
.nyx-countdown .sep{font-size:var(--nyx-fs-lg);color:var(--nyx-text-muted)}
/* zakat / quick calculator */
.nyx-zakat{display:flex;flex-direction:column;gap:var(--nyx-s3);border:1px solid var(--nyx-border);border-radius:var(--nyx-radius-lg);background:var(--nyx-surface);padding:var(--nyx-s5);max-width:340px}
.nyx-zakat-out{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--nyx-border);padding-top:var(--nyx-s3)}
.nyx-zakat-out b{font-family:var(--nyx-font-display);font-weight:800;font-size:var(--nyx-fs-2xl);color:var(--nyx-accent-2)}
.nyx-zakat.nyx-below-nisab .nyx-zakat-out b{color:var(--nyx-text-muted)}
.nyx-zakat .nyx-zakat-nisab-note{display:none;font-size:var(--nyx-fs-xs);color:var(--nyx-warning)}
.nyx-zakat.nyx-below-nisab .nyx-zakat-nisab-note{display:block}
/* qibla compass */
.nyx-qibla{width:128px;height:128px;border-radius:50%;border:2px solid var(--nyx-border);position:relative;display:grid;place-items:center;background:radial-gradient(circle,var(--nyx-surface-2),var(--nyx-surface));box-shadow:inset 0 0 24px rgba(0,0,0,.3)}
.nyx-qibla .needle{position:absolute;bottom:50%;width:4px;height:48px;border-radius:2px;background:linear-gradient(var(--nyx-accent),transparent);transform-origin:bottom center;box-shadow:var(--nyx-glow);transition:transform .4s var(--nyx-ease)}
.nyx-qibla .kaaba{position:absolute;font-size:16px;transform:translateY(-44px)}
.nyx-qibla .dir{position:absolute;font-size:10px;font-family:var(--nyx-font-mono);color:var(--nyx-text-muted)}
.nyx-qibla .dir.n{top:5px}.nyx-qibla .dir.s{bottom:5px}.nyx-qibla .dir.e{inset-inline-end:7px}.nyx-qibla .dir.w{inset-inline-start:7px}
.nyx-qibla .hub{width:10px;height:10px;border-radius:50%;background:var(--nyx-accent);box-shadow:var(--nyx-glow)}
/* delivery tracking (vertical) */
.nyx-delivery{display:flex;flex-direction:column}
.nyx-delivery .nyx-dstep{display:flex;gap:var(--nyx-s3);position:relative;padding-bottom:var(--nyx-s5)}
.nyx-delivery .nyx-dstep:last-child{padding-bottom:0}
.nyx-delivery .nyx-dstep::before{content:"";position:absolute;inset-inline-start:13px;top:26px;bottom:0;width:2px;background:var(--nyx-border)}
.nyx-delivery .nyx-dstep:last-child::before{display:none}
.nyx-delivery .nyx-ddot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--nyx-surface-2);border:1px solid var(--nyx-border);font-size:13px;flex-shrink:0;z-index:1}
.nyx-delivery .nyx-dstep.done .nyx-ddot{background:var(--nyx-accent-2);border-color:var(--nyx-accent-2);color:#04130f}
.nyx-delivery .nyx-dstep.done::before{background:var(--nyx-accent-2)}
.nyx-delivery .nyx-dstep.current .nyx-ddot{background:var(--nyx-accent);border-color:var(--nyx-accent);color:#fff;box-shadow:var(--nyx-glow)}
.nyx-delivery .nyx-dmeta{padding-top:3px}
.nyx-delivery .nyx-dtitle{font-size:var(--nyx-fs-sm);font-weight:600}
.nyx-delivery .nyx-dtime{font-size:var(--nyx-fs-xs);color:var(--nyx-text-muted);font-family:var(--nyx-font-mono)}
/* ============================================================
20. BACKGROUNDS (v1.0) — ambient gradient, grid & interactive layers
============================================================ */
/* Each paints a decorative ::before/::after behind its content in an
isolated stacking context (z-index:-1) — drop a class on any section,
card or band and place content inside; no child markup needed. Every
tint derives from --nyx-accent via color-mix(), so they retheme with
the accent + data-accent. Animated variants are neutralised by the
global prefers-reduced-motion guard at the end of this file. Size the
tiled patterns with --nyx-bg-cell. */
/* — grid lines (the hero pattern, made reusable) — */
.nyx-bg-grid{position:relative;overflow:hidden;isolation:isolate}
.nyx-bg-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:linear-gradient(var(--nyx-border) 1px,transparent 1px),linear-gradient(90deg,var(--nyx-border) 1px,transparent 1px);
background-size:var(--nyx-bg-cell,56px) var(--nyx-bg-cell,56px);opacity:.4;
-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 30%,#000,transparent 78%);
mask-image:radial-gradient(ellipse 75% 65% at 50% 30%,#000,transparent 78%)}
/* — dot grid (softer cousin of the grid) — */
.nyx-bg-dots{position:relative;overflow:hidden;isolation:isolate}
.nyx-bg-dots::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:radial-gradient(color-mix(in srgb,var(--nyx-border) 80%,var(--nyx-text-muted)) 1.4px,transparent 1.5px);
background-size:var(--nyx-bg-cell,24px) var(--nyx-bg-cell,24px);opacity:.7;
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 80%);
mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 80%)}
/* — static mesh gradient (layered accent blobs) — */
.nyx-bg-mesh{position:relative;overflow:hidden;isolation:isolate}
.nyx-bg-mesh::before{content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;filter:blur(14px);
background:
radial-gradient(38% 48% at 15% 18%,color-mix(in srgb,var(--nyx-accent) 42%,transparent),transparent 70%),
radial-gradient(44% 54% at 85% 22%,color-mix(in srgb,var(--nyx-accent-2) 38%,transparent),transparent 72%),
radial-gradient(50% 58% at 75% 88%,color-mix(in srgb,var(--nyx-accent) 30%,transparent),transparent 74%),
radial-gradient(40% 50% at 25% 92%,color-mix(in srgb,var(--nyx-accent-2) 24%,transparent),transparent 72%)}
/* — animated gradient surface (the panel version of gradient-text) — */
.nyx-bg-gradient{position:relative;overflow:hidden;isolation:isolate}
.nyx-bg-gradient::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:200% 200%;
background-image:linear-gradient(120deg,
color-mix(in srgb,var(--nyx-accent) 55%,transparent),
color-mix(in srgb,var(--nyx-accent-2) 55%,transparent),
color-mix(in srgb,var(--nyx-accent) 55%,transparent))}
.nyx-bg-gradient.animated::before{animation:nyx-bg-pan 9s var(--nyx-ease) infinite}
@keyframes nyx-bg-pan{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* — conic light beams (lighthouse rays); add .animated to sweep — */
.nyx-bg-beams{position:relative;overflow:hidden;isolation:isolate}
.nyx-bg-beams::before{content:"";position:absolute;left:50%;top:0;width:160%;aspect-ratio:1/1;transform:translateX(-50%);transform-origin:50% 0;z-index:-1;pointer-events:none;filter:blur(8px);
background:conic-gradient(from 180deg at 50% 0,
transparent 4deg,color-mix(in srgb,var(--nyx-accent) 28%,transparent) 12deg,transparent 22deg,
transparent 44deg,color-mix(in srgb,var(--nyx-accent-2) 24%,transparent) 54deg,transparent 66deg,
transparent 294deg,color-mix(in srgb,var(--nyx-accent-2) 24%,transparent) 306deg,transparent 316deg,
transparent 338deg,color-mix(in srgb,var(--nyx-accent) 28%,transparent) 348deg,transparent 356deg);
-webkit-mask-image:radial-gradient(ellipse 65% 75% at 50% 0,#000,transparent 72%);
mask-image:radial-gradient(ellipse 65% 75% at 50% 0,#000,transparent 72%)}
.nyx-bg-beams.animated::before{animation:nyx-bg-sweep 18s linear infinite}
@keyframes nyx-bg-sweep{to{transform:translateX(-50%) rotate(360deg)}}
/* — film grain / noise (use alone, or stack on another bg via ::after) — */
.nyx-bg-noise{position:relative;isolation:isolate}
.nyx-bg-noise::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-size:160px 160px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='nyxn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nyxn)'/%3E%3C/svg%3E")}
/* — interactive hover-lit squares (needs nyx.js to set --nyx-mx/--nyx-my) — */
.nyx-bg-squares{position:relative;overflow:hidden;isolation:isolate}
.nyx-bg-squares::before,.nyx-bg-squares::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:linear-gradient(var(--nyx-border) 1px,transparent 1px),linear-gradient(90deg,var(--nyx-border) 1px,transparent 1px);
background-size:var(--nyx-bg-cell,48px) var(--nyx-bg-cell,48px)}
.nyx-bg-squares::before{opacity:.3}
.nyx-bg-squares::after{opacity:.9;
background-image:linear-gradient(color-mix(in srgb,var(--nyx-accent) 85%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--nyx-accent) 85%,transparent) 1px,transparent 1px);
-webkit-mask-image:radial-gradient(circle 170px at var(--nyx-mx,-300px) var(--nyx-my,-300px),#000,transparent 70%);
mask-image:radial-gradient(circle 170px at var(--nyx-mx,-300px) var(--nyx-my,-300px),#000,transparent 70%)}
/* — drifting starfield — */
.nyx-bg-stars{position:relative;overflow:hidden;isolation:isolate}
.nyx-bg-stars::before,.nyx-bg-stars::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:repeat}
.nyx-bg-stars::before{opacity:.9;background-size:280px 280px;animation:nyx-bg-drift 70s linear infinite;
background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff 0,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 70% 62%,#fff 0,#fff 60%,transparent),radial-gradient(1px 1px at 42% 82%,#fff 0,#fff 60%,transparent),radial-gradient(1px 1px at 88% 16%,#fff 0,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 55% 46%,#fff 0,#fff 60%,transparent),radial-gradient(1px 1px at 8% 68%,#fff 0,#fff 60%,transparent),radial-gradient(1px 1px at 33% 10%,#fff 0,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 92% 52%,#fff 0,#fff 60%,transparent)}
.nyx-bg-stars::after{opacity:.8;background-size:160px 160px;animation:nyx-bg-drift 110s linear infinite reverse;
background-image:radial-gradient(1.5px 1.5px at 12% 24%,var(--nyx-accent) 0,var(--nyx-accent) 60%,transparent),radial-gradient(1.5px 1.5px at 64% 38%,var(--nyx-accent-2) 0,var(--nyx-accent-2) 60%,transparent),radial-gradient(1px 1px at 36% 70%,#fff 0,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 82% 84%,var(--nyx-accent) 0,var(--nyx-accent) 60%,transparent),radial-gradient(1px 1px at 50% 8%,#fff 0,#fff 60%,transparent)}
@keyframes nyx-bg-drift{to{background-position:0 -1120px}}
/* ============================================================
21. CHARTS (v1.0) — zero-dep CSS + SVG data viz
============================================================ */
/* Bars are pure CSS — set --nyx-bar:0–100 per bar, add data-label/data-val.
Line & area charts style an author-supplied