:root{
  /* --- Typography --- */
  --aura-font-display: 'Sora', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --aura-font-body: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --aura-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* --- Color system --- */
  --aura-bg: #fafbfc;
  --aura-bg-alt: #f3f4f6;
  --aura-surface: rgba(255,255,255,0.85);
  --aura-surface-solid: #ffffff;
  --aura-elevated: rgba(255,255,255,0.95);
  --aura-border: rgba(15,23,42,0.08);
  --aura-border-strong: rgba(15,23,42,0.12);

  --aura-text: #0f172a;
  --aura-text-dim: #475569;
  --aura-text-muted: #64748b;
  --aura-text-subtle: #94a3b8;

  /* Accent system - Refined blue/teal */
  --aura-accent: #2563eb;
  --aura-accent-2: #0ea5e9;
  --aura-accent-3: #14b8a6;
  --aura-accent-gradient: linear-gradient(135deg, #2563eb 0%, #0ea5e9 55%, #14b8a6 100%);
  --aura-accent-soft: rgba(37,99,235,0.10);
  --aura-accent-muted: rgba(37,99,235,0.06);

  /* Semantic colors */
  --aura-success: #10b981;
  --aura-success-soft: rgba(16,185,129,0.10);
  --aura-warning: #f59e0b;
  --aura-warning-soft: rgba(245,158,11,0.10);
  --aura-error: #ef4444;
  --aura-error-soft: rgba(239,68,68,0.10);
  --aura-info: #3b82f6;
  --aura-info-soft: rgba(59,130,246,0.10);

  /* --- Radii system --- */
  --aura-radius-xs: 8px;
  --aura-radius-sm: 12px;
  --aura-radius-md: 16px;
  --aura-radius-lg: 20px;
  --aura-radius-xl: 24px;
  --aura-radius-2xl: 32px;
  --aura-radius-full: 9999px;

  /* --- Shadows with improved depth --- */
  --aura-shadow-xs: 0 1px 3px rgba(15,23,42,0.08);
  --aura-shadow-sm: 0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.03);
  --aura-shadow-md: 0 8px 24px rgba(15,23,42,0.08), 0 4px 8px rgba(15,23,42,0.04);
  --aura-shadow-lg: 0 16px 48px rgba(15,23,42,0.12), 0 8px 16px rgba(15,23,42,0.06);
  --aura-shadow-xl: 0 24px 64px rgba(15,23,42,0.16), 0 12px 24px rgba(15,23,42,0.08);
  
  /* Colored shadows */
  --aura-shadow-accent: 0 12px 32px rgba(37,99,235,0.18), 0 4px 12px rgba(37,99,235,0.08);
  --aura-shadow-success: 0 8px 24px rgba(16,185,129,0.16);
  --aura-shadow-warning: 0 8px 24px rgba(245,158,11,0.16);
  --aura-shadow-error: 0 8px 24px rgba(239,68,68,0.16);

  /* --- Blur/glass effects --- */
  --aura-glass: blur(24px) saturate(180%);
  --aura-glass-heavy: blur(32px) saturate(200%);

  /* --- Motion system --- */
  --aura-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --aura-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --aura-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --aura-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --aura-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  --aura-duration-fast: 150ms;
  --aura-duration-base: 250ms;
  --aura-duration-slow: 400ms;
  --aura-duration-slower: 600ms;

  /* --- Spacing scale (8px base) --- */
  --aura-0: 0px;
  --aura-1: 4px;
  --aura-2: 8px;
  --aura-3: 12px;
  --aura-4: 16px;
  --aura-5: 20px;
  --aura-6: 24px;
  --aura-7: 28px;
  --aura-8: 32px;
  --aura-10: 40px;
  --aura-12: 48px;
  --aura-14: 56px;
  --aura-16: 64px;
  --aura-20: 80px;
  --aura-24: 96px;

  /* --- Z-index system --- */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal-backdrop: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;
}

/* --- Dark theme with improved contrast --- */
[data-aura-theme="dark"]{
  --aura-bg: #1D2327;
  --aura-bg-alt: #22292f;
  --aura-surface: rgba(35,41,46,0.92);
  --aura-surface-solid: #222a30;
  --aura-elevated: rgba(42,50,56,0.95);
  --aura-border: rgba(255,255,255,0.16);
  --aura-border-strong: rgba(255,255,255,0.24);

  --aura-text: #f8fafc;
  --aura-text-dim: #e2e8f0;
  --aura-text-muted: #cbd5e1;
  --aura-text-subtle: #94a3b8;

  --aura-accent: #60a5fa;
  --aura-accent-2: #38bdf8;
  --aura-accent-3: #2dd4bf;
  --aura-accent-gradient: linear-gradient(135deg, #60a5fa 0%, #38bdf8 55%, #2dd4bf 100%);
  --aura-accent-soft: rgba(96,165,250,0.26);
  --aura-accent-muted: rgba(96,165,250,0.16);

  --aura-success-soft: rgba(16,185,129,0.16);
  --aura-warning-soft: rgba(245,158,11,0.16);
  --aura-error-soft: rgba(239,68,68,0.16);
  --aura-info-soft: rgba(59,130,246,0.16);

  --aura-shadow-xs: 0 1px 3px rgba(0,0,0,0.24);
  --aura-shadow-sm: 0 4px 12px rgba(0,0,0,0.32), 0 2px 4px rgba(0,0,0,0.16);
  --aura-shadow-md: 0 8px 24px rgba(0,0,0,0.40), 0 4px 8px rgba(0,0,0,0.20);
  --aura-shadow-lg: 0 16px 48px rgba(0,0,0,0.48), 0 8px 16px rgba(0,0,0,0.24);
  --aura-shadow-xl: 0 24px 64px rgba(0,0,0,0.56), 0 12px 24px rgba(0,0,0,0.28);

  --aura-shadow-accent: 0 12px 32px rgba(37,99,235,0.32), 0 4px 12px rgba(37,99,235,0.16);
}

/* --- Responsive breakpoints (for reference in JS) --- */
/* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */
/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

html,body{height:100%}

body{
  margin:0;
  font-family:var(--aura-font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--aura-text);
  background:var(--aura-bg);
  font-weight:400;
}

/* --- Typography scale --- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--aura-font-display);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin:0;
}

h1{font-size:clamp(2.25rem, 5vw, 3.75rem)} /* 36-60px */
h2{font-size:clamp(1.875rem, 4vw, 3rem)} /* 30-48px */
h3{font-size:clamp(1.5rem, 3vw, 2.25rem)} /* 24-36px */
h4{font-size:clamp(1.25rem, 2.5vw, 1.875rem)} /* 20-30px */
h5{font-size:clamp(1.125rem, 2vw, 1.5rem)} /* 18-24px */
h6{font-size:1.125rem} /* 18px */

p{margin:0 0 1em 0}
p:last-child{margin-bottom:0}

a{
  color:var(--aura-accent);
  text-decoration:none;
  transition:color var(--aura-duration-fast) var(--aura-ease-out);
}
a:hover{color:var(--aura-accent-2)}
a:focus-visible{
  outline:none;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}

strong,b{font-weight:700}
em,i{font-style:italic}

code,pre,kbd,samp{
  font-family:var(--aura-font-mono);
  font-size:0.9em;
}

code{
  background:var(--aura-accent-muted);
  padding:0.2em 0.4em;
  border-radius:var(--aura-radius-xs);
  border:1px solid var(--aura-border);
}

pre{
  background:var(--aura-surface-solid);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-md);
  padding:var(--aura-4);
  overflow-x:auto;
  line-height:1.5;
}

pre code{
  background:none;
  padding:0;
  border:none;
  font-size:0.875em;
}

kbd{
  background:var(--aura-surface-solid);
  border:1px solid var(--aura-border-strong);
  border-radius:var(--aura-radius-xs);
  padding:0.15em 0.4em;
  font-size:0.85em;
  box-shadow:0 2px 4px rgba(0,0,0,0.06);
}

blockquote{
  border-left:4px solid var(--aura-accent);
  padding-left:var(--aura-4);
  margin:var(--aura-6) 0;
  font-style:italic;
  color:var(--aura-text-dim);
}

hr{
  border:none;
  height:1px;
  background:var(--aura-border);
  margin:var(--aura-8) 0;
}

/* --- Selection --- */
::selection{
  background:rgba(37,99,235,0.20);
  color:var(--aura-text);
}

/* --- Lists --- */
ul,ol{
  padding-left:var(--aura-6);
  margin:var(--aura-4) 0;
}
li{margin:var(--aura-2) 0}
ul ul,ol ol,ul ol,ol ul{margin:var(--aura-2) 0}

/* --- Images & Media --- */
img,svg,video,canvas,audio,iframe,embed,object{
  display:block;
  max-width:100%;
  height:auto;
}

/* --- Tables --- */
table{
  width:100%;
  border-collapse:collapse;
}

/* --- Forms --- */
button,input,select,textarea{
  font:inherit;
  color:inherit;
}

button{cursor:pointer}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

/* --- Layout containers --- */
.aura-wrap{
  padding:clamp(1.5rem, 5vw, 4rem);
  min-height:100vh;
  overflow-x:hidden;
}

.aura-container{
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--aura-4);
  padding-right:var(--aura-4);
}

.aura-container-narrow{
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--aura-4);
  padding-right:var(--aura-4);
}

/* --- Atmospheric background --- */
.aura-backdrop{
  position:fixed;
  inset:-50vh -50vw;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(37,99,235,0.16), transparent 50%),
    radial-gradient(ellipse at 85% 18%, rgba(14,165,233,0.12), transparent 55%),
    radial-gradient(ellipse at 50% 88%, rgba(20,184,166,0.12), transparent 60%);
  filter:blur(80px);
  opacity:0.7;
  animation:aura-drift 25s var(--aura-ease-in-out) infinite alternate;
}

