/**
 * Masifi UI Kit v2.4 — Design System
 * https://masifi.com
 * 2026-04-01
 * 49 components · Style Dictionary v5 · Open Props informed
 */

/* Masifi UI Kit — Generated by Style Dictionary */
/* Do not edit manually — edit tokens/*.json and rebuild */

:root {
  --masifi-brand-primary: #4F46E5; /* Indigo 600 — functional (CTAs, links, nav). WCAG AA 5.5:1 */
  --masifi-brand-primary-glow: #6366F1; /* Indigo 500 — decorative (logo, gradients, shadows). May fail AA. */
  --masifi-brand-primary-hover: #4338CA; /* Indigo 700 — button hover */
  --masifi-brand-primary-active: #3730A3; /* Indigo 800 — button pressed, focus */
  --masifi-brand-primary-accent: #818CF8; /* Indigo 400 — metrics, tags, indicators */
  --masifi-brand-primary-highlight: #E0E7FF; /* Indigo 100 — badge bg, decoration */
  --masifi-sub-brand-cloud-base: #4F46E5;
  --masifi-sub-brand-cloud-light: #6366F1;
  --masifi-sub-brand-cloud-dark: #4338CA;
  --masifi-sub-brand-factura-base: #059669;
  --masifi-sub-brand-factura-light: #10B981;
  --masifi-sub-brand-factura-dark: #047857;
  --masifi-sub-brand-engage-base: #F97316;
  --masifi-sub-brand-engage-light: #FB923C;
  --masifi-sub-brand-engage-dark: #EA580C;
  --masifi-sub-brand-work-base: #0EA5E9;
  --masifi-sub-brand-work-light: #38BDF8;
  --masifi-sub-brand-work-dark: #0284C7;
  --masifi-accent-teal-base: #0D9488;
  --masifi-accent-teal-light: #14B8A6;
  --masifi-accent-teal-dark: #0F766E;
  --masifi-accent-amber-base: #D97706;
  --masifi-accent-amber-light: #F59E0B;
  --masifi-accent-amber-dark: #B45309;
  --masifi-accent-violet-base: #8B5CF6;
  --masifi-accent-violet-light: #A78BFA;
  --masifi-accent-violet-dark: #7C3AED;
  --masifi-semantic-success: #22c55e;
  --masifi-semantic-success-light: #86efac;
  --masifi-semantic-warning: #f59e0b;
  --masifi-semantic-warning-light: #fcd34d;
  --masifi-semantic-error: #ef4444;
  --masifi-semantic-error-light: #fca5a5;
  --masifi-semantic-info: #3b82f6;
  --masifi-semantic-info-light: #93c5fd;
  --masifi-font-family-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --masifi-font-family-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --masifi-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --masifi-font-size-xs: 0.75rem;
  --masifi-font-size-sm: 0.875rem;
  --masifi-font-size-base: 1rem;
  --masifi-font-size-md: 1.125rem;
  --masifi-font-size-lg: 1.25rem;
  --masifi-font-size-xl: 1.5rem;
  --masifi-font-size-2xl: 1.875rem;
  --masifi-font-size-3xl: 2.25rem;
  --masifi-font-size-4xl: 3rem;
  --masifi-font-size-5xl: 3.75rem;
  --masifi-font-size-fluid-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --masifi-font-size-fluid-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --masifi-font-size-fluid-2xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  --masifi-font-size-fluid-3xl: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  --masifi-font-size-fluid-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem);
  --masifi-font-size-fluid-5xl: clamp(3rem, 2rem + 3.5vw, 5rem);
  --masifi-font-weight-light: 300;
  --masifi-font-weight-regular: 400;
  --masifi-font-weight-medium: 500;
  --masifi-font-weight-semibold: 600;
  --masifi-font-weight-bold: 700;
  --masifi-font-weight-extrabold: 800;
  --masifi-font-leading-tight: 1.2;
  --masifi-font-leading-normal: 1.5;
  --masifi-font-leading-relaxed: 1.65;
  --masifi-font-leading-loose: 1.8;
  --masifi-space-1: 0.25rem;
  --masifi-space-2: 0.5rem;
  --masifi-space-3: 0.75rem;
  --masifi-space-4: 1rem;
  --masifi-space-5: 1.25rem;
  --masifi-space-6: 1.5rem;
  --masifi-space-8: 2rem;
  --masifi-space-10: 2.5rem;
  --masifi-space-12: 3rem;
  --masifi-space-16: 4rem;
  --masifi-space-20: 5rem;
  --masifi-space-fluid-1: clamp(0.5rem, 0.3rem + 0.5vw, 1rem);
  --masifi-space-fluid-2: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  --masifi-space-fluid-3: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --masifi-space-fluid-4: clamp(2rem, 1.5rem + 2vw, 4rem);
  --masifi-space-fluid-5: clamp(4rem, 3rem + 3vw, 6rem);
  --masifi-radius-sm: 4px;
  --masifi-radius-md: 8px;
  --masifi-radius-lg: 12px;
  --masifi-radius-xl: 16px;
  --masifi-radius-2xl: 24px;
  --masifi-radius-full: 9999px;
  --masifi-ease-default: cubic-bezier(0.25, 0, 0.3, 1); /* General UI transitions. Adopted from OP --ease-3. */
  --masifi-ease-in: cubic-bezier(0.7, 0, 1, 1); /* Elements entering/accelerating. From OP --ease-in-3. */
  --masifi-ease-out: cubic-bezier(0, 0, 0.3, 1); /* Elements exiting/decelerating. From OP --ease-out-3. */
  --masifi-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Symmetric transitions. Our own — smoother than OP --ease-in-out-3. */
  --masifi-ease-elastic: cubic-bezier(0.5, 1.25, 0.75, 1.25); /* Playful overshoot for toggles, switches. From OP --ease-elastic-out-3. */
  --masifi-ease-squish: cubic-bezier(0.5, -0.5, 0.1, 1.5); /* Press/release effect for buttons. From OP --ease-squish-3. */
  --masifi-duration-fast: 150ms;
  --masifi-duration-base: 250ms;
  --masifi-duration-slow: 400ms;
  --masifi-duration-slower: 600ms;
  --masifi-shadow-1: 0 1px 2px -1px rgba(0,0,0,0.1); /* Subtle. Badges, chips, small elements. */
  --masifi-shadow-2: 0 3px 5px -2px rgba(0,0,0,0.06), 0 7px 14px -5px rgba(0,0,0,0.1); /* Cards, dropdowns. */
  --masifi-shadow-3: 0 1px 2px -5px rgba(0,0,0,0.05), 0 4px 12px -5px rgba(0,0,0,0.08), 0 12px 15px -5px rgba(0,0,0,0.12); /* Elevated cards, popovers. */
  --masifi-shadow-4: 0 2px 2px -2px rgba(0,0,0,0.06), 0 5px 5px -2px rgba(0,0,0,0.08), 0 9px 9px -2px rgba(0,0,0,0.1), 0 16px 16px -2px rgba(0,0,0,0.12); /* Modals, dialogs. */
  --masifi-shadow-5: 0 2px 1px -2px rgba(0,0,0,0.06), 0 5px 5px -2px rgba(0,0,0,0.06), 0 10px 10px -2px rgba(0,0,0,0.08), 0 20px 20px -2px rgba(0,0,0,0.1), 0 40px 40px -2px rgba(0,0,0,0.12); /* Floating panels, drawers. */
  --masifi-shadow-6: 0 3px 2px -2px rgba(0,0,0,0.06), 0 7px 5px -2px rgba(0,0,0,0.06), 0 12px 10px -2px rgba(0,0,0,0.08), 0 22px 18px -2px rgba(0,0,0,0.1), 0 41px 33px -2px rgba(0,0,0,0.12), 0 100px 80px -2px rgba(0,0,0,0.14); /* Maximum elevation. Hero images, full-screen overlays. */
  --masifi-gradient-1: linear-gradient(to bottom right, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
  --masifi-gradient-2: linear-gradient(to bottom right, #48005c, #8300e2, #a269ff);
  --masifi-gradient-3: radial-gradient(circle at top right, hsl(180 100% 50%), hsl(180 100% 50% / 0%)), radial-gradient(circle at bottom left, hsl(328 100% 54%), hsl(328 100% 54% / 0%));
  --masifi-gradient-4: linear-gradient(to bottom right, #00F5A0, #00D9F5);
  --masifi-gradient-5: conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite);
  --masifi-gradient-6: conic-gradient(from -90deg at top left, black, white);
  --masifi-gradient-7: linear-gradient(to bottom right, #72C6EF, #004E8F);
  --masifi-gradient-8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
  --masifi-gradient-9: conic-gradient(from .5turn at bottom center, lightblue, white);
  --masifi-gradient-10: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
  --masifi-gradient-11: conic-gradient(at bottom left, deeppink, cyan);
  --masifi-gradient-12: conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85);
  --masifi-gradient-13: radial-gradient(circle at 50% 200%, #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7);
  --masifi-gradient-14: conic-gradient(at top right, lime, cyan);
  --masifi-gradient-15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7);
  --masifi-gradient-16: radial-gradient(circle at 50% -250%, #374151, #111827, #000);
  --masifi-gradient-17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet);
  --masifi-gradient-18: linear-gradient(0deg, hsla(0 100% 50% / 80%), hsla(0 100% 50% / 0) 75%), linear-gradient(60deg, hsla(60 100% 50% / 80%), hsla(60 100% 50% / 0) 75%), linear-gradient(120deg, hsla(120 100% 50% / 80%), hsla(120 100% 50% / 0) 75%), linear-gradient(180deg, hsla(180 100% 50% / 80%), hsla(180 100% 50% / 0) 75%), linear-gradient(240deg, hsla(240 100% 50% / 80%), hsla(240 100% 50% / 0) 75%), linear-gradient(300deg, hsla(300 100% 50% / 80%), hsla(300 100% 50% / 0) 75%);
  --masifi-gradient-19: linear-gradient(to bottom right, #ffe259, #ffa751);
  --masifi-gradient-20: conic-gradient(from -135deg at -10% center, #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4);
  --masifi-gradient-21: conic-gradient(from -90deg at 25% 115%, #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, #0000ff, #0000ff, #0000ff, #0000ff);
  --masifi-gradient-22: linear-gradient(to bottom right, #acb6e5, #86fde8);
  --masifi-gradient-23: linear-gradient(to bottom right, #536976, #292E49);
  --masifi-gradient-24: conic-gradient(from .5turn at 0% 0%, #00c476, 10%, #82b0ff, 90%, #00c476);
  --masifi-gradient-25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7);
  --masifi-gradient-26: linear-gradient(to bottom right, #9796f0, #fbc7d4);
  --masifi-gradient-27: conic-gradient(from .5turn at bottom left, deeppink, rebeccapurple);
  --masifi-gradient-28: conic-gradient(from -90deg at 50% 105%, white, orchid);
  --masifi-gradient-29: radial-gradient(circle at top right, hsl(250 100% 85%), hsl(250 100% 85% / 0%)), radial-gradient(circle at bottom left, hsl(220 90% 75%), hsl(220 90% 75% / 0%));
  --masifi-gradient-30: radial-gradient(circle at top right, hsl(150 100% 50%), hsl(150 100% 50% / 0%)), radial-gradient(circle at bottom left, hsl(328 100% 54%), hsl(328 100% 54% / 0%));
  --masifi-ratio-square: 1;
  --masifi-ratio-landscape: 4/3;
  --masifi-ratio-portrait: 3/4;
  --masifi-ratio-widescreen: 16/9;
  --masifi-ratio-ultrawide: 18/5;
  --masifi-ratio-golden: 1.618/1;
  --masifi-border-size-1: 1px;
  --masifi-border-size-2: 2px;
  --masifi-border-size-3: 5px;
  --masifi-border-size-4: 10px;
  --masifi-border-size-5: 25px;
  --masifi-content-width-narrow: 20ch;
  --masifi-content-width-prose: 45ch;
  --masifi-content-width-wide: 60ch;
}


/* Masifi UI Kit — Generated by Style Dictionary */
/* Do not edit manually — edit tokens/*.json and rebuild */

:root, [data-masifi-mode="light"] {
  --masifi-bg-base: #f7f7f9;
  --masifi-bg-elevated: #ffffff;
  --masifi-bg-sunken: #eeeeef;
  --masifi-text-primary: #1a1a2e;
  --masifi-text-secondary: #44446a;
  --masifi-text-tertiary: #71718f;
  --masifi-text-placeholder: #a0a0b8;
  --masifi-text-inverse: #ffffff;
  --masifi-border-default: #e2e2ea;
  --masifi-border-strong: #c8c8d4;
  --masifi-border-subtle: #f0f0f4;
  --masifi-surface-brand: rgba(79,70,229,0.06);
  --masifi-surface-success: rgba(34,197,94,0.06);
  --masifi-surface-warning: rgba(245,158,11,0.06);
  --masifi-surface-error: rgba(239,68,68,0.06);
  --masifi-surface-info: rgba(59,130,246,0.06);
  --masifi-input-bg: #ffffff;
  --masifi-input-border: #d4d4de;
  --masifi-input-focus-ring: rgba(79,70,229,0.25);
  --masifi-shadow-1: 0 1px 2px -1px rgba(26,26,46,0.1); /* Buttons resting, badges */
  --masifi-shadow-2: 0 3px 5px -2px rgba(26,26,46,0.04), 0 7px 14px -5px rgba(26,26,46,0.06); /* Cards, dropdowns */
  --masifi-shadow-3: 0 -1px 3px 0 rgba(26,26,46,0.03), 0 2px 5px -2px rgba(26,26,46,0.05), 0 12px 15px -5px rgba(26,26,46,0.08); /* Card hover, popovers */
  --masifi-shadow-4: 0 -2px 5px 0 rgba(26,26,46,0.03), 0 2px 2px -2px rgba(26,26,46,0.04), 0 5px 5px -2px rgba(26,26,46,0.05), 0 16px 16px -2px rgba(26,26,46,0.07); /* Modals, dialogs */
  --masifi-shadow-5: 0 -1px 2px 0 rgba(26,26,46,0.03), 0 5px 5px -2px rgba(26,26,46,0.04), 0 20px 20px -2px rgba(26,26,46,0.06), 0 40px 40px -2px rgba(26,26,46,0.08); /* Toast notifications, overlays */
  --masifi-shadow-6: 0 3px 2px -2px rgba(26,26,46,0.04), 0 7px 5px -2px rgba(26,26,46,0.04), 0 12px 10px -2px rgba(26,26,46,0.05), 0 22px 18px -2px rgba(26,26,46,0.06), 0 41px 33px -2px rgba(26,26,46,0.07), 0 100px 80px -2px rgba(26,26,46,0.08); /* Maximum elevation — focus modals, onboarding */
  --masifi-shadow-color: 220 3% 15%; /* HSL components for shadow color */
  --masifi-shadow-inner-1: inset 0 1px 2px 0 rgba(26,26,46,0.1); /* Sunken inputs, pressed states */
  --masifi-shadow-inner-2: inset 0 2px 8px 0 rgba(26,26,46,0.1); /* Deep sunken areas */
}


/* Masifi UI Kit — Generated by Style Dictionary */
/* Do not edit manually — edit tokens/*.json and rebuild */

[data-masifi-mode="dark"] {
  --masifi-bg-base: #08080c;
  --masifi-bg-elevated: #12121a;
  --masifi-bg-sunken: #06060a;
  --masifi-text-primary: #e8e8f0;
  --masifi-text-secondary: #a8a8c0;
  --masifi-text-tertiary: #6e6e8a;
  --masifi-text-placeholder: #4a4a64;
  --masifi-text-inverse: #1a1a2e;
  --masifi-border-default: #2a2a3a;
  --masifi-border-strong: #3a3a50;
  --masifi-border-subtle: #1e1e2c;
  --masifi-surface-brand: rgba(79,70,229,0.1);
  --masifi-surface-success: rgba(34,197,94,0.08);
  --masifi-surface-warning: rgba(245,158,11,0.08);
  --masifi-surface-error: rgba(239,68,68,0.08);
  --masifi-surface-info: rgba(59,130,246,0.08);
  --masifi-input-bg: #16162a;
  --masifi-input-border: #2a2a3a;
  --masifi-input-focus-ring: rgba(79,70,229,0.35);
  --masifi-shadow-1: 0 1px 2px -1px rgba(0,0,0,0.35);
  --masifi-shadow-2: 0 3px 5px -2px rgba(0,0,0,0.28), 0 7px 14px -5px rgba(0,0,0,0.31);
  --masifi-shadow-3: 0 -1px 3px 0 rgba(0,0,0,0.27), 0 2px 5px -2px rgba(0,0,0,0.29), 0 12px 15px -5px rgba(0,0,0,0.33);
  --masifi-shadow-4: 0 -2px 5px 0 rgba(0,0,0,0.27), 0 2px 2px -2px rgba(0,0,0,0.28), 0 5px 5px -2px rgba(0,0,0,0.29), 0 16px 16px -2px rgba(0,0,0,0.32);
  --masifi-shadow-5: 0 -1px 2px 0 rgba(0,0,0,0.27), 0 5px 5px -2px rgba(0,0,0,0.28), 0 20px 20px -2px rgba(0,0,0,0.31), 0 40px 40px -2px rgba(0,0,0,0.33);
  --masifi-shadow-6: 0 3px 2px -2px rgba(0,0,0,0.28), 0 7px 5px -2px rgba(0,0,0,0.28), 0 12px 10px -2px rgba(0,0,0,0.29), 0 22px 18px -2px rgba(0,0,0,0.31), 0 41px 33px -2px rgba(0,0,0,0.32), 0 100px 80px -2px rgba(0,0,0,0.33);
  --masifi-shadow-color: 220 40% 2%; /* HSL components — darker, more blue */
  --masifi-shadow-inner-1: inset 0 1px 2px 0 rgba(0,0,0,0.35);
  --masifi-shadow-inner-2: inset 0 2px 8px 0 rgba(0,0,0,0.35);
}


/* ============================================================================
   MASIFI UI KIT v2.2 — Full Component Layer (19 components)
   ============================================================================
   Zero dependencies. Style Dictionary tokens only.
   Easing and shadow values informed by Open Props research.
   
   Shadow usage guide:
     shadow-1 → subtle: buttons rest, badges, chips, table wrapper
     shadow-2 → default: card rest, stat-card, button hover
     shadow-3 → elevated: card hover, dropdowns, popovers, tooltips
     shadow-4 → high: modals, dialogs
     shadow-5 → max: overlays, drawers, floating panels
   
   Easing usage guide:
     ease-default → general purpose (most transitions)
     ease-out → exits, focus rings, inputs
     ease-in → elements entering viewport
     ease-in-out → symmetric open/close
     ease-elastic → toggles, switches (playful overshoot)
     ease-squish → button active press (subtle bounce-back)
   ============================================================================ */

/* === FONTS — local woff2 variable fonts === */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* === 0. BASE === */
:root {
  font-family: var(--masifi-font-family-body);
  font-size: var(--masifi-font-size-base);
  line-height: var(--masifi-font-leading-normal);
  color: var(--masifi-text-primary);
  background: var(--masifi-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--masifi-duration-slow) var(--masifi-ease-default),
              color var(--masifi-duration-slow) var(--masifi-ease-default);
}

/* === SUB-BRAND / ACCENT OVERRIDES === */
/* Sub-brands and accents are defined in components/31-37. */
/* Legacy classes (mail, ops, extra) removed — use accent-teal, accent-amber instead. */

/* === TYPOGRAPHY (fluid headings) === */
.masifi-h1 { font-family: var(--masifi-font-family-display); font-size: var(--masifi-font-size-fluid-4xl); font-weight: var(--masifi-font-weight-extrabold); line-height: var(--masifi-font-leading-tight); letter-spacing: -0.03em; color: var(--masifi-text-primary); }
.masifi-h2 { font-family: var(--masifi-font-family-display); font-size: var(--masifi-font-size-fluid-3xl); font-weight: var(--masifi-font-weight-bold); line-height: var(--masifi-font-leading-tight); letter-spacing: -0.02em; color: var(--masifi-text-primary); }
.masifi-h3 { font-family: var(--masifi-font-family-display); font-size: var(--masifi-font-size-fluid-2xl); font-weight: var(--masifi-font-weight-bold); line-height: var(--masifi-font-leading-tight); letter-spacing: -0.01em; color: var(--masifi-text-primary); }
.masifi-h4 { font-family: var(--masifi-font-family-display); font-size: var(--masifi-font-size-fluid-xl); font-weight: var(--masifi-font-weight-semibold); line-height: var(--masifi-font-leading-tight); color: var(--masifi-text-primary); }
.masifi-body { font-size: var(--masifi-font-size-base); line-height: var(--masifi-font-leading-relaxed); color: var(--masifi-text-secondary); }
.masifi-body-sm { font-size: var(--masifi-font-size-sm); line-height: var(--masifi-font-leading-relaxed); color: var(--masifi-text-tertiary); }
.masifi-caption { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); }
.masifi-overline { font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--masifi-brand-primary); }
.masifi-mono { font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-sm); }
.masifi-logo-gradient { background: linear-gradient(135deg, var(--masifi-brand-primary-glow), var(--masifi-brand-primary-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* === 1. CARD — shadow-2 rest, shadow-3 hover === */
.masifi-card { background: var(--masifi-bg-elevated); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-xl); padding: var(--masifi-space-6); box-shadow: var(--masifi-shadow-1); transition: all var(--masifi-duration-base) var(--masifi-ease-default); }
.masifi-card:hover { border-color: var(--masifi-border-strong); }
.masifi-card-interactive { cursor: pointer; }
.masifi-card-interactive:hover { border-color: var(--masifi-brand-primary); transform: translateY(-2px); box-shadow: var(--masifi-shadow-3); }
.masifi-card-highlight { border-color: var(--masifi-brand-primary); background: var(--masifi-surface-brand); }
.masifi-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--masifi-space-4); }
.masifi-card-title { font-size: var(--masifi-font-size-lg); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); }
.masifi-card-body { color: var(--masifi-text-secondary); font-size: var(--masifi-font-size-sm); line-height: var(--masifi-font-leading-relaxed); }

/* === 2. BUTTON — shadow-1 rest, shadow-2 hover, squish active === */
.masifi-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--masifi-space-2); padding: var(--masifi-space-3) var(--masifi-space-6); border-radius: var(--masifi-radius-lg); font-family: var(--masifi-font-family-body); font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-semibold); line-height: 1; cursor: pointer; border: 1px solid transparent; transition: all var(--masifi-duration-base) var(--masifi-ease-default); text-decoration: none; white-space: nowrap; min-height: 44px; }
.masifi-btn:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; }
.masifi-btn-primary { background: var(--masifi-brand-primary); color: #fff; box-shadow: var(--masifi-shadow-1); }
.masifi-btn-primary:hover { background: var(--masifi-brand-primary-hover); transform: translateY(-1px); box-shadow: var(--masifi-shadow-2); }
.masifi-btn-primary:active { transform: translateY(0) scale(0.98); box-shadow: var(--masifi-shadow-1); transition-timing-function: var(--masifi-ease-squish); }
.masifi-btn-secondary { background: var(--masifi-surface-brand); color: var(--masifi-brand-primary); border-color: var(--masifi-brand-primary); }
.masifi-btn-secondary:hover { background: var(--masifi-brand-primary); color: #fff; }
.masifi-btn-secondary:active { transform: scale(0.98); transition-timing-function: var(--masifi-ease-squish); }
.masifi-btn-ghost { background: transparent; color: var(--masifi-text-secondary); border-color: var(--masifi-border-default); }
.masifi-btn-ghost:hover { border-color: var(--masifi-border-strong); background: var(--masifi-bg-elevated); color: var(--masifi-text-primary); }
.masifi-btn-danger { background: var(--masifi-semantic-error); color: #fff; box-shadow: var(--masifi-shadow-1); }
.masifi-btn-danger:hover { background: #dc2626; transform: translateY(-1px); box-shadow: var(--masifi-shadow-2); }
.masifi-btn-danger:active { transform: translateY(0) scale(0.98); transition-timing-function: var(--masifi-ease-squish); }
.masifi-btn-sm { padding: var(--masifi-space-2) var(--masifi-space-4); font-size: var(--masifi-font-size-xs); border-radius: var(--masifi-radius-md); min-height: 44px; }
.masifi-btn-lg { padding: var(--masifi-space-4) var(--masifi-space-8); font-size: var(--masifi-font-size-base); border-radius: var(--masifi-radius-xl); }
.masifi-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.masifi-btn-icon { padding: var(--masifi-space-3); }
.masifi-btn-icon.masifi-btn-sm { padding: var(--masifi-space-2); }

/* === 3. BADGE === */
.masifi-badge { display: inline-flex; align-items: center; gap: var(--masifi-space-1); padding: 3px var(--masifi-space-3); border-radius: var(--masifi-radius-full); font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-semibold); line-height: 1.6; white-space: nowrap; }
.masifi-badge-brand { background: var(--masifi-surface-brand); color: var(--masifi-brand-primary); }
.masifi-badge-success { background: var(--masifi-surface-success); color: var(--masifi-semantic-success); }
.masifi-badge-warning { background: var(--masifi-surface-warning); color: var(--masifi-semantic-warning); }
.masifi-badge-error { background: var(--masifi-surface-error); color: var(--masifi-semantic-error); }
.masifi-badge-info { background: var(--masifi-surface-info); color: var(--masifi-semantic-info); }
.masifi-badge-cloud { background: rgba(79,70,229,0.08); color: var(--masifi-sub-brand-cloud-base); }
.masifi-badge-factura { background: rgba(5,150,105,0.08); color: var(--masifi-sub-brand-factura-base); }
.masifi-badge-engage { background: rgba(249,115,22,0.08); color: var(--masifi-sub-brand-engage-base); }
.masifi-badge-work { background: rgba(14,165,233,0.08); color: var(--masifi-sub-brand-work-base); }
/* Accent badges */
.masifi-badge-teal { background: rgba(13,148,136,0.08); color: var(--masifi-accent-teal-base); }
.masifi-badge-amber { background: rgba(217,119,6,0.08); color: var(--masifi-accent-amber-base); }
.masifi-badge-violet { background: rgba(139,92,246,0.08); color: var(--masifi-accent-violet-base); }
.masifi-badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.masifi-badge-body { font-family: var(--masifi-font-family-body); }

/* === 4. TABS === */
.masifi-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--masifi-border-default); }
.masifi-tab { padding: var(--masifi-space-3) var(--masifi-space-5); font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-medium); color: var(--masifi-text-tertiary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--masifi-duration-fast) var(--masifi-ease-default); margin-bottom: -1px; font-family: var(--masifi-font-family-body); }
.masifi-tab:hover { color: var(--masifi-text-primary); }
.masifi-tab.active { color: var(--masifi-brand-primary); border-bottom-color: var(--masifi-brand-primary); font-weight: var(--masifi-font-weight-semibold); }
.masifi-tab-panel { padding: var(--masifi-space-6) 0; }

