/* ==========================================================================
   ALGROVEON CSS – Distribution Build
   Built: 2026-05-14 22:03:00
   Do not edit this file directly. Edit files in src/ and run ./build.sh
   ==========================================================================
*/

@layer tokens, base, utilities, components;

/* ==========================================================================
   ALGROVEON CSS – Design Tokens
   @layer tokens
   All values are CSS Custom Properties. Never hardcode values elsewhere.
   ========================================================================== */

@layer tokens {

  :root {
    color-scheme: light;

    /* ------------------------------------------------------------------
       Brand (Teal)
    ------------------------------------------------------------------ */
    --ac-brand-300: oklch(85% 0.12 186);
    --ac-brand-400: oklch(80% 0.14 186);
    --ac-brand-500: oklch(72% 0.13 186);
    --ac-brand-600: oklch(62% 0.12 186);

    /* ------------------------------------------------------------------
       Neutral (Zinc scale, light-mode defaults)
    ------------------------------------------------------------------ */
    --ac-zinc-50:  oklch(98.2% 0.001 286);
    --ac-zinc-100: oklch(96.1% 0.001 286);
    --ac-zinc-200: oklch(92.2% 0.002 286);
    --ac-zinc-300: oklch(87.8% 0.003 286);
    --ac-zinc-400: oklch(71%   0.004 286);
    --ac-zinc-500: oklch(55.6% 0.006 286);
    --ac-zinc-600: oklch(44.6% 0.007 286);
    --ac-zinc-700: oklch(37.3% 0.006 286);
    --ac-zinc-800: oklch(27.4% 0.005 286);
    --ac-zinc-900: oklch(20.5% 0.004 286);
    --ac-zinc-950: oklch(14.5% 0.002 286);

    /* ------------------------------------------------------------------
       Semantic surface tokens (light mode)
    ------------------------------------------------------------------ */
    --ac-bg:             oklch(100% 0 0);          /* white */
    --ac-surface:        oklch(100% 0 0);          /* white */
    --ac-surface-hover:  var(--ac-zinc-100);
    --ac-border:         var(--ac-zinc-100);
    --ac-border-strong:  var(--ac-zinc-200);
    --ac-text-main:      var(--ac-zinc-900);
    --ac-text-dim:       var(--ac-zinc-600);
    --ac-text-muted:     var(--ac-zinc-400);

    /* Backward-compatible semantic aliases used by older templates. */
    --ac-surface-2:       var(--ac-zinc-50);
    --ac-surface-raised:  var(--ac-zinc-50);
    --ac-radius:          var(--ac-radius-lg);
    --ac-radius-full:     var(--ac-radius-pill);
    --ac-success:         var(--ac-green-700);
    --ac-success-bg:      color-mix(in oklch, var(--ac-green-400) 12%, transparent);
    --ac-danger:          var(--ac-red-500);
    --ac-danger-bg:       color-mix(in oklch, var(--ac-red-500) 10%, transparent);
    --ac-green-500:       oklch(62% 0.15 150);
    --ac-amber-500:       oklch(70% 0.16 85);

    /* ------------------------------------------------------------------
       Sidebar theme tokens (light mode)
    ------------------------------------------------------------------ */
    --ac-sidebar-bg:              oklch(100% 0 0);
    --ac-sidebar-border:          var(--ac-border);
    --ac-sidebar-text:            var(--ac-text-main);
    --ac-sidebar-muted:           var(--ac-text-muted);
    --ac-sidebar-hover-bg:        var(--ac-zinc-100);
    --ac-sidebar-active-bg:       color-mix(in oklch, var(--ac-zinc-200) 58%, transparent);
    --ac-sidebar-active-text:     var(--ac-brand-600);
    --ac-sidebar-control-bg:      color-mix(in oklch, var(--ac-zinc-200) 55%, transparent);
    --ac-sidebar-control-active:  oklch(100% 0 0);
    --ac-sidebar-control-border:  transparent;
    --ac-sidebar-control-text:    var(--ac-zinc-500);
    --ac-sidebar-control-active-text: var(--ac-zinc-800);

    /* ------------------------------------------------------------------
       Status colors
    ------------------------------------------------------------------ */
    --ac-red-100:    oklch(94% 0.05 25);
    --ac-red-400:    oklch(65% 0.22 25);
    --ac-red-500:    oklch(58% 0.23 25);
    --ac-red-700:    oklch(45% 0.19 25);

    --ac-amber-100:  oklch(96% 0.06 85);
    --ac-amber-400:  oklch(82% 0.16 85);
    --ac-amber-700:  oklch(54% 0.15 85);

    --ac-green-100:  oklch(96% 0.05 150);
    --ac-green-400:  oklch(75% 0.17 150);
    --ac-green-700:  oklch(50% 0.14 150);

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

    /* ------------------------------------------------------------------
       Border radius
    ------------------------------------------------------------------ */
    --ac-radius-none:   0px;
    --ac-radius-sm:     4px;
    --ac-radius-md:     6px;
    --ac-radius-lg:     8px;
    --ac-radius-xl:     12px;
    --ac-radius-2xl:    16px;
    --ac-radius-3xl:    24px;
    --ac-radius-card:   2rem;     /* signature card radius */
    --ac-radius-pill:   9999px;

    /* ------------------------------------------------------------------
       Typography
    ------------------------------------------------------------------ */
    --ac-font-sans:  'Inter', system-ui, -apple-system, sans-serif;
    --ac-font-mono:  ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

    --ac-text-xs:   0.75rem;    /* 12px */
    --ac-text-sm:   0.875rem;   /* 14px */
    --ac-text-base: 1rem;       /* 16px */
    --ac-text-lg:   1.125rem;   /* 18px */
    --ac-text-xl:   1.25rem;    /* 20px */
    --ac-text-2xl:  1.5rem;     /* 24px */
    --ac-text-3xl:  1.875rem;   /* 30px */
    --ac-text-4xl:  2.25rem;    /* 36px */
    --ac-text-5xl:  3rem;       /* 48px */

    --ac-leading-none:    1;
    --ac-leading-tight:   1.25;
    --ac-leading-snug:    1.375;
    --ac-leading-normal:  1.5;
    --ac-leading-relaxed: 1.625;
    --ac-leading-loose:   2;

    --ac-tracking-tighter: -0.05em;
    --ac-tracking-tight:   -0.025em;
    --ac-tracking-normal:  0em;
    --ac-tracking-wide:    0.025em;
    --ac-tracking-wider:   0.05em;
    --ac-tracking-widest:  0.1em;

    /* ------------------------------------------------------------------
       Shadows
    ------------------------------------------------------------------ */
    --ac-shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ac-shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --ac-shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --ac-shadow-card: 0 8px 30px rgb(0 0 0 / 0.04);
    --ac-shadow-none: none;

    /* ------------------------------------------------------------------
       Transitions
    ------------------------------------------------------------------ */
    --ac-transition-fast:   all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ac-transition-base:   all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --ac-transition-slow:   all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --ac-transition-colors: color 200ms, background-color 200ms, border-color 200ms;
    --ac-transition-transform: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ------------------------------------------------------------------
       Z-index scale
    ------------------------------------------------------------------ */
    --ac-z-0:    0;
    --ac-z-10:   10;
    --ac-z-20:   20;
    --ac-z-30:   30;
    --ac-z-40:   40;
    --ac-z-50:   50;
    --ac-z-auto: auto;

  }

  /* --------------------------------------------------------------------
     Dark mode token overrides
  -------------------------------------------------------------------- */
  :root.dark {
    color-scheme: dark;

    --ac-bg:             oklch(14.5% 0.002 286);   /* zinc-950 / #09090b */
    --ac-surface:        oklch(20.5% 0.004 286);   /* zinc-900 / #18181b */
    --ac-surface-hover:  oklch(27.4% 0.005 286);   /* zinc-800 / #27272a */
    --ac-border:         color-mix(in oklch, oklch(27.4% 0.005 286) 80%, transparent);
    --ac-border-strong:  oklch(37.3% 0.006 286);
    --ac-text-main:      oklch(98.2% 0.001 286);   /* zinc-50 */
    --ac-text-dim:       oklch(71% 0.004 286);     /* zinc-400 */
    --ac-text-muted:     oklch(55.6% 0.006 286);   /* zinc-500 */

    --ac-surface-2:       oklch(23.5% 0.004 286);
    --ac-surface-raised:  oklch(23.5% 0.004 286);
    --ac-success:         var(--ac-green-400);
    --ac-success-bg:      color-mix(in oklch, var(--ac-green-400) 12%, transparent);
    --ac-danger:          var(--ac-red-400);
    --ac-danger-bg:       color-mix(in oklch, var(--ac-red-500) 12%, transparent);
    --ac-green-500:       var(--ac-green-400);
    --ac-amber-500:       var(--ac-amber-400);

    --ac-sidebar-bg:              oklch(17.5% 0.003 286);
    --ac-sidebar-border:          color-mix(in oklch, var(--ac-zinc-800) 82%, transparent);
    --ac-sidebar-text:            var(--ac-zinc-50);
    --ac-sidebar-muted:           var(--ac-zinc-500);
    --ac-sidebar-hover-bg:        color-mix(in oklch, var(--ac-zinc-800) 72%, transparent);
    --ac-sidebar-active-bg:       color-mix(in oklch, var(--ac-brand-500) 16%, var(--ac-zinc-900));
    --ac-sidebar-active-text:     var(--ac-brand-400);
    --ac-sidebar-control-bg:      var(--ac-zinc-900);
    --ac-sidebar-control-active:  var(--ac-zinc-800);
    --ac-sidebar-control-border:  color-mix(in oklch, var(--ac-zinc-700) 70%, transparent);
    --ac-sidebar-control-text:    var(--ac-zinc-500);
    --ac-sidebar-control-active-text: var(--ac-zinc-50);

    --ac-shadow-card:    none;
    --ac-shadow-sm:      none;
    --ac-shadow-md:      none;
    --ac-shadow-lg:      none;

  }

}

/* ==========================================================================
   ALGROVEON CSS – Base
   @layer base
   Reset, @font-face, global defaults. No class selectors here.
   ========================================================================== */