[data-aura-theme="dark"] .aura-backdrop{
  background:
    radial-gradient(ellipse at 18% 20%, rgba(37,99,235,0.12), transparent 50%),
    radial-gradient(ellipse at 85% 18%, rgba(14,165,233,0.10), transparent 55%),
    radial-gradient(ellipse at 50% 88%, rgba(20,184,166,0.08), transparent 60%);
  opacity:0.5;
}

@keyframes aura-drift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-3%,4%) scale(1.05)}
  100%{transform:translate(2%,-3%) scale(0.98)}
}

/* --- Focus management --- */
:focus{outline:none}

:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--aura-accent-soft);
  border-color:var(--aura-accent);
}

/* Better focus for interactive elements */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible{
  box-shadow:0 0 0 4px var(--aura-accent-soft);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  border-color:var(--aura-accent);
  box-shadow:0 0 0 4px var(--aura-accent-soft);
}

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

/* --- Print styles --- */
@media print{
  .aura-backdrop{display:none}
  *{box-shadow:none !important}
}
/* ---------------- Layout Utilities ---------------- */

/* Flexbox */
.u-flex{display:flex}
.u-inline-flex{display:inline-flex}
.u-flex-col{flex-direction:column}
.u-flex-row{flex-direction:row}
.u-flex-wrap{flex-wrap:wrap}
.u-flex-nowrap{flex-wrap:nowrap}

/* Alignment */
.u-items-start{align-items:flex-start}
.u-items-center{align-items:center}
.u-items-end{align-items:flex-end}
.u-items-baseline{align-items:baseline}
.u-items-stretch{align-items:stretch}

.u-justify-start{justify-content:flex-start}
.u-justify-center{justify-content:center}
.u-justify-end{justify-content:flex-end}
.u-justify-between{justify-content:space-between}
.u-justify-around{justify-content:space-around}
.u-justify-evenly{justify-content:space-evenly}

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

/* Gap */
.u-gap-0{gap:var(--aura-0)}
.u-gap-1{gap:var(--aura-1)}
.u-gap-2{gap:var(--aura-2)}
.u-gap-3{gap:var(--aura-3)}
.u-gap-4{gap:var(--aura-4)}
.u-gap-5{gap:var(--aura-5)}
.u-gap-6{gap:var(--aura-6)}
.u-gap-8{gap:var(--aura-8)}
.u-gap-10{gap:var(--aura-10)}
.u-gap-12{gap:var(--aura-12)}

/* Grid */
.u-grid{display:grid}
.u-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.u-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.u-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.u-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.u-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Display */
.u-block{display:block}
.u-inline{display:inline}
.u-inline-block{display:inline-block}
.u-hidden{display:none}

/* Position */
.u-relative{position:relative}
.u-absolute{position:absolute}
.u-fixed{position:fixed}
.u-sticky{position:sticky}

/* ---------------- Spacing Utilities ---------------- */

/* Padding */
.u-p-0{padding:var(--aura-0)}
.u-p-1{padding:var(--aura-1)}
.u-p-2{padding:var(--aura-2)}
.u-p-3{padding:var(--aura-3)}
.u-p-4{padding:var(--aura-4)}
.u-p-5{padding:var(--aura-5)}
.u-p-6{padding:var(--aura-6)}
.u-p-8{padding:var(--aura-8)}
.u-p-10{padding:var(--aura-10)}

/* Padding X */
.u-px-0{padding-left:var(--aura-0);padding-right:var(--aura-0)}
.u-px-1{padding-left:var(--aura-1);padding-right:var(--aura-1)}
.u-px-2{padding-left:var(--aura-2);padding-right:var(--aura-2)}
.u-px-3{padding-left:var(--aura-3);padding-right:var(--aura-3)}
.u-px-4{padding-left:var(--aura-4);padding-right:var(--aura-4)}
.u-px-5{padding-left:var(--aura-5);padding-right:var(--aura-5)}
.u-px-6{padding-left:var(--aura-6);padding-right:var(--aura-6)}
.u-px-8{padding-left:var(--aura-8);padding-right:var(--aura-8)}

/* Padding Y */
.u-py-0{padding-top:var(--aura-0);padding-bottom:var(--aura-0)}
.u-py-1{padding-top:var(--aura-1);padding-bottom:var(--aura-1)}
.u-py-2{padding-top:var(--aura-2);padding-bottom:var(--aura-2)}
.u-py-3{padding-top:var(--aura-3);padding-bottom:var(--aura-3)}
.u-py-4{padding-top:var(--aura-4);padding-bottom:var(--aura-4)}
.u-py-5{padding-top:var(--aura-5);padding-bottom:var(--aura-5)}
.u-py-6{padding-top:var(--aura-6);padding-bottom:var(--aura-6)}
.u-py-8{padding-top:var(--aura-8);padding-bottom:var(--aura-8)}

/* Margin */
.u-m-0{margin:var(--aura-0)}
.u-m-1{margin:var(--aura-1)}
.u-m-2{margin:var(--aura-2)}
.u-m-3{margin:var(--aura-3)}
.u-m-4{margin:var(--aura-4)}
.u-m-6{margin:var(--aura-6)}
.u-m-8{margin:var(--aura-8)}
.u-m-auto{margin:auto}

/* Margin Top */
.u-mt-0{margin-top:var(--aura-0)}
.u-mt-1{margin-top:var(--aura-1)}
.u-mt-2{margin-top:var(--aura-2)}
.u-mt-3{margin-top:var(--aura-3)}
.u-mt-4{margin-top:var(--aura-4)}
.u-mt-5{margin-top:var(--aura-5)}
.u-mt-6{margin-top:var(--aura-6)}
.u-mt-8{margin-top:var(--aura-8)}
.u-mt-10{margin-top:var(--aura-10)}
.u-mt-12{margin-top:var(--aura-12)}

/* Margin Bottom */
.u-mb-0{margin-bottom:var(--aura-0)}
.u-mb-1{margin-bottom:var(--aura-1)}
.u-mb-2{margin-bottom:var(--aura-2)}
.u-mb-3{margin-bottom:var(--aura-3)}
.u-mb-4{margin-bottom:var(--aura-4)}
.u-mb-5{margin-bottom:var(--aura-5)}
.u-mb-6{margin-bottom:var(--aura-6)}
.u-mb-8{margin-bottom:var(--aura-8)}
.u-mb-10{margin-bottom:var(--aura-10)}
.u-mb-12{margin-bottom:var(--aura-12)}

/* Margin X */
.u-mx-auto{margin-left:auto;margin-right:auto}
.u-mx-0{margin-left:var(--aura-0);margin-right:var(--aura-0)}
.u-mx-2{margin-left:var(--aura-2);margin-right:var(--aura-2)}
.u-mx-4{margin-left:var(--aura-4);margin-right:var(--aura-4)}
.u-mx-6{margin-left:var(--aura-6);margin-right:var(--aura-6)}

/* Margin Y */
.u-my-0{margin-top:var(--aura-0);margin-bottom:var(--aura-0)}
.u-my-2{margin-top:var(--aura-2);margin-bottom:var(--aura-2)}
.u-my-4{margin-top:var(--aura-4);margin-bottom:var(--aura-4)}
.u-my-6{margin-top:var(--aura-6);margin-bottom:var(--aura-6)}
.u-my-8{margin-top:var(--aura-8);margin-bottom:var(--aura-8)}

/* ---------------- Sizing Utilities ---------------- */
.u-w-full{width:100%}
.u-w-auto{width:auto}
.u-w-fit{width:fit-content}
.u-w-screen{width:100vw}

.u-h-full{height:100%}
.u-h-auto{height:auto}
.u-h-fit{height:fit-content}
.u-h-screen{height:100vh}

.u-max-w-xs{max-width:20rem}
.u-max-w-sm{max-width:24rem}
.u-max-w-md{max-width:28rem}
.u-max-w-lg{max-width:32rem}
.u-max-w-xl{max-width:36rem}
.u-max-w-2xl{max-width:42rem}
.u-max-w-3xl{max-width:48rem}
.u-max-w-4xl{max-width:56rem}
.u-max-w-5xl{max-width:64rem}
.u-max-w-6xl{max-width:72rem}
.u-max-w-7xl{max-width:80rem}
.u-max-w-full{max-width:100%}
.u-max-w-screen{max-width:100vw}

/* ---------------- Typography Utilities ---------------- */
.u-text-xs{font-size:0.75rem;line-height:1rem}
.u-text-sm{font-size:0.875rem;line-height:1.25rem}
.u-text-base{font-size:1rem;line-height:1.5rem}
.u-text-lg{font-size:1.125rem;line-height:1.75rem}
.u-text-xl{font-size:1.25rem;line-height:1.75rem}
.u-text-2xl{font-size:1.5rem;line-height:2rem}
.u-text-3xl{font-size:1.875rem;line-height:2.25rem}
.u-text-4xl{font-size:2.25rem;line-height:2.5rem}

.u-font-normal{font-weight:400}
.u-font-medium{font-weight:500}
.u-font-semibold{font-weight:600}
.u-font-bold{font-weight:700}
.u-font-extrabold{font-weight:800}
.u-font-black{font-weight:900}

.u-font-display{font-family:var(--aura-font-display)}
.u-font-body{font-family:var(--aura-font-body)}
.u-font-mono{font-family:var(--aura-font-mono)}

.u-italic{font-style:italic}
.u-not-italic{font-style:normal}

.u-leading-none{line-height:1}
.u-leading-tight{line-height:1.25}
.u-leading-snug{line-height:1.375}
.u-leading-normal{line-height:1.5}
.u-leading-relaxed{line-height:1.625}
.u-leading-loose{line-height:2}

.u-tracking-tighter{letter-spacing:-0.05em}
.u-tracking-tight{letter-spacing:-0.025em}
.u-tracking-normal{letter-spacing:0}
.u-tracking-wide{letter-spacing:0.025em}
.u-tracking-wider{letter-spacing:0.05em}
.u-tracking-widest{letter-spacing:0.1em}