/* === 5. FORM — ease-out for focus transitions === */
.masifi-label { display: block; font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-medium); color: var(--masifi-text-primary); margin-bottom: var(--masifi-space-2); }
.masifi-label-required::after { content: ' *'; color: var(--masifi-semantic-error); }
.masifi-input,
.masifi-select,
.masifi-textarea { width: 100%; padding: var(--masifi-space-3) var(--masifi-space-4); background: var(--masifi-input-bg); border: 1px solid var(--masifi-input-border); border-radius: var(--masifi-radius-lg); font-family: var(--masifi-font-family-body); font-size: var(--masifi-font-size-base); color: var(--masifi-text-primary); transition: border-color var(--masifi-duration-fast) var(--masifi-ease-out), box-shadow var(--masifi-duration-fast) var(--masifi-ease-out); outline: none; min-height: 44px; }
.masifi-input::placeholder,
.masifi-textarea::placeholder { color: var(--masifi-text-placeholder); }
.masifi-input:focus,
.masifi-select:focus,
.masifi-textarea:focus { border-color: var(--masifi-brand-primary); box-shadow: 0 0 0 3px var(--masifi-input-focus-ring); }
.masifi-input-error { border-color: var(--masifi-semantic-error); }
.masifi-input-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
.masifi-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e6e8a' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: var(--masifi-space-10); }
.masifi-textarea { min-height: 100px; resize: vertical; }
.masifi-help { display: block; font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); margin-top: var(--masifi-space-1); }
.masifi-help-error { color: var(--masifi-semantic-error); }
.masifi-form-group { margin-bottom: var(--masifi-space-5); }
.masifi-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--masifi-space-4); }
.masifi-input-group { display: flex; }
.masifi-input-group .masifi-input { border-radius: var(--masifi-radius-lg) 0 0 var(--masifi-radius-lg); }
.masifi-input-group .masifi-btn { border-radius: 0 var(--masifi-radius-lg) var(--masifi-radius-lg) 0; }