/* ------------------------------------------------------------------
   @font-face: Inter Variable
------------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/InterVariable.woff2') format('woff2');
}

/* ------------------------------------------------------------------
   @font-face: Material Symbols Outlined
   Variable font: wght 100–700, FILL 0–1, GRAD -50–200, opsz 20–48
------------------------------------------------------------------ */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  user-select: none;
}

/* Filled variant */
.material-symbols-outlined.filled {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Size modifiers */
.material-symbols-outlined.sz-20 { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.material-symbols-outlined.sz-24 { font-size: 24px; }
.material-symbols-outlined.sz-28 { font-size: 28px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.material-symbols-outlined.sz-32 { font-size: 32px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.material-symbols-outlined.sz-40 { font-size: 40px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.material-symbols-outlined.sz-48 { font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }

/* Filled + size */
.material-symbols-outlined.filled.sz-20 { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.material-symbols-outlined.filled.sz-28 { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; }

@layer base {

  /* Box sizing */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Remove default margin/padding */
  * {
    margin: 0;
    padding: 0;
  }

  /* HTML / Body defaults */
  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    font-family: var(--ac-font-sans);
    font-size: var(--ac-text-base);
    line-height: var(--ac-leading-normal);
    color: var(--ac-text-main);
    background-color: var(--ac-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Images */
  img, video {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Form elements inherit font */
  input, button, textarea, select {
    font: inherit;
  }

  /* Links */
  a {
    color: inherit;
    text-decoration: none;
  }

  /* Lists */
  ul, ol {
    list-style: none;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  /* Button base */
  button {
    cursor: pointer;
    background: none;
    border: none;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--ac-zinc-700);
    border-radius: var(--ac-radius-pill);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--ac-zinc-600);
  }

  /* Selection */
  ::selection {
    background-color: var(--ac-brand-500);
    color: oklch(100% 0 0);
  }

  /* Focus visible */
  :focus-visible {
    outline: 2px solid var(--ac-brand-500);
    outline-offset: 2px;
  }

  /* Canvas */
  canvas {
    display: block;
  }

}

/* ==========================================================================
   ALGROVEON CSS – Layout Utilities
   display, flex, grid, position, overflow, sizing
   ========================================================================== */

@layer utilities {

  /* ------------------------------------------------------------------
     Display
  ------------------------------------------------------------------ */
  .block          { display: block; }
  .inline-block   { display: inline-block; }
  .inline         { display: inline; }
  .flex           { display: flex; }
  .inline-flex    { display: inline-flex; }
  .grid           { display: grid; }
  .inline-grid    { display: inline-grid; }
  .hidden         { display: none; }
  .contents       { display: contents; }

  /* ------------------------------------------------------------------
     Flexbox
  ------------------------------------------------------------------ */
  .flex-row        { flex-direction: row; }
  .flex-col        { flex-direction: column; }
  .flex-row-reverse { flex-direction: row-reverse; }
  .flex-wrap       { flex-wrap: wrap; }
  .flex-nowrap     { flex-wrap: nowrap; }
  .flex-1          { flex: 1 1 0%; }
  .flex-auto       { flex: 1 1 auto; }
  .flex-none       { flex: none; }
  .flex-shrink-0   { flex-shrink: 0; }
  .flex-grow       { flex-grow: 1; }

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

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

  /* Align self */
  .self-auto       { align-self: auto; }
  .self-start      { align-self: flex-start; }
  .self-center     { align-self: center; }
  .self-end        { align-self: flex-end; }
  .self-stretch    { align-self: stretch; }

  /* mt-auto shorthand for flex spacing */
  .mt-auto { margin-top: auto; }
  .ml-auto { margin-left: auto; }
  .mr-auto { margin-right: auto; }
  .mb-auto { margin-bottom: auto; }
  .mx-auto { margin-left: auto; margin-right: auto; }

  /* ------------------------------------------------------------------
     Grid
  ------------------------------------------------------------------ */
  .grid-cols-1   { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-6   { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-cols-12  { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .col-span-1    { grid-column: span 1 / span 1; }
  .col-span-2    { grid-column: span 2 / span 2; }
  .col-span-3    { grid-column: span 3 / span 3; }
  .col-span-4    { grid-column: span 4 / span 4; }
  .col-span-6    { grid-column: span 6 / span 6; }
  .col-span-full { grid-column: 1 / -1; }

  .auto-rows-auto  { grid-auto-rows: auto; }
  .auto-rows-fr    { grid-auto-rows: minmax(0, 1fr); }

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

  .gap-x-2  { column-gap: var(--ac-space-2); }
  .gap-x-4  { column-gap: var(--ac-space-4); }
  .gap-x-6  { column-gap: var(--ac-space-6); }
  .gap-y-2  { row-gap: var(--ac-space-2); }
  .gap-y-4  { row-gap: var(--ac-space-4); }
  .gap-y-6  { row-gap: var(--ac-space-6); }

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

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

  .-top-4    { top: calc(-1 * var(--ac-space-4)); }
  .-right-4  { right: calc(-1 * var(--ac-space-4)); }
  .-bottom-4 { bottom: calc(-1 * var(--ac-space-4)); }
  .-left-4   { left: calc(-1 * var(--ac-space-4)); }

  /* ------------------------------------------------------------------
     Z-index
  ------------------------------------------------------------------ */
  .z-0     { z-index: 0; }
  .z-10    { z-index: 10; }
  .z-20    { z-index: 20; }
  .z-30    { z-index: 30; }
  .z-40    { z-index: 40; }
  .z-50    { z-index: 50; }
  .-z-1    { z-index: -1; }
  .z-auto  { z-index: auto; }

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

  /* ------------------------------------------------------------------
     Width
  ------------------------------------------------------------------ */
  .w-auto  { width: auto; }
  .w-full  { width: 100%; }
  .w-screen { width: 100vw; }
  .w-px    { width: var(--ac-space-px); }
  .w-1     { width: var(--ac-space-1); }
  .w-2     { width: var(--ac-space-2); }
  .w-3     { width: var(--ac-space-3); }
  .w-4     { width: var(--ac-space-4); }
  .w-5     { width: var(--ac-space-5); }
  .w-6     { width: var(--ac-space-6); }
  .w-7     { width: var(--ac-space-7); }
  .w-8     { width: var(--ac-space-8); }
  .w-9     { width: var(--ac-space-9); }
  .w-10    { width: var(--ac-space-10); }
  .w-12    { width: var(--ac-space-12); }
  .w-16    { width: var(--ac-space-16); }
  .w-20    { width: var(--ac-space-20); }
  .w-24    { width: var(--ac-space-24); }
  .w-32    { width: var(--ac-space-32); }
  .w-64    { width: 256px; }
  .w-72    { width: 288px; }

  /* ------------------------------------------------------------------
     Height
  ------------------------------------------------------------------ */
  .h-auto   { height: auto; }
  .h-full   { height: 100%; }
  .h-screen { height: 100vh; }
  .h-px     { height: var(--ac-space-px); }
  .h-1      { height: var(--ac-space-1); }
  .h-2      { height: var(--ac-space-2); }
  .h-3      { height: var(--ac-space-3); }
  .h-4      { height: var(--ac-space-4); }
  .h-5      { height: var(--ac-space-5); }
  .h-6      { height: var(--ac-space-6); }
  .h-7      { height: var(--ac-space-7); }
  .h-8      { height: var(--ac-space-8); }
  .h-9      { height: var(--ac-space-9); }
  .h-10     { height: var(--ac-space-10); }
  .h-12     { height: var(--ac-space-12); }
  .h-16     { height: var(--ac-space-16); }
  .h-20     { height: var(--ac-space-20); }
  .h-24     { height: var(--ac-space-24); }
  .h-32     { height: var(--ac-space-32); }
  .h-48     { height: 192px; }
  .h-64     { height: 256px; }

  /* ------------------------------------------------------------------
     Min/Max
  ------------------------------------------------------------------ */
  .min-h-screen { min-height: 100vh; }
  .min-h-0      { min-height: 0; }
  .min-w-0      { min-width: 0; }
  .max-w-sm     { max-width: 384px; }
  .max-w-md     { max-width: 448px; }
  .max-w-lg     { max-width: 512px; }
  .max-w-xl     { max-width: 576px; }
  .max-w-2xl    { max-width: 672px; }
  .max-w-3xl    { max-width: 768px; }
  .max-w-4xl    { max-width: 896px; }
  .max-w-full   { max-width: 100%; }

  /* ------------------------------------------------------------------
     Aspect ratio
  ------------------------------------------------------------------ */
  .aspect-square  { aspect-ratio: 1 / 1; }
  .aspect-video   { aspect-ratio: 16 / 9; }

  /* ------------------------------------------------------------------
     Responsive: sm (640px)
  ------------------------------------------------------------------ */
  @media (min-width: 640px) {
    .sm\:block        { display: block; }
    .sm\:hidden       { display: none; }
    .sm\:flex         { display: flex; }
    .sm\:flex-row     { flex-direction: row; }
    .sm\:items-center { align-items: center; }
    .sm\:gap-4        { gap: var(--ac-space-4); }
    .sm\:col-span-2   { grid-column: span 2 / span 2; }
    .sm\:col-span-4   { grid-column: span 4 / span 4; }
    .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:w-auto       { width: auto; }
  }

  /* ------------------------------------------------------------------
     Responsive: md (768px)
  ------------------------------------------------------------------ */
  @media (min-width: 768px) {
    .md\:block        { display: block; }
    .md\:hidden       { display: none; }
    .md\:flex         { display: flex; }
    .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:col-span-2   { grid-column: span 2 / span 2; }
    .md\:col-span-3   { grid-column: span 3 / span 3; }
    .md\:col-span-4   { grid-column: span 4 / span 4; }
    .md\:col-span-full { grid-column: 1 / -1; }
  }

  /* ------------------------------------------------------------------
     Responsive: lg (1024px)
  ------------------------------------------------------------------ */
  @media (min-width: 1024px) {
    .lg\:block        { display: block; }
    .lg\:hidden       { display: none; }
    .lg\:flex         { display: flex; }
    .lg\:inline-flex  { display: inline-flex; }
    .lg\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:col-span-2   { grid-column: span 2 / span 2; }
    .lg\:col-span-3   { grid-column: span 3 / span 3; }
    .lg\:col-span-4   { grid-column: span 4 / span 4; }
    .lg\:col-span-6   { grid-column: span 6 / span 6; }
    .lg\:flex-row     { flex-direction: row; }
    .lg\:flex-col     { flex-direction: column; }
    .lg\:items-center { align-items: center; }
    .lg\:justify-start { justify-content: flex-start; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:w-64         { width: 256px; }
    .lg\:w-20         { width: var(--ac-space-20); }
    .lg\:flex-1       { flex: 1 1 0%; }
  }

  /* ------------------------------------------------------------------
     Responsive: xl (1280px)
  ------------------------------------------------------------------ */
  @media (min-width: 1280px) {
    .xl\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .xl\:col-span-4   { grid-column: span 4 / span 4; }
    .xl\:col-span-2   { grid-column: span 2 / span 2; }
  }

}

/* ==========================================================================
   ALGROVEON CSS – Spacing Utilities
   margin (m-*) and padding (p-*)
   ========================================================================== */

@layer utilities {

  /* ------------------------------------------------------------------
     Padding – all sides
  ------------------------------------------------------------------ */
  .p-0    { padding: var(--ac-space-0); }
  .p-1    { padding: var(--ac-space-1); }
  .p-2    { padding: var(--ac-space-2); }
  .p-3    { padding: var(--ac-space-3); }
  .p-4    { padding: var(--ac-space-4); }
  .p-5    { padding: var(--ac-space-5); }
  .p-6    { padding: var(--ac-space-6); }
  .p-7    { padding: var(--ac-space-7); }
  .p-8    { padding: var(--ac-space-8); }
  .p-9    { padding: var(--ac-space-9); }
  .p-10   { padding: var(--ac-space-10); }
  .p-12   { padding: var(--ac-space-12); }
  .p-16   { padding: var(--ac-space-16); }

  /* Padding x-axis */
  .px-0   { padding-left: var(--ac-space-0);  padding-right: var(--ac-space-0); }
  .px-1   { padding-left: var(--ac-space-1);  padding-right: var(--ac-space-1); }
  .px-2   { padding-left: var(--ac-space-2);  padding-right: var(--ac-space-2); }
  .px-3   { padding-left: var(--ac-space-3);  padding-right: var(--ac-space-3); }
  .px-4   { padding-left: var(--ac-space-4);  padding-right: var(--ac-space-4); }
  .px-5   { padding-left: var(--ac-space-5);  padding-right: var(--ac-space-5); }
  .px-6   { padding-left: var(--ac-space-6);  padding-right: var(--ac-space-6); }
  .px-7   { padding-left: var(--ac-space-7);  padding-right: var(--ac-space-7); }
  .px-8   { padding-left: var(--ac-space-8);  padding-right: var(--ac-space-8); }
  .px-10  { padding-left: var(--ac-space-10); padding-right: var(--ac-space-10); }
  .px-12  { padding-left: var(--ac-space-12); padding-right: var(--ac-space-12); }

  /* Padding y-axis */
  .py-0   { padding-top: var(--ac-space-0);  padding-bottom: var(--ac-space-0); }
  .py-1   { padding-top: var(--ac-space-1);  padding-bottom: var(--ac-space-1); }
  .py-2   { padding-top: var(--ac-space-2);  padding-bottom: var(--ac-space-2); }
  .py-3   { padding-top: var(--ac-space-3);  padding-bottom: var(--ac-space-3); }
  .py-4   { padding-top: var(--ac-space-4);  padding-bottom: var(--ac-space-4); }
  .py-5   { padding-top: var(--ac-space-5);  padding-bottom: var(--ac-space-5); }
  .py-6   { padding-top: var(--ac-space-6);  padding-bottom: var(--ac-space-6); }
  .py-7   { padding-top: var(--ac-space-7);  padding-bottom: var(--ac-space-7); }
  .py-8   { padding-top: var(--ac-space-8);  padding-bottom: var(--ac-space-8); }
  .py-10  { padding-top: var(--ac-space-10); padding-bottom: var(--ac-space-10); }
  .py-12  { padding-top: var(--ac-space-12); padding-bottom: var(--ac-space-12); }

  /* Padding individual */
  .pt-0   { padding-top: var(--ac-space-0); }
  .pt-1   { padding-top: var(--ac-space-1); }
  .pt-2   { padding-top: var(--ac-space-2); }
  .pt-3   { padding-top: var(--ac-space-3); }
  .pt-4   { padding-top: var(--ac-space-4); }
  .pt-6   { padding-top: var(--ac-space-6); }
  .pt-8   { padding-top: var(--ac-space-8); }
  .pb-0   { padding-bottom: var(--ac-space-0); }
  .pb-1   { padding-bottom: var(--ac-space-1); }
  .pb-2   { padding-bottom: var(--ac-space-2); }
  .pb-3   { padding-bottom: var(--ac-space-3); }
  .pb-4   { padding-bottom: var(--ac-space-4); }
  .pb-6   { padding-bottom: var(--ac-space-6); }
  .pb-8   { padding-bottom: var(--ac-space-8); }
  .pl-0   { padding-left: var(--ac-space-0); }
  .pl-3   { padding-left: var(--ac-space-3); }
  .pl-4   { padding-left: var(--ac-space-4); }
  .pl-6   { padding-left: var(--ac-space-6); }
  .pl-8   { padding-left: var(--ac-space-8); }
  .pr-0   { padding-right: var(--ac-space-0); }
  .pr-3   { padding-right: var(--ac-space-3); }
  .pr-4   { padding-right: var(--ac-space-4); }
  .pr-6   { padding-right: var(--ac-space-6); }

  /* ------------------------------------------------------------------
     Margin – all sides
  ------------------------------------------------------------------ */
  .m-0    { margin: var(--ac-space-0); }
  .m-1    { margin: var(--ac-space-1); }
  .m-2    { margin: var(--ac-space-2); }
  .m-3    { margin: var(--ac-space-3); }
  .m-4    { margin: var(--ac-space-4); }
  .m-6    { margin: var(--ac-space-6); }
  .m-8    { margin: var(--ac-space-8); }

  /* Margin x-axis */
  .mx-0   { margin-left: var(--ac-space-0);  margin-right: var(--ac-space-0); }
  .mx-2   { margin-left: var(--ac-space-2);  margin-right: var(--ac-space-2); }
  .mx-4   { margin-left: var(--ac-space-4);  margin-right: var(--ac-space-4); }

  /* Margin y-axis */
  .my-0   { margin-top: var(--ac-space-0);  margin-bottom: var(--ac-space-0); }
  .my-2   { margin-top: var(--ac-space-2);  margin-bottom: var(--ac-space-2); }
  .my-4   { margin-top: var(--ac-space-4);  margin-bottom: var(--ac-space-4); }

  /* Margin individual */
  .mt-0   { margin-top: var(--ac-space-0); }
  .mt-1   { margin-top: var(--ac-space-1); }
  .mt-2   { margin-top: var(--ac-space-2); }
  .mt-3   { margin-top: var(--ac-space-3); }
  .mt-4   { margin-top: var(--ac-space-4); }
  .mt-5   { margin-top: var(--ac-space-5); }
  .mt-6   { margin-top: var(--ac-space-6); }
  .mt-8   { margin-top: var(--ac-space-8); }
  .mt-10  { margin-top: var(--ac-space-10); }
  .mt-12  { margin-top: var(--ac-space-12); }
  .mb-0   { margin-bottom: var(--ac-space-0); }
  .mb-1   { margin-bottom: var(--ac-space-1); }
  .mb-2   { margin-bottom: var(--ac-space-2); }
  .mb-3   { margin-bottom: var(--ac-space-3); }
  .mb-4   { margin-bottom: var(--ac-space-4); }
  .mb-5   { margin-bottom: var(--ac-space-5); }
  .mb-6   { margin-bottom: var(--ac-space-6); }
  .mb-8   { margin-bottom: var(--ac-space-8); }
  .mb-10  { margin-bottom: var(--ac-space-10); }
  .ml-0   { margin-left: var(--ac-space-0); }
  .ml-1   { margin-left: var(--ac-space-1); }
  .ml-2   { margin-left: var(--ac-space-2); }
  .ml-3   { margin-left: var(--ac-space-3); }
  .ml-4   { margin-left: var(--ac-space-4); }
  .ml-6   { margin-left: var(--ac-space-6); }
  .mr-0   { margin-right: var(--ac-space-0); }
  .mr-1   { margin-right: var(--ac-space-1); }
  .mr-2   { margin-right: var(--ac-space-2); }
  .mr-3   { margin-right: var(--ac-space-3); }
  .mr-4   { margin-right: var(--ac-space-4); }

  /* Negative margins */
  .-mt-4  { margin-top: calc(-1 * var(--ac-space-4)); }
  .-mb-4  { margin-bottom: calc(-1 * var(--ac-space-4)); }
  .-ml-4  { margin-left: calc(-1 * var(--ac-space-4)); }
  .-mr-4  { margin-right: calc(-1 * var(--ac-space-4)); }

  /* ------------------------------------------------------------------
     Responsive spacing overrides
  ------------------------------------------------------------------ */
  @media (min-width: 1024px) {
    .lg\:px-5  { padding-left: var(--ac-space-5);  padding-right: var(--ac-space-5); }
    .lg\:px-8  { padding-left: var(--ac-space-8);  padding-right: var(--ac-space-8); }
    .lg\:px-12 { padding-left: var(--ac-space-12); padding-right: var(--ac-space-12); }
    .lg\:py-8  { padding-top: var(--ac-space-8);   padding-bottom: var(--ac-space-8); }
    .lg\:p-10  { padding: var(--ac-space-10); }
    .lg\:mb-10 { margin-bottom: var(--ac-space-10); }
  }

}

/* ==========================================================================
   ALGROVEON CSS – Typography Utilities
   font-size, font-weight, line-height, letter-spacing, text-transform
   ========================================================================== */

@layer utilities {

  /* ------------------------------------------------------------------
     Font family
  ------------------------------------------------------------------ */
  .font-sans  { font-family: var(--ac-font-sans); }
  .font-mono  { font-family: var(--ac-font-mono); }

  /* ------------------------------------------------------------------
     Font size
  ------------------------------------------------------------------ */
  .text-xs    { font-size: var(--ac-text-xs);   line-height: 1rem; }
  .text-sm    { font-size: var(--ac-text-sm);   line-height: 1.25rem; }
  .text-base  { font-size: var(--ac-text-base); line-height: 1.5rem; }
  .text-lg    { font-size: var(--ac-text-lg);   line-height: 1.75rem; }
  .text-xl    { font-size: var(--ac-text-xl);   line-height: 1.75rem; }
  .text-2xl   { font-size: var(--ac-text-2xl);  line-height: 2rem; }
  .text-3xl   { font-size: var(--ac-text-3xl);  line-height: 2.25rem; }
  .text-4xl   { font-size: var(--ac-text-4xl);  line-height: 2.5rem; }
  .text-5xl   { font-size: var(--ac-text-5xl);  line-height: 1; }
  .text-9xl   { font-size: 8rem; line-height: 1; }

  /* ------------------------------------------------------------------
     Font weight
  ------------------------------------------------------------------ */
  .font-thin        { font-weight: 100; }
  .font-extralight  { font-weight: 200; }
  .font-light       { font-weight: 300; }
  .font-normal      { font-weight: 400; }
  .font-medium      { font-weight: 500; }
  .font-semibold    { font-weight: 600; }
  .font-bold        { font-weight: 700; }
  .font-extrabold   { font-weight: 800; }

  /* ------------------------------------------------------------------
     Line height
  ------------------------------------------------------------------ */
  .leading-none     { line-height: var(--ac-leading-none); }
  .leading-tight    { line-height: var(--ac-leading-tight); }
  .leading-snug     { line-height: var(--ac-leading-snug); }
  .leading-normal   { line-height: var(--ac-leading-normal); }
  .leading-relaxed  { line-height: var(--ac-leading-relaxed); }
  .leading-loose    { line-height: var(--ac-leading-loose); }

  /* ------------------------------------------------------------------
     Letter spacing (tracking)
  ------------------------------------------------------------------ */
  .tracking-tighter { letter-spacing: var(--ac-tracking-tighter); }
  .tracking-tight   { letter-spacing: var(--ac-tracking-tight); }
  .tracking-normal  { letter-spacing: var(--ac-tracking-normal); }
  .tracking-wide    { letter-spacing: var(--ac-tracking-wide); }
  .tracking-wider   { letter-spacing: var(--ac-tracking-wider); }
  .tracking-widest  { letter-spacing: var(--ac-tracking-widest); }

  /* ------------------------------------------------------------------
     Text alignment
  ------------------------------------------------------------------ */
  .text-left    { text-align: left; }
  .text-center  { text-align: center; }
  .text-right   { text-align: right; }
  .text-justify { text-align: justify; }

  /* ------------------------------------------------------------------
     Text transform
  ------------------------------------------------------------------ */
  .uppercase    { text-transform: uppercase; }
  .lowercase    { text-transform: lowercase; }
  .capitalize   { text-transform: capitalize; }
  .normal-case  { text-transform: none; }

  /* ------------------------------------------------------------------
     Text decoration
  ------------------------------------------------------------------ */
  .underline        { text-decoration-line: underline; }
  .no-underline     { text-decoration-line: none; }
  .line-through     { text-decoration-line: line-through; }

  /* ------------------------------------------------------------------
     White space
  ------------------------------------------------------------------ */
  .whitespace-normal   { white-space: normal; }
  .whitespace-nowrap   { white-space: nowrap; }
  .whitespace-pre      { white-space: pre; }
  .whitespace-pre-wrap { white-space: pre-wrap; }

  /* ------------------------------------------------------------------
     Text overflow
  ------------------------------------------------------------------ */
  .truncate         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .text-ellipsis    { text-overflow: ellipsis; }
  .text-clip        { text-overflow: clip; }

  /* ------------------------------------------------------------------
     Font smoothing
  ------------------------------------------------------------------ */
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ------------------------------------------------------------------
     Responsive typography
  ------------------------------------------------------------------ */
  @media (min-width: 1024px) {
    .lg\:text-sm   { font-size: var(--ac-text-sm);   line-height: 1.25rem; }
    .lg\:text-base { font-size: var(--ac-text-base); line-height: 1.5rem; }
    .lg\:text-lg   { font-size: var(--ac-text-lg);   line-height: 1.75rem; }
    .lg\:text-xl   { font-size: var(--ac-text-xl);   line-height: 1.75rem; }
    .lg\:text-2xl  { font-size: var(--ac-text-2xl);  line-height: 2rem; }
    .lg\:text-3xl  { font-size: var(--ac-text-3xl);  line-height: 2.25rem; }
    .lg\:text-4xl  { font-size: var(--ac-text-4xl);  line-height: 2.5rem; }
  }

  /* Mobile-first overrides: max-width breakpoint for capping large text on small screens */
  @media (max-width: 639px) {
    .mob\:text-base { font-size: var(--ac-text-base); line-height: 1.5rem; }
    .mob\:text-lg   { font-size: var(--ac-text-lg);   line-height: 1.75rem; }
    .mob\:text-xl   { font-size: var(--ac-text-xl);   line-height: 1.75rem; }
    .mob\:text-2xl  { font-size: var(--ac-text-2xl);  line-height: 2rem; }
    .mob\:text-3xl  { font-size: var(--ac-text-3xl);  line-height: 2.25rem; }
  }

}

/* ==========================================================================
   ALGROVEON CSS – Border & Radius Utilities
   ========================================================================== */

@layer utilities {

  /* ------------------------------------------------------------------
     Border width
  ------------------------------------------------------------------ */
  .border-0   { border-width: 0px; }
  .border     { border-width: 1px; border-style: solid; }
  .border-2   { border-width: 2px; border-style: solid; }
  .border-4   { border-width: 4px; border-style: solid; }

  .border-t   { border-top-width: 1px;    border-top-style: solid; }
  .border-b   { border-bottom-width: 1px; border-bottom-style: solid; }
  .border-l   { border-left-width: 1px;   border-left-style: solid; }
  .border-r   { border-right-width: 1px;  border-right-style: solid; }
  .border-t-0 { border-top-width: 0px; }
  .border-b-0 { border-bottom-width: 0px; }

  /* ------------------------------------------------------------------
     Border radius
  ------------------------------------------------------------------ */
  .rounded-none  { border-radius: var(--ac-radius-none); }
  .rounded-sm    { border-radius: var(--ac-radius-sm); }
  .rounded       { border-radius: var(--ac-radius-md); }
  .rounded-md    { border-radius: var(--ac-radius-md); }
  .rounded-lg    { border-radius: var(--ac-radius-lg); }
  .rounded-xl    { border-radius: var(--ac-radius-xl); }
  .rounded-2xl   { border-radius: var(--ac-radius-2xl); }
  .rounded-3xl   { border-radius: var(--ac-radius-3xl); }
  .rounded-card  { border-radius: var(--ac-radius-card); }   /* 2rem – signature */
  .rounded-full  { border-radius: var(--ac-radius-pill); }

  /* Directional */
  .rounded-t-lg  { border-top-left-radius: var(--ac-radius-lg);  border-top-right-radius: var(--ac-radius-lg); }
  .rounded-b-lg  { border-bottom-left-radius: var(--ac-radius-lg); border-bottom-right-radius: var(--ac-radius-lg); }
  .rounded-l-lg  { border-top-left-radius: var(--ac-radius-lg);  border-bottom-left-radius: var(--ac-radius-lg); }
  .rounded-r-lg  { border-top-right-radius: var(--ac-radius-lg); border-bottom-right-radius: var(--ac-radius-lg); }
  .rounded-t-card { border-top-left-radius: var(--ac-radius-card); border-top-right-radius: var(--ac-radius-card); }
  .rounded-b-card { border-bottom-left-radius: var(--ac-radius-card); border-bottom-right-radius: var(--ac-radius-card); }

  /* ------------------------------------------------------------------
     Outline
  ------------------------------------------------------------------ */
  .outline-none   { outline: none; }
  .outline        { outline: 1px solid; }
  .outline-2      { outline: 2px solid; }
  .outline-brand  { outline-color: var(--ac-brand-500); }
  .ring           { box-shadow: 0 0 0 3px color-mix(in oklch, var(--ac-brand-500) 30%, transparent); }

  /* ------------------------------------------------------------------
     Divide (between children)
  ------------------------------------------------------------------ */
  .divide-y > * + * {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--ac-border);
  }
  .divide-x > * + * {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: var(--ac-border);
  }

}

/* ==========================================================================
   ALGROVEON CSS – Color Utilities
   bg-*, text-*, border-* + dark: variants
   ========================================================================== */

@layer utilities {

  /* ------------------------------------------------------------------
     Background colors
  ------------------------------------------------------------------ */
  .bg-transparent  { background-color: transparent; }
  .bg-white        { background-color: oklch(100% 0 0); }
  .bg-black        { background-color: oklch(0% 0 0); }

  /* Zinc */
  .bg-zinc-50      { background-color: var(--ac-zinc-50); }
  .bg-zinc-100     { background-color: var(--ac-zinc-100); }
  .bg-zinc-200     { background-color: var(--ac-zinc-200); }
  .bg-zinc-300     { background-color: var(--ac-zinc-300); }
  .bg-zinc-400     { background-color: var(--ac-zinc-400); }
  .bg-zinc-500     { background-color: var(--ac-zinc-500); }
  .bg-zinc-600     { background-color: var(--ac-zinc-600); }
  .bg-zinc-700     { background-color: var(--ac-zinc-700); }
  .bg-zinc-800     { background-color: var(--ac-zinc-800); }
  .bg-zinc-900     { background-color: var(--ac-zinc-900); }
  .bg-zinc-950     { background-color: var(--ac-zinc-950); }

  /* Brand */
  .bg-brand-300    { background-color: var(--ac-brand-300); }
  .bg-brand-400    { background-color: var(--ac-brand-400); }
  .bg-brand-500    { background-color: var(--ac-brand-500); }
  .bg-brand-600    { background-color: var(--ac-brand-600); }

  /* Semantic */
  .bg-base         { background-color: var(--ac-bg); }
  .bg-surface      { background-color: var(--ac-surface); }
  .bg-surface-hover { background-color: var(--ac-surface-hover); }

  /* Status */
  .bg-red-100      { background-color: var(--ac-red-100); }
  .bg-red-500      { background-color: var(--ac-red-500); }
  .bg-red-500\/10  { background-color: color-mix(in oklch, var(--ac-red-500) 10%, transparent); }
  .bg-amber-100    { background-color: var(--ac-amber-100); }
  .bg-green-100    { background-color: var(--ac-green-100); }

  /* Gradient */
  .bg-gradient-brand {
    background-image: linear-gradient(135deg, var(--ac-brand-600), var(--ac-brand-400));
  }

  /* ------------------------------------------------------------------
     Text colors
  ------------------------------------------------------------------ */
  .text-transparent  { color: transparent; }
  .text-white        { color: oklch(100% 0 0); }
  .text-black        { color: oklch(0% 0 0); }

  /* Zinc */
  .text-zinc-50      { color: var(--ac-zinc-50); }
  .text-zinc-100     { color: var(--ac-zinc-100); }
  .text-zinc-200     { color: var(--ac-zinc-200); }
  .text-zinc-300     { color: var(--ac-zinc-300); }
  .text-zinc-400     { color: var(--ac-zinc-400); }
  .text-zinc-500     { color: var(--ac-zinc-500); }
  .text-zinc-600     { color: var(--ac-zinc-600); }
  .text-zinc-700     { color: var(--ac-zinc-700); }
  .text-zinc-800     { color: var(--ac-zinc-800); }
  .text-zinc-900     { color: var(--ac-zinc-900); }
  .text-zinc-950     { color: var(--ac-zinc-950); }

  /* Brand */
  .text-brand-300    { color: var(--ac-brand-300); }
  .text-brand-400    { color: var(--ac-brand-400); }
  .text-brand-500    { color: var(--ac-brand-500); }
  .text-brand-600    { color: var(--ac-brand-600); }

  /* Semantic */
  .text-main         { color: var(--ac-text-main); }
  .text-dim          { color: var(--ac-text-dim); }
  .text-muted        { color: var(--ac-text-muted); }

  /* Status */
  .text-red-400      { color: var(--ac-red-400); }
  .text-red-700      { color: var(--ac-red-700); }
  .text-amber-400    { color: var(--ac-amber-400); }
  .text-amber-700    { color: var(--ac-amber-700); }
  .text-green-400    { color: var(--ac-green-400); }
  .text-green-700    { color: var(--ac-green-700); }

  /* ------------------------------------------------------------------
     Border colors
  ------------------------------------------------------------------ */
  .border-transparent    { border-color: transparent; }
  .border-white          { border-color: oklch(100% 0 0); }

  .border-zinc-100       { border-color: var(--ac-zinc-100); }
  .border-zinc-200       { border-color: var(--ac-zinc-200); }
  .border-zinc-300       { border-color: var(--ac-zinc-300); }
  .border-zinc-700       { border-color: var(--ac-zinc-700); }
  .border-zinc-800       { border-color: var(--ac-zinc-800); }
  .border-zinc-800\/80   { border-color: color-mix(in oklch, var(--ac-zinc-800) 80%, transparent); }

  .border-brand-500      { border-color: var(--ac-brand-500); }
  .border-surface        { border-color: var(--ac-border); }

  /* ------------------------------------------------------------------
     Dark mode color overrides
  ------------------------------------------------------------------ */

  /* Backgrounds */
  .dark .dark\:bg-transparent  { background-color: transparent; }
  .dark .dark\:bg-white        { background-color: oklch(100% 0 0); }
  .dark .dark\:bg-black        { background-color: oklch(0% 0 0); }
  .dark .dark\:bg-zinc-700     { background-color: var(--ac-zinc-700); }
  .dark .dark\:bg-zinc-800     { background-color: var(--ac-zinc-800); }
  .dark .dark\:bg-zinc-900     { background-color: var(--ac-zinc-900); }
  .dark .dark\:bg-zinc-950     { background-color: var(--ac-zinc-950); }
  .dark .dark\:bg-base         { background-color: var(--ac-bg); }
  .dark .dark\:bg-surface      { background-color: var(--ac-surface); }
  .dark .dark\:bg-surface-hover { background-color: var(--ac-surface-hover); }
  .dark .dark\:bg-brand-500    { background-color: var(--ac-brand-500); }
  .dark .dark\:bg-red-500\/10  { background-color: color-mix(in oklch, var(--ac-red-500) 10%, transparent); }

  /* Text */
  .dark .dark\:text-white      { color: oklch(100% 0 0); }
  .dark .dark\:text-zinc-50    { color: var(--ac-zinc-50); }
  .dark .dark\:text-zinc-100   { color: var(--ac-zinc-100); }
  .dark .dark\:text-zinc-200   { color: var(--ac-zinc-200); }
  .dark .dark\:text-zinc-300   { color: var(--ac-zinc-300); }
  .dark .dark\:text-zinc-400   { color: var(--ac-zinc-400); }
  .dark .dark\:text-zinc-500   { color: var(--ac-zinc-500); }
  .dark .dark\:text-zinc-950   { color: var(--ac-zinc-950); }
  .dark .dark\:text-brand-400  { color: var(--ac-brand-400); }
  .dark .dark\:text-brand-500  { color: var(--ac-brand-500); }
  .dark .dark\:text-red-400    { color: var(--ac-red-400); }

  /* Borders */
  .dark .dark\:border-zinc-700      { border-color: var(--ac-zinc-700); }
  .dark .dark\:border-zinc-800      { border-color: var(--ac-zinc-800); }
  .dark .dark\:border-zinc-800\/80  { border-color: color-mix(in oklch, var(--ac-zinc-800) 80%, transparent); }
  .dark .dark\:border-surface       { border-color: var(--ac-border); }

  /* Shadow */
  .dark .dark\:shadow-none { box-shadow: none; }

  /* ------------------------------------------------------------------
     Select / Option – Windows Chromium dark mode fix
     Windows kann bei background:transparent auf <select> auf
     System-Farben zurückfallen (weißer Hintergrund + nahezu weißer Text).
     color-scheme:dark explizit setzen verhindert das.
  ------------------------------------------------------------------ */
  .dark select { color-scheme: dark; }
  .dark option { background: var(--ac-surface); color: var(--ac-text-main); }

  /* ------------------------------------------------------------------
     Hover color variants
  ------------------------------------------------------------------ */
  .hover\:bg-zinc-100:hover        { background-color: var(--ac-zinc-100); }
  .hover\:bg-zinc-200:hover        { background-color: var(--ac-zinc-200); }
  .hover\:bg-zinc-700:hover        { background-color: var(--ac-zinc-700); }
  .hover\:bg-zinc-800:hover        { background-color: var(--ac-zinc-800); }
  .hover\:bg-surface-hover:hover   { background-color: var(--ac-surface-hover); }
  .hover\:text-white:hover         { color: oklch(100% 0 0); }
  .hover\:text-zinc-100:hover      { color: var(--ac-zinc-100); }
  .hover\:text-zinc-900:hover      { color: var(--ac-zinc-900); }
  .hover\:text-brand-400:hover     { color: var(--ac-brand-400); }
  .hover\:text-brand-500:hover     { color: var(--ac-brand-500); }

  .dark .dark\:hover\:bg-surface-hover:hover { background-color: var(--ac-surface-hover); }
  .dark .dark\:hover\:bg-zinc-700:hover      { background-color: var(--ac-zinc-700); }
  .dark .dark\:hover\:text-white:hover       { color: oklch(100% 0 0); }
  .dark .dark\:hover\:text-zinc-100:hover    { color: var(--ac-zinc-100); }

}

/* ==========================================================================
   ALGROVEON CSS – Effects Utilities
   shadow, opacity, transition, transform, filter, cursor, pointer-events
   ========================================================================== */

@layer utilities {

  /* ------------------------------------------------------------------
     Box shadow
  ------------------------------------------------------------------ */
  .shadow-none   { box-shadow: var(--ac-shadow-none); }
  .shadow-sm     { box-shadow: var(--ac-shadow-sm); }
  .shadow        { box-shadow: var(--ac-shadow-md); }
  .shadow-md     { box-shadow: var(--ac-shadow-md); }
  .shadow-lg     { box-shadow: var(--ac-shadow-lg); }
  .shadow-card   { box-shadow: var(--ac-shadow-card); }
  .shadow-brand  { box-shadow: 0 10px 25px color-mix(in oklch, var(--ac-brand-500) 20%, transparent); }

  /* ------------------------------------------------------------------
     Opacity
  ------------------------------------------------------------------ */
  .opacity-0    { opacity: 0; }
  .opacity-25   { opacity: 0.25; }
  .opacity-50   { opacity: 0.50; }
  .opacity-75   { opacity: 0.75; }
  .opacity-100  { opacity: 1; }

  /* ------------------------------------------------------------------
     Transition
  ------------------------------------------------------------------ */
  .transition         { transition: var(--ac-transition-base); }
  .transition-all     { transition: var(--ac-transition-base); }
  .transition-colors  { transition: var(--ac-transition-colors); }
  .transition-transform { transition: var(--ac-transition-transform); }
  .transition-none    { transition: none; }

  .duration-150  { transition-duration: 150ms; }
  .duration-200  { transition-duration: 200ms; }
  .duration-300  { transition-duration: 300ms; }
  .duration-400  { transition-duration: 400ms; }
  .duration-500  { transition-duration: 500ms; }

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

  /* ------------------------------------------------------------------
     Transform
  ------------------------------------------------------------------ */
  .scale-90      { transform: scale(0.9); }
  .scale-95      { transform: scale(0.95); }
  .scale-100     { transform: scale(1); }
  .scale-105     { transform: scale(1.05); }
  .scale-110     { transform: scale(1.1); }

  .rotate-0      { transform: rotate(0deg); }
  .rotate-12     { transform: rotate(12deg); }
  .rotate-45     { transform: rotate(45deg); }
  .rotate-90     { transform: rotate(90deg); }
  .rotate-180    { transform: rotate(180deg); }
  .-rotate-12    { transform: rotate(-12deg); }

  .translate-x-0  { transform: translateX(0); }
  .translate-y-0  { transform: translateY(0); }
  .-translate-x-1 { transform: translateX(-4px); }
  .-translate-y-1 { transform: translateY(-4px); }

  /* Hover transforms */
  .hover\:scale-100:hover { transform: scale(1); }
  .hover\:scale-105:hover { transform: scale(1.05); }
  .hover\:scale-110:hover { transform: scale(1.1); }
  .hover\:-translate-y-1:hover { transform: translateY(-4px); }

  .group:hover .group-hover\:scale-110 { transform: scale(1.1); }

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

  /* ------------------------------------------------------------------
     Pointer events
  ------------------------------------------------------------------ */
  .pointer-events-none { pointer-events: none; }
  .pointer-events-auto { pointer-events: auto; }

  /* ------------------------------------------------------------------
     User select
  ------------------------------------------------------------------ */
  .select-none  { user-select: none; }
  .select-text  { user-select: text; }
  .select-all   { user-select: all; }

  /* ------------------------------------------------------------------
     Visibility
  ------------------------------------------------------------------ */
  .visible    { visibility: visible; }
  .invisible  { visibility: hidden; }

  /* ------------------------------------------------------------------
     Animations
  ------------------------------------------------------------------ */
  @keyframes ac-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  @keyframes ac-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
  }

  @keyframes ac-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
  }

  @keyframes ac-bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50%       { transform: translateY(0);   animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }

  @keyframes ac-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .animate-spin    { animation: ac-spin 1s linear infinite; }
  .animate-ping    { animation: ac-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
  .animate-pulse   { animation: ac-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .animate-bounce  { animation: ac-bounce 1s infinite; }
  .animate-fade-in { animation: ac-fade-in 0.3s ease-out; }
  .animate-none    { animation: none; }

  /* ------------------------------------------------------------------
     Backdrop filter
  ------------------------------------------------------------------ */
  .backdrop-blur-sm  { backdrop-filter: blur(4px); }
  .backdrop-blur     { backdrop-filter: blur(8px); }
  .backdrop-blur-lg  { backdrop-filter: blur(16px); }

  /* ------------------------------------------------------------------
     Misc display helpers
  ------------------------------------------------------------------ */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

}

/* ==========================================================================
   ALGROVEON CSS – Card Component
   .ac-card, .ac-card--glow
   The signature surface pattern of all Algroveon apps.
   ========================================================================== */

@layer components {

  /* ------------------------------------------------------------------
     Base card
     Adapts to light/dark mode via design tokens.
  ------------------------------------------------------------------ */
  .ac-card {
    background-color: var(--ac-surface);
    border-radius: var(--ac-radius-card);
    border: 1px solid var(--ac-border);
    box-shadow: var(--ac-shadow-card);
    padding: var(--ac-space-8);
    position: relative;
    overflow: hidden;
  }

  /* Subtle glass effect variant */
  .ac-card--glass {
    background-color: color-mix(in oklch, var(--ac-surface) 85%, transparent);
    backdrop-filter: blur(12px);
  }

  /* ------------------------------------------------------------------
     Luna glow card
     Radial teal gradient at the top-left corner.
     Use for AI/Luna insight cards.
  ------------------------------------------------------------------ */
  .ac-card--glow {
    position: relative;
    z-index: 1;
  }

  .ac-card--glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
      circle at top left,
      color-mix(in oklch, var(--ac-brand-500) 15%, transparent),
      transparent 60%
    );
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
  }

  /* ------------------------------------------------------------------
     Card with decorative background icon
     Wrap the content in .ac-card__body to layer above the icon.
  ------------------------------------------------------------------ */
  .ac-card--deco {
    overflow: hidden;
  }

  .ac-card__deco-icon {
    position: absolute;
    right: calc(-1 * var(--ac-space-4));
    top: calc(-1 * var(--ac-space-4));
    color: var(--ac-zinc-100);
    font-size: 9rem;
    line-height: 1;
    transform: rotate(12deg);
    pointer-events: none;
    user-select: none;
  }

  :where(.dark) .ac-card__deco-icon {
    color: color-mix(in oklch, var(--ac-zinc-800) 50%, transparent);
  }

  .ac-card__body {
    position: relative;
    z-index: 10;
  }

  /* ------------------------------------------------------------------
     Card header label pattern
     Small uppercase label above headline.
  ------------------------------------------------------------------ */
  .ac-card__label {
    font-size: var(--ac-text-sm);
    font-weight: 600;
    letter-spacing: var(--ac-tracking-wide);
    text-transform: uppercase;
    color: var(--ac-text-muted);
    display: flex;
    align-items: center;
    gap: var(--ac-space-2);
    margin-bottom: var(--ac-space-6);
  }

  /* ------------------------------------------------------------------
     Stat card
     Used for metric display (large number + label)
  ------------------------------------------------------------------ */
  .ac-card--stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .ac-stat__value {
    font-size: var(--ac-text-4xl);
    font-weight: 700;
    letter-spacing: var(--ac-tracking-tighter);
    line-height: 1;
    color: var(--ac-text-main);
  }

  .ac-stat__unit {
    font-size: var(--ac-text-lg);
    font-weight: 500;
    color: var(--ac-text-muted);
    margin-left: var(--ac-space-1);
  }

  .ac-stat__sublabel {
    font-size: var(--ac-text-sm);
    color: var(--ac-text-muted);
    margin-top: var(--ac-space-1);
  }

  /* ------------------------------------------------------------------
     Progress bar (pill style)
  ------------------------------------------------------------------ */
  .ac-progress {
    width: 100%;
    height: var(--ac-space-4);
    background-color: var(--ac-zinc-100);
    border-radius: var(--ac-radius-pill);
    overflow: hidden;
  }

  :where(.dark) .ac-progress {
    background-color: var(--ac-zinc-800);
  }

  .ac-progress__fill {
    height: 100%;
    background-color: var(--ac-brand-500);
    border-radius: var(--ac-radius-pill);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

}

/* ==========================================================================
   ALGROVEON CSS – Button Component
   .ac-btn, .ac-btn--primary, .ac-btn--secondary, .ac-btn--ghost, .ac-btn--icon
   All buttons are pill-shaped (rounded-full).
   ========================================================================== */

@layer components {

  /* ------------------------------------------------------------------
     Base button
  ------------------------------------------------------------------ */
  .ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ac-space-2);
    padding: var(--ac-space-3) var(--ac-space-6);
    border-radius: var(--ac-radius-pill);
    font-size: var(--ac-text-sm);
    font-weight: 500;
    font-family: var(--ac-font-sans);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    transition: var(--ac-transition-base);
    user-select: none;
    text-decoration: none;
  }

  .ac-btn:focus-visible {
    outline: 2px solid var(--ac-brand-500);
    outline-offset: 2px;
  }

  .ac-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ------------------------------------------------------------------
     Primary: inverted (dark bg on light, white bg on dark)
     High contrast, signature action button.
  ------------------------------------------------------------------ */
  .ac-btn--primary {
    background-color: var(--ac-zinc-900);
    color: oklch(100% 0 0);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--ac-zinc-900) 20%, transparent);
  }

  :where(.dark) .ac-btn--primary {
    background-color: oklch(100% 0 0);
    color: var(--ac-zinc-950);
    box-shadow: 0 4px 16px color-mix(in oklch, oklch(100% 0 0) 10%, transparent);
  }

  .ac-btn--primary:hover {
    transform: scale(1.03);
  }

  /* ------------------------------------------------------------------
     Secondary: subtle muted background
  ------------------------------------------------------------------ */
  .ac-btn--secondary {
    background-color: var(--ac-zinc-100);
    color: var(--ac-zinc-700);
  }

  :where(.dark) .ac-btn--secondary {
    background-color: var(--ac-zinc-800);
    color: var(--ac-zinc-300);
  }

  .ac-btn--secondary:hover {
    background-color: var(--ac-zinc-200);
  }

  :where(.dark) .ac-btn--secondary:hover {
    background-color: var(--ac-zinc-700);
  }

  /* ------------------------------------------------------------------
     Brand: teal filled
  ------------------------------------------------------------------ */
  .ac-btn--brand {
    background-color: var(--ac-brand-500);
    color: oklch(100% 0 0);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--ac-brand-500) 30%, transparent);
  }

  .ac-btn--brand:hover {
    background-color: var(--ac-brand-600);
    transform: scale(1.03);
  }

  /* ------------------------------------------------------------------
     Ghost: transparent with border
  ------------------------------------------------------------------ */
  .ac-btn--ghost {
    background-color: transparent;
    color: var(--ac-text-dim);
    border: 1px solid var(--ac-border);
  }

  .ac-btn--ghost:hover {
    background-color: var(--ac-surface-hover);
    color: var(--ac-text-main);
  }

  /* ------------------------------------------------------------------
     Danger
  ------------------------------------------------------------------ */
  .ac-btn--danger {
    background-color: color-mix(in oklch, var(--ac-red-500) 10%, transparent);
    color: var(--ac-red-700);
    border: 1px solid color-mix(in oklch, var(--ac-red-500) 20%, transparent);
  }

  :where(.dark) .ac-btn--danger {
    color: var(--ac-red-400);
  }

  .ac-btn--danger:hover {
    background-color: color-mix(in oklch, var(--ac-red-500) 20%, transparent);
  }

  /* ------------------------------------------------------------------
     Size modifiers
  ------------------------------------------------------------------ */
  .ac-btn--sm {
    padding: var(--ac-space-2) var(--ac-space-4);
    font-size: var(--ac-text-xs);
  }

  .ac-btn--lg {
    padding: var(--ac-space-4) var(--ac-space-8);
    font-size: var(--ac-text-base);
  }

  /* ------------------------------------------------------------------
     Icon button (square pill)
  ------------------------------------------------------------------ */
  .ac-btn--icon {
    padding: var(--ac-space-3);
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: transparent;
    color: var(--ac-text-dim);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-pill);
  }

  .ac-btn--icon:hover {
    background-color: var(--ac-surface-hover);
    color: var(--ac-text-main);
  }

  /* ------------------------------------------------------------------
     Full width
  ------------------------------------------------------------------ */
  .ac-btn--full {
    width: 100%;
  }

}

/* ==========================================================================
   ALGROVEON CSS – Navigation Component
   .ac-sidebar, .ac-nav-item, .ac-nav-item--active
   ========================================================================== */

@layer components {

  /* ------------------------------------------------------------------
     Sidebar shell
  ------------------------------------------------------------------ */
  .ac-app-shell {
    display: flex;
    min-height: 100vh;
    padding-top: 96px;
  }

  .ac-main {
    flex: 1;
    min-width: 0;
    min-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 2.5rem 2rem;
  }

  .ac-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: calc(100vh - 96px);
    position: sticky;
    top: 96px;
    background-color: var(--ac-sidebar-bg);
    border-right: 1px solid var(--ac-sidebar-border);
    width: var(--ac-space-20);          /* 80px collapsed */
    flex-shrink: 0;
    transition: width var(--ac-transition-slow), background-color 200ms, border-color 200ms;
  }

  :where(.dark) .ac-sidebar {
    background-color: var(--ac-sidebar-bg);
    border-right-color: var(--ac-sidebar-border);
  }

  @media (min-width: 1024px) {
    .ac-sidebar {
      width: 256px;                     /* 16rem expanded */
    }
  }

  /* ------------------------------------------------------------------
     Sidebar logo area
  ------------------------------------------------------------------ */
  .ac-sidebar__brand {
    height: var(--ac-space-20);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--ac-space-3);
  }

  @media (min-width: 1024px) {
    .ac-sidebar__brand {
      justify-content: flex-start;
      padding: 0 var(--ac-space-8);
    }
  }

  .ac-logo-mark {
    width: var(--ac-space-8);
    height: var(--ac-space-8);
    border-radius: var(--ac-radius-pill);
    background-image: linear-gradient(135deg, var(--ac-brand-600), var(--ac-brand-400));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px color-mix(in oklch, var(--ac-brand-500) 20%, transparent);
  }

  .ac-logo-mark .material-symbols-outlined {
    font-size: 16px;
    color: oklch(100% 0 0);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  }

  .ac-logo-name {
    display: none;
    font-weight: 700;
    font-size: var(--ac-text-lg);
    letter-spacing: var(--ac-tracking-tight);
    margin-left: var(--ac-space-3);
    color: var(--ac-sidebar-text);
  }

  @media (min-width: 1024px) {
    .ac-logo-name {
      display: block;
    }
  }

  /* ------------------------------------------------------------------
     Nav group
  ------------------------------------------------------------------ */
  .ac-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ac-space-2);
    padding: var(--ac-space-2) var(--ac-space-3) var(--ac-space-6);
    margin-top: 0;
    overflow-y: auto;
  }

  /* ------------------------------------------------------------------
     Nav item – pill shape
  ------------------------------------------------------------------ */
  .ac-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ac-space-3);
    border-radius: var(--ac-radius-pill);
    font-size: var(--ac-text-sm);
    font-weight: 500;
    color: var(--ac-sidebar-muted);
    text-decoration: none;
    cursor: pointer;
    transition: var(--ac-transition-colors);
    border: none;
    background: none;
    width: 100%;
    gap: var(--ac-space-3);
  }

  @media (min-width: 1024px) {
    .ac-nav-item {
      justify-content: flex-start;
      padding: var(--ac-space-3) var(--ac-space-5);
    }
  }

  .ac-nav-item:hover {
    background-color: var(--ac-sidebar-hover-bg);
    color: var(--ac-sidebar-text);
  }

  :where(.dark) .ac-nav-item:hover {
    background-color: var(--ac-sidebar-hover-bg);
  }

  .ac-nav-item .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 150ms ease;
  }

  .ac-nav-item:hover .material-symbols-outlined {
    transform: scale(1.1);
  }

  .ac-nav-label {
    display: none;
  }

  @media (min-width: 1024px) {
    .ac-nav-label {
      display: block;
    }
  }

  /* ------------------------------------------------------------------
     Active nav item
  ------------------------------------------------------------------ */
  .ac-nav-item--active {
    background-color: var(--ac-sidebar-active-bg);
    color: var(--ac-sidebar-active-text);
  }

  :where(.dark) .ac-nav-item--active {
    background-color: var(--ac-sidebar-active-bg);
    color: var(--ac-sidebar-active-text);
  }

  .ac-nav-item--active:hover {
    background-color: var(--ac-sidebar-active-bg);
  }

  :where(.dark) .ac-nav-item--active:hover {
    background-color: var(--ac-sidebar-active-bg);
  }

  .ac-nav-item--active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  /* ------------------------------------------------------------------
     Sidebar footer
  ------------------------------------------------------------------ */
  .ac-sidebar__footer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--ac-space-2);
    padding: var(--ac-space-3) var(--ac-space-1) var(--ac-space-5);
    margin-top: auto;
    flex-shrink: 0;
  }

  .ac-locale-switch {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--ac-space-3);
    min-width: 0;
    width: auto;
  }

  .ac-locale-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ac-space-8);
    min-height: var(--ac-space-8);
    font-size: var(--ac-text-xs);
    font-weight: 600;
    color: var(--ac-sidebar-muted);
    text-decoration: none;
    border-radius: var(--ac-radius-pill);
    transition: var(--ac-transition-colors);
  }

  .ac-locale-link:hover {
    background-color: var(--ac-sidebar-hover-bg);
    color: var(--ac-sidebar-text);
  }

  .ac-locale-link--active { color: var(--ac-sidebar-active-text); }

  :where(.dark) .ac-locale-link--active { color: var(--ac-sidebar-active-text); }

  .ac-locale-sep {
    font-size: var(--ac-text-xs);
    color: var(--ac-sidebar-border);
  }

  @media (min-width: 1024px) {
    .ac-sidebar__footer {
      justify-content: space-between;
      align-items: stretch;
      flex-direction: row;
      gap: var(--ac-space-5);
      padding: var(--ac-space-3) var(--ac-space-6) var(--ac-space-6);
    }

    .ac-locale-switch {
      display: flex;
      flex: 0 0 auto;
    }
  }

  /* ------------------------------------------------------------------
     Theme toggle button
  ------------------------------------------------------------------ */
  .ac-theme-toggle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--ac-radius-pill);
    background-color: var(--ac-sidebar-control-bg);
    color: var(--ac-sidebar-control-text);
    cursor: pointer;
    border: 1px solid var(--ac-sidebar-control-border);
    transition: var(--ac-transition-colors);
    width: 72px;
    height: 40px;
    flex-shrink: 0;
  }

  .ac-theme-toggle::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 32px;
    height: 32px;
    border-radius: var(--ac-radius-pill);
    background-color: var(--ac-sidebar-control-active);
    box-shadow: var(--ac-shadow-sm);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms;
  }

  :where(.dark) .ac-theme-toggle {
    background-color: var(--ac-sidebar-control-bg);
    color: var(--ac-sidebar-control-text);
  }

  :where(.dark) .ac-theme-toggle::before {
    transform: translateX(32px);
  }

  .ac-theme-toggle:hover {
    color: var(--ac-sidebar-text);
  }

  .ac-theme-toggle .material-symbols-outlined {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 38px;
    transition: color 200ms;
  }

  .ac-theme-toggle .icon-light {
    color: var(--ac-sidebar-control-active-text);
  }

  .ac-theme-toggle .icon-dark {
    color: var(--ac-sidebar-control-text);
  }

  :where(.dark) .ac-theme-toggle .icon-light {
    color: var(--ac-sidebar-control-text);
  }

  :where(.dark) .ac-theme-toggle .icon-dark {
    color: var(--ac-sidebar-control-active-text);
  }

}