.u-text-left{text-align:left}
.u-text-center{text-align:center}
.u-text-right{text-align:right}
.u-text-justify{text-align:justify}

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

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

.u-line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.u-line-clamp-3{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------------- Color Utilities ---------------- */
.u-text-primary{color:var(--aura-text)}
.u-text-dim{color:var(--aura-text-dim)}
.u-text-muted{color:var(--aura-text-muted)}
.u-text-subtle{color:var(--aura-text-subtle)}
.u-text-accent{color:var(--aura-accent)}
.u-text-success{color:var(--aura-success)}
.u-text-warning{color:var(--aura-warning)}
.u-text-error{color:var(--aura-error)}
.u-text-info{color:var(--aura-info)}

.u-bg-transparent{background-color:transparent}
.u-bg-primary{background-color:var(--aura-bg)}
.u-bg-surface{background-color:var(--aura-surface-solid)}
.u-bg-accent{background-color:var(--aura-accent)}
.u-bg-success{background-color:var(--aura-success)}
.u-bg-warning{background-color:var(--aura-warning)}
.u-bg-error{background-color:var(--aura-error)}

/* ---------------- Border Utilities ---------------- */
.u-border{border:1px solid var(--aura-border)}
.u-border-0{border:0}
.u-border-t{border-top:1px solid var(--aura-border)}
.u-border-b{border-bottom:1px solid var(--aura-border)}
.u-border-l{border-left:1px solid var(--aura-border)}
.u-border-r{border-right:1px solid var(--aura-border)}

.u-border-accent{border-color:var(--aura-accent)}
.u-border-success{border-color:var(--aura-success)}
.u-border-warning{border-color:var(--aura-warning)}
.u-border-error{border-color:var(--aura-error)}

.u-rounded-none{border-radius:0}
.u-rounded-xs{border-radius:var(--aura-radius-xs)}
.u-rounded-sm{border-radius:var(--aura-radius-sm)}
.u-rounded{border-radius:var(--aura-radius-md)}
.u-rounded-lg{border-radius:var(--aura-radius-lg)}
.u-rounded-xl{border-radius:var(--aura-radius-xl)}
.u-rounded-2xl{border-radius:var(--aura-radius-2xl)}
.u-rounded-full{border-radius:var(--aura-radius-full)}

/* ---------------- Shadow Utilities ---------------- */
.u-shadow-none{box-shadow:none}
.u-shadow-xs{box-shadow:var(--aura-shadow-xs)}
.u-shadow-sm{box-shadow:var(--aura-shadow-sm)}
.u-shadow-md{box-shadow:var(--aura-shadow-md)}
.u-shadow-lg{box-shadow:var(--aura-shadow-lg)}
.u-shadow-xl{box-shadow:var(--aura-shadow-xl)}

/* ---------------- Overflow Utilities ---------------- */
.u-overflow-auto{overflow:auto}
.u-overflow-hidden{overflow:hidden}
.u-overflow-visible{overflow:visible}
.u-overflow-scroll{overflow:scroll}
.u-overflow-x-auto{overflow-x:auto}
.u-overflow-y-auto{overflow-y:auto}

/* ---------------- Z-index Utilities ---------------- */
.u-z-0{z-index:0}
.u-z-10{z-index:10}
.u-z-20{z-index:20}
.u-z-30{z-index:30}
.u-z-40{z-index:40}
.u-z-50{z-index:50}

/* ---------------- Opacity Utilities ---------------- */
.u-opacity-0{opacity:0}
.u-opacity-25{opacity:0.25}
.u-opacity-50{opacity:0.5}
.u-opacity-75{opacity:0.75}
.u-opacity-100{opacity:1}

/* ---------------- Cursor Utilities ---------------- */
.u-cursor-auto{cursor:auto}
.u-cursor-default{cursor:default}
.u-cursor-pointer{cursor:pointer}
.u-cursor-wait{cursor:wait}
.u-cursor-text{cursor:text}
.u-cursor-move{cursor:move}
.u-cursor-not-allowed{cursor:not-allowed}

/* ---------------- User Select Utilities ---------------- */
.u-select-none{user-select:none}
.u-select-text{user-select:text}
.u-select-all{user-select:all}
.u-select-auto{user-select:auto}

/* ---------------- Pointer Events Utilities ---------------- */
.u-pointer-events-none{pointer-events:none}
.u-pointer-events-auto{pointer-events:auto}

/* ---------------- Responsive Utilities ---------------- */
@media (max-width:640px){
  .sm\:u-hidden{display:none}
  .sm\:u-flex{display:flex}
  .sm\:u-flex-col{flex-direction:column}
  .sm\:u-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .sm\:u-text-center{text-align:center}
}

@media (min-width:768px){
  .md\:u-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:u-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:u-flex-row{flex-direction:row}
}

@media (min-width:1024px){
  .lg\:u-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:u-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------------- Logical Spacing ---------------- */
/* Using logical properties ensures layout consistency across text directions */

.u-ms-auto { margin-inline-start: auto; }
.u-me-auto { margin-inline-end: auto; }

.u-ps-0 { padding-inline-start: var(--aura-0); }
.u-ps-4 { padding-inline-start: var(--aura-4); }
.u-pe-4 { padding-inline-end: var(--aura-4); }

/* ---------------- Advanced Flexbox ---------------- */

.u-flex-1 { flex: 1 1 0%; }
.u-flex-auto { flex: 1 1 auto; }
.u-flex-none { flex: none; }
.u-flex-grow { flex-grow: 1; }
.u-flex-shrink { flex-shrink: 1; }

/* ---------------- Enhanced Grid Systems ---------------- */

/* Masonry-like auto-fit with minimum size thresholds */
.u-grid-dynamic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--aura-6);
}

/* Common UI Patterns */
.u-grid-stack { display: grid; grid-template-areas: "stack"; }
.u-grid-stack > * { grid-area: stack; }

/* ---------------- Aspect Ratios ---------------- */

.u-aspect-square { aspect-ratio: 1 / 1; }
.u-aspect-video { aspect-ratio: 16 / 9; }
.u-aspect-portrait { aspect-ratio: 3 / 4; }

/* ---------------- Semantic Layouts ---------------- */

/* The "Sidebar" Layout: Content shrinks/grows, sidebar remains fixed-ish */
.u-layout-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aura-6);
}

.u-layout-sidebar > :first-child { flex-basis: 280px; flex-grow: 1; }
.u-layout-sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-width: 50%; }

/* The "Centering" Container */
.u-place-center { display: grid; place-items: center; }

/* ---------------- Visual Depth ---------------- */

/* Glassmorphism intensifiers */
.u-glass-surface {
  background: var(--aura-surface);
  backdrop-filter: var(--aura-glass);
  -webkit-backdrop-filter: var(--aura-glass);
  border: 1px solid var(--aura-border);
}

/* ---------------- Micro-interaction Helpers ---------------- */

.u-touch-target { min-width: 44px; min-height: 44px; }
.u-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.u-no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------------- Responsive Hide/Show ---------------- */

@media (max-width: 767px) {
  .u-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .u-show-mobile-only { display: none !important; }
}/* =====================================================
   AURA UI KIT - COMPONENTS
   Production-grade component library with motion.dev
   ===================================================== */

/* ---------------- BUTTONS ---------------- */

.aura-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--aura-2);
  padding:0 var(--aura-5);
  height:44px;
  border:none;
  border-radius:var(--aura-radius-md);
  font-family:var(--aura-font-body);
  font-size:0.9375rem;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
  will-change:transform;
  
  /* Primary variant (default) */
  background:var(--aura-accent-gradient);
  color:white;
  box-shadow:var(--aura-shadow-accent);
}

.aura-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--aura-shadow-lg);
  filter:brightness(1.05);
}

.aura-btn:active{
  transform:translateY(0);
  transition-duration:calc(var(--aura-duration-fast) / 2);
}

.aura-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none !important;
}

/* Button variants */
.aura-btn.secondary{
  background:var(--aura-accent-soft);
  color:var(--aura-accent);
  box-shadow:none;
  border:1px solid rgba(37,99,235,0.20);
}

.aura-btn.secondary:hover{
  background:var(--aura-accent);
  color:white;
}

.aura-btn.outline{
  background:transparent;
  color:var(--aura-text);
  box-shadow:none;
  border:1px solid var(--aura-border-strong);
}

.aura-btn.outline:hover{
  background:var(--aura-surface);
  border-color:var(--aura-accent);
  color:var(--aura-accent);
}

.aura-btn.ghost{
  background:transparent;
  color:var(--aura-text);
  box-shadow:none;
}

.aura-btn.ghost:hover{
  background:var(--aura-accent-muted);
  color:var(--aura-accent);
}

.aura-btn.danger{
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  box-shadow:var(--aura-shadow-error);
}

.aura-btn.success{
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  box-shadow:var(--aura-shadow-success);
}

.aura-btn.warning{
  background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
  box-shadow:var(--aura-shadow-warning);
  color:#78350f;
}

/* Button sizes */
.aura-btn.sm{
  height:36px;
  padding:0 var(--aura-4);
  font-size:0.875rem;
}

.aura-btn.lg{
  height:52px;
  padding:0 var(--aura-6);
  font-size:1rem;
}

.aura-btn.xl{
  height:60px;
  padding:0 var(--aura-8);
  font-size:1.125rem;
}

/* Icon button */
.aura-btn.icon{
  width:44px;
  padding:0;
}
.aura-btn.icon.sm{width:36px}
.aura-btn.icon.lg{width:52px}

/* Button group */
.aura-btn-group{
  display:inline-flex;
  border-radius:var(--aura-radius-md);
  overflow:hidden;
  box-shadow:var(--aura-shadow-sm);
}

.aura-btn-group .aura-btn{
  border-radius:0;
  box-shadow:none;
}