/* === 6. TOGGLE — ease-elastic for playful thumb === */
.masifi-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--masifi-space-3); cursor: pointer; }
.masifi-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.masifi-toggle-track { width: 44px; height: 24px; background: var(--masifi-border-strong); border-radius: var(--masifi-radius-full); transition: background var(--masifi-duration-base) var(--masifi-ease-default); position: relative; flex-shrink: 0; }
.masifi-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform var(--masifi-duration-base) var(--masifi-ease-elastic); box-shadow: var(--masifi-shadow-1); }
.masifi-toggle-input:checked + .masifi-toggle-track { background: var(--masifi-brand-primary); }
.masifi-toggle-input:checked + .masifi-toggle-track::after { transform: translateX(20px); }
.masifi-toggle-input:focus-visible + .masifi-toggle-track { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; }
.masifi-toggle-label { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-primary); }

/* === 7. ALERT === */
.masifi-alert { display: flex; align-items: flex-start; gap: var(--masifi-space-3); padding: var(--masifi-space-4) var(--masifi-space-5); border-radius: var(--masifi-radius-lg); font-size: var(--masifi-font-size-sm); line-height: var(--masifi-font-leading-relaxed); border: 1px solid transparent; }
.masifi-alert-info { background: var(--masifi-surface-info); color: var(--masifi-semantic-info); border-color: rgba(59,130,246,0.2); }
.masifi-alert-success { background: var(--masifi-surface-success); color: var(--masifi-semantic-success); border-color: rgba(34,197,94,0.2); }
.masifi-alert-warning { background: var(--masifi-surface-warning); color: var(--masifi-semantic-warning); border-color: rgba(245,158,11,0.2); }
.masifi-alert-error { background: var(--masifi-surface-error); color: var(--masifi-semantic-error); border-color: rgba(239,68,68,0.2); }
.masifi-alert-icon { flex-shrink: 0; font-size: var(--masifi-font-size-lg); }
.masifi-alert-content { flex: 1; }
.masifi-alert-title { font-weight: var(--masifi-font-weight-semibold); margin-bottom: var(--masifi-space-1); }
.masifi-alert-dismiss { background: none; border: none; cursor: pointer; font-size: var(--masifi-font-size-lg); opacity: 0.5; transition: opacity var(--masifi-duration-fast); color: currentColor; padding: 0; }
.masifi-alert-dismiss:hover { opacity: 1; }

/* === 8. PROGRESS BAR === */
.masifi-bar-container { margin-bottom: var(--masifi-space-4); }
.masifi-bar-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--masifi-space-2); }
.masifi-bar-label { font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-medium); color: var(--masifi-text-primary); }
.masifi-bar-value { font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); }
.masifi-bar-track { height: 8px; background: var(--masifi-bg-sunken); border-radius: var(--masifi-radius-full); overflow: hidden; }
.masifi-bar-fill { height: 100%; border-radius: var(--masifi-radius-full); background: var(--masifi-brand-primary); transition: width var(--masifi-duration-slow) var(--masifi-ease-out); }
.masifi-bar-fill-success { background: var(--masifi-semantic-success); }
.masifi-bar-fill-warning { background: var(--masifi-semantic-warning); }
.masifi-bar-fill-error { background: var(--masifi-semantic-error); }

/* === 9. TABLE — shadow-1 === */
.masifi-table-wrapper { overflow-x: auto; border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-xl); box-shadow: var(--masifi-shadow-1); background: var(--masifi-bg-elevated); }
.masifi-table { width: 100%; border-collapse: collapse; font-size: var(--masifi-font-size-sm); }
.masifi-table th { text-align: left; padding: var(--masifi-space-3) var(--masifi-space-4); font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--masifi-text-tertiary); background: var(--masifi-bg-sunken); border-bottom: 1px solid var(--masifi-border-default); }
.masifi-table td { padding: var(--masifi-space-3) var(--masifi-space-4); border-bottom: 1px solid var(--masifi-border-subtle); color: var(--masifi-text-secondary); vertical-align: middle; }
.masifi-table tr:last-child td { border-bottom: none; }
.masifi-table tr:hover td { background: var(--masifi-surface-brand); }
.masifi-table-mono td { font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-xs); }
.masifi-table-mono .masifi-badge { font-family: var(--masifi-font-family-body); }

/* === 10. DANGER ZONE === */
.masifi-danger-zone { border: 1px solid rgba(239,68,68,0.3); border-radius: var(--masifi-radius-xl); padding: var(--masifi-space-6); background: var(--masifi-surface-error); }
.masifi-danger-zone-title { font-size: var(--masifi-font-size-lg); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-semantic-error); margin-bottom: var(--masifi-space-2); }
.masifi-danger-zone-desc { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-secondary); margin-bottom: var(--masifi-space-4); line-height: var(--masifi-font-leading-relaxed); }
.masifi-danger-zone-actions { display: flex; gap: var(--masifi-space-3); align-items: center; }

/* === 11. MODAL — shadow-4 === */
.masifi-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: var(--masifi-space-6); backdrop-filter: blur(4px); }
.masifi-modal { background: var(--masifi-bg-elevated); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-2xl); width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--masifi-shadow-4); }
.masifi-modal-sm { max-width: 400px; }
.masifi-modal-md { max-width: 560px; }
.masifi-modal-lg { max-width: 720px; }
.masifi-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--masifi-space-5) var(--masifi-space-6); border-bottom: 1px solid var(--masifi-border-default); }
.masifi-modal-title { font-size: var(--masifi-font-size-lg); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); }
.masifi-modal-close { background: none; border: none; cursor: pointer; font-size: var(--masifi-font-size-xl); color: var(--masifi-text-tertiary); padding: var(--masifi-space-1); border-radius: var(--masifi-radius-md); transition: all var(--masifi-duration-fast); }
.masifi-modal-close:hover { background: var(--masifi-bg-sunken); color: var(--masifi-text-primary); }
.masifi-modal-body { padding: var(--masifi-space-6); }
.masifi-modal-footer { display: flex; justify-content: flex-end; gap: var(--masifi-space-3); padding: var(--masifi-space-4) var(--masifi-space-6); border-top: 1px solid var(--masifi-border-default); }

/* === 12. COPY BUTTON === */
.masifi-copy { display: inline-flex; align-items: center; gap: var(--masifi-space-2); padding: var(--masifi-space-2) var(--masifi-space-3); background: var(--masifi-bg-sunken); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-md); font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-xs); color: var(--masifi-text-secondary); cursor: pointer; transition: all var(--masifi-duration-fast); user-select: all; }
.masifi-copy:hover { border-color: var(--masifi-brand-primary); color: var(--masifi-text-primary); }
.masifi-copy-icon { flex-shrink: 0; opacity: 0.5; transition: opacity var(--masifi-duration-fast); }
.masifi-copy:hover .masifi-copy-icon { opacity: 1; }
.masifi-copy.copied { border-color: var(--masifi-semantic-success); color: var(--masifi-semantic-success); }

/* === 13. DROPDOWN — shadow-3 === */
.masifi-dropdown { position: relative; display: inline-block; }
.masifi-dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 100; min-width: 180px; margin-top: var(--masifi-space-1); background: var(--masifi-bg-elevated); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-lg); padding: var(--masifi-space-1); box-shadow: var(--masifi-shadow-3); }
.masifi-dropdown-item { display: flex; align-items: center; gap: var(--masifi-space-2); width: 100%; padding: var(--masifi-space-2) var(--masifi-space-3); border: none; background: none; border-radius: var(--masifi-radius-md); font-family: var(--masifi-font-family-body); font-size: var(--masifi-font-size-sm); color: var(--masifi-text-secondary); cursor: pointer; transition: all var(--masifi-duration-fast); text-align: left; text-decoration: none; }
.masifi-dropdown-item:hover { background: var(--masifi-surface-brand); color: var(--masifi-text-primary); }
.masifi-dropdown-item-danger { color: var(--masifi-semantic-error); }
.masifi-dropdown-item-danger:hover { background: var(--masifi-surface-error); }
.masifi-dropdown-divider { height: 1px; background: var(--masifi-border-default); margin: var(--masifi-space-1) 0; }

/* === 14. EMPTY STATE === */
.masifi-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--masifi-space-12) var(--masifi-space-6); text-align: center; }
.masifi-empty-icon { font-size: 3rem; margin-bottom: var(--masifi-space-4); opacity: 0.3; }
.masifi-empty-title { font-size: var(--masifi-font-size-lg); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); margin-bottom: var(--masifi-space-2); }
.masifi-empty-desc { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-tertiary); max-width: 320px; margin-bottom: var(--masifi-space-6); line-height: var(--masifi-font-leading-relaxed); }

/* === 15. SIDEBAR === */
.masifi-sidebar { width: 260px; background: var(--masifi-bg-elevated); border-right: 1px solid var(--masifi-border-default); padding: var(--masifi-space-4); display: flex; flex-direction: column; gap: var(--masifi-space-1); height: 100%; }
.masifi-sidebar-section { margin-bottom: var(--masifi-space-4); }
.masifi-sidebar-title { font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--masifi-text-tertiary); padding: var(--masifi-space-2) var(--masifi-space-3); }
.masifi-sidebar-item { display: flex; align-items: center; gap: var(--masifi-space-3); padding: var(--masifi-space-2) var(--masifi-space-3); border-radius: var(--masifi-radius-md); font-size: var(--masifi-font-size-sm); color: var(--masifi-text-secondary); text-decoration: none; transition: all var(--masifi-duration-fast); cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: var(--masifi-font-family-body); }
.masifi-sidebar-item:hover { background: var(--masifi-surface-brand); color: var(--masifi-text-primary); }
.masifi-sidebar-item.active { background: var(--masifi-surface-brand); color: var(--masifi-brand-primary); font-weight: var(--masifi-font-weight-semibold); }
.masifi-sidebar-icon { width: 18px; text-align: center; flex-shrink: 0; }

/* === 16. AVATAR === */
.masifi-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--masifi-surface-brand); color: var(--masifi-brand-primary); font-weight: var(--masifi-font-weight-semibold); overflow: hidden; position: relative; flex-shrink: 0; }
.masifi-avatar-sm { width: 28px; height: 28px; font-size: var(--masifi-font-size-xs); }
.masifi-avatar-md { width: 36px; height: 36px; font-size: var(--masifi-font-size-sm); }
.masifi-avatar-lg { width: 48px; height: 48px; font-size: var(--masifi-font-size-lg); }
.masifi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.masifi-avatar-status { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--masifi-bg-elevated); }
.masifi-avatar-status-online { background: var(--masifi-semantic-success); }
.masifi-avatar-status-offline { background: var(--masifi-text-tertiary); }