/*
  Material symbols are declared outside cascade layers above. Keep these
  display rules unlayered too, so both sides of the theme control render.
*/
.ac-theme-toggle .material-symbols-outlined { display: inline-flex; }

/* ==========================================================================
   ALGROVEON CSS – Badge & Label Components
   .ac-badge, .ac-label, .ac-chip
   ========================================================================== */

@layer components {

  /* ------------------------------------------------------------------
     Badge
     Small inline status indicators.
  ------------------------------------------------------------------ */
  .ac-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ac-space-1);
    padding: var(--ac-space-1) var(--ac-space-3);
    border-radius: var(--ac-radius-pill);
    font-size: var(--ac-text-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  /* Default / neutral */
  .ac-badge--neutral {
    background-color: var(--ac-zinc-100);
    color: var(--ac-zinc-700);
  }

  :where(.dark) .ac-badge--neutral {
    background-color: var(--ac-zinc-800);
    color: var(--ac-zinc-300);
  }

  /* Success */
  .ac-badge--success {
    background-color: var(--ac-green-100);
    color: var(--ac-green-700);
  }

  :where(.dark) .ac-badge--success {
    background-color: color-mix(in oklch, var(--ac-green-400) 10%, transparent);
    color: var(--ac-green-400);
  }

  /* Warning */
  .ac-badge--warning {
    background-color: var(--ac-amber-100);
    color: var(--ac-amber-700);
  }

  :where(.dark) .ac-badge--warning {
    background-color: color-mix(in oklch, var(--ac-amber-400) 10%, transparent);
    color: var(--ac-amber-400);
  }

  /* Danger */
  .ac-badge--danger {
    background-color: var(--ac-red-100);
    color: var(--ac-red-700);
  }

  :where(.dark) .ac-badge--danger {
    background-color: color-mix(in oklch, var(--ac-red-500) 10%, transparent);
    color: var(--ac-red-400);
  }

  /* Brand */
  .ac-badge--brand {
    background-color: color-mix(in oklch, var(--ac-brand-500) 12%, transparent);
    color: var(--ac-brand-600);
  }

  :where(.dark) .ac-badge--brand {
    color: var(--ac-brand-400);
  }

  /* ------------------------------------------------------------------
     Section label
     Used as card header labels, section titles.
     Uppercase, small, muted.
  ------------------------------------------------------------------ */
  .ac-label {
    font-size: var(--ac-text-sm);
    font-weight: 600;
    letter-spacing: var(--ac-tracking-wide);
    text-transform: uppercase;
    color: var(--ac-text-muted);
  }

  /* ------------------------------------------------------------------
     Chip / Tag
     Larger than badge, used for filter pills, tags.
  ------------------------------------------------------------------ */
  .ac-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ac-space-1);
    padding: var(--ac-space-2) var(--ac-space-4);
    border-radius: var(--ac-radius-pill);
    font-size: var(--ac-text-sm);
    font-weight: 500;
    border: 1px solid var(--ac-border);
    background-color: var(--ac-surface);
    color: var(--ac-text-dim);
    cursor: pointer;
    transition: var(--ac-transition-colors);
    user-select: none;
  }

  .ac-chip:hover {
    background-color: var(--ac-surface-hover);
    color: var(--ac-text-main);
  }

  .ac-chip--active {
    background-color: color-mix(in oklch, var(--ac-brand-500) 10%, transparent);
    border-color: color-mix(in oklch, var(--ac-brand-500) 30%, transparent);
    color: var(--ac-brand-500);
  }

  :where(.dark) .ac-chip--active {
    color: var(--ac-brand-400);
  }

}