.aura-btn-group .aura-btn:not(:last-child){
  border-right:1px solid rgba(255,255,255,0.2);
}

/* ---------------- INPUTS & FORMS ---------------- */

.aura-input,
.aura-textarea,
.aura-select{
  width:100%;
  padding:0 var(--aura-4);
  height:44px;
  background:var(--aura-surface-solid);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-md);
  font-family:var(--aura-font-body);
  font-size:0.9375rem;
  color:var(--aura-text);
  transition:all var(--aura-duration-base) var(--aura-ease-out);
}

.aura-textarea{
  padding:var(--aura-3) var(--aura-4);
  height:auto;
  min-height:120px;
  resize:vertical;
  line-height:1.6;
}

.aura-input::placeholder,
.aura-textarea::placeholder{
  color:var(--aura-text-muted);
}

.aura-input:hover,
.aura-textarea:hover,
.aura-select:hover{
  border-color:var(--aura-border-strong);
}

.aura-input:focus,
.aura-textarea:focus,
.aura-select:focus{
  outline:none;
  border-color:var(--aura-accent);
  box-shadow:0 0 0 4px var(--aura-accent-soft);
}

.aura-input:disabled,
.aura-textarea:disabled,
.aura-select:disabled{
  opacity:0.6;
  cursor:not-allowed;
  background:var(--aura-bg-alt);
}

/* Input sizes */
.aura-input.sm{
  height:36px;
  padding:0 var(--aura-3);
  font-size:0.875rem;
}

.aura-input.lg{
  height:52px;
  padding:0 var(--aura-5);
  font-size:1rem;
}

/* Input with icon */
.aura-input-group{
  position:relative;
  display:flex;
  align-items:center;
}

.aura-input-group .aura-input{
  padding-left:var(--aura-10);
}

.aura-input-group .aura-input.has-icon-right{
  padding-right:var(--aura-10);
}

.aura-input-group .icon{
  position:absolute;
  left:var(--aura-4);
  display:flex;
  align-items:center;
  color:var(--aura-text-muted);
  pointer-events:none;
}

.aura-input-group .icon.right{
  left:auto;
  right:var(--aura-4);
}

/* Form group */
.aura-form-group{
  margin-bottom:var(--aura-5);
}

.aura-label{
  display:block;
  margin-bottom:var(--aura-2);
  font-weight:600;
  font-size:0.875rem;
  color:var(--aura-text);
}

.aura-label.required::after{
  content:'*';
  margin-left:var(--aura-1);
  color:var(--aura-error);
}

.aura-help-text{
  display:block;
  margin-top:var(--aura-2);
  font-size:0.8125rem;
  color:var(--aura-text-muted);
}

.aura-error-text{
  display:block;
  margin-top:var(--aura-2);
  font-size:0.8125rem;
  color:var(--aura-error);
  font-weight:500;
}

/* Input states */
.aura-input.error,
.aura-textarea.error{
  border-color:var(--aura-error);
}

.aura-input.error:focus,
.aura-textarea.error:focus{
  box-shadow:0 0 0 4px var(--aura-error-soft);
}

.aura-input.success,
.aura-textarea.success{
  border-color:var(--aura-success);
}

/* Checkbox & Radio */
.aura-checkbox,
.aura-radio{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--aura-2);
  cursor:pointer;
  user-select:none;
}

.aura-checkbox input[type="checkbox"],
.aura-radio input[type="radio"]{
  position:absolute;
  opacity:0;
  cursor:pointer;
  height:0;
  width:0;
}

.aura-checkbox .checkmark,
.aura-radio .checkmark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  background:var(--aura-surface-solid);
  border:2px solid var(--aura-border-strong);
  border-radius:var(--aura-radius-xs);
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-radio .checkmark{
  border-radius:50%;
}

.aura-checkbox:hover .checkmark,
.aura-radio:hover .checkmark{
  border-color:var(--aura-accent);
}

.aura-checkbox input:checked ~ .checkmark,
.aura-radio input:checked ~ .checkmark{
  background:var(--aura-accent);
  border-color:var(--aura-accent);
}

.aura-checkbox .checkmark::after{
  content:'';
  position:absolute;
  display:none;
  width:5px;
  height:9px;
  border:solid white;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.aura-checkbox input:checked ~ .checkmark::after{
  display:block;
}

.aura-radio .checkmark::after{
  content:'';
  position:absolute;
  display:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:white;
}

.aura-radio input:checked ~ .checkmark::after{
  display:block;
}

/* Toggle/Switch */
.aura-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--aura-3);
  cursor:pointer;
  user-select:none;
}

.aura-toggle input[type="checkbox"]{
  position:absolute;
  opacity:0;
  cursor:pointer;
  height:0;
  width:0;
}

.aura-toggle .switch{
  position:relative;
  width:48px;
  height:26px;
  background:var(--aura-border-strong);
  border-radius:var(--aura-radius-full);
  transition:all var(--aura-duration-base) var(--aura-ease-out);
}

.aura-toggle .switch::after{
  content:'';
  position:absolute;
  left:3px;
  top:3px;
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
  box-shadow:0 2px 4px rgba(0,0,0,0.12);
  transition:all var(--aura-duration-base) var(--aura-ease-spring);
}

.aura-toggle input:checked ~ .switch{
  background:var(--aura-accent);
}

.aura-toggle input:checked ~ .switch::after{
  transform:translateX(22px);
}

.aura-toggle:hover .switch{
  opacity:0.9;
}

/* Select */
.aura-select{
  padding-right:var(--aura-8);
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--aura-4) center;
  appearance:none;
  cursor:pointer;
}

/* File input */
.aura-file-input{
  position:relative;
  display:inline-block;
}

.aura-file-input input[type="file"]{
  position:absolute;
  opacity:0;
  cursor:pointer;
  width:0;
  height:0;
}

.aura-file-label{
  display:inline-flex;
  align-items:center;
  gap:var(--aura-2);
  padding:0 var(--aura-5);
  height:44px;
  background:var(--aura-surface-solid);
  border:1px dashed var(--aura-border-strong);
  border-radius:var(--aura-radius-md);
  font-weight:600;
  color:var(--aura-text);
  cursor:pointer;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-file-label:hover{
  border-color:var(--aura-accent);
  color:var(--aura-accent);
}

/* ---------------- CARDS ---------------- */

.aura-card{
  position:relative;
  background:var(--aura-surface);
  backdrop-filter:var(--aura-glass);
  -webkit-backdrop-filter:var(--aura-glass);
  border:1px solid rgba(255,255,255,0.50);
  border-radius:var(--aura-radius-xl);
  padding:var(--aura-6);
  box-shadow:var(--aura-shadow-md);
  overflow:hidden;
  transition:all var(--aura-duration-base) var(--aura-ease-out);
}

[data-aura-theme="dark"] .aura-card{
  border-color:rgba(255,255,255,0.10);
}

.aura-card::after{
  content:'';
  position:absolute;
  inset:-2px;
  background:radial-gradient(circle at 30% 25%,rgba(37,99,235,0.15),transparent 55%);
  opacity:0;
  transition:opacity var(--aura-duration-base) var(--aura-ease-out);
  pointer-events:none;
  z-index:0;
}

.aura-card:hover::after{
  opacity:1;
}

.aura-card.interactive{
  cursor:pointer;
}

.aura-card.interactive:hover{
  transform:translateY(-4px);
  box-shadow:var(--aura-shadow-lg);
}

/* Card variants */
.aura-card.flat{
  background:var(--aura-surface-solid);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.aura-card.outline{
  background:transparent;
  border-color:var(--aura-border-strong);
}

.aura-card.accent{
  background:var(--aura-accent-gradient);
  color:white;
  border-color:rgba(255,255,255,0.25);
}

.aura-card.accent .aura-text-dim,
.aura-card.accent .aura-text-muted{
  color:rgba(255,255,255,0.80);
}

/* Card grid */
.aura-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--aura-6);
}

/* Card header/body/footer */
.aura-card-header{
  padding-bottom:var(--aura-4);
  border-bottom:1px solid var(--aura-border);
  margin-bottom:var(--aura-4);
}

.aura-card-body{
  position:relative;
  z-index:1;
}