/* === 17. SKELETON === */
.masifi-skeleton { background: var(--masifi-border-default); border-radius: var(--masifi-radius-md); animation: masifi-pulse 1.5s infinite var(--masifi-ease-in-out); }
.masifi-skeleton-text { height: 14px; margin-bottom: var(--masifi-space-2); }
.masifi-skeleton-text:last-child { width: 60%; }
.masifi-skeleton-heading { height: 24px; width: 40%; margin-bottom: var(--masifi-space-4); }
.masifi-skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; }
.masifi-skeleton-btn { height: 36px; width: 120px; border-radius: var(--masifi-radius-lg); }
@keyframes masifi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* === 18. STAT CARD — shadow-1 === */
.masifi-stat { background: var(--masifi-bg-elevated); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-xl); padding: var(--masifi-space-5); box-shadow: var(--masifi-shadow-1); }
.masifi-stat-label { font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-medium); color: var(--masifi-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--masifi-space-2); }
.masifi-stat-value { font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-3xl); font-weight: var(--masifi-font-weight-bold); color: var(--masifi-text-primary); line-height: 1; margin-bottom: var(--masifi-space-2); }
.masifi-stat-trend { display: inline-flex; align-items: center; gap: var(--masifi-space-1); font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-semibold); }
.masifi-stat-trend-up { color: var(--masifi-semantic-success); }
.masifi-stat-trend-down { color: var(--masifi-semantic-error); }
.masifi-stat-trend-neutral { color: var(--masifi-text-tertiary); }

/* === 19. TOOLTIP — shadow-3 === */
.masifi-tooltip-wrapper { position: relative; display: inline-flex; }
.masifi-tooltip { position: absolute; z-index: 200; padding: var(--masifi-space-2) var(--masifi-space-3); background: var(--masifi-text-primary); color: var(--masifi-text-inverse); font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-medium); border-radius: var(--masifi-radius-md); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--masifi-duration-fast) var(--masifi-ease-out); box-shadow: var(--masifi-shadow-3); }
.masifi-tooltip-top { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.masifi-tooltip-bottom { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.masifi-tooltip-wrapper:hover .masifi-tooltip { opacity: 1; }

/* === UTILITIES === */
.masifi-text-brand { color: var(--masifi-brand-primary); }
.masifi-text-success { color: var(--masifi-semantic-success); }
.masifi-text-warning { color: var(--masifi-semantic-warning); }
.masifi-text-error { color: var(--masifi-semantic-error); }
.masifi-text-muted { color: var(--masifi-text-tertiary); }
.masifi-bg-elevated { background: var(--masifi-bg-elevated); }
.masifi-bg-sunken { background: var(--masifi-bg-sunken); }
.masifi-divider { height: 1px; background: var(--masifi-border-default); margin: var(--masifi-space-6) 0; }
.masifi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


/* --- 00-focus-fixes.css --- */
/* === FOCUS FIXES — additions to v2 base components missing focus-visible === */
/* Verified missing via grep on build/masifi-components.css (only .masifi-btn and */
/* .masifi-toggle-input had focus-visible; the 5 below did not). */

.masifi-tab:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: -2px; border-radius: var(--masifi-radius-sm); }

.masifi-dropdown-item:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: -2px; }

.masifi-sidebar-item:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: -2px; }

.masifi-copy:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; }

.masifi-modal-close:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; }


/* --- 00-reduced-motion.css --- */
/* === TOUCH — eliminate 300ms tap delay on mobile === */
:root { touch-action: manipulation; }
button,
a,
input,
select,
textarea,
[role="button"] { touch-action: manipulation; }

/* === REDUCED MOTION — respect user preference === */
@media (prefers-reduced-motion: reduce) {
  :root,
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- 00-touch-targets.css --- */
/* === TOUCH TARGETS — ensure minimum 44px interactive areas === */
/* Visual size may be smaller, but clickable area extends via padding */
.masifi-checkbox,
.masifi-radio { min-height: 44px; display: inline-flex; align-items: center; }

.masifi-icon-btn-sm { min-width: 44px; min-height: 44px; }

.masifi-breadcrumb-item a,
.masifi-breadcrumb-link { min-height: 44px; display: inline-flex; align-items: center; }

.masifi-pagination-page,
.masifi-page-item { min-width: 44px; min-height: 44px; }


/* --- 01-container.css --- */
/* === CONTAINER — max-width wrapper, responsive === */
.masifi-container { width: 100%; margin-right: auto; margin-left: auto; padding-right: var(--masifi-space-6); padding-left: var(--masifi-space-6); }
.masifi-container-sm { max-width: 640px; }
.masifi-container-md { max-width: 768px; }
.masifi-container-lg { max-width: 1024px; }
.masifi-container-xl { max-width: 1280px; }
@media (max-width: 640px) {
  .masifi-container { padding-right: var(--masifi-space-4); padding-left: var(--masifi-space-4); }
}


/* --- 02-grid.css --- */
/* === GRID — CSS grid with responsive collapse === */
.masifi-grid { display: grid; gap: var(--masifi-space-6); }
.masifi-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.masifi-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.masifi-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.masifi-grid-gap-sm { gap: var(--masifi-space-4); }
.masifi-grid-gap-lg { gap: var(--masifi-space-8); }
@media (max-width: 768px) {
  .masifi-grid-cols-2,
  .masifi-grid-cols-3,
  .masifi-grid-cols-4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .masifi-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .masifi-grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}


/* --- 03-stack.css --- */
/* === STACK — flexbox vertical/horizontal layout === */
.masifi-stack { display: flex; flex-direction: column; gap: var(--masifi-space-4); }
.masifi-stack-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
.masifi-stack-gap-sm { gap: var(--masifi-space-2); }
.masifi-stack-gap-lg { gap: var(--masifi-space-8); }
.masifi-stack-center { align-items: center; }
.masifi-stack-between { justify-content: space-between; }
.masifi-stack-end { align-items: flex-end; }


/* --- 04-divider.css --- */
/* === DIVIDER — horizontal and vertical separators === */
.masifi-divider-h { height: 1px; background: var(--masifi-border-default); margin: var(--masifi-space-6) 0; border: none; }
.masifi-divider-v { width: 1px; background: var(--masifi-border-default); align-self: stretch; margin: 0 var(--masifi-space-4); flex-shrink: 0; }
.masifi-divider-label { display: flex; align-items: center; gap: var(--masifi-space-4); margin: var(--masifi-space-6) 0; }
.masifi-divider-label::before,
.masifi-divider-label::after { content: ''; flex: 1; height: 1px; background: var(--masifi-border-default); }
.masifi-divider-label-text { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); white-space: nowrap; font-weight: var(--masifi-font-weight-medium); }


/* --- 05-section.css --- */
/* === SECTION — content block with header/title/description/body === */
.masifi-section { margin-bottom: var(--masifi-space-10); }
.masifi-section-header { margin-bottom: var(--masifi-space-6); }
.masifi-section-title { font-family: var(--masifi-font-family-display); font-size: var(--masifi-font-size-fluid-xl); font-weight: var(--masifi-font-weight-bold); color: var(--masifi-text-primary); line-height: var(--masifi-font-leading-tight); margin-bottom: var(--masifi-space-2); }
.masifi-section-desc { font-size: var(--masifi-font-size-base); color: var(--masifi-text-secondary); line-height: var(--masifi-font-leading-relaxed); max-width: 600px; }
.masifi-section-body { }
.masifi-section-actions { display: flex; gap: var(--masifi-space-3); align-items: center; flex-wrap: wrap; margin-top: var(--masifi-space-4); }
.masifi-section-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--masifi-space-4); margin-bottom: var(--masifi-space-6); }


/* --- 06-sidebar-layout.css --- */
/* === SIDEBAR LAYOUT — two-column (260px nav + content) === */
.masifi-sidebar-layout { display: flex; min-height: 100vh; }
.masifi-sidebar-layout-nav { width: 260px; flex-shrink: 0; background: var(--masifi-bg-elevated); border-right: 1px solid var(--masifi-border-default); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.masifi-sidebar-layout-content { flex: 1; min-width: 0; padding: var(--masifi-space-8); overflow-y: auto; }
.masifi-sidebar-layout-header { padding: var(--masifi-space-5) var(--masifi-space-4); border-bottom: 1px solid var(--masifi-border-default); }
.masifi-sidebar-layout-footer { padding: var(--masifi-space-4); border-top: 1px solid var(--masifi-border-default); margin-top: auto; }
@media (max-width: 768px) {
  .masifi-sidebar-layout { flex-direction: column; }
  .masifi-sidebar-layout-nav { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--masifi-border-default); }
  .masifi-sidebar-layout-content { padding: var(--masifi-space-5); }
}


/* --- 07-nav-list.css --- */
/* === NAV LIST — vertical nav with items, icons, active state === */
.masifi-nav-list { display: flex; flex-direction: column; gap: var(--masifi-space-1); list-style: none; margin: 0; padding: 0; }
.masifi-nav-list-section { margin-bottom: var(--masifi-space-5); }
.masifi-nav-list-heading { font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--masifi-text-tertiary); padding: var(--masifi-space-2) var(--masifi-space-3); margin-bottom: var(--masifi-space-1); }
.masifi-nav-item { display: flex; align-items: center; gap: var(--masifi-space-3); padding: var(--masifi-space-2) var(--masifi-space-3); border-radius: var(--masifi-radius-md); font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-medium); color: var(--masifi-text-secondary); text-decoration: none; transition: all var(--masifi-duration-fast) var(--masifi-ease-default); cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: var(--masifi-font-family-body); }
.masifi-nav-item:hover { background: var(--masifi-surface-brand); color: var(--masifi-text-primary); }
.masifi-nav-item:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: -2px; }
.masifi-nav-item.active { background: var(--masifi-surface-brand); color: var(--masifi-brand-primary); font-weight: var(--masifi-font-weight-semibold); }
.masifi-nav-item-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; transition: opacity var(--masifi-duration-fast); }
.masifi-nav-item:hover .masifi-nav-item-icon,
.masifi-nav-item.active .masifi-nav-item-icon { opacity: 1; }
.masifi-nav-item-badge { margin-left: auto; }


/* --- 08-breadcrumb.css --- */
/* === BREADCRUMB — path navigation with separators === */
.masifi-breadcrumb { display: flex; align-items: center; gap: var(--masifi-space-2); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: var(--masifi-font-size-sm); }
.masifi-breadcrumb-item { display: flex; align-items: center; gap: var(--masifi-space-2); }
.masifi-breadcrumb-link { color: var(--masifi-text-tertiary); text-decoration: none; transition: color var(--masifi-duration-fast) var(--masifi-ease-default); font-weight: var(--masifi-font-weight-medium); cursor: pointer; }
.masifi-breadcrumb-link:hover { color: var(--masifi-brand-primary); }
.masifi-breadcrumb-link:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; border-radius: var(--masifi-radius-sm); }
.masifi-breadcrumb-current { color: var(--masifi-text-primary); font-weight: var(--masifi-font-weight-semibold); }
.masifi-breadcrumb-sep { color: var(--masifi-text-tertiary); opacity: 0.5; user-select: none; }


/* --- 09-pagination.css --- */
/* === PAGINATION — page navigation with prev/next and page numbers === */
.masifi-pagination { display: flex; align-items: center; gap: var(--masifi-space-1); flex-wrap: wrap; }
.masifi-page-item { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--masifi-space-2); border-radius: var(--masifi-radius-md); font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-medium); color: var(--masifi-text-secondary); background: none; border: 1px solid transparent; cursor: pointer; transition: all var(--masifi-duration-fast) var(--masifi-ease-default); font-family: var(--masifi-font-family-body); text-decoration: none; }
.masifi-page-item:hover { background: var(--masifi-surface-brand); color: var(--masifi-text-primary); border-color: var(--masifi-border-default); }
.masifi-page-item:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; }
.masifi-page-item.active { background: var(--masifi-brand-primary); color: var(--masifi-text-inverse); border-color: var(--masifi-brand-primary); font-weight: var(--masifi-font-weight-semibold); box-shadow: var(--masifi-shadow-1); }
.masifi-page-item:disabled,
.masifi-page-item[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.masifi-page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--masifi-text-tertiary); font-size: var(--masifi-font-size-sm); }


/* --- 10-timeline.css --- */
/* === TIMELINE — chronological list with dot, connector, time, content === */
.masifi-timeline { display: flex; flex-direction: column; }
.masifi-timeline-item { display: flex; gap: var(--masifi-space-4); position: relative; }
.masifi-timeline-item:not(:last-child) { padding-bottom: var(--masifi-space-6); }
.masifi-timeline-spine { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.masifi-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--masifi-brand-primary); border: 2px solid var(--masifi-bg-elevated); box-shadow: 0 0 0 2px var(--masifi-brand-primary); flex-shrink: 0; margin-top: 4px; }
.masifi-timeline-dot-success { background: var(--masifi-semantic-success); box-shadow: 0 0 0 2px var(--masifi-semantic-success); }
.masifi-timeline-dot-warning { background: var(--masifi-semantic-warning); box-shadow: 0 0 0 2px var(--masifi-semantic-warning); }
.masifi-timeline-dot-error { background: var(--masifi-semantic-error); box-shadow: 0 0 0 2px var(--masifi-semantic-error); }
.masifi-timeline-dot-muted { background: var(--masifi-border-strong); box-shadow: 0 0 0 2px var(--masifi-border-strong); }
.masifi-timeline-line { width: 2px; flex: 1; background: var(--masifi-border-default); margin-top: var(--masifi-space-2); }
.masifi-timeline-body { flex: 1; min-width: 0; }
.masifi-timeline-time { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); font-family: var(--masifi-font-family-mono); margin-bottom: var(--masifi-space-1); }
.masifi-timeline-title { font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); margin-bottom: var(--masifi-space-1); }
.masifi-timeline-desc { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-secondary); line-height: var(--masifi-font-leading-relaxed); }