/* ==========================================================================
   ALGROVEON CSS – Form Components
   Inputs, textareas, selects – minimal, token-based.
   ========================================================================== */

@layer components {

  /* ------------------------------------------------------------------
     Base input
  ------------------------------------------------------------------ */
  .ac-input {
    display: block;
    width: 100%;
    padding: var(--ac-space-3) var(--ac-space-4);
    border-radius: var(--ac-radius-xl);
    border: 1px solid var(--ac-border-strong);
    background-color: var(--ac-bg);
    color: var(--ac-text-main);
    font-size: var(--ac-text-sm);
    font-family: var(--ac-font-sans);
    line-height: var(--ac-leading-normal);
    transition: var(--ac-transition-colors);
  }

  :where(.dark) .ac-input {
    background-color: var(--ac-surface);
    border-color: var(--ac-zinc-700);
  }

  .ac-input::placeholder {
    color: var(--ac-text-muted);
  }

  .ac-input:focus {
    outline: none;
    border-color: var(--ac-brand-500);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ac-brand-500) 20%, transparent);
  }

  /* ------------------------------------------------------------------
     Textarea
  ------------------------------------------------------------------ */
  .ac-textarea {
    resize: vertical;
    min-height: 100px;
  }

  /* ------------------------------------------------------------------
     Select
  ------------------------------------------------------------------ */
  .ac-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ac-space-3) center;
    padding-right: var(--ac-space-10);
    cursor: pointer;
  }

  /* ------------------------------------------------------------------
     Form group
  ------------------------------------------------------------------ */
  .ac-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--ac-space-2);
  }

  .ac-label--form {
    font-size: var(--ac-text-sm);
    font-weight: 500;
    color: var(--ac-text-dim);
  }

  /* ------------------------------------------------------------------
     Rating / RPE stars (subjective input)
  ------------------------------------------------------------------ */
  .ac-rating {
    display: flex;
    gap: var(--ac-space-2);
    align-items: center;
  }

  .ac-rating__option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ac-space-10);
    height: var(--ac-space-10);
    border-radius: var(--ac-radius-pill);
    border: 1px solid var(--ac-border-strong);
    font-size: var(--ac-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--ac-transition-base);
    color: var(--ac-text-muted);
    background: none;
    font-family: var(--ac-font-sans);
  }

  .ac-rating__option:hover {
    border-color: var(--ac-brand-500);
    color: var(--ac-brand-500);
    transform: scale(1.1);
  }

  .ac-rating__option--active {
    background-color: var(--ac-brand-500);
    border-color: var(--ac-brand-500);
    color: oklch(100% 0 0);
  }

}