.aura-card-footer{
  padding-top:var(--aura-4);
  border-top:1px solid var(--aura-border);
  margin-top:var(--aura-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ---------------- ALERTS ---------------- */

.aura-alert{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--aura-3);
  padding:var(--aura-4) var(--aura-5);
  border-radius:var(--aura-radius-lg);
  border:1px solid var(--aura-border);
  background:var(--aura-surface);
  box-shadow:var(--aura-shadow-sm);
  backdrop-filter:var(--aura-glass);
  -webkit-backdrop-filter:var(--aura-glass);
}

.aura-alert .icon{
  font-size:1.25rem;
  line-height:1;
  flex-shrink:0;
}

.aura-alert .content{
  flex:1;
}

.aura-alert .title{
  font-weight:700;
  margin-bottom:var(--aura-1);
}

.aura-alert .description{
  font-size:0.9375rem;
  color:var(--aura-text-dim);
}

.aura-alert .close{
  flex-shrink:0;
  margin-left:auto;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:currentColor;
  border-radius:var(--aura-radius-sm);
  cursor:pointer;
  opacity:0.6;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-alert .close:hover{
  opacity:1;
  background:rgba(0,0,0,0.06);
}

/* Alert variants */
.aura-alert.info{
  background:var(--aura-info-soft);
  border-color:rgba(59,130,246,0.25);
  color:#1e3a8a;
}

[data-aura-theme="dark"] .aura-alert.info{
  color:#93c5fd;
}

.aura-alert.success{
  background:var(--aura-success-soft);
  border-color:rgba(16,185,129,0.25);
  color:#065f46;
}

[data-aura-theme="dark"] .aura-alert.success{
  color:#6ee7b7;
}

.aura-alert.warning{
  background:var(--aura-warning-soft);
  border-color:rgba(245,158,11,0.25);
  color:#78350f;
}

[data-aura-theme="dark"] .aura-alert.warning{
  color:#fcd34d;
}

.aura-alert.error{
  background:var(--aura-error-soft);
  border-color:rgba(239,68,68,0.25);
  color:#7f1d1d;
}

[data-aura-theme="dark"] .aura-alert.error{
  color:#fca5a5;
}

/* ---------------- BADGES & PILLS ---------------- */

.aura-badge,
.aura-pill{
  display:inline-flex;
  align-items:center;
  gap:var(--aura-1);
  padding:0.25rem 0.625rem;
  border-radius:var(--aura-radius-full);
  font-size:0.75rem;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:0.05em;
  border:1px solid transparent;
}

.aura-pill{
  padding:0.375rem 0.75rem;
  font-size:0.6875rem;
  letter-spacing:0.08em;
}

/* Badge/Pill variants */
.aura-badge.primary,
.aura-pill.primary{
  background:var(--aura-accent-soft);
  color:var(--aura-accent);
  border-color:rgba(37,99,235,0.20);
}

.aura-badge.success,
.aura-pill.success,
.aura-pill.active{
  background:var(--aura-success-soft);
  color:#065f46;
  border-color:rgba(16,185,129,0.22);
}

[data-aura-theme="dark"] .aura-badge.success,
[data-aura-theme="dark"] .aura-pill.success,
[data-aura-theme="dark"] .aura-pill.active{
  color:#6ee7b7;
}

.aura-badge.warning,
.aura-pill.warning,
.aura-pill.pending{
  background:var(--aura-warning-soft);
  color:#78350f;
  border-color:rgba(245,158,11,0.22);
}

[data-aura-theme="dark"] .aura-badge.warning,
[data-aura-theme="dark"] .aura-pill.warning,
[data-aura-theme="dark"] .aura-pill.pending{
  color:#fcd34d;
}

.aura-badge.error,
.aura-pill.error{
  background:var(--aura-error-soft);
  color:#7f1d1d;
  border-color:rgba(239,68,68,0.22);
}

[data-aura-theme="dark"] .aura-badge.error,
[data-aura-theme="dark"] .aura-pill.error{
  color:#fca5a5;
}

.aura-badge.info,
.aura-pill.info{
  background:var(--aura-info-soft);
  color:#1e3a8a;
  border-color:rgba(59,130,246,0.22);
}

[data-aura-theme="dark"] .aura-badge.info,
[data-aura-theme="dark"] .aura-pill.info{
  color:#93c5fd;
}

.aura-badge.neutral,
.aura-pill.neutral{
  background:rgba(0,0,0,0.05);
  color:var(--aura-text-dim);
  border-color:var(--aura-border);
}

[data-aura-theme="dark"] .aura-badge.neutral,
[data-aura-theme="dark"] .aura-pill.neutral{
  background:rgba(255,255,255,0.08);
}

/* Badge dot */
.aura-badge.dot::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}

/* ---------------- NAVIGATION ---------------- */

.aura-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--aura-6);
  margin-bottom:var(--aura-12);
  flex-wrap:wrap;
}

.aura-brand{
  display:flex;
  flex-direction:column;
  gap:var(--aura-2);
}

.aura-brand .kicker{
  font-family:var(--aura-font-display);
  font-size:0.75rem;
  font-weight:900;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--aura-accent);
}

.aura-brand h1{
  font-size:clamp(2.5rem,6vw,3.5rem);
  margin:0;
  letter-spacing:-0.035em;
  font-weight:900;
  line-height:0.95;
}

.aura-brand .tagline{
  font-size:0.9375rem;
  color:var(--aura-text-dim);
}

/* Nav menu */
.aura-nav{
  display:flex;
  align-items:center;
  gap:var(--aura-1);
}

.aura-nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--aura-2);
  padding:var(--aura-2) var(--aura-4);
  border-radius:var(--aura-radius-md);
  font-weight:600;
  font-size:0.9375rem;
  font-family:var(--aura-font-body);
  color:var(--aura-text-dim);
  text-decoration:none;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-nav-link:hover{
  color:var(--aura-accent);
  background:var(--aura-accent-muted);
}

.aura-nav-link.active{
  color:var(--aura-accent);
  background:var(--aura-accent-soft);
}

.aura-nav-link.active::after{
  content:'';
  position:absolute;
  bottom:0;
  left:var(--aura-4);
  right:var(--aura-4);
  height:2px;
  background:var(--aura-accent);
  border-radius:2px;
}

/* Breadcrumbs */
.aura-breadcrumbs{
  display:flex;
  align-items:center;
  gap:var(--aura-2);
  font-size:0.875rem;
  margin-bottom:var(--aura-6);
}

.aura-breadcrumb-item{
  display:flex;
  align-items:center;
  gap:var(--aura-2);
  color:var(--aura-text-dim);
}

.aura-breadcrumb-item a{
  color:inherit;
  text-decoration:none;
  transition:color var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-breadcrumb-item a:hover{
  color:var(--aura-accent);
}

.aura-breadcrumb-item.active{
  color:var(--aura-text);
  font-weight:600;
}

.aura-breadcrumb-separator{
  color:var(--aura-text-muted);
  user-select:none;
}

/* ---------------- TABS ---------------- */

.aura-tabs{
  position:relative;
  display:flex;
  gap:var(--aura-2);
  padding:var(--aura-1);
  background:rgba(0,0,0,0.04);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-full);
  width:fit-content;
  user-select:none;
}

[data-aura-theme="dark"] .aura-tabs{
  background:rgba(255,255,255,0.05);
}

.aura-tab{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--aura-2);
  padding:var(--aura-3) var(--aura-5);
  border-radius:var(--aura-radius-full);
  font-family:var(--aura-font-body);
  font-weight:600;
  font-size:0.9375rem;
  color:var(--aura-text-dim);
  cursor:pointer;
  transition:color var(--aura-duration-base) var(--aura-ease-out);
  white-space:nowrap;
  z-index:1;
}

.aura-tab[aria-selected="true"],
.aura-tab.active{
  color:var(--aura-accent);
}

.aura-tab:hover{
  color:var(--aura-text);
}

.aura-tab-indicator{
  position:absolute;
  inset:var(--aura-1) auto var(--aura-1) var(--aura-1);
  width:100px;
  border-radius:var(--aura-radius-full);
  background:var(--aura-surface-solid);
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:var(--aura-shadow-sm);
  z-index:0;
  pointer-events:none;
}

[data-aura-theme="dark"] .aura-tab-indicator{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.10);
  box-shadow:var(--aura-shadow-md);
}

/* Vertical tabs */
.aura-tabs.vertical{
  flex-direction:column;
  width:auto;
}

/* ---------------- TABLES ---------------- */

.aura-table-shell{
  background:var(--aura-surface-solid);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-xl);
  overflow:hidden;
  box-shadow:var(--aura-shadow-md);
}

.aura-table{
  width:100%;
  border-collapse:collapse;
}

.aura-table thead th{
  text-align:left;
  padding:var(--aura-4) var(--aura-5);
  font-family:var(--aura-font-display);
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--aura-text-dim);
  background:rgba(0,0,0,0.02);
  border-bottom:1px solid var(--aura-border);
}

.aura-table.sortable thead th{
  cursor:pointer;
  user-select:none;
}

.aura-table.sortable thead th:hover{
  color:var(--aura-accent);
}

[data-aura-theme="dark"] .aura-table thead th{
  background:rgba(255,255,255,0.03);
}

.aura-table tbody td{
  padding:var(--aura-4) var(--aura-5);
  border-bottom:1px solid var(--aura-border);
  color:var(--aura-text);
}

.aura-table tbody tr:last-child td{
  border-bottom:none;
}

.aura-table tbody tr{
  transition:background-color var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-table tbody tr:hover{
  background:rgba(37,99,235,0.03);
}

.aura-table.sorting tbody tr{
  animation:aura-table-sort 0.18s var(--aura-ease-out);
}

@keyframes aura-table-sort{
  0%{opacity:0.6;transform:translateY(3px)}
  100%{opacity:1;transform:translateY(0)}
}

.aura-table tbody tr.selected{
  background:var(--aura-accent-soft);
}

/* Table variants */
.aura-table.striped tbody tr:nth-child(even){
  background:rgba(0,0,0,0.015);
}

[data-aura-theme="dark"] .aura-table.striped tbody tr:nth-child(even){
  background:rgba(255,255,255,0.02);
}

.aura-table.compact thead th,
.aura-table.compact tbody td{
  padding:var(--aura-3) var(--aura-4);
}

/* ---------------- DROPDOWNS ---------------- */

.aura-dropdown{
  position:relative;
  display:inline-flex;
}

.aura-dropdown-menu{
  position:absolute;
  right:0;
  top:calc(100% + var(--aura-2));
  min-width:220px;
  max-width:320px;
  padding:var(--aura-2);
  background:var(--aura-surface-solid);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-lg);
  box-shadow:var(--aura-shadow-lg);
  backdrop-filter:var(--aura-glass);
  -webkit-backdrop-filter:var(--aura-glass);
  z-index:var(--z-dropdown);
  opacity:0;
  transform:translateY(-8px) scale(0.98);
  pointer-events:none;
  transition:all var(--aura-duration-base) var(--aura-ease-out);
}