/* --- 11-code-block.css --- */
/* === CODE BLOCK — code/command display with dark variant === */
.masifi-code-block { border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-xl); overflow: hidden; box-shadow: var(--masifi-shadow-1); }
.masifi-code-block-header { display: flex; align-items: center; justify-content: space-between; padding: var(--masifi-space-3) var(--masifi-space-4); background: var(--masifi-bg-sunken); border-bottom: 1px solid var(--masifi-border-default); }
.masifi-code-block-lang { font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.masifi-code-block-actions { display: flex; align-items: center; gap: var(--masifi-space-2); }
.masifi-code-block-body { overflow-x: auto; padding: var(--masifi-space-5) var(--masifi-space-5); background: var(--masifi-bg-elevated); }
.masifi-code-block-body pre { margin: 0; font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-sm); line-height: 1.7; color: var(--masifi-text-primary); white-space: pre; }
.masifi-code-block-dark { background: #0f1117; border-color: rgba(255,255,255,0.08); }
.masifi-code-block-dark .masifi-code-block-header { background: #1a1d27; border-bottom-color: rgba(255,255,255,0.08); }
.masifi-code-block-dark .masifi-code-block-lang { color: #6e7a9a; }
.masifi-code-block-dark .masifi-code-block-body { background: #0f1117; }
.masifi-code-block-dark .masifi-code-block-body pre { color: #e2e8f0; }
.masifi-code-inline { font-family: var(--masifi-font-family-mono); font-size: 0.85em; padding: 2px 6px; background: var(--masifi-bg-sunken); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-sm); color: var(--masifi-brand-primary); }


/* --- 12-key-value.css --- */
/* === KEY VALUE — label-value pairs, mono value variant, copiable === */
.masifi-kv-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-xl); overflow: hidden; }
.masifi-kv-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--masifi-space-6); padding: var(--masifi-space-3) var(--masifi-space-5); border-bottom: 1px solid var(--masifi-border-subtle); }
.masifi-kv-item:last-child { border-bottom: none; }
.masifi-kv-item:nth-child(odd) { background: var(--masifi-bg-elevated); }
.masifi-kv-item:nth-child(even) { background: var(--masifi-bg-sunken); }
.masifi-kv-key { font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-medium); color: var(--masifi-text-tertiary); flex-shrink: 0; min-width: 140px; }
.masifi-kv-value { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-primary); text-align: right; word-break: break-all; }
.masifi-kv-value-mono { font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-xs); }
.masifi-kv-value-copiable { display: flex; align-items: center; gap: var(--masifi-space-2); cursor: pointer; transition: color var(--masifi-duration-fast) var(--masifi-ease-default); }
.masifi-kv-value-copiable:hover { color: var(--masifi-brand-primary); }
.masifi-kv-stacked { flex-direction: column; align-items: flex-start; gap: var(--masifi-space-1); }
.masifi-kv-stacked .masifi-kv-value { text-align: left; }


/* --- 13-button-group.css --- */
/* === BUTTON GROUP — connected buttons with collapsed borders === */
.masifi-btn-group { display: inline-flex; }
.masifi-btn-group .masifi-btn { border-radius: 0; margin-left: -1px; position: relative; }
.masifi-btn-group .masifi-btn:first-child { border-radius: var(--masifi-radius-lg) 0 0 var(--masifi-radius-lg); margin-left: 0; }
.masifi-btn-group .masifi-btn:last-child { border-radius: 0 var(--masifi-radius-lg) var(--masifi-radius-lg) 0; }
.masifi-btn-group .masifi-btn:only-child { border-radius: var(--masifi-radius-lg); margin-left: 0; }
.masifi-btn-group .masifi-btn:hover,
.masifi-btn-group .masifi-btn:focus-visible,
.masifi-btn-group .masifi-btn-primary,
.masifi-btn-group .masifi-btn-secondary { z-index: 1; }
.masifi-btn-group-vertical { flex-direction: column; }
.masifi-btn-group-vertical .masifi-btn { border-radius: 0; border-right-width: 1px; border-bottom-width: 0; }
.masifi-btn-group-vertical .masifi-btn:first-child { border-radius: var(--masifi-radius-lg) var(--masifi-radius-lg) 0 0; }
.masifi-btn-group-vertical .masifi-btn:last-child { border-radius: 0 0 var(--masifi-radius-lg) var(--masifi-radius-lg); border-bottom-width: 1px; }


/* --- 14-icon-button.css --- */
/* === ICON BUTTON — icon-only action button, sm/default/lg, ghost/danger === */
.masifi-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--masifi-radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--masifi-duration-fast) var(--masifi-ease-default); background: none; color: var(--masifi-text-secondary); padding: 0; flex-shrink: 0; }
.masifi-icon-btn:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; }
.masifi-icon-btn:hover { background: var(--masifi-surface-brand); color: var(--masifi-text-primary); border-color: var(--masifi-border-default); }
.masifi-icon-btn:active { transform: scale(0.94); transition-timing-function: var(--masifi-ease-squish); }
.masifi-icon-btn-sm { width: 28px; height: 28px; border-radius: var(--masifi-radius-sm); }
.masifi-icon-btn-lg { width: 44px; height: 44px; border-radius: var(--masifi-radius-lg); }
.masifi-icon-btn-ghost { border-color: var(--masifi-border-default); background: var(--masifi-bg-elevated); }
.masifi-icon-btn-ghost:hover { border-color: var(--masifi-border-strong); }
.masifi-icon-btn-danger { color: var(--masifi-semantic-error); }
.masifi-icon-btn-danger:hover { background: var(--masifi-surface-error); border-color: rgba(239,68,68,0.3); color: var(--masifi-semantic-error); }
.masifi-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }


/* --- 15-checkbox.css --- */
/* === CHECKBOX — custom styled with checkmark SVG, focus ring === */
.masifi-checkbox-wrapper { display: inline-flex; align-items: center; gap: var(--masifi-space-3); cursor: pointer; user-select: none; }
.masifi-checkbox-input { position: absolute; opacity: 0; width: 0; height: 0; }
.masifi-checkbox-box { width: 18px; height: 18px; border-radius: var(--masifi-radius-sm); border: 2px solid var(--masifi-input-border); background: var(--masifi-input-bg); transition: all var(--masifi-duration-fast) var(--masifi-ease-out); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.masifi-checkbox-input:checked + .masifi-checkbox-box { background: var(--masifi-brand-primary); border-color: var(--masifi-brand-primary); }
.masifi-checkbox-input:checked + .masifi-checkbox-box::after { content: ''; display: block; width: 10px; height: 6px; border-left: 2px solid var(--masifi-text-inverse); border-bottom: 2px solid var(--masifi-text-inverse); transform: rotate(-45deg) translateY(-1px); }
.masifi-checkbox-input:focus-visible + .masifi-checkbox-box { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; border-color: var(--masifi-brand-primary); }
.masifi-checkbox-input:indeterminate + .masifi-checkbox-box { background: var(--masifi-brand-primary); border-color: var(--masifi-brand-primary); }
.masifi-checkbox-input:indeterminate + .masifi-checkbox-box::after { content: ''; display: block; width: 8px; height: 2px; background: var(--masifi-text-inverse); border: none; transform: none; }
.masifi-checkbox-wrapper:hover .masifi-checkbox-box { border-color: var(--masifi-brand-primary); }
.masifi-checkbox-label { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-primary); line-height: var(--masifi-font-leading-normal); }
.masifi-checkbox-wrapper:has(.masifi-checkbox-input:disabled) { opacity: 0.5; cursor: not-allowed; }


/* --- 16-radio.css --- */
/* === RADIO — custom styled with dot, card variant via :has() === */
.masifi-radio-wrapper { display: inline-flex; align-items: center; gap: var(--masifi-space-3); cursor: pointer; user-select: none; }
.masifi-radio-input { position: absolute; opacity: 0; width: 0; height: 0; }
.masifi-radio-circle { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--masifi-input-border); background: var(--masifi-input-bg); transition: all var(--masifi-duration-fast) var(--masifi-ease-out); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.masifi-radio-input:checked + .masifi-radio-circle { border-color: var(--masifi-brand-primary); }
.masifi-radio-input:checked + .masifi-radio-circle::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--masifi-brand-primary); }
.masifi-radio-input:focus-visible + .masifi-radio-circle { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; }
.masifi-radio-wrapper:hover .masifi-radio-circle { border-color: var(--masifi-brand-primary); }
.masifi-radio-label { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-primary); }
/* Card variant */
.masifi-radio-card { display: flex; gap: var(--masifi-space-3); padding: var(--masifi-space-4) var(--masifi-space-5); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-lg); cursor: pointer; transition: all var(--masifi-duration-fast) var(--masifi-ease-default); background: var(--masifi-bg-elevated); }
.masifi-radio-card:hover { border-color: var(--masifi-border-strong); }
.masifi-radio-card:has(.masifi-radio-input:checked) { border-color: var(--masifi-brand-primary); background: var(--masifi-surface-brand); }
.masifi-radio-card-content { flex: 1; }
.masifi-radio-card-title { font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); margin-bottom: var(--masifi-space-1); }
.masifi-radio-card-desc { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); line-height: var(--masifi-font-leading-relaxed); }


/* --- 17-file-upload.css --- */
/* === FILE UPLOAD — drag-and-drop zone with hover/dragover states === */
.masifi-file-upload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--masifi-space-3); padding: var(--masifi-space-10) var(--masifi-space-8); border: 2px dashed var(--masifi-border-default); border-radius: var(--masifi-radius-xl); background: var(--masifi-bg-elevated); text-align: center; cursor: pointer; transition: all var(--masifi-duration-base) var(--masifi-ease-default); }
.masifi-file-upload:hover { border-color: var(--masifi-brand-primary); background: var(--masifi-surface-brand); }
.masifi-file-upload.dragover { border-color: var(--masifi-brand-primary); background: var(--masifi-surface-brand); box-shadow: 0 0 0 4px var(--masifi-input-focus-ring); }
.masifi-file-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.masifi-file-upload-icon { color: var(--masifi-text-tertiary); opacity: 0.5; transition: opacity var(--masifi-duration-fast); }
.masifi-file-upload:hover .masifi-file-upload-icon { opacity: 0.8; color: var(--masifi-brand-primary); }
.masifi-file-upload-title { font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); }
.masifi-file-upload-hint { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); }
.masifi-file-upload-link { color: var(--masifi-brand-primary); font-weight: var(--masifi-font-weight-medium); }
.masifi-file-list { display: flex; flex-direction: column; gap: var(--masifi-space-2); margin-top: var(--masifi-space-3); }
.masifi-file-item { display: flex; align-items: center; gap: var(--masifi-space-3); padding: var(--masifi-space-3) var(--masifi-space-4); background: var(--masifi-bg-sunken); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-md); font-size: var(--masifi-font-size-sm); }
.masifi-file-item-name { flex: 1; color: var(--masifi-text-primary); font-weight: var(--masifi-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.masifi-file-item-size { color: var(--masifi-text-tertiary); font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-xs); flex-shrink: 0; }


/* --- 18-search.css --- */
/* === SEARCH — input with icon left + clear button right === */
.masifi-search { position: relative; display: flex; align-items: center; }
.masifi-search-icon { position: absolute; left: var(--masifi-space-3); color: var(--masifi-text-tertiary); pointer-events: none; flex-shrink: 0; transition: color var(--masifi-duration-fast); }
.masifi-search-input { width: 100%; padding: var(--masifi-space-3) var(--masifi-space-4); padding-left: calc(var(--masifi-space-3) + 18px + var(--masifi-space-2)); padding-right: var(--masifi-space-10); background: var(--masifi-input-bg); border: 1px solid var(--masifi-input-border); border-radius: var(--masifi-radius-lg); font-family: var(--masifi-font-family-body); font-size: var(--masifi-font-size-base); color: var(--masifi-text-primary); outline: none; min-height: 44px; }
.masifi-search-input::placeholder { color: var(--masifi-text-placeholder); }
.masifi-search-input:focus { border-color: var(--masifi-brand-primary); box-shadow: 0 0 0 3px var(--masifi-input-focus-ring); }
.masifi-search-input:focus ~ .masifi-search-icon { color: var(--masifi-brand-primary); }
.masifi-search-clear { position: absolute; right: var(--masifi-space-3); background: none; border: none; cursor: pointer; color: var(--masifi-text-tertiary); padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--masifi-radius-sm); width: 20px; height: 20px; transition: all var(--masifi-duration-fast); }
.masifi-search-clear:hover { color: var(--masifi-text-primary); background: var(--masifi-bg-sunken); }
.masifi-search-clear:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; }
.masifi-search-rounded .masifi-search-input { border-radius: var(--masifi-radius-full); }