/* ==========================================================================
   ALGROVEON CSS – Table Component
   Used for activity lists, lap data, import logs.
   ========================================================================== */

@layer components {

  .ac-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--ac-radius-card);
    border: 1px solid var(--ac-border);
  }

  .ac-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ac-text-sm);
  }

  .ac-table thead {
    background-color: color-mix(in oklch, var(--ac-zinc-100) 50%, transparent);
  }

  :where(.dark) .ac-table thead {
    background-color: color-mix(in oklch, var(--ac-zinc-800) 50%, transparent);
  }

  .ac-table th {
    padding: var(--ac-space-3) var(--ac-space-4);
    text-align: left;
    font-size: var(--ac-text-xs);
    font-weight: 600;
    letter-spacing: var(--ac-tracking-wide);
    text-transform: uppercase;
    color: var(--ac-text-muted);
    white-space: nowrap;
  }

  .ac-table td {
    padding: var(--ac-space-4);
    color: var(--ac-text-dim);
    vertical-align: middle;
    border-top: 1px solid var(--ac-border);
  }

  .ac-table tbody tr {
    transition: background-color 150ms ease;
  }

  .ac-table tbody tr:hover {
    background-color: color-mix(in oklch, var(--ac-zinc-100) 50%, transparent);
  }

  :where(.dark) .ac-table tbody tr:hover {
    background-color: color-mix(in oklch, var(--ac-zinc-800) 30%, transparent);
  }

  .ac-table td:first-child,
  .ac-table th:first-child {
    padding-left: var(--ac-space-6);
  }

  .ac-table td:last-child,
  .ac-table th:last-child {
    padding-right: var(--ac-space-6);
  }

  /* Row link (clickable row) */
  .ac-table tbody tr.ac-table__row--link {
    cursor: pointer;
  }

  /* Status dot */
  .ac-table__status {
    display: inline-flex;
    align-items: center;
    gap: var(--ac-space-2);
  }

  .ac-table__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .ac-table__status-dot--success { background-color: var(--ac-green-400); }
  .ac-table__status-dot--warning { background-color: var(--ac-amber-400); }
  .ac-table__status-dot--danger  { background-color: var(--ac-red-400); }
  .ac-table__status-dot--muted   { background-color: var(--ac-zinc-400); }

}