.aura-dropdown.open .aura-dropdown-menu{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.aura-dropdown-menu.left{
  right:auto;
  left:0;
}

.aura-menu-item{
  display:flex;
  align-items:center;
  gap:var(--aura-3);
  padding:var(--aura-2) var(--aura-3);
  border-radius:var(--aura-radius-sm);
  font-weight:600;
  font-size:0.9375rem;
  color:var(--aura-text);
  cursor:pointer;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
  user-select:none;
}

.aura-menu-item:hover{
  background:var(--aura-accent-muted);
  color:var(--aura-accent);
}

.aura-menu-item.danger:hover{
  background:var(--aura-error-soft);
  color:var(--aura-error);
}

.aura-menu-item.disabled{
  opacity:0.5;
  cursor:not-allowed;
}

.aura-menu-item.disabled:hover{
  background:transparent;
  color:var(--aura-text);
}

.aura-menu-sep{
  height:1px;
  background:var(--aura-border);
  margin:var(--aura-2) 0;
}

.aura-menu-label{
  padding:var(--aura-2) var(--aura-3);
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--aura-text-muted);
}

/* ---------------- MODALS ---------------- */

.aura-modal-backdrop{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--aura-6);
  background:rgba(0,0,0,0.50);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:var(--z-modal-backdrop);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--aura-duration-base) linear;
}

[data-aura-theme="dark"] .aura-modal-backdrop{
  background:rgba(0,0,0,0.70);
}

.aura-modal-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.aura-modal{
  position:relative;
  width:min(640px,100%);
  max-height:calc(100vh - 3rem);
  background:var(--aura-surface-solid);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-2xl);
  box-shadow:var(--aura-shadow-xl);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:translateY(12px) scale(0.98);
  opacity:0;
  transition:all var(--aura-duration-base) var(--aura-ease-spring);
}

.aura-modal-backdrop.open .aura-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}

.aura-modal-header{
  display:flex;
  align-items:center;
  gap:var(--aura-4);
  padding:var(--aura-5) var(--aura-6);
  border-bottom:1px solid var(--aura-border);
}

.aura-modal-header .title{
  flex:1;
  font-family:var(--aura-font-display);
  font-size:1.25rem;
  font-weight:800;
  margin:0;
}

.aura-modal-body{
  flex:1;
  padding:var(--aura-6);
  overflow-y:auto;
}

.aura-modal-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--aura-3);
  padding:var(--aura-5) var(--aura-6);
  border-top:1px solid var(--aura-border);
}

.aura-x{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:none;
  background:rgba(0,0,0,0.04);
  color:var(--aura-text);
  border-radius:var(--aura-radius-sm);
  cursor:pointer;
  font-size:1.25rem;
  line-height:1;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-x:hover{
  background:rgba(0,0,0,0.08);
}

[data-aura-theme="dark"] .aura-x{
  background:rgba(255,255,255,0.06);
}

[data-aura-theme="dark"] .aura-x:hover{
  background:rgba(255,255,255,0.10);
}

/* ---------------- TOASTS ---------------- */

.aura-toasts{
  position:fixed;
  right:var(--aura-5);
  top:var(--aura-5);
  display:flex;
  flex-direction:column;
  gap:var(--aura-3);
  z-index:var(--z-toast);
  pointer-events:none;
}

.aura-toast{
  min-width:320px;
  max-width:480px;
  padding:var(--aura-4) var(--aura-5);
  background:var(--aura-surface-solid);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-lg);
  box-shadow:var(--aura-shadow-xl);
  backdrop-filter:var(--aura-glass);
  -webkit-backdrop-filter:var(--aura-glass);
  display:flex;
  align-items:flex-start;
  gap:var(--aura-3);
  pointer-events:auto;
  opacity:0;
  transform:translateY(-12px) scale(0.98);
}

.aura-toast .ticon{
  font-size:1.25rem;
  line-height:1;
  flex-shrink:0;
}

.aura-toast .tcontent{
  flex:1;
  min-width:0;
}

.aura-toast .tmsg{
  font-weight:700;
  color:var(--aura-text);
}

.aura-toast .tmeta{
  margin-top:var(--aura-1);
  font-size:0.875rem;
  color:var(--aura-text-dim);
}

.aura-toast .tclose{
  flex-shrink:0;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:var(--aura-text-muted);
  border-radius:var(--aura-radius-sm);
  cursor:pointer;
  font-size:1.125rem;
  line-height:1;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-toast .tclose:hover{
  background:rgba(0,0,0,0.05);
  color:var(--aura-text);
}

[data-aura-theme="dark"] .aura-toast .tclose:hover{
  background:rgba(255,255,255,0.08);
}

/* ---------------- TOOLTIPS ---------------- */

.aura-tooltip{
  position:relative;
  display:inline-flex;
}

.aura-tooltip .tip{
  position:absolute;
  bottom:calc(100% + var(--aura-2));
  left:50%;
  transform:translateX(-50%) translateY(4px);
  padding:var(--aura-2) var(--aura-3);
  background:rgba(15,23,42,0.95);
  color:white;
  border-radius:var(--aura-radius-sm);
  font-size:0.8125rem;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
  z-index:var(--z-tooltip);
  box-shadow:var(--aura-shadow-lg);
}

.aura-tooltip .tip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:rgba(15,23,42,0.95);
}

.aura-tooltip:hover .tip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Tooltip positions */
.aura-tooltip .tip.top{
  bottom:calc(100% + var(--aura-2));
  top:auto;
}

.aura-tooltip .tip.bottom{
  top:calc(100% + var(--aura-2));
  bottom:auto;
  transform:translateX(-50%) translateY(-4px);
}

.aura-tooltip:hover .tip.bottom{
  transform:translateX(-50%) translateY(0);
}

.aura-tooltip .tip.bottom::after{
  top:auto;
  bottom:100%;
  border-top-color:transparent;
  border-bottom-color:rgba(15,23,42,0.95);
}

/* ---------------- PROGRESS ---------------- */

.aura-progress{
  position:relative;
  height:12px;
  width:100%;
  background:rgba(0,0,0,0.05);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-full);
  overflow:hidden;
}

[data-aura-theme="dark"] .aura-progress{
  background:rgba(255,255,255,0.05);
}

.aura-progress .bar{
  height:100%;
  width:0%;
  background:var(--aura-accent-gradient);
  border-radius:var(--aura-radius-full);
  transition:width var(--aura-duration-slow) var(--aura-ease-out);
}

.aura-progress.sm{
  height:8px;
}

.aura-progress.lg{
  height:16px;
}

/* Progress variants */
.aura-progress .bar.success{
  background:linear-gradient(90deg,#10b981,#059669);
}

.aura-progress .bar.warning{
  background:linear-gradient(90deg,#f59e0b,#d97706);
}

.aura-progress .bar.error{
  background:linear-gradient(90deg,#ef4444,#dc2626);
}

/* Indeterminate progress */
.aura-progress.indeterminate .bar{
  width:30%;
  animation:aura-progress-slide 1.5s var(--aura-ease-in-out) infinite;
}

@keyframes aura-progress-slide{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(350%)}
  100%{transform:translateX(-100%)}
}

/* ---------------- SKELETON ---------------- */

.aura-skeleton{
  background:linear-gradient(90deg,rgba(0,0,0,0.04),rgba(0,0,0,0.08),rgba(0,0,0,0.04));
  background-size:200% 100%;
  border-radius:var(--aura-radius-md);
  animation:aura-shimmer 1.5s ease-in-out infinite;
}

[data-aura-theme="dark"] .aura-skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,0.05),rgba(255,255,255,0.10),rgba(255,255,255,0.05));
  background-size:200% 100%;
}

@keyframes aura-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.aura-skeleton.text{
  height:1em;
  margin:0.5em 0;
}

.aura-skeleton.circle{
  border-radius:50%;
}

/* ---------------- AVATARS ---------------- */

.aura-avatar{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--aura-radius-full);
  font-family:var(--aura-font-display);
  font-weight:800;
  color:white;
  background:var(--aura-accent-gradient);
  border:2px solid rgba(255,255,255,0.40);
  box-shadow:var(--aura-shadow-sm);
  overflow:hidden;
  user-select:none;
}

.aura-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Avatar sizes */
.aura-avatar.xs{
  width:24px;
  height:24px;
  font-size:0.625rem;
}

.aura-avatar.sm{
  width:32px;
  height:32px;
  font-size:0.75rem;
}

.aura-avatar.lg{
  width:48px;
  height:48px;
  font-size:1rem;
}

.aura-avatar.xl{
  width:64px;
  height:64px;
  font-size:1.5rem;
}

/* Avatar group */
.aura-avatar-group{
  display:inline-flex;
  align-items:center;
}

.aura-avatar-group .aura-avatar{
  margin-left:-12px;
  transition:transform var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-avatar-group .aura-avatar:first-child{
  margin-left:0;
}

.aura-avatar-group .aura-avatar:hover{
  transform:translateY(-4px) scale(1.1);
  z-index:1;
}

/* Avatar status */
.aura-avatar .status{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid var(--aura-surface-solid);
  background:var(--aura-success);
}

.aura-avatar .status.away{
  background:var(--aura-warning);
}

.aura-avatar .status.offline{
  background:var(--aura-text-muted);
}

/* ---------------- PAGINATION ---------------- */

.aura-pagination{
  display:flex;
  align-items:center;
  gap:var(--aura-2);
}

.aura-pagination-item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 var(--aura-3);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-md);
  font-weight:700;
  color:var(--aura-text);
  background:var(--aura-surface-solid);
  cursor:pointer;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
  user-select:none;
}

.aura-pagination-item:hover{
  border-color:var(--aura-accent);
  color:var(--aura-accent);
  background:var(--aura-accent-muted);
}

.aura-pagination-item.active{
  background:var(--aura-accent);
  border-color:var(--aura-accent);
  color:white;
}

.aura-pagination-item.disabled{
  opacity:0.4;
  cursor:not-allowed;
  pointer-events:none;
}

.aura-pagination-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  color:var(--aura-text-muted);
}

/* ---------------- DIVIDER ---------------- */

.aura-divider{
  height:1px;
  background:var(--aura-border);
  margin:var(--aura-6) 0;
}

.aura-divider.vertical{
  width:1px;
  height:auto;
  min-height:24px;
  margin:0 var(--aura-4);
}

.aura-divider.strong{
  background:var(--aura-border-strong);
}