/* --- 19-toast.css --- */
/* === TOAST — ephemeral notification, fixed top-right, slide-in === */
/* Differentiator from alerts: floating position, shadow-5, auto-dismiss animation, slide-in */
/* Visual connection with alerts: same surface-* backgrounds + semantic colors */
.masifi-toast-container { position: fixed; top: var(--masifi-space-5); right: var(--masifi-space-5); z-index: 10000; display: flex; flex-direction: column; gap: var(--masifi-space-3); pointer-events: none; max-width: 380px; width: calc(100vw - 2 * var(--masifi-space-5)); }
.masifi-toast { display: flex; align-items: flex-start; gap: var(--masifi-space-3); padding: var(--masifi-space-4) var(--masifi-space-5); border-radius: var(--masifi-radius-xl); box-shadow: var(--masifi-shadow-5); pointer-events: all; animation: masifi-toast-in var(--masifi-duration-base) var(--masifi-ease-out) both; border: 1px solid transparent; }
.masifi-toast-success { background: var(--masifi-surface-success); color: var(--masifi-semantic-success); border-color: rgba(34,197,94,0.2); }
.masifi-toast-error { background: var(--masifi-surface-error); color: var(--masifi-semantic-error); border-color: rgba(239,68,68,0.2); }
.masifi-toast-warning { background: var(--masifi-surface-warning); color: var(--masifi-semantic-warning); border-color: rgba(245,158,11,0.2); }
.masifi-toast-info { background: var(--masifi-surface-info); color: var(--masifi-semantic-info); border-color: rgba(59,130,246,0.2); }
.masifi-toast-icon { flex-shrink: 0; margin-top: 1px; }
.masifi-toast-content { flex: 1; min-width: 0; }
.masifi-toast-title { font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); margin-bottom: 2px; }
.masifi-toast-desc { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-secondary); line-height: var(--masifi-font-leading-relaxed); }
.masifi-toast-close { background: none; border: none; cursor: pointer; color: currentColor; padding: 0; flex-shrink: 0; opacity: 0.6; transition: opacity var(--masifi-duration-fast); }
.masifi-toast-close:hover { opacity: 1; }
.masifi-toast-close:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; }
.masifi-toast-leaving { animation: masifi-toast-out var(--masifi-duration-base) var(--masifi-ease-in) both; }
@keyframes masifi-toast-in { from { opacity: 0; transform: translateX(calc(100% + var(--masifi-space-5))); } to { opacity: 1; transform: translateX(0); } }
@keyframes masifi-toast-out { from { opacity: 1; transform: translateX(0); max-height: 100px; } to { opacity: 0; transform: translateX(calc(100% + var(--masifi-space-5))); max-height: 0; margin: 0; padding: 0; } }


/* --- 20-spinner.css --- */
/* === SPINNER — rotating border animation, sm/default/lg, inline/overlay === */
.masifi-spinner { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--masifi-border-default); border-top-color: var(--masifi-brand-primary); animation: masifi-spin var(--masifi-duration-slow) linear infinite; flex-shrink: 0; }
.masifi-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.masifi-spinner-lg { width: 40px; height: 40px; border-width: 3px; }
.masifi-spinner-success { border-top-color: var(--masifi-semantic-success); }
.masifi-spinner-error { border-top-color: var(--masifi-semantic-error); }
.masifi-spinner-white { border-color: rgba(255,255,255,0.3); border-top-color: var(--masifi-text-inverse); }
.masifi-spinner-inline { display: inline-flex; align-items: center; gap: var(--masifi-space-2); font-size: var(--masifi-font-size-sm); color: var(--masifi-text-tertiary); }
.masifi-spinner-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.75); border-radius: inherit; z-index: 10; }
@media (prefers-color-scheme: dark) {
  .masifi-spinner-overlay { background: rgba(15,17,23,0.75); }
}
@keyframes masifi-spin { to { transform: rotate(360deg); } }


/* --- 21-hero.css --- */
/* === HERO — landing hero with headline, subheadline, actions, visual === */
.masifi-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--masifi-space-fluid-5) var(--masifi-space-fluid-2); min-height: 60vh; position: relative; }
.masifi-hero-label { display: inline-flex; align-items: center; gap: var(--masifi-space-2); padding: var(--masifi-space-1) var(--masifi-space-4); background: var(--masifi-surface-brand); border: 1px solid rgba(79,70,229,0.2); border-radius: var(--masifi-radius-full); font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-brand-primary); letter-spacing: 0.04em; margin-bottom: var(--masifi-space-5); }
.masifi-hero-headline { font-family: var(--masifi-font-family-display); font-size: var(--masifi-font-size-fluid-4xl); font-weight: var(--masifi-font-weight-extrabold); line-height: var(--masifi-font-leading-tight); letter-spacing: -0.03em; color: var(--masifi-text-primary); max-width: 780px; margin-bottom: var(--masifi-space-5); }
.masifi-hero-sub { font-size: var(--masifi-font-size-fluid-lg); color: var(--masifi-text-secondary); line-height: var(--masifi-font-leading-relaxed); max-width: 560px; margin-bottom: var(--masifi-space-8); }
.masifi-hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--masifi-space-4); flex-wrap: wrap; margin-bottom: var(--masifi-space-10); }
.masifi-hero-visual { width: 100%; max-width: 900px; border-radius: var(--masifi-radius-2xl); overflow: hidden; box-shadow: var(--masifi-shadow-6); border: 1px solid var(--masifi-border-default); }
.masifi-hero-visual img { width: 100%; height: auto; display: block; }
.masifi-hero-left { align-items: flex-start; text-align: left; }
.masifi-hero-left .masifi-hero-actions { justify-content: flex-start; }
@media (max-width: 768px) {
  .masifi-hero { min-height: 40vh; padding: var(--masifi-space-12) var(--masifi-space-5); }
  .masifi-hero-actions { flex-direction: column; align-items: stretch; }
}


/* --- 22-feature-card.css --- */
/* === FEATURE CARD — icon + title + description, grid-friendly === */
.masifi-feature-card { display: flex; flex-direction: column; gap: var(--masifi-space-4); padding: var(--masifi-space-6); background: var(--masifi-bg-elevated); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-xl); transition: all var(--masifi-duration-base) var(--masifi-ease-default); }
.masifi-feature-card:hover { border-color: var(--masifi-border-strong); box-shadow: var(--masifi-shadow-2); transform: translateY(-2px); }
.masifi-feature-icon { width: 44px; height: 44px; border-radius: var(--masifi-radius-lg); background: var(--masifi-surface-brand); display: flex; align-items: center; justify-content: center; color: var(--masifi-brand-primary); flex-shrink: 0; }
.masifi-feature-icon-success { background: var(--masifi-surface-success); color: var(--masifi-semantic-success); }
.masifi-feature-icon-warning { background: var(--masifi-surface-warning); color: var(--masifi-semantic-warning); }
.masifi-feature-icon-info { background: var(--masifi-surface-info); color: var(--masifi-semantic-info); }
.masifi-feature-title { font-size: var(--masifi-font-size-md); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); line-height: var(--masifi-font-leading-tight); }
.masifi-feature-desc { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-secondary); line-height: var(--masifi-font-leading-relaxed); flex: 1; }
.masifi-feature-link { font-size: var(--masifi-font-size-sm); color: var(--masifi-brand-primary); font-weight: var(--masifi-font-weight-semibold); text-decoration: none; display: inline-flex; align-items: center; gap: var(--masifi-space-1); margin-top: auto; transition: gap var(--masifi-duration-fast); }
.masifi-feature-link:hover { gap: var(--masifi-space-2); }
/* Horizontal variant */
.masifi-feature-card-h { flex-direction: row; align-items: flex-start; gap: var(--masifi-space-5); }


/* --- 23-pricing-card.css --- */
/* === PRICING CARD — name, price (mono), period, features list, CTA, featured variant === */
.masifi-pricing-card { display: flex; flex-direction: column; gap: var(--masifi-space-6); padding: var(--masifi-space-8) var(--masifi-space-6); background: var(--masifi-bg-elevated); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-2xl); transition: box-shadow var(--masifi-duration-base) var(--masifi-ease-default); }
.masifi-pricing-card:hover { box-shadow: var(--masifi-shadow-3); }
.masifi-pricing-card-featured { border-color: var(--masifi-brand-primary); background: var(--masifi-surface-brand); box-shadow: var(--masifi-shadow-2); }
.masifi-pricing-header { }
.masifi-pricing-name { font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--masifi-brand-primary); margin-bottom: var(--masifi-space-2); }
.masifi-pricing-price { display: flex; align-items: baseline; gap: var(--masifi-space-1); }
.masifi-pricing-currency { font-size: var(--masifi-font-size-xl); font-weight: var(--masifi-font-weight-bold); color: var(--masifi-text-primary); }
.masifi-pricing-amount { font-family: var(--masifi-font-family-mono); font-size: var(--masifi-font-size-4xl); font-weight: var(--masifi-font-weight-extrabold); color: var(--masifi-text-primary); line-height: 1; }
.masifi-pricing-period { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-tertiary); }
.masifi-pricing-desc { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-secondary); line-height: var(--masifi-font-leading-relaxed); margin-top: var(--masifi-space-2); }
.masifi-pricing-features { display: flex; flex-direction: column; gap: var(--masifi-space-3); list-style: none; margin: 0; padding: 0; flex: 1; }
.masifi-pricing-feature { display: flex; align-items: flex-start; gap: var(--masifi-space-3); font-size: var(--masifi-font-size-sm); color: var(--masifi-text-secondary); line-height: var(--masifi-font-leading-normal); }
.masifi-pricing-feature-icon { color: var(--masifi-semantic-success); flex-shrink: 0; margin-top: 1px; }
.masifi-pricing-feature-muted { color: var(--masifi-text-tertiary); }
.masifi-pricing-feature-muted .masifi-pricing-feature-icon { color: var(--masifi-text-tertiary); }
.masifi-pricing-cta { margin-top: auto; }
.masifi-pricing-badge { display: inline-block; padding: 2px var(--masifi-space-3); background: var(--masifi-brand-primary); color: var(--masifi-text-inverse); font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-bold); border-radius: var(--masifi-radius-full); margin-bottom: var(--masifi-space-3); }


/* --- 24-testimonial.css --- */
/* === TESTIMONIAL — quote with opening glyph, author avatar/name/role === */
.masifi-testimonial { display: flex; flex-direction: column; gap: var(--masifi-space-5); padding: var(--masifi-space-6); background: var(--masifi-bg-elevated); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-xl); position: relative; }
.masifi-testimonial-quote-glyph { position: absolute; top: var(--masifi-space-4); left: var(--masifi-space-5); font-size: 4rem; line-height: 1; color: var(--masifi-brand-primary); opacity: 0.12; font-family: Georgia, serif; pointer-events: none; user-select: none; }
.masifi-testimonial-body { padding-top: var(--masifi-space-4); }
.masifi-testimonial-text { font-size: var(--masifi-font-size-base); color: var(--masifi-text-primary); line-height: var(--masifi-font-leading-relaxed); font-style: italic; }
.masifi-testimonial-author { display: flex; align-items: center; gap: var(--masifi-space-4); margin-top: auto; }
.masifi-testimonial-author-info { }
.masifi-testimonial-name { font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); }
.masifi-testimonial-role { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); margin-top: 2px; }
.masifi-testimonial-stars { display: flex; gap: var(--masifi-space-1); color: var(--masifi-semantic-warning); font-size: var(--masifi-font-size-sm); margin-bottom: var(--masifi-space-4); }
/* Featured variant */
.masifi-testimonial-featured { border-color: var(--masifi-brand-primary); background: var(--masifi-surface-brand); }