/* ==========================================================================
   ALGROVEON CSS – Bento Grid Component
   Responsive 6-column grid for dashboard layouts.
   Mobile: 1 col → sm: 2 col → lg: 6 col
   ========================================================================== */

@layer components {

  .ac-bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ac-space-4);
  }

  @media (min-width: 640px) {
    .ac-bento-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--ac-space-5);
    }
  }

  @media (min-width: 1024px) {
    .ac-bento-grid {
      grid-template-columns: repeat(6, 1fr);
      gap: var(--ac-space-6);
    }
  }

  /* 3-column result summary (import pages) – stacked on very small, 3 cols otherwise */
  .ac-result-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ac-space-2);
    font-size: var(--ac-text-sm);
  }

  @media (min-width: 400px) {
    .ac-result-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--ac-space-3);
    }
  }

  /* 4-column stats grid (health, etc.) – 2 cols on mobile, 4 on desktop */
  .ac-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ac-space-4);
  }

  @media (min-width: 1024px) {
    .ac-stats-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--ac-space-6);
    }
  }

  /* Column spans – collapse gracefully at small sizes */
  .ac-bento-span-2,
  .ac-bento-span-4,
  .ac-bento-span-full {
    grid-column: span 1;
  }

  @media (min-width: 640px) {
    .ac-bento-span-2    { grid-column: span 1; }
    .ac-bento-span-4    { grid-column: span 2; }
    .ac-bento-span-full { grid-column: span 2; }
  }

  @media (min-width: 1024px) {
    .ac-bento-span-2    { grid-column: span 2; }
    .ac-bento-span-4    { grid-column: span 4; }
    .ac-bento-span-full { grid-column: span 6; }
  }

  /* Stat value: scale down on mobile */
  @media (max-width: 639px) {
    .ac-stat__value {
      font-size: var(--ac-text-3xl);
    }
  }

  /* Planning calendar grid */
  .ac-planning-grid { display: grid; }
  .ac-planning-grid--day   { grid-template-columns: minmax(0, 640px); gap: var(--ac-space-3); }
  .ac-planning-grid--week,
  .ac-planning-grid--2week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ac-space-3); }
  .ac-planning-grid--month { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ac-space-2); }

  .ac-planning-month-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--ac-space-2);
    margin-bottom: var(--ac-space-1);
  }

  @media (max-width: 639px) {
    /* Week/2-week: days stack vertically */
    .ac-planning-grid--week,
    .ac-planning-grid--2week {
      grid-template-columns: 1fr;
      gap: var(--ac-space-2);
    }

    .ac-planning-grid--week .ac-card,
    .ac-planning-grid--2week .ac-card {
      min-height: 100px !important;
    }

    /* Month: compact cells, keep 7-col layout */
    .ac-planning-grid--month .ac-card {
      min-height: var(--ac-space-16) !important;  /* 64px */
      padding: var(--ac-space-1) !important;
    }
  }

}