/* ---------------- EMPTY STATE ---------------- */

.aura-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--aura-4);
  padding:var(--aura-12) var(--aura-6);
  text-align:center;
  border:2px dashed var(--aura-border);
  border-radius:var(--aura-radius-xl);
  background:var(--aura-accent-muted);
}

.aura-empty .eicon{
  font-size:3rem;
  opacity:0.6;
}

.aura-empty .etitle{
  font-family:var(--aura-font-display);
  font-size:1.25rem;
  font-weight:800;
  color:var(--aura-text);
}

.aura-empty .edesc{
  max-width:400px;
  color:var(--aura-text-dim);
  line-height:1.6;
}

.aura-empty .eaction{
  margin-top:var(--aura-2);
}

/* ---------------- CRM COMPONENTS ---------------- */

.aura-panel{
  background:var(--aura-surface-solid);
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-xl);
  padding:var(--aura-6);
  box-shadow:var(--aura-shadow-md);
}

.aura-panel.soft{
  background:var(--aura-surface);
  backdrop-filter:var(--aura-glass);
  -webkit-backdrop-filter:var(--aura-glass);
}

.aura-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aura-4);
  margin-bottom:var(--aura-5);
}

.aura-section-head .title{
  display:flex;
  flex-direction:column;
  gap:var(--aura-1);
}

.aura-section-head .title span{
  font-size:0.875rem;
  color:var(--aura-text-dim);
}

.aura-stat-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--aura-4);
}

.aura-stat-item{
  padding:var(--aura-4);
  border-radius:var(--aura-radius-lg);
  border:1px solid var(--aura-border);
  background:var(--aura-bg-alt);
}

.aura-stat-item .label{
  font-size:0.8125rem;
  color:var(--aura-text-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
}

.aura-stat-item .value{
  margin-top:var(--aura-2);
  font-size:1.75rem;
  font-weight:800;
  font-family:var(--aura-font-display);
}

.aura-event-list{
  display:flex;
  flex-direction:column;
  gap:var(--aura-3);
}

.aura-event-item{
  display:flex;
  gap:var(--aura-4);
  align-items:center;
  padding:var(--aura-4);
  border-radius:var(--aura-radius-lg);
  border:1px solid var(--aura-border);
  background:var(--aura-surface-solid);
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-event-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--aura-shadow-sm);
  border-color:var(--aura-border-strong);
}

.aura-date-pill{
  min-width:60px;
  padding:var(--aura-2);
  border-radius:var(--aura-radius-md);
  text-align:center;
  background:var(--aura-accent-muted);
  color:var(--aura-accent);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.75rem;
}

.aura-date-pill strong{
  display:block;
  font-size:1.25rem;
  line-height:1.1;
  color:var(--aura-text);
}

.aura-event-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--aura-3);
  align-items:center;
  color:var(--aura-text-dim);
  font-size:0.875rem;
}

.aura-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--aura-success);
  box-shadow:0 0 0 4px rgba(16,185,129,0.18);
  animation:aura-pulse 2.4s var(--aura-ease-in-out) infinite;
}

.aura-status-dot.warning{
  background:var(--aura-warning);
  box-shadow:0 0 0 4px rgba(245,158,11,0.18);
}

.aura-status-dot.error{
  background:var(--aura-error);
  box-shadow:0 0 0 4px rgba(239,68,68,0.18);
}

@keyframes aura-pulse{
  0%,100%{transform:scale(1);opacity:0.9}
  50%{transform:scale(1.2);opacity:1}
}

.aura-timeline{
  position:relative;
  margin-left:var(--aura-2);
  padding-left:var(--aura-6);
  display:flex;
  flex-direction:column;
  gap:var(--aura-4);
}

.aura-timeline::before{
  content:'';
  position:absolute;
  left:10px;
  top:0;
  bottom:0;
  width:2px;
  background:var(--aura-border);
}

.aura-timeline-item{
  position:relative;
  padding:var(--aura-3) var(--aura-4);
  border-radius:var(--aura-radius-lg);
  border:1px solid var(--aura-border);
  background:var(--aura-surface-solid);
}

.aura-timeline-item::before{
  content:'';
  position:absolute;
  left:-26px;
  top:18px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--aura-accent);
  box-shadow:0 0 0 6px var(--aura-accent-soft);
}

.aura-timeline-item .meta{
  font-size:0.8125rem;
  color:var(--aura-text-muted);
}

.aura-contact-card{
  display:flex;
  flex-direction:column;
  gap:var(--aura-4);
  padding:var(--aura-6);
  border-radius:var(--aura-radius-xl);
  border:1px solid var(--aura-border);
  background:var(--aura-surface-solid);
  box-shadow:var(--aura-shadow-sm);
}

.aura-contact-card .head{
  display:flex;
  align-items:center;
  gap:var(--aura-4);
}

.aura-contact-card .title{
  font-weight:800;
  font-size:1.125rem;
}

.aura-contact-card .sub{
  color:var(--aura-text-dim);
  font-size:0.875rem;
}

.aura-contact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aura-3);
  padding:var(--aura-3) 0;
  border-bottom:1px dashed var(--aura-border);
}

.aura-contact-row:last-child{
  border-bottom:0;
}

.aura-pipeline{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--aura-4);
}

.aura-pipeline-stage{
  padding:var(--aura-4);
  border-radius:var(--aura-radius-lg);
  border:1px solid var(--aura-border);
  background:var(--aura-bg-alt);
}

.aura-pipeline-stage .label{
  font-size:0.875rem;
  font-weight:700;
  color:var(--aura-text);
}

.aura-pipeline-stage .value{
  font-size:1.5rem;
  font-weight:800;
  margin-top:var(--aura-2);
}

.aura-pipeline-stage .meta{
  margin-top:var(--aura-2);
  color:var(--aura-text-dim);
  font-size:0.8125rem;
}

.aura-pipeline-stage .bar{
  height:6px;
  margin-top:var(--aura-3);
  border-radius:999px;
  background:var(--aura-accent-muted);
  overflow:hidden;
}

.aura-pipeline-stage .bar span{
  display:block;
  height:100%;
  width:0%;
  background:var(--aura-accent-gradient);
}

.aura-wiggle{
  animation:aura-wiggle 7s var(--aura-ease-in-out) infinite;
}

@keyframes aura-wiggle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* ---------------- DEAL / CRM DETAIL ---------------- */

.aura-deal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aura-4);
  flex-wrap:wrap;
}

.aura-deal-title{
  display:flex;
  flex-direction:column;
  gap:var(--aura-2);
}

.aura-deal-title h3{
  margin:0;
}

.aura-deal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--aura-3);
  color:var(--aura-text-dim);
  font-size:0.875rem;
}

.aura-kpi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--aura-4);
}

.aura-kpi-card{
  padding:var(--aura-4);
  border-radius:var(--aura-radius-lg);
  border:1px solid var(--aura-border);
  background:var(--aura-surface-solid);
}

.aura-kpi-card .label{
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--aura-text-muted);
  font-weight:700;
}

.aura-kpi-card .value{
  font-size:1.5rem;
  font-weight:800;
  margin-top:var(--aura-2);
}

.aura-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--aura-2);
}

.aura-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--aura-2);
  padding:0.35rem 0.75rem;
  border-radius:999px;
  background:var(--aura-bg-alt);
  border:1px solid var(--aura-border);
  font-size:0.8125rem;
  font-weight:600;
  color:var(--aura-text-dim);
}

.aura-note{
  padding:var(--aura-4);
  border-radius:var(--aura-radius-lg);
  border:1px dashed var(--aura-border);
  background:var(--aura-accent-muted);
  color:var(--aura-text);
}

/* ---------------- TASKS ---------------- */

.aura-task-list{
  display:flex;
  flex-direction:column;
  gap:var(--aura-3);
}

.aura-task{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aura-3);
  padding:var(--aura-3) var(--aura-4);
  border-radius:var(--aura-radius-lg);
  border:1px solid var(--aura-border);
  background:var(--aura-surface-solid);
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-task:hover{
  transform:translateY(-2px);
  box-shadow:var(--aura-shadow-sm);
}

.aura-task .meta{
  font-size:0.8125rem;
  color:var(--aura-text-muted);
}

/* ---------------- DRAG + DROP ---------------- */

.aura-board{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--aura-4);
}

.aura-board-column{
  padding:var(--aura-4);
  border-radius:var(--aura-radius-xl);
  border:1px solid var(--aura-border);
  background:var(--aura-bg-alt);
  display:flex;
  flex-direction:column;
  gap:var(--aura-3);
  min-height:280px;
}

.aura-board-title{
  font-size:0.875rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--aura-text-dim);
}

.aura-dropzone{
  display:flex;
  flex-direction:column;
  gap:var(--aura-3);
  min-height:200px;
}

.aura-dropzone.is-over{
  outline:2px dashed var(--aura-accent);
  outline-offset:4px;
  background:var(--aura-accent-muted);
}

.aura-draggable{
  padding:var(--aura-4);
  border-radius:var(--aura-radius-lg);
  border:1px solid var(--aura-border);
  background:var(--aura-surface-solid);
  cursor:grab;
  box-shadow:var(--aura-shadow-sm);
  transition:transform var(--aura-duration-fast) var(--aura-ease-out),
             box-shadow var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-draggable:active{
  cursor:grabbing;
}

.aura-draggable.dragging{
  opacity:0.7;
  transform:rotate(-1deg) scale(0.98);
}

/* ---------------- INVOICE ---------------- */

.aura-invoice{
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-2xl);
  background:var(--aura-surface-solid);
  box-shadow:var(--aura-shadow-md);
  padding:var(--aura-6);
}

.aura-invoice-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aura-4);
  flex-wrap:wrap;
  margin-bottom:var(--aura-5);
}

.aura-invoice-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--aura-4);
  color:var(--aura-text-dim);
  font-size:0.875rem;
}