/* --- 25-footer.css --- */
/* === FOOTER — multi-column (2fr + 3×1fr), brand + titled link columns, bottom bar === */
.masifi-footer { background: var(--masifi-bg-elevated); border-top: 1px solid var(--masifi-border-default); }
.masifi-footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--masifi-space-8); padding: var(--masifi-space-12) var(--masifi-space-6); }
.masifi-footer-brand { }
.masifi-footer-brand-logo { font-family: var(--masifi-font-family-display); font-size: var(--masifi-font-size-xl); font-weight: var(--masifi-font-weight-bold); color: var(--masifi-text-primary); margin-bottom: var(--masifi-space-3); }
.masifi-footer-brand-desc { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-tertiary); line-height: var(--masifi-font-leading-relaxed); max-width: 280px; }
.masifi-footer-col-title { font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--masifi-text-primary); margin-bottom: var(--masifi-space-4); }
.masifi-footer-links { display: flex; flex-direction: column; gap: var(--masifi-space-3); list-style: none; margin: 0; padding: 0; }
.masifi-footer-link { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-tertiary); text-decoration: none; transition: color var(--masifi-duration-fast) var(--masifi-ease-default); cursor: pointer; }
.masifi-footer-link:hover { color: var(--masifi-brand-primary); }
.masifi-footer-bottom { border-top: 1px solid var(--masifi-border-default); padding: var(--masifi-space-5) var(--masifi-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--masifi-space-4); flex-wrap: wrap; }
.masifi-footer-copy { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); }
.masifi-footer-bottom-links { display: flex; gap: var(--masifi-space-4); }
@media (max-width: 768px) {
  .masifi-footer-main { grid-template-columns: 1fr 1fr; gap: var(--masifi-space-8) var(--masifi-space-6); }
  .masifi-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .masifi-footer-main { grid-template-columns: 1fr; }
  .masifi-footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* --- 26-navbar.css --- */
/* === NAVBAR — top header, brand + nav links + actions. Variants: primary, solid, transparent === */
.masifi-navbar { display: flex; align-items: center; justify-content: space-between; gap: var(--masifi-space-6); padding: 0 var(--masifi-space-6); height: 60px; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--masifi-border-default); transition: all var(--masifi-duration-base) var(--masifi-ease-default); }
.masifi-navbar-solid { background: var(--masifi-bg-elevated); backdrop-filter: blur(8px); }
.masifi-navbar-primary { background: var(--masifi-brand-primary); border-color: transparent; }
.masifi-navbar-primary .masifi-navbar-link { color: rgba(255,255,255,0.8); }
.masifi-navbar-primary .masifi-navbar-link:hover { color: var(--masifi-text-inverse); background: rgba(255,255,255,0.1); }
.masifi-navbar-primary .masifi-navbar-brand { color: var(--masifi-text-inverse); }
.masifi-navbar-transparent { background: transparent; border-color: transparent; }
.masifi-navbar-brand { font-family: var(--masifi-font-family-display); font-size: var(--masifi-font-size-lg); font-weight: var(--masifi-font-weight-bold); color: var(--masifi-text-primary); text-decoration: none; display: flex; align-items: center; gap: var(--masifi-space-2); flex-shrink: 0; }
.masifi-navbar-nav { display: flex; align-items: center; gap: var(--masifi-space-1); flex: 1; }
.masifi-navbar-link { display: inline-flex; align-items: center; gap: var(--masifi-space-2); padding: var(--masifi-space-2) var(--masifi-space-3); border-radius: var(--masifi-radius-md); font-size: var(--masifi-font-size-sm); font-weight: var(--masifi-font-weight-medium); color: var(--masifi-text-secondary); text-decoration: none; transition: all var(--masifi-duration-fast) var(--masifi-ease-default); white-space: nowrap; cursor: pointer; }
.masifi-navbar-link:hover { color: var(--masifi-text-primary); background: var(--masifi-surface-brand); }
.masifi-navbar-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--masifi-radius-sm); }
.masifi-navbar-link.active { color: var(--masifi-brand-primary); background: var(--masifi-surface-brand); font-weight: var(--masifi-font-weight-semibold); }
.masifi-navbar-actions { display: flex; align-items: center; gap: var(--masifi-space-3); flex-shrink: 0; }
.masifi-navbar-divider { width: 1px; height: 20px; background: var(--masifi-border-default); }
/* Mobile hamburger */
.masifi-navbar-menu-btn { display: none; }
@media (max-width: 768px) {
  .masifi-navbar-nav { display: none; }
  .masifi-navbar-nav.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 60px; left: 0; right: 0; background: var(--masifi-bg-elevated); border-bottom: 1px solid var(--masifi-border-default); padding: var(--masifi-space-4); box-shadow: var(--masifi-shadow-3); gap: var(--masifi-space-1); z-index: 99; }
  .masifi-navbar-menu-btn { display: flex; }
}


/* --- 27-danger-zone-verify.css --- */
/* === DANGER ZONE — already in masifi-components.css as component 10 === */
/* This file intentionally empty — verified present in build/masifi-components.css */
/* .masifi-danger-zone, .masifi-danger-zone-title, .masifi-danger-zone-desc, .masifi-danger-zone-actions */


/* --- 28-icon-sizing.css --- */
/* === ICON SIZING — utility classes for Lucide SVGs === */
.masifi-icon-xs { width: 12px; height: 12px; flex-shrink: 0; }
.masifi-icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
.masifi-icon-md { width: 20px; height: 20px; flex-shrink: 0; }
.masifi-icon-lg { width: 24px; height: 24px; flex-shrink: 0; }
.masifi-icon-xl { width: 32px; height: 32px; flex-shrink: 0; }
.masifi-icon-2xl { width: 40px; height: 40px; flex-shrink: 0; }
/* Stroke width variants */
.masifi-icon-thin { stroke-width: 1.25; }
.masifi-icon-regular { stroke-width: 1.5; }
.masifi-icon-bold-stroke { stroke-width: 2; }
/* Color aliases */
.masifi-icon-brand { color: var(--masifi-brand-primary); }
.masifi-icon-muted { color: var(--masifi-text-tertiary); }
.masifi-icon-success { color: var(--masifi-semantic-success); }
.masifi-icon-warning { color: var(--masifi-semantic-warning); }
.masifi-icon-error { color: var(--masifi-semantic-error); }
.masifi-icon-info { color: var(--masifi-semantic-info); }


/* --- 29-chart-dark.css --- */
/* === CHART DARK MODE — lighter/brighter series colors for dark backgrounds === */
[data-masifi-mode="dark"] .masifi-chart,
.dark-mode .masifi-chart {
  --masifi-chart-1: #818CF8;
  --masifi-chart-2: #34D399;
  --masifi-chart-3: #FBBF24;
  --masifi-chart-4: #F87171;
  --masifi-chart-5: #A78BFA;
  --masifi-chart-6: #F472B6;
  --masifi-chart-7: #22D3EE;
  --masifi-chart-8: #A3E635;
}


/* --- 29-chart.css --- */
/* === CHART — container, legend, tooltip, data colors, axes === */
/* Works with Chart.js, Recharts, ApexCharts, or any library */
/* Library renders inside .masifi-chart-canvas; we style everything around it */

/* Data series colors — 8 accessible colors, distinct for colorblind */
:root {
  --masifi-chart-1: var(--masifi-brand-primary);
  --masifi-chart-2: #10B981;
  --masifi-chart-3: #F59E0B;
  --masifi-chart-4: #EF4444;
  --masifi-chart-5: #8B5CF6;
  --masifi-chart-6: #EC4899;
  --masifi-chart-7: #06B6D4;
  --masifi-chart-8: #84CC16;
}

/* Container */
.masifi-chart { background: var(--masifi-bg-elevated); border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-xl); padding: var(--masifi-space-5); box-shadow: var(--masifi-shadow-1); }

/* Header */
.masifi-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--masifi-space-4); flex-wrap: wrap; gap: var(--masifi-space-3); }
.masifi-chart-title { font-size: var(--masifi-font-size-md); font-weight: var(--masifi-font-weight-semibold); color: var(--masifi-text-primary); }
.masifi-chart-subtitle { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); margin-top: 2px; }
.masifi-chart-controls { display: flex; gap: var(--masifi-space-2); align-items: center; }

/* Canvas area — the library renders here */
.masifi-chart-canvas { position: relative; width: 100%; min-height: 200px; }
.masifi-chart-canvas canvas { width: 100% !important; height: auto !important; }

/* Legend */
.masifi-chart-legend { display: flex; flex-wrap: wrap; gap: var(--masifi-space-3); margin-top: var(--masifi-space-4); padding-top: var(--masifi-space-3); border-top: 1px solid var(--masifi-border-subtle); }
.masifi-chart-legend-item { display: flex; align-items: center; gap: var(--masifi-space-2); font-size: var(--masifi-font-size-xs); color: var(--masifi-text-secondary); cursor: pointer; transition: opacity var(--masifi-duration-fast) var(--masifi-ease-default); }
.masifi-chart-legend-item:hover { color: var(--masifi-text-primary); }
.masifi-chart-legend-item.is-hidden { opacity: 0.35; }
.masifi-chart-legend-dot { width: 8px; height: 8px; border-radius: var(--masifi-radius-full); flex-shrink: 0; }
.masifi-chart-legend-item:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: 2px; border-radius: var(--masifi-radius-sm); }

/* Tooltip (positioned by JS, styled by CSS) */
.masifi-chart-tooltip { position: absolute; z-index: 100; padding: var(--masifi-space-3) var(--masifi-space-4); background: var(--masifi-text-primary); color: var(--masifi-text-inverse); font-size: var(--masifi-font-size-xs); border-radius: var(--masifi-radius-md); box-shadow: var(--masifi-shadow-3); pointer-events: none; white-space: nowrap; }
.masifi-chart-tooltip-title { font-weight: var(--masifi-font-weight-semibold); margin-bottom: 4px; }
.masifi-chart-tooltip-row { display: flex; align-items: center; gap: var(--masifi-space-2); margin-bottom: 2px; }
.masifi-chart-tooltip-dot { width: 6px; height: 6px; border-radius: var(--masifi-radius-full); flex-shrink: 0; }
.masifi-chart-tooltip-value { font-family: var(--masifi-font-family-mono); font-weight: var(--masifi-font-weight-medium); margin-left: auto; padding-left: var(--masifi-space-3); }

/* Axis labels (for custom-rendered axes) */
.masifi-chart-axis-label { font-size: var(--masifi-font-size-xs); color: var(--masifi-text-tertiary); font-family: var(--masifi-font-family-mono); }
.masifi-chart-grid-line { stroke: var(--masifi-border-subtle); stroke-width: 1; }

/* Time range selector */
.masifi-chart-range { display: inline-flex; gap: 0; border: 1px solid var(--masifi-border-default); border-radius: var(--masifi-radius-md); overflow: hidden; }
.masifi-chart-range-btn { padding: var(--masifi-space-1) var(--masifi-space-3); font-size: var(--masifi-font-size-xs); font-weight: var(--masifi-font-weight-medium); color: var(--masifi-text-secondary); background: none; border: none; cursor: pointer; transition: all var(--masifi-duration-fast) var(--masifi-ease-default); font-family: var(--masifi-font-family-body); }
.masifi-chart-range-btn:hover { background: var(--masifi-bg-sunken); color: var(--masifi-text-primary); }
.masifi-chart-range-btn.active { background: var(--masifi-brand-primary); color: var(--masifi-text-inverse); }
.masifi-chart-range-btn:focus-visible { outline: 2px solid var(--masifi-brand-primary); outline-offset: -2px; }

/* Empty state inside chart */
.masifi-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; text-align: center; }
.masifi-chart-empty-icon { font-size: 2rem; opacity: 0.3; margin-bottom: var(--masifi-space-3); }
.masifi-chart-empty-text { font-size: var(--masifi-font-size-sm); color: var(--masifi-text-tertiary); }

/* Loading skeleton for chart */
.masifi-chart-loading { min-height: 200px; background: var(--masifi-border-default); border-radius: var(--masifi-radius-md); animation: masifi-pulse 1.5s infinite var(--masifi-ease-in-out); }

/* Responsive */
@media (max-width: 640px) {
  .masifi-chart-header { flex-direction: column; align-items: flex-start; }
  .masifi-chart-legend { gap: var(--masifi-space-2); }
}


/* --- 30-animations.css --- */
/* === ANIMATIONS — Open Props animation library adapted for Masifi === */
/* Usage: animation: var(--masifi-animation-fade-in) forwards; */
/* All animations respect prefers-reduced-motion via 00-reduced-motion.css */

/* Animation tokens — shorthand values referencing our easing tokens */
:root {
  --masifi-animation-fade-in: masifi-fade-in .5s var(--masifi-ease-default);
  --masifi-animation-fade-in-bloom: masifi-fade-in-bloom 2s var(--masifi-ease-default);
  --masifi-animation-fade-out: masifi-fade-out .5s var(--masifi-ease-default);
  --masifi-animation-fade-out-bloom: masifi-fade-out-bloom 2s var(--masifi-ease-default);
  --masifi-animation-scale-up: masifi-scale-up .5s var(--masifi-ease-default);
  --masifi-animation-scale-down: masifi-scale-down .5s var(--masifi-ease-default);
  --masifi-animation-slide-out-up: masifi-slide-out-up .5s var(--masifi-ease-default);
  --masifi-animation-slide-out-down: masifi-slide-out-down .5s var(--masifi-ease-default);
  --masifi-animation-slide-out-right: masifi-slide-out-right .5s var(--masifi-ease-default);
  --masifi-animation-slide-out-left: masifi-slide-out-left .5s var(--masifi-ease-default);
  --masifi-animation-slide-in-up: masifi-slide-in-up .5s var(--masifi-ease-default);
  --masifi-animation-slide-in-down: masifi-slide-in-down .5s var(--masifi-ease-default);
  --masifi-animation-slide-in-right: masifi-slide-in-right .5s var(--masifi-ease-default);
  --masifi-animation-slide-in-left: masifi-slide-in-left .5s var(--masifi-ease-default);
  --masifi-animation-shake-x: masifi-shake-x .75s var(--masifi-ease-out);
  --masifi-animation-shake-y: masifi-shake-y .75s var(--masifi-ease-out);
  --masifi-animation-shake-z: masifi-shake-z 1s var(--masifi-ease-in-out);
  --masifi-animation-spin: masifi-spin 2s linear infinite;
  --masifi-animation-ping: masifi-ping 5s var(--masifi-ease-out) infinite;
  --masifi-animation-blink: masifi-blink 1s var(--masifi-ease-out) infinite;
  --masifi-animation-float: masifi-float 3s var(--masifi-ease-in-out) infinite;
  --masifi-animation-bounce: masifi-bounce 2s var(--masifi-ease-squish) infinite;
  --masifi-animation-pulse: masifi-pulse 2s var(--masifi-ease-out) infinite;
}

/* Keyframes — prefixed with masifi- to avoid conflicts */

/* Fade */
@keyframes masifi-fade-in { to { opacity: 1; } }
@keyframes masifi-fade-out { to { opacity: 0; } }
@keyframes masifi-fade-in-bloom {
  0%   { opacity: 0; filter: brightness(1) blur(20px); }
  10%  { opacity: 1; filter: brightness(2) blur(10px); }
  100% { opacity: 1; filter: brightness(1) blur(0); }
}
@keyframes masifi-fade-out-bloom {
  0%   { opacity: 1; filter: brightness(1) blur(0); }
  10%  { opacity: 1; filter: brightness(2) blur(10px); }
  100% { opacity: 0; filter: brightness(1) blur(20px); }
}