/* ==========================================================================
   ALGROVEON CSS – Mobile-first App Shell
   Responsive overrides for sidebar + main content area.
   ========================================================================== */

/* sm–lg (640–1023px): icon sidebar – tighter main padding */
@media (min-width: 640px) and (max-width: 1023px) {
  .ac-main {
    padding: var(--ac-space-6) var(--ac-space-5);
  }
}

/* mobile (<640px): sidebar → fixed bottom nav, main gets full width */
@media (max-width: 639px) {

  .ac-app-shell {
    padding-bottom: var(--ac-space-14);   /* 56px – bottom nav height */
  }

  .ac-main {
    padding: var(--ac-space-4);
    min-height: calc(100svh - 96px - var(--ac-space-14));
  }

  .ac-sidebar {
    width: 100%;
    height: var(--ac-space-14);           /* 56px */
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 100;                         /* above page content; no token exceeds 50 */
    border-right: none;
    border-top: 1px solid var(--ac-sidebar-border);
    overflow: hidden;
  }

  .ac-sidebar__brand,
  .ac-sidebar__footer {
    display: none;
  }

  .ac-nav {
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    padding: 0;
    gap: 0;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    margin-top: 0;
  }

  .ac-nav-item {
    flex: 1;
    flex-direction: column;
    gap: var(--ac-space-0-5);            /* 2px */
    padding: var(--ac-space-2) var(--ac-space-1);
    border-radius: 0;
    height: 100%;
    justify-content: center;
    min-width: 0;
  }

  .ac-nav-item .material-symbols-outlined {
    font-size: 22px;                      /* between sz-20 and sz-24, no direct token */
  }

  .ac-nav-label {
    display: block !important;
    font-size: 9px;                       /* below --ac-text-xs (12px), intentionally tiny */
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 var(--ac-space-0-5);      /* 2px */
  }

}

/* Theme-aware logo */
.ac-logo-light { display: block; }
.ac-logo-dark  { display: none; }
.dark .ac-logo-light { display: none; }
.dark .ac-logo-dark  { display: block; }

/* Footer-Links */
.am-footer-link {
  font-size: 0.875rem;
  color: var(--ac-text-dim);
  text-decoration: none;
}
.am-footer-link:hover { color: var(--ac-text-main); }

/* Sidebar-Logout-Button Hover */
.ac-sidebar-logout:hover { color: var(--ac-text-main) !important; }