.aura-invoice-table{
  width:100%;
  border-collapse:collapse;
}

.aura-invoice-table th,
.aura-invoice-table td{
  padding:var(--aura-3) 0;
  border-bottom:1px solid var(--aura-border);
}

.aura-invoice-table th{
  text-align:left;
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--aura-text-muted);
}

.aura-invoice-total{
  display:flex;
  justify-content:flex-end;
  gap:var(--aura-6);
  margin-top:var(--aura-4);
  font-weight:700;
}

.aura-invoice-total .label{
  color:var(--aura-text-dim);
}

/* ---------------- ACCORDION ---------------- */

.aura-accordion{
  display:flex;
  flex-direction:column;
  gap:var(--aura-3);
}

.aura-accordion-item{
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-lg);
  background:var(--aura-surface-solid);
  overflow:hidden;
  transition:box-shadow var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-accordion-item.open{
  box-shadow:var(--aura-shadow-sm);
}

.aura-accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aura-3);
  padding:var(--aura-4) var(--aura-5);
  background:transparent;
  border:none;
  text-align:left;
  font-weight:700;
  color:var(--aura-text);
  cursor:pointer;
}

.aura-accordion-trigger .meta{
  font-size:0.8125rem;
  color:var(--aura-text-muted);
  font-weight:600;
}

.aura-accordion-icon{
  width:32px;
  height:32px;
  border-radius:var(--aura-radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--aura-bg-alt);
  border:1px solid var(--aura-border);
  transition:transform var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-accordion-item.open .aura-accordion-icon{
  transform:rotate(180deg);
}

.aura-accordion-content{
  height:0;
  overflow:hidden;
  transition:height var(--aura-duration-base) var(--aura-ease-out);
}

.aura-accordion-body{
  padding:0 var(--aura-5) var(--aura-5);
  color:var(--aura-text-dim);
}

/* ---------------- STEPPER ---------------- */

.aura-stepper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--aura-4);
}

.aura-step{
  padding:var(--aura-4);
  border-radius:var(--aura-radius-lg);
  border:1px solid var(--aura-border);
  background:var(--aura-bg-alt);
}

.aura-step .title{
  font-weight:700;
}

.aura-step .desc{
  font-size:0.875rem;
  color:var(--aura-text-dim);
  margin-top:var(--aura-1);
}

.aura-step .meta{
  margin-top:var(--aura-2);
  font-size:0.8125rem;
  color:var(--aura-text-muted);
}

.aura-step.active{
  border-color:var(--aura-accent);
  background:var(--aura-accent-muted);
}

/* ---------------- SEGMENTED ---------------- */

.aura-segmented{
  display:inline-flex;
  align-items:center;
  gap:var(--aura-1);
  padding:var(--aura-1);
  border-radius:var(--aura-radius-full);
  border:1px solid var(--aura-border);
  background:var(--aura-bg-alt);
}

.aura-segmented button{
  border:none;
  background:transparent;
  padding:0.45rem 0.9rem;
  border-radius:var(--aura-radius-full);
  font-weight:600;
  font-size:0.875rem;
  color:var(--aura-text-dim);
  cursor:pointer;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-segmented button[aria-pressed="true"]{
  background:var(--aura-surface-solid);
  color:var(--aura-accent);
  box-shadow:var(--aura-shadow-sm);
}

/* ---------------- INLINE LINE ITEMS ---------------- */

.aura-line-items{
  border:1px solid var(--aura-border);
  border-radius:var(--aura-radius-2xl);
  background:var(--aura-surface-solid);
  box-shadow:var(--aura-shadow-md);
  overflow:hidden;
}

.aura-line-items-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aura-4);
  padding:var(--aura-5) var(--aura-6);
  border-bottom:1px solid var(--aura-border);
  background:var(--aura-bg-alt);
}

.aura-line-items-title{
  font-weight:800;
  font-family:var(--aura-font-display);
  letter-spacing:-0.02em;
}

.aura-line-items-toolbar{
  display:flex;
  align-items:center;
  gap:var(--aura-3);
  flex-wrap:wrap;
}

.aura-inline-input{
  min-width:180px;
  height:38px;
  padding:0 var(--aura-3);
  border-radius:var(--aura-radius-md);
  border:1px solid var(--aura-border);
  background:var(--aura-surface-solid);
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
  font-size:0.875rem;
}

.aura-inline-input:focus{
  outline:none;
  border-color:var(--aura-accent);
  box-shadow:0 0 0 4px var(--aura-accent-soft);
}

.aura-line-items-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.aura-line-items-table thead th{
  text-align:left;
  padding:var(--aura-4) var(--aura-5);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--aura-text-dim);
  background:var(--aura-bg-alt);
  border-bottom:1px solid var(--aura-border);
}

.aura-line-items-table tbody td{
  padding:var(--aura-4) var(--aura-5);
  border-bottom:1px solid var(--aura-border);
  vertical-align:middle;
}

.aura-line-items-row{
  transition:background var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-line-items-row:hover{
  background:rgba(37,99,235,0.03);
}

.aura-line-items-row.added{
  animation:aura-row-pop 0.35s var(--aura-ease-spring);
}

@keyframes aura-row-pop{
  0%{transform:translateY(6px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

.aura-line-items-actions{
  display:flex;
  align-items:center;
  gap:var(--aura-2);
}

.aura-icon-btn{
  width:32px;
  height:32px;
  border-radius:var(--aura-radius-sm);
  border:1px solid var(--aura-border);
  background:var(--aura-surface-solid);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-icon-btn:hover{
  border-color:var(--aura-accent);
  color:var(--aura-accent);
  background:var(--aura-accent-muted);
}

.aura-icon-btn.danger:hover{
  border-color:var(--aura-error);
  color:var(--aura-error);
  background:var(--aura-error-soft);
}

.aura-line-items-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--aura-5) var(--aura-6);
  background:var(--aura-bg-alt);
  gap:var(--aura-4);
  flex-wrap:wrap;
}

.aura-line-items-total{
  display:flex;
  align-items:center;
  gap:var(--aura-4);
  font-weight:700;
}

.aura-inline-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--aura-2);
  padding:0.25rem 0.6rem;
  border-radius:999px;
  background:var(--aura-accent-muted);
  color:var(--aura-accent);
  font-size:0.75rem;
  font-weight:700;
}

/* ---------------- RANGE SLIDER ---------------- */

.aura-range-wrap{
  display:flex;
  align-items:center;
  gap:var(--aura-4);
}

.aura-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--aura-accent) 0%, rgba(37,99,235,0.2) 0%);
  outline:none;
  transition:background var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--aura-surface-solid);
  border:2px solid var(--aura-accent);
  box-shadow:var(--aura-shadow-sm);
  transition:transform var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-range::-webkit-slider-thumb:hover{
  transform:scale(1.05);
}

.aura-range::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--aura-surface-solid);
  border:2px solid var(--aura-accent);
  box-shadow:var(--aura-shadow-sm);
}

.aura-range-value{
  min-width:56px;
  text-align:center;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  background:var(--aura-accent-muted);
  color:var(--aura-accent);
  font-weight:700;
  font-size:0.8125rem;
  transition:transform var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-range-value.pulse{
  transform:scale(1.06);
}

/* ---------------- PROGRESS RING ---------------- */

.aura-ring{
  --size:120px;
  --thickness:12px;
  --value:65;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:conic-gradient(var(--aura-accent) calc(var(--value) * 1%), rgba(255,255,255,0.08) 0);
  position:relative;
  display:grid;
  place-items:center;
}

.aura-ring::after{
  content:'';
  position:absolute;
  inset:calc(var(--thickness));
  background:var(--aura-surface-solid);
  border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--aura-border);
}

.aura-ring .content{
  position:relative;
  z-index:1;
  text-align:center;
}

.aura-ring .value{
  font-size:1.5rem;
  font-weight:800;
}

.aura-ring .label{
  font-size:0.8125rem;
  color:var(--aura-text-dim);
}

.aura-ring.success{
  background:conic-gradient(var(--aura-success) calc(var(--value) * 1%), rgba(255,255,255,0.08) 0);
}

.aura-ring.warning{
  background:conic-gradient(var(--aura-warning) calc(var(--value) * 1%), rgba(255,255,255,0.08) 0);
}

/* ---------------- SPINNER ---------------- */

.aura-spinner{
  display:inline-block;
  width:24px;
  height:24px;
  border:3px solid var(--aura-border);
  border-top-color:var(--aura-accent);
  border-radius:50%;
  animation:aura-spin 0.8s linear infinite;
}

@keyframes aura-spin{
  to{transform:rotate(360deg)}
}

.aura-spinner.sm{
  width:16px;
  height:16px;
  border-width:2px;
}

.aura-spinner.lg{
  width:32px;
  height:32px;
  border-width:4px;
}

/* ---------------- REVEAL ANIMATIONS ---------------- */

.aura-reveal{
  opacity:0;
  transform:translateY(20px);
}

.aura-reveal.revealed{
  opacity:1;
  transform:translateY(0);
  transition:all var(--aura-duration-slow) var(--aura-ease-spring);
}

/* ---------------- MOTION HELPERS ---------------- */

.aura-motion-hover{
  transition:transform var(--aura-duration-fast) var(--aura-ease-out),
             box-shadow var(--aura-duration-fast) var(--aura-ease-out);
}

.aura-motion-hover:hover{
  transform:translateY(-4px);
  box-shadow:var(--aura-shadow-lg);
}

.aura-motion-scale:hover{
  transform:scale(1.02);
}

.aura-motion-glow{
  position:relative;
}

.aura-motion-glow::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:var(--aura-accent-gradient);
  opacity:0;
  filter:blur(20px);
  transition:opacity var(--aura-duration-base) var(--aura-ease-out);
  z-index:-1;
}

.aura-motion-glow:hover::before{
  opacity:0.6;
}