/* Scale */
@keyframes masifi-scale-up { to { transform: scale(1.25); } }
@keyframes masifi-scale-down { to { transform: scale(0.75); } }

/* Slide out */
@keyframes masifi-slide-out-up { to { transform: translateY(-100%); } }
@keyframes masifi-slide-out-down { to { transform: translateY(100%); } }
@keyframes masifi-slide-out-right { to { transform: translateX(100%); } }
@keyframes masifi-slide-out-left { to { transform: translateX(-100%); } }

/* Slide in */
@keyframes masifi-slide-in-up { from { transform: translateY(100%); } }
@keyframes masifi-slide-in-down { from { transform: translateY(-100%); } }
@keyframes masifi-slide-in-right { from { transform: translateX(-100%); } }
@keyframes masifi-slide-in-left { from { transform: translateX(100%); } }

/* Shake */
@keyframes masifi-shake-x {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5%); }
  40% { transform: translateX(5%); }
  60% { transform: translateX(-5%); }
  80% { transform: translateX(5%); }
}
@keyframes masifi-shake-y {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-5%); }
  40% { transform: translateY(5%); }
  60% { transform: translateY(-5%); }
  80% { transform: translateY(5%); }
}
@keyframes masifi-shake-z {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-2deg); }
  40% { transform: rotate(2deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
}

/* Continuous */
@keyframes masifi-spin { to { transform: rotate(1turn); } }
@keyframes masifi-ping { 90%, 100% { transform: scale(2); opacity: 0; } }
@keyframes masifi-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes masifi-float { 50% { transform: translateY(-25%); } }
@keyframes masifi-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  25% { transform: translateY(-20%); }
  40% { transform: translateY(-3%); }
}
@keyframes masifi-pulse { 50% { transform: scale(0.9, 0.9); } }

/* Dark mode bloom variants */
[data-masifi-mode="dark"] {
  @keyframes masifi-fade-in-bloom {
    0%   { opacity: 0; filter: brightness(1) blur(20px); }
    10%  { opacity: 1; filter: brightness(0.5) blur(10px); }
    100% { opacity: 1; filter: brightness(1) blur(0); }
  }
  @keyframes masifi-fade-out-bloom {
    0%   { opacity: 1; filter: brightness(1) blur(0); }
    10%  { opacity: 1; filter: brightness(0.5) blur(10px); }
    100% { opacity: 0; filter: brightness(1) blur(20px); }
  }
}

/* Utility classes — apply animation directly */
.masifi-animate-fade-in { animation: var(--masifi-animation-fade-in) forwards; opacity: 0; }
.masifi-animate-fade-out { animation: var(--masifi-animation-fade-out) forwards; }
.masifi-animate-scale-up { animation: var(--masifi-animation-scale-up) forwards; }
.masifi-animate-scale-down { animation: var(--masifi-animation-scale-down) forwards; }
.masifi-animate-slide-in-up { animation: var(--masifi-animation-slide-in-up) forwards; }
.masifi-animate-slide-in-down { animation: var(--masifi-animation-slide-in-down) forwards; }
.masifi-animate-slide-in-right { animation: var(--masifi-animation-slide-in-right) forwards; }
.masifi-animate-slide-in-left { animation: var(--masifi-animation-slide-in-left) forwards; }
.masifi-animate-shake-x { animation: var(--masifi-animation-shake-x); }
.masifi-animate-shake-y { animation: var(--masifi-animation-shake-y); }
.masifi-animate-spin { animation: var(--masifi-animation-spin); }
.masifi-animate-ping { animation: var(--masifi-animation-ping); }
.masifi-animate-bounce { animation: var(--masifi-animation-bounce); }
.masifi-animate-pulse { animation: var(--masifi-animation-pulse); }
.masifi-animate-float { animation: var(--masifi-animation-float); }


/* --- 31-brand-gradients.css --- */
/* === BRAND GRADIENTS — Masifi sub-brand + accent gradient tokens === */
/* Each gets 3 gradients: primary, soft, radial */
/* Usage: background-image: var(--masifi-gradient-brand); */

/* Cloud (indigo) — default */
:root {
  --masifi-gradient-brand: linear-gradient(135deg, #4F46E5, #6366F1);
  --masifi-gradient-brand-soft: linear-gradient(135deg, #E0E7FF, #EEF2FF);
  --masifi-gradient-brand-radial: radial-gradient(circle at top right, #6366F1, rgba(99,102,241,0));
}

/* --- SUB-BRANDS --- */

/* Factura (emerald) */
.masifi-brand-factura {
  --masifi-gradient-brand: linear-gradient(135deg, #059669, #34D399);
  --masifi-gradient-brand-soft: linear-gradient(135deg, #D1FAE5, #ECFDF5);
  --masifi-gradient-brand-radial: radial-gradient(circle at top right, #34D399, rgba(52,211,153,0));
}

/* Engage (orange) */
.masifi-brand-engage {
  --masifi-gradient-brand: linear-gradient(135deg, #F97316, #FB923C);
  --masifi-gradient-brand-soft: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  --masifi-gradient-brand-radial: radial-gradient(circle at top right, #FB923C, rgba(251,146,60,0));
}

/* Work (sky blue) */
.masifi-brand-work {
  --masifi-gradient-brand: linear-gradient(135deg, #0EA5E9, #38BDF8);
  --masifi-gradient-brand-soft: linear-gradient(135deg, #E0F2FE, #F0F9FF);
  --masifi-gradient-brand-radial: radial-gradient(circle at top right, #38BDF8, rgba(56,189,248,0));
}

/* --- ACCENT STYLES --- */

/* Teal (was Mail) */
.masifi-accent-teal {
  --masifi-gradient-brand: linear-gradient(135deg, #0D9488, #14B8A6);
  --masifi-gradient-brand-soft: linear-gradient(135deg, #CCFBF1, #F0FDFA);
  --masifi-gradient-brand-radial: radial-gradient(circle at top right, #14B8A6, rgba(20,184,166,0));
}

/* Amber (was Extra) */
.masifi-accent-amber {
  --masifi-gradient-brand: linear-gradient(135deg, #D97706, #F59E0B);
  --masifi-gradient-brand-soft: linear-gradient(135deg, #FEF3C7, #FFFBEB);
  --masifi-gradient-brand-radial: radial-gradient(circle at top right, #F59E0B, rgba(245,158,11,0));
}

/* Violet (was Engage) */
.masifi-accent-violet {
  --masifi-gradient-brand: linear-gradient(135deg, #8B5CF6, #A78BFA);
  --masifi-gradient-brand-soft: linear-gradient(135deg, #EDE9FE, #F5F3FF);
  --masifi-gradient-brand-radial: radial-gradient(circle at top right, #A78BFA, rgba(167,139,250,0));
}


/* --- 32-brand-factura.css --- */
/* === SUB-BRAND: MASIFI FACTURA — Emerald 600 === */
/* Electronic invoicing. Primary #059669, Hover #047857. */
/* Accent #34D399, Highlight #D1FAE5. */
/* Usage: <div class="masifi-brand-factura">...components auto-recolor...</div> */

.masifi-brand-factura {
  --masifi-brand-primary: #059669;
  --masifi-brand-primary-glow: #10B981;
  --masifi-brand-primary-hover: #047857;
  --masifi-brand-primary-active: #065F46;
  --masifi-brand-primary-accent: #34D399;
  --masifi-brand-primary-highlight: #D1FAE5;
  --masifi-surface-brand: rgba(5,150,105,0.06);
  --masifi-input-focus-ring: rgba(5,150,105,0.25);
}

[data-masifi-mode="dark"] .masifi-brand-factura {
  --masifi-brand-primary: #34D399;
  --masifi-brand-primary-hover: #6EE7B7;
  --masifi-brand-primary-glow: #34D399;
  --masifi-surface-brand: rgba(5,150,105,0.1);
  --masifi-input-focus-ring: rgba(5,150,105,0.35);
}


/* --- 33-accent-violet.css --- */
/* === ACCENT STYLE: VIOLET === */
/* Auxiliary palette. Usage: <div class="masifi-accent-violet">...components auto-recolor...</div> */

.masifi-accent-violet {
  --masifi-brand-primary: #8B5CF6;
  --masifi-brand-primary-glow: #A78BFA;
  --masifi-brand-primary-hover: #7C3AED;
  --masifi-brand-primary-active: #6D28D9;
  --masifi-brand-primary-accent: #C4B5FD;
  --masifi-brand-primary-highlight: #EDE9FE;
  --masifi-surface-brand: rgba(139,92,246,0.06);
  --masifi-input-focus-ring: rgba(139,92,246,0.25);
}

[data-masifi-mode="dark"] .masifi-accent-violet {
  --masifi-brand-primary: #A78BFA;
  --masifi-brand-primary-hover: #C4B5FD;
  --masifi-brand-primary-glow: #A78BFA;
  --masifi-surface-brand: rgba(139,92,246,0.1);
  --masifi-input-focus-ring: rgba(139,92,246,0.35);
}


/* --- 33-brand-engage.css --- */
/* === SUB-BRAND: MASIFI ENGAGE — Orange === */
/* Marketing, campaigns, engagement. Primary #F97316, Hover #EA580C. */
/* Accent #FB923C, Highlight #FFEDD5. */
/* Usage: <div class="masifi-brand-engage">...components auto-recolor...</div> */

.masifi-brand-engage {
  --masifi-brand-primary: #F97316;
  --masifi-brand-primary-glow: #FB923C;
  --masifi-brand-primary-hover: #EA580C;
  --masifi-brand-primary-active: #C2410C;
  --masifi-brand-primary-accent: #FB923C;
  --masifi-brand-primary-highlight: #FFEDD5;
  --masifi-surface-brand: rgba(249,115,22,0.06);
  --masifi-input-focus-ring: rgba(249,115,22,0.25);
}

[data-masifi-mode="dark"] .masifi-brand-engage {
  --masifi-brand-primary: #FB923C;
  --masifi-brand-primary-hover: #FDBA74;
  --masifi-brand-primary-glow: #FB923C;
  --masifi-surface-brand: rgba(249,115,22,0.1);
  --masifi-input-focus-ring: rgba(249,115,22,0.35);
}


/* --- 35-brand-work.css --- */
/* === SUB-BRAND: MASIFI WORK — Sky Blue === */
/* Productivity, project management, collaboration. Primary #0EA5E9, Hover #0284C7. */
/* Accent #38BDF8, Highlight #BAE6FD. */
/* Usage: <div class="masifi-brand-work">...components auto-recolor...</div> */

.masifi-brand-work {
  --masifi-brand-primary: #0EA5E9;
  --masifi-brand-primary-glow: #38BDF8;
  --masifi-brand-primary-hover: #0284C7;
  --masifi-brand-primary-active: #0369A1;
  --masifi-brand-primary-accent: #38BDF8;
  --masifi-brand-primary-highlight: #BAE6FD;
  --masifi-surface-brand: rgba(14,165,233,0.06);
  --masifi-input-focus-ring: rgba(14,165,233,0.25);
}

[data-masifi-mode="dark"] .masifi-brand-work {
  --masifi-brand-primary: #38BDF8;
  --masifi-brand-primary-hover: #7DD3FC;
  --masifi-brand-primary-glow: #0369A1;
  --masifi-surface-brand: rgba(14,165,233,0.1);
  --masifi-input-focus-ring: rgba(14,165,233,0.35);
}


/* --- 36-accent-teal.css --- */
/* === ACCENT STYLE: TEAL === */
/* Auxiliary palette. Usage: <div class="masifi-accent-teal">...components auto-recolor...</div> */

.masifi-accent-teal {
  --masifi-brand-primary: #0D9488;
  --masifi-brand-primary-glow: #14B8A6;
  --masifi-brand-primary-hover: #0F766E;
  --masifi-brand-primary-active: #115E59;
  --masifi-brand-primary-accent: #5EEAD4;
  --masifi-brand-primary-highlight: #CCFBF1;
  --masifi-surface-brand: rgba(13,148,136,0.06);
  --masifi-input-focus-ring: rgba(13,148,136,0.25);
}

[data-masifi-mode="dark"] .masifi-accent-teal {
  --masifi-brand-primary: #14B8A6;
  --masifi-brand-primary-hover: #5EEAD4;
  --masifi-brand-primary-glow: #14B8A6;
  --masifi-surface-brand: rgba(13,148,136,0.1);
  --masifi-input-focus-ring: rgba(13,148,136,0.35);
}


/* --- 37-accent-amber.css --- */
/* === ACCENT STYLE: AMBER === */
/* Auxiliary palette. Usage: <div class="masifi-accent-amber">...components auto-recolor...</div> */

.masifi-accent-amber {
  --masifi-brand-primary: #D97706;
  --masifi-brand-primary-glow: #F59E0B;
  --masifi-brand-primary-hover: #B45309;
  --masifi-brand-primary-active: #92400E;
  --masifi-brand-primary-accent: #FCD34D;
  --masifi-brand-primary-highlight: #FEF3C7;
  --masifi-surface-brand: rgba(217,119,6,0.06);
  --masifi-input-focus-ring: rgba(217,119,6,0.25);
}

[data-masifi-mode="dark"] .masifi-accent-amber {
  --masifi-brand-primary: #F59E0B;
  --masifi-brand-primary-hover: #FCD34D;
  --masifi-brand-primary-glow: #F59E0B;
  --masifi-surface-brand: rgba(217,119,6,0.1);
  --masifi-input-focus-ring: rgba(217,119,6,0.35);
}